Fixed android issues

himanchau · Mar 13, 2021 · 3d58978 · 3d58978
1 parent 40fdba4
commit 3d58978
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 67 deletions.
diff --git a/src/RootNavigator.jsx b/src/RootNavigator.jsx
@@ -77,7 +77,6 @@ function RootNavigator() {
           animation: 'fade',
         }] : [])}
         options={{
-          gestureEnabled: false,
           cardStyleInterpolator: fadeScreen,
           transitionSpec: {
             open: searchTranstion,

diff --git a/src/components/Book.jsx b/src/components/Book.jsx
@@ -47,6 +47,7 @@ function Book({ book, scrollX, index }) {
     imgBox: {
       marginRight: margin,
       borderRadius: 10,
+      elevation: 6,
       shadowRadius: 6,
       shadowOpacity: 0.3,
       shadowOffset: { width: 0, height: 6 },

diff --git a/src/components/BookHeader.jsx b/src/components/BookHeader.jsx
@@ -25,8 +25,6 @@ function BookHeader({ scrollY, book }) {
       paddingTop: status,
       position: 'absolute',
       justifyContent: 'center',
-      borderTopLeftRadius: 20,
-      borderTopRightRadius: 20,
       shadowOffset: { height: 2 },
       backgroundColor: colors.card,
       shadowOpacity: interpolate(scrollY.value, [HEADER - navbar - 20, HEADER - navbar], [0, 0.25], 'clamp'),
@@ -41,8 +39,6 @@ function BookHeader({ scrollY, book }) {
       bottom: 0,
       opacity: 0.5,
       position: 'absolute',
-      borderTopLeftRadius: 20,
-      borderTopRightRadius: 20,
     })),
     cover: useAnimatedStyle(() => ({
       alignItems: 'center',
@@ -75,6 +71,7 @@ function BookHeader({ scrollY, book }) {
   const styles = StyleSheet.create({
     imgBox: {
       borderRadius: 10,
+      elevation: 6,
       shadowRadius: 6,
       shadowOpacity: 0.3,
       shadowOffset: { width: 0, height: 6 },

diff --git a/src/components/BookList.jsx b/src/components/BookList.jsx
@@ -92,7 +92,7 @@ function BookList({ books, title }) {
       <AnimatedFlatList
         horizontal
         onScroll={scrollHandler}
-        scrollEventThrottle={8}
+        scrollEventThrottle={1}
         showsHorizontalScrollIndicator={false}
         contentContainerStyle={styles.listContainer}
         data={books}

diff --git a/src/components/Button.jsx b/src/components/Button.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Pressable, View, StyleSheet } from 'react-native';
+import { Pressable, StyleSheet } from 'react-native';
 import { useTheme } from '@react-navigation/native';
 
 import Text from './Text';
@@ -26,12 +26,10 @@ function ThemedButton({
   });
 
   return (
-    <Pressable onPress={onPress}>
-      <View style={[styles.button, style]}>
-        <Text bold size={16} style={[textStyle]}>
-          {children}
-        </Text>
-      </View>
+    <Pressable onPress={onPress} style={[styles.button, style]}>
+      <Text bold size={16} style={[textStyle]}>
+        {children}
+      </Text>
     </Pressable>
   );
 }

diff --git a/src/components/StatusModal.jsx b/src/components/StatusModal.jsx
@@ -27,7 +27,8 @@ export function ModalProvider({ children }) {
     },
     content: {
       padding: margin,
-      borderRadius: 25,
+      borderTopLeftRadius: 25,
+      borderTopRightRadius: 25,
       paddingBottom: status,
       backgroundColor: colors.card,
     },

diff --git a/src/components/Text.jsx b/src/components/Text.jsx
@@ -5,7 +5,7 @@ import Animated from 'react-native-reanimated';
 
 // Themeable / Animatable Text
 function AnimatedText(props) {
-  const { colors } = useTheme();
+  const { colors, font } = useTheme();
   const {
     children, style, size, bold, center, color, animated,
   } = props;
@@ -14,7 +14,7 @@ function AnimatedText(props) {
     color: color || colors.text,
     fontSize: size || 14,
     fontWeight: bold ? '500' : '400',
-    fontFamily: 'Avenir Next',
+    fontFamily: font,
     textAlign: center ? 'center' : null,
   });
 

diff --git a/src/screens/BookDetailsScreen.jsx b/src/screens/BookDetailsScreen.jsx
@@ -50,10 +50,11 @@ function BookDetailsScreen({ navigation, route }) {
   const loaded = useSharedValue(0);
   const y = useSharedValue(0);
   const x = useSharedValue(0);
-  const closing = useSharedValue(0);
+  const moved = useSharedValue(0);
+  const closing = useSharedValue(0.9);
   const scrollY = useSharedValue(0);
   const {
-    margin, width, dark, colors, normalize, status,
+    margin, width, dark, colors, normalize, status, ios,
   } = useTheme();
   const HEADER = normalize(width + status, 500) + margin;
 
@@ -83,25 +84,27 @@ function BookDetailsScreen({ navigation, route }) {
   // Pan gesture handler
   const gestureHandler = useAnimatedGestureHandler({
     onStart: (_, ctx) => {
+      ctx.moved = moved.value;
       ctx.startX = x.value;
       ctx.startY = y.value;
     },
     onActive: (e, ctx) => {
-      ctx.moved = Math.max(ctx.startY + e.translationY, ctx.startX + e.translationX);
+      moved.value = ctx.moved + Math.max(e.translationY, e.translationX);
       ctx.velocity = Math.max(e.velocityX, e.velocityY);
       y.value = ctx.startY + e.translationY;
       x.value = ctx.startX + e.translationX;
 
       // closing screen? do it!
-      if ((ctx.moved >= 75 || ctx.velocity >= 750) && !closing.value) {
-        closing.value = 1;
-        runOnJS(goBack)();
+      if ((moved.value >= 75 || ctx.velocity >= 750)) {
+        if (closing.value === 0.9) runOnJS(goBack)();
+        closing.value = withTiming(0.25);
       }
     },
     onEnd: (e, ctx) => {
-      if (ctx.moved < 75 && ctx.velocity < 750) {
+      if (moved.value < 75 && ctx.velocity < 750) {
         y.value = withTiming(0);
         x.value = withTiming(0);
+        moved.value = withTiming(0);
       }
     },
   });
@@ -147,20 +150,19 @@ function BookDetailsScreen({ navigation, route }) {
   const anims = {
     screen: useAnimatedStyle(() => ({
       flex: 1,
-      shadowRadius: 10,
-      shadowOpacity: 0.5,
-      shadowOffset: { height: 5 },
+      opacity: withTiming(closing.value < 0.9 ? 0 : 1),
+      overflow: 'hidden',
       transform: [
         { translateX: x.value },
         { translateY: y.value },
-        { scale: interpolate(Math.max(y.value, x.value), [0, 75], [1, 0.9], 'clamp') },
+        { scale: closing.value < 0.9 ? closing.value : interpolate(moved.value, [0, 75], [1, 0.9], 'clamp') },
       ],
+      borderRadius: interpolate(moved.value, [0, 10], [0, 30], 'clamp'),
     })),
-    scrollView: useAnimatedStyle(() => ({
+    scrollView: {
       flex: 1,
       backgroundColor: colors.background,
-      borderRadius: interpolate(Math.max(y.value, x.value), [0, 10], [0, 40], 'clamp'),
-    })),
+    },
     details: useAnimatedStyle(() => ({
       opacity: loaded.value,
       transform: [
@@ -254,15 +256,15 @@ function BookDetailsScreen({ navigation, route }) {
         onHandlerStateChange={gestureHandler}
       >
         <Animated.View style={anims.screen}>
-          <StatusBar hidden={useIsFocused()} animated />
+          {ios && <StatusBar hidden={useIsFocused()} animated />}
           <BookHeader scrollY={scrollY} book={book} />
           <AntDesign size={27} name="close" onPress={goBack} style={styles.closeIcon} />
 
           <Animated.View style={anims.scrollView}>
             <AnimatedScrollView
               waitFor={enabled ? panRef : undefined}
               onScroll={scrollHandler}
-              scrollEventThrottle={8}
+              scrollEventThrottle={1}
               contentContainerStyle={styles.scrollContainer}
             >
               <View style={styles.detailsBox}>

diff --git a/src/screens/BookListScreen.jsx b/src/screens/BookListScreen.jsx
@@ -33,7 +33,7 @@ const getGreeting = () => {
 // home screen
 function BookListScreen({ navigation }) {
   const {
-    dark, width, colors, margin, navbar, normalize,
+    dark, width, colors, margin, navbar, normalize, ios,
   } = useTheme();
   const HEADER = normalize(300, 400);
   const scrollY = useSharedValue(0);
@@ -70,42 +70,34 @@ function BookListScreen({ navigation }) {
       left: 0,
       right: 0,
       zIndex: 10,
-      height: HEADER,
+      height: interpolate(scrollY.value, [-300, 0], [HEADER + 300, HEADER], 'clamp'),
       paddingTop: navbar,
-      shadowRadius: 4,
       position: 'absolute',
       alignItems: 'center',
       justifyContent: 'flex-end',
-      shadowOffset: { height: 2, width: 0 },
+      elevation: ios ? undefined : interpolate(scrollY.value, [0, HEADER - 100, HEADER - 80], [0, 0, 10], 'clamp'),
+      shadowRadius: ios ? 4 : undefined,
+      shadowOffset: ios ? { height: 2, width: 0 } : undefined,
+      shadowOpacity: ios ? interpolate(scrollY.value, [0, HEADER - 100, HEADER - 80], [0, 0, 0.15], 'clamp') : undefined,
       backgroundColor: colors.background,
-      shadowOpacity: interpolate(scrollY.value, [0, HEADER - 100, HEADER - 80], [0, 0, 0.15], 'clamp'),
       transform: [
         { translateY: interpolate(scrollY.value, [0, HEADER - navbar], [0, -HEADER + navbar], 'clamp') },
       ],
     })),
     logo: useAnimatedStyle(() => ({
       opacity: interpolate(scrollY.value, [0, HEADER - 100], [1, 0], 'clamp'),
       transform: [
-        { translateY: interpolate(scrollY.value, [-200, 0], [50, 0], 'clamp') },
+        { translateY: interpolate(scrollY.value, [-300, 0], [-150, 0], 'clamp') },
       ],
     })),
     lottie: {
-      alignSelf: 'center',
-      height: '110%',
-      marginLeft: 10,
+      top: 5,
+      height: '100%',
       opacity: dark ? 0.8 : 1,
     },
     lottieProps: useAnimatedProps(() => ({
       speed: 0.5,
       autoPlay: true,
-      // progress: scrollY.value
-      //   ? interpolate(scrollY.value, [-200, 0, 200], [0, 0.5, 1], 'clamp')
-      //   : withTiming(1, { duration: 5000 }),
-    })),
-    welcome: useAnimatedStyle(() => ({
-      transform: [
-        { translateY: interpolate(scrollY.value, [-200, 0], [200, 0], 'clamp') },
-      ],
     })),
     welcomeText: useAnimatedStyle(() => ({
       transform: [
@@ -152,25 +144,23 @@ function BookListScreen({ navigation }) {
             animatedProps={styles.lottieProps}
           />
         </Animated.View>
-        <Animated.View style={styles.welcome}>
-          <Text animated style={styles.welcomeText} center size={20}>
-            {getGreeting()}
-          </Text>
-          <SharedElement id="search">
-            <Pressable onPress={searchBooks} style={styles.searchInput}>
-              <Text size={15} style={styles.searchText}>
-                <View style={styles.searchIcon}>
-                  <AntDesign color={colors.text} name="search1" size={15} />
-                </View>
-                Find your next book...
-              </Text>
-            </Pressable>
-          </SharedElement>
-        </Animated.View>
+        <Text animated style={styles.welcomeText} center size={20}>
+          {getGreeting()}
+        </Text>
+        <SharedElement id="search">
+          <Pressable onPress={searchBooks} style={styles.searchInput}>
+            <Text size={15} style={styles.searchText}>
+              <View style={styles.searchIcon}>
+                <AntDesign color={colors.text} name="search1" size={15} />
+              </View>
+              Find your next book...
+            </Text>
+          </Pressable>
+        </SharedElement>
       </Animated.View>
 
       <Animated.ScrollView
-        scrollEventThrottle={8}
+        scrollEventThrottle={1}
         onScroll={scrollHandler}
         contentContainerStyle={styles.scrollView}
       >

diff --git a/src/screens/BookSearchScreen.jsx b/src/screens/BookSearchScreen.jsx
@@ -172,7 +172,7 @@ function BookSearchScreen({ navigation }) {
 
       <Animated.ScrollView
         onScroll={scrollHandler}
-        scrollEventThrottle={8}
+        scrollEventThrottle={1}
         keyboardDismissMode="on-drag"
         keyboardShouldPersistTaps="handled"
         contentContainerStyle={styles.scrollContainer}

diff --git a/src/theme.js b/src/theme.js
@@ -1,5 +1,5 @@
 import Constants from 'expo-constants';
-import { useWindowDimensions } from 'react-native';
+import { useWindowDimensions, Platform } from 'react-native';
 
 /* Return the App Theme Object */
 export default function getTheme(scheme) {
@@ -11,6 +11,7 @@ export default function getTheme(scheme) {
     dark,
     width,
     height,
+    ios: Platform.OS === 'ios',
     margin: normalize(20, 35),
     colors: {
       primary: '#ff6b6b',
@@ -20,6 +21,7 @@ export default function getTheme(scheme) {
       border: dark ? '#f2f2f2dd' : '#1a1a1add',
       button: dark ? '#1a1a1add' : '#f2f2f2dd',
     },
+    font: Platform.OS === 'ios' ? 'Avenir Next' : 'Roboto',
     status: Constants.statusBarHeight,
     navbar: Constants.statusBarHeight + 44,
     normalize,