Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(rn-tester): text input and xml http request dark mode adjustments (#48207)

Browse Source 
Summary:
Was troubleshooting in these modules recently and noticed a few texts off in dark mode. Replacing a few instances of the Text component in all I could see in the two screens.

## Changelog:

[INTERNAL] - RN Tester `TextInput` & `XMLHttpRequest` dark mode adjustments

Pull Request resolved: https://github.com/facebook/react-native/pull/48207

Test Plan:
<details>
<summary>View Screenshots (before fixes)</summary>

| Screenshot 1 | Screenshot 2 | Screenshot 3 | Screenshot 4 | Screenshot 5 | Screenshot 6 |
|--------------|--------------|--------------|--------------|--------------|--------------|
| ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 11 36](https://github.com/user-attachments/assets/c396bc5d-4b3c-4f63-8ac0-68bc808aa9d4) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 11 21](https://github.com/user-attachments/assets/cd8e5a2f-9066-4bc7-b56b-65dbd6df7dc4) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 10 30](https://github.com/user-attachments/assets/da451c18-40cd-4421-b8f5-a2462f82fee9) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 10 23](https://github.com/user-attachments/assets/32925fdb-f983-439f-b898-6986b739895a) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 10 19](https://github.com/user-attachments/assets/f0db7b49-dfef-4abc-aef0-2d55b016c0f8) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 10 16](https://github.com/user-attachments/assets/bad6dc45-3679-4bb6-aadd-6743053cd90f) |
| ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 10 10](https://github.com/user-attachments/assets/43028f51-c6e2-4b26-b20d-a3639606d6d5) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 10 07](https://github.com/user-attachments/assets/f8e2196e-bc64-4507-b330-d1d85730ddff) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 09 59](https://github.com/user-attachments/assets/a7100770-4b38-421f-9b73-09e4fff9e012) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 09 53](https://github.com/user-attachments/assets/27759c8c-0e56-4b92-8173-ba031b994e5c) | | | |

</details>

<details>
<summary>View Screenshots (after fixes)</summary>

| Screenshot 1 | Screenshot 2 | Screenshot 3 | Screenshot 4 | Screenshot 5 | Screenshot 6 |
|--------------|--------------|--------------|--------------|--------------|--------------|
| ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 05 30](https://github.com/user-attachments/assets/71c0287d-d98a-4bfe-85dc-1e08da12ce43) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 05 26](https://github.com/user-attachments/assets/45eac165-f42a-4193-98cc-3ee85d963382) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 05 23](https://github.com/user-attachments/assets/c0e4432d-2d1d-487f-8965-3829c3257364) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 05 19](https://github.com/user-attachments/assets/ab81500c-66c1-4b90-b2b1-f7c490e0029b) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 05 16](https://github.com/user-attachments/assets/aafcad74-e851-49a8-9db0-df06f81f0b30) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 05 11](https://github.com/user-attachments/assets/29a2a6c8-e448-4c90-844d-29a248f9ab69) |
| ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 05 07](https://github.com/user-attachments/assets/54e505c4-c554-4000-aac1-61b97e034f55) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 04 39](https://github.com/user-attachments/assets/0e91dc29-199d-424e-b36a-6b0f7a317cd2) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 04 22](https://github.com/user-attachments/assets/e965b01d-0b03-4d01-a971-57c3bd550146) | ![Simulator Screenshot - iPhone SE (3rd generation) - 2024-12-11 at 00 04 15](https://github.com/user-attachments/assets/50ef03a6-bf1a-4db3-845b-e98373369574) |  |  |

</details>

Reviewed By: cipolleschi

Differential Revision: D67087492

Pulled By: javache

fbshipit-source-id: c9c64377d8c10d965bc5db7783aa80f099ce858a
This commit is contained in:
Mateo Guzmán
2024-12-12 04:07:10 -08:00
committed by Facebook GitHub Bot
parent dffa57fa25
commit 79ed11f8f4
8 changed files with 107 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/rn-tester/js/examples/Text/TextExample.ios.js
+3 -2
View File
@@ -12,6 +12,7 @@
import type {RNTesterModule} from '../../types/RNTesterTypes';
import RNTesterText from '../../components/RNTesterText';
import TextLegend from '../../components/TextLegend';
import TextInlineViewsExample from './TextInlineViewsExample';
@@ -1350,9 +1351,9 @@ const examples = [
return (
<View key={code}>
<Text style={{fontWeight: 'bold'}}>{`[${code}]`}</Text>
<Text lineBreakStrategyIOS={strategy}>
<RNTesterText lineBreakStrategyIOS={strategy}>
{textByCode[code]}
</Text>
</RNTesterText>
</View>
);
})}
packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js
+29 -15
View File
@@ -16,6 +16,7 @@ import type {
} from '../../types/RNTesterTypes';
import type {KeyboardType} from 'react-native/Libraries/Components/TextInput/TextInput';
import RNTesterText from '../../components/RNTesterText';
import ExampleTextInput from './ExampleTextInput';
const TextInputSharedExamples = require('./TextInputSharedExamples.js');
@@ -36,7 +37,7 @@ class WithLabel extends React.Component<$FlowFixMeProps> {
return (
<View style={styles.labelContainer}>
<View style={styles.label}>
<Text>{this.props.label}</Text>
<RNTesterText>{this.props.label}</RNTesterText>
</View>
{this.props.children}
</View>
@@ -58,7 +59,9 @@ class TextInputAccessoryViewChangeTextExample extends React.Component<
const inputAccessoryViewID = 'inputAccessoryView1';
return (
<View>
<Text>Set InputAccessoryView with ID & reset text:</Text>
<RNTesterText>
Set InputAccessoryView with ID & reset text:
</RNTesterText>
<ExampleTextInput
inputAccessoryViewID={inputAccessoryViewID}
onChangeText={text => this.setState({text})}
@@ -98,7 +101,9 @@ class TextInputAccessoryViewChangeKeyboardExample extends React.Component<
const inputAccessoryViewID = 'inputAccessoryView2';
return (
<View>
<Text>Set InputAccessoryView with ID & switch keyboard:</Text>
<RNTesterText>
Set InputAccessoryView with ID & switch keyboard:
</RNTesterText>
{/* $FlowFixMe[incompatible-use] */}
<ExampleTextInput
inputAccessoryViewID={inputAccessoryViewID}
@@ -180,7 +185,7 @@ class SecureEntryExample extends React.Component<$FlowFixMeProps, any> {
onChangeText={text => this.setState({text})}
value={this.state.text}
/>
<Text>Current text is: {this.state.text}</Text>
<RNTesterText>Current text is: {this.state.text}</RNTesterText>
<View
style={{
flex: 1,
@@ -233,19 +238,19 @@ class AutogrowingTextInputExample extends React.Component<
const {style, multiline, ...props} = this.props;
return (
<View>
<Text>Full width:</Text>
<RNTesterText>Full width:</RNTesterText>
<Switch
value={this.state.fullWidth}
onValueChange={value => this.setState({fullWidth: value})}
/>
<Text>Multiline:</Text>
<RNTesterText>Multiline:</RNTesterText>
<Switch
value={this.state.multiline}
onValueChange={value => this.setState({multiline: value})}
/>
<Text>TextInput:</Text>
<RNTesterText>TextInput:</RNTesterText>
<ExampleTextInput
value="prop"
multiline={this.state.multiline}
@@ -256,9 +261,11 @@ class AutogrowingTextInputExample extends React.Component<
}
{...props}
/>
<Text>Plain text value representation:</Text>
<Text>{this.state.text}</Text>
<Text>Content Size: {JSON.stringify(this.state.contentSize)}</Text>
<RNTesterText>Plain text value representation:</RNTesterText>
<RNTesterText>{this.state.text}</RNTesterText>
<RNTesterText>
Content Size: {JSON.stringify(this.state.contentSize)}
</RNTesterText>
</View>
);
}
@@ -655,7 +662,7 @@ const textInputExamples: Array<RNTesterModuleExample> = [
render: function (): React.Node {
return (
<View>
<Text>Singleline TextInput</Text>
<RNTesterText>Singleline TextInput</RNTesterText>
<View style={{height: 80}}>
<ExampleTextInput
style={{
@@ -674,8 +681,8 @@ const textInputExamples: Array<RNTesterModuleExample> = [
placeholder="Placeholder defines intrinsic size"
/>
</View>
<Text>Multiline TextInput</Text>
<View style={{height: 130}}>
<RNTesterText>Multiline TextInput</RNTesterText>
<View style={{height: 80}}>
<ExampleTextInput
style={{
position: 'absolute',
@@ -695,6 +702,7 @@ const textInputExamples: Array<RNTesterModuleExample> = [
placeholder="Placeholder defines intrinsic size"
/>
</View>
<RNTesterText>Multiline TextInput with flex</RNTesterText>
<View>
<ExampleTextInput
style={{
@@ -887,7 +895,10 @@ const textInputExamples: Array<RNTesterModuleExample> = [
{Object.keys(textByCode).map(code => {
return (
<View key={code}>
<Text style={{fontWeight: 'bold'}}>{`[${code}]`}</Text>
<RNTesterText
style={{
fontWeight: 'bold',
}}>{`[${code}]`}</RNTesterText>
<ExampleTextInput
multiline
lineBreakStrategyIOS={strategy}
@@ -954,7 +965,10 @@ const textInputExamples: Array<RNTesterModuleExample> = [
{Object.keys(textByCode).map(code => {
return (
<View key={code}>
<Text style={{fontWeight: 'bold'}}>{`[${code}]`}</Text>
<RNTesterText
style={{
fontWeight: 'bold',
}}>{`[${code}]`}</RNTesterText>
<ExampleTextInput
lineBreakModeIOS={strategy}
defaultValue={textByCode[code]}
packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js
+20 -15
View File
@@ -14,6 +14,7 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
import type {TextStyle} from 'react-native/Libraries/StyleSheet/StyleSheet';
import RNTesterButton from '../../components/RNTesterButton';
import RNTesterText from '../../components/RNTesterText';
import {RNTesterThemeContext} from '../../components/RNTesterTheme';
import ExampleTextInput from './ExampleTextInput';
import * as React from 'react';
@@ -114,7 +115,7 @@ class WithLabel extends React.Component<$FlowFixMeProps> {
render(): React.Node {
return (
<View style={styles.labelContainer}>
<Text style={styles.label}>{this.props.label}</Text>
<RNTesterText style={styles.label}>{this.props.label}</RNTesterText>
<View style={styles.inputContainer}>{this.props.children}</View>
</View>
);
@@ -417,13 +418,13 @@ class TextEventsExample extends React.Component<{...}, $FlowFixMeState> {
}
style={styles.singleLine}
/>
<Text style={styles.eventLabel}>
<RNTesterText style={styles.eventLabel}>
{this.state.curText}
{'\n'}
(prev: {this.state.prevText}){'\n'}
(prev2: {this.state.prev2Text}){'\n'}
(prev3: {this.state.prev3Text})
</Text>
</RNTesterText>
</View>
);
}
@@ -571,34 +572,38 @@ class SelectionExample extends React.Component<
/>
</View>
<View>
<Text testID={`${this.props.testID}-selection`}>
<RNTesterText testID={`${this.props.testID}-selection`}>
selection ={' '}
{`{start:${this.state.selection.start},end:${this.state.selection.end}}`}
</Text>
<Text
</RNTesterText>
<RNTesterText
testID={`${this.props.testID}-cursor-start`}
// $FlowFixMe[method-unbinding] added when improving typing for this parameters
onPress={this.placeAt.bind(this, 0)}>
Place at Start (0, 0)
</Text>
<Text
</RNTesterText>
<RNTesterText
testID={`${this.props.testID}-cursor-end`}
// $FlowFixMe[method-unbinding] added when improving typing for this parameters
onPress={this.placeAt.bind(this, length)}>
Place at End ({length}, {length})
</Text>
</RNTesterText>
{/* $FlowFixMe[method-unbinding] added when improving typing for this
* parameters */}
<Text onPress={this.placeAtRandom.bind(this)}>Place at Random</Text>
<Text
<RNTesterText onPress={this.placeAtRandom.bind(this)}>
Place at Random
</RNTesterText>
<RNTesterText
testID={`${this.props.testID}-select-all`}
// $FlowFixMe[method-unbinding] added when improving typing for this parameters
onPress={this.select.bind(this, 0, length)}>
Select All
</Text>
</RNTesterText>
{/* $FlowFixMe[method-unbinding] added when improving typing for this
* parameters */}
<Text onPress={this.selectRandom.bind(this)}>Select Random</Text>
<RNTesterText onPress={this.selectRandom.bind(this)}>
Select Random
</RNTesterText>
</View>
</View>
);
@@ -855,7 +860,7 @@ function DynamicContentWidth() {
return (
<View>
<Text>Uncontrolled:</Text>
<RNTesterText>Uncontrolled:</RNTesterText>
<TextInput
placeholder="Type..."
style={{
@@ -864,7 +869,7 @@ function DynamicContentWidth() {
backgroundColor: 'orange',
}}
/>
<Text>Controlled:</Text>
<RNTesterText>Controlled:</RNTesterText>
<TextInput
placeholder="..."
value={text}
packages/rn-tester/js/examples/XHR/XHRExampleBinaryUpload.js
+7 -5
View File
@@ -10,17 +10,17 @@
'use strict';
import RNTesterText from '../../components/RNTesterText';
import RNTOption from '../../components/RNTOption';
const React = require('react');
const {
import React from 'react';
import {
Alert,
Linking,
StyleSheet,
Text,
TouchableHighlight,
View,
} = require('react-native');
} from 'react-native';
const BINARY_TYPES = {
String,
@@ -112,7 +112,9 @@ class XHRExampleBinaryUpload extends React.Component<{...}, $FlowFixMeState> {
return (
<View>
<View style={styles.block}>
<Text style={styles.title}>Upload 255 bytes as ...</Text>
<RNTesterText style={styles.title}>
Upload 255 bytes as ...
</RNTesterText>
<View style={styles.row}>
{Object.keys(BINARY_TYPES).map(type => (
<RNTOption
packages/rn-tester/js/examples/XHR/XHRExampleDownload.js
+10 -8
View File
@@ -10,6 +10,8 @@
'use strict';
import RNTesterText from '../../components/RNTesterText';
const React = require('react');
const {
Alert,
@@ -162,10 +164,10 @@ class XHRExampleDownload extends React.Component<{...}, Object> {
const {responseLength, contentLength} = this.state;
readystate = (
<View>
<Text style={styles.progressBarLabel}>
<RNTesterText style={styles.progressBarLabel}>
responseText: {roundKilo(responseLength)}/{roundKilo(contentLength)}
k chars
</Text>
</RNTesterText>
</View>
);
}
@@ -173,10 +175,10 @@ class XHRExampleDownload extends React.Component<{...}, Object> {
const {progressLoaded, progressTotal} = this.state;
progress = (
<View>
<Text style={styles.progressBarLabel}>
<RNTesterText style={styles.progressBarLabel}>
onprogress: {roundKilo(progressLoaded)}/{roundKilo(progressTotal)}{' '}
KB
</Text>
</RNTesterText>
</View>
);
}
@@ -184,7 +186,7 @@ class XHRExampleDownload extends React.Component<{...}, Object> {
return (
<View>
<View style={styles.configRow}>
<Text>onreadystatechange handler</Text>
<RNTesterText>onreadystatechange handler</RNTesterText>
<Switch
value={this.state.readystateHandler}
onValueChange={readystateHandler =>
@@ -193,21 +195,21 @@ class XHRExampleDownload extends React.Component<{...}, Object> {
/>
</View>
<View style={styles.configRow}>
<Text>onprogress handler</Text>
<RNTesterText>onprogress handler</RNTesterText>
<Switch
value={this.state.progressHandler}
onValueChange={progressHandler => this.setState({progressHandler})}
/>
</View>
<View style={styles.configRow}>
<Text>download as arraybuffer</Text>
<RNTesterText>download as arraybuffer</RNTesterText>
<Switch
value={this.state.arraybuffer}
onValueChange={arraybuffer => this.setState({arraybuffer})}
/>
</View>
<View style={styles.configRow}>
<Text>transfer-encoding: chunked</Text>
<RNTesterText>transfer-encoding: chunked</RNTesterText>
<Switch
value={this.state.chunked}
onValueChange={chunked => this.setState({chunked})}
packages/rn-tester/js/examples/XHR/XHRExampleFetch.js
+31 -21
View File
@@ -10,15 +10,16 @@
'use strict';
const React = require('react');
const {
import {RNTesterThemeContext} from '../../components/RNTesterTheme';
import React from 'react';
import {
Button,
Platform,
StyleSheet,
Text,
TextInput,
View,
} = require('react-native');
} from 'react-native';
class XHRExampleFetch extends React.Component<any, any> {
responseURL: ?string;
@@ -113,24 +114,33 @@ class XHRExampleFetch extends React.Component<any, any> {
) : null;
return (
<View>
<Button
title="RepeatedlyFetch"
onPress={() => this.startRepeatedlyFetch()}
/>
<Text style={styles.label}>Edit URL to submit:</Text>
<TextInput
returnKeyType="go"
defaultValue="http://www.posttestserver.com/post.php"
onSubmitEditing={event => {
this.submit(event.nativeEvent.text);
}}
style={styles.textInput}
/>
{responseURL}
{responseHeaders}
{response}
</View>
<RNTesterThemeContext.Consumer>
{theme => (
<>
<Button
title="RepeatedlyFetch"
onPress={() => this.startRepeatedlyFetch()}
/>
<Text style={styles.label}>Edit URL to submit:</Text>
<TextInput
returnKeyType="go"
defaultValue="http://www.posttestserver.com/post.php"
onSubmitEditing={event => {
this.submit(event.nativeEvent.text);
}}
style={[
styles.textInput,
{
color: theme.LabelColor,
},
]}
/>
{responseURL}
{responseHeaders}
{response}
</>
)}
</RNTesterThemeContext.Consumer>
);
}
}
packages/rn-tester/js/examples/XHR/XHRExampleHeaders.js
+4 -3
View File
@@ -10,8 +10,9 @@
'use strict';
const React = require('react');
const {StyleSheet, Text, TouchableHighlight, View} = require('react-native');
import RNTesterText from '../../components/RNTesterText';
import React from 'react';
import {StyleSheet, Text, TouchableHighlight, View} from 'react-native';
class XHRExampleHeaders extends React.Component {
xhr: XMLHttpRequest;
@@ -94,7 +95,7 @@ class XHRExampleHeaders extends React.Component {
return (
<View>
{button}
<Text>{this.state.headers}</Text>
<RNTesterText>{this.state.headers}</RNTesterText>
</View>
);
}
packages/rn-tester/js/examples/XHR/XHRExampleOnTimeOut.js
+3 -1
View File
@@ -10,6 +10,8 @@
'use strict';
import RNTesterText from '../../components/RNTesterText';
const React = require('react');
const {StyleSheet, Text, TouchableHighlight, View} = require('react-native');
@@ -79,7 +81,7 @@ class XHRExampleOnTimeOut extends React.Component<any, any> {
return (
<View>
{button}
<Text>{this.state.status}</Text>
<RNTesterText>{this.state.status}</RNTesterText>
</View>
);
}