jasongaare / react-native-walkthrough-tooltip

An inline wrapper for calling out React Native components via tooltip
MIT License
620 stars 182 forks source link

Can't interact with Pressable in content. #156

Closed sangonzal closed 2 years ago

sangonzal commented 2 years ago

I'd like to navigate from one tooltip to another when the user clicks on a button inside the tooltip. I've added a Pressable to the component that gets passed into content=, but the onPress for that Pressable never gets triggered when I click on it. Instead, I get the following warning message every time I click on the component:

[react-native-walkthrough-tooltip] onClose prop not provided
at node_modules/react-native-walkthrough-tooltip/src/tooltip.js:62:13 in Tooltip
at node_modules/react-native/Libraries/Pressability/Pressability.js:702:17 in _performTransitionSideEffects
at node_modules/react-native/Libraries/Pressability/Pressability.js:639:6 in _receiveSignal
at node_modules/react-native/Libraries/Pressability/Pressability.js:520:8 in responderEventHandlers.onResponderRelease

I tried to explicitly set allowChildInteraction={true}, but that didn't have any effect.

      <Tooltip
        content={
          <ProductTourModal />
        }
        isVisible={true}
        placement="bottom"
        useInteractionManager={true}
        allowChildInteraction={true}
        closeOnChildInteraction={false}
        closeOnContentInteraction={false}
      >

Any idea on why this might be happening?

anti-duhring commented 2 years ago

You must provide onClose prop. I tested this code and worked, the onPress trigged as well:

        <Tooltip
            isVisible={true}
            content={
                   <View>
                     <Text> Some text...  </Text>
                     <Pressable onPress={() => {console.log('Triggered') }}>
                            <Text>Press me</Text>
                        </Pressable >
                   </View>
            }
            useInteractionManager={true}
            allowChildInteraction={true}
            closeOnChildInteraction={false}
            closeOnContentInteraction={false}
            onClose={() => console.log('Touched outside the tooltip') }
            placement="bottom"
        >
            {children}
        </Tooltip>
sangonzal commented 2 years ago

@anti-duhring Thanks, you are right, just needed to pass onClose prop, even though it's not being used for anything.