Introduction

Want to create a mobile app using JavaScript? You’re in the right place. In this tutorial, we’ll walk you through how to build your first mobile app using React Native and Expo — no complex setup required!

Expo makes it super easy for beginners to start building cross-platform apps. You don’t need Android Studio or Xcode to get started — just a computer, a smartphone, and an internet connection.

What You Will Learn

• What is React Native and Expo
• How to set up the Expo environment
• Create your first Expo app
• Run the app on Android and iOS
• Modify and test your code

Prerequisites

Before we start, make sure you have:

• Node.js installed (Download here)
• A code editor (we recommend VS Code)
• A smartphone with the Expo Go app (available on Play Store and App Store)

Step 1: Install Expo CLI

Open your terminal or command prompt and run:

npm install -g expo-cli

This installs the Expo command-line tool globally on your system.

Step 2: Create a New App

Now create your first app:

expo init MyFirstApp

Choose the blank template (or a template with navigation if you want more features).

Move into your project folder:

cd MyFirstApp

Step 3: Start the Development Server

To start your app:

npm start

or

expo start

This will open a new tab in your browser with a QR code.

Step 4: Run the App on Your Device

1. Open the Expo Go app on your phone.
2. Scan the QR code from the terminal/browser.
3. Your app will open instantly!
4. No need for emulators or complex setup. That’s the beauty of Expo!

Step 5: Edit Your App

Open the App.js file in your code editor. You’ll see something like this:

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

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Hello, world!</Text>
    </View>
  );
}

Try changing the text to:

<Text>Welcome to My First App with Expo!</Text>

Save the file — your app will reload automatically on your phone!

Add a Button

Let’s make it more interactive. Update App.js like this:

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

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>You clicked {count} times</Text>
      <Button title="Click me" onPress={() => setCount(count + 1)} />
    </View>
  );
}

Now you’ve got a clickable counter app!

Summary

You just built your first mobile app using React Native and Expo. Here’s what we covered:

Installed Expo CLI
Created a new project
Ran the app on a real device
Edited and tested your first component

React Native Expo Component List with Examples

React Native Expo provides a rich set of built-in components and APIs to help developers build cross-platform mobile applications efficiently. In this guide, we will explore the React Native Expo component list with examples for UI elements, animations, navigation, and media playback.

1. Basic UI Components React Native Expo Component List

View (Container for UI elements)

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

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Hello, World!</Text>
    </View>
  );
}

Text (Display text)

import { Text } from 'react-native';

export default function App() {
  return <Text style={{ fontSize: 20, fontWeight: 'bold' }}>Hello Expo!</Text>;
}

Image (Display an image)

import { Image } from 'react-native';

export default function App() {
  return (
    <Image 
      source={{ uri: 'https://via.placeholder.com/150' }} 
      style={{ width: 150, height: 150 }}
    />
  );
}

Button (Basic clickable button)

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

export default function App() {
  return (
    <Button title="Click Me" onPress={() => Alert.alert('Button Clicked!')} />
  );
}

TextInput (User Input Field)

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

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

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        placeholder="Type here..."
        onChangeText={setText}
        value={text}
        style={{ borderBottomWidth: 1, height: 40 }}
      />
      <Text>You typed: {text}</Text>
    </View>
  );
}

2. List & Scrolling Components React Native Expo Component List

ScrollView (Scrollable container)

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

export default function App() {
  return (
    <ScrollView>
      {[...Array(20).keys()].map((i) => (
        <Text key={i} style={{ padding: 10 }}>Item {i + 1}</Text>
      ))}
    </ScrollView>
  );
}

FlatList (Optimized list for large data)

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

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

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

3. Expo-Specific Components React Native Expo Component List

import { Camera } from 'expo-camera';
import { useState, useEffect } from 'react';
import { View, Button } from 'react-native';

