StacksGather - Step-by-Step Guide: Create a React Native 0.76 CLI IOS & Android App

Introduction

Overview of React Native

React Native is a powerful framework developed by Facebook that allows developers to build mobile applications using JavaScript and React. By leveraging native components, React Native provides a near-native performance and user experience, making it a popular choice for cross-platform app development.

Importance of Version 0.76

Version 0.76 of React Native introduces several new features and improvements, enhancing the framework's performance and developer experience. This article aims to guide you through the process of creating a sample demo app using the latest version of React Native CLI, covering both iOS and Android platforms.

Setting Up the Development Environment

Prerequisites

Before starting, ensure you have the following installed on your system:

Node.js and npm
Watchman
Xcode (for macOS users)
Android Studio

Installing Node.js and npm

Download and install Node.js from Node.js official website. This will also install npm, which is required to manage dependencies.

Installing Watchman

Watchman is a tool developed by Facebook for watching changes in the filesystem. Install it using the following command:

brew install watchman

Creating a New React Native Project

Running the CLI Command

To create a new React Native project using version 0.76, run the following command:

npx @react-native-community/cli@latest init MyProject --version latest

Project Structure Overview

Once the project is created, you'll see a structure similar to this:

MyProject/ ├── android/ ├── ios/ ├── node_modules/ ├── src/ │ ├── components/ │ ├── screens/ │ └── App.js ├── package.json └── README.md

android directory contains Android-specific code and configurations.
iosdirectory contains iOS-specific code and configurations.
src directory contains your application's source code

Setting Up the iOS Environment

Installing Xcode

Download and install Xcode from the Mac App Store. Ensure you also install the necessary command line tools:

xcode-select --install

Configuring Xcode for React Native

Open the iOS project in Xcode:

open ios/MyProject.xcodeproj

Running the iOS App

To run the app on an iOS simulator, execute:

npx react-native run-ios

Setting Up the Android Environment

Installing Android Studio

Download and install Android Studio from Android Developer's website.

Configuring Android Studio for React Native

Set up the Android SDK and configure the necessary environment variables. Add the following lines to your ~/.bash_profile or ~/.zshrc file:

export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools

Running the Android App

To run the app on an Android emulator, execute:

npx react-native run-android

Building the App: Core Components and Concepts

JSX and Component Structure

React Native uses JSX, a syntax extension for JavaScript, which allows you to write HTML-like code within JavaScript. Components are the building blocks of a React Native app. Here's a simple example of a functional component:

import React from 'react';
import { View, Text } from 'react-native';
const MyComponent = () => {
  return (
    <View>
      <Text>Hello, World!</Text>
    </View>
  );
};
export default MyComponent;

State and Props

State and props are fundamental concepts in React. State represents data that changes over time, while props are immutable data passed from parent to child components. Here's an example:

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <View>
      <Text>{count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};
export default Counter;

Styling with Flexbox

React Native uses Flexbox for layout. Here's an example of how to style a component:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const StyledComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Styled Text</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', },
  text: { color: 'blue', fontSize: 20, }
});

export default StyledComponent;

Adding Navigation to the App

Installing React Navigation

To add navigation to your app, install the React Navigation library:

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

npm install react-native-screens react-native-safe-area-context

Creating a Navigation Structure

Here's an example of setting up a basic stack navigator:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

const Stack = createStackNavigator();
const App = () => {
return ( 
  <NavigationContainer>
    <Stack.Navigator initialRouteName="Home">
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  </NavigationContainer>
 );
};

export default App;

Navigating Between Screens

To navigate between screens, use the navigation prop provided by React Navigation:

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

const HomeScreen = ({ navigation }) => {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button title="Go to Details" onPress={() => navigation.navigate('Details')} />
    </View>
  );
};

export default HomeScreen;

Integrating Native Modules

Linking Native Modules

Some libraries may require linking. In React Native 0.60 and above, auto-linking is supported. If auto-linking doesn't work, you can manually link libraries using:

