RNTester: Text Adjusts Dynamic Layout Example

Summary:
Creates a new RNTester example to verify #31538 (D28631465).

Changelog:
[Android][Added] - RNTester example for adjusting text with dynamic layout.

Reviewed By: kacieb

Differential Revision: D28779870

fbshipit-source-id: 5297a823645d1e9e35d4c86b491f3c225ecc9543

Author: yungsters

packages/rn-tester/js/examples/Text/TextAdjustsDynamicLayoutExample.js

@@ -0,0 +1,55 @@
+/**
+ * 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 strict-local
+ */
+
+import {Button, Text, StyleSheet, View} from 'react-native';
+import * as React from 'react';
+import {useState} from 'react';
+
+export default function TextAdjustsDynamicLayoutExample(props: {}): React.Node {
+  const [height, setHeight] = useState(20);
+
+  return (
+    <>
+      <View>
+        <View style={[styles.subjectContainer, {height}]}>
+          <Text
+            adjustsFontSizeToFit={true}
+            numberOfLines={1}
+            style={styles.subjectText}>
+            This is adjusting text.
+          </Text>
+        </View>
+      </View>
+      <View style={styles.row}>
+        <Button onPress={() => setHeight(20)} title="Set Height to 20" />
+      </View>
+      <View style={styles.row}>
+        <Button onPress={() => setHeight(40)} title="Set Height to 40" />
+      </View>
+      <View style={styles.row}>
+        <Button onPress={() => setHeight(60)} title="Set Height to 60" />
+      </View>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  subjectContainer: {
+    backgroundColor: 'rgba(254, 255, 0, 0.75)',
+    justifyContent: 'center',
+  },
+  subjectText: {
+    fontSize: 40,
+    textAlign: 'center',
+  },
+  row: {
+    marginTop: 10,
+  },
+});

packages/rn-tester/js/examples/Text/TextExample.android.js

@@ -10,6 +10,8 @@
 
 'use strict';
 
+import TextAdjustsDynamicLayoutExample from './TextAdjustsDynamicLayoutExample';
+
 const RNTesterBlock = require('../../components/RNTesterBlock');
 const RNTesterPage = require('../../components/RNTesterPage');
 const React = require('react');
@@ -202,6 +204,9 @@ class TextExample extends React.Component<{...}> {
         <RNTesterBlock title="Dynamic Font Size Adjustment">
           <AdjustingFontSize />
         </RNTesterBlock>
+        <RNTesterBlock title="Font Size Adjustment with Dynamic Layout">
+          <TextAdjustsDynamicLayoutExample />
+        </RNTesterBlock>
         <RNTesterBlock title="Wrap">
           <Text>
             The text should wrap if it goes on multiple lines. See, this is