Smol UX Fixes (#655)

* hotfix for context sheet items being too close to the system navigation bar

remove nitro image

fix tap gesture overriding pan gesture in the SwipeableRow
This commit is contained in:
Violet Caulfield
2025-11-09 10:09:25 -06:00
committed by GitHub
parent 2ec2aafc02
commit e7394ed9a4
6 changed files with 55 additions and 137 deletions
-70
View File
@@ -12,36 +12,6 @@ PODS:
- hermes-engine (0.82.1):
- hermes-engine/Pre-built (= 0.82.1)
- hermes-engine/Pre-built (0.82.1)
- NitroImage (0.8.1):
- boost
- DoubleConversion
- fast_float
- fmt
- glog
- hermes-engine
- NitroModules
- RCT-Folly
- RCT-Folly/Fabric
- RCTRequired
- RCTTypeSafety
- React-callinvoker
- React-Core
- React-debug
- React-Fabric
- React-featureflags
- React-graphics
- React-ImageManager
- React-jsi
- React-NativeModulesApple
- React-RCTFabric
- React-renderercss
- React-rendererdebug
- React-utils
- ReactCodegen
- ReactCommon/turbomodule/bridging
- ReactCommon/turbomodule/core
- SocketRocket
- Yoga
- NitroModules (0.31.3):
- boost
- DoubleConversion
@@ -130,38 +100,6 @@ PODS:
- ReactCommon/turbomodule/core
- SocketRocket
- Yoga
- NitroWebImage (0.8.1):
- boost
- DoubleConversion
- fast_float
- fmt
- glog
- hermes-engine
- NitroImage
- NitroModules
- RCT-Folly
- RCT-Folly/Fabric
- RCTRequired
- RCTTypeSafety
- React-callinvoker
- React-Core
- React-debug
- React-Fabric
- React-featureflags
- React-graphics
- React-ImageManager
- React-jsi
- React-NativeModulesApple
- React-RCTFabric
- React-renderercss
- React-rendererdebug
- React-utils
- ReactCodegen
- ReactCommon/turbomodule/bridging
- ReactCommon/turbomodule/core
- SDWebImage
- SocketRocket
- Yoga
- PromisesObjC (2.4.0)
- Protobuf (3.29.5)
- RCT-Folly (2024.11.18.00):
@@ -3098,11 +3036,9 @@ DEPENDENCIES:
- fmt (from `../node_modules/react-native/third-party-podspecs/fmt.podspec`)
- glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
- hermes-engine (from `../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`)
- NitroImage (from `../node_modules/react-native-nitro-image`)
- NitroModules (from `../node_modules/react-native-nitro-modules`)
- NitroOta (from `../node_modules/react-native-nitro-ota`)
- NitroOtaBundleManager (from `../node_modules/react-native-nitro-ota`)
- NitroWebImage (from `../node_modules/react-native-nitro-web-image`)
- RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
- RCTDeprecation (from `../node_modules/react-native/ReactApple/Libraries/RCTFoundation/RCTDeprecation`)
- RCTRequired (from `../node_modules/react-native/Libraries/Required`)
@@ -3224,16 +3160,12 @@ EXTERNAL SOURCES:
hermes-engine:
:podspec: "../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec"
:tag: hermes-2025-09-01-RNv0.82.0-265ef62ff3eb7289d17e366664ac0da82303e101
NitroImage:
:path: "../node_modules/react-native-nitro-image"
NitroModules:
:path: "../node_modules/react-native-nitro-modules"
NitroOta:
:path: "../node_modules/react-native-nitro-ota"
NitroOtaBundleManager:
:path: "../node_modules/react-native-nitro-ota"
NitroWebImage:
:path: "../node_modules/react-native-nitro-web-image"
RCT-Folly:
:podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec"
RCTDeprecation:
@@ -3421,11 +3353,9 @@ SPEC CHECKSUMS:
glog: 5683914934d5b6e4240e497e0f4a3b42d1854183
google-cast-sdk: 1fb6724e94cc5ff23b359176e0cf6360586bb97a
hermes-engine: 273e30e7fb618279934b0b95ffab60ecedb7acf5
NitroImage: 76da8995cc5476111ac5069300a3ec5de0f65e9b
NitroModules: ca848159e82a7e9ae956ffe26c34a11631e6176b
NitroOta: b4f7cdbe660e8f07f80f5eb9f169d70f698ea284
NitroOtaBundleManager: 5e7c0f8c3f76cc06f9fe07a63879fe35496c27c7
NitroWebImage: 5cd76cf34fb1661acc4daf5a6925d5a29448c7c4
PromisesObjC: f5707f49cb48b9636751c5b2e7d227e43fba9f47
Protobuf: 164aea2ae380c3951abdc3e195220c01d17400e0
RCT-Folly: 846fda9475e61ec7bcbf8a3fe81edfcaeb090669
+51 -51
View File
@@ -1,60 +1,60 @@
// Mock for react-native-nitro-image
import React from 'react'
import { Image, ImageProps } from 'react-native'
// // Mock for react-native-nitro-image
// import React from 'react'
// import { Image, ImageProps } from 'react-native'
// Mock the useWebImage hook
const mockUseWebImage = jest.fn(() => ({
imageUri: 'mock://image.jpg',
isLoading: false,
error: null,
}))
// // Mock the useWebImage hook
// const mockUseWebImage = jest.fn(() => ({
// imageUri: 'mock://image.jpg',
// isLoading: false,
// error: null,
// }))
// Define types for NitroImage props
interface NitroImageProps extends Omit<ImageProps, 'source'> {
image?: {
url: string
}
}
// // Define types for NitroImage props
// interface NitroImageProps extends Omit<ImageProps, 'source'> {
// image?: {
// url: string
// }
// }
// Mock the NitroImage component to behave like a regular Image
const MockNitroImage = (props: NitroImageProps) => {
// Extract the URL from the image prop if it exists
const source = props.image?.url ? { uri: props.image.url } : undefined
// // Mock the NitroImage component to behave like a regular Image
// const MockNitroImage = (props: NitroImageProps) => {
// // Extract the URL from the image prop if it exists
// const source = props.image?.url ? { uri: props.image.url } : undefined
// Destructure to separate the custom image prop from standard Image props
const { image, ...restProps } = props
// // Destructure to separate the custom image prop from standard Image props
// const { image, ...restProps } = props
// Pass through other props while converting to Image component props
const imageProps: ImageProps = {
...restProps,
source,
}
// // Pass through other props while converting to Image component props
// const imageProps: ImageProps = {
// ...restProps,
// source,
// }
return React.createElement(Image, imageProps)
}
// return React.createElement(Image, imageProps)
// }
// Mock the entire react-native-nitro-image module
jest.mock('react-native-nitro-image', () => ({
useWebImage: mockUseWebImage,
NitroImage: MockNitroImage,
// Add other exports that might be used
createImageFactory: jest.fn(),
ImageFactory: jest.fn(),
}))
// // Mock the entire react-native-nitro-image module
// jest.mock('react-native-nitro-image', () => ({
// useWebImage: mockUseWebImage,
// NitroImage: MockNitroImage,
// // Add other exports that might be used
// createImageFactory: jest.fn(),
// ImageFactory: jest.fn(),
// }))
// Mock the underlying native module that causes the error
jest.mock('react-native-nitro-modules', () => ({
NitroModules: {
createModule: jest.fn(),
install: jest.fn(),
},
createNitroModule: jest.fn(),
}))
// // Mock the underlying native module that causes the error
// jest.mock('react-native-nitro-modules', () => ({
// NitroModules: {
// createModule: jest.fn(),
// install: jest.fn(),
// },
// createNitroModule: jest.fn(),
// }))
// Additional mock for the TurboModule spec that's failing
jest.mock('react-native-nitro-modules/src/turbomodule/NativeNitroModules', () => ({
default: {
installModule: jest.fn(),
uninstallModule: jest.fn(),
},
}))
// // Additional mock for the TurboModule spec that's failing
// jest.mock('react-native-nitro-modules/src/turbomodule/NativeNitroModules', () => ({
// default: {
// installModule: jest.fn(),
// uninstallModule: jest.fn(),
// },
// }))
-2
View File
@@ -77,10 +77,8 @@
"react-native-haptic-feedback": "^2.3.3",
"react-native-linear-gradient": "^2.8.3",
"react-native-mmkv": "3.3.3",
"react-native-nitro-image": "0.8.1",
"react-native-nitro-modules": "^0.31.3",
"react-native-nitro-ota": "^0.4.0",
"react-native-nitro-web-image": "0.8.1",
"react-native-pager-view": "^6.9.1",
"react-native-reanimated": "4.1.3",
"react-native-safe-area-context": "5.6.2",
+1 -2
View File
@@ -108,8 +108,7 @@ export default function ItemContext({
useEffect(() => trigger('impactLight'), [item?.Id])
return (
// Tons of padding top for iOS on the scrollview otherwise the context sheet header overlaps the content
<YGroup unstyled>
<YGroup unstyled marginBottom={'$8'}>
<FavoriteContextMenuRow item={item} />
{renderAddToQueueRow && <AddToQueueMenuRow tracks={itemTracks} />}
@@ -121,11 +121,12 @@ export default function SwipeableRow({
const tapGesture = useMemo(() => {
return Gesture.Tap()
.runOnJS(true)
.maxDistance(2)
.onBegin(() => {
fgOpacity.set(0.5)
})
.onEnd(() => {
if (onPress) {
.onEnd((e, success) => {
if (onPress && success) {
triggerHaptic('impactLight')
onPress()
}
-10
View File
@@ -8422,11 +8422,6 @@ react-native-mmkv@3.3.3:
resolved "https://registry.yarnpkg.com/react-native-mmkv/-/react-native-mmkv-3.3.3.tgz#1f0326f6314e23725af8145964343224d074e6cd"
integrity sha512-GMsfOmNzx0p5+CtrCFRVtpOOMYNJXuksBVARSQrCFaZwjUyHJdQzcN900GGaFFNTxw2fs8s5Xje//RDKj9+PZA==
react-native-nitro-image@0.8.1:
version "0.8.1"
resolved "https://registry.yarnpkg.com/react-native-nitro-image/-/react-native-nitro-image-0.8.1.tgz#eb2eeaad1ae99a7a917d8aeacf1532e40bb6afeb"
integrity sha512-K3PKUdmCGIiiSFleyGWskgsUsLAKkUi//JrzYY+Pj+ElOP7D0HozPlwMmwCPOtTvbiDjBuF9DXFZzob8FlziSw==
react-native-nitro-modules@^0.31.3:
version "0.31.3"
resolved "https://registry.yarnpkg.com/react-native-nitro-modules/-/react-native-nitro-modules-0.31.3.tgz#19d26c3c677921687a42ed9c9943050034b3aebe"
@@ -8437,11 +8432,6 @@ react-native-nitro-ota@^0.4.0:
resolved "https://registry.yarnpkg.com/react-native-nitro-ota/-/react-native-nitro-ota-0.4.0.tgz#996b2ccaf6accc92b1d352df448250ca35a6d2e6"
integrity sha512-/JAoM2m3WsvnO7dC51bf5jCghxO78yrP3vHyq3/itK+MqiwU8HPk8bGbXLhE+/GYRPS8DbUHGrzptzO2KOoutQ==
react-native-nitro-web-image@0.8.1:
version "0.8.1"
resolved "https://registry.yarnpkg.com/react-native-nitro-web-image/-/react-native-nitro-web-image-0.8.1.tgz#baa192dbd7363789cc06414088a6fe7cada544b9"
integrity sha512-8dGe1UKEYubcsu7dixyVbHvqUN8ZAzzJMZz1buUcttoBm8A7oVnNtj4lDzz5oUVNnMrTk0L0dsMjw/QfLjN6jw==
react-native-pager-view@^6.9.1:
version "6.9.1"
resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-6.9.1.tgz#a9e6d9323935cc2ae1d46d7816b66f76dc3eff8e"