Add example for back view

facebook · Aug 24, 2018 · 526f509 · 526f509
1 parent 9678d01
commit 526f509
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 8 deletions.
diff --git a/...ests/ReferenceImages/RNTester-js-RNTesterApp.ios/testViewExample_1-iOS10@2x.png b/...ests/ReferenceImages/RNTester-js-RNTesterApp.ios/testViewExample_1-iOS10@2x.png
diff --git a/...ests/ReferenceImages/RNTester-js-RNTesterApp.ios/testViewExample_1-iOS11@2x.png b/...ests/ReferenceImages/RNTester-js-RNTesterApp.ios/testViewExample_1-iOS11@2x.png
diff --git a/...ationTests/ReferenceImages/RNTester-js-RNTesterApp.ios/testViewExample_1@2x.png b/...ationTests/ReferenceImages/RNTester-js-RNTesterApp.ios/testViewExample_1@2x.png
diff --git a/RNTester/js/ViewExample.js b/RNTester/js/ViewExample.js
@@ -310,18 +310,72 @@ exports.examples = [
       }
       return <ZIndexExample />;
     },
-  }, {
+  },
+  {
     title: 'BackfaceVisibility',
     render: function() {
       return (
-        <View style={{ justifyContent: 'center', alignItems: 'center' }}>
-          <View style={{ height: 200, width: 200, justifyContent: 'center', alignItems: 'center', backgroundColor: 'blue', backfaceVisibility: 'hidden' }}>
-            <Text>Front</Text>
+        <>
+          <Text style={{paddingBottom: 10}}>
+            View #1, front is visible, back is hidden.
+          </Text>
+          <View style={{justifyContent: 'center', alignItems: 'center'}}>
+            <View
+              style={{
+                height: 200,
+                width: 200,
+                justifyContent: 'center',
+                alignItems: 'center',
+                backgroundColor: 'blue',
+                backfaceVisibility: 'hidden',
+              }}>
+              <Text>Front</Text>
+            </View>
+            <View
+              style={{
+                height: 200,
+                width: 200,
+                justifyContent: 'center',
+                alignItems: 'center',
+                backgroundColor: 'red',
+                backfaceVisibility: 'hidden',
+                transform: [{rotateY: '180deg'}],
+                position: 'absolute',
+                top: 0,
+              }}>
+              <Text>Back (You should not see this)</Text>
+            </View>
           </View>
-          <View style={{ height: 200, width: 200, justifyContent: 'center', alignItems: 'center', backgroundColor: 'red', backfaceVisibility: 'hidden', transform: [ { rotateY: '180deg' }], position: 'absolute', top: 0 }}>
-            <Text>Back</Text>
+          <Text style={{paddingVertical: 10}}>
+            View #2, front is hidden, back is visible.
+          </Text>
+          <View style={{justifyContent: 'center', alignItems: 'center'}}>
+            <View
+              style={{
+                height: 200,
+                width: 200,
+                justifyContent: 'center',
+                alignItems: 'center',
+                backgroundColor: 'blue',
+                backfaceVisibility: 'hidden',
+              }}>
+              <Text>Front (You should not see this)</Text>
+            </View>
+            <View
+              style={{
+                height: 200,
+                width: 200,
+                justifyContent: 'center',
+                alignItems: 'center',
+                backgroundColor: 'red',
+                backfaceVisibility: 'hidden',
+                position: 'absolute',
+                top: 0,
+              }}>
+              <Text>Back</Text>
+            </View>
           </View>
-        </View>
+        </>
       );
     },
   },

diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java
@@ -22,12 +22,12 @@
 import android.view.animation.Animation;
 import com.facebook.infer.annotation.Assertions;
 import com.facebook.react.bridge.ReactContext;
-import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.common.annotations.VisibleForTesting;
 import com.facebook.react.modules.i18nmanager.I18nUtil;
 import com.facebook.react.touch.OnInterceptTouchEventListener;
 import com.facebook.react.touch.ReactHitSlopView;
 import com.facebook.react.touch.ReactInterceptingViewGroup;
+import com.facebook.react.uimanager.IllegalViewOperationException;
 import com.facebook.react.uimanager.MeasureSpecAssertions;
 import com.facebook.react.uimanager.PointerEvents;
 import com.facebook.react.uimanager.ReactClippingViewGroup;