I am currently using:
react-native-responsive-screen package: "^1.4.2",
"react-native": "^0.64.0",
and I have the following issue:
A user has reported that the UI layout is not fitting the screen properly. They have provided a screenshot for reference. (Attached)
https://i.sstatic.net/7ykyN.jpg
size: 1080x2009
dpi: 420
I am utilizing the react-native-responsive-screen package to ensure responsiveness in my layout.
It appears to be working fine on various platforms, including an android emulator with similar screen specifications to the user's device. Same dpi, width & height.
https://i.sstatic.net/wztkp.png
Below is the code from my stylesheet Account.js:
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'; container: {
flexDirection: "row",
flex: 1,
flexWrap: 'wrap',
alignItems: "center",
backgroundColor: "black"
},
menuContainer: {
flex: 1
},
onboardingWhole: {
justifyContent: 'center',
alignSelf: 'center',
marginTop: hp('20%'),
flex: 1,
alignItems: 'center',
padding: 10,
borderRadius: 5,
zIndex: 3,
elevation: 3,
position: 'absolute'
},
onboardingText: {
fontSize: hp('2%'),
marginTop: hp('1.5%'),
marginLeft: wp('5%'),
marginBottom: hp('1.5%'),
marginRight: wp('5%'),
color: "white",
textAlign: 'center',
fontFamily: "Anton-Regular"
},
onboardingTextHeadline: {
fontSize: hp('3%'),
marginTop: hp('1.5%'),
marginLeft: wp('5%'),
marginBottom: hp('1.5%'),
marginRight: wp('5%'),
color: orangeStyle,
textAlign: 'center',
fontFamily: "Anton-Regular"
},
cancelButtonOnboarding: {
justifyContent: 'center',
padding: 6,
width: wp('45%'),
margin: 5,
borderRadius: 5,
borderColor: redStyle,
borderWidth: 2,
height: hp('8%')
}And my HTML code snippet:
<View style={styles.menu}>
<View style={styles.menuContainer}>
<View style={styles.onboardingWhole}><Text style={styles.onboardingTextHeadline}>WELCOME TO SAGLY! LET'S IMPROVE YOUR SUSPENSION SETUP OF YOUR MTB. </Text><Text style={styles.onboardingText}>We would recommend to follow the following steps: </Text><Text style={styles.onboardingText}>1) Set up your profile so that SAGLY can make SMART SUGGESTIONS.</Text><Text style={styles.onboardingText}>2) Create a new setup. Optionally with the EASY SETUP GUIDE.</Text><Text style={styles.onboardingText}> 3) Inspect setups with MANAGE SETUPS and tune them with the WHAT SHOULD I DO WHEN ... guide.</Text><TouchableOpacity style={styles.submitButtonOnboarding} onPress={this.nextOnboardingView.bind(this)} title="next"><Text style={styles.buttonTextNext}>GOT IT!</Text></TouchableOpacity></View>
</View>
</View>Is there a better approach than what I'm doing here? Should I reconsider using this package or am I missing something?
Thank you for your assistance!