React Native

React Native

React Native is an open source framework used to create apps for iOS, Android, and the web. You should learn JavaScript and React fundamentals before learning React Native.

React Native vs Expo

Expo is an open-source platform for making apps for iOS, Android and the web. Expo offers tools and services for making Expo apps. The build process is different for React Native and Expo.

Expo

Pros

• It's easy to set up and use.
• You can run the app on mobile and the web.
• Expo go is a free tool for testing Expo apps on iOS and Android.
• Documentation and guides are good.
• You can build cross-platform apps.

Cons

• You can't add any custom code*
• You can't use native libraries.
• Some databases do not support Expo.

*You can add with development build.

React Native

Pros

• You can add native code.
• You can use native libraries.
• The app may work faster than Expo.
• You can test your app on your own device.

Cons

• Setting up the environment takes longer than Expo.
• You need to use Xcode and Android Simulator.
• Building an app takes longer than Expo.
• You need a Mac to build an iOS app.

React Native Installation

Setting up your environment for React Native depends on your operating system and may require additional dependencies, please check React Native documentation. The following React Native installation instructions are only for MacOS and Node Package Manager. If you are using Yarn Package Manager, please use "yarn" instead of "npx". To develop a React Native iOS app, you can use the following instructions for Mac:
Before starting a React Native project, you need to install Xcode and CocoaPods.

If you installed react-native package earlier, you'd better remove it:

npm uninstall -g react-native-cli @react-native-community/cli

To create a new React Native app, run the command below:

Tip: If you can't install CocoaPods with the command above, navigate to the ios folder and run "pod install". If you are not sure whether it's still being installed or stuck, you can exit (Ctrl + C) and run the command below:

pod install --verbose

Please note that pod install may take a long time. You can use the --verbose with other commands to increase logging verbosity. For example, you can use "npx react-native init NewProject --verbose" while creating a react-native project.

If you have installed successfully, you can see Podfile in the ios folder:

You can see ios folder of a React Native app in the example above. The app's name is "TestRN". Installing React Native is harder than installing Expo. If you installed React Native successfully, you should see the files and folders above. If you haven't installed React Native successfully, you can use React Native Doctor command. You can learn more about the React Native Doctor command.

React Native environment setup

To see if packages are installed correctly, you can use the react-native doctor command below:

The react-native doctor command can detect and help with problems related to the development environment. You can also use the doctor command for the "Info 💡 tip: make sure that you have set up your development environment correctly" error.

Tip: If you run simulator for the first time, you need to wait for a while.

A simple React Native App with core components

Let's make an app with basic components. Since only basic React Native components are used, the code below works with both bare React Native and Expo.

You need to import React, React hooks and the React Native components.

View of the app

The React Native example above shows how basic components work. TextInput is used to get the user's input. onChangeText, the prop of TextInput, is called when the user's input (text) changes; you can see what the user types for a new item as in the example. FlatList is another important component for rendering list items. useState is the most common React Hook, and it makes the state management easy. It declares a state variable and updates the state. The "item" is declared and updated in the example above. If you want to learn more about useState, please check the useState section and the other examples. Only javascript is used for adding and deleting items. However, you can store string data in the Firestore as well.

Tip: If you need scrolling, you can also use ScrollView. However, ScrollView loads all its components at once, while FlatList renders items in a more efficient way and has a better performance.

If you want to test the app, you can use Expo.

Style

There are two ways to style components. First option is to use style prop as in the example below. You can write style prop inside the component you want, you just need to add style name and the value.

Second option is to create a StyleSheet. You can also import and export StyleSheet.

useState Hook

useState is a React Hook that adds a state variable to function components and helps state management. You can read the example above. You need to import useState from React:

import React, {useState} from 'React'

The earlier examples use strings and arrays, but useState can also be used to manage image data. Although the initial state is empty in the examples above, you can also specify an initial state:

const [list, setList] = useState(["tea"])

You can change the state with Submit() and Delete() functions. You can update the state using the Submit() and Delete() functions. The TextInput component allows users to enter items, and FlatList displays the items stored in the list.

React Native Libraries

If you need extra functionality, you can use React Native libraries. You need to install the library you want. Some libraries require extra configuration.

React Native Image Crop Picker

react-native-image-crop-picker library enables users to choose an image or images from their photo library and crop them. You need to install the library first with the following command:

Then run the following command:

React Native Image Crop Picker keys and strings

You need to add keys and strings with values that describe why you need access to the device library. You can check the full list of key-value pairs. Open Info.plist (ios > "nameofyourapp" > Info.plist) in the ios folder of your project and add the necessary keys and strings. You can check the key and string example below for selecting and taking a photo:

Open library and choose photo(s)

You can use openPicker method to open the user's library and choose one or more photos.

