Simplifying State Management in React Native/

...

/

Getting Comfortable Previewing and Debugging the App

Getting Comfortable Previewing and Debugging the App

Learn how to set up and preview our React Native app on simulators and devices, configure icons, headers, apply custom fonts, and troubleshoot errors.

We'll cover the following...

Setting up Expo

Let’s see how we can see whether our code runs correctly on our platform. The first thing we need to do is run this command in our terminal by clicking “Run” on the widget below and clicking on a new terminal:

yarn start

Note: On a local machine, when expo is done setting up our development server, it gives the following options:

  • We can press “i” for an iPhone simulator (if we’re working on a Mac computer)

  • We can press “a” for an android simulator (if we have Android Studio installed)

Alternately, we can take our phone and use the Expo Go app. Whichever one we choose, we will see a browser window open automatically on our device.

Let’s see how the browser window opens with a web option by clicking on the “Run” button below:

import React from "react";
import { View, Text } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { useHeaderHeight } from "@react-navigation/elements";

export const Profile = () => {
  const headerHeight = useHeaderHeight();
  return (
    <SafeAreaView style={{ flex: 1, paddingTop: headerHeight }}>
      <View>
        <Text>this will be the profile screen</Text>
      </View>
    </SafeAreaView>
  );
};
Expo developer tools in the browser

Take some time to play around with the app. Try creating some obvious errors, such as writing plain text outside of the <Text /> component on lines 17–19 to the “Feed” surface, maybe using a <div> tag, or not closing a tag.

Note: We will practice code changes on our bottom tab navigation. We will not be creating any components for that. ...

Navigator