UI not Loading for iPhone SE - Rest Working Fine #23340
Description
🐛 Bug Report
UI is not loading as expected incase of iPhone SE. Its working fine on iPhone 5s of almost same resolution. Also working as expected for iPhone 7 and iPhone X.
To Reproduce
Loading that specific screen for iPhone SE.
Expected Behavior
It should have UI as it is loading for rest of mobile phones.
Code Example
This is the code I am using which is working perfectly fine for rest of phones.
import HomeScreen from "../HomeScreen";
class OtherSettings extends React.Component {
static navigationOptions = {
// This will set the color of title
title: 'Other Settings',
headerBackTitle: null ,
headerTintColor: 'black' ,
};
constructor(props) {
super(props);
Obj = new HomeScreen();
this.state = {
isLoading : false ,
dataSource : null ,
isConnected : true ,
}
}
componentDidMount() {
NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);
this.state.dataSource = [
{"title":"Refresh Salah Data","subtitle":"Manually refreshes the salah data from the server"},
{"title":"Manage Masjid","subtitle":"Admin panel to manage a masjid."}]
}
componentWillUnmount() {
NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange);
}
// Functions
handleConnectivityChange = isConnected => {
if (isConnected) {
this.setState({
isConnected ,
});
} else {
this.setState({
isConnected ,
});
}
};
// Selected Index
_selectedItem (selectedIndex) {
if (selectedIndex == 0) {
// Obj.SecondClassFunction() ;
if (this.state.isConnected) {
this.props.navigation.navigate('HomeScreen');
} else {
Alert.alert('Check your internet connectivity.')
}
} else if (selectedIndex == 1){
// Alert.alert('Coming soon')
Linking.canOpenURL('https://time.my-masjid.com/login').then(supported => {
if (!supported) {
// console.log('Can\'t handle url: ' + url);
// Alert.alert('Can\'t handle url: ' + url)
} else {
return Linking.openURL('https://time.my-masjid.com/login');
}
}).catch(err => console.error('An error occurred', err));
}
}
// Render Flat List for County Name
rednerList (item , index) {
return (
<TouchableWithoutFeedback onPress={(event)=>this._selectedItem(index)}>
<View style = {styles.cardListView}>
<Text style={styles.cardLabels} >{item.title}</Text>
<Text style={styles.SubCardLabels} >{item.subtitle}</Text>
</View>
</TouchableWithoutFeedback>
);
}
render() {
if (this.state.isLoading) {
return (
<View style={styles.container}>
<ActivityIndicator />
</View>
)
} else {
return (
<View style={styles.container}>
<FlatList
data={this.state.dataSource}
renderItem={({item, index}) => this.rednerList(item, index)}
keyExtractor= { item => item.title }
/>
</View>
);
}
}
}
export default OtherSettings;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#0a0a0a',
padding : 8 ,
},
cardLabels: {
textAlign: 'left' ,
fontFamily: 'Helvetica-Bold',
color: 'white',
fontSize: 16,
} ,
SubCardLabels: {
textAlign: 'left' ,
fontFamily: 'Helvetica-Light',
color: 'grey',
fontSize: 12,
marginTop : 8,
} ,
cardListView: {
flex: 1,
padding : 15 ,
textAlign: 'center' ,
backgroundColor: '#1f1f1f',
justifyContent: 'center',
borderRadius : 1 ,
margin : 1 ,
} ,
imageListView: {
height : 100 ,
width : 320 ,
} ,
});
Environment
React Native Environment Info:
System:
OS: macOS 10.14
CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
Memory: 40.44 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.12.0 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 23, 24, 25, 26, 27, 28
Build Tools: 26.0.2, 27.0.3, 28.0.3
System Images: android-25 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5056338
Xcode: 10.1/10O35n - /usr/bin/xcodebuild
npmPackages:
react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728
react-native: 0.57.3 => 0.57.3
npmGlobalPackages:
create-react-native-app: 2.0.2
react-native-cli: 2.0.1