Delay in tap response when using TransitionPresets

问题

UPDATE: The problem seems to come when I use animation using ...TransitionPresets.SlideFromRightIOS.

I have a simple screen where on tapping a touchableOpacity it navigates to another screen with some parameters. The issue is that sometimes I need to tap twice to move to another screen. I am not sure why this happens.

DEMO:

App.js

 <SafeAreaProvider>
            <NavigationContainer>
                <Stack.Navigator
                    screenOptions={{
                        headerStyle: { elevation: 0, },
                        headerTitleStyle: { fontFamily: "Google Sans Regular", color: "#161515", },
                        headerTintColor: "#787887",
                        ...TransitionPresets.SlideFromRightIOS,
                    }}
                >

SCREEN 1 (outside render)

componentDidMount(): void {
    axios.get("https://freegeoip.app/json/")
        .then(response => {
            let responseData = response.data;
            let calling_code = "";

            for(let country of countryData) {
                if(country.country_code === responseData.country_code) {
                    calling_code = country.calling_code;
                    break;
                }
            }

            this.setState({
                country_name: responseData.country_name,
                country_code: responseData.country_code,
                region_name: responseData.region_name,
                city_name: responseData.city,
                calling_code: calling_code,
            });
        })
        .then(() => {
            SplashScreen.hide();
        });
}

_onSelectCountry = (data) => {
    this.setState(data);
};

SCREEN 1 (inside render)

<KeyboardAvoidingView behavior="padding">
    <View style={ styles.signInForm }>
        <TouchableOpacity
            style={ styles.countrySelector }
            activeOpacity={ 0.1 }
            onPress={ () => Navigation.navigate("CountrySelect",
                {
                    onSelect: this._onSelectCountry,
                    countryCode: this.state.country_code,
                })
            }
        >
            <Text style={ styles.countryCode }>
                { this.state.country_code } ({ this.state.calling_code })
            </Text>
            <Icon name="arrow-drop-down" size={ 22 } />
        </TouchableOpacity>
        <TextInput
            style={ styles.phoneNumberInput }
            placeholder="Enter your mobile number"
            placeholderTextColor="#787887"
            keyboardType="phone-pad"
            autoFocus={ true }
        />
    </View>
</KeyboardAvoidingView>

来源：https://stackoverflow.com/questions/59799843/delay-in-tap-response-when-using-transitionpresets

标签

reactjs

react-native

react-navigation

touchableopacity