Crashing App on Android - React Navigation v5 & useNativeDriver

ebykdrms commented 3 years ago

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 commented 3 years ago

Same here

ejilee commented 3 years ago

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 commented 3 years ago

you could use this solution here https://github.com/react-native-picker/picker/issues/225#issuecomment-851495915

Reginaldo1239 commented 3 years ago

@ejilee thanks

SLMohitMathur commented 3 years ago

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

lawnstarter / react-native-picker-select

Crashing App on Android - React Navigation v5 & useNativeDriver #442