oblador/react-native-animatable

Standard set of easy to use animations and declarative transitions for React Native

react-native-animatable's Issues

Speed of rotation?

@oblador Thank you for your great library!

Is there any way to control the speed of rotation of an icon to slower/faster via a prop? I am trying to slow down a fast rotating icon ;-)

onAnimationBegin? :)

Can I ask that :) thanks

slide control not smooth

I tried on simulator iphone 5.
The slide control increase & decrease not smooth when I drag it forward then back again multi time.

Example code

Hi,

First off all, love the react-native-animatable library!
But I am having some problems. I am trying to run the example code

            <TouchableWithoutFeedback onPress={() => this.refs.view.bounce(800).then((endState) => console.log(endState.finished ? 'bounce finished' : 'bounce cancelled'))}>
                   <Animatable.View ref="view">
                     <Text>Bounce me!</Text>
                   </Animatable.View>
                 </TouchableWithoutFeedback>

But I get this error:

I am using v.0.5.2. Do you have any clue whats wrong?

this._slide is not defined (DedicatedWorkerGlobalScope instead of "this" in imperative api)

Calling something like myref.slideOutDown(500) used to work very nicely, but since upgrading to RN 0.30 I'm getting this issue:

Changing slideOutDown like this fixes the issue:

    slideOutDown = (duration) => {
      return this._slide(duration, 'out', 'down');
    }

Is there something in the way that I'm calling slideOutDown that causes this issue that I could change? Should I open a PR that changes these public functions as I did above? Thanks!

flattenStyles polyfill react-native 0.14.2

This looks pretty awesome, but I am having an issue getting the flattenStyles polyfill. Finding it/using it. My guess is the package manager changed between 0.13-and-0.14. Any suggestions are appreciated. doing a require('flattenStyles') throws an error.

With any luck, this will be the animation tool for subschema-native just started working on.

Anyways, thanks for the library hope I can get it working.

-Justin

FR: Animate on unmount

Hey, I've been looking for something like this so may use it as a starting point! What'd be really cool is if we can define both in and out transitions, this would be particularly good for list views - having them do something more interesting on unmount.

Looking at the current setup this would mean animationIn / animationOut would probably be passed in as an object.

ios 7.1.1 : TypeError undefined is not an object evaluating originalConsole[methodName]

I tried on real device - iphone5

would using shouldComponentUpdate instead of componentWillReceiveProps give performance increases?

For example, if transitions were triggered from shouldComponentUpdate, but it returned false, preventing any re-renderings of children, and only triggering transitions, wouldn't that increase performance greatly over using componentWillReceiveProps along with various internal states?

I know the way the component currently works relies on using its own state--so another way to ask this is: does using componentWillReceiveProps result in re-rendering of children (or additional tree parsing) even if the props passed to the children don't change? Or is React smart enough to stop not just virtual dom rendering but also parsing your react components who didn't receive any different props from parents?

It seems shouldComponentUpdate wouldn't exist if React wouldn't otherwise attempt to parse children (at least in some cases). And if that's the case, animation performance in the current implementation suffers from not making use of shouldComponentUpdate to stop propagation of updates that were solely intended to declaratively trigger animations of the Animatable parent component.

warnings fire in React Native Web for passing props not supposed by View, and callbacks dont fire

for example:

Warning: Unknown propseasing,iterationCount,onAnimationBeginon <div> tag. Remove these props from the element.

In addition, the onAnimationBegin/End callbacks don't fire.

Works nicely otherwise. I assume the callbacks don't fire for some reason having to do with passing props that aren't supported by View/Text/Etc.

Sorting animations

Is there a plan for sorting animations?

won't work RN 0.29

it won't install because of UNMET PEER DEPENDENCY react-native 0.29.0

onAnimationEnd/endState for transitionTo

How can I call an event when transitionTo is completed? Thanks

react-native-router-flux

If I use animations on a component that is routed to from a react-native-router-flux schema and then route to another and close it, the animations remain in their initial state. e.g. for zoom in they remained zoomed out. Just to reiterate: the problem only occurs when closing after routing to a component -and the problem then occurs on the previous component routed from. It works fine when routing to components

