My Take on React Native

By this point, I have learned to make and design websites a few different ways with a few different frameworks. But the thing I don’t have experience in is creating mobile projects. Nowadays, there are job postings specifically for mobile developers, considering that Apps are so important to everyday life. So, to start getting into mobile development, I thought it would be a good idea to look into React Native. Since I already have experience with React, learning React Native should make it so that I can focus on learning what is different about mobile development compared to creating websites without having to learn a whole new framework. In this post, I’ll talk a little bit about what I’ve learned.

First off, since I have never worked with mobile development before, I had to start with getting my environment set up. Following the advice in React Native’s documentation, I decided to use Expo CLI, which you can use to get a project up and running with a few simple commands. First, to install it, you run this command:

// ♥ > npm install -g expo-cli

And once it’s installed, you run this command in the folder you want the project to be in:

// ♥ > expo init <ProjectName>

Once the project is finished generating, navigate into it and run npm start or expo start to get it running. This should open a webpage with a log with all the things that have happened with the project and a QR code. The QR code is for you to use to scan with the Expo client app so you can see how the project looks and works on a phone.

Now, to get into how to write a React Native project. When it comes to state and props and the component tree of a React app, they work the same way in React Native as a regular React app. There is still an App component where the main part of the project is based, and you use JSX to write the return for the component. Components can still be classes or functions, and they can use Hooks. In this way, the structure of both kinds of React apps is similar.

The main difference between React and React Native is the elements you use in your returns. For example, in a regular React app, each component’s return segment will be wrapped in a <div> and you use regular HTML elements for all the things you have in the component. But in React Native, instead of using HTML, you’ll use the components you import from react-native. There are a few core components you will use frequently in a React Native app:

• <View>: Similar to a non-scrolling <div> to use as a container
• <Text>: Used like a <p> for adding text
• <Image>: Like an <img> for displaying images
• <ScrollView>: Similar to a scrolling <div> to use as a scrolling container
• <TextInput>: Used like an <input> of type "text" to allow a user to enter text

To see some of these in action, here is an example of a React Native component:

import React from 'react';
import { View, Text, Image, ScrollView } from 'react-native';
const App = () => {
  return (
    <ScrollView>
      <Text>Some text</Text>
      <View>
        <Image
          source={{
            uri: 'https://reactnative.dev/docs/assets/p_cat2.png',
          }}
          style={{ width: 200 }}
        />
        <Text>This is a picture of a cat on a car</Text>
      </View>
    </ScrollView>
  )
}
export default App

One other main difference between React and React Native is the way you style the app. The big difference is that you don’t write all your styles in a CSS file, instead, you can either add them directly to the elements, like the Image in the example above, or if you have a lot of styling to add, you should use a StyleSheet. You can import StyleSheet from react-native and use it to create style objects to use in your components, like so:

import React from 'react';
import { Text, View } from 'react-native';
const StyleExample = () => {
  return (
    <View style={styles.container}>
      <Text>I'm in the center and have a grey background</Text>
    </View>
  )
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'grey'
  }
})
export default StyleExample

One thing to note in this example is that the styling isn’t quite the same as regular CSS. You are actually styling with JavaScript objects, but the style names and values usually match regular CSS. The main difference is that names are written using camel casing, like the example above using backgroundColor instead of background-color.

From investigating React Native, I’ve found that it isn’t too difficult to transfer my knowledge of React to creating a mobile project. By using Expo CLI and all the things React Native gives you, like their core components, I can make React components almost the same way I would with a regular React project. Thankfully, React Native gives me an easier way to get started in learning mobile development than having to start from scratch.