UI not Loading for iPhone SE - Rest Working Fine

[munsifhayat]

🐛 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

[react-native-bot]

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] under Environment to let us know.

[munsifhayat]

@react-native-bot Added .

[hramos]

Can you add the environment info the bot requested? We also need the style information. It's not possible to reproduce this with the information you've provided so far.

[munsifhayat]

@hramos I have updated the Environment Info and code example.
Its only causing problem on iPhone SE and iPhone 5c. For rest its working fine including the iPads.

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.58 and verify if the issue still exists.

The "Resolution: Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

[kelset]

that specific screen

Can you please create a minimal repro that re-creates that issue in isolation?

Also, maybe upgrading to the latest version of 0.57.x may help you. Also, have you tried cleaning up the build folder of Xcode?

[kelset]

Hello there 👋 this issue seems to have been inactive for the past few weeks. Because of this, it's likely that the issue is not a high priority anymore or it has been solved by OP; for these reasons, we'll close it. But please, if it's actually still an issue with 0.59 please comment below and we can reopen it or please send us a Pull Request with a fix 😊