You can use the multiple property for allowing multiple photo selection. You can also limit the number of photo selections by using the maxFiles property. Please check the full react-native-image-crop-picker example.

Take a photo

You can use openCamera method to take a photo instead of choosing a photo. You can see how to use properties inside function components in the example below:

Please note that you may need to change the simulator's settings and give limited or full permission to access the user's library if you are using for the first time.

You can also use clean() method to clean all tmp files, you can read the example below.

Note that the openCamera method does not work in the iOS simulator, but you can run it on a real iOS device.

You can also use the react-native-image-picker library but it doesn't have cropping property.

You can store the selected photo in Firebase Storage. To learn how to upload an image using react-native-image-crop-picker with Firebase Storage, visit the Firebase course.

React Native Vector Icons

You can use react-native-vector-icons for your icon needs. It's a great library for React Native applications. If you already set up the library, you can see how to use react-native-vector icons in the example below. Otherwise, you need to set up the react-native-vector-icons library.

React Native Vector Icons Installation and Setup

How to set up react-native-vector-icons

React Native Vector Icons keys and strings

You need to open Info.plist (ios > "nameofyourapp" > Info.plist) and add the bundles you want to use.

You can see the list of all available fonts. After adding the react-native fonts you will use, run cd ios && pod install && cd .. command.

You need to import the react-native-vector-icons in your app and add the icon components.

React Native Vector Icons example

import AntDesign from 'react-native-vector-icons/AntDesign';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Icon from 'react-native-vector-icons/FontAwesome'

<Icon name="photo" size={30} color="purple" />
<Icon name="bars" size={30} color="grey" />
<Icon name="user" size={30} color="black" />
<MaterialCommunityIcons name="bowl" size={30} color="#3e2465" />
<AntDesign name="shoppingcart" size={30} color="black" />

You can use the react-native-vector-icons library with other React Native libraries. You can find an example of React Native Vector Icons with the React Native Paper library below.

If react-native-vector-icons are not showing up on the iOS simulator (it just displays a question mark), you should uninstall react-native-vector-icons and reinstall the library. You might have forgotten to add the necessary keys and strings as well.

React Native Paper Library

react-native-paper library is a Material Design library. You can benefit from its components for a better and faster design. You can find the react-native-paper setup for iOS below. You need to install the library with the following command:

React Native Paper and React Native Vector Icons example

View of the app

react-native-vector-icons/MaterialCommunityIcons and react-native-vector-icons/FontAwesome directories are used in the example above.

React Native Paper Icons, IconButton, Button

If you need icons for your React Native app but don't want to install and set up react-native-vector-icons, you can use React Native Paper icons. However, keep in mind that you can only use MaterialCommunityIcons. You can use the React Native Paper Icon component to create an icon. Let's see some examples of React Native Paper Icon:

<Icon source="heart" color="red" size={24} />
<Icon source="airplane" color="blue" size={24} />
<Icon source="barcode-scan" color="black" size={24} />
<Icon source="wifi" color="black" size={24} />
<Icon source="folder-search-outline" color="black" size={24} />
<Icon source="power" color="blue" size={24} />
<Icon source="bookmark-outline" color="bookmark-outline" size={24} />
<Icon source="calendar-search" color="green" size={24} />

Don't forget to import the Icon component. You can find the heart, airplane, barcode-scan, wifi, folder-search-outline, power, bookmark-outline, calendar-search icons of react-native-paper above.

If you need a button with an icon, you can use the IconButton component. You need to import IconButton and create an IconButton component.

<IconButton icon="camera" iconColor="black" size={20} onPress={() => console.log('Take a photo')} mode="outlined" />
<IconButton icon="alert" iconColor="red" size={20} onPress={() => console.log('Attention')} mode="contained" />
<IconButton icon="battery-charging" iconColor="grey" containerColor="lightgreen" size={20} onPress={() => console.log('Charging')} mode="contained-tonal" />
<IconButton icon="microphone" iconColor="white" containerColor="blue" size={20} onPress={() => console.log('Microphone enabled')} mode="contained-tonal" />
<IconButton icon="send" iconColor="white" containerColor="green" size={20} onPress={() => console.log('Send')} mode="contained-tonal" />
<IconButton icon="plus" iconColor="green" containerColor="lightgrey" size={20} onPress={() => console.log('Add')} mode="contained-tonal" />

You can find the camera, alert, battery-charging, microphone, send, plus IconButton components above. You can use mode prop to style your IconButton. There are three options: outlined, contained, and contained-tonal. You can see all three options above.

You can also use the Button component:

<Button icon="calendar-search" style={{margin: 5}} buttonColor='white' mode="contained-tonal" textColor='black' > Choose a date </Button>

