React-Native-Elements Tooltip non functional - react-native

Question

I'm trying to add a tooltip component to my react native project, I installed React Native Elements to do this. I know it's installed correctly because the Divider component worked perfectly fine. For some reason though, the tooltip doesn't seem to work right, there are no errors but it simply doesn't do anything when I tap on the tooltip.
My entire component is here:
import React from 'react';
import {
StyleSheet,
View,
TouchableOpacity,
} from 'react-native';
import { MaterialCommunityIcons } from '#expo/vector-icons';
import { Tooltip, Text } from "#rneui/themed";
import {Colors} from './Colors';
const InfoTooltip = ({ label, info='' }) => {
return (
<View style={styles.inputLine}>
{ info != '' &&
<Tooltip popover={<Text>Tooltip Info</Text>}>
<Text>Press</Text>
</Tooltip>
}
{ info === '' &&
<Text style={styles.inputLabel}>{label}:</Text>
}
</View>
);
};
const styles = StyleSheet.create({
inputLine: {
flex: 1,
flexDirection: 'row',
},
inputLabel: {
color: Colors.Dove_Gray,
marginTop: 2,
fontSize: 14,
},
infoText: {
color: Colors.Silver,
fontSize: 12,
},
});
export default InfoTooltip;
I'm testing it on iOS and I see the text that says "Press", but when tapped, nothing happens, no popover, no error.
When setting visible to true, the tooltip is shown when I first render the app, but it locks the app up and I can no longer tap anything or scroll.
I'm not sure what I'm doing wrong, Thanks!

Answer 1

Starting with React Native Elements version 4.0, Tooltip is stateless. This means you need to use useState. You should declare a variable, like:
const [open, setOpen] = useState(false);
And include visible, onOpen & onClose Props for it to work:
<Tooltip
visible={open}
onOpen={() => {
setOpen(true);
}}
onClose={() => {
setOpen(false);
}}
popover="This is the popover text"
/>
More info in the Migration Guide.