React Native Overview

What is React Native?

React Native is a framework for building mobile applications using JavaScript and React. It allows developers to create native mobile apps for iOS and Android using a single codebase.

Architecture

1. Bridge Architecture (Legacy)

[JavaScript Thread] ←→ [Bridge] ←→ [Native Thread]
     (React)                        (iOS/Android)

2. New Architecture (Fabric + TurboModules)

[JavaScript] ←→ [JSI] ←→ [Native Modules]
                 ↓
            [Fabric Renderer]
                 ↓
            [Native UI]

Key Concepts

1. Components

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

const MyComponent = () => {
    return (
        <View style={styles.container}>
            <Text style={styles.title}>Hello React Native!</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    title: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
});

2. Platform-Specific Code

import { Platform } from 'react-native';

const styles = StyleSheet.create({
    container: {
        ...Platform.select({
            ios: {
                backgroundColor: 'red',
            },
            android: {
                backgroundColor: 'blue',
            },
        }),
    },
});

// Platform-specific files
// Button.ios.js
// Button.android.js

React Native vs Native Development

Performance Comparison

Development Comparison

Advantages of React Native

1. Cross-Platform Development

• Single Codebase: Write once, run on both platforms
• Faster Time to Market: Reduced development time
• Cost Effective: Fewer developers needed

2. Hot Reloading

// Changes reflect instantly without rebuilding
const App = () => {
    return (
        <View>
            <Text>Updated text appears instantly!</Text>
        </View>
    );
};

3. Native Performance

• Native Components: UI renders using native elements
• Native Modules: Access platform-specific APIs
• Optimized Bridge: Efficient communication between JS and native

Disadvantages of React Native

1. Performance Limitations

• Bridge Overhead: Communication between JS and native threads
• Memory Usage: JavaScript runtime overhead
• Complex Animations: May require native implementation

2. Platform-Specific Features

// Sometimes need native modules for platform features
import { NativeModules } from 'react-native';
const { CustomNativeModule } = NativeModules;

CustomNativeModule.doSomethingNative();

3. Dependency on Facebook

• Framework Evolution: Changes based on Facebook's needs
• Breaking Changes: Updates may require code changes
• Community Support: Relies on open-source community

Navigation

React Navigation

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

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

State Management

Redux with React Native

import { Provider } from 'react-redux';
import { createStore } from 'redux';

const store = createStore(reducer);

const App = () => {
    return (
        <Provider store={store}>
            <MainNavigator />
        </Provider>
    );
};

Native Modules

Creating Custom Native Module

// Android: CustomModule.java
@ReactMethod
public void showToast(String message) {
    Toast.makeText(getReactApplicationContext(), message, Toast.LENGTH_SHORT).show();
}

// iOS: CustomModule.m
RCT_EXPORT_METHOD(showToast:(NSString *)message) {
    dispatch_async(dispatch_get_main_queue(), ^{
        // Show native iOS alert
    });
}

Testing

Unit Testing with Jest

import React from 'react';
import renderer from 'react-test-renderer';
import MyComponent from '../MyComponent';

test('renders correctly', () => {
    const tree = renderer.create(<MyComponent />).toJSON();
    expect(tree).toMatchSnapshot();
});

Integration Testing with Detox

describe('Example', () => {
    beforeEach(async () => {
        await device.reloadReactNative();
    });
    
    it('should show hello screen after tap', async () => {
        await element(by.id('hello_button')).tap();
        await expect(element(by.text('Hello!!!'))).toBeVisible();
    });
});

When to Choose React Native

Good For:

• MVPs and Prototypes: Quick development
• Cross-Platform Apps: Budget constraints
• Simple to Medium Complexity: Standard UI components
• Existing React Team: Leverage existing skills
• Frequent Updates: Over-the-air updates

Consider Native When:

• Performance Critical: Gaming, complex animations
• Platform-Specific Features: Heavy use of native APIs
• Existing Native Apps: Large codebase investment
• Long-term Maintenance: Platform-specific optimizations needed

Popular Apps Using React Native

• Facebook: Parts of main app
• Instagram: Several features
• WhatsApp Business: Complete app
• Discord: iOS app
• Shopify: Mobile app
• Tesla: Mobile app