Removed animation completely

app/react-native/src/preview/components/OnDeviceUI/index.js

@@ -2,16 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { ifIphoneX } from 'react-native-iphone-x-helper';
 
-import {
+import { Dimensions, View, TouchableWithoutFeedback, Image, Text, StatusBar } from 'react-native';
-  Animated,
-  Dimensions,
-  Easing,
-  View,
-  TouchableWithoutFeedback,
-  Image,
-  Text,
-  StatusBar,
-} from 'react-native';
 import style from './style';
 import StoryListView from '../StoryListView';
 import StoryView from '../StoryView';
@@ -34,7 +25,6 @@ export default class OnDeviceUI extends Component {
     super(...args);
 
     this.state = {
-      menuAnimation: new Animated.Value(0),
       isMenuOpen: false,
       selectedKind: null,
       selectedStory: null,
@@ -71,24 +61,14 @@ export default class OnDeviceUI extends Component {
   };
 
   handleToggleMenu = () => {
-    const isMenuOpen = !this.state.isMenuOpen;
-
-    if (this.props.animated) {
-      Animated.timing(this.state.menuAnimation, {
-        toValue: isMenuOpen ? 1 : 0,
-        duration: 150,
-        easing: Easing.linear,
-      }).start();
-    }
-
     this.setState({
-      isMenuOpen,
+      isMenuOpen: !this.state.isMenuOpen,
     });
   };
 
   render() {
-    const { stories, animated, events, url } = this.props;
+    const { stories, events, url } = this.props;
-    const { isPortrait, isMenuOpen, menuAnimation, selectedKind, selectedStory } = this.state;
+    const { isPortrait, isMenuOpen, selectedKind, selectedStory } = this.state;
 
     const iPhoneXStyles = ifIphoneX(
       isPortrait
@@ -101,23 +81,12 @@ export default class OnDeviceUI extends Component {
       {}
     );
 
-    let translateX;
-
-    if (animated) {
-      translateX = menuAnimation.interpolate({
-        inputRange: [0, 1],
-        outputRange: [-DRAWER_WIDTH - 30, 0],
-      });
-    } else {
-      translateX = isMenuOpen ? 0 : -DRAWER_WIDTH - 30;
-    }
-
     const menuStyles = [
       style.menuContainer,
       {
         transform: [
           {
-            translateX,
+            translateX: isMenuOpen ? 0 : -DRAWER_WIDTH - 30,
           },
         ],
       },
@@ -127,12 +96,7 @@ export default class OnDeviceUI extends Component {
     const headerStyles = [
       style.headerContainer,
       {
-        opacity: animated
+        opacity: +!isMenuOpen,
-          ? menuAnimation.interpolate({
-              inputRange: [0, 1],
-              outputRange: [1, 0],
-            })
-          : +!isMenuOpen,
       },
     ];
 
@@ -156,7 +120,7 @@ export default class OnDeviceUI extends Component {
     return (
       <View style={style.main}>
         <View style={previewContainerStyles}>
-          <Animated.View style={headerStyles}>
+          <View style={headerStyles}>
             <TouchableWithoutFeedback
               onPress={this.handleToggleMenu}
               testID="Storybook.OnDeviceUI.open"
@@ -169,14 +133,14 @@ export default class OnDeviceUI extends Component {
             <Text style={style.headerText} numberOfLines={1}>
               {selectedKind} {selectedStory}
             </Text>
-          </Animated.View>
+          </View>
           <View style={previewWrapperStyles}>
             <View style={style.preview}>
               <StoryView url={url} events={events} />
             </View>
           </View>
         </View>
-        <Animated.View style={menuStyles}>
+        <View style={menuStyles}>
           <TouchableWithoutFeedback
             onPress={this.handleToggleMenu}
             testID="Storybook.OnDeviceUI.close"
@@ -193,7 +157,7 @@ export default class OnDeviceUI extends Component {
             selectedKind={selectedKind}
             selectedStory={selectedStory}
           />
-        </Animated.View>
+        </View>
       </View>
     );
   }
@@ -212,10 +176,8 @@ OnDeviceUI.propTypes = {
     removeListener: PropTypes.func.isRequired,
   }).isRequired,
   url: PropTypes.string,
-  animated: PropTypes.bool,
 };
 
 OnDeviceUI.defaultProps = {
   url: '',
-  animated: true,
 };

app/react-native/src/preview/index.js

@@ -74,12 +74,7 @@ export default class Preview {
 
       // finally return the preview component
       return params.onDeviceUI
-        ? <OnDeviceUI
+        ? <OnDeviceUI stories={this._stories} events={this._events} url={webUrl} />
-            stories={this._stories}
-            events={this._events}
-            url={webUrl}
-            animated={params.onDeviceUIAnimated}
-          />
         : <StoryView url={webUrl} events={this._events} />;
     };
   }