fixing truncation issue on scaling to 200% (#640)

* fixing truncation issue on scaling to 200%

* updating snapshot

* updating snapshot again

* 3. updating snapshot

* 4. updating snapshot

* 5. updating snapshot

---------

Co-authored-by: Protik Biswas <protikbiswas100@microsoft.com>

Author: protikbiswas100

NewArch/src/examples/PressableExamplePage.tsx

@@ -155,8 +155,10 @@ export const PressableExamplePage: React.FunctionComponent<{navigation?: any}> =
                 : Platform.OS === 'windows'
                 ? PlatformColor('SystemColorButtonFaceColor')
                 : 'silver',
-              width: 140,
-              height: 50,
+              padding: 8,
+              minWidth: 140,
+              alignItems: 'center',
+              justifyContent: 'center',
               borderRadius: 2,
             },
           ]}>
@@ -165,6 +167,7 @@ export const PressableExamplePage: React.FunctionComponent<{navigation?: any}> =
               style={{
                 textAlign: 'center',
                 paddingVertical: 15,
+                flexWrap: 'wrap',
                 color: pressed ? '#FFFFFF' : colors.text,
               }}>
               {pressed ? `Pressed ${timesPressed} times!` : 'Press Me'}

__tests__/__snapshots__/App-test.js.snap

@@ -27730,14 +27730,16 @@ exports[`Pressable Example Page 1`] = `
                 style={
                   [
                     {
+                      "alignItems": "center",
                       "backgroundColor": {
                         "windowsbrush": [
                           "SystemColorButtonFaceColor",
                         ],
                       },
                       "borderRadius": 2,
-                      "height": 50,
-                      "width": 140,
+                      "justifyContent": "center",
+                      "minWidth": 140,
+                      "padding": 8,
                     },
                   ]
                 }
@@ -27746,7 +27748,7 @@ exports[`Pressable Example Page 1`] = `
                   style={
                     {
                       "color": "rgb(28, 28, 30)",
-                      "paddingVertical": 15,
+                      "flexWrap": "wrap",
                       "textAlign": "center",
                     }
                   }
@@ -28445,16 +28447,13 @@ exports[`Pressable Example Page 1`] = `
                       ],
                     },
                     "borderRadius": 2,
-                    "height": 50,
-                    "width": 200,
                   }
                 }
               >
                 <Text
                   style={
                     {
                       "color": "rgb(28, 28, 30)",
-                      "paddingVertical": 15,
                       "textAlign": "center",
                     }
                   }

src/examples/PressableExamplePage.tsx

@@ -143,17 +143,19 @@ export const PressableExamplePage: React.FunctionComponent<{}> = () => {
                 : Platform.OS === 'windows'
                 ? PlatformColor('SystemColorButtonFaceColor')
                 : 'silver',
-              width: 140,
-              height: 50,
               borderRadius: 2,
+              padding: 8,
+              minWidth: 140,
+              alignItems: 'center',
+              justifyContent: 'center',
             },
           ]}>
           {({pressed}) => (
             <Text
               style={{
                 textAlign: 'center',
-                paddingVertical: 15,
                 color: pressed ? '#FFFFFF' : colors.text,
+                flexWrap: 'wrap',
               }}>
               {pressed ? `Pressed ${timesPressed} times!` : 'Press Me'}
             </Text>
@@ -170,8 +172,6 @@ export const PressableExamplePage: React.FunctionComponent<{}> = () => {
             'click me to see the diffrent events (press, pressIn, pressOut, longPress)'
           }
           style={{
-            width: 200,
-            height: 50,
             borderRadius: 2,
             backgroundColor:
               Platform.OS === 'windows'
@@ -185,7 +185,6 @@ export const PressableExamplePage: React.FunctionComponent<{}> = () => {
           <Text
             style={{
               textAlign: 'center',
-              paddingVertical: 15,
               color: colors.text,
             }}>
             Most recent event: {currEvent}