Navigation Header not rendering in properly

[hadihassan09]

Issue Description

When rendering the navigation header, 2 headers are rendered over each other.

Steps to Reproduce / Code Snippets

Navigation Component:

                <StudntsChatStack.Screen
                    name="ChatGroup"
                    component={ChatScreen}
                    options={{
                        title: 'Chat Group',
                        headerTitleAlign: 'center',
                        headerTitleStyle: {
                            color: '#2e64e5',
                            fontFamily: 'Kufam-SemiBoldItalic',
                            fontSize: 18
                        },
                        headerStyle: {
                            backgroundColor: '#2e64e515',
                            shadowColor: '#fff',
                            elevation: 0,
                        },
                        headerBackTitleVisible: true,
                        headerBackImage: () => (
                            <View style={{ marginLeft: 15 }}>
                                <Ionicons name="arrow-back" size={25} color="#2e64e5" />
                            </View>
                        ),
                    }} />

Chat Component:

    render() {
        return (
            <GiftedChat
                alignTop
                keyboardVerticalOffset={true}
                renderUsernameOnMessage={true}
                messages={this.state.messages}
                onSend={this.db.send}
                user={this.user}
            />
        );
    }

Example Image

Expected Results

Additional Information

• Nodejs version: v14.10.1
• React version: 16.13.1
• React Native version: 0.63.4
• react-native-gifted-chat version: 0.16.3
• Platform(s) (iOS, Android, or both?): Android
• TypeScript version: [FILL THIS OUT]

[smit-luvani]

@hadihassan09 Could you please share your solution? I am facing the similar issue. Attached screenshot (https://i.imgur.com/qe5uOFe.png).

[Neeraj-WebNeuron]

Please add
isStatusBarTranslucentAndroid={true}
and refresh the app

[smit-luvani]

I tried but did not work. and so downgraded version.

#2558 (comment)

[MarkKewley]

The isStatusBarTranslucentAndroid={true} did work for me