Skip to content

Commit b0302ec

Browse files
CodingItWrongfacebook-github-bot
CodingItWrong
authored and
facebook-github-bot
committed
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: #23168 Differential Revision: D13838524 Pulled By: cpojer fbshipit-source-id: 21ae8228e4ce5bfc06fb1ea230163da9261cb36a
1 parent 46f3285 commit b0302ec

File tree

1 file changed

+148
-111
lines changed

1 file changed

+148
-111
lines changed

‎RNTester/js/MaskedViewExample.js

+148-111
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,6 @@
1111
'use strict';
1212

1313
const React = require('react');
14-
const RNTesterBlock = require('RNTesterBlock');
15-
const RNTesterPage = require('RNTesterPage');
1614
const {
1715
Animated,
1816
Image,
@@ -23,25 +21,15 @@ const {
2321
} = require('react-native');
2422

2523
type Props = $ReadOnly<{||}>;
26-
type State = {|
24+
type ChangingChildrenState = {|
2725
alternateChildren: boolean,
2826
|};
2927

30-
class MaskedViewExample extends React.Component<Props, State> {
31-
state = {
32-
alternateChildren: true,
33-
};
34-
28+
class AnimatedMaskExample extends React.Component<Props> {
3529
_maskRotateAnimatedValue = new Animated.Value(0);
3630
_maskScaleAnimatedValue = new Animated.Value(1);
3731

3832
componentDidMount() {
39-
setInterval(() => {
40-
this.setState(state => ({
41-
alternateChildren: !state.alternateChildren,
42-
}));
43-
}, 1000);
44-
4533
Animated.loop(
4634
Animated.sequence([
4735
Animated.timing(this._maskScaleAnimatedValue, {
@@ -68,107 +56,87 @@ class MaskedViewExample extends React.Component<Props, State> {
6856

6957
render() {
7058
return (
71-
<RNTesterPage title="<MaskedViewIOS>">
72-
<RNTesterBlock title="Basic Mask">
73-
<View style={{width: 300, height: 300, alignSelf: 'center'}}>
74-
<MaskedViewIOS
75-
style={{flex: 1}}
76-
maskElement={
77-
<View style={styles.maskContainerStyle}>
78-
<Text style={styles.maskTextStyle}>Basic Mask</Text>
79-
</View>
80-
}>
81-
<View style={{flex: 1, backgroundColor: 'blue'}} />
82-
<View style={{flex: 1, backgroundColor: 'red'}} />
83-
</MaskedViewIOS>
84-
</View>
85-
</RNTesterBlock>
86-
<RNTesterBlock title="Image Mask">
87-
<View
59+
<View style={styles.exampleWrapperStyle}>
60+
<MaskedViewIOS
61+
style={styles.flexStyle}
62+
maskElement={
63+
<Animated.View
64+
style={[
65+
styles.maskContainerStyle,
66+
{transform: [{scale: this._maskScaleAnimatedValue}]},
67+
]}>
68+
<Text style={styles.maskTextStyle}>Basic Mask</Text>
69+
</Animated.View>
70+
}>
71+
<Animated.View
8872
style={{
89-
width: 300,
90-
height: 300,
91-
alignSelf: 'center',
92-
backgroundColor: '#eeeeee',
73+
flex: 1,
74+
transform: [
75+
{
76+
rotate: this._maskRotateAnimatedValue.interpolate({
77+
inputRange: [0, 360],
78+
outputRange: ['0deg', '360deg'],
79+
}),
80+
},
81+
],
9382
}}>
94-
<MaskedViewIOS
95-
style={{flex: 1}}
96-
maskElement={
97-
<View style={styles.maskContainerStyle}>
98-
<Image
99-
style={{height: 200, width: 200}}
100-
source={require('./imageMask.png')}
101-
/>
102-
</View>
103-
}>
104-
<View style={styles.maskContainerStyle}>
105-
<Image
106-
resizeMode="cover"
107-
style={{width: 200, height: 200}}
108-
source={{
109-
uri:
110-
'https://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif',
111-
}}
112-
/>
113-
</View>
114-
</MaskedViewIOS>
115-
</View>
116-
</RNTesterBlock>
117-
<RNTesterBlock title="Animated Mask">
118-
<View style={{width: 300, height: 300, alignSelf: 'center'}}>
119-
<MaskedViewIOS
120-
style={{flex: 1}}
121-
maskElement={
122-
<Animated.View
123-
style={[
124-
styles.maskContainerStyle,
125-
{transform: [{scale: this._maskScaleAnimatedValue}]},
126-
]}>
127-
<Text style={styles.maskTextStyle}>Basic Mask</Text>
128-
</Animated.View>
129-
}>
130-
<Animated.View
131-
style={{
132-
flex: 1,
133-
transform: [
134-
{
135-
rotate: this._maskRotateAnimatedValue.interpolate({
136-
inputRange: [0, 360],
137-
outputRange: ['0deg', '360deg'],
138-
}),
139-
},
140-
],
141-
}}>
142-
<View style={{flex: 1, backgroundColor: 'blue'}} />
143-
<View style={{flex: 1, backgroundColor: 'red'}} />
144-
</Animated.View>
145-
</MaskedViewIOS>
146-
</View>
147-
</RNTesterBlock>
148-
<RNTesterBlock title="Mask w/ Changing Children">
149-
<View style={{width: 300, height: 300, alignSelf: 'center'}}>
150-
<MaskedViewIOS
151-
style={{flex: 1}}
152-
maskElement={
153-
<View style={styles.maskContainerStyle}>
154-
<Text style={styles.maskTextStyle}>Basic Mask</Text>
155-
</View>
156-
}>
157-
{this.state.alternateChildren
158-
? [
159-
<View key={1} style={{flex: 1, backgroundColor: 'blue'}} />,
160-
<View key={2} style={{flex: 1, backgroundColor: 'red'}} />,
161-
]
162-
: null}
163-
</MaskedViewIOS>
164-
</View>
165-
</RNTesterBlock>
166-
</RNTesterPage>
83+
<View style={styles.blueStyle} />
84+
<View style={styles.redStyle} />
85+
</Animated.View>
86+
</MaskedViewIOS>
87+
</View>
88+
);
89+
}
90+
}
91+
92+
class ChangingChildrenMaskExample extends React.Component<
93+
Props,
94+
ChangingChildrenState,
95+
> {
96+
state = {
97+
alternateChildren: true,
98+
};
99+
100+
componentDidMount() {
101+
setInterval(() => {
102+
this.setState(state => ({
103+
alternateChildren: !state.alternateChildren,
104+
}));
105+
}, 1000);
106+
}
107+
108+
render() {
109+
return (
110+
<View style={styles.exampleWrapperStyle}>
111+
<MaskedViewIOS
112+
style={styles.flexStyle}
113+
maskElement={
114+
<View style={styles.maskContainerStyle}>
115+
<Text style={styles.maskTextStyle}>Basic Mask</Text>
116+
</View>
117+
}>
118+
{this.state.alternateChildren
119+
? [
120+
<View key={1} style={styles.blueStyle} />,
121+
<View key={2} style={styles.redStyle} />,
122+
]
123+
: null}
124+
</MaskedViewIOS>
125+
</View>
167126
);
168127
}
169128
}
170129

171130
const styles = StyleSheet.create({
131+
exampleWrapperStyle: {
132+
width: 340,
133+
height: 300,
134+
alignSelf: 'center',
135+
},
136+
imageStyle: {
137+
height: 200,
138+
width: 200,
139+
},
172140
maskContainerStyle: {
173141
flex: 1,
174142
backgroundColor: 'transparent',
@@ -180,16 +148,85 @@ const styles = StyleSheet.create({
180148
fontSize: 40,
181149
fontWeight: 'bold',
182150
},
151+
blueStyle: {
152+
flex: 1,
153+
backgroundColor: 'blue',
154+
},
155+
redStyle: {
156+
flex: 1,
157+
backgroundColor: 'red',
158+
},
159+
grayStyle: {
160+
backgroundColor: '#eeeeee',
161+
},
162+
flexStyle: {
163+
flex: 1,
164+
},
183165
});
184166

185167
exports.title = '<MaskedViewIOS>';
186168
exports.description =
187169
'Renders the child view with a mask specified in the `renderMask` prop.';
188170
exports.examples = [
189171
{
190-
title: 'Simple masked view',
191-
render: function(): React.Element<typeof MaskedViewExample> {
192-
return <MaskedViewExample />;
172+
title: 'Basic Mask',
173+
render: function(): React.Element<typeof View> {
174+
return (
175+
<View style={styles.exampleWrapperStyle}>
176+
<MaskedViewIOS
177+
style={styles.flexStyle}
178+
maskElement={
179+
<View style={styles.maskContainerStyle}>
180+
<Text style={styles.maskTextStyle}>Basic Mask</Text>
181+
</View>
182+
}>
183+
<View style={styles.blueStyle} />
184+
<View style={styles.redStyle} />
185+
</MaskedViewIOS>
186+
</View>
187+
);
188+
},
189+
},
190+
{
191+
title: 'Image Mask',
192+
render: function(): React.Element<typeof View> {
193+
return (
194+
<View style={[styles.exampleWrapperStyle, styles.grayStyle]}>
195+
<MaskedViewIOS
196+
style={styles.flexStyle}
197+
maskElement={
198+
<View style={styles.maskContainerStyle}>
199+
<Image
200+
style={styles.imageStyle}
201+
source={require('./imageMask.png')}
202+
/>
203+
</View>
204+
}>
205+
<View style={styles.maskContainerStyle}>
206+
<Image
207+
resizeMode="cover"
208+
style={styles.imageStyle}
209+
source={{
210+
uri:
211+
'https://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif',
212+
}}
213+
/>
214+
</View>
215+
</MaskedViewIOS>
216+
</View>
217+
);
218+
},
219+
},
220+
{
221+
title: 'Animated Mask',
222+
render: function(): React.Element<typeof AnimatedMaskExample> {
223+
return <AnimatedMaskExample />;
224+
},
225+
},
226+
{
227+
title: 'Mask w/ Changing Children',
228+
render: function(): React.Element<typeof ChangingChildrenMaskExample> {
229+
return <ChangingChildrenMaskExample />;
193230
},
194231
},
195232
];

0 commit comments

Comments
 (0)