Компоненты: View, Text, Image

<View style={styles.box}>
    {/* дочерние элементы */}
</View>

<View
    style={styles.box}
    onLayout={(e) => console.log(e.nativeEvent.layout)}
    pointerEvents="none"
/>

<Text>Простой текст</Text>

<Text
    numberOfLines={2}
    ellipsizeMode="tail"
    style={styles.title}
>
    Очень длинный текст, который обрежется до двух строк и закончится многоточием
</Text>

<Text style={styles.base}>
    Обычный, <Text style={styles.bold}>жирный</Text>, снова обычный.
</Text>

import { Image } from 'react-native';

<Image
    source={require('./assets/logo.png')}
    style={{ width: 100, height: 100 }}
/>

<Image
    source={{ uri: 'https://example.com/image.jpg' }}
    style={{ width: 200, height: 200 }}
/>

<Image
    source={{ uri: url }}
    style={styles.image}
    resizeMode="cover"  // 'cover', 'contain', 'stretch', 'repeat', 'center'
    onLoad={() => console.log('загружено')}
    onError={(e) => console.log('ошибка', e.nativeEvent.error)}
/>

import { View, Text, Image, StyleSheet } from 'react-native';

export default function UserCard({ user }: { user: User }) {
    return (
        <View style={styles.card}>
            <Image source={{ uri: user.avatar }} style={styles.avatar} />
            <View style={styles.info}>
                <Text style={styles.name}>{user.name}</Text>
                <Text style={styles.email} numberOfLines={1}>
                    {user.email}
                </Text>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    card: {
        flexDirection: 'row',
        padding: 16,
        backgroundColor: '#fff',
        borderRadius: 12,
        marginBottom: 12,
    },
    avatar: {
        width: 48,
        height: 48,
        borderRadius: 24,
    },
    info: {
        marginLeft: 12,
        flex: 1,
    },
    name: {
        fontSize: 16,
        fontWeight: '600',
    },
    email: {
        fontSize: 14,
        color: '#666',
        marginTop: 2,
    },
});