IjzerenHein / IjzerenHein/react-navigation-shared-element

Shared Element Crashing on Android. React Navigationn V5.

Open
#171 9 comments 1 reaction 0 assignees View on GitHub
android
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.