react-native-svg @>=6.5 onPress stops working after navigating between tabs

Hello all,

I’m currently using react-navigation w/ react-native-svg and a weird interaction is occuring: whenever I navigate outside of a screen with a SVG component, when I go back to it the onPress callbacks inside the SVG stops working. From my tests, this happens on RN-SVG after version 6.5, on Android, though I did not have the opportunity to test it out on iOS.

Here’s a minimal example showcasing the problem:

import * as React from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import Svg, { Circle } from 'react-native-svg';
import {createBottomTabNavigator} from 'react-navigation'

const { width } = Dimensions.get('window');

const FirstTab = () => (
  <View><Text>First Tab</Text></View>
)

const SecondTab = () => (<View style={styles.container}>
        <Svg
          width={`${width}`}
          height={`${width}`}
          viewBox="-200 -200 400 400"
          style={{ backgroundColor: '#fff' }}
          onTouchStart={() => console.log('touchStart')}
          onTouchEnd={() => console.log('touchEnd')}
          onTouchMove={() => console.log('onTouchMove')}>
          <Circle
            onPressIn={() => console.log('onPress')}
            onResponderMove={() => {
              return;
            }}
            onResponderGrant={() => console.log('onResponderGrant')}
            onResponderReject={() => console.log('onResponderReject')}
            onResponderEnd={() => console.log('onResponderEnd')}
            onResponderRelease={() => console.log('onResponderRelease')}
            onResponderStart={() => console.log('onResponderStart')}
            onResponderTerminate={() => console.log('onResponderTerminate')}
            stroke="black"
            strokeWidth="5"
            r="40"
            fill={'#fff'}
          />
        </Svg>
      </View>)

const tabNavigator = createBottomTabNavigator({
  FirstTab,
  SecondTab
})

export default tabNavigator;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
});

Do the following:

1. Load this code with react-native-svg@6.5
2. open app, go to “Second Tab”
3. Press on the circle. Your console will output all relevant events, as expected.
4. Navigate to “First Tab”, and then back to “Second Tab”
5. Press the circle again. Now, only the SVG’s touchStart, touchMove and touchEnd events will fire, as if the Circle never had any onPress events. No Responder granting, no rejecting, nothing.

Do notice that, if you do this on Snack, the error will not occur because Expo uses react-native-svg@6.2.2, which is working fine.

I’ve tested this with version 7.0(it still happens there) and all versions from 6.2 to 6.5, which means the error was introduced somewhere in 6.5 I believe.

Thank you for your time.

[tovesson]

I solved it by updating to version 7.2.0 and clearing cache after you instructions 😃 https://github.com/react-native-community/react-native-svg/issues/814#issuecomment-430022466

[msand]

@tufik2 Seems you have some caching issues. Try

watchman watch-del-all
rm -fr $TMPDIR/react-*
npm start -- --reset-cache

Or,

rm -rf node_modules
npm i
npm start -- --reset-cache