Изображения и иконки

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

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

resizeMode="cover"     // заполняет, обрезая
resizeMode="contain"   // вписывает целиком
resizeMode="stretch"   // растягивает
resizeMode="repeat"    // повторяет
resizeMode="center"    // по центру без масштаба

<Image
    source={{ uri: url }}
    style={styles.image}
    defaultSource={require('./placeholder.png')}
    onLoad={() => setLoading(false)}
    onError={() => setError(true)}
/>

function Avatar({ uri }: { uri: string }) {
    const [loading, setLoading] = useState(true);

    return (
        <View style={styles.avatarWrap}>
            {loading && <ActivityIndicator />}
            <Image
                source={{ uri }}
                style={styles.avatar}
                onLoadEnd={() => setLoading(false)}
            />
        </View>
    );
}

// Статический require
<Image source={require('./icon.png')} />

// Динамически — нельзя через переменную
const icon = require('./icon.png');
<Image source={icon} />

npx expo install expo-image

import { Image } from 'expo-image';

<Image
    source={{ uri: url }}
    placeholder={{ blurhash: 'L6PZfSi_.AyE_3t7t7R**0o#DgR4' }}
    contentFit="cover"
    transition={200}
    style={{ width: 200, height: 200 }}
/>

import { Ionicons, MaterialIcons, Feather } from '@expo/vector-icons';

<Ionicons name="heart" size={24} color="red" />
<MaterialIcons name="home" size={24} color="#333" />
<Feather name="search" size={20} color="#666" />

npx expo install react-native-svg

import Svg, { Circle, Path } from 'react-native-svg';

<Svg width="100" height="100" viewBox="0 0 100 100">
    <Circle cx="50" cy="50" r="40" fill="red" />
</Svg>

npx expo install react-native-svg-transformer

import Logo from './logo.svg';

<Logo width={100} height={100} fill="red" />

<ImageBackground
    source={require('./bg.jpg')}
    style={styles.bg}
    imageStyle={styles.bgImage}
>
    <Text style={styles.text}>Поверх фона</Text>
</ImageBackground>