UI-библиотеки

npm install react-native-paper

import { PaperProvider, Button, Card, TextInput, Appbar } from 'react-native-paper';

export default function App() {
    return (
        <PaperProvider>
            <Appbar.Header>
                <Appbar.Content title="Заголовок" />
                <Appbar.Action icon="magnify" onPress={() => {}} />
            </Appbar.Header>

            <Card>
                <Card.Title title="Заголовок" subtitle="Подзаголовок" />
                <Card.Content>
                    <TextInput label="Email" mode="outlined" />
                </Card.Content>
                <Card.Actions>
                    <Button mode="contained" onPress={() => {}}>Отправить</Button>
                </Card.Actions>
            </Card>
        </PaperProvider>
    );
}

npm install @rneui/themed @rneui/base

import { Button, Card, Input, Avatar } from '@rneui/themed';

<Button title="Нажми" onPress={() => {}} />
<Input placeholder="Email" leftIcon={{ type: 'feather', name: 'mail' }} />
<Card>
    <Card.Title>Заголовок</Card.Title>
    <Card.Divider />
    <Card.Image source={{ uri: url }} />
</Card>
<Avatar rounded source={{ uri: url }} />

npm install tamagui @tamagui/config

import { Button, Text, View, TamaguiProvider } from 'tamagui';
import config from '@tamagui/config/v3';

<TamaguiProvider config={config}>
    <View padding="$4" backgroundColor="$background">
        <Text fontSize="$6" color="$color">Заголовок</Text>
        <Button theme="active">Нажми</Button>
    </View>
</TamaguiProvider>

npm install @gluestack-ui/themed @gluestack-ui/config

npm install native-base react-native-svg react-native-safe-area-context

import { Box, Button, Text, Input, VStack } from 'native-base';

<VStack space={4}>
    <Input placeholder="Email" />
    <Button>Отправить</Button>
</VStack>

npm install nativewind

<View className="flex-1 bg-white p-4">
    <Text className="text-xl font-bold text-gray-900">Заголовок</Text>
</View>