Building a Native-Like Mobile App with React Native

In this blog, we’ll explain how we can use React Native to build cross-platform high-quality, responsive, and user-friendly mobile apps that will look and feel like native apps. Harnessing the power of React Native, we’ll demonstrate how you can create applications that seamlessly adapt to multiple platforms while delivering a native-level user experience.

Explore the incredible world of mobile app development, where a single codebase can be your key to reaching a broad audience on both Android and iOS devices, maximizing your app’s potential reach. With React Native’s capabilities, you can significantly reduce development time and resources by eliminating the need for separate Android and iOS teams, making your projects more efficient and cost-effective.

Introduction to React Native

On 26 March 2015, Facebook released React Native, an open-source JavaScript framework that allows developers to build cross-platform mobile applications with the same codebase for multiple platforms. This accelerates the development process by eliminating the need for separate Android/iOS development teams. The beauty of React Native is that the apps developed using this look and feel the same as native so it’s difficult to differentiate.

Setting Up Development Environment

Before creating React Native apps you first need to set up the development environment and configure the tools required for mobile development. Install the following before creating a React Native project-

• Node.js
• JDK
• Android Studio
• Xcode from the app store

After installing and configuring all the above tools, now you can create React Native projects. To create a React Native project use the following command-

npx react-native init ProjectName

This command will create a React Native project for you. Then you need to navigate to the project directory using the following command-

cd ProjectName

Now install node_modules using the following command-

npm install

To run the app on an Android Emulator use the following app-

npx react-native run-android

To run the app on the iOS simulator first install the pods command inside the iOS directory-

pod install

Then inside the root directory run the following command-

npx react-native run-ios

Creating UI Components

React Native provides different built-in components such as View, Text, Image, Button, and TextInput to create the UI of the app. Besides built-in components, you can also use third-party libraries to create your own custom components for the complex UI. After adding components you need to style those components using StyleSheet.

StyleSheet provides you with the facility to customize the styling of built-in components. So having a good command over Stylesheet can help you to create beautiful UI.

Here is an example of creating UI using React Native components-

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

const App = () => {
const [inputText, setInputText] = useState('');
const handleButtonPress = () => {
alert(`You typed: ${inputText}`);
};
return (
<View style={styles.container}>
<Image
source={{ uri: 'https://placekitten.com/200/200' }}
style={styles.image}
/>
<Text style={styles.text}>Hello, React Native!</Text>
<TextInput
style={styles.input}
placeholder="Type something..."
value={inputText}
onChangeText={setInputText}
/>
<Button title="Press Me" onPress={handleButtonPress} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
image: {
width: 100,
height: 100,
marginBottom: 10,
},
text: {
fontSize: 20,
marginBottom: 10,
},
input: {
width: '80%',
height: 40,
borderColor: 'gray',
borderWidth: 1,
paddingHorizontal: 10,
marginBottom: 10,
},
});
export default App;

Navigation and Routing

To switch between the app screens you have to implement navigation into your app. Without navigation, the user won’t be able to move from one screen to another. So it’s important to have navigation within the app. In mobile basically, there are three types of navigation Stack Navigation, Tab Navigation, and Drawer Navigation.

Let’s discuss each one of them-

1. Stack Navigation – It maintains the stack of screens.
2. Tab Navigation – It contains the tab buttons and individual tabs contain different screens.
3. Drawer Navigation – It contains a side drawer that opens by sliding and clicking on the menu icon.

Here is an example of integrating all three navigation together-

Before implementing the navigation you need to install all required packages with the following command-

npm install @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs @react-navigation/drawer react-native-gesture-handler react-native-reanimated react-native-screens

Here is the code to implement navigation-

import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';
import ProfileScreen from './screens/ProfileScreen';

const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();

const HomeStack = () => (
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
);

const ProfileStack = () => (
<Stack.Navigator>
<Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>
);

const App = () => {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeTabs} />
<Drawer.Screen name="Profile" component={ProfileStack} />
</Drawer.Navigator>
</NavigationContainer>
);
};

const HomeTabs = () => {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeStack} />
<Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>
);
};

export default App;

Accessing Device Features

In React Native you can also access the device features and capabilities such as camera, bluetooth, calendar, location, sensors etc. To support these features in your application React Native provides different packages.

Here is a list of some common packages that we use in our apps-

• react-native-camera and react-native-image-picker, both these packages are used to provide camera functionality and to pick images from device media.
• react-native-sensors package provides access to device sensors such as gyroscope, accelerometer etc.
• react-native-ble-manager provides access to the device’s Bluetooth and its capabilities.
• @react-native-community/geolocation package provides access to the device’s GPS location.

There are a lot of different packages for different purposes. You can use any one of them according to your project requirements.

Here is an example of using a device camera to click an image using the react-native-camera package-

import React, { useState, useRef } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { RNCamera } from 'react-native-camera';
import { request, PERMISSIONS } from 'react-native-permissions';

const CameraScreen = () => {
const cameraRef = useRef(null);
const [isCameraReady, setIsCameraReady] = useState(false);

const requestCameraPermission = async () => {
const result = await request(PERMISSIONS.IOS.CAMERA);
return result === 'granted';
};

const clickPicture = async () => {
if (cameraRef.current && isCameraReady) {
if (await requestCameraPermission()) {
const options = { quality: 0.5, base64: true };
const data = await cameraRef.current.takePictureAsync(options);
console.log('Photo data:', data);
}
}
};

return (
<View style={{ flex: 1 }}>
<RNCamera
ref={cameraRef}
style={{ flex: 1 }}
onCameraReady={() => setIsCameraReady(true)}
/>

<TouchableOpacity onPress={clickPicture} style={{ alignSelf: 'center' }}>
<Text style={{ fontSize: 20, color: 'white' }}>Take Photo</Text>
</TouchableOpacity>
</View>
);
};

export default CameraScreen;

State Management

State management is one of the most important topics in React Native. To manage the app states there are various state management tools or libraries. Some of them are as follows-

• Redux
• React Context API
• MobX
• Zustand
• Recoil

From the above state management libraries, Redux is mostly used. The reason is the great community support, well-documented and Redux toolkit to debug states. But you can use any one of them as per your need.

Related read: React State Management: What Is It & Its Types

Testing and Debugging

Testing and Debugging are integral parts of any software development process. An app will not be ready for production until it’s bug-free. So to make the apps bug-free React Native provides many debugging tools and testing libraries. These tools ensure that the app is working as expected or not.

For Debugging you can use the following tools-

• Flipper
• React Native Debugger
• Chrome Devtools

For Testing you can integrate the following libraries-

• Jest
• React-testing-library
• Enzyme
• Mocha
• Jasmine

There are many other testing libraries but these are commonly used testing libraries and you can integrate any of them according to your needs.

Deployment and Publishing

This final step of any mobile application development is to publish apps to their respective stores. There are two ways to publish apps to the app store. One way is to publish them manually and another way is to automate the app publishing process.

To manually upload the app you need to first create builds and submit them to the App Store and Play Store for review. After successfully reviewing your app will be live.

To Automate the app publishing process you can integrate CI/CD to your React Native application.