prscX / react-native-tooltips

React Native: Native Tooltip View
Apache License 2.0
271 stars 40 forks source link

How to use RNTooltips API in functional components #43

Open shivam-880 opened 4 years ago

shivam-880 commented 4 years ago

Hi @prscX,

I am not able to figure out how would I really use RNTooltips API with functional components. Please guide.

null is not an object (evaluating 'RNTooltips.Show')

Show
RNToolTips.js:118:15

I am trying to raise tool tips upon onDayLongPress on a https://github.com/wix/react-native-calendars.

What I have done so far is:

   const [parent, setParent] = useState(null);

    const _onDayLongPress = e => {
            RNTooltips.Show(
                parent,
                parent,
                {
                    text: 'Long Press Description'
                }
            )
    }
     <Calendar
          ref={setParent}
          onDayLongPress={_onDayLongPress}
      />
juansimon666 commented 4 years ago

This happen to me, it was a link problem on iOS, i used pods.

ChengBenj commented 4 years ago

@codingkapoor try this `const target = useRef(null); const parent = useRef(null); const [visible, setVisible] = useState(false);

return (
    <View ref={parent}>
        <TouchableOpacity onPress={() => setVisible(true)} ref={target}>
            <View>
                <Text>Click me</Text>
            </View>
        </TouchableOpacity>
        <RNTooltips
            text="Test"
            visible={visible}
            target={target.current}
            parent={parent.current}
            onHide={() => setVisible(false)}
            clickToHide
        />
    </View>
);

`