Keep in mind that you can import the Button component only once. For example, if you import the Button component from React Native Paper, you can't import it from React Native (or React Native Elements). Otherwise, you will have an error. It isn't only for the Button component but for all the components with the same name.

If you want to use icons other than MaterialCommunityIcons you need to import them.

You can use React Native Paper with Expo as well.

React Native Elements

React Native Elements is a UI toolkit. It's a great tool for customizing react native apps. The usage of React Native Elements is similar to React Native Paper. You can find the React Native Elements setup for iOS below. You need to install the library with the following command:

Then run cd ios && pod install && cd ..

You can check the full list of react-native-elements components of React Native Elements.

Airbnb Rating, Search Bar, Avatar, Pricing Card, Social Icon examples

Let's see how to implement AirbnbRating, SearchBar, Avatar, PricingCard, SocialIcon components. You need to import the components from @rneui/themed:

import { AirbnbRating, SearchBar, Avatar, PricingCard, SocialIcon } from '@rneui/themed';

AirbnbRating

Users can rate on the AirbnbRating. There are 2 types of rating: TapRating and SwipeRating. The example below is for Tap Rating version.

<Text> Leave feedback </Text>
<AirbnbRating count={5} reviews={[ 'Very Bad', 'Bad', 'Fair', 'Good', 'Great']} defaultRating={4} size={20} />

Users can tap stars and leave feedback.

SearchBar

<SearchBar platform="ios" searchIcon={{name: "search", type: "materialIcons"}} placeholder="Type Here..." onClearText={() => console.log(onClearText())} cancelButtonTitle="Cancel" showCancel="False" onCancel={() => console.log(onCancel())} />

Avatar

<Avatar size={64} rounded icon={{ name: 'phone' }} containerStyle={{ backgroundColor: 'green' }} />
<Avatar size={64} rounded icon={{name: "plus"}} containerStyle={{ backgroundColor: '#00a7f7' }} />
<Avatar size={64} rounded icon={{name: "pencil"}} containerStyle={{ backgroundColor: 'grey' }} />
<Avatar size={64} rounded icon={{name: "trending-up"}} containerStyle={{ backgroundColor: 'grey' }} />
<Avatar size={64} rounded icon={{name: "folder-open"}} containerStyle={{ backgroundColor: 'brown' }} />

PricingCard

PricingCard displays features and prices in an elegant way.

<PricingCard title="Economy" price="$139*" info={['Round-trip', 'from USD 39*', 'from Seoul to Singapore']} button={{ title: 'SEARCH', icon: 'flight' }} />

How to display button icon to the right

iconRight prop displays Icon (the flight icon in the example above) to the right of the title. If you want to display the icon to the right, iconRight should be true.

<PricingCard title="Economy" price="$139*" info={['Round-trip', 'from USD 39*', 'from Seoul to Singapore']} button={{ title: 'SEARCH', icon: 'flight', iconRight: true }} />

Social Icons

A SocialIcon component can create icons for social media networks. You can see how to create a SocialIcon component in the examples below.

<SocialIcon type="instagram" />
<SocialIcon type="google" />
<SocialIcon type="twitter" />
<SocialIcon type="facebook" />
<SocialIcon type="whatsapp" />

You don't need to install react-native-vector-icons for the examples above. However, if you want to use React Native Vector Icons with React Native Elements, you need to install React Native Vector Icons.

You can use React Native Elements with Expo as well.

React Native Navigation

If you have a multiple-page app, users will need to navigate between screens. React Navigation offers different types of navigation. You need to install the following packages:

You only need to install the packages you want to use. For the example below, the material bottom tabs are used and you need to install the following packages:

Then go to ios folder and run "pod install" and import the components you'll use. Create the navigators you want to use:

You can add the components you want to display on the screens:

Wrap the whole app in NavigationContainer. Let's see an example of the Material Bottom Tabs Navigator:

Material Bottom Tabs Navigator

You can see in the example above how the Material Bottom Tabs look.

How to run a React Native app on a device

You can test your app on your iOS device by connecting it to your computer. Navigate to the ios folder and open the .xcworkspace file (you can right-click the folder and select "Reveal in Finder", then open the .xcworkspace file). If you don't have one yet, register for an Apple Developer account by following the instructions provided. Once Xcode is open, go to the Signing & Capabilities tab. Select a development team, and Xcode will handle the signing automatically.

Select the device you want to run the app:
Product > destination > iOS device > the device you want
You can run the app either from Xcode or from the terminal. Just make sure to plug your phone into your computer.

How to solve possible Xcode errors

• If you have run apps before, you might see the message: "Please delete apps signed with your free account from this device to remain under the limit." If you don't want to delete other apps, just remove them from the device (your phone) where you want to run the app.
• If you use third-party bundles, libraries, or packages, you may also be asked to sign them.

