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

Introduction

Overview of React Native

Importance of Version 0.76

Setting Up the Development Environment

Prerequisites

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

Installing Watchman

brew install watchman

Creating a New React Native Project

Running the CLI Command

Project Structure Overview

• 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

Configuring Xcode for React Native

Running the iOS App

Setting Up the Android Environment

Installing Android Studio

Configuring Android Studio for React Native

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

Building the App: Core Components and Concepts

JSX and Component Structure

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

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

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

Creating a Navigation Structure

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;

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

Using Native Modules in the App

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

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

Creating Actions, Reducers, and the Store

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

// 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

// __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();
});

Deploying the App

Preparing for Production

Building the iOS App for App Store

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

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

Conclusion