Image | 3.0.x | NativeBase | Universal Components for React and React Native

Alternate Text
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"} />;
}

Alternate Text xs
Alternate Text sm
Alternate Text md
Alternate Text lg
Alternate Text xl
Alternate Text 2xl
Playground
function Example() {
  return <ScrollView>
      <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>
    </ScrollView>;
}
function Example() {
  return <ScrollView>
      <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>
    </ScrollView>;
}

Alternate Text
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 text
Playground
function Example() {
  return <Image size={150} alt="fallback text" borderRadius={100} source={{
    uri: "https://-page-icon.png" // uri: 'https://wallpaperaccess.com/full/317501.jpg',

  }} 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" // uri: 'https://wallpaperaccess.com/full/317501.jpg',

  }} fallbackSource={{
    uri: "https://www.w3schools.com/css/img_lights.jpg"
  }} />;
}

Alternate Text
Playground
//@ts-nocheck
function Example() {
  const myRef = React.useRef(null);
  React.useEffect(() => {
    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(() => {
    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" />;
}