Questions tagged [react-native-animatable]

For questions related to the react-native-animatable library that provides "declarative transitions and animations for React Native".

For questions related to the react-native-animatable library that provides "declarative transitions and animations for React Native".

120 questions
1
vote
0 answers

React navigation: manually change screen with swipe up effect

I have a screen with WebView (react-native-webview) which has scrollable content. If user continues scrolling after reaching the end of WebView, I want to take user to a different screen with a swipe up animation. With WebView's onScroll function…
1
vote
1 answer

How scale up from the bottom of an view in react native?

I want to have an animation scale up with scaleY to fill up a view. The problem is that it starts from the center instead of the bottom. How can I change it so that animation starts from the bottom? const fillAnim = { 0: { transform: [{…
BFP
  • 124
  • 1
  • 9
1
vote
0 answers

How to achieve this animated Flatlist

I want to Flatlist item's size smaller than previous item and when i start scrolling the item size has to be change according position of item list when it comes to first position it should be display item size with actual size of first item of the…
1
vote
1 answer

React native shaking pin view when pin incorrect

i am trying to implement a feature when user enters the wrong password the 4 small circles shake to the right and left. I created an animation component to test my code and it was working but now my problem is how do i apply it only when the…
kd12345
  • 689
  • 10
  • 29
1
vote
0 answers

Animate react navigation bottom tab navigation screen's components on load or when displayed in React Native

I am searching to find a tutorial to implement lazy loading or showing some animation to the screen when bottom nav is routed to another screen(when screen changes) instead of displaying it without any animation. I did not find page transaction…
1
vote
0 answers

How to scale image when image is clicked in React Native

I need to scale the image when image is clicked.And scale back to its original size when clicked again in React Native.
1
vote
0 answers

How could i make pagination with button and swiper in react native

I tried to do with ScrollView and transform and scrollTo but i couldnt figure it out and i dont want to create with react-navigation i want to create a fixed bar at the top and two animated buttons in it and when button touched go second screen and…
1
vote
2 answers

Can Some one explain me "onScroll" with "Animated.event"?

Can someone explain me this react native docs in Animated.event in onScroll? Or just could provide me a link to it's refs, plz. Shouldn't I be passing a function to the onScroll (event) => {Some function}? onScroll={Animated.event( …
1
vote
1 answer

React Native ref is undefined until page reload

I am using refs to animate a View, but the refs are throwing an undefined error. However, if I comment-out my attempt to access the ref, load the page, un-comment the code, & reload the page, the animation works fine. My code: export const…
JosephG
  • 3,111
  • 6
  • 33
  • 56
1
vote
0 answers

React Native Vertical Slider

I am Tring to make a screen in react native in which height of upper view is resizable via dragging from the bottom.enter image description here Size of (1) increases on dragging (2) So far I tried two approaches 1. PanResponder const Chat =…
1
vote
0 answers

React Native Animation Swipe View

How can I do this animation on React native? I would like that when the user makes the gesture of sliding the helmet to the right, it moves to another screen and, when sliding the helmet to the left, it moves to another screen is that simple? Do you…
1
vote
3 answers

How can i display animation on Button when screen is loading in react-native?

How can i display animation on Button when screen is loading in react-native ? I want to apply animation on Button and display it's effect when it is loading in screen.so please help me.How i can achieve this functionality in react-native.
Raghusingh
  • 398
  • 3
  • 10
  • 33
1
vote
0 answers

React-native How to fix a view at some position by using x and y values

I am trying to fix a view at some position that is getting from another screen. tried with transform as given below. but the x position moving wrong
ravi
  • 370
  • 4
  • 11
1
vote
2 answers

React Native - start Animated twice, an error start of undefined

animation = new Animated.Value(0); animationSequnce = Animated.sequence( [Animated.timing(this.animation, { toValue: 1 }), Animated.timing(this.animation, { toValue: 0, delay: 1000 }), ], ); startAnimation = () => { …
1
vote
1 answer

Animated.spring: RCTJSONStringify() encountered the following error: Invalid number value (NaN) in JSON write

I'm trying to create a simple React Native animation: const flexValueForSelected = (selected:boolean) => selected ? 2 : 1; const [flexValue] = useState(new Animated.Value(flexValueForSelected(selected))); useEffect(() => { console.log('changing…
Can Poyrazoğlu
  • 33,241
  • 48
  • 191
  • 389