Comments (16)
Yes you're right @nandorojo. I've been doing mostly web development recently so I was thinking too much like web.
In version 2.0.0 I added a Motion.Pressable. whileTap
and whileHover
now require a Motion.Pressable
ancestor, which is uses for tracking whether it is hovered or pressed. You can use it like this:
<Motion.Pressable>
<Motion.View
whileHover={{ scale: 1.2 }}
whileTap={{ y: 20 }}
/>
</Motion.Pressable>
from legend-motion.
Good point! I will look into passing the Pressable props through.
from legend-motion.
Thanks @vbylen! Yes, that would great to have, and I think should be fairly easy to add. Would you like to submit a PR to add one or both of those?
whileTap should be very straightforward, but would you expect whileHover to only work in react-native-web?
from legend-motion.
Actually I changed my mind, I'll add whileTap
shortly đ
from legend-motion.
Ok done, I added whileTap
. It works the same way as Framer Motion, but quick docs with example here: https://legendapp.com/dev/motion/overview/#tap
I'll leave the issue open for adding whileHover
at some point.
from legend-motion.
That was exceptionally quick đŻ
In regards to the whileHover
prop, it appears that we'll need to wrap Pressable
with a Hoverable
provider in order to add the onHoverIn
and onHoverOut
props.
Luckily for us the one and only @nandorojo has figured out all off this stuff already.
So we could go based off these files from moti
:
hoverable.tsx
hoverable-context.tsx
hoverable.native.tsx
And then incorporating them in Pressable
like so may do the trick:
From there it should be just a simple matter of following the same procedure that was used to add the whileTap
commit!
Does this sound good to you?
from legend-motion.
@vbylen Added in 1.3.1.
I looked at those solutions and did some experimenting, and it seems like it's as easy as adding onMouseEnter/onMouseLeave to the Pressable. I tested with nesting and it seems to work just fine. Do you see any scenarios where it's not working right?
from legend-motion.
there are cases where opening a modal or clicking something doesnât fire onMouseLeave. Thatâs why moti also sets hover to false when you click a different element
from legend-motion.
Gotcha, ok. Thanks @nandorojo. I'll test for that and try to fix it.
from legend-motion.
Hi there @jmeistrich, just discovered this library and looks like a great stuff!
I immediately look for how to do interaction with this, and amazingly already covered with whileTap
and whileHover
. But since I'm looking to animate buttons, I'll also need to pass other props like onPress
and accessibility stuffs. Is there any idea on how to do this? Looking at the code, seems like there is no other props passed to the wrapped Pressable
currently, other than what's needed for animation
from legend-motion.
Hi guys, I'm not sure I understand how to use this prop in a react native component with a touchable ? Thanks, ThĂŠo
from legend-motion.
@jmeistrich yes I also thought that, since interactions in react-native have their specific components. I looked at moti
and it also has separate interactions package with MotiPressable
. I think separating them in legend-motion
will also open up other possible interactions and customization in the future.
Motion.Pressable
is a good idea!
from legend-motion.
@panjiesw After some experimenting I think requiring using a separate Motion.Pressable
to get the benefits of whileHover
and whileTap
would be a big shame so I'm trying to find a better solution. I also found that making an Animated Pressable with Animated.createAnimatedComponent(Pressable)
had some problems so we may not be able to animate the Pressable component directly.
I'm experimenting now with adding a prop named pressableProps
which would pass those props into the Pressable wrapper. What would you think of that? Are there downsides to that solution I haven't though of?
from legend-motion.
I donât recommend trying to hack interactables into every component. RN just wasnât built that way like the Web.
MotiPressable
uses a container element to trap interactions, and the child animates based on the hover/press states. This prevents transform animations from affecting the element itself:
https://twitter.com/fernandotherojo/status/1523493591988928513?s=21&t=BZSO0ix-oOoov6xFCG7vZg
I find the container component to be a necessary piece of interaction animations. However, itâs untenable for a View to have a wrapper everywhere. Thatâs why I recommend splitting the Pressable into its own component.
from legend-motion.
@jmeistrich that could work too I think. @nandorojo comment above also shed light to me regarding interactables, might worth a consideration
from legend-motion.
Just a little update: I am leaving this open until this is fixed:
there are cases where opening a modal or clicking something doesnât fire onMouseLeave. Thatâs why moti also sets hover to false when you click a different element
I have not had a chance to investigate and find a broken case in action yet. If this is bothering anyone and you can help provide a repo that reproduces that bug I will fix it. Or a PR with a fix works too :).
from legend-motion.
Related Issues (14)
- Can't animate opacity when using whileHover on web HOT 3
- ref not working on Motion.View HOT 3
- Failed to construct transformer: Error: Failed to start watch mode. HOT 6
- `rotate`s do not appear to work. HOT 5
- Emulating `Animated.loop()` HOT 9
- Re-render when `initial` props changed HOT 2
- Animations from @legendapp/motion throwing error after migrating to nativewind (v2) from tailwindcss-react-native (v1) HOT 5
- Transition for React Native components?
- Incompatible with metro web HOT 4
- Customise the timing of the initial and exit animations separately
- Document loop animations HOT 1
- Support repeating animations and animation direction
- Support for Nativewind v4 Alpha HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
đ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. đđđ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google â¤ď¸ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from legend-motion.