react-native-responsive-surender

An npm package for responsive your react native app

Install this Package

1npm i react-native-responsive-surender

It will automatically make Responsive fontSize, height, width according to device width

1import Size from 'react-native-responsive-surender';
2
3const App = ()= > {
4  return (
5    <View style={{fontSize: Size(16)}}>
6      <Text>Hello World!</Text>
7    </View>
8  );
9};

Get the Device Width and Height Using Below

1import {screenWidth, screenHeight} from 'react-native-responsive-surender';
2
3const App = ()= > {
4  return (
5    <View style={{height: screenHeight, width: screenWidth}}>
6      <Text>Hello World!</Text>
7    </View>
8  );
9};

Get the Multiple Sizes if any not getting fit

Using different size you need to use Size(lg, md, sm).

1import Size from 'react-native-responsive-surender';
2
3const App = ()= > {
4  return (
5    <View>
6      <Text style={{fontSiz: size(40,30,20)}}>Hello World!</Text>
7    </View>
8  );
9};

1
2 * 1. lg is for screen that is between 600 to 767.
3 * 2. md is for screen that is between 400 to 599.
4 * 3. sm is for screen that is smaller than 399.
5

#use percentages for for all screen Size

1import Size from 'react-native-responsive-surender';
2
3const App = ()= > {
4  return (
5    <View style={{height: Size("10%")}}>
6      <Text>Hello World!</Text>
7    </View>
8  );
9};
10

#use percentages for specific screen Size

1import Size from 'react-native-responsive-surender';
2
3const App = ()= > {
4  return (
5    <View style={{height: Size("10%", "15%", "20%")}}>
6      <Text>Hello World!</Text>
7    </View>
8  );
9};
10