[v5] borderRadius not animating when going to another screen, it animates only on back

[Rafatcb]

It's my first time using this lib, so I don't know if it is a regression or if there's something wrong with my code .

Description

I'm trying to transition from:

1. Screen with a square-element with borderRadius: 16; to
2. Screen with a circle

And the problems are:

1. The default Android screen transition is shown (from bottom to top)
2. borderRadius animate only when going back from the second screen
3. The background-color didn't animate either, even though my real app doesn't need it

My app	Simple repro I created

Dependencies

{
  "@react-native-community/masked-view": "^0.1.10",
  "@react-navigation/native": "^5.7.6",
  "@react-navigation/stack": "^5.9.3",
  "react": "16.13.1",
  "react-native": "0.63.3",
  "react-native-gesture-handler": "^1.8.0",
  "react-native-reanimated": "^1.13.1",
  "react-native-safe-area-context": "^3.1.8",
  "react-native-screens": "^2.11.0",
  "react-native-shared-element": "^0.7.0",
  "react-navigation-shared-element": "^5.0.0-alpha1"
}

Reproducible demo

Repro repository here.

App.js

import 'react-native-gesture-handler';
import React from 'react';

import { NavigationContainer } from '@react-navigation/native';
import { createSharedElementStackNavigator } from 'react-navigation-shared-element';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import { First } from './screens/First';
import { Second } from './screens/Second';

const AppStack = createSharedElementStackNavigator();

export default () => {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <AppStack.Navigator
          initialRouteName="First"
          screenOptions={{ headerShown: false }}>
          <AppStack.Screen component={First} name="First" />
          <AppStack.Screen component={Second} name="Second" />
        </AppStack.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );
};

screens/First.js

import React from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { SharedElement } from 'react-navigation-shared-element';

export const First = ({ navigation }) => {
  function goToSecond() {
    navigation.navigate('Second');
  }

  return (
    <SafeAreaView style={styles.container}>
      <SharedElement id="enter">
        <View style={styles.view}>
          <Pressable onPress={goToSecond} style={styles.button}>
            <Text>Navigate</Text>
          </Pressable>
        </View>
      </SharedElement>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  button: {
    alignSelf: 'center',
    borderRadius: 16,
    backgroundColor: '#fafafa',
    padding: 16,
  },
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
  },
  view: {
    backgroundColor: '#000',
    borderRadius: 16,
    height: 300,
    justifyContent: 'center',
    width: 300,
  },
});

screens/Second.js

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { SharedElement } from 'react-navigation-shared-element';

const Second = () => {
  return (
    <SafeAreaView style={styles.container}>
      <SharedElement id="enter">
        <View style={styles.circle} />
      </SharedElement>
    </SafeAreaView>
  );
};

const sharedElements = () => {
  return ['enter'];
};

Second.sharedElements = sharedElements;

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
  },
  circle: {
    backgroundColor: '#6f42c1',
    borderRadius: 500,
    height: 100,
    width: 100,
  },
});

export { Second };

[jonesaustindev]

@Rafatcb did you happen to find a solution for this issue?

[Rafatcb]

@jonesaustindev nope. I think react-navigation-shared-element isn't ready for react-navigation v5, I noticed some bugs trying it. Maybe using react-navigation v4 works well, but I didn't test it.

[ghadeeraqraa1992]

any update ? I have the same issue

[IjzerenHein]

Similar to #128