diff --git a/packages/rn-tester/js/components/RNTesterButton.js b/packages/rn-tester/js/components/RNTesterButton.js
index 0e5acdf2946..0bff3bf6da6 100644
--- a/packages/rn-tester/js/components/RNTesterButton.js
+++ b/packages/rn-tester/js/components/RNTesterButton.js
@@ -18,6 +18,7 @@ import type {PressEvent} from 'react-native/Libraries/Types/CoreEventTypes';
 
 type Props = $ReadOnly<{|
   testID?: string,
+  textTestID?: string,
   children?: React.Node,
   onPress?: ?(event: PressEvent) => mixed,
 |}>;
@@ -30,7 +31,7 @@ class RNTesterButton extends React.Component<Props> {
         onPress={this.props.onPress}
         style={styles.button}
         underlayColor="grey">
-        <Text>{this.props.children}</Text>
+        <Text testID={this.props.textTestID}>{this.props.children}</Text>
       </TouchableHighlight>
     );
   }
diff --git a/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js b/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js
index e5b1c4f580b..353379409ff 100644
--- a/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js
+++ b/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js
@@ -10,17 +10,20 @@
 
 'use strict';
 
-const React = require('react');
-
-const {
+import * as React from 'react';
+import {useContext, useState} from 'react';
+import {
   Button,
   Platform,
   Text,
   TextInput,
   View,
   StyleSheet,
-} = require('react-native');
+} from 'react-native';
+import type {TextStyle} from 'react-native/Libraries/StyleSheet/StyleSheet';
 
