React Native Tab View - display tab bar on top while scrolling

Question

I'm using React Native Tab View, and I use renderTabBar to display my Custom Tab Bar. So my question, how do I stay the tab bar on top of the screen even when I scroll it to down to the bottom? Just like in any apps like Twitter, Instagram etc.

Thank you for your time and help!

Here are my codes:

state = {
 index: 0,
 routes: [
  {
    key: 'first',
    title: 'Images',
    icon: 'ios-stats'
  },
  {
    key: 'second',
    title: 'Members',
    icon: 'ios-remove'
  },
  {
    key: 'third',
    title: 'Views',
    icon: 'ios-map'
  }
]
};

_renderScene = SceneMap({
first: FirstTab,
second: SecondTab,
third: ThirdTab
});

_renderIcon = ({ route }) => {
return (
  <Icon name={route.icon} size={24} color='black' />
);
};

render() {
return (
  <TabView
    navigationState={this.state}
    renderScene={this._renderScene}
    onIndexChange={index => this.setState({ index })}
    initialLayout={{ width: Dimensions.get('window').width }}
    renderTabBar={props => 
      <TabBar
        {...props}
        indicatorStyle={{backgroundColor: 'red'}}
        renderIcon={
          // props => getTabBarIcon(props)
          this._renderIcon
        }
        tabStyle={styles.bubble}
        labelStyle={styles.noLabel}
      />
    }
    render
    lazy={true}
    scrollEnabled={true}
    bounces={true}
  />
);

plz, share all of your render method implementation. – omri tal Aug 15 '19 at 14:09 — omri tal, Aug 15 '19 at 14:09
Already added, thanks! – Liza Catherine Ombyaw Aug 15 '19 at 14:21 — Liza Catherine Ombyaw, Aug 15 '19 at 14:21

Isaac Khoo · Answer 1 · 2019-08-19T10:14:35.710

-1

in your tabView, try adding a style to it

style={{ position: 'static', top: 0 }}

this should take the tabView out of the flow of the code, and keep it fixed to the top of the screen.

If static is not an option, you can alternatively utilize relative and absolute positioning.

<View style={{ position: 'relative', flex: 1 }}>
  <TabBar style={{ position: 'absolute', top: 0 }} />
  <ScrollView>
    <Content /> 
  </ScrollView>
</View>

https://snack.expo.io/@isaackhoo/fixed-header-with-scroll-view Here is a snack example.

edited Aug 19 '19 at 10:14

answered Aug 16 '19 at 07:06

Isaac Khoo

525
3
9

There is no option of `static` in `position` there is only `absolute` and `relative` – Liza Catherine Ombyaw Aug 17 '19 at 03:56
In that case, utilize absolute and relative positioning. Edited the answer above to include an example of using this. – Isaac Khoo Aug 19 '19 at 09:49
1

` /> ` This is my code, it turns out only the `TabView` container is only showing. – Liza Catherine Ombyaw Aug 19 '19 at 12:54
2 things. 1) if your tabview is inside your scrollview, your tabview will always be scrolled away. Please refer to the answer above. 2) based on your current code, it is likely that your content is being hidden behind your tabView, because tabview is inside your scrollView as well, as has absolute position of top: 0, which is where your content currently is at. Same thing, view the answer above to fix this by separating the views, and using margins to solve this. – Isaac Khoo Aug 20 '19 at 04:48
I tried it but it turns out the `EventTab` is not displaying. – Liza Catherine Ombyaw Aug 20 '19 at 13:29

React Native Tab View - display tab bar on top while scrolling

1 Answers1