DefinitelyTyped/types/react-primitives/react-primitives-tests.tsx
David Pett bf29450ff9 add 'sketch' and 'vr' as platforms to react-primitives (#28674)
* add 'sketch' and 'vr' as platforms to react-primitives

* Update index.d.ts

* fixed lint warnings

* added test
2018-09-11 08:29:17 -07:00

91 lines
2.2 KiB
TypeScript

import * as React from 'react';
import {
Animated,
Dimensions,
Easing,
Image,
PixelRatio,
Platform,
Text,
Touchable,
View,
StyleSheet
} from 'react-primitives';
const { Image: AnimatedImage } = Animated;
const { width, height } = Dimensions.get('window');
const { width: screenWidth, height: screenHeight } = Dimensions.get('screen');
const styles = StyleSheet.create({
container: {
height: screenHeight
},
nav: {
width: screenWidth,
height: 20
},
image: {
width,
height: 100
},
text: {
fontSize: 14 * PixelRatio.get()
}
});
interface State {
opacity: Animated.Value;
}
export default class Component extends React.Component<{}, State> {
state: State = {
opacity: new Animated.Value(0)
};
componentDidMount() {
Animated.timing(this.state.opacity, {
toValue: 1,
duration: 10000,
easing: Easing.cubic
}).start();
if (Platform.OS === 'sketch') {
console.log('The Platform is sketch');
}
}
render() {
const {
state: { opacity }
} = this;
return (
<View style={styles.container}>
<View style={styles.nav}>
<Text>My Awesome App!</Text>
</View>
<AnimatedImage
style={[styles.image, { opacity }]}
source={{ uri: 'source' }}
/>
<Image style={styles.image} source={{ uri: 'source' }} />
<Text style={styles.text}>Hii</Text>
{Platform.OS === 'ios' && (
<View>
<Text>IOS Specific Text!</Text>
</View>
)}
<Touchable onPress={() => undefined}>
<Text>Touch me!</Text>
</Touchable>
<View>
<Text>Helloooooo</Text>
<Touchable>
<Text>Touch me too!</Text>
</Touchable>
</View>
</View>
);
}
}