From d9fa1d70dcf70764f0e308353fbac344c515db74 Mon Sep 17 00:00:00 2001
From: Tim Yung <yungsters@fb.com>
Date: Fri, 29 Jun 2018 12:06:52 -0700
Subject: [PATCH] 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 | 48 +++++++++++++++++++++-----------------
 1 file changed, 27 insertions(+), 21 deletions(-)

diff --git a/RNTester/js/ViewExample.js b/RNTester/js/ViewExample.js
index ffa5bd3d2..5115a08d5 100644
--- a/RNTester/js/ViewExample.js
+++ b/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
-            style={{
-              borderWidth: 0.5,
-              height: 10,
-              marginBottom: 5,
-              marginRight: 10,
-              overflow: 'hidden',
-              width: 95,
-            }}>
-            <View style={{width: 200, height: 20}}>
-              <Text>Overflow hidden</Text>
+          <View style={styles.container}>
+            <View style={[StyleSheet.absoluteFill]}>
+              <Text style={styles.content}>undefined</Text>
             </View>
           </View>
-          <View
-            style={{
-              borderWidth: 0.5,
-              height: 10,
-              marginBottom: 5,
-              marginRight: 10,
-              width: 95,
-            }}>
-            <View style={{width: 200, height: 20}}>
-              <Text>Overflow visible</Text>
+          <View style={styles.container}>
+            <View style={[StyleSheet.absoluteFill, {overflow: 'hidden'}]}>
+              <Text style={styles.content}>hidden</Text>
+            </View>
+          </View>
+          <View style={styles.container}>
+            <View style={[StyleSheet.absoluteFill, {overflow: 'visible'}]}>
+              <Text style={styles.content}>visible</Text>
             </View>
           </View>
         </View>