React Native: The Basics

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:

  • 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.
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.
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:

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.

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.
Don’t forget at the top import { Linking, Alert } from ‘react-native’;
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

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!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store