react-native-windows/packages/playground/Samples/text.tsx at 5bc473c59e4fcb1061ffb5a0b995a88b4b3ab092 · microsoft/react-native-windows · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
/**
 * Copyright (c) Microsoft Corporation.
 * Licensed under the MIT License.
 * @format
 */

import React from 'react';
import {AppRegistry, StyleSheet} from 'react-native';
import {Text, View} from 'react-native-windows';

export default class Bootstrap extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text
          style={styles.welcome}
          tooltip=" tooltip message for the text"
          accessible={true}
          selectable={true}>
          Click here : This is a text with a tooltip.
        </Text>

        <View style={styles.selectionTestContainer}>
          <Text style={styles.sectionTitle}>Text Selection Test</Text>
          <Text selectable={true} style={styles.selectableText}>
            This text is SELECTABLE. Try clicking and dragging to select it.
          </Text>
          <Text selectable={true} style={styles.selectableText}>
            Hello 世界世界 World - Double-click to test CJK word selection!
          </Text>
          <Text selectable={false} style={styles.nonSelectableText}>
            This text is NOT selectable (selectable=false).
          </Text>
          <Text style={styles.defaultText}>
            This text has no selectable prop (default behavior).
          </Text>
        </View>

        <View style={styles.selectionColorTestContainer}>
          <Text style={styles.sectionTitle}>Selection Color Test</Text>
          <Text
            selectable={true}
            selectionColor="red"
            style={styles.selectableText}>
            Red selection color - Select this text to see red highlight!
          </Text>
          <Text
            selectable={true}
            selectionColor="#00FF00"
            style={styles.selectableText}>
            Green selection color (#00FF00) - Select this text!
          </Text>
          <Text
            selectable={true}
            selectionColor="rgba(255, 165, 0, 0.5)"
            style={styles.selectableText}>
            Orange with 50% opacity - Select this text!
          </Text>
          <Text
            selectable={true}
            selectionColor="blue"
            style={styles.selectableText}>
            Blue selection color - Select this text!
          </Text>
          <Text selectable={true} style={styles.selectableText}>
            Default selection color (no selectionColor prop) - Uses theme
            default.
          </Text>
        </View>

        <View
          style={styles.container2}
          accessible={true}
          accessibilityLabel="Annotation Check"
          accessibilityAnnotation={{
            typeID: 'Comment',
            typeName: 'Check Comment',
            author: 'Christopher tarantino',
            dateTime: '3/19/2025 1:03 PM',
          }}>
          <Text
            adjustsFontSizeToFit
            style={{maxHeight: 80, fontSize: 72}}
            minimumFontScale={0.5}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#C5CCFF',
  },
  container2: {
    backgroundColor: 'lightcoral',
    padding: 10,
    marginBottom: 10,
    width: 500,
    height: 100,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  selectionTestContainer: {
    backgroundColor: '#f0f0f0',
    padding: 15,
    marginVertical: 10,
    borderRadius: 8,
    width: 400,
  },
  selectionColorTestContainer: {
    backgroundColor: '#fff0f5',
    padding: 15,
    marginVertical: 10,
    borderRadius: 8,
    width: 400,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
    color: '#333',
  },
  selectableText: {
    fontSize: 16,
    color: '#007ACC',
    marginBottom: 8,
    padding: 8,
    backgroundColor: '#e8f4fc',
  },
  nonSelectableText: {
    fontSize: 16,
    color: '#666',
    marginBottom: 8,
    padding: 8,
    backgroundColor: '#f5f5f5',
  },
  defaultText: {
    fontSize: 16,
    color: '#999',
    padding: 8,
  },
});

AppRegistry.registerComponent('Bootstrap', () => Bootstrap);