Getting Started with React Native and Expo
In this guide, we'll walk you through setting up your development environment and creating your first React Native app using Expo.
React Native has revolutionized cross-platform mobile development allowing developers to build applications for both IOS and Android using Javascript and Expo. Expo has really made it easier for new people to get into React Native, coming from a Javascript or React background you are able to jump into React Native and in this article that is what we will be looking at
What is React Native?
React Native is an open-source mobile application development framework created by Facebook. It allows you to build mobile apps for both iOS and Android using a single codebase.
What is Expo?
Expo is a framework that makes developing Android and iOS apps easier. It is built around React Native enabling you to build faster and deploy quickly desktop, mobile and web applications using Javascript or Typescript
Try Kodaschool for free
Click below to sign up and get access to free web, android and iOs challenges.
Setting Up Your Development Environment
First install Node Js into your machine. Different computers have different configurations of installing node
Install Java JDK it is recommended to install Java JDK 17 for Android runtime
After installing those two you also need to install Android Studi where you will configure the emulator you will use. In this article we will use Expo GO which you only need to install on your device and scan a QR code to see your app
After installing you are ready to build your application. We will head on to our terminal and use the following command
npx create-expo-app@latest
Then we go to the folder
d RN_Learning
Then run our first application
npx expo start
For more in-depth installation check the React Native Documentation
Run on your device or simulator
On your device scan the QR code and follow the steps shown in the screenshot below
Understanding the Project Structure
index.tsx
: This is the main component of your app.app.json
: Contains configuration for your Expo project.package.json
: Lists your project dependencies and scripts.
Your First React Native Component
Open index.tsx and replace its content with the following:
import { Image, Platform, StyleSheet } from 'react-native';
import { HelloWave } from '@/components/HelloWave';
import ParallaxScrollView from '@/components/ParallaxScrollView';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
export default function HomeScreen() {
return (
<ParallaxScrollView
headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
headerImage={
<Image
source={require('@/assets/images/partial-react-logo.png')}
style={styles.reactLogo}
/>
}>
<ThemedView style={styles.titleContainer}>
<ThemedText type="title">Welcome! From Kodaschool</ThemedText>
<HelloWave />
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 1: Try it</ThemedText>
<ThemedText>
Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
Press{' '}
<ThemedText type="defaultSemiBold">
{Platform.select({ ios: 'cmd + d', android: 'cmd + m' })}
</ThemedText>{' '}
to open developer tools.
</ThemedText>
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 2: Explore</ThemedText>
<ThemedText>
Tap the Explore tab to learn more about what's included in this starter app.
</ThemedText>
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
<ThemedText>
When you're ready, run{' '}
<ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
<ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
<ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
<ThemedText type="defaultSemiBold">app-example</ThemedText>.
</ThemedText>
</ThemedView>
</ParallaxScrollView>
);
}
const styles = StyleSheet.create({
titleContainer: {
flexDirection: 'row',
alignItems: 'center',
gap: 8,
},
stepContainer: {
gap: 8,
marginBottom: 8,
},
reactLogo: {
height: 178,
width: 290,
bottom: 0,
left: 0,
position: 'absolute',
},
});
This code creates a simple screen with a title and a few components
Key Concepts
- Components: In React Native, you build your UI using components. The
View
component is like adiv
in web development andText
is used for displaying text. - StyleSheet: React Native uses JavaScript objects for styling. The
StyleSheet.create
method is used to create an optimized style object. - Flex Layout: React Native uses Flexbox for layout. The
flex: 1
in the container style makes it take up all available space.
Adding Interactivity
Let's add a button to our app:
<ThemedView style={styles.titleContainer}>
<ThemedText type="title">Welcome! From Kodaschool</ThemedText>
<HelloWave />
<Button
title="Learn More"
color="#841584"
/>
</ThemedView>
Whoop. You just added your first button and you are already set to become a React Native developer.
If you have noticed there are two properties that we have added to our button components
- Title: The text going inside the button
- color: The colour of the button
We are going to discuss even more topics and you are free to head over to the react native documentation and start learning
https://reactnative.dev/docs/button