Simplifying State Management in React Native/

...

/

Planning the Required Surfaces and Components

Planning the Required Surfaces and Components

Learn how to organize the app into surfaces, plan reusable components, and address data requirements.

We'll cover the following...

Required app surfaces

We can divide our app into surfaces and then break them down into smaller, reusable components. Our app will need the following surfaces:

  • Feed (which is also our home surface)

  • Profile

  • Favorites

  • Conversations

  • Messaging

We have these surfaces set up as files in our project. Let’s take a quick look at the free design file we’ll be using for our app.

Let’s zoom in on the home page:

The “Conversations” surface

You might have noticed there are five items in the bottom tabs on the design. Which one are we missing? The chat bubble. Let’s go ahead and add this surface to our app.

Here’s what our “Conversations” surface looks like so far:

Javascript (babel-node)
import React from "react";
import { View, Text } from "react-native";
export const Conversations = () => {
  return (
    <View>
      <Text>this will be the chat screen</Text>
    </View> );
};

We have created a React component for a “Conversations” surface for our app, displaying a simple view with text indicating that it will serve as the chat screen.

And here’s the App.js file with the newly added screen on line 26:

Javascript (babel-node)
import "react-native-gesture-handler";
import React, { useState } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Login } from "./src/surfaces/Login";
import { Feed } from "./src/surfaces/Feed";
import { Profile } from "./src/surfaces/Profile";
import { Favorites } from "./src/surfaces/Favorites";
import { AddPost } from "./src/surfaces/AddPost";
import { Conversations } from "./src/surfaces/Conversations";
// Create Stack Navigator
const Stack = createStackNavigator();
// Create Bottom Tab Navigator
const Tab = createBottomTabNavigator();
// Home Screen component rendering Tab Navigator
function Home() {
  return (
    // Tab Navigator with multiple screens
    <Tab.Navigator>
      <Tab.Screen name='Feed' component={Feed} />
      <Tab.Screen name='Conversations' component={Conversations} />
      <Tab.Screen name='AddPost' component={AddPost} />
      <Tab.Screen name='Favorites' component={Favorites} />
      <Tab.Screen name='Profile' component={Profile} />
    </Tab.Navigator>
  );
} 
// ... Rest of your code
[...]

Okay! Looking good so far!

Reusable components

...