React Native is a popular JavaScript framework for building cross-platform mobile applications. It allows you to write your code once and deploy it to both iOS and Android devices. In this guide, we will walk you through the process of building a React Native app from scratch.
Prerequisites
Before we get started, make sure you have the following software installed:
- Node.js
- Yarn
- Expo CLI
You can download Node.js from nodejs.org and Yarn from yarnpkg.com. To install Expo CLI, open a terminal and run the following command:
npm install -g expo-cli
Step 1: Create a new project
To create a new React Native project, open a terminal and run the following command:
expo init my-app
This will create a new project named "my-app" in the current directory. Expo CLI will prompt you to select a template for your project. Choose the "blank" template to start with a clean slate.
Once the project is created, navigate to the project directory by running:
cd my-app
Step 2: Set up the development environment
Next, we need to set up our development environment. Open the project in your favorite code editor and create a new file named "App.js". This is the main entry point of our application.
In App.js, let's start by importing the necessary components from React and React Native:
import React from 'react';
import { View, Text } from 'react-native';
Then, we can define our functional component:
function App() {
return (
<View>
<Text>Hello, world!</Text>
</View>
);
}
This component returns a View component that contains a Text component with the text "Hello, world!". We will render this component in our app later on.
Step 3: Add navigation
Now, let's add navigation to our app. We will be using React Navigation, a popular library for adding navigation to React Native apps.
To install React Navigation, run the following command:
yarn add @react-navigation/native
Next, we need to install the dependencies for the specific navigation type we want to use. For this guide, we will use the stack navigator:
yarn add @react-navigation/stack
Once the dependencies are installed, we need to set up the navigation. In App.js, import the necessary components from React Navigation:
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
Then, create a StackNavigator:
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
This creates a StackNavigator with one screen named "Home" that will display the HomeScreen component. We will define the HomeScreen component later on.
Step 4: Add a home screen
Now, let's create the HomeScreen component. Create a new file named "HomeScreen.js" and add the following code:
import React from 'react';
import { View, Text } from 'react-native';
function HomeScreen() {
return (
<View>
<Text>Welcome to my app!</Text>
</View>
);
}
export default HomeScreen;
This creates a simple component that displays a welcome message.
Step 5: Style the app
Next, let's add some styles to our app. Create a new file named "styles.js" and add the following code:
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize: 24,
fontWeight: 'bold',
color: '#333',
},
});
export default styles;
This creates a stylesheet with two styles: one for the main container, and one for the text inside the container.
Now, let's apply these styles to our HomeScreen component. Modify "HomeScreen.js" as follows:
import React from 'react';
import { View, Text } from 'react-native';
import styles from './styles';
function HomeScreen() {
return (
<View style={styles.container}>
<Text style={styles.text}>Welcome to my app!</Text>
</View>
);
}
export default HomeScreen;
This applies the container and text styles to the appropriate components.
Step 6: Add more screens
Let's add some more screens to our app. Create two new files named "Screen1.js" and "Screen2.js", and add the following code to each file:
import React from 'react';
import { View, Text } from 'react-native';
import styles from './styles';
function Screen1() {
return (
<View style={styles.container}>
<Text style={styles.text}>This is Screen 1</Text>
</View>
);
}
export default Screen1;
import React from 'react';
import { View, Text } from 'react-native';
import styles from './styles';
function Screen2() {
return (
<View style={styles.container}>
<Text style={styles.text}>This is Screen 2</Text>
</View>
);
}
export default Screen2;
These create two new components with similar structures to the HomeScreen component.
Step 7: Set up navigation
Now, let's set up the navigation between screens. Modify "App.js" as follows:
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import Screen1 from './Screen1';
import Screen2 from './Screen2';
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Screen1" component={Screen1} />
<Stack.Screen name="Screen2" component={Screen2} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
This sets up a StackNavigator with three screens: "Home", "Screen1", and "Screen2". The HomeScreen component is set as the initial screen.
Now, let's add some buttons to navigate between screens. Modify "HomeScreen.js" as follows:
import React from 'react';
import { View, Text, Button } from 'react-native';
import styles from './styles';
function HomeScreen({ navigation }) {
return (
<View style={styles.container}>
<Text style={styles.text}>Welcome to my app!</Text>
<Button
title="Go to Screen 1"
onPress={() => navigation.navigate('Screen1')}
/>
<Button
title="Go to Screen 2"
onPress={() => navigation.navigate('Screen2')}
/>
</View>
);
}
export default HomeScreen;
This adds two buttons that navigate to the "Screen1" and "Screen2" screens when pressed.
Step 8: Add a tab bar
Next, let's add a tab bar to navigate between screens. Modify "App.js" as follows:
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './HomeScreen';
import Screen1 from './Screen1';
import Screen2 from './Screen2';
const Tab = createBottomTabNavigator();
function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Screen1" component={Screen1} />
<Tab.Screen name="Screen2" component={Screen2} />
</Tab.Navigator>
</NavigationContainer>
);
}
export default App;
This sets up a BottomTabNavigator with three screens: "Home", "Screen1", and "Screen2". The HomeScreen component is set as the initial screen.
Step 9: Add icons to the tab bar
Let's add some icons to the tab bar. First, install the react-native-vector-icons package:
arduinoCopy code
npm install react-native-vector-icons
Next, import the icons and add them to the Tab.Screen components. Modify "App.js" as follows:
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/MaterialIcons';
import HomeScreen from './HomeScreen';
import Screen1 from './Screen1';
import Screen2 from './Screen2';
const Tab = createBottomTabNavigator();
function App() {
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = focused ? 'home' : 'home';
} else if (route.name === 'Screen1') {
iconName = focused ? 'dashboard' : 'dashboard';
} else if (route.name === 'Screen2') {
iconName = focused ? 'settings' : 'settings';
}
return <Icon name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
}}
>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Screen1" component={Screen1} />
<Tab.Screen name="Screen2" component={Screen2} />
</Tab.Navigator>
</NavigationContainer>
);
}
export default App;
This adds icons to the tab bar using the react-native-vector-icons package. The icons used are "home", "dashboard", and "settings" for the "Home", "Screen1", and "Screen2" screens, respectively.
Step 10: Add navigation headers
Finally, let's add navigation headers to each screen. Modify "Screen1.js" and "Screen2.js" as follows:
import React from 'react';
import { View, Text } from 'react-native';
import styles from './styles';
function Screen1({ navigation }) {
return (
<View style={styles.container}>
<Text style={styles.text}>This is Screen 1</Text>
</View>
);
}
Screen1.navigationOptions = {
title: 'Screen 1',
};
export default Screen1;
import React from 'react';
import { View, Text } from 'react-native';
import styles from './styles';
function Screen2({ navigation }) {
return (
<View style={styles.container}>
<Text style={styles.text}>This is Screen 2</Text>
</View>
);
}
Screen2.navigationOptions = {
title: 'Screen 2',
};
export default Screen2;
This adds a header with the title of each screen.
Conclusion
Congratulations! You've just built a simple React Native app from scratch with multiple screens, a tab bar, and navigation headers. Of course, this is just the beginning - there's much more you can do with React Native! But hopefully this step-by-step guide has given you a good starting point for your own app-building journey. Happy coding!