In this tutorial, you'll learn how to build a React Native app using Expo. If you'd prefer to build the same app without Expo, you can always visit the React Native page. To set up your React Native Expo environment and install the necessary packages, you just need to follow the steps below. If you need more information, you can always visit the offical Expo website.
Expo 2025
"Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React." Expo simplifies and accelerates React Native app development. A foundational knowledge of JavaScript and React is recommended before proceeding.
React Native vs Expo
Both Expo and React Native have advantages and disadvantages. The choice depends on your circumstances. Expo is easier to use than bare React Native, and it can be a better choice for beginners. For example, setting up the React Native environment and using Xcode can be difficult for beginners. On the other hand, React Native can give you more freedom and perform better. Please visit the React Native page for a more detailed comparison.
Installing React Native Expo
You need NodeJS and Watchman for Expo.
To create a new project, run the command below:
npx create-expo-app --template
You can also create it by writing your project's name instead of "--template":
npx create-expo-app FirstProject
The Expo CLI is the command line tool that is the primary interface between developers and other Expo tools. To see all available commands in Expo CLI, run the following command:
npx expo -h
React Native Expo environment setup
If you installed one of the latest versions of Expo, you can skip the following steps. However, if you are using an old version of Expo, you need to install the following dependencies.
To run the app on the web, install the following dependencies:
If you don't install react-dom, react-native-web, @expo/webpack-config, you can't run your Expo app on the web.
How to run an Expo app on mobile and web
To start a development server, run the command below:
npx expo start
You can install the Expo Go app and scan the code for running the app on your phone.
If you have iOS or Android simulator, you can test your app there.
You can also use Expo Snack online without any installation.
The default template of Expo is TypeScript. If you want to use JavaScript, just rename the files with js extension.
React Native Expo App with core components
You can visit the bare React Native page for an Expo App with basic components. As it's a simple React Native app with core components and Expo libraries are not used, you can use the same code for both Expo and React Native.
Style
There are two ways to style components in Expo. 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.
You need to import useState from React:
import React, {useState} from 'react'
In addition to strings and arays, you can also use useState for images. Although the initial state is empty in the previous example, you can also specify an initial state:
const [list, setList] = useState(["tea"])
You should finally write a function to change the state, Submit() and Delete() functions are used in the example above. Thanks to TextInput, users can write the item. FlatList displays the items stored in the list.
Expo Libraries
Expo SDK has great core libraries. You need to install the libraries and check if they require additional configuration. You should always check platform compatibility; a library can be compatible with iOS devices but can not be compatible with web applications. This tutorial shows how to install, set up, and use the Expo Image Picker library and Expo Vector Icons in a React Native project using Expo.
expo-image-picker library
The expo-image-picker library enables users to choose images or videos from their photo library. The expo-image-picker 16.0.4 is used in the tutorial and examples below. If you use a different version, settings and methods may be different. You need to install the expo-image-picker library first with the following command:
npx expo install expo-image-picker
expo-image-picker library Permissions
You need to add keys and strings with values that describe why you need access to the device library. Open app.json and add the necessary keys and strings. You can check the example below for selecting and taking a photo.
Expo image picker library permissions
You should also add permission settings for plugins.
Request Media Library Permissions
You need to request permission to access the user's library. The requestMediaLibraryPermissionsAsync() method asks the user to grant permissions for accessing the user's photo library. You can't use requestMediaLibraryPermissionsAsync() on the web.
Open library and choose photo(s)
After giving permission, users can open their library and choose photos or videos. The launchImageLibraryAsync() method displays the system for users to choose a photo or a video from the phone's library.
Request Camera Permissions
You need to request permission to access the user's camera. The requestCameraPermissionsAsync() asks the user to grant permissions for accessing the camera.
Take a photo
After giving permission, users can take a photo. The launchCameraAsync() method displays the system for users to take a photo.
You can use the code above for iOS and the Web apps.
You can use Firebase Storage to store photos selected with Expo Image Picker. For a complete example, check out the Firebase integration page on this site, which covers using expo-image-picker with Firebase Storage.
If you want to learn other expo-image-picker methods, you can visit the official Expo website.
You can learn how to use Expo Vector Icons in the following section.
Expo Vector Icons
You can use @expo/vector-icons for your Expo icon needs. @expo/vector-icons library offers very nice Expo icons and the library is easy to use. @expo/vector-icons is installed by default, you don't need to install it. It's similar to react-native-vector-icons.
How to use @expo/vector-icons
You need to import the icon family you want:
import { AntDesign, FontAwesome, Entypo } from '@expo/vector-icons';
A sample component to add an @expo/vector-icons icon:
You need to specify the family name and the icon name like in the examples above. You can change the size and the color of the icon. You can add extra styling with style prop like other Expo components. There are many nice Expo icons to use, you can find some of them below:
The Expo icons above are from @expo/vector-icons@13.0.0. Please check the @expo/vector-icons website for the full list of Expo icons.
If Expo vector icons are not working, you need to check your icon component. You can compare your component with the examples above. You should also check if you imported the icon family.
React Native Paper Library
react-native-paper library is a Material Design library. You can use its components to create a faster and more consistent design. You need to install the library with the following command:
npm install react-native-paper
You can check the full list of react-native-paper components. The older versions of Expo may require additional installation of third-party libraries. Let's see how to implement Surface, Card, and RadioButton components. You need to import the components from react-native-paper:
import { Surface, Card, Divider } from 'react-native-paper';
Expo - React Native Paper and React Native Vector Icons example
View of the app
The example above is similar to the example with bare React Native.
However, the setup process in bare React Native is more complex compared to Expo. Additionally, since vector icons are included by default in Expo, using React Native Vector Icons is much easier.
React Native Paper Icons, IconButton, Button
You can use the React Native Paper Icon component to create an icon. You need to import the Icon component first:
import { Icon } from 'react-native-paper';
Below, you'll find examples of how to use icons with React Native Paper in your app.
You can see how the icons look when displayed in the app.
Don't forget to import the Icon component. You can find the heart, airplane, barcode-scan, wifi, folder-search-outline, power, bookmark-outline, and calendar-search icons of react-native-paper above. React-Native-Paper examples with Icon component can improve your understanding.
If you need a button with an icon, you can use the IconButton component. You need to import IconButton and create an IconButton component.
You can find the examples of the camera, alert, battery-charging, microphone, send, and plus icon buttons using the IconButton component above. You can use the 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
import { Button } from 'react-native-paper';
Button component with calendar-search icon:
<Button icon="calendar-search" style={{margin: 5}} buttonColor='white' mode="contained-tonal" textColor='black' > Choose a date </Button>
Keep in mind that you should only import a component like Button from one library at a time. For example, if you import the Button component from React Native Paper, you shouldn't also import Button from React Native or React Native Elements. Doing so can cause conflicts and result in errors. This rule applies not just to Button, but to any components with the same name across different libraries.
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 need to install the library with the following command:
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
Ratings are used to receive feedback from users. There are 2 types of rating: TapRating and SwipeRating. The example below is for the Tap Rating version.
The Avator component can also be very useful for your app. Icon avatars are used in the examples below, but you can also use them to represent a user. Image avatars are also available.
The PricingCard elegantly displays features and prices.
<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
To display the icon on the right side of a button, set the iconRight prop to true. This moves the icon (like the flight icon in the example above) to the right of the button text.
<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.
You should keep in mind that not all React Native components are implemented for the web-platform out-of-box. You may need third-party libraries to use some of the components. Please see the official documentation of React Native Elements.
If your app consists of more than one page, your users will need to navigate between screens. React Navigation offers different types of navigation. If you already used the React Native Navigation library for bare React Native, you can easily use it with Expo. Only the commands for installation are different. There are different navigator packages. You only need to install the specific packages you plan to use.
Bottom Tabs Navigator is used for the example above. createBottomTabNavigator creates the tab you need for the bottom tabs. You need to wrap the Tab Screens with the Tab.Navigator.
@react-navigation/bottom-tabs is used in both examples below. You can see the home icon of MaterialCommunityIcons in the first example and the shopping icon of MaterialCommunityIcons in the second example.
