RNTester: Better View Overflow Example

Summary:
Improves the examples in `ViewExample.js` that tests overflow behavior. Notable:

- Test view flattening behavior by setting `overflow` on views that only have other layout-only styles.
- Test the default behavior when `overflow` is not set at all.

Reviewed By: achen1

Differential Revision: D8690560

fbshipit-source-id: 6320ef51305952d13bf5724b369651fdfd32ff21

RNTester/js/ViewExample.js

@@ -146,31 +146,37 @@ exports.examples = [
   {
     title: 'Overflow',
     render() {
+      const styles = StyleSheet.create({
+        container: {
+          borderWidth: StyleSheet.hairlineWidth,
+          height: 12,
+          marginBottom: 8,
+          marginEnd: 16,
+          width: 95,
+        },
+        content: {
+          height: 20,
+          width: 200,
+        },
+      });
+
+      // NOTE: The <View> that sets `overflow` should only have other layout
+      // styles so that we can accurately test view flattening optimizations.
       return (
         <View style={{flexDirection: 'row'}}>
-          <View
+          <View style={styles.container}>
-            style={{
+            <View style={[StyleSheet.absoluteFill]}>
-              borderWidth: 0.5,
+              <Text style={styles.content}>undefined</Text>
-              height: 10,
-              marginBottom: 5,
-              marginRight: 10,
-              overflow: 'hidden',
-              width: 95,
-            }}>
-            <View style={{width: 200, height: 20}}>
-              <Text>Overflow hidden</Text>
             </View>
           </View>
-          <View
+          <View style={styles.container}>
-            style={{
+            <View style={[StyleSheet.absoluteFill, {overflow: 'hidden'}]}>
-              borderWidth: 0.5,
+              <Text style={styles.content}>hidden</Text>
-              height: 10,
+            </View>
-              marginBottom: 5,
+          </View>
-              marginRight: 10,
+          <View style={styles.container}>
-              width: 95,
+            <View style={[StyleSheet.absoluteFill, {overflow: 'visible'}]}>
-            }}>
+              <Text style={styles.content}>visible</Text>
-            <View style={{width: 200, height: 20}}>
-              <Text>Overflow visible</Text>
             </View>
           </View>
         </View>