IjzerenHein / IjzerenHein/react-navigation-shared-element
Shared Element Crashing on Android. React Navigationn V5.
- Dominant language
- TypeScript
- Stars
- 1.3k
- Forks
- 125
- PR merge metrics
- No merged PRs in 30d
Description
Once I try to Navigate to my detail screen I get the following error.
`Error React.Children only expected to receive a single React element child`
Transition works well on IOS.
I'm passing sharedElementsConfig on my HomeStack.screen and when I comment that out, it works on android but transition won't show.
```tsx
const sharedElementsConfig = (route: any) => {
const { item } = route.params;
if (Platform.OS !== 'android') {
return [
{
id: `item.${item._id}.backdrop`,
// animation: 'fade-out',
// resize: 'none',
},
{
id: `item.${item._id}.meta`,
animation: 'fade',
resize: 'none',
},
{
id: `item.${item._id}.image`,
otherId: `item.${item._id}.image`,
// animation: 'move',
resize: 'auto',
},
];
}
return null;
};
sharedElementsConfig(route)}
/>
```
Stats:
react-native : 0.63.4
"react-native-shared-element": "^0.7.0",
"react-navigation-shared-element": "5.0.0-alpha1",
I'm currently by-passing android to get the app to run, any solution will be appreciated.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the sharedElementsConfig callback and the HomeStack.Screen declaration shown in the issue, then reproduce navigation to MovieDetailPreview on Android with the listed React Native and shared-element versions. Compare behavior with sharedElementsConfig disabled and inspect the Android transition path. Done means the navigation no longer throws the React.Children error while the shared-element transition remains available.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100