Install
The quickest way to set up a new react native project is with the Expo CLI.
1
npm install -g expo-cli
Setup
1
2
3
4
npx create-expo-app my-app
cd my-app
code . # open in vscode
expo start
If expo start does not work try expo start --tunnel.
App.js
The App.js file is the root component of the application. It is the first component that is rendered when the application starts.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
The second import line is used to import native components from the react native library.
The View component is like a div in html. It is used to wrap other components.
For styling the StyleSheet component is used. The atributes are the same as in CSS except they are written in camelCase
Components
Native Components
SafeAreaView
The SafeAreaView component is used to make sure the content is not hidden by the status bar or the notch on the iPhone. It is recommended to use this component as the root component of the application.
1
2
3
4
5
6
7
export default function App() {
return (
<SafeAreaView style={styles.container}>
<StatusBar style="auto" />
</SafeAreaView>
);
}
Text
The Text component is used to display text.
1
2
3
4
5
6
7
export default function App() {
return (
<SafeAreaView>
<Text>Hello World!</Text>
</SafeAreaView>
);
}
Event Handling
Touchable Components
The TouchableOpacity component is used to make other components touchable.
1
2
3
4
5
6
7
8
9
export default function App() {
return (
<SafeAreaView>
<TouchableOpacity onPress={() => console.log('Image tapped')}>
<Image source={require('./assets/icon.png')} />
</TouchableOpacity>
</SafeAreaView>
);
}
Buttons
The Button component is used to create a button.
1
2
3
4
5
6
7
export default function App() {
return (
<SafeAreaView>
<Button title='Click Me' onPress={() => console.log('Button tapped')} />
</SafeAreaView>
);
}
Hooks
useState
Changes the state of the component.
1
2
3
4
5
6
7
8
9
10
import React, { useState } from 'react';
export default function App() {
const [text, setText] = useState('Open up App.js to start working on your app!');
return (
<SafeAreaView>
<Text onPress={() => setText('Hello World!')}>{text}</Text>
</SafeAreaView>
);
}
useEffect
Runs code when the component is rendered if the [] are empty or when one of the given variables changes.
1
2
3
4
5
6
7
8
9
10
11
12
import React, { useEffect } from 'react';
export default function App() {
useEffect(() => {
console.log('Hello World');
}, []);
return (
<View>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}