react-native-firebase/codorials/authentication-with-firebase/project-structure.md

Project Structure

Although it may seem trivial, having a good initial project structure ensures you code will be clean and reusable. The following step gives an opinionated guide to how this might look, which will work across both Android & iOS.

Entry file

Every fresh React Native project contains two key files, an index.android.js & a index.ios.js files which currently individually render a simple React component with basic styling. Rather than having two separate files, we're going to create a single file so both Android & iOS use it.

We'll achieve this by creating a src directory where our own code for the app will live. Create the directory with an index.js file, so your project structure resembles the following:

 - node_modules/
 - android/
 - ios/
 - src/
 -- index.js
 - index.js

Now we can reference our bootstrap file in the index.js file, so both our platform share the same entry point:

// index.js

import { AppRegistry } from 'react-native';
import bootstrap from './src';

AppRegistry.registerComponent('RNFirebaseStarter', () => bootstrap());

Bootstrapping your project

You may have noticed before, but the bootstrap import is a function. This allows us to setup or initialize any external modules before our React based application kick starts (such as react-native-i18n).

Lets go ahead and setup our bootstrap file:

// src/index.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

function bootstrap() {

  // Init any external libraries here!

  return class extends Component {

    render() {
      return (
        <View>
          <Text>
            Bootstrapped!
          </Text>
        </View>
      );
    }
  }
}

export default bootstrap;

Although this function simply returns a basic React component, later we'll be able to see the power of having a bootstrap file which consumes our entire application.

Go ahead and boot up your app onto your emulator. You should simply be presented with a plain screen with the words "Bootstrapped!".


Although a good starting point, we want to separate we'll our business logic out of the bootstrap file, keeping it purely for app initialization purposes. This can simply be done by creating a basic React component called App.js, which will also live in the src directory;

// src/App.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class App extends Component {

    render() {
      return (
        <View>
          <Text>
            Bootstrapped!
          </Text>
        </View>
      );
    }

}

export default App;

Now we can reference this component within our bootstrap setup and return it from the bootstrap component:

// src/index.js

import React, { Component } from 'react';
import App from './App';

function bootstrap() {

  // Init any external libraries here!

  return class extends Component {

    render() {
      return (
        <App />
      );
    }
  }
}

export default bootstrap;