CODEWITHSUNDEEP
javascriptcssreactjsreact-native
Xanxu ike
Xanxu ike

Reputation: 35

Design breaking while using flex with dimension in react native

Using import {dimension} from 'react-native' and flex:1 at the same time in css style and for some devices design got broken when there is input field present inside the js. CSS is so simple that's it should not be broken

MainContainer: {
    height : Dimensions.get('window').height,
    width : Dimensions.get('window').width,
    backgroundColor: '#fff',
    flex: 1
}

and moreover there is slight 1 px blank space for some android devices.

Upvotes: 0

Views: 212

Answers (1)

TripleM
TripleM

Reputation: 1252

Earlier when I have started coding with react-native I have faced the same issue while using the same css style. You should read the documentation first carefully to get idea about flex.

flex will define how your items are going to “fight” over the available space along your primary axis. Most of the time you will want your app container to be flex:1 to take all of the screen height. Space will be divided according to each element flex property. In the following example the red, yellow and the green views are all children in the container view that got flex:1. The red view got flex:1 , the yellow view got flex:2 and the green view got flex:3 . 1+2+3=6 which means that red view will get 1/6 of the space, the yellow 2/6 of the space and the red 3/6 of the space. I think you got it…

To get more clear idea about the above lines please refer to this medium.com's post

And basically we don't use dimension while developing app using react-native .

MainContainer: {
   height: '100%',
   width: '100%',
   backgroundColor: '#fff',
}

This will be enough to design the main container. Also If you are using Input field then I will suggest to use scrollView

I think My answer will help you.

Upvotes: 1

Related Questions