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

GerardCasadevall · 2018-09-13T09:07:14Z

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 · 2018-09-13T13:47:23Z

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 · 2018-09-13T14:03:18Z

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 }) => (

<Text
style={[
GlobalStyles.tabBarItemText,
{
color:
Theme.topTabBarActiveTextColor
}
]}>
{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:

regards!

satya164 · 2018-09-13T16:08:00Z

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 · 2018-09-14T07:23:16Z

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 · 2018-09-24T09:58:26Z

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

ManigandanRaamanathan · 2018-12-14T02:12:45Z

Any solution for this problem?

satya164 · 2019-02-19T23:03:51Z

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 closed this as completed Feb 19, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

GerardCasadevall commented Sep 13, 2018

UsmanAkmal01 commented Sep 13, 2018

GerardCasadevall commented Sep 13, 2018

satya164 commented Sep 13, 2018 •

edited

Loading

GerardCasadevall commented Sep 14, 2018

GerardCasadevall commented Sep 24, 2018

ManigandanRaamanathan commented Dec 14, 2018

satya164 commented Feb 19, 2019

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

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

Comments

GerardCasadevall commented Sep 13, 2018

UsmanAkmal01 commented Sep 13, 2018

GerardCasadevall commented Sep 13, 2018

satya164 commented Sep 13, 2018 • edited Loading

GerardCasadevall commented Sep 14, 2018

GerardCasadevall commented Sep 24, 2018

ManigandanRaamanathan commented Dec 14, 2018

satya164 commented Feb 19, 2019

satya164 commented Sep 13, 2018 •

edited

Loading