diff --git a/packages/rn-tester/js/components/RNTesterModuleContainer.js b/packages/rn-tester/js/components/RNTesterModuleContainer.js
index 27252d24b20155..66f9a8e94cfb1b 100644
--- a/packages/rn-tester/js/components/RNTesterModuleContainer.js
+++ b/packages/rn-tester/js/components/RNTesterModuleContainer.js
@@ -17,7 +17,7 @@ import {type RNTesterTheme, RNTesterThemeContext} from './RNTesterTheme';
import RNTPressableRow from './RNTPressableRow';
import RNTTestDetails from './RNTTestDetails';
import * as React from 'react';
-import {Platform, StyleSheet, Text, View} from 'react-native';
+import {Platform, ScrollView, StyleSheet, Text, View} from 'react-native';
const RNTesterBlock = require('./RNTesterBlock');
const RNTesterExampleFilter = require('./RNTesterExampleFilter');
@@ -62,18 +62,6 @@ export default function RNTesterModuleContainer(props: Props): React.Node {
);
};
- // TODO remove this case
- if (module.examples.length === 1) {
- const description = module.examples[0].description ?? module.description;
- const ModuleSingleExample = module.examples[0].render;
- return (
- <>
-
-
- >
- );
- }
-
const filter = ({example: e, filterRegex}: $FlowFixMe) =>
filterRegex.test(e.title);
@@ -87,17 +75,26 @@ export default function RNTesterModuleContainer(props: Props): React.Node {
},
];
- return example != null ? (
+ const singleModule =
+ example ?? (module.examples.length === 1 ? module.examples[0] : null);
+
+ return singleModule != null ? (
<>
-
-
-
+ {singleModule.scrollable === true ? (
+
+
+
+ ) : (
+
+
+
+ )}
>
) : (
<>
diff --git a/packages/rn-tester/js/examples/Image/ImageExample.js b/packages/rn-tester/js/examples/Image/ImageExample.js
index f4b82558f0d516..9caf2f276b8104 100644
--- a/packages/rn-tester/js/examples/Image/ImageExample.js
+++ b/packages/rn-tester/js/examples/Image/ImageExample.js
@@ -1651,10 +1651,17 @@ exports.examples = [
},
{
title: 'Large image with different resize methods',
+ name: 'resize-method',
description:
'Demonstrating the effects of loading a large image with different resize methods',
+ scrollable: true,
render: function (): React.Node {
- const methods = ['auto', 'resize', 'scale', 'none'];
+ const methods: Array = [
+ 'auto',
+ 'resize',
+ 'scale',
+ 'none',
+ ];
// Four copies of the same image so we don't serve cached copies of the same image
const images = [
require('../../assets/large-image-1.png'),
@@ -1663,10 +1670,13 @@ exports.examples = [
require('../../assets/large-image-4.png'),
];
return (
-
+
{methods.map((method, index) => (
-
- `{method}`
+
+ {method}
React.Node,
|}>;