React Native: The Basics

File Layout For React Native Using Expo

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

Styling In React Native

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

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.
Answer: Through the use of React Native Navigation

Conclusion

--

--

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