How to add Background Image in React Native using Nativebase.io Library

Question

How to add Background Image in React Native using Nativebase.io Library.

I have a screen where I want to add a background image and all other components of the screen are on the center of the background image.

Answer 1

Here You have my proposal, example. You can check it out, try it out here ( basic - complete the code as below).

import React from "react"
import { Image, Center, NativeBaseProvider } from "native-base"
export function Example() {
  return (
    <Image
      source={{
        uri: "https://wallpaperaccess.com/full/317501.jpg",
      }}
      alt="Alternate Text"
      size="100%"
      resizeMode="cover"
    />
  )
}

export default () => {
  return (
    <NativeBaseProvider>
      <Center flex={1} px="0">
        <Example />
      </Center>
    </NativeBaseProvider>
  )
}