When I click on the tab header the content of tab does not animation (swipe)

GerardCasadevall commented 6 years ago

In the demonstration of the documentation by clicking on the tab header the content of the tab changes making the animation (swipe), I tried to reproduce this scenario and it is impossible for me.

https://github.com/react-native-community/react-native-tab-view/blob/master/demo/demo.gif

How do the same effect of changing the tab with my finger when I click on the header of the tab? Now when I click on the tab header the content is loaded without any animation.

UsmanAkmal01 commented 6 years ago

can you show your code? its most likely you have two state. make sure you defined keys like this in constructor: ```constructor(props) { super(props); this.state = {

index: 0,
routes: [
  { key: 'a', title: 'a' },
  { key: 'b', title: 'b' },
  { key: 'c', title: 'c' },
],}}```

GerardCasadevall commented 6 years ago

Hi UsmanAkmal01,

My code:

var tabs = { twitter: <View style={{ flexGrow: 1 }}>{this.twitterTab}, quote: <View style={{ flexGrow: 1 }}>{this.contractSheetTab}, dom: <View style={{ flexGrow: 1 }}>{this.booksTab}, chart: <View style={{ flexGrow: 1 }}>{this.chartTab} }; var routes = [ { key: 'twitter', title: I18n.t('Twitter') }, { key: 'quote', title: I18n.t('Quote') }, { key: 'dom', title: I18n.t('Dom') }, { key: 'chart', title: I18n.t('Chart') } ];

<TabView navigationState={{ index: this.state.currentTab, routes: routes }} style={{ flex: 1 }} renderTabBar={props => ( <TabBar {...props} indicatorStyle={{ backgroundColor: Theme.topTabBarActiveTextColor, height: 3 }} style={{ backgroundColor: Theme.tabDefaultBg }} renderLabel={({ route }) => (

{route.title}

        )}
    />
)}
renderScene={route => {
    const scenes = tabs;
    return scenes[route.route.key];
}}
onIndexChange={this.handleOnChangeTab}
initialLayout={{
    width: Dimensions.get('window').width,
    height: 0
}}

/>

As you can see in the gif, the last two transitions that are made by clicking on the header of the tab do not make any animation:

untitled

regards!

satya164 commented 6 years ago

can you post the full code? your code isn't clear. you can wrap the code in 3 backticks so it's properly formatted:

```js
your code here
```

GerardCasadevall commented 6 years ago

Hi satya164,

Here is my full code:

render() {

var tabs = {
    twitter: <View style={{ flexGrow: 1, backgroundColor: 'red' }} />,
    quote: <View style={{ flexGrow: 1, backgroundColor: 'yellow' }} />,
    dom: <View style={{ flexGrow: 1, backgroundColor: 'green' }} />,
    chart: <View style={{ flexGrow: 1, backgroundColor: 'blue' }} />
};
var routes = [
    { key: 'twitter', title: I18n.t('Twitter') },
    { key: 'quote', title: I18n.t('Quote') },
    { key: 'dom', title: I18n.t('Dom') },
    { key: 'chart', title: I18n.t('Chart') }
];

return (
<SafeAreaView
    style={[
        GlobalStyles.safeAreaView,
        CustomStyle.safeAreaViewColor
    ]}>
    <StyleProvider style={getTheme(Theme)}>
        <View style={{ flex: 1 }}>
            <Header ignoreIPhoneXInsets="true">
                <Left style={GlobalStyles.headerLeft}>
                    <Button
                        transparent
                        onPress={() =>
                            this.props.navigation.goBack(null)
                        }>
                        <Icon name="md-arrow-back" />
                    </Button>
                </Left>
                <Body style={GlobalStyles.headerBody}>
                    <Title>{this.state.title}</Title>
                </Body>
                <Right style={GlobalStyles.headerRight}>
                    <Menu
                        ref={this.setMenuRef}
                        button={
                            <Icon
                                name="md-more"
                                style={{
                                    height: 35,
                                    width: 35,
                                    textAlign: 'center',
                                    color: '#fff'
                                }}
                                onPress={this.showMenu}
                            />
                        }
                        style={{ width: '80%' }}>
                        {menuOptions}
                    </Menu>
                </Right>
            </Header>
            <TabView
                navigationState={{
                    index: this.state.currentTab, // Default 1
                    routes: routes
                }}
                style={{ flex: 1 }}
                renderTabBar={props => (
                    <TabBar
                        {...props}
                        indicatorStyle={{
                            backgroundColor:
                                Theme.topTabBarActiveTextColor,
                            height: 3
                        }}
                        style={{
                            backgroundColor: Theme.tabDefaultBg
                        }}
                        renderLabel={({ route }) => (
                            <View style={GlobalStyles.tabBarItem}>
                                <Text>
                                    {route.title}
                                </Text>
                            </View>
                        )}
                    />
                )}
                renderScene={route => {
                    const scenes = tabs;
                    return scenes[route.route.key];
                }}
                onIndexChange={this.handleOnChangeTab}
                initialLayout={{
                    width: Dimensions.get('window').width,
                    height: 0
                }}
            />
            {tradingOrdersPanel}
        </View>
    </StyleProvider>
</SafeAreaView>
);
}

Video of the result what I get when I click on the head of a tab (last 3 transitions):

regards!

GerardCasadevall commented 6 years ago

Someone has a code that when click the header of tab the content of the tab changes making the animation (swipe)?

ManigandanRaamanathan commented 5 years ago

Any solution for this problem?

satya164 commented 5 years ago

Hey, I just released a new alpha 2.0.0-alpha.0 of the library. It's rewritten using react-native-gesture-handler and react-native-reanimated addresses a many platform specific bugs and performance problems. The documentation is updated as well.

Please try the new version and see if it addresses your issue. If not, please open a new issue following the issue template.

satya164 / react-native-tab-view

When I click on the tab header the content of tab does not animation (swipe) #609