How to design screens to be compatible for all devices
I am trying to design this design react-native
. This is what I coded for this, but I don't want that. This only works on one screen, if I resize the screen then it doesn't work.
It looks like an absolute layout. What changes should I make to make it in such a way that it works on all screen sizes.
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from "react";
import {
AppRegistry,
Image,
View,
Text,
Button,
StyleSheet
} from "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 to stay in touch with the people that matter to 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
source to share
A quick answer is to use flex in your outer container, for example you 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 will split the container into quarters and give the top half of the screen to the image, and the other two to give the text and button; you can use padding and margins with them as you like and use any ratio you want.
However, keep in mind that there is a pixel density of the screen that can actually damage the screen size. It was convenient for me to have an external
import React from 'react';
import { PixelRatio } from '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);
}
which i use like
import { normalize, normalizeFont } from '../config/pixelRatio';
const {width, height} = require('Dimensions').get('window');
... and for an image, say:
<Image source={ require('../images/my_image.png') } style={ { width: normalize(height*.2), height: normalize(height*.2) } } />
and the font:
button_text: {
fontSize: normalizeFont(configs.LETTER_SIZE * .7),
color: '#ffffff'
},
Hope this helps!
Edit . The module above worked for me for the devices I deployed to, but needs to be extended to allow pixelRatio values from 1 to 4 with some decimal values (e.g. 1.5) there too. There's a nice timeline at this link that I'm working on to try and finish this, but so far works best as I've posted above.
source to share
Another great way to create a dynamic layout is to use Dimensions.I personally hate flex (couldn't figure it out at times) Using dimensions You can get the width and height of the screen. After that, you can split the result and assign them to the top level components.
import React, { Component } from "react";
import {
View,
StyleSheet,
Dimensions
} from "react-native";
const styles = StyleSheet.create({
container: {
backgroundColor: "#FFFFFF",
height: Dimensions.get('window').height,
width: Dimensions.get('window').width,
//height:Dimensions.get('window').height*0.5// 50% of the screen
margin: 50,
alignItems: "center",
flex: 1,
flexDirection: "column"
}
});
Also adding to this, this library that supports media queries, if you are comfortable with CSS styles just try
source to share