1

I am first at React native and I am trying to put an image as a background. But I can't fit to the full-screen of my android devices. I tried with several android devices but not working for all. here is my code.

import * as React from "react";
import { ImageBackground, StyleSheet, Text, View, Image, TouchableOpacity } from "react-native";

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    image: {
        flex: 1,
        resizeMode: "cover",
    },
});

class MainMenuScreen extends React.Component {
  render() {
    return (
        <View style={styles.container}>
            <ImageBackground source={require('../assets/img/main_menu/background.png')} style={styles.image}>
            </ImageBackground>
        </View>
    );
  }
}

export default MainMenuScreen;

And I also checked all articles from stackoverflow also.

Full screen background image in React Native app,

What's the best way to add a full screen background image in React Native

Those are what I tried.

And I will share the images what i have now.

The screen of Android

The real image

Please help me. Thanks

Lee Ming
  • 55
  • 6

1 Answers1

0

Use this way

render(){
    return(
        <View style={{ flex: 1 }}>
           <Image style={{ width: screenWidth, height: screenHeight, position: 'absolute', top: 0, left: 0 }}/>
           ......
        </View>
    )
}
Nooruddin Lakhani
  • 7,507
  • 2
  • 19
  • 39