android - How to design screens in react native compatible for all devices -

i trying design design react-native. have coded not want. works on 1 screen only, if change screen size things not working.

this looks absolute layout. changes should make make in such way work on screen sizes.

/**  * sample react native app  * https://github.com/facebook/react-native  * @flow  */  import react, { component } "react"; import {   appregistry,   image,   view,   text,   button,   stylesheet } "react-native";  class splashscreen extends component {   render() {     console.disableyellowbox = true;     return (       <view style={styles.container}>         <image           source={require("./img/talk_people.png")}           style={{ width: 300, height: 300 }}         />         <text style={{ fontsize: 22, textalign: "center", margintop: 30 }}>           never forget stay in touch people matter you.         </text>         <view style={{ margintop: 60, width: 240 }}>           <button title="continue" color="#fe434c" />         </view>       </view>     );   } }  const styles = stylesheet.create({   container: {     backgroundcolor: "#ffffff",     margin: 50,     alignitems: "center",     flex: 1,     flexdirection: "column"   } });  appregistry.registercomponent("scheduled", () => splashscreen); 

expected state:

current state:

nexus 4 - 768x1280

nexus 6p - 1440x2560

the quick answer use flex within outer container, such have, say:

<view style={{flex: 1}}>     <view style={{flex: 2}}>        <.../>//image     </view>     <view style={{flex: 1}}>        <.../>//text     </view>     <view style={{flex: 1}}>        <.../>//button     </view> </view> 

which divide container quarters , give top half of screen image , other 2 quarters text , button; can use padding , margins these like, , use ratio want.

what further needs considered, though, screen pixel density, can wreak havoc display sizes. i've found handy have outside

import react 'react'; import { pixelratio } 'react-native'; let pixelratio = pixelratio.get();  export const normalize = (size) => {   switch (true){     case (pixelratio < 1.4):         return size * 0.8;         break;     case (pixelratio < 2.4):         return size * 1.15;         break;     case (pixelratio < 3.4):         return size * 1.35;         break;     default:         return size * 1.5;   } }  export const normalizefont = (size) => {   if (pixelratio < 1.4){     return math.sqrt((height*height)+(width*width))*(size/175);   }   return math.sqrt((height*height)+(width*width))*(size/100); } 

module use as

import { normalize, normalizefont } '../config/pixelratio'; const {width, height} = require('dimensions').get('window'); 

...and image, say:

<image source={ require('../images/my_image.png') } style={ { width: normalize(height*.2), height: normalize(height*.2) } } /> 

and font:

button_text: {     fontsize: normalizefont(configs.letter_size * .7),     color: '#ffffff' }, 

hope helps!

edit: module above has worked me devices i've deployed to, should expanded allow pixelratio values of 1 4 decimal (e.g. 1.5) values in there, too. there's good chart @ link i'm working try finish out, far has worked best i've posted above.