yeswanth / react-native-dynamic-tab-view Goto Github PK

• 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

Reported in #12

<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'}} />

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"}
/>

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

Reported in #12

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

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

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 :)

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

Hello,

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

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

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={{}} />

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

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

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 :(