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.

Practice

1. Why does React Native allow developers to create apps for both iOS and Android using mostly the same code?

easy

A. Because it runs the entire app inside a web browser on the device

B. Because it compiles JavaScript directly into native machine code for each platform

C. Because it requires writing separate code for iOS and Android but shares design files

D. Because it uses JavaScript to write shared code and renders native UI components on each platform

Solution

1. Step 1: Understand React Native's code sharing

   React Native uses JavaScript to write most of the app logic once, which works on both iOS and Android.

2. Step 2: Recognize native UI rendering

   It renders native UI components on each platform, so the app looks and feels native.

3. Final Answer:

   Because it uses JavaScript to write shared code and renders native UI components on each platform -> Option D

4. Quick Check:

   Shared JavaScript + native UI = cross-platform [OK]

Hint: React Native shares JS code and uses native UI components [OK]

Common Mistakes:

• Thinking React Native runs apps inside a web browser
• Believing it compiles JS directly to machine code
• Assuming separate code is needed for each platform

2. Which of the following is the correct way to import React Native components for cross-platform use?

easy

A. import View from 'react-native-view'; import Text from 'react-native-text';

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

C. import { View, Text } from 'react';

D. import { View, Text } from 'react-native-web';

Solution

1. Step 1: Identify the official React Native import syntax

   The correct way is to import components like View and Text from the 'react-native' package.

2. Step 2: Eliminate incorrect imports

   Imports from wrong package names like 'react-native-view' (separate imports), 'react', or 'react-native-web' are not standard.

3. Final Answer:

   import { View, Text } from 'react-native'; -> Option B

4. Quick Check:

   Standard React Native imports use 'react-native' [OK]

Hint: Always import core components from 'react-native' package [OK]

Common Mistakes:

• Importing from 'react' instead of 'react-native'
• Using non-existent packages like 'react-native-view'
• Confusing React Native with React Native Web imports

3. What will be the output on both iOS and Android when running this React Native code?

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

export default function App() {
  return (
    
      Hello, cross-platform!
    
  );
}

medium

A. A web page showing the text inside a browser

B. An error because View and Text cannot be used together

C. A native app screen showing the text 'Hello, cross-platform!' on both iOS and Android

D. A blank screen because the View component is empty

Solution

1. Step 1: Analyze the JSX structure

   The code returns a View containing a Text component with the string 'Hello, cross-platform!'.

2. Step 2: Understand React Native rendering

   View and Text are native components that render properly on both iOS and Android.

3. Final Answer:

   A native app screen showing the text 'Hello, cross-platform!' on both iOS and Android -> Option C

4. Quick Check:

   View + Text render native UI with text [OK]

Hint: View wraps Text to show content on both platforms [OK]

Common Mistakes:

• Thinking View and Text cause errors when used together
• Assuming the screen will be blank without styles
• Confusing React Native with web rendering

4. Identify the error in this React Native code snippet that aims to display a button:

import React from 'react';
import { Button } from 'react-native';

export default function App() {
  return (
    
  );
}

medium

A. The title prop value is missing quotes, causing a syntax error

B. Button component cannot be used without a View wrapper

C. The import statement for Button is incorrect

D. React Native does not support Button component

Solution

1. Step 1: Check the Button component usage

   The title prop value should be a string, so it must be enclosed in quotes.

2. Step 2: Identify the syntax error

   title=Click Me is invalid; it should be title="Click Me" or title='Click Me'.

3. Final Answer:

   The title prop value is missing quotes, causing a syntax error -> Option A

4. Quick Check:

   Props with string values need quotes [OK]

Hint: Always put quotes around string prop values [OK]

Common Mistakes:

• Omitting quotes around string props
• Thinking Button needs a View wrapper to work
• Believing Button is not a valid React Native component

5. You want to customize a React Native app so that a button looks different on iOS and Android but still share most code. Which approach best uses React Native's cross-platform features?

hard

A. Use Platform module to conditionally render different styles or components for each platform

B. Write two completely separate apps, one for iOS and one for Android

C. Use only web technologies and run the app in a browser on both devices

D. Use native code only and avoid React Native components

Solution

1. Step 1: Understand React Native's Platform module

   The Platform module lets you detect the OS and apply platform-specific code or styles within the same app.

2. Step 2: Apply conditional rendering for customization

   You can write shared code but customize UI parts like buttons differently for iOS and Android using Platform checks.

3. Final Answer:

   Use Platform module to conditionally render different styles or components for each platform -> Option A

4. Quick Check:

   Platform module enables platform-specific customization [OK]

Hint: Use Platform module to customize per OS without separate apps [OK]

Common Mistakes:

• Thinking you must write separate apps for each platform
• Assuming React Native can't customize UI per platform
• Confusing React Native with web-only solutions