Filter out active prop on dummy screen component

src/navigators/__tests__/__snapshots__/NestedNavigator-test.js.snap

@@ -44,7 +44,6 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
       <View
         accessibilityElementsHidden={false}
         accessible={true}
-        active={1}
         collapsable={undefined}
         pointerEvents="auto"
         style={
@@ -118,7 +117,6 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
               <View
                 accessibilityElementsHidden={false}
                 accessible={true}
-                active={1}
                 collapsable={undefined}
                 pointerEvents="auto"
                 style={

src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap

@@ -44,7 +44,6 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
       <View
         accessibilityElementsHidden={false}
         accessible={true}
-        active={1}
         collapsable={undefined}
         pointerEvents="auto"
         style={
@@ -240,7 +239,6 @@ exports[`StackNavigator renders successfully 1`] = `
       <View
         accessibilityElementsHidden={false}
         accessible={true}
-        active={1}
         collapsable={undefined}
         pointerEvents="auto"
         style={

src/views/StackView/StackViewCard.js

@@ -3,7 +3,6 @@ import { StyleSheet, Platform } from 'react-native';
 import { Screen } from './screens';
 import createPointerEventsContainer from './createPointerEventsContainer';
 
-/* eslint-disable no-unused-vars */
 const EPS = 1e-5;
 
 function getAccessibilityProps(isActive) {
@@ -30,28 +29,22 @@ class Card extends React.Component {
       children,
       pointerEvents,
       style,
-      // position,
-      scene: { /* index, */ isActive },
+      position,
+      scene: { index, isActive },
     } = this.props;
 
-    // If we use react-native <= 0.55, we can't call position.__makeNative()
-    // before binding this value to the view. If we use >= 0.56, then we have
-    // to call position.__makeNative(). Unclear to me what is happening here
-    // so temporarily commented this out.
-    //
-    // const active = position.interpolate({
-    //   inputRange: [index, index + 1 - EPS, index + 1],
-    //   outputRange: [1, 1, 0],
-    //   extrapolate: 'clamp',
-    // });
+    const active = position.interpolate({
+      inputRange: [index, index + 1 - EPS, index + 1],
+      outputRange: [1, 1, 0],
+      extrapolate: 'clamp',
+    });
 
     return (
       <Screen
         pointerEvents={pointerEvents}
-        ref={this.props.onComponentRef}
+        onComponentRef={this.props.onComponentRef}
         style={[styles.main, style]}
-        // active={active}
-        active={isActive ? 1 : 0}
+        active={active}
         {...getAccessibilityProps(isActive)}
       >
         {children}

src/views/StackView/screens.js

@@ -1,6 +1,19 @@
+import React from 'react';
 import { Animated, View } from 'react-native';
 
 const ScreenContainer = View;
-const Screen = Animated.View;
+
+class Screen extends React.Component {
+  render() {
+    // Filter out active prop in this case because it is unused and
+    // can cause problems depending on react-native version:
+    // https://github.com/react-navigation/react-navigation/issues/4886
+
+    /* eslint-disable no-unused-vars */
+    const { active, onComponentRef, ...props } = this.props;
+
+    return <Animated.View {...props} ref={onComponentRef} />;
+  }
+}
 
 export { ScreenContainer, Screen };