Why React Native enables cross-platform mobile apps

Introduction

React Native lets you build mobile apps that work on both iPhone and Android using mostly the same code. This saves time and effort.

You want to create an app that runs on both iOS and Android without writing two separate apps.

You want to share most of your app's code between platforms to speed up development.

You want to use JavaScript and React skills to build mobile apps.

You want to update your app quickly on both platforms with one code change.

You want to access native device features while still writing mostly JavaScript.

Syntax

React Native

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

export default function App() {
  return (
    <View>
      <Text>Hello, React Native!</Text>
    </View>
  );
}

This is a simple React Native component that works on both iOS and Android.

React Native uses native UI components under the hood, so the app feels like a real native app.

Examples

A button component that works on both platforms and shows an alert when pressed.

React Native

import { Button, Alert } from 'react-native';

<Button title="Click me" onPress={() => Alert.alert('Clicked!')} />

Shows how to detect the platform and display different text accordingly.

React Native

import { Platform, Text } from 'react-native';

<Text>{Platform.OS === 'ios' ? 'Running on iOS' : 'Running on Android'}</Text>

Sample App

This app shows a welcome message and tells the user if they are on iPhone or Android. It uses React Native components and styles that work on both platforms.

React Native

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Welcome to React Native!</Text>
      <Text style={styles.platformText}>
        {Platform.OS === 'ios' ? 'You are on iPhone' : 'You are on Android'}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0'
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10
  },
  platformText: {
    fontSize: 18,
    color: '#555'
  }
});

Important Notes

React Native uses JavaScript and React to build mobile apps that feel native.

You can write most of your app once and run it on both iOS and Android.

Some platform-specific code may be needed for special features or styles.

Summary

React Native enables cross-platform apps by using shared JavaScript code and native UI components.

This approach saves time and effort compared to building separate apps for iOS and Android.

You can still customize parts of your app for each platform when needed.