Chances are if you’re reading this, you‘re probably exploring using React Native for the first time.
Maybe someone at work told you, or you came across it on your own while exploring how you plan to build your next mobile app. React Native takes all of the great things you’re able to do in React and optimizes it for use in a mobile app. Let’s jump in on what you need to get started!
Javascript and React
Before we get into any details, you’ll first need to have some experience with JavaScript and I also recommend understanding React as well though it’s not required.
To freshen your memory on all things JavaScript, I recommend checking out the Mozilla Developer Network, or if you need some more information on React, Reactjs.org is a great reference tool for you.
It’s important to have an understanding of both to continue into the next sections with no hiccups.
Installation and Import
As many other packages/add-ons to Javascript, React Native installation works with Node Package Manager. In order to use specific features within React Native, it’s recommended to use Expo CLI as an environment. As long as you have node 12 installed, you will be able to install with the command below:
npm install -g expo-cliNext, to create your first React Native project, enter:
expo init FirstNativeProject // Next, enter the project directory:cd FirstNativeProject //Finally, to start your React Native Development server:npm start
After this is completed, you should download the Expo CLI for your phone and connect it to the same wireless connection as your computer. You’ll be able to scan a QR code to start your project on your phone to test. You can also view a quick version of what you’ve written without and environment set-up by using Snack which is similar to CodePen, but for testing with mobile devices.
Important Differences
React Native is optimized for creating interfaces suitable for a Mobile app. Since this is the case, there are slight differences in the vocabulary used in Native and many different animations that you can use as well. Let’s get started by talking about the changes to components:
Components
React Native has many different components available to you. For a complete list of all React Native components available, you can refer here. There’s even specific component nomenclature for Android and IOS devices. For now though, here are some of the basics:
- View <View> (non-scrolling)
This is similar to a <div> class in HTML which acts as a container for other elements in your JSX. This does come with some Touch handling possibility which we will get into shortly.
2. Text <Text>
Comparable to the <p> class, this text component is able to nest and style sets of strings.
3. Image <Image>
Self explanatory, but it’s worth noting that this is spelled fully as opposed to the JSX/HTML format of <img>.
4. Scroll View <ScrollView>
This is a scrollable container that can contain multiple components within it. Think of it like a scrolling <div> class.
5. Text Input <TextInput>
Like the <input> type. Allows user to enter text.
6. Touchable
If onPress really isn’t doing what you’re imagining the user experience to be like, there are many touchable commands that provide a bit of animation on the button itself. Check out the list of touchable props here.
Import
Like useState or Route in React, in order to use these React Native components — you’ll need to import them. At the top of your .js file, enter:
import { View, Text, Image, ScrollView, TextInput } from 'react-native';This will pull these components from the React Native library to use in your project.
Event Handling
You can imagine all of the different events that can be logged on a mobile device…There’s a lot! We’re going to cover a couple of key basics here:
- onChangeText
Like the “onChange” capability in React, this takes a function to be called every time any text is entered within the input fields. Like logging in and creating a User for example.
2. onSubmitEditing
This is the prop used to capture the event of submitting a form. Similar to “onSubmit” in React.
3. onPress
Like “onClick” this is the prop used to capture when a button is pressed on a mobile device.
There are many other event captures available in React Native focused around scrolling, sliding from page to page, pressing, and even components based around moving the keyboard out of the way of the content visible to users.
Hopefully with the few mentioned above you’re more interested than ever in trying out React Native! I leave the rest to you!
Resources:
