Basics of React Native

If you’ve been living under a rock for a while, like we’re talking a really long time, mobile applications have become almost a necessity in our everyday lives. When they first started out maybe they weren’t that exciting, I for one got a kick out of a simple coin-flip app. But as time passes mobile applications have brought on the ability to do more things using a phone or tablet. React Native is meant for building mobile applications and uses the component-based language that is React to do so. For any programmer who has used React I would highly recommend learning React Native. Components, props, state, JSX, and hooks are still used the same way which means that you already have the essential parts down. This post is meant to cover the basics of starting React Native.

One new thing that you will need for your native components is to import form the react-native library. An example would look like this:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

View and Text are different tags that you can use in your component. Using a View tag helps to render anything inside the tag into a container. Text tags are used to render… text. StyleSheets can be used to help style various aspects of your components.

Continuing building out an example component, the next step is to write out the function.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const ComponentExample = () => {
 return (
  <View>
   <Text style={styles.title}>Some text goes here</Text>
  </View>
 )
}
const styles = StyleSheet.create({
 title: {
 fontSize: 50,
 }
}
export default ComponentExample

Looks pretty simple, right?

This component only is going to render whatever text is within that text tag, it will be affected by the styles property that has been assigned to that tag, and will have a font size of 50. The component is then exported and therefore can be imported and reused easily just like any React component.

When building a project using React Native, starting your sever will generate a QR code that be scanned on a mobile device to simulate the app. Or you can use an iOS/Android emulator to see what the app looks like. Expo is the name of the app that you can download to your device to help manage projects.

React Native is an extremely easy language to pick up especially if you already have experience with React. It’s very useful and important in today’s mobile driven environment.