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>