Material top tab navigator does not work with react-native 0.59

[kantorm]

Current Behavior

I set up clean project with latest react-native release (0.59) and created simple material top tab navigator. When the app runs touch events on tabs does not work and the only way to move between tabs is swiping

package.json

"dependencies": {
    "react": "16.8.3",
    "react-native": "0.59.0",
    "react-native-gesture-handler": "^1.1.0",
    "react-navigation": "^3.3.2"
  },

App.js

const First = () => (
  <View>
    <Text>FIRST</Text>
  </View>
)

const Second = () => (
  <View>
    <Text>SECOND</Text>
  </View>
)

const TopNavigator = createMaterialTopTabNavigator({
  first: {
    title: 'FIRST',
    screen: First,
  },
  second: {
    title: 'SECOND',
    screen: Second,
  },
})
const AppContainer = createAppContainer(TopNavigator)

export default class App extends Component {
  render() {
    return <AppContainer />
  }
}

Expected Behavior

Taping on a tab should navigate to given tab.

software	version
react-navigation	3.3.2
react-native	0.59
node	10.13.0
npm or yarn	yarn

[klazbaba]

I get an error that says: "Error while updating property 'colors' of a view managed by: BVLinearGradient".

This happens whether I swiped or clicked on a tab.

[kantorm]

It's also worth to mention that issue occurs only on android. Verified on Pixel 2XL emulator and Samsung Galaxy S7.

[TheTimeWalker]

Same issue on Nokia 7.1 and Samsung Galaxy S10+

I've also noticed that replacing the tab bar with a different component also breaks it so if using a custom tab bar you break it globally on Android and iOS. My guess would be that something doesn't work right with index (selectedIndex in custom) or navigation (onTabPress in custom)

[kantorm]

I found where the issue is. react-navigation uses react-navigation-tabs for tabs navigators. That package uses react-native-tab-view but in version 1.3.2. In that version in PagerAndroid.js component there is a function that sets some class variable based on the event value propagated form ViewPagerAndroid. The problem is that in current react-native version that event value is no longer a string but an object and that produces wrong behaviour.
@brentvatne @ericvicenti when react-navigation will depend on latest react-navigation-tabs version?

[brentvatne]

You can use 2.0.0-alpha if you want: https://github.com/react-navigation/react-navigation-tabs/releases/tag/v2.0.0-alpha.0

We'll update to this soon but you can also just install it in your project and use it now.

[TheTimeWalker]

Thanks, I had to find it out myself so this could be useful for others:
The guide in react-navigation-tabs still says import from 'react-navigation. Change that to react-navigation-tabs so it looks like this:

import { createMaterialTopTabNavigator } from 'react-navigation-tabs';

[brentvatne]

another option is to use the yarn resolutions field to force the dependency to 2.0.0-alpha.0

[brentvatne]

to clarify, i'm not including this in react-navigation yet for two reasons:

1. it's still alpha
2. it adds a new dependency on react-native-reanimated, which requires me to do a major version bump of react-navigation

[TheTimeWalker]

Understandable! I can confirm at least that using the alpha version fixes this issue. So it's just a matter of upgrading to the new dependency

[FibreFoX]

@kantorm I had a similar problem, can you check if my workaround resolves your issue too?
https://github.com/react-navigation/react-navigation-tabs/issues/102#issuecomment-467636692

[kantorm]

@FibreFoX yes it solves the issue.

[FibreFoX]

@kantorm in that case you just might want to update your dependencies (for me all it needed was a cleaned lockfile), as that bug got removed with 1.3.5 of that lib (react-native-tab-view). I updated my lists of dependencies and got that working version, it even is backward-compatible for RN pre0.59.

[brentvatne]

as @FibreFoX says above, if you clear your lockfile or just uninstall/reinstall react-navigation then you will get an updated version of react-native-tab-view that resolves this issue!