diff --git a/packages/rn-tester/js/examples/PixelRatio/PixelRatioExample.js b/packages/rn-tester/js/examples/PixelRatio/PixelRatioExample.js new file mode 100644 index 00000000000..5dd49eb4240 --- /dev/null +++ b/packages/rn-tester/js/examples/PixelRatio/PixelRatioExample.js @@ -0,0 +1,201 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @flow strict-local + */ + +'use strict'; + +import React, {useState} from 'react'; +import { + Button, + PixelRatio, + StyleSheet, + Text, + TextInput, + View, +} from 'react-native'; + +function LayoutSizeToPixel() { + const [layoutDPSize, setLayoutDPSize] = useState(0); + const pixelSize = PixelRatio.getPixelSizeForLayoutSize( + layoutDPSize ? layoutDPSize : 0, + ); + + const handleDPInputChange = (changedText: string) => { + const layoutSize = parseInt(changedText, 10); + setLayoutDPSize(layoutSize); + }; + + return ( + + + + Layout Size(dp): + + + + Pixel Size: + {pixelSize}px + + + + ); +} + +function RoundToNearestPixel() { + const [layoutDPSizeText, setLayoutDPSizeText] = useState(''); + const layoutDPSize = parseFloat(layoutDPSizeText); + + const pixelSize = PixelRatio.roundToNearestPixel( + layoutDPSize ? layoutDPSize : 0, + ); + + const handleDPInputChange = (changedText: string) => { + setLayoutDPSizeText(changedText); + }; + + return ( + + + + Layout Size(dp): + + + + Nearest Layout Size: + {pixelSize}dp + + + + ); +} + +function GetPixelRatio() { + const [pixelDensity, setPixelDensity] = useState(0); + + const getPixelDensityCallback = () => { + setPixelDensity(PixelRatio.get()); + }; + + return ( + + +