React/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2024-11-21 22:10:14 +00:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

fix(rn-tester): pixel ratio example inputs not fully visible in dark mode (#47526)

Browse Source 
Summary:
Found this small dark mode issue when navigating into the `PixelRatioExamples`

## Changelog:

[INTERNAL] [FIXED] - Fixing dark mode inputs for `PixelRatio` examples

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

Test Plan:
| Before  | After |
  | ---------- | ---------- |
  | ![Screenshot_1731090926](https://github.com/user-attachments/assets/9e20c44e-0152-4760-a436-3272b452a6a2) | ![Screenshot_1731090971](https://github.com/user-attachments/assets/17d038a8-b383-4c96-a30d-c7d213cc6f97) |

Reviewed By: lunaleaps

Differential Revision: D65735837

Pulled By: Abbondanzo

fbshipit-source-id: 5b0dc6d0ae45778723a92581cef00ce7ec4c56f1
This commit is contained in:
Mateo Guzmán 2024-11-11 10:58:56 -08:00 committed by Facebook GitHub Bot
parent 5b609cca09
commit 998ab262ea
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/rn-tester/js/examples/PixelRatio/PixelRatioExample.js
View File

@ -11,10 +11,12 @@
'use strict';
import RNTesterText from '../../components/RNTesterText';
import {RNTesterThemeContext} from '../../components/RNTesterTheme';
import React, {useState} from 'react';
import {Button, PixelRatio, StyleSheet, TextInput, View} from 'react-native';
function LayoutSizeToPixel() {
const theme = React.useContext(RNTesterThemeContext);
const [layoutDPSize, setLayoutDPSize] = useState<number>(0);
const pixelSize = PixelRatio.getPixelSizeForLayoutSize(
layoutDPSize ? layoutDPSize : 0,
@ -33,7 +35,10 @@ function LayoutSizeToPixel() {
Layout Size(dp):{' '}
</RNTesterText>
<TextInput
style={styles.input}
style={[
styles.input,
{color: theme.LabelColor, borderColor: theme.SeparatorColor},
]}
value={layoutDPSize ? layoutDPSize.toString() : ''}
keyboardType={'numeric'}
onChangeText={handleDPInputChange}
@ -49,6 +54,7 @@ function LayoutSizeToPixel() {
}
function RoundToNearestPixel() {
const theme = React.useContext(RNTesterThemeContext);
const [layoutDPSizeText, setLayoutDPSizeText] = useState('');
const layoutDPSize = parseFloat(layoutDPSizeText);
@ -68,7 +74,10 @@ function RoundToNearestPixel() {
Layout Size(dp):{' '}
</RNTesterText>
<TextInput
style={styles.input}
style={[
styles.input,
{color: theme.LabelColor, borderColor: theme.SeparatorColor},
]}
value={layoutDPSizeText ? layoutDPSizeText.toString() : ''}
keyboardType={'numeric'}
onChangeText={handleDPInputChange}