wookoinc / react-native-popover-tooltip Goto Github PK

View Code? Open in Web Editor NEW

This project forked from alimek/react-native-tooltip-menu

63.0 63.0 63.0 23.21 MB

ReactNative component - tooltip menu

License: MIT License

JavaScript 100.00%

react-native-popover-tooltip's People

Contributors

Stargazers

Watchers

react-native-popover-tooltip's Issues

tablet support

tablet apple air 2 certain positions will click the ending of the tooltip.

Serious performance problem on android

In ios works really good.. But in android puts my cell phone in slow motion

PropTypes is deprecated in React 15.5

I updated react-native-tooltip-menu compatibility for react 16 in this merge: alimek#7

ToolTip Appears Off Screen when near Bottom and setBelow enabled

As per our earlier discussion we have a fix for the issue you mentioned where the Tooltip will go off the screen when near the bottom of the screen. Simple fix was to simple enforce it to flip to appear above. Please let me know if you have any questions or concerns with the PR and we can update.

how to change TooltipItems underlay color

I want to highlight TooltipItems on user touchDown, can we set underlayColor style ?

thx

Unable to set tooltip position below target.

WookInc. First off love this package thanks for creating it! The current implementation fits 95% of our AC but we had to roll a custom version of it because we need to default the tooltip below the target no matter the position. I've created a PR that reflects the changes we made in our custom version. It adds a setBelow property to override the default to appear above the target. Please feel free to add any feedback on the PR or let me know if you have any questions.

Unstable for android, move modal outside so that it can be used like a Provider or add a modal render block.

Requires long press on Android but not iOS

I noticed that this control requires users to long press the buttonComponent on Android but on iOS a simple quick tap opens the tooltip. This is inconsistent.

The best result would to have this as a configurable option. Ideally I'd like to have it always open on a quick single tap but I'm sure others would like it remaining as a long press.

Here's my implementation:

<PopoverTooltip
        buttonComponent={
                  <Image
                  resizeMode={"cover"}
                  style={{width: 80, height: 80, borderRadius: 40}}
                  source={{uri: this.state.meInfo.profileImageUrl}}
                  />
        }
       items={ ...removed for simplicity... }
/>

triangle

hi,
It is possible to change the position of triangle. I want to add marginLeft, but now it is not possible.

is there prop check if popover is opened? also 'onRequestClose' don't work

tooltip opening in left bottom side

can you tell me what is exactly wrong I copy one of your example and been trying couple of ways, whenever I click this just goes to bottom of screen on left side. also it is creating a copy of button as well. I am not sure what is the issue.

Here's the relevant code.

<View
    style={{
        flex: 1,
        alignSelf: "stretch",
        alignItems: "center",
        justifyContent: "flex-start",
        backgroundColor: "#fff"
    }}
>
    <View style={{ height: 40 }} />
    <Text>testing tooltip Effect</Text>
    <PopoverTooltip
        ref="tooltip1"
        setBelow
        buttonComponent={
            <View
                style={{
                    width: 200,
                    height: 50,
                    backgroundColor: "orange",
                    justifyContent: "center",
                    alignItems: "center",
                    borderRadius: 5
                }}
            >
                <Text>Press Me</Text>
            </View>
        }
        items={[
            {
                label: "Item 1",
                onPress: () => {}
            },
            {
                label: "Item 2",
                onPress: () => {}
            }
        ]}
    />
</View>

tool tip does not visible on IOS

popover tooltip does not visible in IOS
react-native: 0.44.0

distance between tooltip and triangle is very far (Vertically)

When I apply the tooltip I got a big distance between tooltip and its button , how can I control that

Alert dismisses automatically

When I call Alert onPress of particular item. It dismisses automatically

<View style={{flex:1, alignItems:'center', justifyContent:'center'}}>
          <View style={{height: Platform.OS==='ios'? 40:0}} /> 
            <PopoverTooltip
              labelStyle={{color:'#ffffff'}}
              buttonComponent={
                <View style={{width:200, height:50, justifyContent: 'center', alignItems: 'center', borderRadius: 5}}>
                  <Image
                      source={require('./img/popupmenu.png')}
                      style={styles.tooltipImg} />
                </View>
              }
                
              items={[
                {
                  label:STR.strings.popup,
                  onPress: () => {Actions.edit()}   //Works fine
                },
                {
                  label:STR.strings.popup1,
                  onPress: () => {Actions.delete()} // Works fine
                },
                {
                  label:STR.strings.popup2,
                  onPress: () => {Alert.alert("Hello")} // Here is the issue!!Alert appears and dismisses automatically
                },
              
              ]}
              timingConfig={{duration: 1}}
              opacityChangeDuration={1}
              overlayStyle={{backgroundColor: 'transparent'}} // set the overlay invisible
              labelContainerStyle={{ backgroundColor: '#000000',alignItems: 'stretch'}}
              labelSeparatorColor='#ffffff' 
              tooltipContainerStyle= {{marginLeft:45,marginBottom:120,marginTop:-20, width: '55%'}}/>
          </View>

[Android] Tooltip moving component

video

Relevant code:

                        <PopoverTooltip
                            ref={'tooltip' + this.props.index}
                            buttonComponent={
                            <MY COMPONENT HERE, doesn't matter because it happens no matter what component I use, including the one in the readme examples>}
                            items={[
                                {
                                label: 'Item 1',
                                onPress: () => {}
                                },
                                {
                                label: 'Item 2',
                                onPress: () => {}
                                }
                            ]}
                            // animationType='timing'
                            // using the default timing animation
                            />

This happens even when I set setBelow={true} (the component moving up and down)

migrate to react-native-reanimated

Current tooltip works great on ios and higher performing devices but not on low end android devices.
Its because animations used currently running on js thread and may slow down on any js process. like an api call or some async task.
To overcome this use useNativeDriver or react-native-reanimated.
As current animation is completely discrete and doesn't depend on gestures and stuff, best way is to use Transition api in reanimated.

Without calling the toggle function the tooltip opens in iOS

There is no method in any onPress={} call, but when I click on the tooltip component it is opening. I actually want it to get open on calling another component, but not inside the tooltip button component.

How to get rid of this issue?
Thanks

undefined is not an object (evaluating 'items.map')

Error inside node_modules/react-native-popover-tooltip/src/index.js

wookoinc / react-native-popover-tooltip Goto Github PK

react-native-popover-tooltip's People

Contributors

Stargazers

Watchers

Forkers

react-native-popover-tooltip's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs