smooth large title animation

it was jumping because ScrollView was wrapped by SafeArea
kanzitelli · Nov 18, 2020 · 6641318 · 6641318
1 parent 1cc6e55
commit 6641318
Showing 1 changed file with 37 additions and 39 deletions.
diff --git a/src/screens/ExpoScreen.tsx b/src/screens/ExpoScreen.tsx
@@ -51,45 +51,43 @@ const ExpoScreen: NavigationFunctionComponent<ExpoScreenProps> = observer(({
   }
 
   return contentHidden ? null : (
-    <SafeAreaView style={styles.container}>
-      <ScrollView>
-        <View style={styles.section}>
-          <Text style={styles.header}>
-            { 'From Expo SDK' }
-          </Text>
-
-          <Text style={styles.text}>Device ID: {ExpoConstants.deviceId}</Text>
-          <Text style={styles.text}>Network type: {ui.networkType}</Text>
-        </View>
-
-        <View style={styles.section}>
-          <Text style={styles.header}>
-            { 'Reanimated 2' }
-          </Text>
-
-          <Reanimated2 />
-        </View>
-
-        <View style={styles.section}>
-          <Text style={styles.header}>
-            { 'Navigation' }
-          </Text>
-
-          <ButtonTitle
-            title={'Push this screen again'}
-            onPress={() => navigation.pushExpo(componentId)}
-          />
-          <ButtonTitle
-            title={'Show it as a modal'}
-            onPress={() => navigation.showExpo()}
-          />
-          <ButtonTitle
-            title={'Close modal'}
-            onPress={() => navigation.dismissModal(componentId)}
-          />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
+    <ScrollView>
+      <View style={styles.section}>
+        <Text style={styles.header}>
+          { 'From Expo SDK' }
+        </Text>
+
+        <Text style={styles.text}>Device ID: {ExpoConstants.deviceId}</Text>
+        <Text style={styles.text}>Network type: {ui.networkType}</Text>
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.header}>
+          { 'Reanimated 2' }
+        </Text>
+
+        <Reanimated2 />
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.header}>
+          { 'Navigation' }
+        </Text>
+
+        <ButtonTitle
+          title={'Push this screen again'}
+          onPress={() => navigation.pushExpo(componentId)}
+        />
+        <ButtonTitle
+          title={'Show it as a modal'}
+          onPress={() => navigation.showExpo()}
+        />
+        <ButtonTitle
+          title={'Close modal'}
+          onPress={() => navigation.dismissModal(componentId)}
+        />
+      </View>
+    </ScrollView>
   );
 });