react native

In the ground since Wed Oct 01 2025

Last watered inWed 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

1const styles = StyleSheet.create({
2  fontSize: 20,
3  color: 'white',
4  ...
5});

Blockquote

Blockquote blockquote oluptatum quisquam eveniet vel itaque libero amet sit. Nihil, aperiam. oluptatum quisquam eveniet vel itaque libero amet sit. Nihil, aperiam.

Callout

Navigation

Stack Navigator

1import { createStackNavigator } from '@react-navigation/stack';
2
3const Stack = createStackNavigator({
4  Home: {
5    Component: HomeScreen,
6    options: {
7      title: 'Home',
8    },
9  },
10  Details: {
11    Component: DetailsScreen,
12  },
13});
14

FlatList

Syntax

1import { FlatList, Text } from 'react-native';
2
3const fruits = [{ id: '1', name: 'apple' }, { id: '2', name: 'banana' }, { id: '3', name: 'cherry' }, { id: '4', name: 'date' }, { id: '5', name: 'elderberry' }];
4
5
6const FruitsList = ({ data, renderItem }: { data: any[], renderItem: (item: any) => React.ReactNode }) => {
7  return <FlatList data={data} renderItem={({ item }) => <Text>{item.name}</Text>} />;
8};
9
10export 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

1const 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

1const 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:

1const 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

1
2## Screen Navigation
3