npx react-native link <library-name>

Using Native Modules in the App

Here's an example of using a native module, such as react-native-device-info:

npm install react-native-device-info

npx react-native link react-native-device-info

import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
import DeviceInfo from 'react-native-device-info';

const DeviceInfoComponent = () => {
  const [deviceName, setDeviceName] = useState('');
  useEffect(() => {
    DeviceInfo.getDeviceName().then(name => { setDeviceName(name); });
  }, []);

  return (
    <View>
      <Text>Device Name: {deviceName}</Text>
    </View> );
};

export default DeviceInfoComponent;

Working with APIs and Fetching Data

Setting Up a Sample API

For demonstration purposes, let's use the JSONPlaceholder API. Install Axios to handle HTTP requests:

npm install axios

Fetching Data and Displaying it in the App

Here's an example of fetching data from an API and displaying it in a FlatList:

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList } from 'react-native';
import axios from 'axios';

const DataFetchingComponent = () => {
  const [data, setData] = useState([]);
  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
    .then(response => { setData(response.data); })
    .catch(error => { console.error(error); }); }, []);
  
  return (
    <View>
      <FlatList data={data} keyExtractor={item => item.id.toString()} 
        renderItem={({ item }) => (
          <View>
            <Text>{item.title}</Text>
          </View>
        )} />
    </View>
  );
};

export default DataFetchingComponent;

Implementing Redux for State Management

Installing Redux and React-Redux

Install Redux and React-Redux:

npm install redux react-redux

Creating Actions, Reducers, and the Store

Define actions and reducers for managing state:

// actions.js
export const increment = () => ({ type: 'INCREMENT', });
export const decrement = () => ({ type: 'DECREMENT', });

// reducers.js
const initialState = { count: 0, };
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
    return { count: state.count + 1 };
    case 'DECREMENT': return { count: state.count - 1 };
    default: return state;
  }
};

export default counterReducer;

// store.js
import { createStore } from 'redux';
import counterReducer from './reducers';
const store = createStore(counterReducer);
export default store;

Connecting Redux to React Components

Use the Provider component to make the Redux store available to your app, and connect components to the store:

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

const App = () => {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
};
export default App;

// Counter.js
import React from 'react';
import { View, Text, Button } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

const Counter = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
  return (
    <View> <Text>{count}</Text>
    <Button title="Increment" onPress={() => dispatch(increment())} />
    <Button title="Decrement" onPress={() => dispatch(decrement())} />
  </View>
  );
};
export default Counter;

Testing and Debugging

Using the React Native Debugger

React Native Debugger is a standalone app for debugging React Native apps. Install it from React Native Debugger GitHub, then run:

open "rndebugger://set-debugger-loc?port=8081"

Writing Unit Tests with Jest

React Native comes with Jest, a testing framework. Write unit tests for your components:

// __tests__/Counter.test.js

import React from 'react';
import { render } from '@testing-library/react-native';
import Counter from '../Counter';

test('renders correctly', () => {
  const { getByText } = render(<Counter />);
  expect(getByText('0')).toBeTruthy();
});

Run tests using:

npm test

Deploying the App

Preparing for Production

Ensure your app is optimized for production by minimizing and bundling assets, and configuring app settings for release.

Building the iOS App for App Store

Follow Apple's guidelines to create a release build:

Open the project in Xcode.
Set the build configuration to Release.
Archive the build and upload it to the App Store.

Building the Android App for Google Play Store

Follow Google's guidelines to create a release build:

Generate a release APK using:cd android ./gradlew assembleRelease
Sign the APK with your key.
Upload the signed APK to the Google Play Console.

Conclusion

Recap of Key Points

This comprehensive guide has covered setting up the development environment, creating a new React Native project, configuring iOS and Android environments, building core components, integrating navigation, working with APIs, implementing Redux, testing, and deploying the app.

Step-by-Step Guide: Create a React Native 0.76 CLI IOS & Android App

Techno solution

Share Article