{
  "$type": "site.standard.document",
  "path": "/getting-started-with-react-navigation/",
  "publishedAt": "2017-08-20T19:51:40.000Z",
  "site": "at://did:plc:6gssgguzeecdttuw4gpdshg2/site.standard.publication/self",
  "tags": [
    "react",
    "react-native",
    "react-navigation",
    "coding"
  ],
  "textContent": "I recently had some time to try React Navigation. It's a very nice routing solution to use in your React Native applications. Let's walkthrough a simple example of using React Navigation in a project.\n\nProject Setup\n\nWe will use create-react-native-app for this demo. Ensure you have it installed via npm install -g create-react-native-app. We will start by creating a new project:\n\n[Code block]\n\nIf you run yarn run ios you'll see a simple single page demo application.\n\nAdding React Navigation\n\nWe will install React Navigation using yarkpkg:\n\n[Code block]\n\nAdding Screens\n\nReact Navigation lets us easily route from one screen to an other. So let's start by creating a few simple screens to start.\n\n[Embedded code (GitHub Gist)]\n\nIn the example above we create three components that render a view. Each of these will become a screen in our app that we can navigate to.\n\nCreating a navigator\n\nWe will use a StackNavigator for this example.\n\n[Embedded code (GitHub Gist)]\n\nAbove we create a StackNavigator with three screens. We provide it some coloring and a default title. I'll elaborate a bit more on styling the navigation bar later in this article.\n\nIf you load up the app you should now see Screen1 with a navigation bar.\n\n[Embedded code playground]\n\nWell, we are 1/2 there already. We now need to add some navigation so we can move between screens.\n\nNavigating\n\nNow we will expand Screen 1 so we can click a button to navigate to Screen2 or Screen2.\n\n[Embedded code (GitHub Gist)]\n\nAs you can see we are binding the onPress event to navigate to the other screens in our app.\n\nNote: this.props.navigation is not available to the child components on a given screen. You'll need to pass it down to the child components if you want to navigate from them.\n\nStyling React Navigation\n\nHere are what all style related properties I passed into the StackNavigator do:\n\n[Code block]\n\nCompleted Demo\n\nAnd here you have it. A rather simple example of how to get started using React Navigation in a React Native project.\n\n[Embedded code playground]\n\nIf you want to check out this code and run it locally, I've also uploaded this demo to GitHub: https://github.com/brookslyrette/ReactNavigationDemo\n\nRead the original post with all embeds and interactive content at https://rants.broonix.ca/getting-started-with-react-navigation/",
  "title": "Getting started with React Navigation"
}