wookoinc / react-native-popover-tooltip Goto Github PK
View Code? Open in Web Editor NEWThis project forked from alimek/react-native-tooltip-menu
ReactNative component - tooltip menu
License: MIT License
This project forked from alimek/react-native-tooltip-menu
ReactNative component - tooltip menu
License: MIT License
In ios works really good.. But in android puts my cell phone in slow motion
I updated react-native-tooltip-menu compatibility for react 16 in this merge: alimek#7
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.
Hi
I want to highlight TooltipItems on user touchDown, can we set underlayColor style ?
thx
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.
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... }
/>
hi,
It is possible to change the position of triangle. I want to add marginLeft, but now it is not possible.
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>
popover tooltip does not visible in IOS
react-native: 0.44.0
When I apply the tooltip I got a big distance between tooltip and its button , how can I control that
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>
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)
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.