Learn Mobile Apps with React Native

What is React Native?

React Native is an open‑source framework created by Facebook that allows you to build mobile apps for iOS and Android using JavaScript and React. With React Native, you write components once, and they render natively on each platform. This is different from hybrid apps that run inside a WebView; React Native compiles to native code, providing better performance and a more native look and feel.

Under the hood, React Native uses a bridge to communicate between the JavaScript thread and the native platform. The UI is defined using familiar React components like View, Text, Image, and Button, but they map to native iOS/Android UI elements.

Setup & Expo

The easiest way to start is with Expo, a set of tools that wraps React Native. With Expo, you can develop and test your apps directly on your phone using the Expo Go app, without needing Xcode or Android Studio.

  1. Install Node.js (LTS version).
  2. Open a terminal and run: npx create-expo-app MyFirstApp
  3. Navigate into the folder: cd MyFirstApp
  4. Start the development server: npx expo start
  5. Scan the QR code with the Expo Go app (available on iOS & Android) to see your app live.

Expo provides many built‑in APIs (camera, location, etc.) and handles the build process, making it perfect for beginners.

Interactive React Native Playground

Use the editor below to build and test a simple React Native app directly in your browser. It's powered by Snack Expo.

View & Text

The View is the most fundamental component for building a UI. It maps to UIView on iOS and ViewGroup on Android. Text is used to display text.

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  text: {
    fontSize: 24,
    color: '#333',
  },
});

Button & Touchables

React Native provides a Button component, but for more customisation, use TouchableOpacity or Pressable.

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

export default function App() {
  return (
    <View style={styles.container}>
      <Button title="Press Me" onPress={() => Alert.alert('Button Pressed!')} />
      <TouchableOpacity style={styles.touchable} onPress={() => alert('Custom button!')}>
        <Text style={styles.touchableText}>Custom Button</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  touchable: { marginTop: 20, backgroundColor: '#6C63FF', padding: 15, borderRadius: 10 },
  touchableText: { color: '#fff', fontWeight: 'bold' },
});

TextInput

TextInput allows the user to enter text. It's the basic input field for forms.

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

export default function App() {
  const [text, setText] = useState('');

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Type something..."
        value={text}
        onChangeText={setText}
      />
      <Text>You typed: {text}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 },
  input: { height: 40, width: '80%', borderColor: 'gray', borderWidth: 1, padding: 10, marginBottom: 20 },
});

Image

The Image component is used to display images, both from local sources and from the network.

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

export default function App() {
  return (
    <View style={styles.container}>
      <Image
        style={styles.image}
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
      />
      <Image
        style={styles.image}
        source={require('./assets/icon.png')}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  image: { width: 100, height: 100, margin: 10 },
});

ScrollView & FlatList

For scrolling lists, use FlatList for performance with large data sets, and ScrollView for smaller, non‑repeating content.

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

const DATA = [
  { id: '1', title: 'Item 1' },
  { id: '2', title: 'Item 2' },
  { id: '3', title: 'Item 3' },
];

export default function App() {
  return (
    <View style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={({ item }) => <Text style={styles.item}>{item.title}</Text>}
        keyExtractor={item => item.id}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 50 },
  item: { padding: 20, fontSize: 18, borderBottomWidth: 1 },
});

StyleSheet

React Native uses the StyleSheet API to define styles, similar to CSS but written in JavaScript objects.

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
});

Flexbox Layout

React Native uses Flexbox for layout, with a few differences from CSS Flexbox. The default flex direction is column.

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    height: 100,
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: 'steelblue',
  },
});

Platform Specific Code

You can write platform‑specific styles or code using the Platform module.

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

const styles = StyleSheet.create({
  container: {
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.25,
        shadowRadius: 4,
      },
      android: {
        elevation: 5,
      },
    }),
  },
});