Search code examples
react-nativecomponentswidth

React Native default width

This might be a stupid question but I don't understand how components width works.

When I do : 

    render() {
        return (
          <View style={{ height: 100, backgroundColor: 'yellow' }}></View>
        )
    }

My yellow view is visible, takes 100 "height" and full width. Why ? I never set a width, why width is not equal to 0 ?

Solution
    1. The height of your view is 100 because you set as such
    2. The width of your view is not zero because you didn't set it to 0, and zero is NOT the default width value
      • the default value of width is 'auto' because you didn't set it to anything else ('auto' basically 100% of the 'remaining' space of the parent unless other styles make it behave otherwise ie: flex).

    The Solution!

    • Just set your width to what you want it to be, either explicitly or with flex