diff --git a/packages/@react-native-windows/tester/src/js/examples-win/Text/TextExample.windows.tsx b/packages/@react-native-windows/tester/src/js/examples-win/Text/TextExample.windows.tsx
index 3943976c12d..a96c2cc79c7 100644
--- a/packages/@react-native-windows/tester/src/js/examples-win/Text/TextExample.windows.tsx
+++ b/packages/@react-native-windows/tester/src/js/examples-win/Text/TextExample.windows.tsx
@@ -11,6 +11,7 @@ import React from 'react';
import {
/*Image,*/ StyleSheet,
Text,
+ TextInput,
View,
TextStyle,
TouchableWithoutFeedback,
@@ -167,6 +168,49 @@ export class BackgroundColorDemo extends React.Component<{}> {
}
}
+export class TextHighlightDemo extends React.Component<{}, {search: string}> {
+ constructor(props: any) {
+ super(props);
+ this.state = {search: ''};
+ }
+
+ private getTextParts(text: string) {
+ if (this.state.search === '') {
+ return [text];
+ }
+
+ let parts = text.split(this.state.search);
+ for (let i = parts.length - 2; i >= 0; --i) {
+ parts = [
+ ...parts.slice(0, i + 1),
+ this.state.search,
+ ...parts.slice(i + 1),
+ ];
+ }
+
+ return parts.map((part, i) => (
+
+ {part}
+
+ ));
+ }
+
+ public render() {
+ const exampleText = 'The quick brown fox jumped over the lazy dog.';
+ const parts = this.getTextParts(exampleText);
+ return (
+
+ this.setState({search: text})}
+ />
+ {parts}
+
+ );
+ }
+}
+
export class TextExample extends React.Component<
{},
{toggle1: boolean; toggle2: boolean; toggle3: boolean}
@@ -792,6 +836,9 @@ export class TextExample extends React.Component<
+
+
+
);
}
@@ -825,6 +872,9 @@ export const styles = StyleSheet.create({
borderColor: 'black',
width: 400,
},
+ highlight: {
+ backgroundColor: 'yellow',
+ },
});
export const displayName = (_undefined?: string) => {};