Header not moving after pressing tabs or swiping on RTL layout

[hossein-zare]

Current behavior

Everything is fine when i scroll up & down, The header is collapsible until i press tabs or swipe, The header doesn't move anymore.

My app is RTL for your information.

Expected behaviour

The header should always be collapsible.

Code sample

const HEIGHT = 250;

const Header = useCallback(() => (
  <View style={{
    backgroundColor: "red",
    width: "100%",
    height: HEIGHT
  }} />
), []);



<Tabs.Container
  renderHeader={Header}
  headerHeight={HEIGHT}>
    <Tabs.Tab name="A">
      <Tabs.ScrollView>
        <View style={[styles.box, styles.boxA]} />
        <View style={[styles.box, styles.boxB]} />
        <View style={[styles.box, styles.boxA]} />
        <View style={[styles.box, styles.boxB]} />
      </Tabs.ScrollView>
    </Tabs.Tab>

    <Tabs.Tab name="B">
      <Tabs.ScrollView>
        <View style={[styles.box, styles.boxA]} />
        <View style={[styles.box, styles.boxB]} />
        <View style={[styles.box, styles.boxA]} />
        <View style={[styles.box, styles.boxB]} />
      </Tabs.ScrollView>
    </Tabs.Tab>
</Tabs.Container>

Screenshots (if applicable)

package.json

"react-native": "0.64.1",
"react-native-collapsible-tab-view": "4.2.0",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "2.0.0",

[andreialecu]

If you switch to LTR does it work properly?

[hossein-zare]

@andreialecu Yes

[saurabh874]

@hossein-zare are you able to indication blue strip when change the tab in RTL? if yes do you pass any other props?

[hossein-zare]

@saurabh874 No, it doesn't show the blue stripe at first. I think you need to create your own Tab Bar.