CODEWITHSUNDEEP
react-nativereact-native-tab-view
Liza Catherine Ombyaw
Liza Catherine Ombyaw

Reputation: 904

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

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}
  />
);

enter image description here

Upvotes: 3

Views: 10521

Answers (1)

Isaac Khoo
Isaac Khoo

Reputation: 545

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.

Upvotes: -1

Related Questions