export default function App() {
  const [hasPermission, setHasPermission] = useState(null);

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  return (
    <View style={{ flex: 1 }}>
      {hasPermission ? <Camera style={{ flex: 1 }} /> : <Button title="Request Permission" />}
    </View>
  );
}

ImagePicker (Select images from gallery)

import * as ImagePicker from 'expo-image-picker';
import { useState } from 'react';
import { Button, Image, View } from 'react-native';

export default function App() {
  const [image, setImage] = useState(null);

  const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync();
    if (!result.canceled) {
      setImage(result.assets[0].uri);
    }
  };

  return (
    <View>
      <Button title="Pick an image" onPress={pickImage} />
      {image && <Image source={{ uri: image }} style={{ width: 100, height: 100 }} />}
    </View>
  );
}

Location (Get user location)

import * as Location from 'expo-location';
import { useState, useEffect } from 'react';
import { View, Text } from 'react-native';

export default function App() {
  const [location, setLocation] = useState(null);

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status === 'granted') {
        let loc = await Location.getCurrentPositionAsync({});
        setLocation(loc);
      }
    })();
  }, []);

  return <Text>Location: {location ? JSON.stringify(location) : 'Fetching...'}</Text>;
}

4. Navigation Components (React Navigation)

Stack Navigation

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { View, Button, Text } from 'react-native';

const Stack = createStackNavigator();

function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button title="Go to Details" onPress={() => navigation.navigate('Details')} />
    </View>
  );
}

function DetailsScreen() {
  return <Text>Details Screen</Text>;
}

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

5. Gesture & Animation React Native Expo Component List

TouchableOpacity (Button with Opacity effect)

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

export default function App() {
  return (
    <TouchableOpacity onPress={() => alert('Pressed!')} style={{ padding: 10, backgroundColor: 'blue' }}>
      <Text style={{ color: 'white' }}>Press Me</Text>
    </TouchableOpacity>
  );
}

Reanimated (Smooth Animations)

import Animated, { useSharedValue, withSpring, useAnimatedStyle } from 'react-native-reanimated';
import { Button, View } from 'react-native';

export default function App() {
  const offset = useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: withSpring(offset.value * 100) }],
  }));

  return (
    <View>
      <Animated.View style={[{ width: 50, height: 50, backgroundColor: 'red' }, animatedStyle]} />
      <Button title="Move" onPress={() => (offset.value = Math.random())} />
    </View>
  );
}

6. Advanced UI Components

Custom Modal with Animation

import { useState } from 'react';
import { Modal, View, Text, Button, StyleSheet } from 'react-native';

export default function App() {
  const [visible, setVisible] = useState(false);

  return (
    <View style={styles.container}>
      <Button title="Show Modal" onPress={() => setVisible(true)} />
      <Modal animationType="slide" transparent visible={visible}>
        <View style={styles.modalContainer}>
          <View style={styles.modalContent}>
            <Text>This is a modal</Text>
            <Button title="Close" onPress={() => setVisible(false)} />
          </View>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  modalContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.5)' },
  modalContent: { backgroundColor: 'white', padding: 20, borderRadius: 10 },
});

Collapsible Panel (Using react-native-reanimated)

import { useState } from 'react';
import { View, Button, Text } from 'react-native';
import Animated, { useSharedValue, withSpring, useAnimatedStyle } from 'react-native-reanimated';

export default function App() {
  const [isOpen, setIsOpen] = useState(false);
  const height = useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => ({
    height: withSpring(isOpen ? 100 : 0),
  }));

  return (
    <View style={{ padding: 20 }}>
      <Button title="Toggle Panel" onPress={() => setIsOpen(!isOpen)} />
      <Animated.View style={[{ backgroundColor: 'lightblue', overflow: 'hidden' }, animatedStyle]}>
        <Text style={{ padding: 10 }}>This is a collapsible panel!</Text>
      </Animated.View>
    </View>
  );
}

7. Advanced List & Scroll Components

Masonry List (Grid Layout)

