Remove SafeAreaView from Android

Question

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.

Android Screenshot (Not fine)

iPhone Screenshot (I want to achieve this on Android as well)

UPDATE 1:

Following is the code:

render() {
    const { roomId, nickName } = this.state;
    return (
      <>
        <StatusBar barStyle='light-content' translucent />

        <ImageBackground
          source={require('../../../assets/images/backgroundImage.png')}
          style={{ flex: 1, justifyContent: 'center', height: '100%' }}
          resizeMode='cover'>

          <KeyboardAvoidingView
            style={{ flexGrow: 1 }}
            enabled
            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
            <View
              style={{
                flex: 1,
                justifyContent: 'flex-end',
                alignItems: 'center',
                paddingHorizontal: 16,
                paddingVertical: 1,
                flexDirection: 'column',
                height: '100%',
              }}>
              <Image
                source={require('../../../assets/images/logo.png')}
                style={{ marginBottom: 50 }}
                resizeMode='contain'
              />

              <SafeAreaView
                style={{
                  height: '50%',
                  justifyContent: 'flex-end',
                  width: '100%',
                }}>
                <View
                  style={{
                    width: '100%',
                    justifyContent: 'flex-end',
                    marginBottom: 10,
                  }}>
                  <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) => this.setRoomId({ roomId: text })}
                  />

                  <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) =>
                      this.setNickName({ nickName: text })
                    }
                  />

                  <TouchableOpacity
                    onPress={this.navigateToClassroomHandler}
                    style={{
                      backgroundColor: 'rgb(251, 158, 85)',
                      width: '100%',
                      height: 50,
                      justifyContent: 'center',
                      alignItems: 'center',
                      borderRadius: 4,
                    }}
                    disabled={roomId === '' || nickName === ''}>
                    <Text
                      style={{
                        fontSize: 18,
                        color: '#fff',
                        fontWeight: 'bold',
                      }}>
                      Attend Class
                    </Text>
                  </TouchableOpacity>
                </View>
              </SafeAreaView>
            </View>
          </KeyboardAvoidingView>
        </ImageBackground>
      </>
    );
  }