expo

What is expo?

Expo is a framework and a platform for universal React applications. It provides a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase.

What are expo's main functionalities?

Development Environment

Expo provides a managed workflow that simplifies the setup of a development environment. The `registerRootComponent` function is used to register the main component of your application, making it easy to get started with a new project.

import { registerRootComponent } from 'expo';
import App from './App';

registerRootComponent(App);

Asset Management

Expo's asset management system allows you to easily manage and load assets such as images, fonts, and other media files. The `Asset` module helps in loading and caching these assets efficiently.

import { Asset } from 'expo-asset';

const image = Asset.fromModule(require('./path/to/image.png')).uri;

Push Notifications

Expo provides a robust push notification system that allows you to send and receive notifications. The `expo-notifications` module helps in setting up and handling push notifications in your app.

import * as Notifications from 'expo-notifications';

async function sendPushNotification(expoPushToken) {
  const message = {
    to: expoPushToken,
    sound: 'default',
    title: 'Original Title',
    body: 'And here is the body!',
    data: { someData: 'goes here' },
  };

  await fetch('https://exp.host/--/api/v2/push/send', {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(message),
  });
}

Location Services

Expo provides access to device location services through the `expo-location` module. This allows you to request permissions and get the current location of the device.

import * as Location from 'expo-location';

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

  let location = await Location.getCurrentPositionAsync({});
  console.log(location);
}

Camera Access

Expo provides easy access to the device's camera through the `expo-camera` module. This allows you to request permissions, open the camera, and take pictures.

import { Camera } from 'expo-camera';

async function takePicture() {
  const { status } = await Camera.requestPermissionsAsync();
  if (status === 'granted') {
    const camera = await Camera.openAsync();
    const photo = await camera.takePictureAsync();
    console.log(photo.uri);
  }
}

Other packages similar to expo

react-native

React Native is a framework for building native apps using React. Unlike Expo, React Native requires more setup and configuration but offers more flexibility and control over the native code. It is suitable for developers who need to integrate custom native modules or require more advanced native functionalities.

cordova

Apache Cordova is a mobile application development framework that allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for cross-platform development. Compared to Expo, Cordova provides a different approach by wrapping web applications in a native container, which can be less performant than React Native-based solutions.

flutter

Flutter is a UI toolkit from Google for building natively compiled applications for mobile, web, and desktop from a single codebase. Unlike Expo, which is based on React Native, Flutter uses the Dart programming language and provides a different set of tools and widgets for building applications.

README

expo

The expo package is an umbrella package that contains the client-side code (ex: JavaScript) for accessing system functionality such as contacts, camera, and location in Expo apps.

Some of the Expo APIs are implemented in this package, while others are implemented in universal modules under the parent packages directory.

See CONTRIBUTING for instructions on working on this package and the universal modules.