CODEWITHSUNDEEP
cssreact-nativeflexbox
Ry2254
Ry2254

Reputation: 1009

React Native: Background Image not filling the entire app

I am trying to get the background image to take up the entire space on the screen

enter image description here

As you can see from the image this does not seem to be working. I think it may be something to do with the scroll view but unfortunately I cannot figure it out.

Ideally want to use flex box for the solution.

const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <View style={styles.container}>
            <ImageBackground
              source={require('./src/assets/foodflixIMG.jpg')}
              style={styles.image}>
              <Text style={styles.text}>Inside</Text>
            </ImageBackground>
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: 'red',
    height: '100%',
  },
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  image: {
    flex: 1,
    resizeMode: 'cover',
    justifyContent: 'center',
  },
  text: {
    color: 'grey',
    fontSize: 30,
    fontWeight: 'bold',
  }
});

export default App;

Upvotes: 0

Views: 1998

Answers (1)

Goskula Jayachandra
Goskula Jayachandra

Reputation: 4201

Check your code something like this:

<ImageBackground 
            source={require('./assets/main.jpg')}
            style={{height:"100%", 
            width:"100%", flex:1}}
            > 
              <SafeAreaView>
              <ScrollView>
                <View style={styles.container}>
                 <Text>Hello</Text>
                </View>
              </ScrollView>
            </SafeAreaView>

           </ImageBackground>

enter image description here

Hope this helps!

Upvotes: 5

Related Questions