Open jsindos opened 2 years ago
Hi, I switched to the main branch, "react-navigation-shared-element": "^3.1.3"
. There is a different issue now, the component "blinks" when transitioning.
https://user-images.githubusercontent.com/8110172/132606987-0cc5025e-729c-42ab-a2bc-f44aec4c4945.mov
I can confirm the navigation system is doing something, because when I remove the static config in screen 2 the blinking goes away.
navigator
import React from 'react'
import { createSharedElementStackNavigator } from 'react-navigation-shared-element'
import { enableScreens } from 'react-native-screens'
import Explore from './Explore'
import Search from './Search'
enableScreens()
const Stack = createSharedElementStackNavigator()
export default () => {
return (
<Stack.Navigator headerMode='none'>
<Stack.Screen name='Explore' component={Explore} initialParams={{ title: 'Explore' }} />
<Stack.Screen
name='Search' component={Search} options={() => ({
gestureEnabled: false
})}
initialParams={{ title: 'Search' }}
/>
</Stack.Navigator>
)
}
screen 1
import React from 'react'
import { View, Text } from 'react-native'
import { SharedElement } from 'react-navigation-shared-element'
import SearchBar from './SearchBar'
export default ({ route: { params } }) => {
return (
<View>
<Text>
Hello
</Text>
<SharedElement id='searchBar'>
<SearchBar {...params} />
</SharedElement>
</View>
)
}
screen 2
import React from 'react'
import { View, Text } from 'react-native'
import { SharedElement } from 'react-navigation-shared-element'
import SearchBar from './SearchBar'
const Search = ({ route: { params } }) => {
return (
<View>
<SharedElement id='searchBar'>
<SearchBar {...params} />
</SharedElement>
<Text>
Hello
</Text>
</View>
)
}
Search.sharedElements = (route, otherRoute, showing) => {
return ['searchBar']
}
export default Search
shared element
import React from 'react'
import { useNavigation } from '@react-navigation/native'
import { View, Text } from 'react-native'
export default ({ title }) => {
const navigation = useNavigation()
return (
<View style={[{ paddingTop: 10, paddingBottom: 10, alignItems: 'center' }]}>
<Text onPress={() => navigation.navigate('Search')} style={{ fontSize: 32 }}>
{title}
</Text>
</View>
)
}
Hi, I just tested in the ios simulator and the blinking goes away. Realised the transitions don't work when running expo web
which I am OK with :)
Yeah web is not supported yet (unfinished implementation) https://github.com/IjzerenHein/react-native-shared-element#under-development
Hi, for some reason there is an animation of my shared element even though the DOM of the two screens housing the component are completely identical. Screen 2 is navigated to from screen 1 when the TextInput is focussed.
https://user-images.githubusercontent.com/8110172/132151190-edf63f49-776e-4888-8dbd-8b48ffcb38fd.mov
I am on the
navigation-v5
branch.navigator
screen 1
screen 2
shared element