Summary:
List components aren't host components so checking if the direct component itself's internals isn't sufficient to know if we are in Fabric. For lists, we have to call through some helper functions to get to the host component.
Hopefully we will fix this in the future by making the lists use forwardRef, or by getting rid of the JS Driver altogether, but for now, this is fine (TM).
Changelog: Internal
Reviewed By: mdvacca
Differential Revision: D19731067
fbshipit-source-id: 0e73583c6bf7c10de30e668a390d29718d31b295
Summary:
We are rolling out exact-by-default syntax to xplat/js.
I had to manually move around some comments to preserve proper placement.
Changelog: [Internal]
Reviewed By: jbrown215
Differential Revision: D18633611
fbshipit-source-id: 48f7468dcc55b1d00985419d035a61c6820b3abe
Summary:
There are some cases where restoring default values on component unmount is not desirable. For example in react-native-screens we want to keep the native view displayed after react has unmounted them. Restoring default values causes an issue there because it will change props controlled my native animated back to their default value instead of keeping whatever value they had been animated to.
Restoring default values is only needed for updates anyway, where removing a prop controlled by native animated need to be reset to its default value since react no longer tracks its value.
This splits restoring default values and disconnecting from views in 2 separate native methods, this way we can restore default values only on component update and not on unmount. This takes care of being backwards compatible for JS running with the older native code.
## Changelog
[General] [Fixed] - NativeAnimated - Don't restore default values when components unmount
Pull Request resolved: https://github.com/facebook/react-native/pull/26978
Test Plan:
- Tested in an app using react-native-screens to make sure native views that are kept after their underlying component has been unmount don't change. Also tested in RNTester animated example.
- Tested that new JS works with old native code
Reviewed By: mmmulani
Differential Revision: D18197735
Pulled By: JoshuaGross
fbshipit-source-id: 20fa0f31a3edf1bc57ccb03df9d1486aba83edc4
Summary:
Updates the return type of `createAnimatedComponent` to reflect the new behavior (where we forward the ref to the internal component).
I also improved the type annotation for `Props` so that we can still enforce that only valid prop names are supplied. (We still do not check the prop values because we do not currently have a good strategy for typing the "animated versions" of those.)
Changelog:
[General] [Changed] - Flow types for Animated components now validates prop names and yields the new component instance.
Reviewed By: TheSavior
Differential Revision: D18290473
fbshipit-source-id: 8c629ab6aff009ebe6dabca1683c99a357869977
Summary:
Changes `createAnimatedComponent` so that a `ref` assigned to an Animated component will now be forwarded to the internal component. Previously, a ref to the internal component was accessed using the `getNode` method. The `getNode` method is now deprecated and will return the same `ref` but show a deprecation error.
Changelog:
[General] [Changed] - Refs on an Animated component are now the internal component. The `getNode` call has been deprecated.
Reviewed By: TheSavior
Differential Revision: D18290474
fbshipit-source-id: 5849809583a17624a89071db8be1282a12caedf3
Summary:
Deletes `__skipSetNativeProps_FOR_TESTS_ONLY` in favor of a `process.env_NODE_ENV` check (which will be eliminated from production builds).
Changelog:
[General] [Removed] Removed `__skipSetNativeProps_FOR_TESTS_ONLY` from Animated components.
Reviewed By: TheSavior
Differential Revision: D18289739
fbshipit-source-id: 7c1f7a29f2b88821d358227a07eec778773e418a
Summary:
Simplifies `Animated` by removing `defaultProps` in favor of composition and a more isolated fix for scroll components.
Changelog:
[Breaking] Removed second defaultProps argument from createAnimatedComponent.
Reviewed By: TheSavior
Differential Revision: D18289648
fbshipit-source-id: 4e91c34297c3231f2bf691da74a7a624ca0b4f29
Summary:
This bypasses setNativeProps and causes all animations to go through the mounting layer in Fabric only. Resubmit of D17201061
Changelog:
[Internal]
Reviewed By: yungsters
Differential Revision: D17246910
fbshipit-source-id: 88effbaa9b04b277b07cd14427c59e464549ad4a
Summary: This bypasses setNativeProps and causes all Fabric animations to go through the mounting layer.
Reviewed By: mdvacca
Differential Revision: D17201061
fbshipit-source-id: c43b59913d8240860e5269e73e1c0ec10ec8e717
Summary:
In the jest test renderer, host components have null refs by default. `createAnimatedComponent` tries to access the ref in componentDidMount, which then crashes. This is particularly problematic when trying to update test data:
https://fb.workplace.com/groups/mpen00bs/permalink/494236684721027/?comment_id=510656413079054
Just checking for null fixes the issue and shouldn't affect anything else.
Reviewed By: TheSavior, yungsters
Differential Revision: D16777137
fbshipit-source-id: 0b9f7c5734c849f36318512ceffcc42dd44c58bb
Summary:
Depending on the style props of an Animated.View it may be optimised away
by the NativeViewHierarchyOptimizer, which will make the animation to
fail, because the native view is virtual (it does not exists
in the native view hierarchy).
Although the createAnimatedComponent already sets the collapsable property
based on the this._propsAnimated.__isNative flag, it won't work on all
cases, since the __isNative flag is only set when one starts the animation.
Which won't cause a re-render to occuor, thus not setting the collapsable
property to false.
In order to prevent this issue the HOC will just set the collapsable property
to false.
## Changelog
[Javascript] [Fixed] - Properly set collapsable to false before starting a nativeDriver animation
Pull Request resolved: https://github.com/facebook/react-native/pull/25361
Test Plan:
### **Without this patch:**
Run the following App on an Android device without this patch and click start.
Outcome: The animation **will not** make the text invisible.
### **With this patch:**
Run the following App on an Android device with this patch and click start.
Outcome: The animation **will** make the text invisible.
```javascript
import React, { Component, ReactNode } from 'react';
import { View, Text, TouchableOpacity, Animated, StyleSheet, Easing } from 'react-native';
interface Props { }
const Constants = {
animation: {
duration: 500,
},
};
const text =
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed orci erat. Suspendisse feugiat elit gravida elit consequat ultrices. Sed sollicitudin ullamcorper molestie. Mauris a diam neque. Vivamus in lectus.';
class App extends Component<Props> {
anim: any;
constructor(props: Props) {
super(props);
this.anim = new Animated.Value(0);
}
handleStartPress = () => {
this.anim.setValue(0);
console.log('start');
Animated.timing(this.anim, {
duration: Constants.animation.duration,
toValue: 1,
easing: Easing.linear(),
useNativeDriver: true,
}).start();
};
render(): ReactNode {
return (
<View style={styles.container}>
<Animated.View
style={{
opacity: this.anim.interpolate({
inputRange: [0, 1],
outputRange: [1, 0],
}),
}}>
<Text>{text}</Text>
</Animated.View>
<TouchableOpacity
style={styles.startButton}
onPress={this.handleStartPress}>
<Text style={styles.startButtonText}>START</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
alignItems: 'center',
backgroundColor: 'white',
flex: 1,
},
description: {
marginTop: 20,
paddingHorizontal: 10,
},
startButton: {
alignItems: 'center',
aspectRatio: 1,
backgroundColor: 'yellow',
borderRadius: 100,
height: 50,
justifyContent: 'center',
},
startButtonText: {
fontSize: 10,
fontWeight: 'bold',
},
});
export default App;
```
Closes https://github.com/facebook/react-native/issues/25318
Differential Revision: D15983822
Pulled By: cpojer
fbshipit-source-id: 1d790fbddc3103a2e34e114db956fa1fb465c1c9
Summary:
This is the next step in moving RN towards standard path-based requires. All the requires in `Libraries` have been rewritten to use relative requires with a few exceptions, namely, `vendor` and `Renderer/oss` since those need to be changed upstream. This commit uses relative requires instead of `react-native/...` so that if Facebook were to stop syncing out certain folders and therefore remove code from the react-native package, internal code at Facebook would not need to change.
See the umbrella issue at https://github.com/facebook/react-native/issues/24316 for more detail.
[General] [Changed] - Migrate "Libraries" from Haste to standard path-based requires
Pull Request resolved: https://github.com/facebook/react-native/pull/24749
Differential Revision: D15258017
Pulled By: cpojer
fbshipit-source-id: a1f480ea36c05c659b6f37c8f02f6f9216d5a323
Summary:
Setting the scroll throttle for every animated scrollview is a pain, and if you forget it's super janky and can be confusing and frustrating.
Enables setting default props in createAnimatedComponent and uses it for scrollview.
Reviewed By: TheSavior
Differential Revision: D14790093
fbshipit-source-id: dd8f6f6540813245e87d696351f09ebb2e6ed5f2
Summary: There are some versions of babel 7's flow support that cause problems with property initializers. I changed this code to use class properties to fix the issue. See https://github.com/facebook/react-native/issues/20588
Reviewed By: TheSavior
Differential Revision: D13396959
fbshipit-source-id: a76266ac0c8a6a19a1c45f7136de4aba9c72581d
Summary: This is one more step to remove `fbjs` from `react-native-github`. This changes both the internal and external code to use `invariant` from zertosh instead of the copy in fbjs.
Reviewed By: yungsters
Differential Revision: D13195941
fbshipit-source-id: 73564ca1715110e7da9c7ef56dc57374d61377e0
Summary: This change drops the year from the copyright headers and the LICENSE file.
Reviewed By: yungsters
Differential Revision: D9727774
fbshipit-source-id: df4fc1e4390733fe774b1a160dd41b4a3d83302a
Summary:
This PR removes the need for having the `providesModule` tags in all the modules in the repository.
It configures Flow, Jest and Metro to get the module names from the filenames (`Libraries/Animated/src/nodes/AnimatedInterpolation.js` => `AnimatedInterpolation`)
* Checked the Flow configuration by running flow on the project root (no errors):
```
yarn flow
```
* Checked the Jest configuration by running the tests with a clean cache:
```
yarn jest --clearCache && yarn test
```
* Checked the Metro configuration by starting the server with a clean cache and requesting some bundles:
```
yarn run start --reset-cache
curl 'localhost:8081/IntegrationTests/AccessibilityManagerTest.bundle?platform=android'
curl 'localhost:8081/Libraries/Alert/Alert.bundle?platform=ios'
```
[INTERNAL] [FEATURE] [All] - Removed providesModule from all modules and configured tools.
Closes https://github.com/facebook/react-native/pull/18995
Reviewed By: mjesun
Differential Revision: D7729509
Pulled By: rubennorte
fbshipit-source-id: 892f760a05ce1fddb088ff0cd2e97e521fb8e825
Summary:
Includes React Native and its dependencies Fresco, Metro, and Yoga. Excludes samples/examples/docs.
find: ^(?:( *)|( *(?:[\*~#]|::))( )? *)?Copyright (?:\(c\) )?(\d{4})\b.+Facebook[\s\S]+?BSD[\s\S]+?(?:this source tree|the same directory)\.$
replace: $1$2$3Copyright (c) $4-present, Facebook, Inc.\n$2\n$1$2$3This source code is licensed under the MIT license found in the\n$1$2$3LICENSE file in the root directory of this source tree.
Reviewed By: TheSavior, yungsters
Differential Revision: D7007050
fbshipit-source-id: 37dd6bf0ffec0923bfc99c260bb330683f35553e
Summary:
Stateless functional components don't support refs and we need that for the component to work, it used to crash with this error message: `undefined is not an object (evaluating 'this._component.getScrollableNode')`. This makes it clear what the issue is.
Fixes some of the errors in #10635, not sure if it fixes all the cases described in the issue though.
**Test plan**
Tested that passing a component with createClass or extends Component works but passing a function causes an error.
[GENERAL] [ENHANCEMENT] [Animated] - Verify that the component passed to createAnimatedComponent is not functional
Closes https://github.com/facebook/react-native/pull/15019
Differential Revision: D6988096
Pulled By: sahrens
fbshipit-source-id: ec0ffa763245e786f44b4a1d56c0738876c25782
Summary:
AnimatedImplementation.js is getting pretty hard to navigate and reason about so I split it up into different modules. Also took the opportunity to run prettier on that code and do some minor const/let refactorings. This doesn't change any logic, mostly just moves code around and add proper imports / exports.
This opens the door for further cleanup and flow type improvements but want to keep this already big PR as small as possible.
Discussion points:
- Should I use haste for this? Animated is pretty much a standalone module, it still uses a few haste imports but for new modules I used commonjs imports to avoid polluting the haste global namespace too much. The new modules are all internal to Animated and should not be imported externally.
- We're using `requestAnimationFrame` from fbjs instead of the one available globally in RN and browsers is there a reason for that?
- Should we even support web in this implementation? There is a standalone repo that exist for Animated web. Is this implementation of Animated web used internally at facebook?
- Probably still related to web, we used some weird Set polyfill is that still needed?
Notes:
There is a small regression for docs where the type of some classes that are exported like AnimatedValue show up as CallExpression instead if Class.
<img width="655" alt="screen shot 2017-08-14 at 3 19 18 am" src="https://user-images.githubusercontent.com/2677334/29261820-8f243036-809f-11e7-8bf0-0fe9f93939ca.png">
**Test plan**
Tested that all Animated related examples still work in RNTester on iOS and Android.
Tested that the doc is still working
Ran unit tests
Closes https://github.com/facebook/react-native/pull/15485
Differential Revision: D5679886
Pulled By: sahrens
fbshipit-source-id: d3e9b6987ab5ff2cd20108c3b9d860c7536be8a0
Eli White
George Zahariev
Janic Duplessis
Tim Yung
Kacie Bawiec
Andres Suarez
Joshua Gross
Spencer Ahrens
Christoph Nakazawa
Guilherme Iscaro
James Ide
Thomas Carlson
Héctor Ramos
Rubén Norte
Sophie Alpert
Brian Vaughn
Semen Zhydenko
Rafael Oleza
Janic Duplessis