upgrade to 0.6.0 give not defined error (evaluating _reactNativeAnimatable2.default.text...)

Upgrade to v0.6.0 (because of RN 0.25+) gives Error

• not defined error (evaluating _reactNativeAnimatable2.default.text...)....
• going back previous version removes the error.

My code (it may not be relevant but in case):

import React            from 'react';
import {
  StyleSheet,
  View,
  Text
}                       from 'react-native';
import { AppColors }    from '../../../common/config';
import Progress         from 'react-native-progress/Bar';
import Animatable       from 'react-native-animatable';

const Loading = () => {
  return (
    <View style={styles.container}>
      <View style={styles.loadingContainer}>
        <Animatable.Text
          animation="pulse"
          easing="ease-out"
          iterationCount="infinite"
          style={styles.loadingMessage}>
          Loading...
        </Animatable.Text>

NativeAnimated ?

Hey there !
I haven't been following the Animated API too closely, but from what I gathered looking at the RN repo, and correct me if I'm wrong, it looks like the API now has a native driver for each platform.

Maybe it's too soon, but react-native-animatable could probably take advantage of this. See useNativeDriver: true

Has anyone tested these new features ?

How can I do this?

http://codepen.io/oknoblich/pen/vfJxr

Could not invoke RKTiming.createTimer

I kept image running over night but found an error occur:
Could not invoke RKTiming.createTimer
I am not sure this is react-native animated's issue or not.

Partial Code: I set iterationCount to infinite

And I also found that java heap keep increasing and does not release after error occur until I turn off AP, here is today's memory information: (Original Java Heap: 5648)
$ adb shell dumpsys meminfo my_app_name
Applications Memory Usage (kB):
Uptime: 1207911780 Realtime: 1207911768

** MEMINFO in pid 28821 [com.acer.android.cybertool] **
Pss Private Private Swapped Heap Heap Heap
Total Dirty Clean Dirty Size Alloc Free
------ ------ ------ ------ ------ ------ ------
Native Heap 18640 18560 0 0 33344 23223 10120
Dalvik Heap 188011 187860 0 0 194857 193459 1398
Dalvik Other 5329 5328 0 0
Stack 2940 2940 0 0
Ashmem 2 0 0 0
Gfx dev 7500 7364 0 0
Other dev 5 0 4 0
.so mmap 9071 484 5392 0
.apk mmap 332 0 4 0
.ttf mmap 101 0 20 0
.dex mmap 7376 8 7064 0
.oat mmap 2091 0 484 0
.art mmap 1158 732 4 0
Other mmap 173 8 100 0
EGL mtrack 39040 39040 0 0
Unknown 72617 72616 0 0
TOTAL 354386 334940 13072 0 228201 216682 11518

App Summary
Pss(KB)
------
Java Heap: 188596
Native Heap: 18560
Code: 13456
Stack: 2940
Graphics: 46404
Private Other: 78056
System: 6374

           TOTAL:   354386      TOTAL SWAP (KB):        0

Objects
Views: 151 ViewRootImpl: 1
AppContexts: 2 Activities: 1
Assets: 3 AssetManagers: 2
Local Binders: 14 Proxy Binders: 19
Parcel memory: 7 Parcel count: 28
Death Recipients: 0 OpenSSL Sockets: 0

SQL
MEMORY_USED: 99
PAGECACHE_OVERFLOW: 24 MALLOC_SIZE: 62

DATABASES
pgsz dbsz Lookaside(b) cache Dbname
4 20 24 30/21/3 /data/user/0/com.acer.android.cybertool/databases/RKStorage

How to Draw circle animations?

Trigger animation manually

Hi, I would like to ask, whether it's possible to start/trigger the animation manually?
If so, which method can be used, because I couldn't find it in docs...

SlideInLeft continuously shorter distance

I am trying to have my chevron slide back and forth. I am using animation="slideInRight" direction="alternate" duration={2000} iterationCount='infinite' but the distance that it travels is quite long. Is there a way to cut it down to be less drastic?

I know you can change
const animationValue = getAnimationValueForDirection(direction, originOrDestination, size.height, size.width); but is there a way to pass that in somehow

Animate Color of an Icon

Bit of an extreme case but would be useful to be able to do this but I can't wrap an Icon like so and make it work

MyIcon = Animatable.createAnimatableComponent(Icon);

but even if I could how could you animate the <Icon color=... attribute? instead of the style like the docs mention? Also, I have to wrap it like so to make it work so I can't access the child styles anyway.

const ApplyCheckWhite = (
        <Icon
            name="ios-checkmark-circle-outline"
            size={85}
            color="rgba(255,255,255,1)"
            style={Styles.checkWhite} />
    )
    ...
            <Animatable.View ref={(row) => this.whiteChecks[i] = row}>
                { ApplyCheckWhite }
            </Animatable.View>

Is it Android compatible?

It seems it's not compatible with Android. What could I use instead?

bounce animation inputRange/outputRange values

I noticed the input range has a very small increase of 0.03 between 0.40 and 0.43 and that the corresponding output range of -30 doesn't change.

Is this necessary or can 0.43 and one of the -30 be removed?

bounce(duration) {
  return this.animate(duration, {
    transform: [{
      translateY: this.state.animationValue.interpolate({
        inputRange: [0, 0.2, 0.4, 0.43, 0.53, 0.7, 0.8, 0.9, 1],
        outputRange: [0, 0, -30, -30, 0, -15, 0, -4, 0],
      }),
    }],
  });
}

Help: Animation Sequence

Sorry to open an issue for this.. I would like to animate a basic sequence of moving a text component around with some delay between the animations. I know how to move the text from A to B, but couldnt figure out a "nice" way to move it from B to C...Is there a component from animatable I can use or am I supposed to make a new object for the second animation?

thx for hints!

Can't find variable: times when using shake animation

Hi,
Recently, I am trying to implement a shake animation using react-native-animatable. It works fine when I set the animation as 'bounce'. However, it would throw an exception while I was trying to use 'shake' animation. it would say 'Can't find variable: times', and the error show on index.js 536. Any Idea about that? Thank you very much.

Animatable and Navigator.NavigationBar

Even thought I understand it's probably not something the creator wanted to support in developing this library, I have a question. I want to animate my navabar, disappearing on scroll down and appearing back on scroll to top. I made a basic script to just make it disappear, and it works great, but when it's time to animate, there's nothing I can do to make it work.

This is the code of my navigator:

<Navigator
      ref="navigation"
      initialRoute={this.props.initialRoute}
      onWillFocus={(route, navigator) => this.onWillFocus(route)}
      configureScene={(route, navigator) => this.configureScene(route)}
      renderScene={(route, navigator) => this.renderScene(route, navigator)}
      navigationBar={
        <NavigationBar
          routeMapper={TopBar(this.config)}
          style={styles.navBar}
          visible={this.state.topBarVisible}
        />
      }
      />

And this is the extension of the Navigator.NavigationBar:

class NavigationBar extends Navigator.NavigationBar {
    render(){
      if(!this.props.visible){
        return null
      }

     return super.render()
    }
}

And this works great, as I said, but it's not exactly what I'm looking for. I'd like to make this transition by using React native Animatable, so I wanted to make something like this, but it will render nothing.

class NavigationBar extends Navigator.NavigationBar {
  render(){
    return (
      <Animatable.View (or whatever) ...>
          {super.render()}
      </Animatable.View>
    )
  }
}

Any suggestions to make it work? Thank you very much in advance.

Object support

Allow for multiple transitions on a component

transition={{'fontSIze', 'color'}}
transitionValue={{this.state.fontSize, this.state.color}}

size.height is undefined in _getSlideTransformation (ios device only)

Thanks for putting this module together. It's super useful.

I just encountered a weird bug that I wanted to let you know about. It may be an edge case, so feel free to close this.

Specs: ios9.1, react-native 0.14.2, actual ios device (simulator works fine)

Running a scene with 15 animations triggers a crash with an undefined size.height variable in _getSlideTransformation

I've fixed this in my code by defaulting the size variable in line 742 of index.js to Dimensions.get('window') in the undefined case. Since making this change, the bug disappears and everything works fine.

The ternary in line 742 seems to cause the problem when evaluating to this._layout. I think this may have something to do with how _layout is handled in react native. Per ide on stackoverflow, "the main caveat is that the onLayout handler is first invoked one frame after your component has mounted". It could be that this is causing the problem.

Thanks in advance. All the best.

FR: Chainable Animations

Feature Request:

Would be really great to be able to chain animations. e.g. Something slides in and then fades out.

someComponent. bounceInDown(200).fadeOut(200)

At the very least there should be a way to run some kind of code when an animation is completed. As of right now some views (like those faded out) are still blocking UI interaction. This could be solved by giving us a hook at the end of the animation.

someComponent.fadeOut(200).end( () => {console.log('finished')} )

onAnimationEnd never triggered when iterationCount is greater than 1

That pretty much sums it up. Here's a PR: #15

Animate on appending text to list and flipping icon

Is there a way to animate when I tap and add an extra letter to a String? Such as, have it come in from the top

Also, is there a way to apply transition='rotate' that is a react-native-vector-icon but not a string so that when the name changes, such as for from chevron-right to chevron-left it rotates around?

Infinite image rotation.

I'm trying to animate the rotation of a wheel, it doesn't work. I did:

() => this.refs.firstWheelWrapper.transitionTo({transform: [{rotate: '90deg'}]}, 60000);

Any idea?

multiple transitions

Great project! How would I add multiple transitions to a component? i.e., I want an Animated.Image to have a transition={['width', 'height']} transitionValue={[this.state.width, this.state.height]}

How would you suggest going about this, or is this something that can be easily added to the project?

Thanks!

Parse errors in imported module 'react-native-animatable': Unexpected token = (167:22)

Using v. 0.6.1

My linter looks like this:

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:import/errors",
    "plugin:import/warnings"
  ],
  "plugins": [
    "react"
  ],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true,
    "jquery": false,
    "mocha": false
  },
  "settings": {
    "react": {
      "pragma": "React",
      "version": "15.0"
    }
  },
  "globals": {
    "fetch": false,
    "alert": false,
  },
  "rules": {
    "quotes": 0,
    "no-console": 1,
    "no-debugger": 1,
    "no-var": 1,
    "semi": [1, "always"],
    "no-trailing-spaces": 0,
    "eol-last": 0,
    "no-unused-vars": 0,
    "no-underscore-dangle": 0,
    "no-alert": 0,
    "no-lone-blocks": 0,
    "jsx-quotes": 1,
    "react/display-name": [ 1, {"ignoreTranspilerName": false }],
    "react/forbid-prop-types": [1, {"forbid": ["any"]}],
    "react/jsx-boolean-value": 1,
    "react/jsx-closing-bracket-location": 0,
    "react/jsx-curly-spacing": 1,
    "react/jsx-indent-props": 0,
    "react/jsx-key": 1,
    "react/jsx-max-props-per-line": 0,
    "react/jsx-no-bind": 1,
    "react/jsx-no-duplicate-props": 1,
    "react/jsx-no-literals": 0,
    "react/jsx-no-undef": 1,
    "react/jsx-pascal-case": 1,
    "react/jsx-sort-prop-types": 0,
    "react/jsx-sort-props": 0,
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1,
    "react/no-danger": 1,
    "react/no-did-mount-set-state": 1,
    "react/no-did-update-set-state": 1,
    "react/no-direct-mutation-state": 1,
    "react/no-multi-comp": 1,
    "react/no-set-state": 0,
    "react/no-unknown-property": 1,
    "react/prefer-es6-class": 1,
    "react/prop-types": 1,
    "react/react-in-jsx-scope": 1,
    "react/require-extension": 1,
    "react/self-closing-comp": 1,
    "react/sort-comp": 1,
    "react/wrap-multilines": 1
  }
}

