From b1576e5b1a407be91e8a8e48196d470e633cfd4b Mon Sep 17 00:00:00 2001
From: Biki-das <bikid475@gmail.com>
Date: Tue, 16 Apr 2024 07:17:36 -0700
Subject: [PATCH] feat: Added PixelRatio API example (#44000)

Summary:
Added the [PixelRatio](https://reactnative.dev/docs/pixelratio) API to the RN tester app on the API list examples.

## Changelog:

[General] [Added] - Add examples for the Pixel Ratio API, with all the available methods.

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

Test Plan:
**iOS**

https://github.com/facebook/react-native/assets/72331432/dd481916-a8df-4a62-8f63-61936d886d33

**android**

https://github.com/facebook/react-native/assets/72331432/4d8d67dc-ddeb-4ca7-b61c-07522951f9ee

Reviewed By: NickGerleman

Differential Revision: D56135685

Pulled By: hoxyq

fbshipit-source-id: f2f4eb9e31159a4a2c660d1a864b649e537916af
---
 .../examples/PixelRatio/PixelRatioExample.js  | 201 ++++++++++++++++++
 .../js/utils/RNTesterList.android.js          |   5 +
 .../rn-tester/js/utils/RNTesterList.ios.js    |   4 +
 3 files changed, 210 insertions(+)
 create mode 100644 packages/rn-tester/js/examples/PixelRatio/PixelRatioExample.js

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<number>(0);
+  const pixelSize = PixelRatio.getPixelSizeForLayoutSize(
+    layoutDPSize ? layoutDPSize : 0,
+  );
+
+  const handleDPInputChange = (changedText: string) => {
+    const layoutSize = parseInt(changedText, 10);
+    setLayoutDPSize(layoutSize);
+  };
+
+  return (
+    <View style={styles.cardContainer}>
+      <View style={styles.card}>
+        <View style={styles.row}>
+          <Text style={styles.inputLabel}>Layout Size(dp): </Text>
+          <TextInput
+            style={styles.input}
+            value={layoutDPSize ? layoutDPSize.toString() : ''}
+            keyboardType={'numeric'}
+            onChangeText={handleDPInputChange}
+          />
+        </View>
+        <View style={[styles.row, styles.outputContainer]}>
+          <Text style={styles.inputLabel}>Pixel Size: </Text>
+          <Text>{pixelSize}px</Text>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+function RoundToNearestPixel() {
+  const [layoutDPSizeText, setLayoutDPSizeText] = useState('');
+  const layoutDPSize = parseFloat(layoutDPSizeText);
+
+  const pixelSize = PixelRatio.roundToNearestPixel(
+    layoutDPSize ? layoutDPSize : 0,
+  );
+
+  const handleDPInputChange = (changedText: string) => {
+    setLayoutDPSizeText(changedText);
+  };
+
+  return (
+    <View style={styles.cardContainer}>
+      <View style={styles.card}>
+        <View style={styles.row}>
+          <Text style={styles.inputLabel}>Layout Size(dp): </Text>
+          <TextInput
+            style={styles.input}
+            value={layoutDPSizeText ? layoutDPSizeText.toString() : ''}
+            keyboardType={'numeric'}
+            onChangeText={handleDPInputChange}
+          />
+        </View>
+        <View style={[styles.row, styles.outputContainer]}>
+          <Text style={styles.inputLabel}>Nearest Layout Size: </Text>
+          <Text>{pixelSize}dp</Text>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+function GetPixelRatio() {
+  const [pixelDensity, setPixelDensity] = useState(0);
+
+  const getPixelDensityCallback = () => {
+    setPixelDensity(PixelRatio.get());
+  };
+
+  return (
+    <View style={styles.cardContainer}>
+      <View style={styles.card}>
+        <Button onPress={getPixelDensityCallback} title={'Get Pixel Density'} />
+        {pixelDensity ? (
+          <View style={[styles.row, styles.outputContainer]}>
+            <Text style={styles.inputLabel}>Pixel Density: </Text>
+            <Text>{pixelDensity}</Text>
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+function GetFontScale() {
+  const [fontScale, setFontScale] = useState(0);
+
+  const getPixelDensityCallback = () => {
+    setFontScale(PixelRatio.getFontScale());
+  };
+
+  return (
+    <View style={styles.cardContainer}>
+      <View style={styles.card}>
+        <Button onPress={getPixelDensityCallback} title={'Get Font Scale'} />
+        {fontScale ? (
+          <View style={[styles.row, styles.outputContainer]}>
+            <Text style={styles.inputLabel}>Font scale: </Text>
+            <Text>{fontScale}</Text>
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    marginVertical: 40,
+    flex: 1,
+    alignSelf: 'center',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  outputContainer: {
+    marginTop: 16,
+  },
+  inputLabel: {
+    fontWeight: 'bold',
+  },
+  input: {
+    borderRadius: 6,
+    borderWidth: 1,
+    paddingVertical: 0,
+    height: 30,
+    width: 200,
+    alignSelf: 'center',
+    marginLeft: 14,
+    paddingHorizontal: 8,
+  },
+  card: {
+    width: 200,
+    height: 200,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backfaceVisibility: 'hidden',
+  },
+});
+
+exports.title = 'PixelRatio';
+exports.category = 'UI';
+exports.documentationURL = 'https://reactnative.dev/docs/pixelratio';
+exports.description = "Gives access to device's pixel density and font scale";
+exports.examples = [
+  {
+    title: 'Get pixel density',
+    description: 'Get pixel density of the device.',
+    render(): React$Node {
+      return <GetPixelRatio />;
+    },
+  },
+  {
+    title: 'Get font scale',
+    description: 'Get  the scaling factor for font sizes.',
+    render(): React$Node {
+      return <GetFontScale />;
+    },
+  },
+  {
+    title: 'Get pixel size from layout size',
+    description: 'layout size (dp) -> pixel size (px)',
+    render(): React$Node {
+      return <LayoutSizeToPixel />;
+    },
+  },
+  {
+    title: 'Rounds a layout size to the nearest pixel',
+    description:
+      'Rounds a layout size (dp) to the nearest layout size that corresponds to an integer number of pixels',
+    render(): React$Node {
+      return <RoundToNearestPixel />;
+    },
+  },
+];
diff --git a/packages/rn-tester/js/utils/RNTesterList.android.js b/packages/rn-tester/js/utils/RNTesterList.android.js
index ff82a91503f..c2a4d0751fe 100644
--- a/packages/rn-tester/js/utils/RNTesterList.android.js
+++ b/packages/rn-tester/js/utils/RNTesterList.android.js
@@ -261,6 +261,11 @@ const APIs: Array<RNTesterModuleInfo> = ([
     category: 'Basic',
     module: require('../examples/PanResponder/PanResponderExample'),
   },
+  {
+    key: 'PixelRatio',
+    category: 'UI',
+    module: require('../examples/PixelRatio/PixelRatioExample'),
+  },
   {
     key: 'PermissionsExampleAndroid',
     category: 'Android',
diff --git a/packages/rn-tester/js/utils/RNTesterList.ios.js b/packages/rn-tester/js/utils/RNTesterList.ios.js
index 3693586afa4..df1b6021a5a 100644
--- a/packages/rn-tester/js/utils/RNTesterList.ios.js
+++ b/packages/rn-tester/js/utils/RNTesterList.ios.js
@@ -262,6 +262,10 @@ const APIs: Array<RNTesterModuleInfo> = ([
     key: 'PlatformColorExample',
     module: require('../examples/PlatformColor/PlatformColorExample'),
   },
+  {
+    key: 'PixelRatio',
+    module: require('../examples/PixelRatio/PixelRatioExample'),
+  },
   {
     key: 'PointerEventsExample',
     module: require('../examples/PointerEvents/PointerEventsExample'),