Separate MaskedViewExample into individual examples (#23168)

Summary:
In RNTester, previously the MaskedViewExample was returned as a single example record. However, within that one example there were several sub-examples. Now that we've implemented example filtering, filtering didn't really work for MaskedViewExample because it only operates on top-level examples.

There was no benefit to grouping MaskedViewExample into a single example, so this PR splits it into separate examples.

Changelog:
----------

Help reviewers and the release process by writing your own changelog entry. See http://facebook.github.io/react-native/docs/contributing#changelog for an example.

[General] [Fixed] - Fix filtering of MaskedViewExample by splitting into separate example records.
Pull Request resolved: https://github.com/facebook/react-native/pull/23168

Differential Revision: D13838524

Pulled By: cpojer

fbshipit-source-id: 21ae8228e4ce5bfc06fb1ea230163da9261cb36a

RNTester/js/MaskedViewExample.js

@@ -11,8 +11,6 @@
 'use strict';
 
 const React = require('react');
-const RNTesterBlock = require('RNTesterBlock');
-const RNTesterPage = require('RNTesterPage');
 const {
   Animated,
   Image,
@@ -23,25 +21,15 @@ const {
 } = require('react-native');
 
 type Props = $ReadOnly<{||}>;
-type State = {|
+type ChangingChildrenState = {|
   alternateChildren: boolean,
 |};
 
-class MaskedViewExample extends React.Component<Props, State> {
-  state = {
-    alternateChildren: true,
-  };
-
+class AnimatedMaskExample extends React.Component<Props> {
   _maskRotateAnimatedValue = new Animated.Value(0);
   _maskScaleAnimatedValue = new Animated.Value(1);
 
   componentDidMount() {
-    setInterval(() => {
-      this.setState(state => ({
-        alternateChildren: !state.alternateChildren,
-      }));
-    }, 1000);
-
     Animated.loop(
       Animated.sequence([
         Animated.timing(this._maskScaleAnimatedValue, {
@@ -68,107 +56,87 @@ class MaskedViewExample extends React.Component<Props, State> {
 
   render() {
     return (
-      <RNTesterPage title="<MaskedViewIOS>">
-        <RNTesterBlock title="Basic Mask">
-          <View style={{width: 300, height: 300, alignSelf: 'center'}}>
-            <MaskedViewIOS
-              style={{flex: 1}}
-              maskElement={
-                <View style={styles.maskContainerStyle}>
-                  <Text style={styles.maskTextStyle}>Basic Mask</Text>
-                </View>
-              }>
-              <View style={{flex: 1, backgroundColor: 'blue'}} />
-              <View style={{flex: 1, backgroundColor: 'red'}} />
-            </MaskedViewIOS>
-          </View>
-        </RNTesterBlock>
-        <RNTesterBlock title="Image Mask">
-          <View
+      <View style={styles.exampleWrapperStyle}>
+        <MaskedViewIOS
+          style={styles.flexStyle}
+          maskElement={
+            <Animated.View
+              style={[
+                styles.maskContainerStyle,
+                {transform: [{scale: this._maskScaleAnimatedValue}]},
+              ]}>
+              <Text style={styles.maskTextStyle}>Basic Mask</Text>
+            </Animated.View>
+          }>
+          <Animated.View
             style={{
-              width: 300,
-              height: 300,
-              alignSelf: 'center',
-              backgroundColor: '#eeeeee',
+              flex: 1,
+              transform: [
+                {
+                  rotate: this._maskRotateAnimatedValue.interpolate({
+                    inputRange: [0, 360],
+                    outputRange: ['0deg', '360deg'],
+                  }),
+                },
+              ],
             }}>
-            <MaskedViewIOS
-              style={{flex: 1}}
-              maskElement={
-                <View style={styles.maskContainerStyle}>
-                  <Image
-                    style={{height: 200, width: 200}}
-                    source={require('./imageMask.png')}
-                  />
-                </View>
-              }>
-              <View style={styles.maskContainerStyle}>
-                <Image
-                  resizeMode="cover"
-                  style={{width: 200, height: 200}}
-                  source={{
-                    uri:
-                      'https://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif',
-                  }}
-                />
-              </View>
-            </MaskedViewIOS>
-          </View>
-        </RNTesterBlock>
-        <RNTesterBlock title="Animated Mask">
-          <View style={{width: 300, height: 300, alignSelf: 'center'}}>
-            <MaskedViewIOS
-              style={{flex: 1}}
-              maskElement={
-                <Animated.View
-                  style={[
-                    styles.maskContainerStyle,
-                    {transform: [{scale: this._maskScaleAnimatedValue}]},
-                  ]}>
-                  <Text style={styles.maskTextStyle}>Basic Mask</Text>
-                </Animated.View>
-              }>
-              <Animated.View
-                style={{
-                  flex: 1,
-                  transform: [
-                    {
-                      rotate: this._maskRotateAnimatedValue.interpolate({
-                        inputRange: [0, 360],
-                        outputRange: ['0deg', '360deg'],
-                      }),
-                    },
-                  ],
-                }}>
-                <View style={{flex: 1, backgroundColor: 'blue'}} />
-                <View style={{flex: 1, backgroundColor: 'red'}} />
-              </Animated.View>
-            </MaskedViewIOS>
-          </View>
-        </RNTesterBlock>
-        <RNTesterBlock title="Mask w/ Changing Children">
-          <View style={{width: 300, height: 300, alignSelf: 'center'}}>
-            <MaskedViewIOS
-              style={{flex: 1}}
-              maskElement={
-                <View style={styles.maskContainerStyle}>
-                  <Text style={styles.maskTextStyle}>Basic Mask</Text>
-                </View>
-              }>
-              {this.state.alternateChildren
-                ? [
-                    <View key={1} style={{flex: 1, backgroundColor: 'blue'}} />,
-                    <View key={2} style={{flex: 1, backgroundColor: 'red'}} />,
-                  ]
-                : null}
-            </MaskedViewIOS>
-          </View>
-        </RNTesterBlock>
-      </RNTesterPage>
+            <View style={styles.blueStyle} />
+            <View style={styles.redStyle} />
+          </Animated.View>
+        </MaskedViewIOS>
+      </View>
+    );
+  }
+}
+
+class ChangingChildrenMaskExample extends React.Component<
+  Props,
+  ChangingChildrenState,
+> {
+  state = {
+    alternateChildren: true,
+  };
+
+  componentDidMount() {
+    setInterval(() => {
+      this.setState(state => ({
+        alternateChildren: !state.alternateChildren,
+      }));
+    }, 1000);
+  }
+
+  render() {
+    return (
+      <View style={styles.exampleWrapperStyle}>
+        <MaskedViewIOS
+          style={styles.flexStyle}
+          maskElement={
+            <View style={styles.maskContainerStyle}>
+              <Text style={styles.maskTextStyle}>Basic Mask</Text>
+            </View>
+          }>
+          {this.state.alternateChildren
+            ? [
+                <View key={1} style={styles.blueStyle} />,
+                <View key={2} style={styles.redStyle} />,
+              ]
+            : null}
+        </MaskedViewIOS>
+      </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
+  exampleWrapperStyle: {
+    width: 340,
+    height: 300,
+    alignSelf: 'center',
+  },
+  imageStyle: {
+    height: 200,
+    width: 200,
+  },
   maskContainerStyle: {
     flex: 1,
     backgroundColor: 'transparent',
@@ -180,6 +148,20 @@ const styles = StyleSheet.create({
     fontSize: 40,
     fontWeight: 'bold',
   },
+  blueStyle: {
+    flex: 1,
+    backgroundColor: 'blue',
+  },
+  redStyle: {
+    flex: 1,
+    backgroundColor: 'red',
+  },
+  grayStyle: {
+    backgroundColor: '#eeeeee',
+  },
+  flexStyle: {
+    flex: 1,
+  },
 });
 
 exports.title = '<MaskedViewIOS>';
@@ -187,9 +169,64 @@ exports.description =
   'Renders the child view with a mask specified in the `renderMask` prop.';
 exports.examples = [
   {
-    title: 'Simple masked view',
-    render: function(): React.Element<typeof MaskedViewExample> {
-      return <MaskedViewExample />;
+    title: 'Basic Mask',
+    render: function(): React.Element<typeof View> {
+      return (
+        <View style={styles.exampleWrapperStyle}>
+          <MaskedViewIOS
+            style={styles.flexStyle}
+            maskElement={
+              <View style={styles.maskContainerStyle}>
+                <Text style={styles.maskTextStyle}>Basic Mask</Text>
+              </View>
+            }>
+            <View style={styles.blueStyle} />
+            <View style={styles.redStyle} />
+          </MaskedViewIOS>
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Image Mask',
+    render: function(): React.Element<typeof View> {
+      return (
+        <View style={[styles.exampleWrapperStyle, styles.grayStyle]}>
+          <MaskedViewIOS
+            style={styles.flexStyle}
+            maskElement={
+              <View style={styles.maskContainerStyle}>
+                <Image
+                  style={styles.imageStyle}
+                  source={require('./imageMask.png')}
+                />
+              </View>
+            }>
+            <View style={styles.maskContainerStyle}>
+              <Image
+                resizeMode="cover"
+                style={styles.imageStyle}
+                source={{
+                  uri:
+                    'https://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif',
+                }}
+              />
+            </View>
+          </MaskedViewIOS>
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Animated Mask',
+    render: function(): React.Element<typeof AnimatedMaskExample> {
+      return <AnimatedMaskExample />;
+    },
+  },
+  {
+    title: 'Mask w/ Changing Children',
+    render: function(): React.Element<typeof ChangingChildrenMaskExample> {
+      return <ChangingChildrenMaskExample />;
     },
   },
 ];