I have spent hours trying to figure out how to actually use the React Native Stacknavigator to navigate between screens. All the tutorials and guides seem to be missing important information, and the official React Native documentation is truly lacking in substance. So I want to save you some headache and give you a quick and easy setup to using the React Native StackNavigator.
You need to Eject
If you created your react-native project using the command:
react-native init projectName
Then you can skip this step. However, if you use the command:
create-react-native-app
Then you will need to eject your app. I could not find a way to use the Stacknavigator without ejecting my app. To eject your app run the following command:
npm run eject
Once you do that, you should have an index.android.js file and a separate index.ios.js file.
Importing App
Clear the contents in your index.ios.js and index.android.js file. Then add the following line at the top of both files:
import App from './App';
Now in your App.js file import the StackNavigator:
import { StackNavigator } from 'react-navigation';
Next, right underneath the line that reads export default class, initialize your StackNavigator:
static navigationOptions = {
title: 'Stories for Reddit',
headerStyle: {
backgroundColor: '#212121',
},
headerTitleStyle: {
color: '#fff'
}
};
In this case, I also added additional props for the headerTitle and headerStyle. The StackNavigation can be used on every screen that you plan using. Therefore, I will also copy the above lines to any other class that I plan to use as a screen. Within each class, I can change the title to whatever I want the screen to be.
Adding StackNavigator
At the very bottom of App.js add the stackNavigator:
const stories= StackNavigator({
Home: { screen: App },
Viewer: { screen: Viewer },
});
I initialized the StackNavigator with the name stories. Then I supplied two screens, one called home and the other called viewer. These names are arbitrary and could be changed to whatever I want. However, the actual screen property needs to refer to the class you want to use. So with the home screen, I want to use my default App.js class. With the viewer screen, I am using another class called Viewer. Remember, you need to import these classes like you would with any other component. Unlike the stackNavigationOptions, this only needs to exist in your App.js file and nowhere else.
App Registry
At the bottom of App.js (after you declared the StackNavigator) make sure that you have the following line:
AppRegistry.registerComponent('myAp', () => stories);
In the register component, the first parameter should match your App’s package name, and the callback function variable (_stories _in this case) needs to match your stacknavigator name.
Using StackNavigator
To actually navigate to another screen, here’s the code that I used:
render()
const { navigate } = this.props.navigation;
return(
<FlatList
data={this.state.data}
keyExtractor={item => item.title}
renderItem={({ item }) => <TouchableOpacity onPress={() => <strong>navigate('Viewer', { stories: item.items })}</strong>><Story title={item.title} profile={item.profile} /></TouchableOpacity >}
/>
)
In this example, I used a FlatList to navigate to another screen when you press on an item in the list. I also passed additional props to that screen. No matter how you implement it, make sure that you declare the following line inside your render but before your return:
const { navigate } = this.props.navigation;
Then in your component’s onPress function put that following:
navigate('Viewer')
This needs to be repeated on every screen that you want to navigate from and not just your App.js screen.
That’s it, now you have all the information you need to navigate react native like a pro!