width: '100%' vs Dimension.get('window').width in react native

Question

I'm new to react native and css styling as a whole so sorry if the question is very basic. I want a view to take 100% of the available screen width and when i use the code below my view seems to go outside the screen boundry, though when I use Dimension.get('window').width it work just fine. can someone explain how they differ from each other. any help would be really appreciated. thanks

    return(
        <TouchableOpacity style = {styles.food_wrapper}
            onPress = {()=> this.userAction()}
        >
            <Text style = {styles.foodname}>
                {this.name}
            </Text>

            <Text style = {styles.foodprice}>
                Rs: {this.price}
            </Text>
        </TouchableOpacity>
    );


food_wrapper:{
    flex: 1,
    flexDirection :'row',
    justifyContent:'space-between',
    alignItems:'flex-start',
    width: '100%',//Dimensions.get('window').width,
    minHeight: 50,
    marginVertical: '1%',
    padding: '2%',
    backgroundColor: 'rgb(155,200,200)'
},

Answer 1

You need to understand what is the basic difference from 100% and the width you get using dimension.get('window')

100% means you want to get the container 100% width which mean if your parent container is 50px then 100% will return 50px.

the width from dimension give you a static width of your device width

so be careful to choose what to use to your component

if you want to follow the parent container then it is easier to use 100% then width from dimension but for responsive reasons without any parent container or it is the parent itself then width from dimension will work better