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, |}>;