UNPKG

react-native-responsive-screen

Version:

Make React Native views responsive for all devices with the use of 2 simple methods.

32 lines (27 loc) 771 B
This is an example repository that contains a sample setup of `react-native-responsive-screen` package. # Usage ```javascript 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; ```