Comments (3)
This is easy to implement on your own, though native support would be great for v4. I'm not sure how third party components integrate now with nativewind.
import { Motion } from "@legendapp/motion";
import { remapProps } from "nativewind";
export const View = remapProps(Motion.View, { className: "style" });
export const Pressable = remapProps(Motion.Pressable, { className: "style" });
// ... motion components
from legend-motion.
I would definitely like to support nativewind v4. We've been using it in our apps with v2 for a while but I think we should upgrade it to v4.
I haven't had a chance to dig into the API changes yet, but it looks like we just need to change styled
to remapProps
? See the existing implementation: https://github.com/LegendApp/legend-motion/blob/main/src/styled.ts
from legend-motion.
I just released version 2.4.0 which changes the peerDependency to * so it should work for nativewind v4. A major difference in v4 is that nativewind doesn't have styled
anymore, and the configuration isn't necessary anymore, and it shouldn't even need remapProps.
So it probably doesn't affect you if you're using gluestack, but if you're using legend-motion with nativewind v4 directly, you don't need to import from "@legendapp/motion/styled". I'll update the docs about that soon.
from legend-motion.
Related Issues (14)
- Feature request: whileHover and whileTap props HOT 16
- 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
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.