title: Remove SafeAreaView from Android
body: <p>I am trying to set the background image to whole screen area including the notch. This is the default on iPhone but I am not able to achieve it on Android Phone. The Android phone I am using is Samsung Galaxy A-01 and the iPhone is iPhone XS. Attached are the screenshots.</p>
  <p><strong>Android Screenshot (Not fine)</strong>
  <a href="https://i.stack.imgur.com/DLCA3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DLCA3.jpg" alt="Android Screenshot (Not fine)" /></a></p>
  <p><strong>iPhone Screenshot (I want to achieve this on Android as well)</strong>
  <a href="https://i.stack.imgur.com/NUbaJ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NUbaJ.jpg" alt="iPhone Screenshot (I want to achieve this on Android as well)" /></a></p>
  <p><strong>UPDATE 1:</strong></p>
  <p>Following is the code:</p>
  <pre><code>render() {
      const { roomId, nickName } = this.state;
      return (
        &lt;&gt;
          &lt;StatusBar barStyle='light-content' translucent /&gt;
  
          &lt;ImageBackground
            source={require('../../../assets/images/backgroundImage.png')}
            style={{ flex: 1, justifyContent: 'center', height: '100%' }}
            resizeMode='cover'&gt;
  
            &lt;KeyboardAvoidingView
              style={{ flexGrow: 1 }}
              enabled
              behavior={Platform.OS === 'ios' ? 'padding' : 'height'}&gt;
              &lt;View
                style={{
                  flex: 1,
                  justifyContent: 'flex-end',
                  alignItems: 'center',
                  paddingHorizontal: 16,
                  paddingVertical: 1,
                  flexDirection: 'column',
                  height: '100%',
                }}&gt;
                &lt;Image
                  source={require('../../../assets/images/logo.png')}
                  style={{ marginBottom: 50 }}
                  resizeMode='contain'
                /&gt;
  
                &lt;SafeAreaView
                  style={{
                    height: '50%',
                    justifyContent: 'flex-end',
                    width: '100%',
                  }}&gt;
                  &lt;View
                    style={{
                      width: '100%',
                      justifyContent: 'flex-end',
                      marginBottom: 10,
                    }}&gt;
                    &lt;TextInput
                      ref={this.classIdRef}
                      style={{
                        width: '100%',
                        backgroundColor: '#fff',
                        height: 50,
                        borderRadius: 4,
                        marginBottom: 15,
                        paddingHorizontal: 15,
                      }}
                      placeholderTextColor='rgb(218, 218, 218)'
                      placeholder='Class ID'
                      value={roomId}
                      onChangeText={(text) =&gt; this.setRoomId({ roomId: text })}
                    /&gt;
  
                    &lt;TextInput
                      ref={this.nicknameRef}
                      style={{
                        width: '100%',
                        backgroundColor: '#fff',
                        height: 50,
                        borderRadius: 4,
                        marginBottom: 20,
                        paddingHorizontal: 15,
                      }}
                      placeholder='Nickname'
                      placeholderTextColor='rgb(218, 218, 218)'
                      value={nickName}
                      onChangeText={(text) =&gt;
                        this.setNickName({ nickName: text })
                      }
                    /&gt;
  
                    &lt;TouchableOpacity
                      onPress={this.navigateToClassroomHandler}
                      style={{
                        backgroundColor: 'rgb(251, 158, 85)',
                        width: '100%',
                        height: 50,
                        justifyContent: 'center',
                        alignItems: 'center',
                        borderRadius: 4,
                      }}
                      disabled={roomId === '' || nickName === ''}&gt;
                      &lt;Text
                        style={{
                          fontSize: 18,
                          color: '#fff',
                          fontWeight: 'bold',
                        }}&gt;
                        Attend Class
                      &lt;/Text&gt;
                    &lt;/TouchableOpacity&gt;
                  &lt;/View&gt;
                &lt;/SafeAreaView&gt;
              &lt;/View&gt;
            &lt;/KeyboardAvoidingView&gt;
          &lt;/ImageBackground&gt;
        &lt;/&gt;
      );
    }
  </code></pre>