StacksGather
HomeArticlesCategories

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

React Native is an open-source framework that enables developers to build cross-platform mobile apps using JavaScript and React. Whether you are developing for iOS or Android, React Native provides the best of both worlds: native-like performance and a single codebase for both platforms. In this guide, we will show you how to create a simple React Native project using version 0.76, the most stable version of React Native for building apps in 2024.

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

Table of Contents

  1. Introduction
    • Overview of React Native
    • Importance of Version 0.76
  2. Setting Up the Development Environment
    • Prerequisites
    • Installing Node.js and npm
    • Installing Watchman
  3. Creating a New React Native Project
    • Running the CLI Command
    • Project Structure Overview
  4. Setting Up the iOS Environment
    • Installing Xcode
    • Configuring Xcode for React Native
    • Running the iOS App
  5. Setting Up the Android Environment
    • Installing Android Studio
    • Configuring Android Studio for React Native
    • Running the Android App
  6. Building the App: Core Components and Concepts
    • JSX and Component Structure
    • State and Props
    • Styling with Flexbox
  7. Adding Navigation to the App
    • Installing React Navigation
    • Creating a Navigation Structure
    • Navigating Between Screens
  8. Integrating Native Modules
    • Linking Native Modules
    • Using Native Modules in the App
  9. Working with APIs and Fetching Data
    • Setting Up a Sample API
    • Fetching Data and Displaying it in the App
  10. Implementing Redux for State Management
    • Installing Redux and React-Redux
    • Creating Actions, Reducers, and the Store
    • Connecting Redux to React Components
  11. Testing and Debugging
    • Using the React Native Debugger
    • Writing Unit Tests with Jest
  12. Deploying the App
    • Preparing for Production
    • Building the iOS App for App Store
    • Building the Android App for Google Play Store
  13. Conclusion
    • Recap of Key Points
    • Future Enhancements and Learning Resources

1. 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.

2. 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:

sh
brew install watchman

3. 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/: Contains Android-specific code and configurations.
  • ios/: Contains iOS-specific code and configurations.
  • src/: Contains your application's source code.

4. 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

5. 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

6. 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;

7. 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;

8. 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;

9. 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;

10. 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;

11. 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

12. 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:

  1. Open the project in Xcode.
  2. Set the build configuration to Release.
  3. 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:

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

13. 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.

Future Enhancements and Learning Resources

For further learning and enhancements, explore the following resources:

 

React Native

Related Articles

Step-by-Step Guide: Create a React Native CLI IOS & Android App Using Version 0.76
Step-by-Step Guide: Create a React Nativ...

React Native is an open-source framework that enables developers to build cross-platform mobile apps using JavaScript and React. Whether you are developing for iOS or Android, React Native provides the best of both worlds: native-like performance and...

November 28, 2024