0

I have the following image that I want to sit as a header in my React Native app:

enter image description here

I want all the text in my <ScrollView> to flow behind that header. I've been able to do this with the following code:

import React, { Component } from 'react';
import { Text, View, ScrollView, ImageBackground} from 'react-native';

export default class Login extends Component {
  render() {
    return (
      <View style={{
          flex: 1,
          justifyContent: "center",
          alignItems: "center"
        }}>
          <View
            style={{
              position: "absolute",
              width: "100%",
              top: 0
            }}
          >
            <ImageBackground
              source={require('../../images/swoord-top.png')}
              style={{
                flex: 1,
                resizeMode: "contain",
                justifyContent: 'center'
              }}
            >
              <View style={{
                backgroundColor: 'green',
                height: 500,
                width: 25
              }}></View>
            </ImageBackground>
          </View>
        <ScrollView style={{backgroundColor: 'pink', zIndex: -1}}>
        <Text style={{fontSize: 42}}>
          Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor
        </Text>
      </ScrollView>
      </View>
    );
  }
}

This looks like this:

enter image description here

The green bar on the lefthand side defines the height of the header. The problem is that the <BackgroundImage> stretches to fit the header container vertically, and spills out the sides, even though I've specified resizeMode: cover.

What I Want To Know:

How do I make the background image compress to fit in the screen horizontally?

gkeenley
  • 6,088
  • 8
  • 54
  • 129
  • 1
    Does this answer your question? https://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio – keikai Mar 31 '20 at 04:06

2 Answers2

2

<ImageBackground /> does not work as <Image /> so resizeMode contain will not work, you can either give fixed height and width to the parent view of <ImageBackgroud/> or you can use <Image /> with position absolute to achieve this.

ramashish tomar
  • 815
  • 11
  • 35
  • Hi Ramashish, thank you, that does answer my question. I posted one more here (https://stackoverflow.com/questions/60946102/react-native-why-is-image-stretching-vertically-to-fill-container-and-how-to-pr) if you have any insight on that I'd appreciate it. – gkeenley Mar 31 '20 at 08:20
  • @gkeenley sure I would love to help but , – ramashish tomar Apr 01 '20 at 03:54
1

In instead of giving resizemode inside style use it as:-

<ImageBackground resizeMode={"contain"} />

Image and ImagebackGround have different properties.

Bhavya Khurjawal
  • 336
  • 2
  • 8
  • Hi Bhavya, thank you, this helped me resolve it. I had to give the approval to ramashish because he got to it first, but I appreciate your help and upvoted. I posted one more here (https://stackoverflow.com/questions/60946102/react-native-why-is-image-stretching-vertically-to-fill-container-and-how-to-pr) if you have any insight on that I'd appreciate it. – gkeenley Mar 31 '20 at 08:22