Is there a specific attribute I am setting that's causing this? The error itself does not hinder the plugin from working.

Ability to delay transitionTo

Is there a way to set a delay for transitionTo? Similar to animation-delay in css?
Thanks.

Animatable.Text wraps vertically at edge of display

I would like to slide in Text from the right edge of the screen to the middle.
The problem is that the text reformats to fit the screen, which I clearly don't want. At the moment I generated an image from the text and that works fine.. I'm wondering if there's a better way.

Can fadeOut animations have a delay?

I'm kinda goin crazy here

FlipOutY acting weird

When flipping a "card" View on the screen, instead of smooth flipout, it starts with a small flipout in one direction and then flipouts in the opposite direction and disappears..This doesn't look good..
I think the reason is this line:
https://github.com/oblador/react-native-animatable/blob/master/index.js#L751
Is it intentional, or a bug?

Callback on Animation finished & React Native animated exist discussion

Hey Joel, awesome work here!

I am doing this sharing sheet modal

I was mounting this component using

`.... { this.state.shouldShareIt && ``

Everything is find for entrance animation, but the tricky part (we should discuss) is the delete/exit part.

Using that pattern, the component would be ripped out as soon as this.state.shouldShareIt is false.

So far what I did is to toggle ``bounceInUp/bounceOutDown` but this always renders the modal even when it is hidden off-screen-bounds.

