A picture containing drawing, game

Description automatically generated

About Expo

  • Framework for universal React applications.
  • Free and open source tool build around react native.
  • Used to build IOS and android projects using JavaScript and react.
  • Enables us to use third party components to build our application.

Some Expo Tools

  • Expo CLI : command line interface for Expo.
  • XDE : Expo development tool. A GUI for setting devices for expo development, bundler logs and deploying updates.
  • Expo Client : An app for Android and iOS. Helps testing our application over mobile phones, without installing it on device.
  • Expo Snack : web app that helps working our application in the browser, with the live preview of our code that we are running.
  • Expo SDK : collection of JavaScript APIs that provides extra functionality to our app.

Features of Expo

A screenshot of a cell phone

Description automatically generated

Installation Steps

  • Install node.js              -     brew install node 
  • Install Expo CLI            -     npm install expo-cli –global
  • Create project using   -     expo init <project-name>
  • Preview your project  -      expo start

Project Structure

            A screenshot of a cell phone

Description automatically generated

  • assets : This is where we put our images, video files and songs.
  • app.js : Basic react native component.
  • app.json : contains the details about our project.

Sample code

import React from "react";

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

 

export default function App() {

  return (

    <View style={styles.container}>

      <Text>Hello World</Text>

    </View>

  );

}

 

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: "#ADD8E6",

    alignItems: "center",

    justifyContent: "center",

  },

});

Workflows

  • Two Approaches to build app using Expo :
    • Managed Workflow :- Expo tries to manage as much of the complexity of building apps for you as we can, which is why we call it the managed workflow.
    • Bare Workflow :- In this approach, developers have full control over the app. If experienced in mobile development, then you can go for this approach as it is much complex as compared to bare workflow.

Pros

  • Setting a project is fast and simple.
  • You can open the app while you are working on it.
  • Sharing the app is easy (via QR-code or link).
  • There is no need to build the app to run it.
  • You can always eject your app to ExpoKit and integrate it in native code. Though some of the features of Expo might not work.
  • You can easily build your application.

Cons

  • You can’t use native modules or libraries that uses native code build in C/Java.
  • Since we are using Expo SDK components, size of an application is much larger.
  • Ejecting to ExpoKit is a challenge.
  • Limited to the APIs supported by Expo.

References

 

Leave a Reply