Skip to content

Commit

Permalink
fix(rn-tester): adjusting text examples in dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@mateoguzmana
mateoguzmana committed Dec 23, 2024
1 parent 5b6e35a commit 330c43e
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 330c43e

Please sign in to comment.