ijzerenhein/react-navigation-shared-element

React Navigation bindings for react-native-shared-element 💫

LOOKING FOR A NEW HOME OR MAINTAINER

Both react-native-shared-element and react-navigation-shared-element are looking for a new Home or Maintainer. It is no longer possible for me to maintain these repositories. Please reach out to me personally if you want to take over maintenance or have ideas or suggestions for a new home.

Read the full statement here.

React Navigation Shared Element

React Navigation bindings for react-native-shared-element 💫

Documentation

• Shared element for the React Navigation 5/6 API
• Shared element for the React Navigation 4 API
• Migration guide

Compatibility

The following versions or react-navigation and the stack navigator are supported.

Version	React-Navigation	Comments
3.x	4, 5 & 6	Import from react-navigation-shared-element/build/v4 to use it with 4.x.
2.x	3 & 4	This version is compatible with react-navigation-stack@2.
1.x	3 & 4	This version is compatible with react-navigation-stack@1.

Things to know

• react-navigation-shared-element uses the JS based Stack Navigator. The Native Stack Navigator is currently under development here. Also see this issue.
• React Navigation 6 Group components are not yet supported.
• On detaching inactive screens a blink may occur on Android. Because of this detachInactiveScreens is set to false by default on Android.

Demo App

• ./example

Videos

• Snapchat Shared Transitions - “Can it be done in React Native?” (with react-navigation v5)
• Airbnb Shared Transition - “Can it be done in React Native?” (with react-navigation v4)

Sponsors

This library is made possible by these wonderful people and companies.

License

React navigation shared element library is licensed under The MIT License.

react-navigation-shared-element's Issues

[v5] - Image not always positioned correctly

I'm trying to test RNSHE with react-navigation v5 but there seems to be an issue sometimes with the positing of the image. Sometimes even when navigating back, it will not tie do the animation or the image will disappear

here's a quick video of whats happening

.

and here's my code

stack

const PreventionStack = createSharedElementStackNavigator<
  PreventionParamsList
>();

function PreventionNavStack() {
  useFocusEffect(
    React.useCallback(() => {
      StatusBar.setBarStyle('light-content');
      Platform.OS === 'android' &&
        StatusBar.setBackgroundColor(Colors.primaryColor);
    }, []),
  );
  return (
    <PreventionStack.Navigator screenOptions={defaultScreenOptions}>
      <PreventionStack.Screen
        name="Prevention"
        component={Prevention}
        options={{ headerTitle: 'Prevención' }}
      />
      <PreventionStack.Screen
        name="PreventionDetail"
        component={PreventionDetail}
        options={{ headerTitle: '' }}
        initialParams={{
          item: {
            id: '0',
            image: 'unknown',
            title: '',
            longText: '',
            shortText: '',
          },
        }}
        sharedElementsConfig={route => {
          const { item } = route.params;
          return [
            {
              id: item.id,
            },
          ];
        }}
      />
    </PreventionStack.Navigator>
  );
}

list page

export default function Prevention({
  navigation,
}: PreventionStackNavProps<'Prevention'>) {
  const renderItem = ({ item }) => {
    return (
      <TouchableWithoutFeedback
        containerStyle={{ flexDirection: 'row' }}
        onPress={() =>
          navigation.navigate('PreventionDetail', {
            item,
          })
        }
      >
        <View style={styles.card}>
          <SharedElement id={item.id}>
            <Image
              source={item.image}
              style={styles.cardImage}
              resizeMode="cover"
            />
          </SharedElement>
          <Text style={styles.cardTitle}>{item.title}</Text>
          <Text style={styles.cardText}>{item.shortText}</Text>
        </View>
      </TouchableWithoutFeedback>
    );
  };
  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        contentContainerStyle={{ justifyContent: 'center' }}
        renderItem={renderItem}
        keyExtractor={i => i.id}
        numColumns={2}
        showsVerticalScrollIndicator={false}
      />
    </View>
  );
}

detail page

export default function PreventionDetail({
  route,
}: PreventionStackNavProps<'PreventionDetail'>) {
  const {
    item: { id, image, longText, title },
  } = route.params;
  return (
    <ScrollView
      contentContainerStyle={styles.container}
      showsVerticalScrollIndicator={false}
    >
      <SharedElement id={id}>
        <Image source={image} style={styles.image} resizeMode="cover" />
      </SharedElement>
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.text}>{longText}</Text>
    </ScrollView>
  );
}

I'm using

"@react-navigation/bottom-tabs": "^5.2.1"
"@react-navigation/native": "^5.1.0"
"@react-navigation/stack": "^5.2.1"
"react-navigation-shared-element": "^5.0.0-alpha1"
"react-native-shared-element": "^0.5.6"

