react-native/RNTester/js/MaskedViewExample.js

195 lines
5.6 KiB
JavaScript

/**
* Copyright (c) 2015-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
* @providesModule MaskedViewExample
*/
'use strict';
const React = require('react');
const RNTesterBlock = require('RNTesterBlock');
const RNTesterPage = require('RNTesterPage');
const {
Animated,
Image,
MaskedViewIOS,
StyleSheet,
Text,
View,
} = require('react-native');
class MaskedViewExample extends React.Component<{}, $FlowFixMeState> {
static title = '<MaskedViewIOS>';
static description = 'Renders the child view with a mask specified in the `renderMask` prop.';
state = {
alternateChildren: true,
};
_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, {
toValue: 1.3,
timing: 750,
useNativeDriver: true,
}),
Animated.timing(this._maskScaleAnimatedValue, {
toValue: 1,
timing: 750,
useNativeDriver: true,
}),
])
).start();
Animated.loop(
Animated.timing(this._maskRotateAnimatedValue, {
toValue: 360,
timing: 2000,
useNativeDriver: true,
})
).start();
}
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
style={{
width: 300,
height: 300,
alignSelf: 'center',
backgroundColor: '#eeeeee',
}}>
<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>
);
}
}
const styles = StyleSheet.create({
maskContainerStyle: {
flex: 1,
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
},
maskTextStyle: {
backgroundColor: 'transparent',
fontSize: 40,
fontWeight: 'bold',
},
});
module.exports = MaskedViewExample;