How to do the layout of mobile applications in react native?

Question

css

How to do the layout of mobile applications in react native? Feel free to post a simple example with a header, footer and some information inside (for example, a button that stretches to the full width of the container). Is your layout made for different phone orientations? It's just that there are no percentages, and if, say, marginTop 50 looks good in vertical orientation, then in horizontal orientation there is too much space.

Answer 1

Use https://github.com/kkjdaniel/react-native-device-d...
to define orientation modes and tie a view on this (you can just change styles, or you can completely separate view).
Also, in the order of delirium, you can process styles before applying to make support for percentages of the width and height of the screen.
Type

const style = { 
  header: { height: '50%' }    
};

prepareStyle: function() {
  let deviceHeight = ...; // Find API by yourself
  let _style = _.merge({}, style);
  if (style.header.height.substr(-1, 1) === '%') 
    _style.header.height = deviceHeight * (+style.header.height.slice(0, -1)) / 100;

  return _style;
}