DEV Community

Anders Aaen Springborg for IT Minds

Posted on • Updated on

A Beginner's Guide to Mobile Development in React Native with Expo

Intro

This is a guide getting you through setting up a React Native project. However, this guide won't go in details with React, so if you're new to React, I recommend you to check out this getting started with react guide.

Here is a link for what your code should look like, when you are done.

React Native and Expo

React Native is a framework for writing cross-platform native apps.

Expo is a set of tools and services built around React Native and native platforms that help you develop, build and deploy iOS and Android apps from the same JavaScript/TypeScript codebase. The alternative would be to build each app in xCode and Android studio, which is very cumbersome.

Installation

Prerequisites

You need to have node and npm installed, and yarn is optional, but recommended.

Then we have to install Expo, through npm:

# Install the command line tools
npm install --global expo-cli
Enter fullscreen mode Exit fullscreen mode

Now, we're ready to make a project. If you installed yarn, write:

expo init first-app
Enter fullscreen mode Exit fullscreen mode

or with npm

expo init first-app --npm
Enter fullscreen mode Exit fullscreen mode

From here, you will be prompted with a few options for your project. I recommend choosing a managed workflow as this enables us to release the app in Expo, without an Apple developer account for iOS. I chose the template "blank (typescript)", as can be seen in the picture below. If you're new, you could also use the "tab" template. This has built-in navigation.

Init expo app

You now have a project. In your terminal, you can navigate to the project's directory with 'cd first-app'. Your project structure should look like this:

File structure

Now, you can run the project by writing:

yarn start
Enter fullscreen mode Exit fullscreen mode

or

npm run start
Enter fullscreen mode Exit fullscreen mode

And it will look something like this:
App template iPhone

You can either press w, to see your app in your browser, or you can scan the QR code which redirects you to download an app called Expo go. This allows you to view the app while you develop it, which is something I would recommend.

Initial app

You now have a running app in React Native. In the next section, we are going to look at how native APIs work.

Native APIs

As we choose a "managed workflow", we're building everything with Expo. This comes with some limitations. If you need a native API which isn't on the list of supported APIs (there is 100+ native APIs), you can switch to a bare workflow in which you can write your own native code.
Below is a comparison between a managed and bare workflow:
Managed and bare workflow comparison

Implementing native APIs

As an example, let's make a page that shows our battery percentage and GPS location.

Let's start with a battery component. We install it with:

expo install expo-battery
Enter fullscreen mode Exit fullscreen mode

First off, we'll work on showing the battery percentage. We need the API 'getPowerStateAsync'. We'll call when a component mount, and voilá - we have the phone's battery percentage:

const [battery, setBattery] = useState<number>(0);

  useEffect(() => {
    Battery.getBatteryLevelAsync().then(b => setBattery(b));
  }, []);
Enter fullscreen mode Exit fullscreen mode

We can show it in our view like this:

return (
    <View style={styles.container}>
      <Text>Battery {(battery * 100).toFixed(0)}%</Text>
      <StatusBar style="auto" backgroundColor={"black"}/>
    </View>
  );
Enter fullscreen mode Exit fullscreen mode

Battery 42%

Now, let's make a component that looks at the power mode of a phone. Imagine that you have a power-hungry feature which you want to disable when in low power mode (like animation).
We can get the power state from the same API, like this:

const [lowPoweredState, setLowPoweredState] = useState<boolean | null>(null);

  useEffect(() => {
    Battery.getPowerStateAsync().then(bs => setLowPoweredState(bs.lowPowerMode));
  }, [])
Enter fullscreen mode Exit fullscreen mode

We can now carry out some conditional rendering, based on the power state:

  if (lowPoweredState === null) return <Text>Getting info from your phone...</Text>;
  return (
    <Text>Battery state: {lowPoweredState ?
      "i am a static text replacement" :
      "I AM A POWER HUNGRY ANIMATION"}
   </Text>);
Enter fullscreen mode Exit fullscreen mode

Rendering based on power state

To stay up to date, when the phone changed from a low powered state to a normal one, we can add a listener in useEffects like this:

const batteryModeSubscriber = Battery.addLowPowerModeListener(b => setLowPoweredState(b.lowPowerMode))
return () => batteryModeSubscriber.remove();
Enter fullscreen mode Exit fullscreen mode

Our app will now always render based on the power state.

Publishing our app

Normally, you think of publishing an app to App Store and Google Play store. In order to do this, you need an Apple developer account(100$ yearly subscription) or a Google Play developer account(25$ one time fee) account. You can read more about building and releasing your app here.

You're an app developer

You have now started on your first React Native app in Expo. This is the same tool which is used for creating apps like Facebook, Instagram, Coinbase, shopify, Tesla, Uber Eats and many more. You can read more on Expo here: https://docs.expo.dev/ or check out an open source app here: https://github.com/withspectrum/spectrum
and checkout an enterprise boilerplate here: https://github.com/infinitered/ignite

Discussion (4)

Collapse
svgatorapp profile image
SVGator

Amazing post for any app dev newcomer. Thanks for sharing!

Collapse
aaen profile image
Anders Aaen Springborg Author

Thank you very much, for the kind words <3

Collapse
simplemente_nu profile image
simplemente nuevamente

thanks for sharing, just a question
why did you/company choose react native over flutter?

Collapse
aaen profile image
Anders Aaen Springborg Author • Edited on

Thanks for the question :)
IT Minds, is a consultancy company, and we do both Flutter and React Native. I do personally choose react native over flutter for multiple reasons. To name a few:

  • Flutter is based on a rendering engine called SKIA, where react native is targeting the native rendering platform on each platform. This means that you miss out on features like font scaling and other native things, on each platform, if your are using flutter.
  • React Native is javascript based, and lives in the javascript envirormet, which tools from the javascript world integrates with my build system. An example is the javascript version of openapi-genrator which is better supported than the flutter version, as the community is bigger

Hope this answers your question. Don't hesistate to reach out, if you have futher questions :D