trying reanimated 2

android/app/build.gradle

@@ -78,7 +78,7 @@ import com.android.build.OutputFile
  */
 
 project.ext.react = [
-    enableHermes: false,  // clean and rebuild if changing
+    enableHermes: true,  // clean and rebuild if changing
 ]
 
 apply from: "../../node_modules/react-native/react.gradle"

android/app/src/main/java/com/subsonify/MainApplication.java

@@ -12,6 +12,10 @@ import com.facebook.soloader.SoLoader;
 import java.lang.reflect.InvocationTargetException;
 import java.util.List;
 
+// for reanimated
+import com.facebook.react.bridge.JSIModulePackage;
+import com.swmansion.reanimated.ReanimatedJSIModulePackage;
+
 public class MainApplication extends Application implements ReactApplication {
 
   private final ReactNativeHost mReactNativeHost =
@@ -34,6 +38,12 @@ public class MainApplication extends Application implements ReactApplication {
         protected String getJSMainModuleName() {
           return "index";
         }
+
+        // for reanimated
+        @Override
+        protected JSIModulePackage getJSIModulePackage() {
+          return new ReanimatedJSIModulePackage();
+        }
       };
 
   @Override

babel.config.js

@@ -1,3 +1,7 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  plugins: [
+    // reanimated has to be listed last in plugins
+    'react-native-reanimated/plugin',
+  ],
 };

package-lock.json

@@ -20,7 +20,7 @@
         "react-native-gesture-handler": "^1.10.3",
         "react-native-get-random-values": "^1.7.0",
         "react-native-linear-gradient": "^2.5.6",
-        "react-native-reanimated": "^2.2.0",
+        "react-native-reanimated": "^2.0.0",
         "react-native-safe-area-context": "^3.2.0",
         "react-native-screens": "^3.4.0",
         "react-native-sqlite-storage": "^5.0.0",
@@ -11539,9 +11539,9 @@
       }
     },
     "node_modules/react-native-reanimated": {
-      "version": "2.2.0",
+      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.0.0.tgz",
-      "integrity": "sha512-lOJDd+5w1gY6DHGXG2jD1dsjzQmXQ2699HUc3IztvI2WP4zUT+UAA+zSG+5JiBS5DUnTL8YhhkmUQmr1KNGO5w==",
+      "integrity": "sha512-kIrdBoXSky7DQ62SOgosgimKM+Lt+SzAaM+ovVpCLBcwUK2aYRfLxa9ffgvKjeH9/n7dONlwEMjbKssGkuyq2Q==",
       "dependencies": {
         "@babel/plugin-transform-object-assign": "^7.10.4",
         "fbjs": "^3.0.0",
@@ -23413,9 +23413,9 @@
       "requires": {}
     },
     "react-native-reanimated": {
-      "version": "2.2.0",
+      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.0.0.tgz",
-      "integrity": "sha512-lOJDd+5w1gY6DHGXG2jD1dsjzQmXQ2699HUc3IztvI2WP4zUT+UAA+zSG+5JiBS5DUnTL8YhhkmUQmr1KNGO5w==",
+      "integrity": "sha512-kIrdBoXSky7DQ62SOgosgimKM+Lt+SzAaM+ovVpCLBcwUK2aYRfLxa9ffgvKjeH9/n7dONlwEMjbKssGkuyq2Q==",
       "requires": {
         "@babel/plugin-transform-object-assign": "^7.10.4",
         "fbjs": "^3.0.0",

package.json

@@ -22,7 +22,7 @@
     "react-native-gesture-handler": "^1.10.3",
     "react-native-get-random-values": "^1.7.0",
     "react-native-linear-gradient": "^2.5.6",
-    "react-native-reanimated": "^2.2.0",
+    "react-native-reanimated": "^2.0.0",
     "react-native-safe-area-context": "^3.2.0",
     "react-native-screens": "^3.4.0",
     "react-native-sqlite-storage": "^5.0.0",

src/components/common/TopTabBar.tsx

@@ -9,8 +9,8 @@ const TopTabBar: React.FC<MaterialTopTabBarProps> = ({ state, descriptors }) =>
     <View style={{
       backgroundColor: colors.gradient.high,
       flexDirection: 'row',
-      alignItems: 'center',
+      alignItems: 'flex-start',
-      justifyContent: 'space-evenly',
+      justifyContent: 'flex-start',
     }}>
       {state.routes.map((route, index) => {
         const { options } = descriptors[route.key];

src/components/library/AlbumsTab.tsx

@@ -57,7 +57,7 @@ const AlbumItem: React.FC<{ id: string } > = ({ id }) => {
   //   console.log(album.name);
   // });
 
-  const size = 180;
+  const size = 125;
 
   return (
     <View style={{
@@ -66,7 +66,7 @@ const AlbumItem: React.FC<{ id: string } > = ({ id }) => {
       marginVertical: 10,
       // marginLeft: 6,
       // width: size,
-      flex: 1/2,
+      flex: 1/3,
     }}>
       <AlbumArt
         width={size}
@@ -136,7 +136,7 @@ const AlbumsList = () => {
         keyExtractor={item => item}
         onRefresh={refresh}
         refreshing={refreshing}
-        numColumns={2}
+        numColumns={3}
         removeClippedSubviews={false}
       />
     </View>