index.js configuration with react-native? - react-native

Question

I'm currently trying to implement react-navigation into my RN app. RN documentation seems to say that index.js is a required file for RN projects but the first react-navigation example shows all of the initial code in App.js with no index.js file:
https://snack.expo.io/#react-navigation/auth-flow-v3
Is the index.js file only required for standalone RN projects which are not built on Expo? Maybe Expo handles this automatically behind the scenes? The index.js file appears to be required for my standalone RN app and the render() implementation appears to be required in index.js as well. The problem appears to be that the render() implementation in my index.js appears to override whatever is in App.js. Ie I'm expecting initialRouteName: 'AuthLoading' in the App.js configuration to redirect to my AuthLoading component but App.js logic appears to get superceded by the index.js render() implementation.
So what is the proper way to get my index.js and App.js to support react-navigation integration? I'm open to ditching index.js for an alternative implementation/configuration, I just have it in my project because my understanding is that it's required.

Answer 1

I don't really get your confusion but still, this is how it would look.
First, your index.js would be completely normal. It has to look like this or similar:
//index.js
import { AppRegistry } from 'react-native'
import App from './App'
import { name as appName } from './app.json'
AppRegistry.registerComponent(appName, () => App)
This is just normal, right? Then, let's see how it would be in App.jsx
//App.jsx
import React, { Component } from 'react'
import AppContainer from './fromSomeRoute'//replace by your own
export default class App extends Component {
render() {
return (
<AppContainer />
)
}
}
And what is exactly AppContainer? just the component you exported from the file you are using for react-navigation. In here, there is no need to create a class or something like that, you can just create it like this
//fromSomeRoute.jsx
import React from 'react'
import { createStackNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation'
import YourScreen from './YourPathToYourScreen'
const YourScreenStack = createStackNavigator({
YourScreen: {
screen: YourScreen,
navigationOptions: () => ({ //Look documentation for further info
header: null,
}),
},
})
const AppContainer = createAppContainer(
createSwitchNavigator(
{
Screen: YourScreenStack,
//Create more Stacks and add them in here
},
{
initialRouteName: 'Screen',
},
),
)
export default AppContainer