From Zero To React Native Hero PT1: Running our first app💥

React Native is a useful tool to develop applications for both platforms iOS and Android. My experience using it has been quite fun despite of all the time I've spent facing multiple errors caused by myself by not reading the documentation properly.🤣 So I'll do my best to give you a nice and simple walkthrough this wonderful journey of hybrid mobile applications development.

We'll go step by step from zeros to heroes by developing a simple mobile application to save notes.📋 Firebase will be the main tool for every backend process and we'll use Firebase Firestore as our database and the Firebase Authentication feature.

This guide will cover:

• Initial React Native project configuration
• React Native Navigation
• Redux
• Firebase Firestore

Previous React Native development environment setup is necessary to follow the steps on this post.

Let's get to it🤖

Creating our app

We'll create our React Native Notes application by opening the terminal at the desired project location and running the following:

$ npx react-native init <ProjectName>

Replace <ProjectName> with the name for your project. I'll go with ReactNativeNotes. It is very important to follow the camelcase format for our project's name.

This command creates a brand new directory at the selected location which contains our new react native project. When it is done, your project's structure should look like this:

To start running our app we'll go to our terminal and we'll run the following commands:

For Android:

npx react-native run-android

This will make the android building process and once it is done, if no device is selected it will open up the default emulator configured on Android Studio.

To run RN on a physical device you only need to plug your device to the computer and grant access permissions. Then run the command above and it will build it to the target.

Tip 🧐: To make sure of which devices we'll be targeted on the deployment you can run adb devices. It will print a list of devices attached to the server and ready to run the app.

For iOS:

The process for running a RN app on iOS might be take a little longer. The easiest way to make it is by going to the ios folder inside our project's directory and open the ".xcworkspace" file:

Once Xcode is opened, we go to the top of the window, we select our target device (it can be a physical device connected to the computer or an emulator), and press the play button.

When building the app you'll notice a terminal window will pop up with some weird stuff on it. This window is our node metro bundler, React Native uses this to compile our JS code to the selected target and be able to run it. It should look like this:

❗️Note: You can start this metro bundler by running npm start at the terminal before running the app to the selected target. This can also be used as the console for debugging if necessary.

Once the building process is done, the targeted device should open the application rendering the default RN initial template:

And just like that we've built our first initial React Native application
ready to be deployed both to iOS or Android. Not bad, huh?🤓

The code for this template is located at App.js file at the root of our project's folder. Our file would look like this:

At the beginning I had no clue of what did all of those tags, variables and imports meant 🤯, but after struggling with it for a couple days I understood the necessary:

React Native uses JSX and Components

The easiest way to understand how RN manages its interface structure is to compare it to HTML tags. This tags are used to provide a hierarchical order to our project's structure. RN uses JSX to manage its own tags, known as Components.

React Native is all about components, they go from the simplest ones that help you build a container to the ones you build by yourself. Everything should be wrapped inside a component's open and closing tag, or closing tag by itself.

The react-native package provides you with basic fundamental components we can use to build our own personalized components.😎

At our current App.js file we find Components such as <View> <Text> <Scrollview> <StatusBar> and others.

Let's understand some of these:

• <View>: This one is the most fundamental for building user interfaces with RN, it is a container that can be nested inside others to build our UI structure.
• <Text>: This is the component provided by react-native for displaying text into UI. Every text we want to present on the interface must be wrapped around this Text tags.
• <SafeAreaView>: This is commonly used as the main wrapper component for the whole application. It provides a View which renders our UI only within the safe area boundaries of our devices. This is useful for the latest devices with notch integrated and bottom hand gestures.
• <ScrollView>: This component provides a scrollable container for the content inside itself.
• <FlatList>: This renders a basic flatlist. Using this component we can go over an array and render each value.
• <TouchableOpacity>: This is a container which allows the usage of onPress prop, for representing a functionality of a button. This component is used rather than <Button> because it is highly more customizable.

Each of these components can be adapted to our needs through passing props, which allows us to handle things like styles and data sources among others.

For the task of styling our components, and by styling we mean defining background colors, fonts, container sizes, display directions and that sort of stuff, we'll use React Native's Stylesheet to create our own styles. These are defined by objects similar to regular CSS classes, the main difference is that RN Stylesheets use camelcase syntax for each objects property.

❗️Remember to import every component you will use from react-native at the top of the file.

Let's see an example using the things we talked about above:

The output for this code will look like this:

As you can see, we built a component which renders a simple (and kinda ugly) interface where we can clearly identify the structure we defined at the code:

const App = () => {
  return (
    <>  // One Fragment wrapping the whole content
      <StatusBar barStyle="dark-content" />
      <SafeAreaView> // Prevents the UI to render outside device's borders
       //We use "style" props of each component to set its own customized styles
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}> 
          <View style={styles.body}> 
            <Text style={styles.text}>Hello RN world!</Text> 
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: '#000000',
    height: '100%',
    padding: 15
  },
  body: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#FFFFFFF',
    fontSize: 20
  }
});

An important thing to notice about what we've just built is how <SafeAreaView> covers the whole screen but it only allows rendering within its own limits, that's why we see those white borders at the top and bottom of the screen and then we wrap our content inside a <ScrollView> in order to prevent overflowing.

📌 Important: Every render method must return only one parent component, this parent may have as many child as you need but at the top of the structure it must be only one. To help us accomplish this we can use these things called Fragments as we see on the code above, which are represented as <> </>.

These are the basic elements we need to build our application interfaces, feel free to play around with what we've learned because these are the foundations of our coming ReactNativeNotes app.

We'll begin developing our app on the next post, go check it out and stay tunned to go over this journey together.👨‍💻

Thanks for reading!