Introducing React Native and Expo SDK - LogRocket Blog (2023)

ExhibitionIt is an open-source platform that makes cross-platform iOS and Android mobile app development much easier than before. The Expo SDK is a set of native libraries for any iOS and Android platform and allows JavaScript to access device system resources such as camera, push notifications, local storage, contacts and other operating system and hardware APIs.

previous requirements

To install Expo you needNode.js-Version 12or newer on your machine, since Expo's command-line tools and dependency management depend on Node. You can check your version of Node by running the node -v command in your terminal.

Expo provides a command line interface calledExpoCLI. It is used to test the app while developing it on iOS or Android.

npm install -g expo-cli

Install Expo Mobile Client for iOS and Android

To test the functionality of your mobile app, you need the Expo client app for Android and iPhone. You can find them inGoogle-App-StoreIt is inAppstore.

Creating an Expo app

Let's create an Expo app and see how it works. You can create a new Expo app with the following command:

expo init your_app_name

Substitutename_of_your_applicationwith the name of the application you want to create. After pressing Enter, you will be prompted to select the model type for your application.

You can choose any template suitable for your app. Now I choose"empty workflow“to simplify things.

You will then be prompted to install the template viafio. If you already have Yarn installed, chooseSimulator, or else chooseKeep going. After completing the following steps, your app is ready to use.

Go to the following commands to start the project.

cd <app_name>npm start or yarn start

After the above commands run successfully, a new Metro development environment will start. You will be given the QR code which needs to be scanned via the Expo client app on Android and the standard camera app on iPhone. Right now you are ready to go.

Setting up the project in Expo and React Native

Our project consists of several important files:application.jsonIt contains all app settings like app name, SDK version, icon etc. The application dependencies are listed in thePackage.jsonArchive. so there it isapplication.js, which runs when the application starts. There you will see theoffer- Method that wraps all components in a single component inside the return statement.

you can use the...Stileobject at the bottomapplication.jsto specify the styles of user interface components. To moveStileOutsideofferThe method will increase code readability in React Native.

Here is the sample code belowapplication.js:

