I am trying to wrap my head around framer-motion, a really nice animation library which I am trying to use in combination with NextJS.
I followed a CSS tricks youtube video, which explained layoutTransition using this sandbox:
https://codesandbox.io/s/framer-motion-css-tricks-template-3-07wkh?fontsize=14&module=/src/Image.tsx&file=/src/Image.tsx:0-783
Eager to try it out I copied into my NextJs project, but I couldn't get it to work. I stripped away everything to make it even cleaner and ended up with these sandboxes: One is React, the other is NExtJS. To me they are identical, but the zooming of the image using layoutTransition doesn't seem to work in my NextJS sandbox, why?
https://codesandbox.io/s/framer-motion-image-zoom-forked-774up
https://codesandbox.io/s/currying-haze-wii0m
I had the very same problem which has taken me well to much time to fix. So the reason it doesn't work for your next app is that your framer-motion version is above 2.0. Downgrade it to the latest v1 which is 1.11.1 and you should be fine. I don't have any idea why layoutTransitions stopped working since v2, did not found any info about this problem.
I find framer-motion wonderful but it lacks good documentation and community does not to seem to be substantial yet
Related
LayoutAnimation is a part of React Native that automatically animates components when the view is rendered.
The official documentation is here:
https://reactnative.dev/docs/layoutanimation
However, the examples in the docs do not work. Objects in the examples that are supposed to animate just jump from the starting position to the end position.
Here is an example of one of the Snacks in the documentation that does not appear to animate:
https://snack.expo.io/91MUQd5IH
This would lead one to the conclusion that this API is just not supported or no longer functional.
Is it the case that Layout Animation just does not work? Or if it does work under some circumstances, please share a link containing a working Snack / Gist with an extremely simple but working LayoutAnimation example.
UPDATE: LayoutAnimation possibly does not support web. Does anyone have any knowledge of this or who can refer the reader to an explanation in the docs?
LayoutAnimation is currently not supported properly in react-native-web. You can see that here: https://github.com/necolas/react-native-web#modules and here https://github.com/necolas/react-native-web/issues/1613, https://github.com/necolas/react-native-web/issues/1056. It doesn't seem to be a priority for the project at the moment so I wouldn't count on it being implemented.
On iOS/Android it's a different story. If we look here: https://reactnative.dev/docs/layoutanimation/ you can actually see this working properly by pressing play and selecting iOS for example.
On Android we have support as well but it might not work/crash. If you look over the issues open for react-native, you will see a lot of them mention issues with LayoutAnimation and Android. E.g. it crashes under certain conditions on Android: https://github.com/facebook/react-native/issues/27552 and https://github.com/facebook/react-native/issues/29919.
I don't recommend using LayoutAnimation, especially on Android, as it is highly experimental and might crash on some devices without warning.
If you want to try some more interesting animations with better performance, I recommend you try using the Animated API from ReactNative or the newer react-native-reanimated which is faster, more modern but still in alpha (I'm talking about the current, v2, version).
By my test the given link in the question post works properly:
Also, I test it on my friend's iPhone and it's worked properly too. But many of React Native features don't work properly on Web export. For example animations on RNW (React Native Web) works on Android/iOS exports but not on Web exports.
For such web situations, you should decouple the web component and make a separate file then write the desired animation on it.
I have a react-native project that's built using Metro and Native Base and I'm trying normalize the UI by extracting a styleguide out of it. I would like it to be documented so I can share it and work along with the designers.
Cheers!
I already tried Storybook, Docz and React-Styleguidist.
React-Styleguidist: This one I liked the fact that it could be placed outside the project.
Docz: seems to be the easiest but it seems to have a problem with Native-Base
Storybook: Seems to require the you have an emulator running to display any documentation.
Anyway, I couldn't make any of them work. So if you guys have some suggestions regarding these or other tools, I'd be glad to hear them.
The best would be to have a browser based that lifts the documentation from outside the repo and parses something that's browsable and I can share with the designers.
You can use react-native-web package that compiles native components to HTML.
https://github.com/necolas/react-native-web
For a while I've been using the react-tippy package, but it hasn't been updated in a long time and it has many bugs.
Recently #atomiks published a react wrapper for his tippy.js library.
I've used succesfully until I need to use it together with React-Router or Redux.
I've created a sandbox that replicates the issue ➡ https://codesandbox.io/s/9yr3rmrkny
Ideally somebody is able to figure out how to tweak the tippy.js wrapper to render the tippyInstance with Context (for both redux and react-router)
Actually Tippy has upgraded to v3 and they now have a really good support for react.
https://github.com/atomiks/tippy.js-react
This issue I posted is no longer an issue with the newer version and React Component
The problem is with the internals of how Tippy works, I.E. manipulating the DOM directly rather than going through the React provided virtual-dom. Due to this fact, it would be suggested to not use Tippy with React at all because it breaks the same rules as using jQuery with React. see here
Sadly, updating the wrapper wouldn't help anything as the DOM manipulation is happening within the Tippy source code, rather than the react wrapper.
What I ended up doing was rebuilding the Tippy functionality I needed in React.
There are also other tooltip libraries that are geared better for React that could be looked into.
I realize this isn't the most helpful answer, but wanted to share what I ran into, also thanks for asking this because it helped figure out what was causing my bug.
EDIT
as pointed out in previous answer, and comment. This is an issue with old version of tippy (v<3.0).
I just started learning ReactXP and I want to use React-Navigation-https://reactnavigation.org/ in ReactXP. Is React-Navigation is supported in ReactXP? If yes, Then we have any working example?
I found one example but its not working. https://github.com/LeJPR/reactxp-navigation-example
Referring to this link (https://microsoft.github.io/reactxp/docs/extensions/navigator.html) the default way of reactXP is currently not using React-Navigation but might do in the future.
The current implementation of Navigator on React Native makes use of the deprecated “Navigator Experimental”. We will look at moving away from this implementation to the now-recommended “react-navigation” in the near future. Some of the more advanced interfaces may need to change. These are listed at the end of this article. Use these with caution.
I read somewhere in the reactXP issue list on gitHub that your example (https://github.com/LeJPR/reactxp-navigation-example) does not just use react-navigation but had to change the annimation system used in reactXP and seems to not beeing updated anymore.
The core of react-navigation works fine with reactxp, to get it running as is you just need to create reactxp versions of the views used by the different navigator types such as stack/drawer/tab. In doing this though i ran into some challenges with the parity of reactxp animation vs react-native. Unless i'm mistaken it seems there's some quite fundamental limitations with reactxp animation currently - from what i can see you can only have a single interpolation off an animated value (add another and it will overwrite the first), only two values in an interpolation array (as opposed to multiple steps). This functionality is used extensively in the react-navigation views for native like experience. To get around this (driven by a lack of time to consider how to reimplement with reactxp animation) i ended up patching in animatedjs for use on reactxp web navigation views, which provides parity with react-native. Kind of leads me to believe considering animation might be a precursor to react-navigation/more important question. Happy to put up a sample of the above approach to getting react-navigation working with reactxp if of benefit - definitely just for awareness and not production use though!
The example does actually come from this reactXP issue: https://github.com/Microsoft/reactxp/issues/9#issuecomment-303717309
Options I found for Navigation without writing an Extention on your own
contained in reactXP https://microsoft.github.io/reactxp/docs/extensions/navigator.html
also from reactXP team but not in use? https://github.com/Microsoft/react-native-experimental-navigation
an other navigation package I found https://github.com/ymzuiku/react-router-hash-history
Recently I've been setting up a development stack for React using Webpack (new for me) and of course wanted to benefit from all of the shiny conveniences that it provides (which are by the way great!). Among tons of resources I dug on the internet, the particularly good one I found was the React Webpack Cookbook, with which every step went like clockwork. However I stumbled across a hitch that has been taking me several hours to try to solve, not being able to find a solution in the aforementioned page, nor any other source: the expose-loader wouldn't expose React to global scope in Chrome (not tested on other browsers) therefore not allowing React DevTools extension to run. I tried mixing all the steps from the Cookbook, using different versions of React, minified/unprocessed, nothing worked.
The problem was trivial when discovered, but the source of the problem tricky to find: all the time I was using the localhost:8080/webpack-dev-server/ version of my development page, as suggested by the Cookbook, because it allowed me not to bother with the inability to inject <script src="http://localhost:8080/webpack-dev-server.js"></script> into html-webpack-plugin index file generator and provided sort of a nice status bar. It works perfectly since I switched to localhost:8080. Unfortunatelly I wasn't able to make it work with the localhost:8080/webpack-dev-server/ version, though I think it has something to do with the fact that under this url the page is loaded into a frame.