Android: Tabs index behavior with flex: 0

[jamesholcomb]

I have a scene that utilizes Tabs to filter FlatList rows based on current tab index. The FlatList is outside (below) the Tabs. This avoids unnecessarily re-rendering the FlatList when tapping different headings.

To achieve this, I add <Tabs style: {{ flex: 0 }}. It works fine on iOS, but on Android the tab underline is always one behind the previously tapped index. Double tapping a tab works around it.

https://snack.expo.io/@jamesholcomb/tabs-android-underline

[akhil-ga]

@jamesholcomb you can wrap the Tabs inside a View and set the View height greater than 50 (height of the tab bar).

import React, { Component } from 'react';
import { StyleSheet } from 'react-native';

// or any pure javascript modules available in npm
import { Container, View, Header, Tabs, Tab, Text } from "native-base"; // Version can be specified in package.json

export default class App extends Component {
  renderTab = (heading) => {
    return (
      <Tab
        textStyle={[styles.tab, styles.label]}
        tabStyle={styles.tab}
        activeTextStyle={[styles.tab, styles.label, styles.activeLabel]}
        activeTabStyle={styles.tab}
        heading={heading}>
      </Tab>
    )
  }

  render() {
    return (
      <Container>
        <Header hasTabs />
        <View style={{ height: 51 }}>
          <Tabs
            tabContainerStyle={[styles.tabContainer]}
            locked>
            {this.renderTab("UPCOMING")}
            {this.renderTab("POPULAR")}
            {this.renderTab("DISCUSSED")}
            {this.renderTab("PAST")}
          </Tabs>
        </View>
        <View>
          <Text>FlatList content</Text>
        </View>
      </Container>
    )
  }
}

const styles = StyleSheet.create({
  tab: {
    marginLeft: 0,
    marginRight: 0
  },
  label: {
    fontSize: 14
  },
  activeLabel: {
    fontWeight: "bold"
  }
});

Gif

[jamesholcomb]

Thanks, I'll try that approach.