React-native-tab-view: swipe on working in android

[karthikeyansundaram2]

Bug

I tried to do swipe in the tab view. It's working perfectly in IOS but not working in android

react-native:0.58
[email protected]
React Native Environment Info:
System:
OS: macOS 10.14.4
CPU: (4) x64 Intel(R) Core(TM) i5-5250U CPU @ 1.60GHz
Memory: 30.47 MB / 8.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.14.2 - /usr/local/bin/node
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
Android SDK:
API Levels: 23, 26, 28
Build Tools: 27.0.3, 28.0.3
System Images: android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5056338
Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: ^0.59.8 => 0.59.8
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7
react-native: 0.56.0

React native info output:
No errors in output

react-native-tab-view:2.3.0

Create a tab bar using react-native tab-view 2.3.0
Create 2 tabs and try to run in android

Describe what you expected to happen:

1.Expected swiping in android

Reproducible sample code

FULL CODE:

import * as React from 'react';
import { View, StyleSheet, Dimensions, SafeAreaView } from 'react-native';
import { TabView, SceneMap, TabBar } from 'react-native-tab-view';
import HomeScreen from "./HomeScreen";
import SettingsScreen from "./SettingsScreen";

export default class App extends React.Component {
state = {
index: 0,
routes: [
{ key: 'SuperStar', title: 'SuperStar' },
{ key: 'Head2Head', title: 'Head2Head' },
{ key: 'Champions', title: 'Champions' },
{ key: 'Battles', title: 'Battles' }
],
};
onSwipeStart(event) {
alert('Start swiping...', event);
}

tabPress(props) {
alert(JSON.stringify(props.route.key))
}

onSwipeEnd(props) {
alert("end swipping")
alert(JSON.stringify(props))
}
_renderTabBar = props => (
{...props}
scrollEnabled
onTabPress={this.tabPress}
/>
);

render() {
return (

      navigationState={this.state}
      renderScene={SceneMap({
        SuperStar: HomeScreen,
        Head2Head: SettingsScreen,
        Champions: HomeScreen,
        Battles: SettingsScreen
      })}
      renderTabBar={this._renderTabBar}
      animationEnabled={true}
      swipeEnabled={true}
      onIndexChange={index => this.setState({ index })}
      initialLayout={{ width: Dimensions.get('window').width }}
      onSwipeStart={this.onSwipeStart}
      onSwipeEnd={this.onSwipeEnd}
    />

  </SafeAreaView>
);

}
}

const styles = StyleSheet.create({
scene: {
flex: 1,
},
});

[karthikeyansundaram2]

import * as React from 'react';
import { View, TouchableOpacity, StyleSheet } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
import Animated from 'react-native-reanimated';

const FirstRoute = () => (

);
const SecondRoute = () => (

);

export default class TabViewExample extends React.Component {
state = {
index: 0,
routes: [
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
],
};

_handleIndexChange = index => this.setState({ index });

_renderTabBar = props => {
const inputRange = props.navigationState.routes.map((x, i) => i);

return (
  <View style={styles.tabBar}>
    {props.navigationState.routes.map((route, i) => {
      const color = Animated.color(
        Animated.round(
          Animated.interpolate(props.position, {
            inputRange,
            outputRange: inputRange.map(inputIndex =>
              inputIndex === i ? 255 : 0
            ),
          })
        ),
        0,
        0
      );

      return (
        <TouchableOpacity
          style={styles.tabItem}
          onPress={() => this.setState({ index: i })}>
          <Animated.Text style={{ color }}>{route.title}</Animated.Text>
        </TouchableOpacity>
      );
    })}
  </View>
);

};

_renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
});

render() {
return (
navigationState={this.state}
renderScene={this._renderScene}
renderTabBar={this._renderTabBar}
onIndexChange={this._handleIndexChange}
/>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
},
tabBar: {
flexDirection: 'row',
},
tabItem: {
flex: 1,
alignItems: 'center',
padding: 16,
},
});
Tried this also but not working swipe in android

[satya164]

Please follow the instructions mentioned in README: https://github.com/react-native-community/react-native-tab-view#installation

If you still have an issue, open a new issue with full repro in a GitHub repo.

[xiaer93]

package com.swmansion.gesturehandler.react.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}