DefinitelyTyped/types/react-primitives/react-primitives-tests.tsx
Eloy Durán 1e63996a10
[react-native] Prepare for 0.62 (#43179)
* Feature: unstable_enableLogBox function at 0.62

* [@types/react-native] Add Appearance namespace for new api from v0.62.x

* feat: add typing for useColorScheme hook

* Add type for fadingEdgeLength prop

This adds the types for FlatList and ScrollView on Android

* [react-native] Introduce HostComponent

* [react-native] Make useNativeDriver parameter required

* d123bea8c1
* 5876052615

* feat: add typings for A11yValue in RN

* [react-native] Import v0.61 typings

* [react-native] Run prettier

* [react-native] Try fixing v0.61 on CI

* [react-native] Defer v0.61 typings to next iteration

Co-authored-by: Shinpei <react-native@kakao.com>
Co-authored-by: Jérémy Barbet <jeremgraph@gmail.com>
Co-authored-by: André Krüger <andre.krueger.developer@gmail.com>
Co-authored-by: Kacper Wiszczuk <kacperwiszczuk@gmail.com>
2020-03-27 13:41:12 -04:00

92 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,
useNativeDriver: false,
}).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>
);
}
}