Simplifying State Management in React Native/

...

/

Creating and Styling the Conversations Surface

Creating and Styling the Conversations Surface

Learn how to set up Conversations surface with stack navigation for message parameters, and integrate Conversations into the main stack navigator for bottom tab visibility.

We'll cover the following...

Let’s now move forward to the “Conversations” surface.

Creating the ConversationsNavigation component

Our “Conversations” surface needs to be wrapped in a new navigator because we want our users to be able to go into the conversation details. We’ll add a new component called ConversationsNavigation, where we will create a Stack Navigator:

Press + to interact
// src/surfaces/ConversationsNavigation.js
import React from "react";
import { Conversations } from "./Conversations";
import { Messages } from "./Messages";
import { createStackNavigator } from "@react-navigation/stack";
// Create a stack navigator
const Stack = createStackNavigator();
export const ConversationsNavigation = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        //... Add any common screen options here
      }}
    >
      {/* Screen for displaying the list of conversations */}
      <Stack.Screen
        name='Conversations'
        component={Conversations}
      />
      {/* Screen for displaying messages with dynamic title */}
      <Stack.Screen
        name='Messages'
        component={Messages}
        options={({ route }) => ({
          title: route.params.name,
          //... Add any specific options for the Messages screen
        })}
      />
    </Stack.Navigator>
  );
};

The most interesting option we’re setting in this component is on lines 27–28. This tells React Navigation to use a route parameter as the header title for the Messages surface.

If we test our app now, we will notice this is not happening yet. We also need to set this parameter at the time the user will choose to go to the Messages surface, which means we need to set it when Conversation is clicked. We will create the Conversations surface with an input box at the top, followed by a list of conversations in FlatList. Each item in the ...