Crashing App on Android - React Navigation v5 & useNativeDriver

[ebykdrms]

First of all, I may not be able to express myself properly because my English is not good but i will try.

Describe the bug

I am using react-navigation v5. As you know, it keeps screen status for we can go to same page second times.

I use { useNativeDriver: true }
in Animated.event()
in onScroll event in Animated.ScrollView component in a stack screen.

This is only an example. There is same problem any pages what it is using useNativeDriver:true.

If i visit this screen and after then press any RNPickerSelect, my app is crashing.
But if i don't visit this screen, RNPickerSelect is works normally.

It is enough to visit this page only once.
To Reproduce

If i change status of useNativeDriver value to false, RNPickerSelect works fine. But this time, my animations work badly. I can't do this on my project.

Expected behavior

n/a

Screenshots

n/a

Additional details

• Device: Samsung Galaxy S5 phone or Pixel_3a_API_30_x86 emulator.
• OS: Android 5 (my phone) or Android 11 (emulator)
• react-native-picker-select version: 8.0.4
• @react-native-picker/picker version: 1.16.0
• react-navigation version: 5
• @react-navigation/bottom-tabs: 5.11.10
• @react-navigation/drawer: 5.12.5
• @react-navigation/native: 5.9.4
• @react-navigation/stack: 5.14.4
• react-native-gesture-handler: 1.10.3
• react-native version: 0.64
• expo sdk version: n/a

Reproduction and/or code sample

n/a

[abdbodara]

Same here

[ejilee]

I saw a similar issue with another picker library, (Android crashing upon touch event on picker component) here. Checkout Rapomon's workaround. Seems to work for this library too. The gist is to put an absolutely positioned empty Text element on top of the picker component.

Here's how my code looks :

<View style={{ flex : 1 }}>
    <RNPickerSelect
        items={myItems}
        value={myValue}
        placeholder={myPlaceholder}
        onValueChange={myChangeHandler}
    />
    <Text
        style={{
            width: '100%',
            height: '100%',
            position: 'absolute',
            bottom: 0,
            left: 0,
        }}>
        {' '}
    </Text>
</View>

[iYahya]

you could use this solution here
react-native-picker/picker#225 (comment)

[Reginaldo1239]

@ejilee thanks

[SLMohitMathur]

I saw a similar issue with another picker library, (Android crashing upon touch event on picker component) here. Checkout Rapomon's workaround. Seems to work for this library too. The gist is to put an absolutely positioned empty Text element on top of the picker component.

Here's how my code looks :

<View style={{ flex : 1 }}>
    <RNPickerSelect
        items={myItems}
        value={myValue}
        placeholder={myPlaceholder}
        onValueChange={myChangeHandler}
    />
    <Text
        style={{
            width: '100%',
            height: '100%',
            position: 'absolute',
            bottom: 0,
            left: 0,
        }}>
        {' '}
    </Text>
</View>

Thanks, working for me too