Stack Overflow
Stack Overflow

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

this.props.position.interpolate is undefined and not a function

I have a component which has a scrollview class DiscoverThings extends React.Component { state = { scrollY: new Animated.Value(0), }; onPageScroll = ({ nativeEvent }) => { Animated.event( [{nativeEvent: {contentOffset: {y:…
Aayushi
  • 1,736
  • 1
  • 26
  • 48
1
vote
0 answers

Unregister interpolated animated value

Is there a way to unbind an interpolated value and animate it on its own? this.dragX = this.translateX.interpolate({ inputRange: [0, 75], outputRange: [0, 75], extrapolate: 'clamp', }); In some function, I want to animate the…
Matthias
  • 53
  • 5
0
votes
0 answers

Adding an Animated Heart Icon to Current Button

I am making an animated heart icon in my react native app. Currently, I have a generic Button which accepts an icon prop, letting it display an icon:
713sean
  • 313
  • 11
0
votes
0 answers

Custom slide to unlock component in react native not moving in opposite direction

I was trying to edit a module source code which is as follows: import React, {Component} from 'react'; import {View, PanResponder, Animated} from 'react-native'; import PropTypes from 'prop-types'; export default class Slider extends…
FortuneCookie
  • 1,756
  • 3
  • 25
  • 41
0
votes
0 answers

React native change ternary operator render to animation

So I use a ternary operator to open and close a simple sidebar. But I want to change it to a tiny animation where the sidebar grows from the left side of the screen. This is my code right now: {isExpanded ? …
JUNSKI
  • 17
  • 4
0
votes
1 answer

reactive animation value that not of the style type react native reanimated-2 (SVG props)

I am working with ReactNative-reanimated-2 I want to make an animation with an SVG path at color properties I know how to do it in style properties with useAnimationStyle but how can to do that with non-style properties like SVG prpos like…
Yoel
  • 7,555
  • 6
  • 27
  • 59
0
votes
1 answer

How to animate button sliding right and sliding left in react native?

Hi everyone today i am trying to add an animation in my react native project and i wanted to make my right button slides left and my left button slides right . i would like to do a smooth slide it will be awesome can you help me?. here is my…
greta calamari
  • 71
  • 6
0
votes
0 answers

How can I drop/hide the bottom sheet when dragged below a certain coordinate?

I have this piece of code: onPanResponderRelease: (e, gesture) => { if (gesture.dy > 155) { Animated.spring( this.state.panBottomModal, { toValue: { x: 0, y: 0 }, …
showtime
  • 1
  • 1
  • 17
  • 48
0
votes
0 answers

How to animate style of buttons(TouchableOpacity) in react native

Code below working as expected, all I need when click other button, it should animate the change of background color(active item is light-blue). Default background color of buttons is gray(shade04), when its clicked I need it to fade backgroundColor…
TrypicalDev
  • 101
  • 8
0
votes
1 answer

React Native how to make human body outline figure

I will working on a body editing app.I Want to create a human body just like in the below image: This figure will make on the user input like the user will input his height,weight,waist,arms,thighs and according to that measurement the figure fill…
Harsh Kumar
  • 29
  • 4
0
votes
1 answer

What is the best method of adding onPress animations to React Native Typescript projects?

I've tried using "react-native-animatables" to create animations and it works, but I cannot figure out how to implement it to work onPress. Here's what i've tried so far. ... const flip = { from: { rotateY: false ? '0deg' : '180deg', …
Rithwik Babu
  • 104
  • 1
  • 6
0
votes
1 answer

Error while animating rotateX in react native

I am trying to rotate an icon on press of a button in my react native application. But I am getting this error: Error while updating property 'transform' of a view managed by: RCTView This is the Icon itself:
Pro
  • 445
  • 4
  • 14
0
votes
1 answer

How to create a life line on React Native

I'm trying to create a lifeline animation on React Native, I've looked into some animation libraries but didn't find, any idea on how to do it?
Daniel Döbereiner
  • 119
  • 6
0
votes
0 answers

How to Hide/Reveal a Sticky Header when scrolling react-native

I have implemented this using Animated library in native react-native where I interpolate when I am scrolling. The problem is it is very laggy on ios and somewhat laggy on android. Is there a library or a better way to do this header hiding when…
SDB_1998
  • 305
  • 5
  • 18
0
votes
1 answer

How to get current slide position or number in react-native flatlist

Hy, I'm creating a slider in react-native. It works perfectly. It having three slides on scrolling. I done this using Animated.FlatList and scrollX. But One thing I'm not getting is how I can know which slide is currently displaying. I want to…
Adil Ijaz
  • 95
  • 11
1 2 3 4 5
6
7 8