yeswanth/react-native-dynamic-tab-view

React Native component for creating dynamic tab layouts

react-native-dynamic-tab-view's Issues

Add a expo based example to the library

Dynamic Tab is rendering all views at once.

Dynamic tab should only render the current tab, previous tab and next tab.

Header doesn't have full width if the tabs are less

Reported in #12

Can't customize tabItemContainer style

It becomes necessary to customise the tabItemContainer, for example if one needs to remove the bottom padding below the Highlight, or add a background or so.
I'll share a pull request to make it available as a prop. Naming it tabItemContainerStyle is a mouthfull, but let me know if you have any better ideas.
Line 19 at DynamicTabViewScrollHeader.js

Tabs in index 3 and 5 are not scrolling back

<DynamicTabView data={productCategories.map((item, index) => { return { title: item.catName, key: item.catId, }; })} renderTab={(cat) => ( <FlatList data={productData.filter((item) => item.catName === cat.title)} removeClippedSubview={true} windowSize={17} initialNumToRender={8} numColumns={2} keyExtractor={(item, index) => index} renderItem={(item) => <Product key={item.itemId} product={item} />} /> )} onChangeTab={onChangeTab} defaultIndex={defaultIndex} containerStyle={{flex: 1}} headerBackgroundColor="white" headerUnderlayColor="#E85123" headerTextStyle={{color: 'black'}} />

Add the ability to change text color in Header

Reported in #12

possible to use with typescript project?

I am trying to use it in a typescript project but it wont work :( it can find the reference of it in the node_modules :(

Animate "Underlay"(line) under header title

• Whenever user selects a new tab. The underlay should animate to the selected tab
• Whenever user scrolls to a new tab. The underlay should scroll to users gesture

Refactor componentWillReceiveProps() to getDerivedStateFromProps()

• The componentWillReceiveProps() method is being deprecated in future version of React (17)
• React version should be >= 16.3

TypeError: Cannot read property '0' of undefined

I am using FlatList under renderItem Method
<DynamicTabView
data={this.state.data}
renderTab={this._renderItem}
defaultIndex={this.state.defaultIndex}
containerStyle={styles.container}
headerBackgroundColor={"white"}
headerTextStyle={styles.headerText}
onChangeTab={this.onChangeTab}
headerUnderlayColor={"blue"}
/>

Support layout for header (instead of title)

Rendering Issues When nesting one group of tabs inside another group of tabs (dynamic tabs inside dynamic tabs)

A VirtualizedList contains a cell which itself contains more than one VirtualizedList of the same orientation as the parent list. You must pass a unique listKey prop to each sibling list.

VirtualizedList trace:
Child (horizontal):
listKey: crypto
cellKey: crypto
Parent (horizontal):
listKey: rootList
cellKey: rootList

How to set current active tab programmatically?

Hello, I'm trying to set the current active tab based in a condition, is there a way to set it programmatically? Thanks!

header styling not working

Hello,

Im trying to change the color of text inside tabs, but they are unchangeable (always white) and cant give it 100% width .

I need to make the header with full width grey

How to add different color for active and inactive tab text??

Add types

Hello! I'm really enjoying this library, since I need dynamic tabs in many projects. However it would be nice to have some typedefinitions. If there are typedefinitions please tell me how to access them since npm install @types/react-native-dynamic-tab-view does not exist :)

Default Index is not working.

When using this TabView with a default index to open a specific tab the default index is not working. Even though if I am trying to set it statically then also it is not working.

<DynamicTabView
        data={tabNames}
        renderTab={_renderTabItem}
        defaultIndex={defaultIndex}
        containerStyle={styles.tabContainer}
        headerBackgroundColor={'#8e8e8e'}
        headerTextStyle={styles.headerText}
        onChangeTab={(index) => onChangeTab(index)}
        headerUnderlayColor={'#8e8e8e'}
        headerContainerStyle={{ backgroundColor: '#afafaf' }}
        headerActiveTextStyle={{ color: '#8e8e8e' }}
        highlightStyle={{ backgroundColor: '#8e8e8e' }}
        tabContainerStyle={{}}
        noHighlightStyle={{ backgroundColor: '#8e8e8e' }}
        extraData={{}} />

Header doesn't center to the default tab

Upgrade fstream library (its a dependency of one of our dependencies)

Header doesn't scroll as the content scrolls

Selected tab can go out of view if there are many headers. The header should scroll as the tab is selected.

How to add different color for active and inactive tab text?

Scroll bug

1 When you reach to the last tab(lets say 10th tab) and still swipe right. The 9th tab gets selected
2 Swipe right again and then the 10th tab header
3. Steps 1 and 2 goes in a loop