Problem with SharedElement animation while trying to navigate between different tabs in BottomTabNavigator

Nobody has claimed this yet.

```
"@react-navigation/bottom-tabs": "5.11.2",
"@react-navigation/native": "~5.8.10",
"@react-navigation/stack": "~5.12.8",
"expo": "~40.0.0",
"react-native-gesture-handler": "~1.8.0",
"react-native-reanimated": "^2.0.0",
"react-native-screens": "~2.15.0",
"react-native-shared-element": "^0.7.0",
"react-navigation-shared-element": "^3.0.0"
```

Hey! 👋

I have a problem while trying to navigate from `AccountComponent` to `InformationComponent` (from `AccountStack` to `InformationStack`). I would like to see working animation on the SharedElement which is rendered under two different `BottomTab.Screen`. I've tried to look into examples to find the solution and I found [that example](https://github.com/IjzerenHein/react-navigation-shared-element/blob/master/example/src/tests/BottomTabs.tsx). Unfortunately it's not working for me. Animation works only if two components(screens) are part of the same stack in BottomTabNavigator. Unfortunately, I need them in two different stacks and in that case, the animation does not work. Hope someone will be able to help me.

Code sample below ⬇️

```
import { Ionicons } from '@expo/vector-icons'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import * as React from 'react'
import { Pressable, Text, View } from 'react-native'
import { createSharedElementStackNavigator, SharedElement } from 'react-navigation-shared-element'

import { Colors } from '@constants/Colors'
import { useColorScheme } from '@hooks/useColorScheme'

import { RouteParamsMap } from '../RouteParamsMap'
import { Routes } from '../types'

type BottomTabRoutes =
| Routes.AccountStack
| Routes.InformationStack
| Routes.HistoryStack
| Routes.RaiseIssueStack
type BottomTabParamsMap = Pick

const BottomTab = createBottomTabNavigator()

//TODO: Create RaiseIssueStack, AccountStack, InformationStack, HistoryStack and delete those temporary components
const RaiseComponent = () => {
return (

RAISE

)
}

const AccountComponent = props => {
return (


props.navigation.navigate(Routes.InformationStack)}>
Account



)
}

const InformationComponent = props => {
return (


props.navigation.goBack()}>
INFORMATION



)
}

const HistoryComponent = () => {
return (

HISTORY

)
}

AccountComponent.sharedElements = route => {
return [
{
id: `sharedId`,
animation: 'fade',
resize: 'clip',
align: 'left-top',
},
]
}

InformationComponent.sharedElements = route => {
return [
{
id: `sharedId`,
animation: 'fade',
resize: 'clip',
align: 'left-top',
},
]
}

const Stack = createSharedElementStackNavigator()
const Stack2 = createSharedElementStackNavigator()

const AccountStack = () => (


{/* */}

)

const InformationStack = () => (

{/* */}


)

export function BottomTabNavigator() {
const colorScheme = useColorScheme()

return (

,
}}
/>
,
}}
/>
,
}}
/>
,
}}
/>

)
}

// You can explore the built-in icon families and icons on the web at:
// https://icons.expo.fyi/
function TabBarIcon(props: { name: React.ComponentProps['name']; color: string }) {
return
}
```

Start with the supplied BottomTabNavigator setup and compare it with example/src/tests/BottomTabs.tsx, especially the separate AccountStack and InformationStack navigators. Reproduce navigation from AccountComponent to InformationComponent and determine whether the shared element can animate across the two BottomTab.Screen stacks. Done means the sharedId element animates in both directions between the tabs.

Written by the indexing model from the issue text.