chore: add missing test renderer

Author: satya164

README.md

@@ -41,6 +41,8 @@ Then you can navigate to any screen to show it as a modal:
 navigation.navigate('Profile');
 ```
 
+The first screen in the stack is always rendered as a normal screen and not as a modal. But any subsequent screens will be rendered as modals.
+
 ### Options
 
 All of the [props available on `Modal` component](https://reactnative.dev/docs/modal#props) can be specified in [options](https://reactnavigation.org/docs/screen-options) to configure the screens in the navigator, except `visible`, `onDismiss`, `onOrientationChange`, `onRequestClose` and `onShow`.

package.json

@@ -64,6 +64,7 @@
     "prettier": "^2.2.0",
     "react": "16.13.1",
     "react-native": "0.63.3",
+    "react-test-renderer": "^17.0.1",
     "release-it": "^14.2.1",
     "typescript": "^4.1.2"
   },
@@ -81,7 +82,7 @@
   "husky": {
     "hooks": {
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
-      "pre-commit": "yarn lint && yarn typescript"
+      "pre-commit": "yarn lint && yarn typescript && yarn test"
     }
   },
   "commitlint": {

src/ModalView.tsx

@@ -23,20 +23,29 @@ export default function ModalView({ state, navigation, descriptors }: Props) {
     <NavigationHelpersContext.Provider value={navigation}>
       <View style={styles.container}>
         {state.routes.reduceRight<JSX.Element>((acc, route, index) => {
+          const focused = index === state.index;
           const descriptor = descriptors[route.key];
           const {
             animationType = 'slide',
             presentationStyle = 'fullScreen',
             ...options
           } = descriptor.options;
 
+          const element = (
+            <View
+              style={StyleSheet.absoluteFill}
+              accessibilityElementsHidden={!focused}
+              importantForAccessibility={
+                focused ? 'auto' : 'no-hide-descendants'
+              }
+            >
+              {descriptor.render()}
+              {acc}
+            </View>
+          );
+
           if (index === 0) {
-            return (
-              <View style={StyleSheet.absoluteFill}>
-                {descriptor.render()}
-                {acc}
-              </View>
-            );
+            return element;
           }
 
           return (
@@ -53,7 +62,7 @@ export default function ModalView({ state, navigation, descriptors }: Props) {
               }}
               visible
             >
-              {descriptor.render()}
+              {element}
               {acc}
             </Modal>
           );

src/__tests__/index.test.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { View, Text, Button } from 'react-native';
-import { render, fireEvent } from '@testing-library/react-native';
+import { render } from '@testing-library/react-native';
 import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import { createModalNavigator, ModalScreenProps } from '../index';
 
+jest.useFakeTimers();
 it('renders a modal navigator with screens', async () => {
   const Test = ({ route, navigation }: ModalScreenProps<ParamListBase>) => (
     <View>
@@ -15,7 +16,7 @@ it('renders a modal navigator with screens', async () => {
 
   const Modal = createModalNavigator();
 
-  const { findByText, queryByText } = render(
+  const { queryByText } = render(
     <NavigationContainer>
       <Modal.Navigator>
         <Modal.Screen name="A" component={Test} />
@@ -26,8 +27,4 @@ it('renders a modal navigator with screens', async () => {
 
   expect(queryByText('Screen A')).not.toBeNull();
   expect(queryByText('Screen B')).toBeNull();
-
-  fireEvent.press(await findByText('Go to B'));
-
-  expect(queryByText('Screen B')).not.toBeNull();
 });

yarn.lock

@@ -7969,7 +7969,7 @@ react-is@^16.12.0, react-is@^16.13.0, react-is@^16.8.1, react-is@^16.8.4:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-is@^17.0.1:
+"react-is@^16.12.0 || ^17.0.0", react-is@^17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
@@ -8012,6 +8012,24 @@ react-refresh@^0.4.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.4.3.tgz#966f1750c191672e76e16c2efa569150cc73ab53"
   integrity sha512-Hwln1VNuGl/6bVwnd0Xdn1e84gT/8T9aYNL+HAKDArLCS7LWjwr7StE30IEYbIkx0Vi3vs+coQxe+SQDbGbbpA==
 
+react-shallow-renderer@^16.13.1:
+  version "16.14.1"
+  resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.14.1.tgz#bf0d02df8a519a558fd9b8215442efa5c840e124"
+  integrity sha512-rkIMcQi01/+kxiTE9D3fdS959U1g7gs+/rborw++42m1O9FAQiNI/UNRZExVUoAOprn4umcXf+pFRou8i4zuBg==
+  dependencies:
+    object-assign "^4.1.1"
+    react-is "^16.12.0 || ^17.0.0"
+
+react-test-renderer@^17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.1.tgz#3187e636c3063e6ae498aedf21ecf972721574c7"
+  integrity sha512-/dRae3mj6aObwkjCcxZPlxDFh73XZLgvwhhyON2haZGUEhiaY5EjfAdw+d/rQmlcFwdTpMXCSGVk374QbCTlrA==
+  dependencies:
+    object-assign "^4.1.1"
+    react-is "^17.0.1"
+    react-shallow-renderer "^16.13.1"
+    scheduler "^0.20.1"
+
 [email protected]:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
@@ -8534,6 +8552,14 @@ [email protected]:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.20.1:
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.1.tgz#da0b907e24026b01181ecbc75efdc7f27b5a000c"
+  integrity sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 semver-compare@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"