How to scrollable tabbar in ScrollableTabView React Native

6837 views javascript react-native
6

I built react native application and use https://github.com/ptomasroos/react-native-scrollable-tab-view to make tab bar menu by products categories, I have problems when categories more than 5 or the width is more than screen width, the layout is broken. How to make it scrollable ? Layout App here My code to produce tab like this

<ScrollableTabView
initialPage={0}
renderTabBar={() => (
  <CustomTabBar
    backgroundColor="#EAEBF3"
    style={{
      width:categories.length*200, // it;s make width depends amount of categories
    }}
  />
)}>
{categories.map((cat,index) =>
  <View key={'v'+index} tabLabel={cat.PRODUCT_CATEGORY} style={{paddingTop: 1}}>
    <ProductList key={'v'+index} dataFilterSet={dataFilterSet[index].PRODUCTS}  /> 
  </View>
)}
</ScrollableTabView>

answered question

1 Answer

9

You can try this code

<ScrollView>
        <ScrollView horizontal={true}>
            // list items
        </ScrollView>
</ScrollView>

posted this

Have an answer?

JD

Please login first before posting an answer.