Styling props not working, especially padding - css

Question

I am still new to react-native and I have some troubles regarding the styling props of react-native.
I created a screen in my app and all my relevant code is this:
import React, {useState, useEffect} from 'react';
import {View, Text, StyleSheet, ActivityIndicator, Alert, ImageBackground} from 'react-native';
import { TextInput } from 'react-native-gesture-handler';
import {useDispatch, useSelector} from 'react-redux';
const NewLetterScreen = props =>{
return(
<View style={{flex:1}}>
<ImageBackground source={require('../components/pictures/welcome.png')} style={{width:"100%", height:"100%", alignItems: 'center', justifyContent: 'center'}}>
<ImageBackground source={require('../components/pictures/letters/paper1.jpg')} style={styles.paper}>
</ImageBackground>
</ImageBackground>
</View>
)
};
const styles = StyleSheet.create({
paper:{
width: "90%",
height: "90%"
}
});
export default NewLetterScreen;
The problem I face now is, that the "paper" I want to display is not centered, even tho I stricly declare this in the wrapping ImageBackground with justifyContent and alignItems. It is displaced to far up and to far on the left side and looks like this:
Also, if I try to use padding to get this stuff centered somehow, it doesnt work. I want to do padding from left and right, so horizontaly, but if I apply "paddingHorizontal: 50" to my styles.paper, the result is the following:
As you see, the "paddingHorizontal:50" works like a paddingLeft and that is definitely not what I intend.
I would be happy about any help regarding my styling props. Thanks in advance!

Answer 1

Why not add a margin of 10%? I always have problems with paddings. Try to avoid them.
Edit: Maybe it would help to just add a margin, instead of changing the width to 90%?
import React from "react";
import { ImageBackground, StyleSheet, Text, View } from "react-native";
const image = { uri: "https://reactjs.org/logo-og.png" };
const App = () => (
<View style={styles.container}>
<ImageBackground source={image} style={styles.image}>
<Text style={styles.text}>Inside</Text>
</ImageBackground>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
justifyContent: "center"
},
image: {
flex: 1,
resizeMode: "cover",
justifyContent: "center",
margin: "10%"
},
text: {
color: "white",
fontSize: 42,
fontWeight: "bold",
textAlign: "center",
backgroundColor: "#000000a0"
}
});
export default App;
You can copy&paste this example on https://reactnative.dev/docs/imagebackground

Answer 2

You just need to add a wrapper for the inside image. You don't need margins or paddings.
const image1 = { uri: "https://images.unsplash.com/photo-1597768130867-4c06bf86a2f3?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" };
const image2 = { uri: "https://images.unsplash.com/photo-1611085857146-7b13f8b0a74f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=641&q=80" };
const App = () => (
<View style={{ flex: 1 }}>
<ImageBackground source={image1} style={styles.background}>
<View style={styles.wrapper}>
<ImageBackground source={image2}
resizeMode="cover"
style={styles.paper}>
</ImageBackground>
</View>
</ImageBackground>
</View>
);
const styles = StyleSheet.create({
background: {
width: "100%",
height: "100%",
alignItems: 'center',
justifyContent: 'center'
},
wrapper: {
width: "90%",
height: "90%",
alignItems: 'center',
justifyContent: 'center',
},
paper: {
width: "100%",
height: "100%"
}
});