From ff703d1359116bd366520702b8c36a4454d66aee Mon Sep 17 00:00:00 2001
From: Kevin Brown <kevin.brown@thinkmill.com.au>
Date: Thu, 9 Mar 2017 12:42:56 +1100
Subject: [PATCH] Attempting to implement AnimatedListView for smoother
 animations.

---
 app/scenes/Schedule/index.js | 38 ++++++++++++++++++++++++++++--------
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/app/scenes/Schedule/index.js b/app/scenes/Schedule/index.js
index d3252c4..12b9cbe 100644
--- a/app/scenes/Schedule/index.js
+++ b/app/scenes/Schedule/index.js
@@ -42,6 +42,7 @@ type Props = {
 
 type State = {
   dataSource: Object,
+  hasScrolled: boolean,
   scrollY: Animated.Value,
   showNowButton?: boolean,
   activeTalkLayout?: {
@@ -62,10 +63,13 @@ type ChangedRows = {
   },
 };
 
+const AnimatedListView = Animated.createAnimatedComponent(ListView);
+
 export default class Schedule extends Component {
   props: Props;
   state: State;
   scrollYListener: string;
+  _listview: any;
   _navigatorWillFocusSubscription: Object;
 
   static defaultProps = {
@@ -105,12 +109,17 @@ export default class Schedule extends Component {
 
     this.state = {
       dataSource: ds.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs),
+      hasScrolled: false,
       scrollY: new Animated.Value(0),
     };
 
     if (Platform.OS === 'ios') {
       // This isn't relevant on Android.
       this.scrollYListener = this.state.scrollY.addListener(({ value }) => {
+        if (!this.state.hasScrolled) {
+          this.setState({ hasScrolled: true });
+        }
+
         if (value > 120) {
           StatusBar.setBarStyle('default', true);
           StatusBar.setHidden(false, true);
@@ -182,14 +191,14 @@ export default class Schedule extends Component {
   scrolltoActiveTalk = () => {
     const { activeTalkLayout } = this.state;
     if (!activeTalkLayout) return;
-    const { contentLength } = this.refs.listview.scrollProperties;
+    const { contentLength } = this._listview.scrollProperties;
     const sceneHeight = Dimensions.get('window').height;
     const maxScroll = contentLength - (sceneHeight + theme.navbar.height);
     const scrollToY = maxScroll < activeTalkLayout.position
       ? maxScroll
       : activeTalkLayout.position;
 
-    this.refs.listview.scrollTo({ y: scrollToY, animated: true });
+    this._listview.scrollTo({ y: scrollToY, animated: true });
   };
   toggleNowButton(showNowButton: boolean) {
     LayoutAnimation.easeInEaseOut();
@@ -231,10 +240,20 @@ export default class Schedule extends Component {
       <Scene>
         <SplashScreen
           onLogoPress={this.gotoEventInfo}
-          style={{ top: splashTop }}
+          style={{ transform: [{ translateY: splashTop }] }}
         />
 
-        <Animated.View style={[styles.navbar, { top: navbarTop }]}>
+        <Animated.View
+          style={[
+            styles.navbar,
+            {
+              // Small bug with native animations in iOS doesn't set the
+              // transform properly on initial render, should be fixed in 0.42
+              opacity: this.state.hasScrolled ? 1 : 0,
+              transform: [{ translateY: navbarTop }],
+            },
+          ]}
+        >
           <Navbar
             title="Schedule"
             rightButtonText="About"
@@ -245,14 +264,17 @@ export default class Schedule extends Component {
         {/* Spacer for the headings to stick correctly */}
         <View style={styles.spacer} />
 
-        <ListView
+        <AnimatedListView
           dataSource={dataSource}
-          ref="listview"
+          ref={view => {
+            this._listview = view;
+          }}
           initialListSize={initialListSize}
           onScroll={Animated.event([
-            { nativeEvent: { contentOffset: { y: this.state.scrollY } } },
+            [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
+            { useNativeDriver: true },
           ])}
-          scrollEventThrottle={16}
+          scrollEventThrottle={1}
           onChangeVisibleRows={this.onChangeVisibleRows}
           enableEmptySections
           removeClippedSubviews={false}