React Native: Building Cross-Platform Mobile App React

React Native is a popular JavaScript framework that enables you to build mobile app React for iOS and Android platforms using the same codebase. With React Native, you can write mobile apps that look, feel, and perform like any other native app built using Objective-C/Swift or Java/Kotlin, except that you use React and JavaScript.

In this article, we will dig deeper into React Native and understand how it works under the hood. We will also build a simple cross-platform messaging mobile app React to demonstrate React Native capabilities for building truly React native mobile apps for both platforms.

Why Choose React Native?

Here are some key benefits of using React Native for mobile app React development:

Cross-platform support – Write once and deploy on both iOS and Android with minimal platform specific code. This saves significant development time and effort.
Native performance – React Native compiles to native code so the performance is comparable to native development. The apps feel fluid and responsive like any other native app.
Live Reloading – Save changes to code and see them reflected instantly without needing to compile the app again. This hot reloading makes development extremely fast.
Reusability – A majority of the code, business logic and components you write can be reused across platforms. You only write platform specific modules for native functionality access.
JavaScript-based – Use modern JavaScript, ES6/ES7 and powerful third party libraries to boost your productivity as a developer. Benefit from the thriving JavaScript ecosystem.
Cost effective – With a single codebase across iOS and Android, you save significant time, effort and money required for building and maintaining separate native app projects.

How React Native Works

React Native bridges the gap between web apps and truly native mobile app react development by providing native app components while keeping development in JavaScript realm.

Here is how it works under the hood:

The React Native framework provides a set of base native components like View, Text, Image etc that are available for both iOS and Android.
When you use these components along with your code written in modern React style and JavaScript, the React Native packager bundles your code and converts it to native code modules.
The native modules are then executed on a separate JavaScriptCore thread running on the main application thread.
A Bridge facilitates 2-way asynchronous communication between native code and JavaScript runtime to ensure native capabilities like camera, location services etc integrate well with JavaScript code.

So in summary, you write mobile apps React in JSX syntax using React design paradigm. Under the hood, the UI components and logic you write are eventually executed as platform native code providing full capability to access native APIs.

This architecture allows React Native to offer the capability, performance and smooth user experience of a native app while letting developers benefit from JavaScript based development. Next, we will see this in action by building a simple chat app.

Building a Cross-Platform Chat mobile App React

To demonstrate capabilities of React Native, we will create a react native app with basic functionality like sending/receiving messages, viewing chat history etc.

Here is a quick overview of what we will build:

A Chat component to render the chat screen
A ChatHistory component to display a list of messages
An InputBox component to enter a new message
Sample backend code to simulate receiving messages

So let’s get started!

1. Install Dependencies

First, we initialize a new project using:

npx react-native init RNCrossPlatformChatApp

We need to install the React Navigation library for screen navigation:

npm install @react-navigation/native @react-navigation/stack

2. Create Chat Component

Under the App.tsx file, let us add a functional Chat component that will render the chat screen:

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

export default function Chat() {

  return (
    <View style={{flex: 1, justifyContent: 'flex-end'}}> 
      {/*Chat History Component*/}
      {/*Input Box Component*/}
    </View>
  );

}

We are using a View container and applying some flexbox styling to position child elements at the bottom. We will soon replace the child comments with actual History and Input Box components.

3. Show Chat History

The ChatHistory component will display all previous chat messages. We will fetch mock messages from a local getChatHistory method and render each message inside a <Text> element wrapped in a scrollable <ScrollView> container:

import React, {useState, useEffect} from 'react';

export default function ChatHistory() {

  const [messages, setMessages] = useState([]);

  useEffect(() => {
    setMessages(getChatHistory());
  })

  return (
    <ScrollView style={{height: '80%'}}>
      {messages.map(message => (
        <Text key={message.id}>{message.msg}</Text>
      ))}
    </ScrollView>
  );

}

// Dummy method to simulate getting chat history
const getChatHistory = () => {
  return [
    {
      id: 1, 
      msg: 'Hi there!'
    },
    {
      id: 2,
      msg: 'Hello, welcome!'
    }
  ]
}

A few things to note here:

We use React hooks like useState and useEffect to manage state and fetch data
We loop over the messages array using .map() to render history items
We will soon replace the dummy message generator with actual API calls

Now we can include this component inside our Chat component from previous step:

export default function Chat() {

  return (
    <View style={{flex: 1, justifyContent: 'flex-end'}}> 
      <ChatHistory />
      {/*Input Box Component*/} 
    </View>
  ); 
}

4. Implement the Message Input Box

The InputBox component will allow user to type a message. It will have a text box and a Send button.

import React, {useState} from 'react';
import {View, TextInput, Button} from 'react-native';

export default function InputBox() {

  const [message, setMessage] = useState('');

  const sendMessage = () => {
    // Send message
    // Clear input box
  }

  return (
    <View style={{flexDirection: 'row', padding: 10}}>
      <TextInput 
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={setMessage}
        value={message} 
      />
      <Button onPress={sendMessage} title="Send" /> 
    </View>
  );
}

We again use hooks to manage local component state. We will trigger the sendMessage method later when user taps Send which is when we will call actual backend API.

Finally let us complete our Chat component by including this InputBox component:

export default function Chat() {
  return (
    <View style={{flex: 1, justifyContent: 'flex-end'}}>
      <ChatHistory />
      <InputBox />
    </View>
  );

}

And that’s it! In a few lines of code, we now have a simple functioning chat interface built with React Native. The component architecture makes adding more features like photos, videos, typing indicators etc. relatively easy.

You can tweak the styling and layout further depending on your needs. But this gives a good template to start building your own chat functionality inside a React mobile app.

Key Takeaways

React Native makes it easy to get started building truly native mobile app React using JavaScript and React paradigm:

Unified codebase – Use same code across Android and iOS with React Native components
Native performance – Apps feel fluid like other native apps due smooth UI thread
Hot reloading – Instantly view changes rather than recompiling the entire app
Reusable modules – Share majority modules across platforms
JavaScript ecosystem – Leverage community plugins and modules

React Native handles most of the heavy lifting required for native app development like platform differences, push notifications, background tasks etc. behind the scenes. This frees you to focus on building app features and business logic.

Over 100,000 apps have already been published using React Native including Skype, Tesla, UberEats, Instagram and Walmart. This showcase page lists more popular React Native mobile apps.

Reach Out to the Expert

As a software engineer with over a decade of experience building complex enterprise systems and modern JavaScript apps, I can help design, develop and launch your app idea quickly from scratch leveraging React, React Native and other modern frameworks.

With expertise in full stack development and end-to-end project execution, I can translate your vision into robust working software that users will love.