Image | NativeBase

Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).

Image

Generic Image components from

React Native

Implements

Image

from

React Native

You can use all props of React native Image.

Examples

Basic


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

Sizes


Playground
function Example() {
  return <ScrollView px="20">
      <Center mt="3">
        <Heading mb="10">Image Sizes</Heading>
        <VStack space={2} alignItems="center" safeAreaTop my={6}>
          {["xs", "sm", "md", "lg", "xl", "2xl"].map(size => <Image 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">
        <Heading mb="10">Image Sizes</Heading>
        <VStack space={2} alignItems="center" safeAreaTop my={6}>
          {["xs", "sm", "md", "lg", "xl", "2xl"].map(size => <Image 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 <Image size={150} resizeMode={"contain"} borderRadius={100} source={{
    uri: "https://wallpaperaccess.com/full/317501.jpg"
  }} alt="Alternate Text" />;
}function Example() {
  return <Image size={150} resizeMode={"contain"} borderRadius={100} source={{
    uri: "https://wallpaperaccess.com/full/317501.jpg"
  }} alt="Alternate Text" />;
}

Fallback


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

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 <Image ref={myRef} source={{
    uri: "https://wallpaperaccess.com/full/317501.jpg"
  }} alt="Alternate Text" size="xl" />;
}//@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 <Image ref={myRef} source={{
    uri: "https://wallpaperaccess.com/full/317501.jpg"
  }} alt="Alternate Text" size="xl" />;
}

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

Image | NativeBase | Universal Components for React and React Native