Expo modules in React Native

Introduction

Expo modules let you add extra features to your React Native app easily. They help you use device tools like camera or sensors without complex setup.

You want to use the device camera to take pictures in your app.

You need to access the phone's location to show maps or directions.

You want to play sounds or music inside your app.

You want to use push notifications to alert users.

You want to read or write files on the device.

Syntax

React Native

import { ModuleName } from 'expo-module-name';

// Use the module's functions or components
ModuleName.someFunction();

Replace ModuleName and expo-module-name with the actual module you want to use.

Most Expo modules work out of the box with managed Expo projects.

Examples

This example shows how to import the Camera module and take a picture using a camera ref.

React Native

import { Camera } from 'expo-camera';

async function takePicture(cameraRef) {
  const photo = await cameraRef.current.takePictureAsync();
  console.log(photo.uri);
}

This example shows how to get the current device location.

React Native

import * as Location from 'expo-location';

async function getLocation() {
  const location = await Location.getCurrentPositionAsync({});
  console.log(location.coords.latitude, location.coords.longitude);
}

Sample App

This app uses the Expo Location module to get the device's current location when you press the button. It shows latitude and longitude on the screen.

React Native

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

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

  async function requestLocation() {
    let { status } = await Location.requestForegroundPermissionsAsync();
    if (status !== 'granted') {
      setErrorMsg('Permission to access location was denied');
      return;
    }

    let loc = await Location.getCurrentPositionAsync({});
    setLocation(loc);
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Get Location" onPress={requestLocation} />
      {location && <Text>Latitude: {location.coords.latitude}
Longitude: {location.coords.longitude}</Text>}
      {errorMsg && <Text>{errorMsg}</Text>}
    </View>
  );
}

Important Notes

Always ask for permission before accessing sensitive device features like location or camera.

Expo modules simplify native code setup, so you can focus on JavaScript.

Check Expo documentation for each module to learn its specific functions and usage.

Summary

Expo modules add device features to your React Native app easily.

Use them to access camera, location, notifications, and more.

Import the module, ask for permissions if needed, then use its functions.