In the ground since Wed Oct 01 2025
Last watered in Wed Oct 01 2025
React Native
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda officiis adipisci veniam earum nihil cumque fugiat reiciendis nam maiores doloremque, voluptatum quisquam eveniet vel itaque libero amet sit. Nihil, aperiam.
Basic Components
Text
View
Component to group, position multiple elements
1 < View >
2 < Text > Hello </ Text >
3 < Image source = { { uri: 'https://via.placeholder.com/150' } } />
4 < Button title = "Click me" onPress = { () => alert ( 'Button pressed' ) } />
5 </ View >
Image
Button
We have two types of buttons:
Button
Simple component to detect a press
1 < Button title = "Click me" onPress = { () => alert ( 'Button pressed' ) } />
TouchableOpacity
Customizable component to detect a press, doesn't have to a be a button.
1 < TouchableOpacity onPress = { () => alert ( 'Button pressed' ) } />
Stylesheet
1 const styles = StyleSheet . create ({
2 fontSize: 20 ,
3 color: 'white' ,
4 ...
5 });
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda officiis adipisci veniam earum nihil cumque fugiat reiciendis nam maiores doloremque, voluptatum quisquam eveniet vel itaque libero amet sit. Nihil, aperiam.
Blockquote
Blockquote blockquote oluptatum quisquam eveniet vel itaque libero amet sit. Nihil, aperiam. oluptatum quisquam eveniet vel itaque libero amet sit. Nihil, aperiam.
Callout
Callout oluptatum quisquam eveniet vel itaque libero amet sit. Nihil, aperiam.
oluptatum quisquam eveniet vel itaque libero amet sit. Nihil, aperiam.
Navigation
Stack Navigator
1 import { createStackNavigator } from '@react-navigation/stack' ;
2
3 const Stack = createStackNavigator ({
4 Home: {
5 Component: HomeScreen ,
6 options: {
7 title: 'Home' ,
8 },
9 },
10 Details: {
11 Component: DetailsScreen ,
12 },
13 });
14
FlatList
TODO: Read more about FlatList and understand which optmizations are made and, why it's recommended to use it.
Syntax
1 import { FlatList , Text } from 'react-native' ;
2
3 const fruits = [{ id: '1' , name: 'apple' }, { id: '2' , name: 'banana' }, { id: '3' , name: 'cherry' }, { id: '4' , name: 'date' }, { id: '5' , name: 'elderberry' }];
4
5
6 const FruitsList = ({ data , renderItem }: { data : any [], renderItem : ( item : any ) => React . ReactNode }) => {
7 return < FlatList data = { data } renderItem = { ({ item }) => < Text > { item . name } </ Text > } /> ;
8 };
9
10 export default FruitsList ;
Key Prop
Key prop is a required prop for FlatList. It's used to identify the item in the list.
If we don't provide a key prop, React Native will drop all the items and re-render them, which is not efficient.
With a string for the key prop
1 const fruits = [{ id: '1' , name: 'apple' }, { id: '2' , name: 'banana' }, { id: '3' , name: 'cherry' }, { id: '4' , name: 'date' }, { id: '5' , name: 'elderberry' }];
2 < FruitsList data = { fruits } renderItem = { ({ item }) => < Text > { item . id } </ Text > } />
With keyExtractor where we provide the key for each item
1 const fruits = [{ name: 'apple' }, { name: 'banana' }, { name: 'cherry' }, { name: 'date' }, { name: 'elderberry' }];
2 < FruitsList data = { fruits } renderItem = { ({ item }) => < Text > { item . name } </ Text > } keyExtractor = { ( item ) => item . name } />
Styling
Axis
We can add margin for a axis:
1 const styles = StyleSheet . create ({
2 marginVertical: number
3 });
1 < FruitsList data = { fruits } renderItem = { ({ item }) => < Text > { item . name } </ Text > } style = { styles . container } />
We can define the direction of the items with a prop called horizontal or vertical
1 < FruitsList data = { fruits } renderItem = { ({ item }) => < Text > { item . name } </ Text > } horizontal />
1 < FruitsList data = { fruits } renderItem = { ({ item }) => < Text > { item . name } </ Text > } vertical />
Scroll Indicators
We can add scroll indicators with a prop called showsHorizontalScrollIndicator or showsVerticalScrollIndicator
1 < FruitsList data = { fruits } renderItem = { ({ item }) => < Text > { item . name } </ Text > } showsHorizontalScrollIndicator />
1 < FruitsList data = { fruits } renderItem = { ({ item }) => < Text > { item . name } </ Text > } showsVerticalScrollIndicator />
Item Layout
We can define the layout of the items with a prop called itemLayout