Skip to content

Commit

Permalink
Fix RNTester dark mode Android Text examples (#48380)
Browse files Browse the repository at this point in the history 
Summary:
The Android `Text` examples in dark mode are not readable. This PR addresses that by replacing the `Text` usages with `RNTesterText`.

## Changelog:

[INTERNAL] [FIXED] - Fixing dark mode Android `Text` examples

Pull Request resolved: #48380

Test Plan:
Some screenshots after the fixes.

| Image 1 | Image 2 | Image 3 | Image 4 | Image 5 |
|---------|---------|---------|---------|---------|
| ![Screenshot_1734981250](https://github.com/user-attachments/assets/d9c27ac7-5024-478b-a47c-3c057801eea1) | ![Screenshot_1734981168](https://github.com/user-attachments/assets/92c6e11a-ac30-46f5-8878-3659d9e40f9a) | ![Screenshot_1734981146](https://github.com/user-attachments/assets/8bfba649-e036-473a-a622-2289daf67951) | ![Screenshot_1734981127](https://github.com/user-attachments/assets/9b1e2a68-8b34-463b-8637-f2b5682733d2) | ![Screenshot_1734981115](https://github.com/user-attachments/assets/af0c85c5-6216-4af1-ae92-b818213f3719) |
| Image 6 | Image 7 | Image 8 | Image 9 | Image 10 |
|---------|---------|---------|---------|---------|
| ![Screenshot_1734981101](https://github.com/user-attachments/assets/91a07f43-8b9e-4462-8906-5ee1f68741a5) | ![Screenshot_1734981080](https://github.com/user-attachments/assets/3b8ffe9a-53b9-4863-b332-d3055740aa18) | ![Screenshot_1734980904](https://github.com/user-attachments/assets/c5aa8bb6-f1f6-4693-bc31-74557946f009) | ![Screenshot_1734981057](https://github.com/user-attachments/assets/10c8c785-58b8-401a-ad18-7bdcd91cd28d) | ![Screenshot_1734980876](https://github.com/user-attachments/assets/d9ed3b35-01fe-4311-adf3-7a6e4e13aeab) |

Reviewed By: javache

Differential Revision: D67657571

Pulled By: philIip

fbshipit-source-id: da93d072f4bb32017961ee70c76f6add8a874ae1
  • Loading branch information
@mateoguzmana @facebook-github-bot
mateoguzmana authored and facebook-github-bot committed Jan 3, 2025
1 parent b030418 commit 33aebc3
Show file tree
Hide file tree
Showing 3 changed files with 508 additions and 401 deletions.
73 changes: 39 additions & 34 deletions packages/rn-tester/js/components/TextInlineView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,31 +10,32 @@

'use strict';

const React = require('react');
const {Image, Text, TouchableHighlight, View} = require('react-native');
import RNTesterText from '../components/RNTesterText';
import React from 'react';
import {Image, TouchableHighlight, View} from 'react-native';

function Basic(): React.Node {
return (
<Text>
<RNTesterText>
This text contains an inline blue view{' '}
<View style={{width: 25, height: 25, backgroundColor: 'steelblue'}} /> and
an inline image <Image source={require('../assets/flux.png')} />. Neat,
huh?
</Text>
</RNTesterText>
);
}

function NestedTexts(): React.Node {
return (
<View>
<Text>This is the first row</Text>
<Text>
<Text>
<Text>This is a nested text </Text>
<RNTesterText>This is the first row</RNTesterText>
<RNTesterText>
<RNTesterText>
<RNTesterText>This is a nested text </RNTesterText>
<View style={{height: 20, width: 20, backgroundColor: 'red'}} />
<Text> with a Red View</Text>
</Text>
</Text>
<RNTesterText> with a Red View</RNTesterText>
</RNTesterText>
</RNTesterText>
</View>
);
}
Expand All @@ -45,11 +46,12 @@ function ClippedByText(): React.Node {
{/*
* Inline View
**/}
<Text>
The <Text style={{fontWeight: 'bold'}}>inline view</Text> below is
taller than its Text parent and should be clipped.
</Text>
<Text
<RNTesterText>
The{' '}
<RNTesterText style={{fontWeight: 'bold'}}>inline view</RNTesterText>{' '}
below is taller than its Text parent and should be clipped.
</RNTesterText>
<RNTesterText
style={{
overflow: 'hidden',
width: 150,
Expand All @@ -69,16 +71,17 @@ function ClippedByText(): React.Node {
}}
/>
</View>
</Text>
</RNTesterText>

{/*
* Inline Image
**/}
<Text style={{marginTop: 10}}>
The <Text style={{fontWeight: 'bold'}}>inline image</Text> below is
taller than its Text parent and should be clipped.
</Text>
<Text
<RNTesterText style={{marginTop: 10}}>
The{' '}
<RNTesterText style={{fontWeight: 'bold'}}>inline image</RNTesterText>{' '}
below is taller than its Text parent and should be clipped.
</RNTesterText>
<RNTesterText
style={{
overflow: 'hidden',
width: 175,
Expand All @@ -97,7 +100,7 @@ function ClippedByText(): React.Node {
height: 100,
}}
/>
</Text>
</RNTesterText>
</View>
);
}
Expand All @@ -118,11 +121,11 @@ class ChangeImageSize extends React.Component<mixed, ChangeSizeState> {
onPress={() => {
this.setState({width: this.state.width === 50 ? 100 : 50});
}}>
<Text style={{fontSize: 15}}>
<RNTesterText style={{fontSize: 15}}>
Change Image Width (width={this.state.width})
</Text>
</RNTesterText>
</TouchableHighlight>
<Text>
<RNTesterText>
This is an
<Image
source={{
Expand All @@ -136,7 +139,7 @@ class ChangeImageSize extends React.Component<mixed, ChangeSizeState> {
}}
/>
inline image
</Text>
</RNTesterText>
</View>
);
}
Expand All @@ -154,11 +157,11 @@ class ChangeViewSize extends React.Component<mixed, ChangeSizeState> {
onPress={() => {
this.setState({width: this.state.width === 50 ? 100 : 50});
}}>
<Text style={{fontSize: 15}}>
<RNTesterText style={{fontSize: 15}}>
Change View Width (width={this.state.width})
</Text>
</RNTesterText>
</TouchableHighlight>
<Text>
<RNTesterText>
This is an
<View
style={{
Expand All @@ -168,7 +171,7 @@ class ChangeViewSize extends React.Component<mixed, ChangeSizeState> {
}}
/>
inline view
</Text>
</RNTesterText>
</View>
);
}
Expand All @@ -192,9 +195,11 @@ class ChangeInnerViewSize extends React.Component<mixed, ChangeSizeState> {
rerendered and remains at its old size. If other things change
(e.g. we display `state.width` as text somewhere) it could circumvent
the bug and cause the pink view to be rerendered at its new size. */}
<Text style={{fontSize: 15}}>Change Pink View Width</Text>
<RNTesterText style={{fontSize: 15}}>
Change Pink View Width
</RNTesterText>
</TouchableHighlight>
<Text>
<RNTesterText>
This is an
<View style={{width: 125, height: 75, backgroundColor: 'steelblue'}}>
<View
Expand All @@ -206,7 +211,7 @@ class ChangeInnerViewSize extends React.Component<mixed, ChangeSizeState> {
/>
</View>
inline view
</Text>
</RNTesterText>
</View>
);
}
Expand Down
17 changes: 11 additions & 6 deletions packages/rn-tester/js/components/TextLegend.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
* @flow strict-local
*/

import RNTesterText from '../components/RNTesterText';
import RNTOption from './RNTOption';
import * as React from 'react';
import {StyleSheet, Text, View} from 'react-native';
Expand Down Expand Up @@ -45,10 +46,14 @@ export default function TextLegend(): React.Node {
const [fontSize, setFontSize] = React.useState(50);
return (
<View>
<Text onPress={() => setFontSize(fontSize + 3)}>Increase size</Text>
<Text onPress={() => setFontSize(fontSize - 3)}>Decrease size</Text>
<RNTesterText onPress={() => setFontSize(fontSize + 3)}>
Increase size
</RNTesterText>
<RNTesterText onPress={() => setFontSize(fontSize - 3)}>
Decrease size
</RNTesterText>
<View style={styles.block}>
<Text style={styles.title}>Language</Text>
<RNTesterText style={styles.title}>Language</RNTesterText>
<View style={styles.row}>
{Object.keys(PANGRAMS).map(lang => (
<RNTOption
Expand Down Expand Up @@ -194,7 +199,7 @@ export default function TextLegend(): React.Node {
];
},
)}
<Text
<RNTesterText
onTextLayout={event => {
setTextMetrics(event.nativeEvent.lines);
}}
Expand All @@ -203,10 +208,10 @@ export default function TextLegend(): React.Node {
textAlign: alignment,
}}>
{PANGRAMS[language]}
</Text>
</RNTesterText>
</View>
<View style={styles.row}>
<Text>Alignment:</Text>
<RNTesterText>Alignment:</RNTesterText>
<RNTOption
label="Left Align"
key="left_align"
Expand Down
Loading

0 comments on commit 33aebc3

Please sign in to comment.