diff --git a/packages/rn-tester/js/components/RNTTestDetails.js b/packages/rn-tester/js/components/RNTTestDetails.js
new file mode 100644
index 00000000000..7e901c57b15
--- /dev/null
+++ b/packages/rn-tester/js/components/RNTTestDetails.js
@@ -0,0 +1,103 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+import * as React from 'react';
+import {View, Text, StyleSheet, Button} from 'react-native';
+import {type RNTesterTheme} from './RNTesterTheme';
+
+function RNTTestDetails({
+ test,
+ description,
+ expect,
+ title,
+ theme,
+}: {
+ test?: string,
+ description?: string,
+ expect?: string,
+ title: string,
+ theme: RNTesterTheme,
+}): React.Node {
+ const [collapsed, setCollapsed] = React.useState(false);
+
+ const content =
+ test != null ? (
+ <>
+
+ How to Test
+ {test}
+
+ {expect != null && (
+
+ Expectation
+ {expect}
+
+ )}
+ >
+ ) : description != null ? (
+
+ Description
+ {description}
+
+ ) : null;
+
+ return (
+
+
+
+ {title}
+
+ {content != null && (
+
+ {!collapsed ? content : null}
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ paddingHorizontal: 10,
+ paddingTop: 6,
+ paddingBottom: 10,
+ borderBottomWidth: 1,
+ },
+ heading: {
+ fontSize: 16,
+ color: 'grey',
+ fontWeight: '500',
+ },
+ paragraph: {
+ fontSize: 14,
+ },
+ section: {
+ marginVertical: 4,
+ },
+ title: {
+ fontSize: 18,
+ },
+ titleRow: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ },
+});
+
+export default RNTTestDetails;
diff --git a/packages/rn-tester/js/components/RNTesterModuleContainer.js b/packages/rn-tester/js/components/RNTesterModuleContainer.js
index 0b92a4de043..be96b18a875 100644
--- a/packages/rn-tester/js/components/RNTesterModuleContainer.js
+++ b/packages/rn-tester/js/components/RNTesterModuleContainer.js
@@ -7,12 +7,13 @@
* @format
*/
-const React = require('react');
+import * as React from 'react';
const RNTesterBlock = require('./RNTesterBlock');
const RNTesterExampleFilter = require('./RNTesterExampleFilter');
import RNTPressableRow from './RNTPressableRow';
-import {RNTesterThemeContext} from './RNTesterTheme';
+import {RNTesterThemeContext, type RNTesterTheme} from './RNTesterTheme';
import {View, Text, StyleSheet, Platform} from 'react-native';
+import RNTTestDetails from './RNTTestDetails';
import type {
RNTesterModule,
@@ -80,30 +81,36 @@ export default function RNTesterModuleContainer(props: Props): React.Node {
},
];
- return (
-
- {module.showIndividualExamples === true && example != null ? (
- example.render()
- ) : (
- <>
-
-
- filteredSections[0].data.map(renderExample)
- }
- />
- >
- )}
-
+ const showIndividualExamples =
+ module.showIndividualExamples === true && example != null;
+
+ return showIndividualExamples ? (
+ <>
+
+ {example.render()}
+ >
+ ) : (
+ <>
+
+
+
+ filteredSections[0].data.map(renderExample)
+ }
+ />
+
+ >
);
}
diff --git a/packages/rn-tester/js/examples/Animated/FadeInViewExample.js b/packages/rn-tester/js/examples/Animated/FadeInViewExample.js
index f7cae64a876..57df355ba2e 100644
--- a/packages/rn-tester/js/examples/Animated/FadeInViewExample.js
+++ b/packages/rn-tester/js/examples/Animated/FadeInViewExample.js
@@ -78,5 +78,8 @@ export default ({
description: ('Uses a simple timing animation to ' +
'bring opacity from 0 to 1 when the component ' +
'mounts.': string),
+ test: 'Toggle `Press to Hide/Show` button, with nativeDriver on/off',
+ expect:
+ 'FadeInView box should animate from opacity 0 to 1. \nExpect no animation when hiding.\nHiding the view mid-animation should not affect next animation.',
render: (): React.Node => ,
}: RNTesterModuleExample);
diff --git a/packages/rn-tester/js/types/RNTesterTypes.js b/packages/rn-tester/js/types/RNTesterTypes.js
index 49fa9efa403..735c9126d7b 100644
--- a/packages/rn-tester/js/types/RNTesterTypes.js
+++ b/packages/rn-tester/js/types/RNTesterTypes.js
@@ -15,6 +15,8 @@ export type RNTesterModuleExample = $ReadOnly<{|
title: string,
platform?: 'ios' | 'android',
description?: string,
+ test?: string,
+ expect?: string,
render: () => React.Node,
|}>;