React Native: The Basics

This article will cover the ‘essentials’ of a bare bones react-native app. I have covered what react-native is and the initial installation steps in a previous article, so this will be a more in depth coverage on some common components used within this javascript library. First we are going to go over the default file layout when initializing using expo, then some common components that are imported directly from react-native. Then we will cover some handy styling options.

File Layout For React Native Using Expo

After you have created your react-native app using the expo cli, you will see the following file structure:

The file App.js at the root of the projects directory is currently the top most layer of your app and what react native looks to first by default when deciding what to render. The file structure you settle on for a react native app can vary greatly with personal preference. In fact react-native has no real agreed upon file structure. My current preference is to set up an App folder at the root level, copying the code from App.js, creating an index.js where this code will be pasted, and deleting App.js. At this point if I were to just focus on the basics, I’d create the following folders within this new App folder:

• assets folder to hold my images folder which holds the pics I’ll need
• components folder where custom components that can be used across features are stored. An example would be a button that navigates to different screens depending on what props are passed to it.
• config folder where I would setup my routing to different screens I’ve made through the use of react navigation.
• constants folder where I would keep values that would need to be used in multiple areas of the app. An example would be a colors.js file that would export an object with keys defining various colors I’ll need.
• screens folder where I would define various screens that could be navigates to. Some examples might be Home.js, and Profile.js.

each of these would need their relative paths imported along with their default exports to be used elsewhere. This is different than just pulling things from the default react-native library or the React one as depicted here:

On the first line React is pulled from the react library. On the second line several components are imported from the react-native library so we use object destructuring. Finally the highlighted line is defined within our app so we use its relative path to where it is being used.

If we follow the relative path in the highlighted section for colors we will find colors.js. This is a file I usually create to house the various colors I will use throughout my app. It is an object that might look like the following:

These are rgb values that I’d use within a style prop. Such as if I ever wanted white I no longer needed to type ‘#fff’ I could now enter colors.white once this colors file was imported where I was going to use it.

Common React Native Components

If you glance back up at that second to last picture on the second line you will see several components being imported from the react-native library. There are a whole bunch more, but here are some useful ones to know:

• View — An important containing component that typically wraps other components. View supports handy layout features such as flex, flexDirection, alignItems, and justifyContent. It also supports accessibility props for mobile devices. An example of a View component being used to center an image might be:

• Text — A component for displaying text. which is inserted between the opening and closing tag for this component. example:

• Image — A component for rendering an image. This is usually done via a self closing tag with some optional props passed to the component. An example of an image being displayed that is stored within the project would be:

And an example of an Image you’d like to render that needs to be pulled from somewhere on the web would be:

There is another very common component imported from the react-native library called StyleSheet which we will go over in the next section.

Styling In React Native

Most components in react native can receive a prop called style. It is common practice to have this point to a StyleSheet object that you define as styles below the components that use it. A basic example would be:

Some of the styling options within a StyleSheet reflect CSS values (but are camel case). These are not css however but generally perform similarly to whatever css value they mimic such as backgroundColor.

the topmost attributes in this object are the labels you create and should have names that reflect the purpose and component they will be used in. It is best practice to keep these in alphabetical order since these styles objects can become quite long. Each of these topmost labels should point at another object with attributes that represent styling options. A property worth mentioning in the picture above is the flex attribute which is used for sizing.

A Few Handy Questions And Answers

At this point you might have some ‘how do I?’ questions for some basic features all web apps should be able to perform. I will try to formulate some of them and provide answers for you.

• Question: How do I create links within a react native app?

Answer: The Linking component.

The Linking component is imported from react-native and can be passed a url via its openURL function. It is important to also incorporate a .catch() feature to this in case the url doesn’t give a 200 response. Because of this it is best to define a function that uses the import of Linking and has a function with a catch scenario. Something like:

Don’t forget at the top import { Linking, Alert } from ‘react-native’;

An example pertaining to that silly alert I put up there would be:

This will display Look ma’ Google! in the exact center of the screen with blue lettering.

• Question: How do I navigate between the screens I’ve made?

Answer: Through the use of React Native Navigation

The detailed answer of this is a bit extensive. If you follow the guide in the above link you will realize it involves setting up the structure of your App specifically to accommodate this which should probably be your goal anyway. If you’d like a more detailed walk through on this process I have written this blog with specific instructions pertaining to this.

Conclusion

This has been an overview of the basics of a react native app. Hopefully by reading along you have a good idea of what a bare bones react app looks like and how it works. If you would enjoy a deeper dive, the official tutorial is an excellent resource along with the react native docs. Now go forth and make your own fun native mobile apps!