react native adaptive layout code example
Example: react-native-responsive-screen
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'; class Login extends Component { render() { return ( <View style={styles.container}> <View style={styles.textWrapper}> <Text style={styles.myText}>Login</Text> </View> </View> ); }} const styles = StyleSheet.create({ container: { flex: 1 }, textWrapper: { height: hp('70%'), // 70% of height device screen width: wp('80%') // 80% of width device screen }, myText: { fontSize: hp('5%') // End result looks like the provided UI mockup }}); export default Login;