SINGLE APP FOR WEB, IOS, AND ANDROID USING REACT-NATIVE ( Components ) – PART 2

This is the second part of the article. In the previous part, we have examined how to configure a project and run it on all environments (iOS, Android, and Web). In this part, we want to explain how to create different containers and components to develop the logic and UI part of our project on various platforms.

Creating a single application for every environment (Web, iOS, and Android) with one codebase.

Concept

As we know, Web projects are working with DOM, and native projects have their native components. So we need to separate the UI parts of the different platforms to solve the issue.

For this purpose, we should keep the logic codes apart from the UI and put them in the different components called containers. For separating the UI parts at platforms, we can use the following two extensions: .native.tsx , .web.tsx

At the rest of the article, I explained the listed majors:

1. How to create a mock server for getting data
2. How to create container for the logic
3. How to create components for the UI of the application

Prerequisite

For calling AJAX request axios the library is needed, so let’s execute the following command at the terminal:

$ npm install axios

Mock Server

There are many libraries and tools to make a mock server for your project; I chose the mocks-server to create the mock server. For installing this lib execute the following command in the terminal of the project:

$ npm i @mocks-server/main --save-dev

Then add the following code to the scripts part of your package.json file:

"mocks": "mocks-server"

After putting the above code, you can execute the mocks from your terminal with this command:

$ npm run mocks

After running the command, you’ll see that some files and directories will be created on the project. The mocks-server will generate a sample API for getting users inside the /mocks/routes/users.js route.

Container

This is a place for putting the logical codes there. Everythings that are the same between different platforms and related to the data should be in containers.

The containers can be named like XConatiner.jsx, and the “X” will be the name of the related feature or component.

For now, we need UsersContainer.jsx to get the user’s data and pass it to the corresponding component.

There are many ways to structure the React and React-Native projects, and this article doesn’t focus on them.

First of all, we need a folder inside the src directory called Users. So let’s execute the following command at the terminal:

$ cd ./src && mkdir Users && cd ./Users

Then run the below command to create the mentioned file:

$ touch UsersContainer.jsx

As mentioned, we need to retrieve the users and pass them to the related UI component in this container, so let’s put the below code inside the UsersContainer.jsx:

import React, {useState, useEffect} from 'react';
import axios from 'axios';
import UsersComponent from './UsersComponent';

export const UsersContainer = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios
      .get('http://localhost:3100/api/users')
      .then(response => {
        setUsers(response.data);
      })
      .catch(err => {
        console.log('error', err);
      });
  }, []);

  return users.length > 0 ? <UsersComponent users={users} /> : null;
};

Components

Here we have the distinction for the different platforms for the UI part. All the visual things and other specific libraries for one platform should be in these components.

We need two components for web and mobile, UsersComponent.web.jsx and UsersComponent.native.jsx. Create these files inside the Users directory with the following command:

$ cd ./src/Users && touch UsersComponent.web.jsx UsersComponent.native.jsx

These components should get users from their parent container and render it. Let’s put the following code for each file:

import React from 'react';

const UsersComponent = ({users}) => {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UsersComponent;

import React from 'react';
import {View, Text} from 'react-native';

const UsersComponent = ({users}) => {
  return (
    <View>
      {users.map(user => (
        <Text key={user.id}>{user.name}</Text>
      ))}
    </View>
  );
};

export default UsersComponent;

According to the container, you noticed that you didn’t mention importing the component .native or .web. Yes! This is the power of the Webpack and Metro, they can understand which one should be compiled, and you don’t need to worry!