chore: Convert example to TypeScript (#648)

ReactNativeFastImageExample/.eslintrc.js

@@ -1,6 +1,8 @@
 module.exports = {
  root: true,
  extends: '@react-native-community',
+ parser: '@typescript-eslint/parser',
+ plugins: ['@typescript-eslint'],
  rules: {
  semi: ['error', 'never'],
  },

ReactNativeFastImageExample/.gitignore

@@ -20,6 +20,7 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
+project.xcworkspace
 
 # Android/IntelliJ
 #
@@ -29,6 +30,10 @@ build/
 local.properties
 *.iml
 
+# Visual Studio Code
+#
+.vscode/
+
 # node.js
 #
 node_modules/

ReactNativeFastImageExample/__tests__/App-test.tsx

@@ -0,0 +1,9 @@
+/**
+ * @format
+ */
+
+export const _ = 0
+
+it('adds', () => {
+ expect(2 + 2).toBe(4)
+})

ReactNativeFastImageExample/ios/Podfile.lock

@@ -230,17 +230,17 @@ PODS:
  - React-cxxreact (= 0.61.5)
  - React-jsi (= 0.61.5)
  - ReactCommon/jscallinvoker (= 0.61.5)
- - RNCMaskedView (0.1.6):
+ - RNCMaskedView (0.1.7):
  - React
- - RNFastImage (7.0.2):
+ - RNFastImage (8.0.0):
  - React
  - SDWebImage (~> 5.0)
  - SDWebImageWebPCoder (~> 0.2.3)
  - RNGestureHandler (1.6.0):
  - React
  - RNReanimated (1.7.0):
  - React
- - RNScreens (2.2.0):
+ - RNScreens (2.3.0):
  - React
  - RNVectorIcons (6.6.0):
  - React
@@ -394,11 +394,11 @@ SPEC CHECKSUMS:
  React-RCTText: 9ccc88273e9a3aacff5094d2175a605efa854dbe
  React-RCTVibration: a49a1f42bf8f5acf1c3e297097517c6b3af377ad
  ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd
- RNCMaskedView: a88953beefbd347a29072d9eba90e42945fe291e
- RNFastImage: 9b0c22643872bb7494c8d87bbbb66cc4c0d9e7a2
+ RNCMaskedView: 76c40a1d41c3e2535df09246a2b5487f04de0814
+ RNFastImage: c104f15f04c4f68bd65c9645cc27900bbacd9cc7
  RNGestureHandler: dde546180bf24af0b5f737c8ad04b6f3fa51609a
  RNReanimated: 031fe8d9ea93c2bd689a40f05320ef9d96f74d7f
- RNScreens: 812b79d384e2bea7eebc4ec981469160d4948fd5
+ RNScreens: 03bf608b92ac0acf323f47d8f5b63a8f829340c8
  RNVectorIcons: 0bb4def82230be1333ddaeee9fcba45f0b288ed4
  SDWebImage: 4d5c027c935438f341ed33dbac53ff9f479922ca
  SDWebImageWebPCoder: 947093edd1349d820c40afbd9f42acb6cdecd987

ReactNativeFastImageExample/package.json

@@ -5,9 +5,20 @@
  "scripts": {
  "android": "react-native run-android",
  "ios": "react-native run-ios",
+ "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
  "start": "react-native start",
- "test": "jest",
- "lint": "eslint ."
+ "test": "jest"
+ },
+ "jest": {
+ "moduleFileExtensions": [
+ "ts",
+ "tsx",
+ "js",
+ "jsx",
+ "json",
+ "node"
+ ],
+ "preset": "react-native"
  },
  "dependencies": {
  "@react-native-community/masked-view": "^0.1.7",
@@ -16,7 +27,7 @@
  "@react-navigation/stack": "^5.1.0",
  "react": "16.9.0",
  "react-native": "0.61.5",
- "react-native-fast-image": "../react-native-fast-image-8.0.0.tgz",
+ "react-native-fast-image": "^8.1.3",
  "react-native-gesture-handler": "^1.6.0",
  "react-native-image-picker": "^2.3.1",
  "react-native-image-progress": "^1.1.1",
@@ -25,20 +36,23 @@
  "react-native-screens": "^2.2.0",
  "react-native-status-bar-height": "^2.1.0",
  "react-native-vector-icons": "^6.6.0",
- "react-timeout": "^1.1.2",
- "uuid": "^7.0.1"
+ "react-timeout": "^1.1.2"
  },
  "devDependencies": {
  "@babel/core": "^7.6.2",
  "@babel/runtime": "^7.6.2",
  "@react-native-community/eslint-config": "^0.0.5",
+ "@types/jest": "^24.0.24",
+ "@types/react-native": "^0.60.25",
+ "@types/react-native-vector-icons": "^6.4.5",
+ "@types/react-test-renderer": "16.9.1",
+ "@typescript-eslint/eslint-plugin": "^2.12.0",
+ "@typescript-eslint/parser": "^2.12.0",
  "babel-jest": "^24.9.0",
  "eslint": "^6.5.1",
  "jest": "^24.9.0",
  "metro-react-native-babel-preset": "^0.56.0",
- "react-test-renderer": "16.9.0"
- },
- "jest": {
- "preset": "react-native"
+ "react-test-renderer": "16.9.0",
+ "typescript": "^3.8.3"
  }
 }

ReactNativeFastImageExample/src/AutoSizeExample.js → ReactNativeFastImageExample/src/AutoSizeExample.tsx

@@ -2,20 +2,35 @@ import React, { Component } from 'react'
 import { StyleSheet, View } from 'react-native'
 import withCacheBust from './withCacheBust'
 import SectionFlex from './SectionFlex'
-import FastImage from 'react-native-fast-image'
+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'
 
-class AutoSizingImage extends Component {
+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 => {
+ onLoad = (e: any) => {
  const {
  nativeEvent: { width, height },
  } = e
@@ -27,7 +42,9 @@ class AutoSizingImage extends Component {
 
  getHeight = () => {
  if (!this.state.height) {
- return this.props.defaultHeight
+ return this.props.defaultHeight === undefined
+ ? 300
+ : this.props.defaultHeight
  }
  const ratio = this.state.height / this.state.width
  const height = this.props.width * ratio
@@ -46,11 +63,12 @@ class AutoSizingImage extends Component {
  }
 }
 
-AutoSizingImage.defaultProps = {
- defaultHeight: 300,
+interface AutoSizeExampleProps {
+ onPressReload: () => void
+ bust: boolean
 }
 
-const AutoSizeExample = ({ onPressReload, bust }) => (
+const AutoSizeExample = ({ onPressReload, bust }: AutoSizeExampleProps) => (
  <View>
  <Section>
  <FeatureText text="• AutoSize." />

ReactNativeFastImageExample/src/BorderRadiusExample.js → ReactNativeFastImageExample/src/BorderRadiusExample.tsx

@@ -8,7 +8,15 @@ import FeatureText from './FeatureText'
 
 const IMAGE_URL = 'https://media.giphy.com/media/GEsoqZDGVoisw/giphy.gif'
 
-const BorderRadiusExample = ({ onPressReload, bust }) => (
+interface BorderRadiusExampleProps {
+ onPressReload: () => void
+ bust: string
+}
+
+const BorderRadiusExample = ({
+ onPressReload,
+ bust,
+}: BorderRadiusExampleProps) => (
  <View>
  <Section>
  <FeatureText text="• Border radius." />

ReactNativeFastImageExample/src/BulletText.js → ReactNativeFastImageExample/src/BulletText.tsx

@@ -1,7 +1,12 @@
 import React from 'react'
 import FeatureText from './FeatureText'
 
-const BulletText = ({ text, children }) => (
+interface BulletTextProps {
+ text?: string
+ children?: any
+}
+
+const BulletText = ({ text, children }: BulletTextProps) => (
  <FeatureText text={`• ${text || children} •`} />
 )
 

ReactNativeFastImageExample/src/Button.js → ReactNativeFastImageExample/src/Button.tsx

@@ -1,7 +1,12 @@
 import React from 'react'
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 
-const Button = ({ text, onPress }) => (
+interface ButtonProps {
+ text: string
+ onPress: () => void
+}
+
+const Button = ({ text, onPress }: ButtonProps) => (
  <TouchableOpacity onPress={onPress}>
  <View style={styles.button}>
  <Text style={styles.text}>{text}</Text>

ReactNativeFastImageExample/src/FeatureText.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { StyleSheet, Text } from 'react-native'
+
+interface FeatureTextProps {
+ text?: string
+ style?: any
+ children?: any
+}
+
+export default function FeatureText({
+ text,
+ style,
+ children,
+}: FeatureTextProps) {
+ return <Text style={[styles.style, style]}>{text || children}</Text>
+}
+
+const styles = StyleSheet.create({
+ style: {
+ color: '#222',
+ },
+})

ReactNativeFastImageExample/src/GifExample.js → ReactNativeFastImageExample/src/GifExample.tsx

@@ -9,7 +9,12 @@ import FeatureText from './FeatureText'
 const GIF_URL =
  'https://cdn-images-1.medium.com/max/1600/1*-CY5bU4OqiJRox7G00sftw.gif'
 
-const GifExample = ({ onPressReload, bust }) => (
+interface GifExampleProps {
+ onPressReload: () => void
+ bust: boolean
+}
+
+const GifExample = ({ onPressReload, bust }: GifExampleProps) => (
  <View>
  <Section>
  <FeatureText text="• GIF support." />