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.
Related
I want to achieve this effect in react-native, Is there a component that achieves this or can this can be done using Animated View ?
I want to only to create the custom tab component, with this sliding animation when switching between them
If you mean TopTabs and use react-navigation to navigate around your app you can use the TopTabNavigator from react-native. Otherwise this can be done with React Animated
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 want to create a time duration component for a camera view like this in react native (please see the image below).
Is there a library that I could use if not, can you help how could I do it? Thanks in advance.
Just to answer this question since I manage to solved it.
I used React Native Snap Carousel to make it work.
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?