Image | NativeBase | Universal Components for React and React Native


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 <ScrollView px="20">
      <Center mt="3" h="80">
        <Heading mb="10">Image Sizes</Heading>
        <VStack space={2} alignItems="center" safeAreaTop my={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 <ScrollView px="20">
      <Center mt="3" h="80">
        <Heading mb="10">Image Sizes</Heading>
        <VStack space={2} alignItems="center" safeAreaTop my={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

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:

ITextProps

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}
  />

Quick Nav

With Next's require statement

MadeWithNativeBase