How to set a background image in Gluestack?

Question

I am using Gluestack, a mobile gaming platform that lets me play Android games on my PC2. I want to set a background image to my web page using Gluestack, but I don’t know how to do it.

What am I doing wrong? How can I set a background image to my web page using Gluestack? Any help would be appreciated. Thank you.

I have checked that the image file is in the same folder as the HTML file, and that the file name and extension are correct. I have also tried different image formats, like PNG and GIF, but none of them work.

Answer 1

Published the ImageBackground component in gluestack today. You can refer the docs.

Answer 2

There is no component like ImageBackground provided by gluestack-ui. You can directly use ImageBackground from React-Native or You can use Image component inside a Box and create another component and give it position absolute. This worked for me.

import {Box, Text, VStack, Image, FocusableButton} from '@kepler-ui/themed';
import React from 'react';

export const TrendingMovie = (props: any) => {
  return (
    <Box height={900}>
      <Image size="full" source={props.imageUri} />
      <VStack space="lg" position="absolute" h="100%" justifyContent="flex-end">
        <Box w="60%" pb="$10">
          <Text fontSize="$2xl" lineHeight={'$3xl'} color="$white">
            {props.description}
          </Text>
        </Box>
        <Box pb="$10" my="$8">
          <FocusableButton title={'Watch for Free'} />
        </Box>
      </VStack>
    </Box>
  );
};