+import RNTesterButton from '../../components/RNTesterButton';
+import {RNTesterThemeContext} from '../../components/RNTesterTheme';
 import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 
 const styles = StyleSheet.create({
@@ -49,9 +52,10 @@ const styles = StyleSheet.create({
   },
   label: {
     width: 115,
-    alignItems: 'flex-end',
+    textAlign: 'right',
     marginRight: 10,
     paddingTop: 2,
+    fontSize: 12,
   },
   inputContainer: {
     flex: 1,
@@ -80,15 +84,20 @@ const styles = StyleSheet.create({
     fontSize: 13,
     padding: 4,
   },
+  screenshotArea: {
+    position: 'absolute',
+    top: -5,
+    left: 120,
+    right: -5,
+    bottom: -5,
+  },
 });
 
 class WithLabel extends React.Component<$FlowFixMeProps> {
   render(): React.Node {
     return (
       <View style={styles.labelContainer}>
-        <View style={styles.label}>
-          <Text>{this.props.label}</Text>
-        </View>
+        <Text style={styles.label}>{this.props.label}</Text>
         <View style={styles.inputContainer}>{this.props.children}</View>
       </View>
     );
@@ -592,6 +601,239 @@ function UncontrolledExample() {
   );
 }
 
+const TextStylesExample = React.memo(() => {
+  const theme = useContext(RNTesterThemeContext);
+
+  return (
+    <TextStylesContainer
+      examples={[
+        {
+          name: 'backgroundColor',
+          textStyles: [
+            {backgroundColor: theme.SystemBackgroundColor},
+            {backgroundColor: 'red'},
+            {backgroundColor: 'orange'},
+            {backgroundColor: 'yellow'},
+            {backgroundColor: 'green'},
+            {backgroundColor: 'blue'},
+          ],
+        },
+        {
+          name: 'color',
+          textStyles: [
+            {color: theme.LabelColor},
+            {color: 'red'},
+            {color: 'orange'},
+            {color: 'yellow'},
+            {color: 'green'},
+            {color: 'blue'},
+          ],
+        },
+        {
+          name: 'fontFamily',
+          textStyles: [
+            {fontFamily: 'sans-serif'},
+            {fontFamily: 'serif'},
+            {fontFamily: 'monospace'},
+          ],
+        },
+        {
+          name: 'fontSize',
+          textStyles: [
+            {fontSize: 8},
+            {fontSize: 10},
+            {fontSize: 12},
+            {fontSize: 14},
+            {fontSize: 16},
+            {fontSize: 18},
+          ],
+        },
+        {
+          name: 'fontStyle',
+          textStyles: [{fontStyle: 'normal'}, {fontStyle: 'italic'}],
+        },
+        {
+          name: 'fontWeight',
+          textStyles: [
+            {fontWeight: 'normal'},
+            {fontWeight: 'bold'},
+            {fontWeight: '200'},
+            {fontWeight: '400'},
+            {fontWeight: '600'},
+            {fontWeight: '800'},
+          ],
+        },
+        {
+          name: 'letterSpacing',
+          textStyles: [
+            {letterSpacing: 0},
+            {letterSpacing: 1},
+            {letterSpacing: 2},
+            {letterSpacing: 3},
+            {letterSpacing: 4},
+            {letterSpacing: 5},
+          ],
+        },
+        {
+          name: 'lineHeight',
+          multiline: true,
+          textStyles: [
+            {lineHeight: 4},
+            {lineHeight: 8},
+            {lineHeight: 16},
+            {lineHeight: 24},
+          ],
+        },
+        {
+          name: 'textDecorationLine',
+          textStyles: [
+            {textDecorationLine: 'none'},
+            {textDecorationLine: 'underline'},
+            {textDecorationLine: 'line-through'},
+            {textDecorationLine: 'underline line-through'},
+          ],
+        },
+        {
+          name: 'textShadow',
+          textStyles: [
+            {
+              textShadowColor: 'black',
+              textShadowOffset: {width: 0, height: 0},
+              textShadowRadius: 0,
+            },
+            {
+              textShadowColor: 'black',
+              textShadowOffset: {width: 0, height: 0},
+              textShadowRadius: 5,
+            },
+            {
+              textShadowColor: 'red',
+              textShadowOffset: {width: 0, height: 0},
+              textShadowRadius: 5,
+            },
+            {
+              textShadowColor: 'blue',
+              textShadowOffset: {width: 0, height: -5},
+              textShadowRadius: 5,
+            },
+            {
+              textShadowColor: 'green',
+              textShadowOffset: {width: 0, height: 5},
+              textShadowRadius: 5,
+            },
+            {
+              textShadowColor: 'orange',
+              textShadowOffset: {width: 10, height: 0},
+              textShadowRadius: 5,
+            },
+          ],
+        },
+      ]}
+    />
+  );
+});
+
+type TextStylesContainerProps = {
+  examples: $ReadOnlyArray<{
+    name: string,
+    textStyles: $ReadOnlyArray<TextStyle>,
+    multiline?: boolean,
+  }>,
+};
+
+function TextStylesContainer({examples}: TextStylesContainerProps) {
+  const [offset, setOffset] = useState(0);
+
+  const MAX_CYCLES = 6;
+
+  return (
+    <View>
+      <RNTesterButton
+        testID="cycle-styles"
+        textTestID="cycle-styles-label"
+        onPress={() => setOffset((offset + 1) % MAX_CYCLES)}>
+        Cycle {offset + 1}/{MAX_CYCLES}
+      </RNTesterButton>
+      <View>
+        <View testID="styles-screenshot-area" style={styles.screenshotArea} />
+        {examples.map(({name, multiline, textStyles}) => (
+          <WithLabel label={name} key={name}>
+            {multiline ? (
+              <MultilineStyledTextInput
+                name={name}
+                textStyles={textStyles}
+                styleOffset={offset}
+              />
+            ) : (
+              <StyledTextInput
+                name={name}
+                textStyles={textStyles}
+                styleOffset={offset}
+              />
+            )}
+          </WithLabel>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+type StyledTextInputProps = {
+  name: string,
+  textStyles: $ReadOnlyArray<TextStyle>,
+  styleOffset: number,
+};
+
+function StyledTextInput({
+  name,
+  textStyles,
+  styleOffset,
+}: StyledTextInputProps) {
+  return (
+    <TextInput
+      style={[
+        styles.default,
+        textStyles[(0 + styleOffset) % textStyles.length],
+      ]}
+      testID={`style-${name}`}>
+      <Text>He</Text>
+      <Text style={textStyles[(1 + styleOffset) % textStyles.length]}>ll</Text>
+      <Text style={textStyles[(2 + styleOffset) % textStyles.length]}>
+        o,
+        <Text style={textStyles[(0 + styleOffset) % textStyles.length]}> </Text>
+      </Text>
+      <Text style={textStyles[(3 + styleOffset) % textStyles.length]}>Wo</Text>
+      <Text style={textStyles[(4 + styleOffset) % textStyles.length]}>rl</Text>
+      <Text style={textStyles[(5 + styleOffset) % textStyles.length]}>d!</Text>
+    </TextInput>
+  );
+}
+
+function MultilineStyledTextInput({
+  name,
+  textStyles,
+  styleOffset,
+}: StyledTextInputProps) {
+  return (
+    <TextInput
+      multiline={true}
+      style={[
+        styles.default,
+        textStyles[(0 + styleOffset) % textStyles.length],
+      ]}
+      testID={`style-${name}`}>
+      <Text>Hel{'\n'}</Text>
+      <Text style={textStyles[(1 + styleOffset) % textStyles.length]}>
+        lo {'\n'}
+      </Text>
+      <Text style={textStyles[(2 + styleOffset) % textStyles.length]}>
+        Wor{'\n'}
+      </Text>
+      <Text style={textStyles[(3 + styleOffset) % textStyles.length]}>ld!</Text>
+    </TextInput>
+  );
+}
+
 module.exports = ([
   {
     title: 'Auto-focus',
@@ -867,8 +1109,11 @@ module.exports = ([
   {
     title: 'Uncontrolled component with layout changes',
     name: 'uncontrolledComponent',
-    render: function (): React.Node {
-      return <UncontrolledExample />;
-    },
+    render: () => <UncontrolledExample />,
+  },
+  {
+    title: 'Text styles',
+    name: 'textStyles',
+    render: () => <TextStylesExample />,
   },
 ]: Array<RNTesterModuleExample>);