chore: Convert example to TypeScript (#648)

ReactNativeFastImageExample/src/AutoSizeExample.tsx

@@ -0,0 +1,94 @@
+import React, { Component } from 'react'
+import { StyleSheet, View } from 'react-native'
+import withCacheBust from './withCacheBust'
+import SectionFlex from './SectionFlex'
+import FastImage, { FastImageProps } from 'react-native-fast-image'
+import Section from './Section'
+import FeatureText from './FeatureText'
+
+const GIF_URL =
+    'https://cdn-images-1.medium.com/max/1600/1*-CY5bU4OqiJRox7G00sftw.gif'
+
+interface AutoSizingImageProps extends FastImageProps {
+    onLoad?: (event: any) => void
+    defaultHeight?: number
+    width: number
+    style?: any
+}
+
+interface AutoSizingImageState {
+    height: number
+    width: number
+}
+
+class AutoSizingImage extends Component<
+    AutoSizingImageProps,
+    AutoSizingImageState
+> {
+    state = {
+        height: 0,
+        width: 0,
+    }
+
+    onLoad = (e: any) => {
+        const {
+            nativeEvent: { width, height },
+        } = e
+        this.setState({ width, height })
+        if (this.props.onLoad) {
+            this.props.onLoad(e)
+        }
+    }
+
+    getHeight = () => {
+        if (!this.state.height) {
+            return this.props.defaultHeight === undefined
+                ? 300
+                : this.props.defaultHeight
+        }
+        const ratio = this.state.height / this.state.width
+        const height = this.props.width * ratio
+        return height
+    }
+
+    render() {
+        const height = this.getHeight()
+        return (
+            <FastImage
+                {...this.props}
+                onLoad={this.onLoad}
+                style={[{ width: this.props.width, height }, this.props.style]}
+            />
+        )
+    }
+}
+
+interface AutoSizeExampleProps {
+    onPressReload: () => void
+    bust: boolean
+}
+
+const AutoSizeExample = ({ onPressReload, bust }: AutoSizeExampleProps) => (
+    <View>
+        <Section>
+            <FeatureText text="• AutoSize." />
+        </Section>
+        <SectionFlex onPress={onPressReload}>
+            <AutoSizingImage
+                style={styles.image}
+                width={200}
+                source={{ uri: GIF_URL + bust }}
+            />
+        </SectionFlex>
+    </View>
+)
+
+const styles = StyleSheet.create({
+    image: {
+        backgroundColor: '#ddd',
+        margin: 20,
+        flex: 0,
+    },
+})
+
+export default withCacheBust(AutoSizeExample)