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.
Related
I've been working with react and react native for a while and there's a library that caught my attention: Preact. I learned it (that being a react developer was not difficult), I did some PWA's to practice (Copying medium-sized projects that I've done in the past) and, if you know what Preact is, it goes without saying my impression. It seems incredible to me. My question is: is there a way to work with react native using Preact? Maybe with preact-compat?
Not out of the box, no. See this discussion from GitHub
The short answer is: use a native wrapper that exposes DOM.
The long answer is that there are woefully few options for this. Some time ago, I had begun building a DOM interface to React Native, but I have no experience with React Native whatsoever and I'm likely not the best person to do that implementation.
I do know that folks have used Preact with NativeScript and had some success: NativeScript doesn't expose a Web-compatible DOM, but its UI primitives are still quite easily mapped to DOM primitives:
https://github.com/staydecent/nativescript-preact
https://github.com/NathanaelA/nativescript-dom/blob/master/src/dom.js
It would also be relatively easy to implement a nativescript-preact using the source of nativescript-vue, which implements a simple DOM on top of NativeScript's UI components that Vue then renders to:
https://github.com/nativescript-vue/nativescript-vue/tree/master/platform/nativescript
It's also worth noting that preact-compat is the legacy package, used for Preact 8.x and prior. preact/compat is where you'd get compat going forward.
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
I am wanting to render a short piece of animation on the splash screen of my CN1 app but am struggling.
The Lottiefiles website contains a lot of good animation content, but the closest example i can find to using it is within XCode. I have the downloaded JSON file, of the animation, but am wanting to know if anyone has figured a way of incorporating into a CN1 Java app?
I can see that developers have used in Java, but CN1 wouldn't allow the LottieAnimationView component on it's layout manager i would guess.
https://steemit.com/utopian-io/#fahrulhidayat/beautiful-animation-for-android-application-using-lottie-library
Any pointers appreciated. Thanks
The "right way" would probably be to wrap the native implementations for the various OS's in a cn1lib so you can use lottie in a cross platform way. There's a long tutorial about wrapping native code in the developer guide and Steve did a 3 part video series on the subject a few years back: https://www.codenameone.com/blog/integrating-3rd-party-native-sdks-part-3.html
It's mostly mechanical so it shouldn't be too hard. If you want to take a shortcut you can probably use the web version of the API in a BrowserComponent and call it a day.
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
I know this isn't a specific code question, but I have asked in a lot of places and haven't gotten a completely clear answer. I'm hoping SO can help me.
I'm about to start a moderately complicated React Native project for both iOS and Android.
I'm confident the whole app can be built just fine with RN or a mix of RN and native code.
The one thing I want to make 100% sure of before I start, is that there won't be any problems or hangups with any advertisement SDK (tremor media, bright roll, flurry, tap joy, etc, etc).
I'm ok with having to code them in pure native code, so long as there are no conflicts which RN might introduce which would make it flat out incompatible/impossible to have (probably intricate) ad SDK implementations.
Thanks!
I wrote admob wrapper for RN, If you want to admob please check this out: melihmucuk#react-native-admob-sample
If you want to others, you should find wrapper or write yourself.
I’ve been doing some digging on this myself. And here is what I've found so far.
AdMob: Supported and verified
I managed to make this work. In terms of dependency, AdMob requires FireBase. But FireBase does not support React Native out of box. I used a wrapper called React-Native-Firebase to make it work. https://rnfirebase.io/
https://firebase.google.com/
https://dev-yakuza.github.io/en/react-native/react-native-admob/
FB Ads: Supported
I haven’t verified it myself. But it seems to be well documented. (And React Native being related to Facebook, I’d be surprised if it weren’t supported.) https://www.npmjs.com/package/react-native-fbads
Flurry: NOT supported
Flurry Analytics supports React Native but Flurry Ads do not. Below is message from their support team when I asked them about this.
"Thank you for contacting Flurry Technical Support. We offer a React Native wrapper, however it does not currently support ads, only analytics. You can read more about it here: https://developer.yahoo.com/flurry/docs/integrateflurry/react-native/ "
MoPub: Not really
I’ve found two React Native wrappers. One is old and no longer updated. (The authors seem to be actively monitoring the discussions and replying to queries. But they are no longer providing tech support.) And the other is very new and doesn’t seem to have enough documentation or evidence that it actually works.
https://www.npmjs.com/package/react-native-mopub
https://www.npmjs.com/package/react-native-mopub-sdk