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

View File

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

View File

@ -1,44 +1,10 @@
import React from 'react'; import { LayoutAnimation } from 'react-native';
import { Transition, Transitioning } from 'react-native-reanimated';
import PropTypes from 'prop-types';
import debounce from './debounce'; import debounce from './debounce';
import { isIOS } from './deviceInfo'; 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(() => { export const animateNextTransition = debounce(() => {
if (isIOS) { if (isIOS) {
TRANSITION_REF.current.animateNextTransition(); LayoutAnimation.easeInEaseOut();
} }
}, 200, true); }, 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;