import MasonryList from '@react-native-seoul/masonry-list';
import { View, Image, Text } from 'react-native';

const DATA = Array(10).fill().map((_, i) => ({ id: i.toString(), uri: 'https://via.placeholder.com/150' }));

export default function App() {
  return (
    <MasonryList
      data={DATA}
      keyExtractor={(item) => item.id}
      numColumns={2}
      renderItem={({ item }) => (
        <View style={{ margin: 5 }}>
          <Image source={{ uri: item.uri }} style={{ width: '100%', height: 100 }} />
          <Text>Item {item.id}</Text>
        </View>
      )}
    />
  );
}

Parallax Scroll Effect

import { ScrollView, Image, Text } from 'react-native';

export default function App() {
  return (
    <ScrollView contentContainerStyle={{ alignItems: 'center' }}>
      <Image source={{ uri: 'https://via.placeholder.com/300' }} style={{ width: '100%', height: 300 }} />
      <Text style={{ fontSize: 24, margin: 20 }}>Parallax Effect Example</Text>
    </ScrollView>
  );
}

8. Advanced Navigation (Deep Linking & Tabs)

Bottom Tabs Navigation

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import { View, Text } from 'react-native';

const Tab = createBottomTabNavigator();

function HomeScreen() { return <View><Text>Home</Text></View>; }
function ProfileScreen() { return <View><Text>Profile</Text></View>; }

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Deep Linking with Navigation

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { View, Button, Text } from 'react-native';

const Stack = createStackNavigator();

function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Home</Text>
      <Button title="Go to Details" onPress={() => navigation.navigate('Details')} />
    </View>
  );
}

function DetailsScreen() { return <Text>Details Screen</Text>; }

const linking = { prefixes: ['myapp://'], config: { screens: { Home: 'home', Details: 'details' } } };

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

9. Advanced Media & Device Features

Video Playback with Expo-AV

import { Video } from 'expo-av';
import { View } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <Video
        source={{ uri: 'https://www.w3schools.com/html/mov_bbb.mp4' }}
        style={{ width: '100%', height: 300 }}
        useNativeControls
        resizeMode="contain"
      />
    </View>
  );
}

Audio Recording & Playback

import { Audio } from 'expo-av';
import { useState } from 'react';
import { Button, View } from 'react-native';

export default function App() {
  const [recording, setRecording] = useState(null);
  const [sound, setSound] = useState(null);

  async function startRecording() {
    const { granted } = await Audio.requestPermissionsAsync();
    if (!granted) return;
    const { recording } = await Audio.Recording.createAsync(Audio.RECORDING_OPTIONS_PRESET_HIGH_QUALITY);
    setRecording(recording);
  }

  async function stopRecording() {
    await recording.stopAndUnloadAsync();
    const uri = recording.getURI();
    setSound(await Audio.Sound.createAsync({ uri }));
    setRecording(null);
  }

  async function playSound() {
    if (sound) await sound.sound.replayAsync();
  }

  return (
    <View>
      <Button title={recording ? "Stop Recording" : "Start Recording"} onPress={recording ? stopRecording : startRecording} />
      <Button title="Play Recording" onPress={playSound} disabled={!sound} />
    </View>
  );
}

10. Advanced Animations with Reanimated

Fade-in Animation

import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
import { Button, View } from 'react-native';

export default function App() {
  const opacity = useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.value }));

  return (
    <View>
      <Animated.View style={[{ width: 100, height: 100, backgroundColor: 'blue' }, animatedStyle]} />
      <Button title="Fade In" onPress={() => (opacity.value = withTiming(1, { duration: 1000 }))} />
    </View>
  );
}

Additional Resources

For those interested in expanding their skills with APIs, check out our Top 10 Free APIs for Practice in 2025 and improve your JavaScript mastery with our Master ES6 JavaScript – Complete Guide at Master ES6 JavaScript – Complete Guide.