react-native-responsive-mockup-screen

react-native-responsive-mockup-screen is a small library that provide 2 simple method so that react native developer can code their UI elements fully responsive as per their mockup design.No media query needed.

Installation

1npm install react-native-responsive-mockup-screen

2
3or

4
5yarn add react-native-responsive-mockup-screen

6

Usage

1import {
2  widthPixelToDp,
3  heightPixelToDp,
4} from 'react-native-responsive-mockup-screen';
5
6// ...
7let wireFrameWidth = 1024;  // Figma screen width with which UI is designed.
8let wireFrameHeight = 1366; // Figma screen height with which UI is designed.
9const result1 =  widthPixelToDp(67, wireFrameWidth);
10const result2 =  heightPixelToDp(100, wireFrameHeight);

Example

1import {
2  widthPixelToDp,
3  heightPixelToDp,
4} from 'react-native-responsive-mockup-screen';
5
6const figmaScreenWidth=1024;
7const figmaScreenHeight=1366;
8class Login extends Component {
9  render() {
10    return (
11      <View style={styles.container}>
12        <View style={styles.textWrapper}>
13          <Text style={styles.myText}>Login</Text>
14        </View>
15      </View>
16    );
17  }
18}
19
20const styles = StyleSheet.create({
21  container: { flex: 1 },
22  textWrapper: {
23    height:  heightPixelToDp(67,figmaScreenHeight), 
24    width: widthPixelToDp(200,figmaScreenWidth)   
25  },
26  myText: {
27    fontSize: heightPixelToDp(24,figmaScreenHeight)
28  }
29});
30
31export default Login;

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library