css - Styling props not working, especially padding

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