By default, View COMPONENT in React native has the display set to flex. Flex is a CSS property which is used to expand and shrink a component dynamically based on available space. If you set flex:1 then the component will take up all the available space. If a parent element is given flex:1 then all its child elements will EVENLY distribute available space among themselves. We can change the width of the child element by GIVING a higher value of flex property. The LARGER the flex given, the higher the ratio of space a component will take compared to its siblings. 

A component can only expand to fill the available space if its parent has dimensions greater than 0. To make flex WORK, the parent element must have some width set to it then only flex property will evenly distribute available space. Otherwise, the element will consider width equal to zero and will not be visible on UI. Along with flex property, alignItems and justify-content CSS properties are also used to design mobile UI.