smh-react-native-responsive-screen

smh-react-native-responsive-screen

Installation

1# Expo
2npx expo install smh-react-native-responsive-screen
3
4#React Native
5npm install --save smh-react-native-responsive-screen

Examples

1. How to use with StyleSheet.create()

1import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'smh-react-native-responsive-screen';
2
3class Login extends Component {
4  render() {
5    return (
6      <View style={styles.container}>
7        <View style={styles.textWrapper}>
8          <Text style={styles.myText}>Login</Text>
9        </View>
10      </View>
11    );
12  }
13}
14
15const styles = StyleSheet.create({
16  container: { flex: 1 },
17  textWrapper: {
18    height: hp('70%'), // 70% of height device screen
19    width: wp('80%')   // 80% of width device screen
20  },
21  myText: {
22    fontSize: hp('5%') // End result looks like the provided UI mockup
23  }
24});
25
26export default Login;

And we're done 🎉

Contributing

Contribution are always welcome, no matter how large or small !

We want this community to be friendly and respectful to each other.Please follow it in all your interactions with the project.

Please feel free to drop me a mail S MUNI HARISH

Acknowledgements

Thanks to the authors of these libraries for inspiration

Note

Inspired by react-native-responsive-screen

Sponsor & Support

To keep this library maintained and up-to-date please consider sponsoring it on GitHub. Or if you are looking for a private support or help in customizing the experience, then reach out to me on Linkedin @smuniharish.

License

MIT

---

Made with ❤️