IjzerenHein / IjzerenHein/react-navigation-shared-element

shared element is animating without anything different in dom between screen 1 and screen 2

Open
#192 3 comments 0 reactions 0 assignees View on GitHub
web
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.