React-native-tab-view: TabBar: Android on react-native: 0.59.0-rc.2: on press not pass to tab

Created on 19 Feb 2019  路  4Comments  路  Source: satya164/react-native-tab-view


Current behaviour

TabBar: Android - on react-native: 0.59.0-rc.2: on press on tab first time it pass to other tab but from then it stuck.
On react-native 0.58.4 it's OK
Only on Android! On iOS it's OK

Expected behaviour

On press tab it pass to another tab

Code sample

<TabView
            useNativeDriver
            navigationState={this.state}
            renderScene={this._renderScene}
            onIndexChange={this.changeRoute}
            renderTabBar={(props) => {
                return (<View style={{paddingHorizontal: layoutPaddingHorizontal, width: Dimensions.get('screen').width}}>
                    <TabBar
                        {...props}
                        renderIndicator={this._renderIndicator}
                        renderLabel={this._renderLabel}
                        style={{backgroundColor: 'white', shadowOpacity: 0, elevation: 0}}
                        indicatorStyle={{backgroundColor: "blue"}}
                        labelStyle={{
                            color: "blue",
                            fontSize: 15
                        }}
                    />
                </View>)
            }}
        />

Screenshots (if applicable)

What have you tried

Pressing on tab label No. 2 and it pass.
Pressing on tab label No. 3 and it not pass.
Pressing on tab label No. 2 and not pass.
Pressing on tab label No. 1 and not pass.

go back

Pressing on tab label No. 3 and it pass.
Pressing on tab label No. 2 and not pass.
Pressing on tab label No. 1 and not pass.

Your Environment

| software | version
| --------------------- | -------
| ios or android | Android
| react-native | "0.59.0-rc.2"
| react-native-tab-view | "1.3.2"
| node | 8.11.4
| npm or yarn | yarn

Most helpful comment

Just in case anyone else has this issue, the problem exists in PagerAndroid.js file, specifically the _handlePageScrollStateChanged function.

this._isIdle = e === 'idle';

can be changed to:

this._isIdle = e.nativeEvent.pageScrollState === 'idle';

That sorted the issue for us. I would open a pull request however I am unsure if the 1.x branch is still being maintained.

All 4 comments

Also happened in react-native: 0.59.0-rc.0 and react-native: 0.59.0-rc.1

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.

Just in case anyone else has this issue, the problem exists in PagerAndroid.js file, specifically the _handlePageScrollStateChanged function.

this._isIdle = e === 'idle';

can be changed to:

this._isIdle = e.nativeEvent.pageScrollState === 'idle';

That sorted the issue for us. I would open a pull request however I am unsure if the 1.x branch is still being maintained.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

AndriiUhryn picture AndriiUhryn  路  3Comments

KingAmo picture KingAmo  路  3Comments

jasonkw9 picture jasonkw9  路  3Comments

karthikeyansundaram2 picture karthikeyansundaram2  路  3Comments

satya164 picture satya164  路  3Comments