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
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 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
How can I achieve this effect in react native expo? mainly the navigating from one screen to another and with the screen headers at the top.
You can use react-navigation, for example with createMaterialTopTabNavigator.
here https://snack.expo.io/#nordup/react-navigation-top-nav an example on how to do it.
Then you can customize the headers as you prefer: https://reactnavigation.org/docs/headers
I also found this library that was helpful
https://www.npmjs.com/package/react-native-screens-swiper
enter image description here I'm working with React Native and am looking for an appropriate component for react native data grid. Do you have any recommendation for a data grid under React Native?
I've been using this, works very well.
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?