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!