React Native allows developers to build mobile applications using familiar technologies such as JavaScript and React where a single codebase can be used for both iOS and Android platforms.
Expo builds on top of React Native and enhances the development experience by providing a set of tools, libraries, and services which simplifies project setup, development & deployment.
Before you begin, make sure you have the following installed on your system:
npm install -g expo-cli
Run expo init MyCoolProject
or by using npx with npx create-expo-app MyCoolProject
. I recommend the latter.
Open the project in your preferred code editor. The main entry point for your React Native app is usually App.js
or index.js
. Start by modifying the default code in this file to see changes in your app.
For example, you can replace the contents of App.js
with the following code:
Copy code
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Hello, Expo and React Native!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
As you make changes, the Expo development server will automatically reload your app, allowing you to see the results in real-time.
Congratulations! You've successfully installed Expo and created your first React Native project. From here, you can explore the extensive Expo documentation to learn more about its features and capabilities. Happy coding!