React Native with TypeScript

Installation and Setup

New projects created with React Native CLI use TypeScript by default. If you need to add TypeScript to an existing React Native project, refer to the official website. If you'd prefer to use JavaScript instead of TypeScript, simply the TypeScript files.

If you want to learn TypeScript from scratch, please visit TypeScript page.

React Native app with core components - TypeScript

You can refer to the React Native examples above written in JavaScript. Consider using TypeScript with your React Native app for better performance. Now let's take a look at the TypeScript version of the examples above.

You can refer to the React Native app example with core components (using JavaScript) above. Now, let's create the same React Native app with core components using TypeScript. Since you need to specify the types of variables, you'll need to update the useState and functions as follows:

The item variable is assigned the type string, and the items variable is assigned to type string array.

You'll also need to update the FlatList component:

You can leave the rest of the code unchanged.

react-native-vector-icons with TypeScript

For the react-native-vector-icons example, you can use the same code. However, you need to install a different react-native-vector-icons package for TypeScript:

React Native Navigation with TypeScript

You can use the same code for the React Native Navigation example, but make sure to install the TypeScript package for react-native-vector-icons as mentioned above and add necessary key-value pairs into Info.plist file.

react-native-image-crop-picker with TypeScript

react-native-image-crop-picker is slightly more complicated than the examples above. You can use the same libraries and add the same key-value pairs, but you'll also need to consider the methods from the react-native-image-picker library and include the appropriate type annotations. You need to update the useState hooks and FlatList component:

image variable represents the image chosen by the method openLibrary or openCamera, and it is assigned to type object. images variable represents the images chosen by the method openMultiple, and it is assigned to type object (array). However, the type for the pickerResult is any because FlatList requires different properties (like "path" and "index") of images to display image(s), and the properties have different types. If you assign them to an object or an object array, you will receive an error. react-native-image-crop-picker library displays cancel button text with the picked image(s). If the user gives up and wants to choose another image, the images chosen by the user and the cancel button should be removed. Therefore, you need to use the clean() method and reset the state.

Please note that openCamera method does not work in the iOS simulator.

How to add iOS App Icon to React Native

You can add an iOS app icon to your React Native app. You need Xcode to add the app icon. Even if you are not familiar with Xcode, you can still follow the steps below to add your app icon. Make sure your app icon is ready with the correct dimensions. The example below uses Xcode version 15.2. If you are using an older version of Xcode, the AppIcon may differ. Open your project folder in VSCode (or your preferred editor) and follow the steps below:

ios > appName.xcworkspace (right-click) > Reveal in finder > appName.xcworkspace (double-click)

If Xcode is ready, follow the steps below in the navigator (left side of Xcode):

appName > appName > Images.xcassets > AppIcon > Select the image size you want

You can select the image with the right dimensions you want to upload. You don't have to upload all the images, but it's recommended.

Navigate to the General tab and find the App Icons and Launch Screen section. From the App Icons Source, choose the AppIcon (if not selected).

If you run your app in iOS simulator, you can see your React Native app icon.

How to add Launch Screen for iOS React Native app

The Launch Screen is the screen users see while the app is launching. You need Xcode to create a Launch Screen. Even if you are not familiar with Xcode, you can still add a Launch Screen by following the steps below. The example uses Xcode version 15.2. If you are using an older version of Xcode, the configuration may vary. Open your project folder in VSCode (or your preferred editor) and follow the steps below:

ios > appName.xcworkspace (right-click) > Reveal in finder > appName.xcworkspace (double-click)

Once Xcode is open, follow the steps below in the navigator (left side of Xcode):

appName > appName > LaunchScreen

If you want to make a simple screen, you can use the Inspectors (right side). To view and edit attributes, select Inspectors (right side) > Attributes from Xcode's View menu. You can change different properties of the image, like the background color. If you want to add an image, follow the steps below:

View > Show Library > Image View

Now, you can find your image in the Inspectors within the Image folder under the Image View. If you want to upload a specific image from your computer:

1.Locate your image in the Navigator area.
2.If you added an Image View, select it.
3.From the Image folder under the Image View, choose your image and customize it.
Alternatively, you can also use the AppIcon.

You can resize and replace your image. You should select the image set in the outline view to make a change. If you want to make it your background image:

View > Content Mode > Scale To Fill

You can find various properties in the Image View to customize your LaunchScreen. For instance, you can use the Opaque and Alpha properties to adjust the transparency of the background.

You can also change the Label (text in the Launch Screen) in the Identity Inspector:

Once LaunchScreen is ready, navigate to the General tab and find the App Icons and Launch Screen section. From the Launch Screen File pop-up menu, choose the LaunchScreen.storyboard file.

If you run your app in an iOS simulator, you can see your LaunchScreen.