React-native-tab-view: "react-native-tab-view": "2.0.0-alpha.1" not swipe on Android only

[tamirrab]

Current behaviour

"react-native-tab-view": "2.0.0-alpha.1" not swipe on Android only

Expected behaviour

Swiping between screens

Your Environment

| software | version
| --------------------- | -------
| ios or android | Android
| react-native | "0.59.0-rc.2"
| react-native-tab-view | "2.0.0-alpha.1"
| node |v8.11.4
| npm or yarn | yarn

[satya164]

Did you link react-native-gesture-handler properly? Is there a demo I can look at?

[tamirrab]

Yes I link react-native-gesture-handler on android and iOS
I took the example on the main page of react-native-tab-view and from the example path and its all the same on Android.

On iOS it work perfectly

[tamirrab]

Also happen on react-native 0.58.5

[satya164]

Can you share a repo with the code?

[tamirrab]

import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native';
import {TabView, TabBar, SceneMap} from 'react-native-tab-view';
import Ionicons from "react-native-vector-icons/Ionicons";

const FirstRoute = () => (
    <View style={{backgroundColor: '#ff4081', flex: 1}}/>
);
const SecondRoute = () => (
    <View style={{backgroundColor: '#673ab7', flex: 1}}/>
);

class TestTabView extends Component {

    constructor(props) {
        super(props);

        this.state = {
            index: 0,
            routes: [
                {key: 'chat', icon: 'md-chatbubbles'},
                {key: 'contacts', icon: 'md-contact'}
            ],
        };
    }


    _renderIcon = ({route, color}) => (
        <Ionicons name={route.icon} size={24} color={color}/>
    );


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

    _renderTabBar = props => {
        return (
            <TabBar
                {...props}
                indicatorStyle={styles.indicator}
                renderIcon={this._renderIcon}
                style={styles.tabbar}
            />
        );
    };

    _renderScene = SceneMap({
        chat: FirstRoute,
        contacts: SecondRoute,
    });


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

const styles = StyleSheet.create({
    tabbar: {
        backgroundColor: '#e91e63',
    },
    indicator: {
        backgroundColor: '#ffeb3b',
    },
});


export default TestTabView

[satya164]

Please provide a repo. The example code works for me: https://snack.expo.io/@satya164/react-native-tab-view-quick-start

[diruuu]

mine unable to swipe on ios

[tamirrab]

I did everything like the example from clean project and it doesn't work.
I upload the project to my github:
https://github.com/tamirrab/TabViewTest

[satya164]

@tamirrab doesn't look like you finished linking gesture handler. it requires additional changes after you run react-native link. here is the link: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#android

I'll update the README to note that additional work is needed for linking.

[AurangzaibRamzan]

same issue does not work in android

[tamirrab]

Add this to your MaimActivity:

https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#android

[AppleMango23]

Add this to your MaimActivity:

https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#android

@tamirrab thank you very much!! After changed working like charm!! thanks alot!!!