React-native-pager-view: Causing app to crash if a touchable object inside the view is clicked

[ertankara]

Bug

App crashes as soon as I click a touchable opacity inside the view element that is nested in the viewpager.

Environment info

React native info output:

    OS: macOS 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 309.32 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      API Levels: 23, 26, 27, 28
      Build Tools: 27.0.3, 28.0.3
      System Images: android-28 | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: 3.3 AI-182.5107.16.33.5314842
    Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.1 => 0.61.1 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Library version: 2.0.0

Steps To Reproduce

1. Using ViewPager as the root element of the component
2. Placing dynamically created touchable objects
3. Clicking on any dynamically created object causes crash
   ...

Describe what you expected to happen:

1. I expect my touchable to work just like it does in the simulator. Android 9 Pie real device causing to crash when dynamically created touchable object is touched.

Reproducible sample code

<ViewPager
        scrollEnabled
        style={componentStyles.rateContainer}
      >
        <View style={componentStyles.slide}>
          <Text style={componentStyles.ratingLabelBig}>{strings.misc.contactStyle}</Text>
          <View style={{ alignSelf: "center" }}>
            <StarGenerator
              isButton
              onPress={(score: number) => setContactStyle(score)}
              limit={5}
              currentScore={contactStyle}
            />
          </View>

        </View>
</ViewPager>

Implementation of StarGenerator component

  if (isButton) return (
    <View style={{ flexDirection: "row" }}>
      {generator(limit, currentScore).map((starComponent, index) =>
      <TouchableOpacity key={index} onPress={() => onPress && onPress(index + 1)}>
        {starComponent}
      </TouchableOpacity>
      )}
    </View>

[cisplRejjak]

Same here..!

[troZee]

Hey 👋 . I have checked out our example, which contains similar class to yours https://github.com/react-native-community/react-native-viewpager/blob/master/example/src/component/LikeCount.js on both platforms and everything works fine. Can you provide example on expo for it ?

[ertankara]

@troZee I've checked the example but that touchable is hardcoded, not dynamically generated.

Try something like following

{data.map(item => {
  return (
    <TouchableOpacity onPress={() => { doStuff(val) }}>
      <Text>{item.label}</Text>
    </TouchableOpacity>
  )
})}

And indeed it works well on both Android and iOS simulators, but crashes on real Android 9 Pie device.

[ertankara]

I'm sorry, it was me totally missing some huge point. I was relying on auto complete of the VSCode, and some of my touchable opacities were being imported from "react-native-gesture-handler" package. It was working as expected in the debug mode. But once I get the release it was crushing on real device. So this is totally not related to this project.