Expo ImageとAssetで画像を表示する

npx expo install expo-image

import { Image } from 'expo-image';
import { View, StyleSheet } from 'react-native';
export default function App() {
  return (
    <View style={styles.container}>
      <Image
        style={styles.image}
        source="https://picsum.photos/seed/picsum/3000/2000"
        contentFit="cover"
        transition={1000}
      />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  image: {
    width: '100%',
    height: 300,
    backgroundColor: '#ccc',
  },
});

npx expo install expo-asset

import { Asset } from 'expo-asset';
import { Image } from 'expo-image';
import { useEffect, useState } from 'react';
import { View, StyleSheet } from 'react-native';
export default function App() {
  const [localUri, setLocalUri] = useState<string | null>(null);
    useEffect(() => {
    async function loadImage() {
      const [asset] = await Asset.loadAsync(require('@/assets/example.png'));
      setLocalUri(asset.localUri);
    }
    loadImage();
  }, []);
    return (
    <View style={styles.container}>
      {localUri && (
        <Image
          style={styles.image}
          source={localUri}
          contentFit="contain"
          transition={500}
        />
      )}
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  image: {
    width: 300,
    height: 300,
  },
});

import { useAssets } from 'expo-asset';
import { Image } from 'react-native';
const [assets, error] = useAssets([
  require('./assets/image1.png'),
  require('./assets/image2.jpg'),
]);
return assets ? <Image source={assets[0]} /> : null;

import { Image } from 'expo-image';
import { View, StyleSheet } from 'react-native';
 
export default function App() {
  return (
    <View style={styles.container}>
      <Image
        style={styles.image}
        source="https://picsum.photos/seed/blurimage/3000/2000"
        contentFit="cover"
        transition={500}
        placeholder="blurhash"
        blurhash="L|LqFGRiWBaz~qWAV@ayt8axf6fR"
      />
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  image: {
    width: '100%',
    height: 300,
    backgroundColor: '#eee',
  },
});