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
Related
Is it possible to achieve this kind of animation for custom control in React Native using reanimated and SVG?
yes. you can achieve this with Lottie animation. this is the package for this. lottie-react-native. you can find some sample animation here. for ask your designer to design a custom animation like this.
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.
I want to achieve the flipping transition between pages in ScrollView, just like it's done in iBooks reader. I looked at the docs for ScrollView but didn't see how it can be achieved. Is this something that's achievable? How? Thanks in advance.
It can be achieved with Animations in React Native, You can read more about in the React native Animation docs.
You can achieve transition, rotation as you need it.
Below link contains an example for ScrollView with Animation.
https://reactnative.dev/docs/animations#scrollview-with-animated-event-example
I am new in react native , I want to scroll the image continuously top to bottom and vice-versa in react native.
We can scroll image in html using marquee tag.
E.g.,
<marquee behavior="scroll" direction="up">
<img src="../t1.png"/>
</marquee>
Similar thing I want to achieve in react native.
Is it possible in react native or not ? I don't know how.
Can any one guide me?
Thanks.
use react native animated api. it is possible with it.
try this --- https://medium.com/react-native-training/react-native-animations-using-the-animated-api-ebe8e0669fae
Prelude to the Question:
I am planning to create a super simple SVG editor in React Native, with the following features:
add a new circle to the SVG
resize the circle
move the circle around
remove the circle.
What is not clear, how can I react to SVG events in React Native. (Is an SVG event the same as a DOM event (for React Native) ?)
I Googled "svg editor react native", "svg react native events" and I found:
https://github.com/magicismight/react-native-svg, it seems that it does not have support for events.
https://github.com/brentvatne/react-native-svgkit , also, does not support events yet (has it as plan though).
The Question:
If the user taps or drags the circle in an SVG, how can I react to that event in React Native?
EDIT1:
Further Googling indicates that SVG is not supported in React Native (yet).
Would it be easier to just use SVG + ReactJS + Cordova to accomplish this goal (i.e. write a simple SVG editor using React and deploy it to a mobile phone)?
EDIT2:
After some more Googling, it seems that http://reapp.io/ is the simplest way to go.
https://github.com/magicismight/react-native-svg, it seems that it does not have support for events.
It sure does, e.g.
<Circle cx={10} cy={10} r={20} onPress={()=>{console.log('pressed')}}/>
Check the PanResponder example for more complex touch handling such as dragging.
After some more googling, it seems that http://reapp.io/ is the simplest way to go.
But from what I can tell that isn't React-Native, right?