[Android] Buggy animation when moving TextInput

Description

I have this issue when trying to transitioning the TextInput. As you can see in the gif below, there's a glitch when going back from the Search screen to the Home screen because the Keyboard is not completely closed and it affects the animation.

A possible workaround is to hide the keyboard and wait a small amount of time before going back.

I have created a PR #61 to reproduce the issue. Please take a look and let me know if there's anything I can help with. Thank you!

Screenshots

[v5] Buggy animations when moving back fast (with screenshots, demo app)

Thank you for this magic, and the alpha of the v5 support (#2 (comment)) !

Bug: When you navigate from a detail screen back to the list screen within about a second, and then back again, the shared element is rendered without any animation. There also seems to be a weird pause after animating.

Demo app: https://github.com/jonmountjoy/react-native-shared-element-navigation-demo

You can see the problem here:

Here it is again, without using a fade animation. You'll see an odd pause.

Bedankt!

Doesn't work with ScrollView on destination screen

When destination screen has ScrollView, shared element doesn't scroll as it should.

I already have custom transitionSpec set, and it doesn't help.

[email protected]
[email protected]
[email protected]
[email protected]

Items inside shared element are not clickable

Hi,

my setup is pretty basic: I click on a <SharedElement => image> that goes to a detail view with the same image. The transition occurs correctly but the item inside does not receive any clicks even when wrapped in a <Touchable>. I'd like to make an Instagram-style change of image URL when clicking on the image to load the next image.

In fact, this DOES work on PC when i drag the Detail Screen just a little bit as if i were to swipe it away, then i let it go and the view seems to reload quickly and the clicks are received. Sounds like a problem with react-navigation, don't know.

Rendering elements on top of animation

I have a transition between a list and a detail screen. On the detail screen, I overlay two elements over an image. The transition of the image works fine, but the animation renders on top of the overlaying elements. Once the animation finishes, the elements are rendered on top of the image. Is there any way to have these elements displayed over the animation while it runs?

undefined is not an object (evaluating 'AnimationContext.Consumer')

Hein, congratulations on building an awesome package.

I tried to build an example using v2.0.1 unfortunately I'm getting the following error:

undefined is not an object (evaluating 'AnimationContext.Consumer')
- node_modules/react-navigation-shared-element/lib/module/createSharedElementScene.js:1:3467 in render

Here is the code:

import { createSharedElementStackNavigator } from "react-navigation-shared-element";
import Home from "./Home";
import Note from "./Note";

export default createSharedElementStackNavigator({ Home,  Note });

import React from "react";
import { Button, View } from "react-native";
import { SharedElement } from "react-navigation-shared-element";
import { useNavigation } from "react-navigation-hooks";

const Home = () => {
  const { navigate } = useNavigation();
  return (
    <View style={{ flex: 1 }}>
      <SharedElement id="thumbnail">
        <View
          style={{
            width: 50,
            height: 50,
            borderRadius: 25,
            backgroundColor: "red"
          }}
        />
      </SharedElement>
      <Button title="GO" onPress={() => navigate("Note")} />
    </View>
  );
};

Home.sharedElements = () => ["thumbnail"];

export default Home;

import React from "react";
import { Button, View } from "react-native";
import { SharedElement } from "react-navigation-shared-element";
import { useNavigation } from "react-navigation-hooks";
import { NavigationStackProp } from "react-navigation-stack";

const Note = () => {
  const { pop } = useNavigation() as NavigationStackProp;
  return (
    <View style={{ flex: 1, justifyContent: "flex-end" }}>
      <SharedElement id="thumbnail">
        <View
          style={{
            width: 200,
            height: 200,
            borderRadius: 100,
            backgroundColor: "red"
          }}
        />
      </SharedElement>
      <Button title="Bar" onPress={() => pop()} />
    </View>
  );
};

Note.sharedElements = () => ["thumbnail"];

export default Note;

Followed the example given but animation seems to be slightly off

I followed the example code given in the docs under the "Basic Usage" and the animation I'm able to achieve is below with a slight delay of the image being shown from the prev page:-

BEFORE NAVIGATION

AFTER NAVIGATION

HALF SECOND AFTER NAVIGATION STOPPED

The animation is off it seems

I tried your example screen in react navigation v5, and the animation seems very cluttered.

There seems to be no difference using react-navigation-shared-element and mounting the image on two seperate screens as it is.
Code I tried is exactly as you mentioned in the readme.
Tested on moto x4

Custom animation on List Element (scale root view of List Element follow element animation)

I have a question for share element, when the image from List Image animation zoom out to the Detail Page, how can i zoom out the view container of List Image, so it look like this List Image screen all zoom for the image to fit image on Detail Page.

Thank you for your greate library.

Transition effect only on particular screen navigation

Hi,

Thank you for creating this awesome package.

I have a question regarding keeping the transition enable only when navigating to a particular screen and keeping the default navigation for other screens.

I'm trying to mimic something like Microsoft To Do app.

See below gif where the transition is only when we navigate to the setting by clicking on Header and not when we navigate to the todo items.
Is this possible or do you recommend some specific way to achieve this?

Thanks.

Adding a tutorial

Big fan of this library. I added a tutorial to help some people who were struggling with react-native-motion xotahal/react-native-motion#21 (comment).

Is there somewhere I could add this to the repo, perhaps? If you don't think it's helpful to add, no worries!

Support for react-native-screen 's createNativeStackNavigator

Hi,

would be awesome if this lib would support

import createNativeStackNavigator from 'react-native-screens/native-stack';

since the performance of native-stack is awesome and absolutely no comparison to the usual createStackNavigator

[v5] [Android] Bug when going back from the screen that hides bottomTabNavigator

Hi @IjzerenHein, first thank you for your awesome library.

I have this issue with react-navigation v5 and only on Android. It may be related to issue #42. When I go back from a screen that hides the bottom tab navigator, it seems that the bottom tab affects the size of the original image and its position.

This is the gif image of the issue

This is the repository to reproduce the issue: https://github.com/phamhoaivu911/RNSE_example

Any help would be much appreciated. Please let me know if there's anything I can do to help. Thank you!

Need to stop the shared animation for other screen.

Hi. Thanks for your great lib.
I have used shared element for two screens, Lets say screen1 and screen2.
Now I want to navigate from Second one to the third screen. but don't want the shared transition to occur.
here is a screen recording:

**Screen1 component code **

const LogoList = ({ navigation }) => {

    const { data } = useContext(DataContext);
    // console.log(value)

    return (
        <FlatList
            data={data}
            contentContainerStyle={styles.listCN}
            numColumns={2}
            renderItem={(data) => {
                return (
                    <View style={styles.itemCN}>
                        <SharedElement id={data.item.name}>
                            <TouchableOpacity style={styles.itemInner} onPress={() => navigation.navigate('Model', { name: data.item.name, image: data.item.image })}>
                                {/* <Text style={styles.item}>{data.item.name}</Text> */}
                                <Image style={styles.item} source={{ uri: data.item.image }} />
                            </TouchableOpacity>
                        </SharedElement>
                    </View>
                )
            }}
        />
    )
}

Screen2 code:

const ModelScreen = ({ navigation }) => {
    return (
        <View style={styles.container}>
            <SharedElement id={name}>
                <View style={styles.imageCN}>
                    <Image style={styles.image} source={{ uri: image }} />
                </View>
            </SharedElement>
            <Button title='year' onPress={() => navigation.navigate('Year')} />
        </View>
    )
}

ModelScreen.sharedElements = (navigation, other, showing) => {
    console.log(showing)
    const name = navigation.getParam('name');
    return [{
        id: name,
        // animation: 'fade',
    }];
};

Screen3 code

const YearScreen = () => {
    return (
        <View>
            <Text>Year Screen</Text>
        </View>
    )
}

How can I disable the shared element on 3rd screen? As it does not have anything to do with the previous page's transition.

Shared element missed id when goes back

Cloned example project with images from Unsplash. I add swiping feature for swiping images. As you can see from the gif below shared animation saves first initial id as shared id and animation doesn't work when user goes back. Do you have any ideas how it can be fixed?

Let me know if I did smth wrong, I adjust code from example.

    "@react-navigation/native": "^5.0.6",
    "@react-navigation/stack": "^5.0.6",
    "react-native-shared-element": "^0.5.6",
    "react-native-swiper": "^1.6.0-nightly.5",
    "react-navigation-shared-element": "^5.0.0-alpha1"

Hide element in last screen programmatically

Hi @IjzerenHein,

I've spent a lot of time with this bindings and your package (using expo).
I wanted to achieve a similar shared transition on iOS as WhatsApp does.

I am using a special Stack with a transparent background. My view has a white background which I wan't to interpolate while dragging the element using PanGesture from RNGH. Everything is working finally as I want it (only the borderRadius animation is broken, already posted an issue).

Anyway, since I am interpolating the background, I can see, that the shared element in the routerStack is already visible again, and as soon as I release my finger, it gets hidden.

This is great when using the default back gesture, but not when I interpolate (since this will trigger the animation).

Is there a way to programmatically trigger "hide the element on the last screen"?
To make it more clear, I've recorded a video.

https://youtu.be/h782F9Q-7D0

I am demonstrating multiple cases, which all work fine but the last not. (U see, the image is there when I release the finger and disappears and appears again). This wasn't a issue without the navigator card being transparent, but it has to be this way.

const userStack = createSharedElementStackNavigator(
    createStackNavigator, {
        User: {screen: User},
        UserImage: {screen: UserImage},
    },
    {
        ...StackNavigatorOptions,
        transparentCard: true,
        cardStyle: {
            backgroundColor: "transparent"
        },
        transitionConfig: () => springyFadeIn(),
    },
);

Typescript error: Property 'router' is missing in type 'ComponentClass<any, any>'

After replacing createStackNavigator with createSharedElementStackNavigator I get the following typescript error(s)

const AppNavigator: React.ComponentType<any>
Argument of type 'ComponentType<any>' is not assignable to parameter of type 'NavigationNavigator<unknown, unknown>'.
  Type 'ComponentClass<any, any>' is not assignable to type 'NavigationNavigator<unknown, unknown>'.
    Type 'ComponentClass<any, any>' is not assignable to type 'ComponentClass<NavigationNavigatorProps<unknown, {}, unknown>, any> & { router: NavigationRouter<unknown, {}>; navigationOptions?: unknown; }'.
      Property 'router' is missing in type 'ComponentClass<any, any>' but required in type '{ router: NavigationRouter<unknown, {}>; navigationOptions?: unknown; }'.ts(2345)
react-navigation.d.ts(229, 3): 'router' is declared here.

Dependencies:
"react-navigation": "^4.3.5",
"react-navigation-shared-element": "^2.2.0",
"react-navigation-stack": "^2.3.9"

Code:

const AppNavigator = createSharedElementStackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    History: {
      screen: HistoryScreen,
    },
  },
  {
    initialRouteName: 'Home',
    headerMode: 'none',
    defaultNavigationOptions: {
      ...TransitionPresets.FadeFromBottomAndroid,
    },
  },
);

