React Native Styling inside ImageBackground

Question

I am building an app that makes an invitation Card, I am making the card by using ImageBackground then style the content inside it, but I faced a problem with the different screen size and resolution, my codes are as below:

<ImageBackground
          resizeMode='contain'
          backgroundColor={this.state.bgColor}
          style={{
               height: height / 3 + 20,
               width: width,}}
               source={this.state.border}>

       <View style={{ flex: 1, marginRight: 10,
                      marginLeft: 45, marginTop: 10 }}>

             <Text style={{ fontSize: height / 37, 
                            color: this.state.fontColor, 
                            fontWeight: '700',
                            textAlign: 'center', 
                            fontFamily: this.fonttext }}>{this.type}</Text>

              <Text style={{ marginLeft: 40,
                            marginRight: 5, marginTop: 10, 
                            fontSize: height / 48, 
                            color: this.state.fontColor, 
                            textAlign: 'right', 
                            fontFamily: this.fonttext }}>{this.body}</Text>

             <Text style={{ fontSize: height / 49, 
                            marginTop: 10, 
                            color: this.state.fontColor, 
                            textAlign: 'right', 
                            fontFamily: this.fonttext }}>{this.location}</Text>


             <View style={{ alignItems: 'center', 
                            justifyContent: 'center', 
                            marginTop: (height / 3 + 10) / 11 }}>

                  <Text style={{ fontSize: height / 49, 
                                 fontWeight: 'bold', 
                                 color: this.state.fontColor, 
                                 textAlign: 'right', 
                                 fontFamily: this.fonttext }}>From</Text>

                  <Text style={{ fontSize: height / 49, 
                                 color: this.state.fontColor, 
                                 textAlign: 'right', 
                                 fontFamily: this.fonttext }}>{this.fromD}</Text>
                            </View>

             <Text style={{ fontSize: height / 55, 
                            color: this.state.fontColor, 
                            textAlign: 'right', 
                            fontFamily: this.fonttext }}>{'*' + this.notes}</Text>
           </View>



                    </ImageBackground>

it works fine on Iphone 6

But on Iphone x, 8 plus and on android devices the view changes and the background image have some margin from above as well as from left though i have used Dimensions so i can get the height and the width of the screen so i can set the view accordingly but didn't work so what is the best thing to do in this scenario so the view will be the same on all devices.

Answer 1

this library can solve that problem check it out React Native Size Mater

it has a very small size lib code that doesn't have any dependence just peer Dependancy.

it has 3 functions which are

scale(size: number) Will return the linear scaled result of the provided size, based on your device's screen width.

verticalScale(size: number) Will return the linear scaled result of the provided size, based on your device's screen height.

moderateScale(size: number, factor?: number)

Sometimes you don't want to scale everything in a linear manner, that's where moderate scale comes in. The cool thing about it is that you can control the resize factor (default is 0.5). If normal scale will increase your size by +2X, moderateScale will only increase it by +X, for example:

good luck

Answer 2

All you need to do is not to set the image height, just set its width to the screen width and it will adapt to the screen