IjzerenHein / IjzerenHein/react-navigation-shared-element
shared element is animating without anything different in dom between screen 1 and screen 2
- Dominant language
- TypeScript
- Stars
- 1.3k
- Forks
- 125
- PR merge metrics
- No merged PRs in 30d
Description
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
```
import React from 'react'
import { createSharedElementStackNavigator } from 'react-navigation-shared-element'
import { enableScreens } from 'react-native-screens'
enableScreens()
import Explore from './Explore'
import Search from './Search'
const Stack = createSharedElementStackNavigator()
export default () => {
return (
({
gestureEnabled: false
})}
/>
)
}
```
screen 1
```
import React from 'react'
import { View } from 'react-native'
import { SharedElement } from 'react-navigation-shared-element'
import SearchBar from './SearchBar'
export default () => {
return (
)
}
```
screen 2
```
import React from 'react'
import { View } from 'react-native'
import { SharedElement } from 'react-navigation-shared-element'
import SearchBar from './SearchBar'
const Search = () => {
return (
)
}
Search.sharedElements = (route, otherRoute, showing) => {
return ['searchBar']
}
export default Search
```
shared element
```
import React from 'react'
import styled from 'styled-components/native'
import { useNavigation } from '@react-navigation/native'
import { View, Animated } from 'react-native'
import Search from '../assets/Search'
export default () => {
const navigation = useNavigation()
return (
<$SearchBar style={{ marginRight: 5 }}>
<$SearchText
placeholder='What are you looking for?'
onFocus={() => navigation.navigate('Search')}
/>
)
}
const $SearchBar = styled(Animated.View)`
alignItems: center;
paddingVertical: 10px;
paddingHorizontal: 10px;
display: flex;
justifyContent: center;
flexDirection: row;
backgroundColor: #FFF;
`
const $SearchText = styled.TextInput`
fontSize: 14px;
flex: 1;
color: #222;
fontFamily: "OpenSans-SemiBold";
textAlign: left;
marginLeft: 12px;
outline-style: none;
`
```
Contributor guide
No contributing guide indexed for this repository
Research direction
Start on the navigation-v5 branch with the navigator, Explore, Search, and SearchBar snippets from the issue. Reproduce the transition by focusing the TextInput on screen 1 and navigating to Search, then inspect the shared element registration and screen options. Done means the unwanted animation is explained and the issue's reported behavior is corrected or clearly characterized.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- frontend, mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100