Routing and state management in React Native JSS apps

Version: 19.x

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.

Client-side routing

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

RequestResponse

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.

RequestResponse

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.

Do you have some feedback for us?

If you have suggestions for improving this article,