React Native Tooltip with Icon and TouchableHighlight?

Question

I am working on a [Tooltip][1] the users can click for an explanation. it looks like this

<Tooltip popover={<Text>my explanation</Text>} backgroundColor={'rgb(255, 179, 16)'}>
   <Text>?</Text>
</Tooltip>

The problem with this is that the user needs to click on top of the exact text to work, I wanted to create something like an invisible box around it that the user can click anywhere inside of it to trigger it.

<TouchableHighlight>
   <View style={{height: 48, alignSelf: 'stretch', justifyContent: 'center', backgroundColor: '#2196F3'}}>
     <Tooltip popover={<Text>my explanation</Text>} backgroundColor={'rgb(240, 179, 16)'}>
       <Text>?</Text>
     </Tooltip>
   </View>
</TouchableHighlight>

and also tried this

 <Tooltip popover={<Text>my explanation</Text>} backgroundColor={'rgb(240, 179, 16)'}>
     <Icon.Button name="help-circle"
         backgroundColor="##3b5998"
         borderColor="##3b5998"
         color="##3b5998">
     </Icon.Button>
 </Tooltip>

but none of these two works. anyone can advise on what's wrong with my code and how I can fix it. also, any recommendation on how I should deal with text in the future when I need them to be clickable and I want to extend the clickable area to a larger area than just the text itself.

thanks

Answer 1

Try this

     <Tooltip popover={<Text>my explanation</Text>} backgroundColor={'rgb(240, 179, 16)'}>
      <View style={{ height: 48, alignSelf: 'stretch', justifyContent: 'center', backgroundColor: '#2196F3' }}>
        <Text>?</Text>
      </View>
    </Tooltip>

Basically you have to wrap the element inside tooltip Also look at hitslop property of View to increase touchable area of view , its an alternative to increase touchable area by height and padding