responsive react-native code example

Example 1: react native responsive dimensions

// Place this in your project and use its methods anywhere.
// Subscribe to my youtube channel "Codingbite" on youTube 
// https://v.ht/SUBCB

// Responsive_Dimensions.js
import { Dimensions } from "react-native";

const percentageCalculation = (max, val) => max * (val / 100);

const fontCalculation = (height, width, val) => {
  const widthDimension = height > width ? width : height;
  const aspectRatioBasedHeight = (16 / 9) * widthDimension;
  return percentageCalculation(Math.sqrt(Math.pow(aspectRatioBasedHeight, 2) + Math.pow(widthDimension, 2)), val);
};
export const responsiveFontSize = (f) => {
  const { height, width } = Dimensions.get("window");
  return fontCalculation(height, width, f);
};
export const responsiveHeight = (h) => {    
  const { height } = Dimensions.get("window");
  return height * (h / 100)
}
export const responsiveWidth = (w) => {
  const { width } = Dimensions.get("window");
  return width * (w / 100)
}

Example 2: 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;