export default createAppContainer(AppNavigator);
```

Shared element animates when going forward but not when going back

Happens on my latest project, I am not passing any dynamic parameters, instead I hardcoded the shared element id the return value of the DetailScreen.sharedElements function for simplicity.

The sharing transition can be seen when navigating from Home to Detail, but when navigating back using the back button on Android, the sharing is not performed.

    "react-navigation": "^4.3.5",
    "react-navigation-shared-element": "^2.2.0",
    "react-navigation-stack": "^2.3.9"

Is this expected behavior?
If not, any hints on what could be causing this issue?

static sharedElements function not being called on first mount

I'm using a SwitchNavigator, which contains a TabNavigator, which contains a StackNavigator. I've wrapped the StackNavigator with the createSharedElementStackNavigator function.

(I'm using react-navigation)

I have basically the same setup as the example in the Usage section:
An overview page, which contains a FlatList. The FlatList contains items, each item has an image which is wrapped with the SharedElement component.
A detail page, which contains a View with an image which is also wrapped with the SharedElement component.

The animations work great, except on the first mount of the detail page: no animation is shown when navigating to the detail page for the first time.

Putting a console.log in the static sharedElements function, which I've placed on the Detail screen, shows that it is not being called on the first mount. After it has been mounted every transition between the screens has the animation showing.

Any help would be greatly appreciated.

`sharedElements` function is not called when using alphav2 stack navigator

First of all:
Thank you for creating this amazing library

I played around for about an hour now but couldn't get it to work.
Things I've done:

• Installed both libs
• pod install (RN 0.60, React Navigation 4)
• Recompiled app
• added shared navigator (it's nested in a Tab navigator maybe thats the problem?)

 Exercises: createSharedElementStackNavigator(createStackNavigator, {
     Exercises,
     Exercise
 }),

• Added on both screens Exercises and Exercise

<SharedElement id="testing">
    <Text>{exercise.name}</Text>
</SharedElement>

• And finally added the sharedElements static method (also tried in both files)

Exercises.sharedElements = () => {
  console.log("i am here");
  return "testing"
};

Sadly I don't see anything changed. App runs as normal but no animations between the screens. Did I do anything wrong?

Thanks :)

Parent screen still clickable during transition

Not sure if the problem is with react-navigation-shared-element, but we currently have the situation that during the transition from Screen1 to Screen2, the elements of Screen1 are still clickable. So if the user presses two navigating buttons fast enough, then two navigate() calls are issued at the same time.

If this is not related to react-navigation-shared-element, we would be grateful for a hint about the cause of this behavior.

Versions:

    "expo": "~36.0.0",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "~0.61.4",
    "react-native-shared-element": "^0.5.5",
    "react-navigation": "^4.1.0",
    "react-navigation-shared-element": "^1.0.0",
    "react-navigation-stack": "~1.10.3",

Happens on iOS. Not sure about Android.

maximum update depth exceeded error, when changing from createStackNavigator to createSharedElementStackNavigator

I am getting a maximum update depth error when using createSharedElementStackNavigator, this is not seen when using createStackNavigator.

Add support for react-navigation-stack@2

So im trying to use this in a new project (used the library totally fine previously) and with the basic code:

import { createStackNavigator } from 'react-navigation-stack';
import { createSharedElementStackNavigator } from 'react-navigation-shared-element';
import { OnboardingScreen, LoginScreen } from 'app/src/views/screens';

const GuestNavigator = createSharedElementStackNavigator(
  createStackNavigator,
  {
    Onboard: OnboardingScreen,
    Login: LoginScreen
  },
  {
    initialRouteName: 'Onboard',

    defaultNavigationOptions: {
      cardStyle: { backgroundColor: 'transparent' },
      headerStyle: {
        backgroundColor: 'transparent'
      }
    }
  }
);
export { GuestNavigator };

Im using react-navigation ^v4.0.10 and react-navigation-stack ^2.0.12
The app crashes instantly with that code and I get this:

Obviously replace

const GuestNavigator = createSharedElementStackNavigator(
  createStackNavigator,
...

with

const GuestNavigator = createStackNavigator(
...

and its totally fine

Being aware that react navigation v5 looks to be completely different am I just SOL right now with this (I've looked at the code and im totally stumped as to how it works - it seems completely black box to me right now, so don't even know how to manually fix this)

Any help or direction on where to look at fixing this will be greatly appreciated

SharedElement typescript definitions is missing View props

As per documentation SharedElement supports all VIew element props. But if any of the view props are used, for example, style prop, typescript throws Property 'style' does not exist.

Property	Type	Description
children	element	A single child component, which must map to a real view in the native view hierarchy
id	string	Unique id of the shared element
View props...		Other props supported by View

Animation longs last on iOS only (there is a delay on the end, compared to android)

Hello everyone, it's me, again! i'm trying to replicate the app-of-the-day Apple animation, using react-navigation-shared-element, there is just one last thing that I miss.

On iOS, compared to android, animation has the same length but ends with a delay:
(iPhone X on the left - iOS 13.3.1 , Xiaomi Mi 9 SE on the right - MIUI 11 based on Android 9)

As you can see, on iOS animations longs last compared to android (you can see from the X icon which clearly appears later on iOS); same thing when going back (you can see it from the borderRadius applied to the whole card, but maybe it's not too visible in the gif)

I tried to disable shadows (because it's the only different thing in my react-native code between android and ios), but nothing changed.

The side-effect is not just visual-only: during the animation, i disable every kind of interaction on the device, because these interactions could break the shared element transition (like in this gif where I disabled this mechanism):

To do this, I just listen to didFocus react-navigation event, because I noticed that when this event is fired, I'm 100% sure animation is ended and I will not obtain glitches (same mechanism applied on both List and Details page):

  useEffect(() => {
    // didFocus is called right after the transition ends!
    const onFocus = (): void => {
      setScrollEnabled(true)
    }

    const didFocusListener = navigation.addListener('didFocus', onFocus)

    return (): void => {
      didFocusListener.remove()
    }
  }, [])

So basically, all of this means: iOS user need to wait longer before interacting, compared to android.

Why is this happening? Ideas / suggestions on how to investigate on this?? Thanks in advance!

my packages (i changed react-native-shared-element to the alpha version due to that borderRadius bug, same behaviour happens with stable 0.5.6):

"react": "16.9.0",
"react-native": "0.61.5",
"react-native-shared-element": "0.7.0-alpha0", // "^0.5.6" same behaviour
"react-navigation": "^4.1.0",
"react-navigation-shared-element": "^2.2.0",
"react-navigation-stack": "^2.1.0",
"react-navigation-tabs": "^2.7.0"

[v5] - iOS gestures

Firstly I'd like to thank everyone involved for getting this awesome library to work with react-navigation v5!

Not sure if this is a bug or if it is working as intended - however the animation between screens doesn't work when using gestures on iOS.

Getting transition progress.

Hi.

Is it possible to get the progress of the transition?
I would like my "details" screen to do some custom animation that follows the sharedelement's transition.

Hope it makes sense :)

/Mikkel

Won't work with createMaterialTopTabNavigator. bug

The transition does not work correctly in createMaterialTopTabNavigator, in the first tab screen with stackNavigator it works fine, but in the second one it doesn't work anymore.

The "back" transition flickers

I built a small shared transition that work great on the way in but flickers on the way back. I have able to reproduce it on the https://github.com/IjzerenHein/react-navigation-shared-element-demo example.

See screen recording below.

https://streamable.com/4amtb

Usage with map

Hi!

If I have two screens where a map (react-native-maps) appears in two screens, like a box on one and "full screen" on another. The trouble is that the map component re-render when transitioning, so although the move transition works correctly, the first map shrinks to fit in the second shared container, and the second map re-renders, what makes it blink on the screen.

Is there a way of using the self-same rendered map, so that this issue can be avoided?

Thanks!!

[v5][Android] Shared element transition gives the intersection effect with a header

Shared element transition gives the intersection effect with a header. I want to avoid it. Is it an issue or I miss some configuration?

export const iosTransitionSpec = {
  animation: 'spring',
  config: {
    stiffness: 1000,
    damping: 500,
    mass: 3,
    overshootClamping: true,
    restDisplacementThreshold: 10,
    restSpeedThreshold: 10,
  },
};

export const FadeInFromBottomAndroidSpec: TransitionSpec = {
  animation: 'timing',
  config: {
    duration: 350,
    easing: Easing.out(Easing.poly(5)),
  },
};

export const FadeOutToBottomAndroidSpec: TransitionSpec = {
  animation: 'timing',
  config: {
    duration: 150,
    easing: Easing.in(Easing.linear),
  },
};

<Stack.Navigator
                  screenOptions={{
                  transitionSpec: {
                    open: isiOS ? iosTransitionSpec : FadeInFromBottomAndroidSpec,
                    close: isiOS ? iosTransitionSpec : FadeOutToBottomAndroidSpec,
                  },
                }}
>
...

Error 'onTransitionStart' is moved to 'navigationOptions'. Specify it in 'defaultNavigationOptions' to keep the same behaviour.

just tried to create a project and do shared element effect, after setting up I got this error:

'onTransitionStart' is moved to 'navigationOptions'. Specify it in 'defaultNavigationOptions' to keep the same behaviour.

also same for onTransitionEnd

Shared element stuck in list when navigateíng back

Anybody ever had an issue like this?
My shared element is somehow getting stuck when I navigate back to the list.

Nested createSharedElementStackNavigator()'s don't work

I'm not sure if this is supposed to be possible, but would be great if so

Request for spring animation preferably driven though UI-thread

Title says it all :)
Using spring animation instead of timing

TypeError: Object is not a Function (Near '.... createNavigator...)

Im currently running

React-native v0.61.5
react-navigation: v4

Rendering interstitial loading views causes issues

Sorry, this is going to be a long one, and if the response is 'please come back with an example of the issue because your explanation is not good enough to follow/fix' that is fine.

We have an app that uses relay under the hood, and in a couple places we want to use a shared element style animation between screens. In order to do that, the way our app works is it navigates to a screen that uses the main component itself as a 'loading component' with dummy data from the original location while it loads from the network the data it needs to completely render.

When that data fetch takes longer than the animation, everything works great.

However, when that data fetch is faster than the animation (easy to see using slow animations in the simulator), you end up with the re-render causing the formerly 'hidden' components appearing during the animation.

Not a huge issue and I know what we are doing is a bit strange, but likely to be a common pattern.

Any thoughts on the right way to approach this issue?

Trigger header element animation when moving screens from header

The issue right now is that any object that have a shared element must be in the same stack and appear between screen transitions. If you want to do fancier animation with objects from outside the stack, like headers (headerLeft, headerRight), it doesn't fire the functions needed to do this.

For example you have a profile picture in the header of the stack and when tapping on it, the profile pic resized to fit into a "User settings" screen. And if you press the back button the profile picture gest smaller and is in the header again.

Is it something that could be implemented somehow? A different library FluidTransitions had the option to implement something like this.

defaultNavigationOptions not working

Hi,
Added defaultNavigaionOptions on App.js for createSharedElementStackNavigator but does not work.
trying to add options like gestureEnabled, transitoinSpec, cardStyleInterpolator, but no one is working

"react-navigation-stack": "^2.1.1",
"react-navigation-shared-element": "^2.0.1",
"react-native-shared-element": "~0.5.1",

Image hidden on Android after reopening the app

When you share an image and go from screen to screen, then switch to another app, and then go back your app, image is hidden.

This happens on Android.

Not working with ScrollView

We have implemented this library exactly as in the documentation, but DetailScreen.js is using a ScrollView as the container. The SharedElement is a child of the ScrollView, like this:

<ScrollView style={{ flex: 1 }}>
     <SharedElement id={`${navigation.getParam('id')}`}>
         <View style={{ height: 300, width: 300, backgroundColor: 'grey' }} />
     </SharedElement>
    <View style={{ height: 300, width: 300, backgroundColor: 'grey', marginTop: 30 }} />
</ScrollView>

The transition occurs perfectly, and the element is shared as expected. However, when scrolling the ScrollView, the 2nd View gets pushed under the SharedElement View. It's like the SharedElement is absolutely positioned at the top of the container, and does not scroll with the rest of the screen.

Has anyone experienced this before?

Stange animation

Hello,

First of all thanks you for this asome package ;)

I try to implement a basic transition animation between a card and a view.
I have record my animation and the little bug here: https://streamable.com/s/i77es/dxknbq

ps: Sorry it's my first post on github and i don't find how add indentation on my code, if you can explain me, i will edit my code.

My code:

Navigation:

const ExplorerRoute = createSharedElementStackNavigator(
  {
    Explorer: {screen: Explorer},
    OneSeance: {screen: OneSeance},
  },
  {
    headerMode: 'none',
    initialRouteName: 'Explorer',
  },
);

myCardListView

{seances.map((item, index) => (
  <Fragment key={item.id + 'cardSeance'}>
    <CardSeance
      item={item}
      onPress={value => this.navigateToOneSeance(value)}
    />
    {index + 1 !== seances.length && <Separator value={8} />}
  </Fragment>
))}

oneCardSeance

<SharedElement id={props.item.id + 'cardSeance'}>
  <View>
    <Image
      style={styles.imageCardSeance}
      source={{uri: props.item.picture}}
    />
    <View style={styles.containerBlackFilterCardSeance} />
    <Text style={styles.titleCardSeance}>{props.item.title}</Text>
  </View>
</SharedElement>

And my view after click on one card:

<SharedElement
  id={oneSeance.id + 'cardSeance'}
  style={styles.imageTitleOneSeance}>
  <View style={styles.imageTitleOneSeance}>
    <Image
      style={styles.imageTitleOneSeance}
      source={{uri: oneSeance.picture}}
    />
    <View style={styles.containerTitleOneSeance}>
      <Text style={styles.textTitleOneSeance}>{oneSeance.title}</Text>
      <View style={styles.containerDurationOneSeance}>
        <Text style={styles.textDurationOneSeance}>
          {oneSeance.duration}min
        </Text>
      </View>
    </View>
    <View style={styles.blackFilterOneSeance} />
  </View>
</SharedElement>
OneSeance.sharedElements = (navigation, otherNavigation, showing) => {
  const item = navigation.getParam('data');
  return [item.id + 'cardSeance'];
};

I don't know if this "bug" is normal or not.

Won't work with nested createBottomTabNavigator.

Using createStackNavigator is working perfectly, but shared element won't work when combine it to createBottomTabNavigator.

please next update added for nested creareBottomTabNavigator

react-navigation v5 support

With the rewrite of react-navigation to a component-first api, how does support for it end up working out and will it be supported?

Image getting shrunk during navigation transitions

The real height of the image is lost for a second when transitioned from one page to another.

<NavigationContainer>
      <Stack.Navigator initialRouteName="List">
        <Stack.Screen name="List" component={ListScreen} />
        <Stack.Screen
          name="Detail"
          component={DetailScreen}
          sharedElementsConfig={(route, otherRoute, showing) => {
            const { item } = route.params;
            return [{id: `item.${item.id}.photo`, animation: 'move', resize: 'auto'}];
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>

Animation is normal react-navigation animation

I'm working on a simple example and thus far when navigating between screens, I just get the normal animation you'd get with react-navigation. Not sure what I'm doing wrong here?

Here is my truncated App.js:

const AppNavigator = createSharedElementStackNavigator({
  LoginScreen,
  OauthScreen,
  ActivitiesScreen,
  ActivityDetail
});

const AppContainer = createAppContainer(AppNavigator);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

Then I have a list view, that I converted into just a single item centered on the page...this is the ListItem element:

return (
      <TouchableWithoutFeedback onPress={this.goToDetail}>
        <SharedElement id={`card-${this.props.item.activityid}`}>
          <View
            style={{
              backgroundColor: "white",
              flexDirection: "row",
              borderStyle: "solid",
              borderWidth: "1px",
              borderRadius: "4px",
              margin: 5,
              shadowOffset: { width: 2, height: 4 },
              shadowOpacity: 0.5,
              shadowRadius: 1,
              elevation: 5,
              height: 100,
              padding: 10
            }}
          >
            <View
              style={{
                borderRadius: "50%",
                backgroundColor: "black",
                height: 30,
                width: 30,
                justifyContent: "center",
                alignItems: "center",
                shadowOffset: { width: 1, height: 2 },
                shadowOpacity: 0.3,
                shadowRadius: 2,
                elevation: 2
              }}
            >
              <MaterialIcons size={20} name="phone" color="white" />
            </View>
            <View
              style={{
                justifyContent: "flex-start",
                alignItems: "center",
                marginTop: 5,
                marginLeft: 10
              }}
            >
              <Text
                style={{
                  fontSize: 16,
                  color: "black"
                }}
              >
                {this.props.item.subject}
              </Text>
            </View>
          </View>
        </SharedElement>
      </TouchableWithoutFeedback>
    );
  }

Then I have a detail view that also has the element above at the top:

const ActivityDetail = props => {
  const item = props.navigation.getParam("item");
  return (
    <SafeAreaView style={styles.container}>
      <SharedElement id={`card=${item.activityid}`}>
        <ListItem style={styles.card} item={item} />
      </SharedElement>
    </SafeAreaView>
  );
};

ActivityDetail.sharedElements = (navigation, otherNavigation, showing) => {
  const item = navigation.getParam("item");
  console.log("PARAM ITEM", item.activityid);
  return [{ id: `card-${item.activityid}`, animation: "move" }];
};

Here is a gif of the animation. Just following the examples, I would have expected the list item to move to the top, rather than the screen to swipe in from the right....again, not sure what I'm doing wrong here?

navigation.state is undefined when navigating back from materialTopTabNavigatior

When a sharedElementStack has a nested materialTopTabNavigator inside as a screen, an exception TypeError: undefined is not an object (evaluating 'navigation.state') pops up when trying to go back from it. An example:

const TabScreen = createMaterialTopTabNavigator(
  {
    InsideOne: { screen: InsideOne },
    InsideTwo: { screen: InsideTwo },
  }
)

const SharedStack = createSharedElementStackNavigator(
  {
    Main: { screen: MainScreen },
    TabScreen: { screen: TabScreen }
  }
)

When navigating to the TabScreen and then navigating back by tapping on the back arrow, the app crashes as soon as the transition is done.

Is a shared transition between a screen with a bottomTabNavigator and another without possible?

Hello everyone. I want to implement a shared transition like the infamous App of the day iOS transition between a screen which should have the bottomTabNavigator (the list) and another screen which should't have the tab (the detail). Is it possible?

I usually do tricks with bottomTabNavigator using a navigation param and playing with tabBarVisible option navigationOptions into createBottomTabNavigator; logic seems good, however the transition when I go back it's buggy, because the animation of placing back the image in its original place acts like there is no tabBar and it's buggy.

It looks like the tabBar is adding some kind of offset to the animation.
(animation works like a charm on both android/ios if i leave the tabBar always visible)

packages:
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-shared-element": "^0.5.6",
"react-navigation": "^4.1.0",
"react-navigation-shared-element": "^2.2.0",
"react-navigation-stack": "^2.1.0",
"react-navigation-tabs": "^2.7.0"

the code about navigation:

import { createAppContainer, createSwitchNavigator } from 'react-navigation'
import { createBottomTabNavigator } from 'react-navigation-tabs'
import { createStackNavigator } from 'react-navigation-stack'
// other imports here
import Second from './views/Second'
import ExampleDetail from './views/ExampleDetail'

// other navigation stacks here
const FakeNavigator = createSharedElementStackNavigator(
  { Second, ExampleDetail },
  { headerMode: 'none', mode: 'modal' },
)

const Tabs = createBottomTabNavigator(
  {
    Discover: {
      screen: Discover,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => <IconSimpleLine name="notebook" style={{ fontSize: 24, color: tintColor }} />,
      },
    },
    Second: {
      screen: FakeNavigator,
      navigationOptions: ({ navigation }) => ({
        tabBarIcon: ({ tintColor }) => <IconSimpleLine name="handbag" style={{ fontSize: 24, color: tintColor }} />,
        // here i check the navigation param to let the tabBar be visible or not
        tabBarVisible: !navigation.state?.routes[navigation.state.index].params?.hideTabBar,
      }),
    },
    // other tabs here..
  },
  {
    tabBarOptions: {
      showLabel: false,
      activeTintColor: 'black',
      inactiveTintColor: 'gray',
    },
  },
)


const AppStackNavigator = createStackNavigator(
  { Tabs, RaffleDetail, DiscoverDetail, FakeNavigator },
  { headerMode: 'none' },
)

const AppNavigator = createSwitchNavigator(
  {
    auth: AuthNavigator,
    app: AppStackNavigator,
  },
  { initialRouteName: 'auth' },
)

const AppContainer = createAppContainer(AppNavigator)

the code responsible to open the detail page:

  const onPress = () => {
    navigation.navigate('ExampleDetail', { detail: { title, subtitle, picture, id }, hideTabBar: true })
  }

from the detail page i simply call navigation.goBack()

this is the result (gif looks slow but the opening animation works like a charm):

Where is the mistake? Is this behaviour possible or not? Thanks in advance.

[v5] typo in Readme

I suppose id should be the same.