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>
        {
        /* <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>
        {
        /* <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} borderRadius={100} source={{
      uri: "https://wallpaperaccess.com/full/317501.jpg"
    }} alt="Alternate Text" />
    </Center>;
}function Example() {
  return <Center>
      <Image size={150} 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) {
      const styleObj = {
        borderWidth: 4,
        borderRadius: 4,
        borderColor: "#22D3EE"
      };
      myRef.current.setNativeProps({
        style: styleObj
      });
    }
  }, [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) {
      const styleObj = {
        borderWidth: 4,
        borderRadius: 4,
        borderColor: "#22D3EE"
      };
      myRef.current.setNativeProps({
        style: styleObj
      });
    }
  }, [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

source

specify a source for image.

Type:

ImageSourcePropType

alt

The alt text that describes the image. This will be added as accessibilityLabel in android/iOS and alt on web

Type: string

fallbackSource

In event there was an error loading the src, specify a fallback source.

Type:

ImageSourcePropType

ignoreFallback

Opt out of the fallbackSource logic and show alternative text

Type: boolean

_alt

Text styling for alt.

Type: Partial<InterfaceTextProps>

fallbackElement

In event there was an error loading the src, specify a fallback JSX Element.

Type: Element | Element[]

src

specify a source for image.

Type: string

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