Native Base Are Flickering React Native Expo

Question

I'm using ScrollableTab from Native Base library in my expo app. When I navigate to this screen so all tabs are flickering continue when I click any of them so it stops flickering and working fine and when I directly open tabs screen so it also working fine but when I navigate from other screen so it's behavior is weird (flickering).

<Container>
                <Appbar.Header theme={{ colors: { primary: '#b33f3f' } }}>
                    <Appbar.BackAction
                        onPress={() => this.props.navigation.goBack()}
                    />
                    <Appbar.Content
                        title="My Case Law"
                        subtitle="Case Details"
                    />
                </Appbar.Header>
                <Tabs renderTabBar={() => <ScrollableTab tabsContainerStyle={{ backgroundColor: '#b33f3f' }} />} tabBarUnderlineStyle={{ backgroundColor: '#fff' }}>
                    <Tab heading={<TabHeading style={{ backgroundColor: '#b33f3f' }}><Icon type="Feather" name="activity" style={{ color: '#fff', fontSize: 20 }} /><Text style={{ color: '#fff', fontSize: 14, fontWeight: 'normal' }}>Activity History</Text></TabHeading>} tabStyle={{ backgroundColor: '#b33f3f' }} activeTabStyle={{ backgroundColor: '#b33f3f', fontWeight: 'normal' }} activeTextStyle={{ fontWeight: 'normal' }} textStyle={{ color: '#fff' }}>
                        <Content>
                            <ActivityHistory />
                        </Content>
                    </Tab>
                    <Tab heading={<TabHeading style={{ backgroundColor: '#b33f3f' }}><Icon type="Feather" name="users" style={{ color: '#fff', fontSize: 20 }} /><Text style={{ color: '#fff', fontSize: 14, fontWeight: 'normal' }}>Team Members</Text></TabHeading>} tabStyle={{ backgroundColor: '#b33f3f' }} activeTabStyle={{ backgroundColor: '#b33f3f' }} textStyle={{ color: '#fff', }}>
                        <Content>
                            <TeamMembers />
                        </Content>
                    </Tab>
                    <Tab heading={<TabHeading style={{ backgroundColor: '#b33f3f' }}><Icon type="MaterialCommunityIcons" name="file-document-box-multiple-outline" style={{ color: '#fff', fontSize: 20 }} /><Text style={{ color: '#fff', fontSize: 14, fontWeight: 'normal' }}>Documents</Text></TabHeading>} tabStyle={{ backgroundColor: '#b33f3f' }} activeTabStyle={{ backgroundColor: '#b33f3f' }} textStyle={{ color: '#fff' }}>
                        <Content>
                            <Documents />
                        </Content>
                    </Tab>
                    <Tab heading={<TabHeading style={{ backgroundColor: '#b33f3f' }}><Icon type="Entypo" name="documents" style={{ color: '#fff', fontSize: 20 }} /><Text style={{ color: '#fff', fontSize: 14, fontWeight: 'normal' }}>Notes</Text></TabHeading>} tabStyle={{ backgroundColor: '#b33f3f' }} activeTabStyle={{ backgroundColor: '#b33f3f' }} textStyle={{ color: '#fff' }}>
                        <Content>
                            <Notes />
                        </Content>
                    </Tab>
                    <Tab heading={<TabHeading style={{ backgroundColor: '#b33f3f' }}><Icon type="FontAwesome5" name="tasks" style={{ color: '#fff', fontSize: 20 }} /><Text style={{ color: '#fff', fontSize: 14, fontWeight: 'normal' }}>To-Dos</Text></TabHeading>} tabStyle={{ backgroundColor: '#b33f3f' }} activeTabStyle={{ backgroundColor: '#b33f3f' }} textStyle={{ color: '#fff' }}>
                        <Content>
                            <Todos />
                        </Content>
                    </Tab>
                    <Tab heading={<TabHeading style={{ backgroundColor: '#b33f3f' }}><Icon type="MaterialCommunityIcons" name="briefcase-search-outline" style={{ color: '#fff', fontSize: 20 }} /><Text style={{ color: '#fff', fontSize: 14, fontWeight: 'normal' }}>Related Cases</Text></TabHeading>} tabStyle={{ backgroundColor: '#b33f3f' }} activeTabStyle={{ backgroundColor: '#b33f3f' }} textStyle={{ color: '#fff' }}>
                        <Content>
                            <RelatedCases />
                        </Content>
                    </Tab>
                    <Tab heading={<TabHeading style={{ backgroundColor: '#b33f3f' }}><Icon type="MaterialCommunityIcons" name="timeline-text-outline" style={{ color: '#fff', fontSize: 20 }} /><Text style={{ color: '#fff', fontSize: 14, fontWeight: 'normal' }}>Time Sheet</Text></TabHeading>} tabStyle={{ backgroundColor: '#b33f3f' }} activeTabStyle={{ backgroundColor: '#b33f3f' }} textStyle={{ color: '#fff' }}>
                        <Content><TimeSheet /></Content>
                    </Tab>
                    <Tab heading={<TabHeading style={{ backgroundColor: '#b33f3f' }}><Icon type="Feather" name="bar-chart" style={{ color: '#fff', fontSize: 20 }} /><Text style={{ color: '#fff', fontSize: 14, fontWeight: 'normal' }}>Expenses</Text></TabHeading>} tabStyle={{ backgroundColor: '#b33f3f' }} activeTabStyle={{ backgroundColor: '#b33f3f' }} textStyle={{ color: '#fff' }}>
                        <Content>
                            <Expenses />
                        </Content>
                    </Tab>
                    <Tab heading={<TabHeading style={{ backgroundColor: '#b33f3f' }}><Icon type="FontAwesome" name="money" style={{ color: '#fff', fontSize: 20 }} /><Text style={{ color: '#fff', fontSize: 14, fontWeight: 'normal' }}>Fee Received</Text></TabHeading>} tabStyle={{ backgroundColor: '#b33f3f' }} activeTabStyle={{ backgroundColor: '#b33f3f' }} textStyle={{ color: '#fff' }}>
                        <Content>
                            <FeedReceived />
                        </Content>
                    </Tab>
                </Tabs>
            </Container>