layout fixes for android (samsung) (#827)

* layout fixes * animation and layout fixes for android devices, specifically samsung devices fixes the overlap of elements that occurs on the home screen and discover screen
2025-12-16 18:55:44 -06:00 · 2025-12-14 08:37:58 -06:00
parent d722512fc8
commit 2ad4b4fc9c
12 changed files with 52 additions and 28 deletions
--- a/android/app/src/main/java/com/jellify/MainApplication.kt
+++ b/android/app/src/main/java/com/jellify/MainApplication.kt
@@ -4,7 +4,6 @@ import  android.app.Application
 import com.facebook.react.PackageList
 import com.facebook.react.ReactApplication
 import com.facebook.react.ReactHost
-import com.facebook.react.ReactNativeHost
 import com.facebook.react.ReactPackage
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
 import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
--- a/bun.lock
+++ b/bun.lock
@@ -48,7 +48,7 @@
        "react-native-nitro-modules": "0.31.10",
        "react-native-nitro-ota": "0.8.2",
        "react-native-pager-view": "^7.0.2",
-        "react-native-reanimated": "4.2.0",
+        "react-native-reanimated": "4.1.6",
        "react-native-safe-area-context": "5.6.2",
        "react-native-screens": "4.18.0",
        "react-native-sortables": "1.9.4",
@@ -1936,7 +1936,7 @@

    "react-native-pager-view": ["react-native-pager-view@7.0.2", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-yj/v6BN/WGuV1VBVWaCjYOjQlhTaqJs4Ocismw0XRSsHGqO2wuQdWF8it5iFnfibQVBBED0/GC7qKOlQ4FBzNg=="],

-    "react-native-reanimated": ["react-native-reanimated@4.2.0", "", { "dependencies": { "react-native-is-edge-to-edge": "1.2.1", "semver": "7.7.3" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-worklets": ">=0.7.0" } }, "sha512-frhu5b8/m/VvaMWz48V8RxcsXnE3hrlErQ5chr21MzAeDCpY4X14sQjvm+jvu3aOI+7Cz2atdRpyhhIuqxVaXg=="],
+    "react-native-reanimated": ["react-native-reanimated@4.1.6", "", { "dependencies": { "react-native-is-edge-to-edge": "^1.2.1", "semver": "7.7.2" }, "peerDependencies": { "@babel/core": "^7.0.0-0", "react": "*", "react-native": "*", "react-native-worklets": ">=0.5.0" } }, "sha512-F+ZJBYiok/6Jzp1re75F/9aLzkgoQCOh4yxrnwATa8392RvM3kx+fiXXFvwcgE59v48lMwd9q0nzF1oJLXpfxQ=="],

    "react-native-safe-area-context": ["react-native-safe-area-context@5.6.2", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-4XGqMNj5qjUTYywJqpdWZ9IG8jgkS3h06sfVjfw5yZQZfWnRFXczi0GnYyFyCc2EBps/qFmoCH8fez//WumdVg=="],

@@ -2568,7 +2568,7 @@

    "react-native-blob-util/glob": ["glob@10.5.0", "", { "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", "minimatch": "^9.0.4", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^1.11.1" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg=="],

-    "react-native-reanimated/semver": ["semver@7.7.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q=="],
+    "react-native-reanimated/semver": ["semver@7.7.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],

    "react-native-worklets/@babel/plugin-transform-optional-chaining": ["@babel/plugin-transform-optional-chaining@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1", "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-BQmKPPIuc8EkZgNKsv0X4bPmOoayeu4F1YCwx2/CfmDSXDbp7GnzlUH+/ul5VGfRg1AoFPsrIThlEBj2xb4CAg=="],

--- a/ios/Jellify.xcodeproj/project.pbxproj
+++ b/ios/Jellify.xcodeproj/project.pbxproj
@@ -94,6 +94,8 @@
 /* Begin PBXFileSystemSynchronizedRootGroup section */
 		CFE47DDB2EA56B0200EB6067 /* icons */ = {
 			isa = PBXFileSystemSynchronizedRootGroup;
+			exceptions = (
+			);
 			path = icons;
 			sourceTree = "<group>";
 		};
@@ -397,14 +399,10 @@
 			inputFileListPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-Jellify/Pods-Jellify-frameworks-${CONFIGURATION}-input-files.xcfilelist",
 			);
-			inputPaths = (
-			);
 			name = "[CP] Embed Pods Frameworks";
 			outputFileListPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-Jellify/Pods-Jellify-frameworks-${CONFIGURATION}-output-files.xcfilelist",
 			);
-			outputPaths = (
-			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Jellify/Pods-Jellify-frameworks.sh\"\n";
@@ -418,14 +416,10 @@
 			inputFileListPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-Jellify/Pods-Jellify-resources-${CONFIGURATION}-input-files.xcfilelist",
 			);
-			inputPaths = (
-			);
 			name = "[CP] Copy Pods Resources";
 			outputFileListPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-Jellify/Pods-Jellify-resources-${CONFIGURATION}-output-files.xcfilelist",
 			);
-			outputPaths = (
-			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Jellify/Pods-Jellify-resources.sh\"\n";
@@ -713,7 +707,10 @@
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 					"-DFOLLY_HAVE_CLOCK_GETTIME=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				STRING_CATALOG_GENERATE_SYMBOLS = YES;
@@ -801,7 +798,10 @@
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 					"-DFOLLY_HAVE_CLOCK_GETTIME=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				STRING_CATALOG_GENERATE_SYMBOLS = YES;
@@ -931,7 +931,10 @@
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 					"-DFOLLY_HAVE_CLOCK_GETTIME=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				STRING_CATALOG_GENERATE_SYMBOLS = YES;
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -2966,7 +2966,7 @@ PODS:
    - ReactCommon/turbomodule/core
    - SocketRocket
    - Yoga
-  - RNReanimated (4.2.0):
+  - RNReanimated (4.1.6):
    - boost
    - DoubleConversion
    - fast_float
@@ -2993,11 +2993,11 @@ PODS:
    - ReactCodegen
    - ReactCommon/turbomodule/bridging
    - ReactCommon/turbomodule/core
-    - RNReanimated/reanimated (= 4.2.0)
+    - RNReanimated/reanimated (= 4.1.6)
    - RNWorklets
    - SocketRocket
    - Yoga
-  - RNReanimated/reanimated (4.2.0):
+  - RNReanimated/reanimated (4.1.6):
    - boost
    - DoubleConversion
    - fast_float
@@ -3024,11 +3024,11 @@ PODS:
    - ReactCodegen
    - ReactCommon/turbomodule/bridging
    - ReactCommon/turbomodule/core
-    - RNReanimated/reanimated/apple (= 4.2.0)
+    - RNReanimated/reanimated/apple (= 4.1.6)
    - RNWorklets
    - SocketRocket
    - Yoga
-  - RNReanimated/reanimated/apple (4.2.0):
+  - RNReanimated/reanimated/apple (4.1.6):
    - boost
    - DoubleConversion
    - fast_float
@@ -3689,7 +3689,7 @@ SPEC CHECKSUMS:
  RNFS: 89de7d7f4c0f6bafa05343c578f61118c8282ed8
  RNGestureHandler: 73726300d4c5ca4d80378cae85f9dad8908b3289
  RNReactNativeHapticFeedback: be4f1b4bf0398c30b59b76ed92ecb0a2ff3a69c6
-  RNReanimated: c86c4fdafbeb0ecff9ae8bbc65a16dd09c0e2fde
+  RNReanimated: 942d757148da78f5663d1fdf9ab71d1e75946c22
  RNScreens: d821082c6dd1cb397cc0c98b026eeafaa68be479
  RNSentry: d48cee794dd35d77930dcf89b983dc8c6498ec0d
  RNWorklets: 69f7239afaf3a156f7f9549eeb0ae8d02adc095f
--- a/package.json
+++ b/package.json
@@ -80,7 +80,7 @@
    "react-native-nitro-modules": "0.31.10",
    "react-native-nitro-ota": "0.8.2",
    "react-native-pager-view": "^7.0.2",
-    "react-native-reanimated": "4.2.0",
+    "react-native-reanimated": "4.1.6",
    "react-native-safe-area-context": "5.6.2",
    "react-native-screens": "4.18.0",
    "react-native-sortables": "1.9.4",
--- a/patches/react-native-reanimated+4.1.6.patch
+++ b/patches/react-native-reanimated+4.1.6.patch
@@ -0,0 +1,13 @@
+diff --git a/node_modules/react-native-reanimated/compatibility.json b/node_modules/react-native-reanimated/compatibility.json
+index f1ba9cb..234363b 100644
+--- a/node_modules/react-native-reanimated/compatibility.json
+++ b/node_modules/react-native-reanimated/compatibility.json
+@@ -4,7 +4,7 @@
+     "react-native-worklets": ["nightly"]
+   },
+   "4.1.x": {
+-    "react-native": ["0.78", "0.79", "0.80", "0.81", "0.82"],
+    "react-native": ["0.78", "0.79", "0.80", "0.81", "0.82", "0.83"],
+     "react-native-worklets": ["0.5.x", "0.6.x", "0.7.x"]
+   },
+   "4.0.x": {
--- a/src/components/Discover/helpers/just-added.tsx
+++ b/src/components/Discover/helpers/just-added.tsx
@@ -21,6 +21,9 @@ export default function RecentlyAdded(): React.JSX.Element | undefined {
 				exiting={FadeOut.springify()}
 				layout={LinearTransition.springify()}
 				testID='discover-recently-added'
+				style={{
+					flex: 1,
+				}}
 			>
 				<XStack
 					alignItems='center'
--- a/src/components/Discover/helpers/public-playlists.tsx
+++ b/src/components/Discover/helpers/public-playlists.tsx
@@ -32,6 +32,9 @@ export default function PublicPlaylists() {
 				exiting={FadeIn.springify()}
 				layout={LinearTransition.springify()}
 				testID='discover-public-playlists'
+				style={{
+					flex: 1,
+				}}
 			>
 				<XStack
 					alignItems='center'
--- a/src/components/Discover/helpers/suggested-artists.tsx
+++ b/src/components/Discover/helpers/suggested-artists.tsx
@@ -22,6 +22,9 @@ export default function SuggestedArtists(): React.JSX.Element | undefined {
 				exiting={FadeOut.springify()}
 				layout={LinearTransition.springify()}
 				testID='discover-suggested-artists'
+				style={{
+					flex: 1,
+				}}
 			>
 				<XStack
 					alignItems='center'
--- a/src/components/Home/helpers/frequent-artists.tsx
+++ b/src/components/Home/helpers/frequent-artists.tsx
@@ -45,8 +45,8 @@ export default function FrequentArtists(): React.JSX.Element {

 	return frequentArtistsInfiniteQuery.data ? (
 		<Animated.View
-			entering={FadeIn}
-			exiting={FadeOut}
+			entering={FadeIn.springify()}
+			exiting={FadeOut.springify()}
 			layout={LinearTransition.springify()}
 			style={{
 				flex: 1,
--- a/src/components/Home/helpers/recent-artists.tsx
+++ b/src/components/Home/helpers/recent-artists.tsx
@@ -51,8 +51,8 @@ export default function RecentArtists(): React.JSX.Element {

 	return recentArtistsInfiniteQuery.data ? (
 		<Animated.View
-			entering={FadeIn}
-			exiting={FadeOut}
+			entering={FadeIn.springify()}
+			exiting={FadeOut.springify()}
 			layout={LinearTransition.springify()}
 			style={{
 				flex: 1,
--- a/src/components/Home/helpers/recently-played.tsx
+++ b/src/components/Home/helpers/recently-played.tsx
@@ -34,8 +34,8 @@ export default function RecentlyPlayed(): React.JSX.Element {

 	return tracksInfiniteQuery.data ? (
 		<Animated.View
-			entering={FadeIn}
-			exiting={FadeOut}
+			entering={FadeIn.springify()}
+			exiting={FadeOut.springify()}
 			layout={LinearTransition.springify()}
 			style={{
 				flex: 1,