Image | NativeBase


Show Code
Playground
function Example() {
  return <Image shadow={2} source={{
    uri: 'https://wallpaperaccess.com/full/317501.jpg'
  }} alt="Alternate Text" size="xl" />;
}function Example() {
  return <Image shadow={2} source={{
    uri: 'https://wallpaperaccess.com/full/317501.jpg'
  }} alt="Alternate Text" size="xl" />;
}

Implements

Image

from

React Native

You can use all props of React native Image.

Examples

Basic


Playground
function Example() {
  return <Center>
      <Image source={{
      uri: "https://wallpaperaccess.com/full/317501.jpg"
    }} alt="Alternate Text" size="xl" />
    </Center>;
}function Example() {
  return <Center>
      <Image source={{
      uri: "https://wallpaperaccess.com/full/317501.jpg"
    }} alt="Alternate Text" size="xl" />
    </Center>;
}

Sizes


Playground
function Example() {
  return <>
      <Heading mb="10" textAlign="center" mt="3">
        Image Sizes
      </Heading>
      <ScrollView px="20">
        {
        /* <Center mt="3" h="80"> */
      }

        <VStack space={2} justifyContent="center" alignItems="center" safeAreaTop // my={6}
      mb={6}>
          {["xs", "sm", "md", "lg", "xl", "2xl"].map(size => <Image key={size} size={size} resizeMode="cover" source={{
          uri: "https://wallpaperaccess.com/full/317501.jpg"
        }} alt={"Alternate Text " + size} />)}
        </VStack>
        {
        /* </Center> */
      }
      </ScrollView>
    </>;
}function Example() {
  return <>
      <Heading mb="10" textAlign="center" mt="3">
        Image Sizes
      </Heading>
      <ScrollView px="20">
        {
        /* <Center mt="3" h="80"> */
      }

        <VStack space={2} justifyContent="center" alignItems="center" safeAreaTop // my={6}
      mb={6}>
          {["xs", "sm", "md", "lg", "xl", "2xl"].map(size => <Image key={size} size={size} resizeMode="cover" source={{
          uri: "https://wallpaperaccess.com/full/317501.jpg"
        }} alt={"Alternate Text " + size} />)}
        </VStack>
        {
        /* </Center> */
      }
      </ScrollView>
    </>;
}

Border Radius


Playground
function Example() {
  return <Center>
      <Image size={150} resizeMode={"contain"} borderRadius={100} source={{
      uri: "https://wallpaperaccess.com/full/317501.jpg"
    }} alt="Alternate Text" />
    </Center>;
}function Example() {
  return <Center>
      <Image size={150} resizeMode={"contain"} borderRadius={100} source={{
      uri: "https://wallpaperaccess.com/full/317501.jpg"
    }} alt="Alternate Text" />
    </Center>;
}

Fallback


Playground
function Example() {
  return <Center>
      <Image size={150} alt="fallback text" borderRadius={100} source={{
      uri: "https://-page-icon.png"
    }} fallbackSource={{
      uri: "https://www.w3schools.com/css/img_lights.jpg"
    }} />
    </Center>;
}function Example() {
  return <Center>
      <Image size={150} alt="fallback text" borderRadius={100} source={{
      uri: "https://-page-icon.png"
    }} fallbackSource={{
      uri: "https://www.w3schools.com/css/img_lights.jpg"
    }} />
    </Center>;
}

Basic (With Ref)


Playground
//@ts-nocheck
function Example() {
  const myRef = React.useRef(null);
  React.useEffect(() => {
    if (myRef.current && myRef.current.setNativeProps) myRef.current.setNativeProps({
      borderWidth: 10,
      opacity: 0.5
    });
  }, [myRef]);
  return <Center>
      <Image ref={myRef} source={{
      uri: "https://wallpaperaccess.com/full/317501.jpg"
    }} alt="Alternate Text" size="xl" />
    </Center>;
}//@ts-nocheck
function Example() {
  const myRef = React.useRef(null);
  React.useEffect(() => {
    if (myRef.current && myRef.current.setNativeProps) myRef.current.setNativeProps({
      borderWidth: 10,
      opacity: 0.5
    });
  }, [myRef]);
  return <Center>
      <Image ref={myRef} source={{
      uri: "https://wallpaperaccess.com/full/317501.jpg"
    }} alt="Alternate Text" size="xl" />
    </Center>;
}

Props

Image implements

PlatformProps

Image from React Native

Note

With Next's require statement

When using require statement from next for image keep this in mind.

Copy
const img = require('/public/me.jpg');

  // DO ✔
  <Image
    source={{ uri: img.default.src }}
    width={500}
    height={500}
  />
  // DON'T ✘
  <Image
    source={img}
    width={500}
    height={500}
  />

Icon

PresenceTransition

Quick Nav