Skip to content

Commit

Permalink
Blog - Background color is not supported by the native driver
Browse files Browse the repository at this point in the history 
Summary:
This was a lie, background color is not supported (yet). Sorry for the false hopes :)

Fixes #14178
Closes #15013

Differential Revision: D5424676

Pulled By: hramos

fbshipit-source-id: ea592bf633f1632c931a9f18fe2fa9ebad6136be
  • Loading branch information
@janicduplessis @facebook-github-bot
janicduplessis authored and facebook-github-bot committed Jul 14, 2017
1 parent ad9b66f commit ccb4e67
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion blog/2017-02-14-using-native-driver-for-animated.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ After:

## Caveats

Not everything you can do with Animated is currently supported in Native Animated. The main limitation is that you can only animate non-layout properties, things like `transform`, `opacity` and `backgroundColor` will work but flexbox and position properties won't. Another one is with `Animated.event`, it will only work with direct events and not bubbling events. This means it does not work with `PanResponder` but does work with things like `ScrollView#onScroll`.
Not everything you can do with Animated is currently supported in Native Animated. The main limitation is that you can only animate non-layout properties, things like `transform` and `opacity` will work but flexbox and position properties won't. Another one is with `Animated.event`, it will only work with direct events and not bubbling events. This means it does not work with `PanResponder` but does work with things like `ScrollView#onScroll`.

Native Animated has also been part of React Native for quite a while but has never been documented because it was considered experimental. Because of that make sure you are using a recent version (0.40+) of React Native if you want to use this feature.

Expand Down

4 comments on commit ccb4e67

@fabriziogiordano
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@janicduplessis great work.

One question. Usually on web is better to animate elements with translate than with position.

It seems similar on react native where we can achieve the same effect of position change with a transform translate.

However my question is: it seems too simple that it feels there is a catch :) Is there a catch? eg. transform translate a view will not support something.

@janicduplessis
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For position based animation it can pretty much always be replaced by a translate transform, the only thing that is ususally harder to do with transforms is animating things like height or width. In those cases it is usually easier to use something like LayoutAnimation.

@fabriziogiordano
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you @janicduplessis I wonder if https://aerotwist.com/blog/flip-your-animations/ can be applied also in react native context.

@janicduplessis
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should be possible to apply a technique similar to that, the only thing that makes it a bit harder is that getting the layout of a view is async.

Please sign in to comment.