import react from 'react'; import { StyleSheet, View, Text } from 'react-native'; Export default class Principal extends React.Component {//Rendering method return RN components render() { return ( <View style={ styles .title}> <Text style={styles.title_txt}>My first app</Text> </View> ); }}//code your styles hereconst styles = StyleSheet.create({ title: { //your styles here }, title_txt: { //your styles here }});

What is ExpoSDK?

Expo comes with several built-in libraries that are commonly found in most applications. Consult the ExpoDocumentationfor more details about it. However, the following libraries are useful in most applications you create:

• AppAuth,authentication session: Authenticate users via OAuth
• opening screen: Creates a splash screen when starting the app
• Location: Manage your application's l10n/i18n for localization purposes
• Load app: Upload assets, fonts, etc
• map view: Use maps within the application
• image selection/image manipulator: Open pictures or videos from the device
• Exchange: Share data between app and device
• safe camp: Save data to device memory
• Camera: Take photos and videos with the device's camera

Here are some additional features that Expo supports:

• notifications: Push notifications from the Expo Push service
• AdMob: Google SDK for AdMob
• Facebook Ads: SDK from Facebook
• Filial: Integrations with branch.io
• Amplitude: Breadth analysis for mobile applications

You also have access to:

• Audio-: Play or record sound
• VON: Play audio/video
• ART: Draw things with SVG
• Seem: Manage brightness
• search below: Run background tasks
• paid: Supports payment integrations with Stripe using Apple Pay and Android Pay

In general, there are about 80 APIs that you can access via Yarn, npm or Expo once installed without closing the Metro wrapper, which is just another way to speed up your progress.

Creating a splash screen with Expo

Let's learn how Expo works by adding a splash screen. First, create an image in PNG format suitable for a splash screen in your application. Then place this image in the application directory. Here I added it to the root of the directory.

Now install theExpo splatter screenLibrary to use with the following command:

expo install expo splash screen

Then create a new file and import the old library. After that, create a function to show the home screen like this:

import React, { useCallback, useEffect, useState } from react; Import {StyleSheet, Text, View } from react-native; // import splashscreen library hereimport * as SplashScreen from 'expo-splash-screen'; //Import your image from directory import splashScreenImage from './splashScreenImage.png'export default function SplashScreen() { const [loaded, setLoaded] = useState(false); useEffect(() => { Async function Prepare() { try { // Keep the splash screen active while the app searches for resources SplashScreen.preventAutoHideAsync(); // Preload any content here // You can also make any API calls here // Delay loading for a second and wait again Promise(resolve => setTimeout(resolve, 1000)); setLoaded(true); } } Prepare(); }, []); const onLayoutRootView = useCallback(async () => { if (loaded) { // Now let's tell our splash screen to go away while our resources are now loading. await SplashScreen.hideAsync(); } }, [loaded]) ; if(! loaded) { returns null; } return ( // Create your splash screen view here. <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Image source={splashScreenImage} style={{ flex : 1 , alignItems: 'center', width: 100, height: 100 }} borderRadius={10} resizeMode="cover" /> </View> );}

Finally import the file from yourapplication.jsand call usopening screenwork there

import React from 'react';import { StyleSheet, View, Text } from 'react-native';//import new components, import SplashScreen from './SplashScreen.js';export broken class main extensions React.Component { render( ) { return ( //coloque nosso componente aqui. <SplashScreen/> <View style={styles.title}> <Text style={styles.title_txt}>Meu primeiro aplicativo</Text> </View> ); }}

Launch your app and see the results in the Expo client app!

Publication and uploading of the application in the branches.

When it comes time to release the app to the stores, you have a few options to choose from.

#Build comandoexpo build:[ios|android]

This command starts installing a package in the cloud instead of locally, so it doesn't require a high-end laptop or PC. It's also good if you're a Windows user since you've never used Xcode before. Just wait for the build to finish and you're done.

Once the build has been queued, you can exit the terminal without hesitation. If you need to know the status of the build, go to the URL below the text "You can monitor the build at".

There you will find a download button that will be available once the build is complete. In the meantime, you can wait in the terminal until you get a direct connection to download the package.

How do we get to the stores now? The easiest way to do this with Expo is to use the following command:

Ladebildschirm:[ios|android]

Excellent! Everything is ready!

New features added to Expo in 2021

In 2021, several new features have been added to the Expo. Here are some of the most popular.

Integrated development tools

From the CLI, you can access the developer menu, examine components, and track the results. Just run Expo Start and clickMetroto access the developer menu anddisplacement+mto access performance monitor or item inspector in native apps.

force reload

Shaking your machines every few minutes can be difficult! PressRIn the terminal interface, you can reload connected computers, laptops, simulators and browsers. This method is compatible with iOS, Android, Web and all physical devices.

Automatic configuration for TypeScript

Because installing TypeScript can be tedious, they've automated it completely. It just creates a spacetsconfig.jsonand run the expo start command and expo will take care of the rest. See the expo for more detailsDocumentsa "Typescript".

much better errors

Nobody likes mistakes. So they refined them in SDK 41 to make them descriptive, useful and practical. Only the most important stack traces are shown and errors and warnings are identified. Source maps have also been updated and generated code trails have been muted.

Debug your configuration

Now you can see the evaluated results ofapp.config.jsor app.json with the latest expo configuration order. Use theExhibition configuration - public typeCommand to show the application manifest file used in Expo.

Improved Apple Store interactions and the ability to connect from your terminal

Expo CLI provides connections to quickly resolve issues while other tools throw a 401 error. If you need to make a payment change or sign a contract, it's just a few clicks to resolve the issue and get back to development.

Overall, Expo is now faster, offers smarter authentication, improved error handling, and a full view of dynamic issues right from the console.

exposure restrictions

While there are many great new features, you should also be aware of some Expo limitations:

1. Expo apps don't support background code execution. This means you can't run code that listens for location changes while the app is closed.
2. Expo apps are limited to the native APIs supported by the Expo SDK. This means that if your app needs a unique use case, it can be developed with just plain React Native code or with the ExpoKit library.
3. Expo connects you to your tool suite. This means you cannot use any of React Native's other development tools, including command line tools and UI frameworks, by simply installing them. The good news, however, is that the Expo SDK supports basic React Native apps, so kicking your app out of Expo is not a challenge.
4. Standalone binaries in Expo apps can only be built when they are online. The command line tool provided by Expo allows developers to start building their applications on Expo's servers. Once that's done, you'll be given a URL where you can access an .apk or .ipa file to download.

Despite the above limitations, Expo is valuable in that it is a fully featured platform with extensive support for the major Android and iOS APIs. That means it covers most of the features that apps typically need. Therefore, you don't need to look outside of Expo to apply native functionality.

Diploma

React Native is the most popular framework for developing native mobile apps. Expo makes this process even easier with its SDK and developer tools. If you are a React Native developer, you should always keep Expo in mind and know its advantages and limitations.

In this blog post, we have created and released an app with Expo, and you can certainly extend this app by adding more features. Overall, the Expo SDK is a great collection of libraries for just about any functionality you'd want in a mobile app. Thank you for reading.