Updated on-load fade in

himanchau · Feb 24, 2021 · abf4539 · abf4539
1 parent 8d35c6b
commit abf4539
Show file tree

Hide file tree

Showing 5 changed files with 5,757 additions and 5,943 deletions.
diff --git a/app.json b/app.json
@@ -9,16 +9,18 @@
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
-      "backgroundColor": "#ff6b6b"
+      "backgroundColor": "#1a1a1a"
     },
+    "backgroundColor": "#1a1a1a",
     "updates": {
       "fallbackToCacheTimeout": 0
     },
     "assetBundlePatterns": [
       "**/*"
     ],
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "bundleIdentifier": "com.himanshu266.book-app"
     },
     "android": {
       "adaptiveIcon": {

diff --git a/src/components/BookList.jsx b/src/components/BookList.jsx
@@ -50,7 +50,7 @@ function BookList({ books, title }) {
       alignItems: 'center',
       justifyContent: 'center',
       width: width - margin * 2,
-      paddingVertical: margin * 2,
+      paddingVertical: margin * 3,
       backgroundColor: colors.background,
     },
     emptyText: {

diff --git a/src/screens/BookListScreen.jsx b/src/screens/BookListScreen.jsx
@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { View, Pressable } from 'react-native';
 import Animated, {
-  interpolate, useAnimatedStyle, useSharedValue, useAnimatedScrollHandler, useAnimatedProps,
+  interpolate, withTiming,
+  useAnimatedStyle, useSharedValue, useAnimatedScrollHandler, useAnimatedProps,
 } from 'react-native-reanimated';
 import { useTheme, useFocusEffect } from '@react-navigation/native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
@@ -54,6 +55,7 @@ function BookList({ navigation }) {
     const json = await AsyncStorage.getItem('@lists');
     const data = json ? JSON.parse(json) : [];
     setBookList(data);
+    loaded.value = withTiming(1, { duration: dark ? 250 : 500 });
   };
 
   // Go to search screen
@@ -67,7 +69,6 @@ function BookList({ navigation }) {
     React.useCallback(() => {
       if (!loaded.value) {
         loadData();
-        loaded.value = 1;
       } else {
         setTimeout(loadData, 450);
       }
@@ -98,10 +99,11 @@ function BookList({ navigation }) {
 
   // Styles
   const styles = {
-    screen: {
+    screen: useAnimatedStyle(() => ({
       flex: 1,
+      opacity: loaded.value,
       backgroundColor: colors.background,
-    },
+    })),
     header: useAnimatedStyle(() => ({
       top: 0,
       left: 0,
@@ -163,7 +165,7 @@ function BookList({ navigation }) {
       borderColor: colors.background,
     },
     searchIcon: {
-      marginRight: 10,
+      width: 30,
     },
     searchText: {
       opacity: 0.3,
@@ -175,7 +177,7 @@ function BookList({ navigation }) {
 
   // Render all the lists
   return (
-    <View style={styles.screen}>
+    <Animated.View style={styles.screen}>
       <Animated.View style={styles.header}>
         <Animated.View style={styles.logo}>
           <LottieViewAnimated
@@ -210,7 +212,7 @@ function BookList({ navigation }) {
         <List books={completed} title="Completed" navigation={navigation} />
         <List books={wishlist} title="Wishlist" navigation={navigation} />
       </Animated.ScrollView>
-    </View>
+    </Animated.View>
   );
 }
 

diff --git a/src/theme.js b/src/theme.js
@@ -13,7 +13,7 @@ export default function getTheme(scheme) {
     height,
     margin: normalize(20, 35),
     colors: {
-      primary: '#feca57',
+      primary: '#00d2d3',
       text: dark ? '#f2f2f2' : '#1a1a1a',
       card: dark ? '#000000' : '#ffffff',
       background: dark ? '#1a1a1a' : '#f2f2f2',