[REGRESSION] Use LayoutAnimation instead of Transition API (#1338)

This commit is contained in:
Diego Mello 2019-10-30 12:43:57 -03:00 committed by GitHub
parent fcb420a773
commit 0a8404d723
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 54 deletions

View File

@ -19,7 +19,6 @@ import { defaultHeader, onNavigationStateChange } from './utils/navigation';
import { loggerConfig, analytics } from './utils/log';
import Toast from './containers/Toast';
import RocketChat from './lib/rocketchat';
import LayoutAnimation from './utils/layoutAnimation';
useScreens();
@ -313,14 +312,12 @@ export default class Root extends React.Component {
render() {
return (
<Provider store={store}>
<LayoutAnimation>
<App
ref={(navigatorRef) => {
Navigation.setTopLevelNavigator(navigatorRef);
}}
onNavigationStateChange={onNavigationStateChange}
/>
</LayoutAnimation>
<App
ref={(navigatorRef) => {
Navigation.setTopLevelNavigator(navigatorRef);
}}
onNavigationStateChange={onNavigationStateChange}
/>
</Provider>
);
}

View File

@ -11,7 +11,6 @@ import sharedStyles from './views/Styles';
import { isNotch, isIOS } from './utils/deviceInfo';
import { defaultHeader, onNavigationStateChange } from './utils/navigation';
import RocketChat from './lib/rocketchat';
import LayoutAnimation from './utils/layoutAnimation';
const InsideNavigator = createStackNavigator({
ShareListView: {
@ -85,14 +84,12 @@ class Root extends React.Component {
onLayout={this.handleLayout}
>
<Provider store={store}>
<LayoutAnimation>
<AppContainer
ref={(navigatorRef) => {
Navigation.setTopLevelNavigator(navigatorRef);
}}
onNavigationStateChange={onNavigationStateChange}
/>
</LayoutAnimation>
<AppContainer
ref={(navigatorRef) => {
Navigation.setTopLevelNavigator(navigatorRef);
}}
onNavigationStateChange={onNavigationStateChange}
/>
</Provider>
</View>
);

View File

@ -1,44 +1,10 @@
import React from 'react';
import { Transition, Transitioning } from 'react-native-reanimated';
import PropTypes from 'prop-types';
import { LayoutAnimation } from 'react-native';
import debounce from './debounce';
import { isIOS } from './deviceInfo';
import sharedStyles from '../views/Styles';
const transition = (
<Transition.Together>
<Transition.In type='fade' />
<Transition.Out type='fade' />
<Transition.Change interpolation='easeInOut' />
</Transition.Together>
);
const TRANSITION_REF = React.createRef();
export const animateNextTransition = debounce(() => {
if (isIOS) {
TRANSITION_REF.current.animateNextTransition();
LayoutAnimation.easeInEaseOut();
}
}, 200, true);
const LayoutAnimation = ({ children }) => {
if (isIOS) {
return (
<Transitioning.View
style={sharedStyles.root}
transition={transition}
ref={TRANSITION_REF}
>
{children}
</Transitioning.View>
);
}
return children;
};
LayoutAnimation.propTypes = {
children: PropTypes.node
};
export default LayoutAnimation;