The first thing we need to start thinking for some solutions is at least a callback for when animations are done, did I miss this property?

Would love to hear your thoughts on this. I know the core team of RN has some discussion on this issue for LayoutAnimations and the issues are still open (specially for animation of deleted elements which are not currently handled)

Best

Question: black background

Hi, I'm playing around with this a bit and I'm noticing that before the animation starts, the background becomes black. I would prefer transparent. Is this possible?

Animatable is broken after upgrading React to 0.26.0-rc

I've upgraded React-Native to version 0.26.0-rc . Now when i try using Animatable.View , I'm getting this error:

undefined is not an object (evaluating '_reactNativeAnimatable2.default.View')

transitionTo not working?

I updated to version 0.5 from 0.3, and it seems the transitionTo function stopped working, whatever I tried. Like in the readme: this.refs.text.transitionTo({opacity: 0.2});

The error I keep getting is: "Cannot read property 'stopTracking' of undefined"

The error seems to occur on line 424 in index.js (line 459, 424 and 420 are referenced in the error)

If I replace it with a simple this.refs.text.fadeIn(600) or something, it works fine, but I have a lot of specific animations.

I think I've tried updating to 0.4 earlier with the same results. So I downgraded back to 0.3.

[Android] Animatable.View cannot transition Opacity

