Django & React-Native: SPA & Nesting Navigator

As the pages got complicated especially with the login flow, Navigators needed to be divided. In this chapter, I will discuss about how to deal with Django-SPA navigator structure, and nesting navigator.

Django - React Native navigator

While I was dividing screens, SPA(Single Page Application) was not familiar with me. The bottom line is, we do not need a Django router library. Router makes url routes automatically, but if you separated urls in urls.py, the backend is ready.

Navigator

React Navigator keeps changing versions rapidly, so please be careful if the version is not old when you refer to other resources. This code is based on version 6.x.

[App.js]
import { createStackNavigator } from '@react-navigation/stack';
import Login from './screens/login';
import resetPassword from './screens/resetPassword';

const LoginStack = createStackNavigator();
function LoginStackScreen() {
  return (
    <LoginStack.Navigator>
      <LoginStack.Screen name='Login' component={Login} />
      <LoginStack.Screen name='resetPassword' component={resetPassword} />
    </LoginStack.Navigator>
  )
}

This is the basic structure of one Stack. Stack consists of several screens for one function, which here is representing Login flow. We can think of one stack as a block of one function flow. Details are more accurate and easy at the React Navigator documentation.

At the every screens, you can separately add GET fetch to connect with Django backend urls. Also, those navigator codes would actually need to be separated from App.js. Because I am trying to show everything at once, so please keep it in mind.

Nested Navigators

[App.js]
import { NavigationContainer } from '@react-navigation/native';

const MainStack = createStackNavigator();

export default function App() {
  const isSignedIn = useSelector(selectIsSignedIn);
  return (
    <NavigationContainer>
      {isSignedIn == true ? (
        <MainStack.Navigator>
          <MainStack.Screen name="MainMemos" component={MemoStackScreen} />
          <MainStack.Screen name="MainUsers" component={UserStackScreen} />
        </MainStack.Navigator>
      ) : (
        <LoginStackScreen />
      )}
    </NavigationContainer>
  );
}

Let's assume that you made 'MainMemos' and 'MainUsers' stack, same as Login stack structure. And then, wrap those MainMemos & MainUsers stacks into MainStack. We will not talk about useSelector() for now, so please focus on the return context in App() function after making MainStack.

Now, we have MainStack and LoginStack blocks. First, we need to wrap the whole return value with "NavigationContainer". And due to the variable "isSignedIn"(boolean) to check if the user is signed in or not, we can show either the MainStack, or the LoginStack.

Then, place the stacks as we prefer. You may have question about how to deal with isSignedIn variable. This type of variable is a global state which we can use any screens. We will discuss about it at the next chapter.