I have a simple image gallery where paging is enabled(vertical scrolling not horizontal) it is working correctly in ios however on android it is not working I read the react-native docs where they explicitly mention pagingEnabled not supported on android if horizontal is set to false. I want a workaround or third-party library to accomplish this. I'm using FlatList and expo45 by the way. Thanks for any suggeestions.
Related
I am beginner in React native and I want to implement the horizontal scrolling list like this.
Design. Can anyone let me know about the references/libraries that I can use to design this in React Native Expo.
You can use snap carousal, or FlatList with snapping enabled
I am looking for a way to create an animated Splash Screen in React Native project using Expo.
I found Lottie as a solution, but the only info I can get about it is about the animations within the app itself - is there ANY possible solution that would allow a creation of an animated splash screen with Expo? For now, I have only a static png file.
There is an example provided in the Expo docs here:
https://github.com/expo/examples/tree/master/with-splash-screen
Although it's technically not an animated splash screen, but a way to automatically hide the static splash screen (which would be the first frame of your animation) and then immediately switch to playing the animation once the app is loaded. I'm doing it this way and it works well enough.
This NPM module seems to work in a similar fashion so maybe you could use that
https://www.npmjs.com/package/react-native-animated-splash-screen
But it's still not a native animated splash screen which I don't think is possible using even vanilla React Native let alone Expo.
Here I am using this module for custom animated splash screen using expo react native project. I hope it will work for you too.
Here is the module link: click here
Let me know if you need any other help.
How can we justify text in react native for both android and iOS without using webView, since webView is not visible in android after placing it inside another view.
The following option only works for iOS.
textAlign='justify'
https://facebook.github.io/react-native/docs/text.html#style
As it s written here, justify for android is not available... Most of the tricks suggest to use left or then a webview as you said...
Using webView resolved the issue. To show webView inside the ScrollView I just had to add height to webView.
https://github.com/jsdf/react-native-htmlview/issues/7
React Native Victory charts : onPress or onPressIn is not triggered in android. however it is OK in iOS.
Can anyone help me regarding this.
I found out (by reading other stackoverflow issues addressing similar problems) that wrapping the whole VictoryChart in an <Svg>...</Svg> solves this issue on Android and on the other hand keeps the onPress functionality on iOS. The only thing I realized on top was that I had to give the Svg a style={{height: XXX}} where XXX is the same height than the VictoryChart has. Otherwise the wrapping Svg would be gigantic high.
I'm working on a react native app which works with a lot of animated GIFs.
I've tried using the react native documented library com.facebook.fresco:animated-gif:1.3.0 for animated gif support, yet, the performance of the default Image component is terrible, but using FastImage package I am able to get, at maximum, 10 gifs.
As there is the possibility of integrating the native libraries in React Native, I was wondering what could a solution to this problem?
I've tested a couple ways to increase the performance of loading multiple animated GIFs in React Native:
The better format for animated pictures is webp (Why?). Once compressed, it can be around 90% more lightweight to be loaded whether in your web app or your mobile app.
Facebook's Fresco library which is the documented recommended library for rendering gifs and webp files should be upgraded as it provides a better performance for multiple gif loading, and also the original fresco library should be added as a dependency - at the moment, to at least, 1.5.0 or higher, if possible w/ react-native:0.54 -.
FlatList can be optimized to remove anything that is not on the screen using removeClippedSubviews prop. Alternatively, there are third-party libraries such as recyclerlistview or lazy loading lists out there.
Using fast-image for caching can also be advantageous in some cases.