I am trying to fade an Overlay in and out over scene content. The below code works perfectly on iOS but will not show the overlay on Android. Thoughts?

import * as Animatable from 'react-native-animatable';

...

<Animatable.View
              pointerEvents={condition ? 'auto' : 'none'}
              style={{
                opacity: condition ? 1 : 0,
              }}
              transition="opacity"
>
  <Text>This transitions properly on iOS, but not Android. Bug?</Text>
</Animatable.View>

Animate on unmount

Hi there,

Just started using this library and it's great! I was wondering what's the best way to animate on unmount. I have a <ListView> with items that get filtered in and out. They get mounted and dismounted dependent on the filter and I'd like items that are going to be dismounted to be animated out. Any ideas how this could be done?

Thanks,

jeff

Move Image to certain position.

How can i move/translate Image to certain X or Y value/position?

in and out animations

I cannot find any documentation on how to animation both the entrance and exit of a component.

Combine animation props?

Is there any easy way that I'm missing to combine animations on a single element?

For example, to rotate an element and pulse it at the same time, both with their own timing properties, both infinitely.

I'm assuming I need to go back to using RN's Animate, correct?

undefined is not an object (evaluating 'PropTypes.string')

After upgrading to RN 0.27.2, React 15.1.0, and react-native-animatable v0.6.1, I get the following error: undefined is not an object (evaluating 'Proptypes.string')

Animatable.TouchableOpacity | WithoutFeedback | Highlight

I really think these should be included by default, as you cannot wrap them with

TouchableOpacity = Animatable.createAnimatableComponent(TouchableOpacity);

as you'll get an error about the component being read-only.

I'm aware that you can wrap your Touchable's in an Animatable.View however, when your parent has the animation already, the nest becomes really complicated and messy, for example if you wanted to have an animation on a click event that changed styles, but slide the component in on load, and slide the component out when another event happens.