Routing and state management in React Native JSS apps

Abstract

Overview of how React Native apps built with JSS handle routing and state management

React Native applications built with JSS use dynamic routing based on the Layout Service in connected and connected tunnel modes or local route data files in disconnected mode, and uses route/navigation changes to trigger app state changes. Therefore, tracing the primary execution flow begins with the route configuration.

Every route is defined in the src/App.js file using the react-navigation NPM package. For example:

import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'

const Navigator = createStackNavigator({
  Home: { screen: Home },
  Styleguide: { screen: Styleguide }
}, {
  initialRouteName: 'Home'
})

const AppNavigator = createAppContainer(Navigator)

export default AppNavigator

Every route includes a <Route/> component with a render function that handles the rendering of components based on data provided in the properties of the route.

const Home = ({ navigation }) => (
  <Route 
    path='/'
    render={({ data }) =>
      <Placeholder name='jss-main' rendering={data} navigation={navigation} />
    }
  />
);

The <Route/> component is defined in the /src/screens/Route.js file. When a route/screen is accessed in the client, the application acquires the Layout Service for the current route. The route and language state of the app is maintained. The route data determine the remaining structure of the route, defining which components and their content data live in each placeholder.