A React Native Intro

React Native Overview

If you have enjoyed the React JavaScript library, you should check out React Native. It is now one of the most popular frameworks for mobile app development. The framework is open source and like React, was created by Facebook. (If you don’t know anything about React, I have another blog post comparing React vs Angular.) React Native is a cross-platform framework, that allows the creation of an app to run on iOS, Android, and, with the use of React Native for Web, browsers. Kumar Harsh has an in depth article, "The complete guide to React Native for Web". React Native uses Expo to view your progress as you go. Their app, Expo Go, gives you the ability to experience what you’re building from your mobile device.

Even though “native” is in the name. React Native is not considered native app development. Native app development involves focusing the app on one platform. They offer very high performance and typically offer better UX/UI than web development. Performance is increased since the code is compiled directly into the device’s core language. In native app development, it’s very easy to follow the specific OS guidelines, allowing for optimal user experience. While these are some great advantages, it also means you’d have to build two separate apps to work on both operating systems.

Getting Started

Either npm or yarn can be used to start a new React Native Project, below will be the npm example. If you follow these steps, be sure to be in your code editor’s terminal in the directory you’d like the project to be inside.

npx create-expo-app YourNewExcitingProject

cd YourNewExcitingProject
npx expo start

After those three lines, you’re ready to use Expo Go and take a first look at your project! As long as you’ve installed Expo Go, Apple users can scan the QR code in their terminals from their phone’s camera app, and this will take you to the live view of the project! Android users must first open the Expo Go app and then use the app to scan the same QR code.
Now, as you edit YourNewExcitingProject or whatever you named it, the edits will be reflected. Note: I sometimes have to close and reopen the app to reflect changes after fixing errors.

Having prior experience in React will give you a major head start in working with this framework, you may not understand React Native until you have an understanding of React. The fundamental building blocks of React, components, JSX, props, and state, will all be used in React Native projects.

You’ll be able to import all the React modules you’ve used, and of course, React Native has built upon these. Giving access to new modules built specifically for iOS or Android views.

Using only built-in modules I was able to very quickly put together this little app. These screenshots were taken from my phone while using the Expo Go app to preview my work.

And after clicking the Do Something button...

I created a new Home component in a separate file. Then all I did in App was import it and added it to the App’s return, in typical react fashion.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, View } from 'react-native';

import Home from './components/Home.js';

export default function App() {
  return (
    <View style={styles.container}>
      <Home />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

In Home, I imported several React Native components, and added them to my return, just with an addition of some simple attributes.

import { View, Text, Button, Alert, Image } from 'react-native';

export default function Home() {
  return (
    <View>
      <Text style={{ fontSize: 20 }}>Here is the Home View</Text>
      <Button
        title='Do Something'
        onPress={() => Alert.alert('You did something!')}
      />
      <Image
        source={{ uri: 'https://reactnative.dev/docs/assets/p_cat2.png' }}
        style={{ width: 200, height: 200 }}
      />
    </View>
  );
}

This example did not show using any use of props or state, but hopefully gets you excited about how quickly you can get started!

Wrap up!

No matter what app you’re trying to build, React Native is a framework that will give you many possibilities and tools to get you there. Take advantage of all the other React libraries and frameworks, such as React Redux or React Bootstrap. If you’re new to programming, there will be many opportunities for deep dives, but you should have an easy enough time starting the project and seeing some nice results!