Skip to content

Commit 5946d33

Browse files
DylanVannDylanVann
authored
chore: convert examples to hooks (#830)
1 parent 291876b commit 5946d33

17 files changed

+376
-467
lines changed

‎ReactNativeFastImageExample/.eslintrc.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,6 @@ module.exports = {
33
extends: '@react-native-community',
44
rules: {
55
semi: ['error', 'never'],
6+
'react-native/no-inline-styles': 'off',
67
},
78
}

‎ReactNativeFastImageExample/__tests__/App-test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,5 @@ import App from '../src'
1010
import renderer from 'react-test-renderer'
1111

1212
it('renders correctly', () => {
13-
renderer.create(<App />)
13+
renderer.create(<App />)
1414
})

‎ReactNativeFastImageExample/src/AutoSizeExample.tsx‎

Lines changed: 47 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React, { Component } from 'react'
1+
import React, { useCallback, useMemo, useState } from 'react'
22
import { StyleSheet, View } from 'react-native'
3-
import withCacheBust from './withCacheBust'
43
import SectionFlex from './SectionFlex'
54
import FastImage, { FastImageProps } from 'react-native-fast-image'
65
import Section from './Section'
76
import FeatureText from './FeatureText'
7+
import { useCacheBust } from './useCacheBust'
88

99
const GIF_URL =
1010
'https://cdn-images-1.medium.com/max/1600/1*-CY5bU4OqiJRox7G00sftw.gif'
@@ -16,79 +16,64 @@ interface AutoSizingImageProps extends FastImageProps {
1616
style?: any
1717
}
1818

19-
interface AutoSizingImageState {
20-
height: number
21-
width: number
22-
}
23-
24-
class AutoSizingImage extends Component<
25-
AutoSizingImageProps,
26-
AutoSizingImageState
27-
> {
28-
state = {
19+
const AutoSizingImage = (props: AutoSizingImageProps) => {
20+
const [dimensions, setDimensions] = useState({
2921
height: 0,
3022
width: 0,
31-
}
23+
})
3224

33-
onLoad = (e: any) => {
34-
const {
35-
nativeEvent: { width, height },
36-
} = e
37-
this.setState({ width, height })
38-
if (this.props.onLoad) {
39-
this.props.onLoad(e)
40-
}
41-
}
25+
const propsOnLoad = props.onLoad
26+
const onLoad = useCallback(
27+
(e: any) => {
28+
const {
29+
nativeEvent: { width, height },
30+
} = e
31+
setDimensions({ width, height })
32+
if (propsOnLoad) {
33+
propsOnLoad(e)
34+
}
35+
},
36+
[propsOnLoad],
37+
)
4238

43-
getHeight = () => {
44-
if (!this.state.height) {
45-
return this.props.defaultHeight === undefined
46-
? 300
47-
: this.props.defaultHeight
39+
const height = useMemo(() => {
40+
if (!dimensions.height) {
41+
return props.defaultHeight === undefined ? 300 : props.defaultHeight
4842
}
49-
const ratio = this.state.height / this.state.width
50-
const height = this.props.width * ratio
51-
return height
52-
}
53-
54-
render() {
55-
const height = this.getHeight()
56-
return (
57-
<FastImage
58-
{...this.props}
59-
onLoad={this.onLoad}
60-
style={[{ width: this.props.width, height }, this.props.style]}
61-
/>
62-
)
63-
}
43+
const ratio = dimensions.height / dimensions.width
44+
return props.width * ratio
45+
}, [dimensions.height, dimensions.width, props.defaultHeight, props.width])
46+
return (
47+
<FastImage
48+
{...props}
49+
onLoad={onLoad}
50+
style={[{ width: props.width, height }, props.style]}
51+
/>
52+
)
6453
}
6554

66-
interface AutoSizeExampleProps {
67-
onPressReload: () => void
68-
bust: boolean
55+
export const AutoSizeExample = () => {
56+
const { bust, url } = useCacheBust(GIF_URL)
57+
return (
58+
<View>
59+
<Section>
60+
<FeatureText text="• AutoSize." />
61+
</Section>
62+
<SectionFlex onPress={bust}>
63+
<AutoSizingImage
64+
style={styles.image}
65+
width={200}
66+
source={{ uri: url }}
67+
/>
68+
</SectionFlex>
69+
</View>
70+
)
6971
}
7072

71-
const AutoSizeExample = ({ onPressReload, bust }: AutoSizeExampleProps) => (
72-
<View>
73-
<Section>
74-
<FeatureText text="• AutoSize." />
75-
</Section>
76-
<SectionFlex onPress={onPressReload}>
77-
<AutoSizingImage
78-
style={styles.image}
79-
width={200}
80-
source={{ uri: GIF_URL + bust }}
81-
/>
82-
</SectionFlex>
83-
</View>
84-
)
85-
8673
const styles = StyleSheet.create({
8774
image: {
8875
backgroundColor: '#ddd',
8976
margin: 20,
9077
flex: 0,
9178
},
9279
})
93-
94-
export default withCacheBust(AutoSizeExample)

‎ReactNativeFastImageExample/src/BorderRadiusExample.tsx‎

Lines changed: 24 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,38 @@
11
import React from 'react'
22
import { StyleSheet, View } from 'react-native'
3-
import withCacheBust from './withCacheBust'
43
import SectionFlex from './SectionFlex'
54
import FastImage from 'react-native-fast-image'
65
import Section from './Section'
76
import FeatureText from './FeatureText'
7+
import { useCacheBust } from './useCacheBust'
88

99
const IMAGE_URL = 'https://media.giphy.com/media/GEsoqZDGVoisw/giphy.gif'
1010

11-
interface BorderRadiusExampleProps {
12-
onPressReload: () => void
13-
bust: string
11+
export const BorderRadiusExample = () => {
12+
const { query, bust } = useCacheBust('')
13+
return (
14+
<View>
15+
<Section>
16+
<FeatureText text="• Border radius." />
17+
</Section>
18+
<SectionFlex onPress={bust}>
19+
<FastImage
20+
style={styles.imageSquare}
21+
source={{
22+
uri: IMAGE_URL + query,
23+
}}
24+
/>
25+
<FastImage
26+
style={styles.imageRectangular}
27+
source={{
28+
uri: IMAGE_URL + query,
29+
}}
30+
/>
31+
</SectionFlex>
32+
</View>
33+
)
1434
}
1535

16-
const BorderRadiusExample = ({
17-
onPressReload,
18-
bust,
19-
}: BorderRadiusExampleProps) => (
20-
<View>
21-
<Section>
22-
<FeatureText text="• Border radius." />
23-
</Section>
24-
<SectionFlex onPress={onPressReload}>
25-
<FastImage
26-
style={styles.imageSquare}
27-
source={{
28-
uri: IMAGE_URL + bust,
29-
}}
30-
/>
31-
<FastImage
32-
style={styles.imageRectangular}
33-
source={{
34-
uri: IMAGE_URL + bust,
35-
}}
36-
/>
37-
</SectionFlex>
38-
</View>
39-
)
40-
4136
const styles = StyleSheet.create({
4237
imageSquare: {
4338
borderRadius: 50,
@@ -64,5 +59,3 @@ const styles = StyleSheet.create({
6459
right: 0,
6560
},
6661
})
67-
68-
export default withCacheBust(BorderRadiusExample)

‎ReactNativeFastImageExample/src/DefaultImageGrid.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22
import { Image } from 'react-native'
3-
import ImageGrid from './ImageGrid'
3+
import { ImageGrid } from './ImageGrid'
44

55
const DefaultImageGrid = () => <ImageGrid ImageComponent={Image} />
66

‎ReactNativeFastImageExample/src/FastImageExamples.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import React from 'react'
22
import { ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native'
33
import Section from './Section'
4-
import PriorityExample from './PriorityExample'
5-
import GifExample from './GifExample'
6-
import BorderRadiusExample from './BorderRadiusExample'
74
import FeatureText from './FeatureText'
8-
import ProgressExample from './ProgressExample'
9-
import PreloadExample from './PreloadExample'
10-
import ResizeModeExample from './ResizeModeExample'
11-
import TintColorExample from './TintColorExample'
12-
import LocalImagesExample from './LocalImagesExample'
135
import StatusBarUnderlay, { STATUS_BAR_HEIGHT } from './StatusBarUnderlay'
14-
import AutoSizeExample from './AutoSizeExample'
6+
import { PriorityExample } from './PriorityExample'
7+
import { GifExample } from './GifExample'
8+
import { BorderRadiusExample } from './BorderRadiusExample'
9+
import { ProgressExample } from './ProgressExample'
10+
import { PreloadExample } from './PreloadExample'
11+
import { ResizeModeExample } from './ResizeModeExample'
12+
import { TintColorExample } from './TintColorExample'
13+
import { LocalImagesExample } from './LocalImagesExample'
14+
import { AutoSizeExample } from './AutoSizeExample'
1515

1616
const FastImageExample = () => (
1717
<View style={styles.container}>

‎ReactNativeFastImageExample/src/FastImageGrid.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22
import FastImage from 'react-native-fast-image'
3-
import ImageGrid from './ImageGrid'
3+
import { ImageGrid } from './ImageGrid'
44

55
const FastImageGrid = () => <ImageGrid ImageComponent={FastImage} />
66

‎ReactNativeFastImageExample/src/GifExample.tsx‎

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,28 @@
11
import React from 'react'
22
import { StyleSheet, View } from 'react-native'
3-
import withCacheBust from './withCacheBust'
43
import SectionFlex from './SectionFlex'
54
import FastImage from 'react-native-fast-image'
65
import Section from './Section'
76
import FeatureText from './FeatureText'
7+
import { useCacheBust } from './useCacheBust'
88

99
const GIF_URL =
1010
'https://cdn-images-1.medium.com/max/1600/1*-CY5bU4OqiJRox7G00sftw.gif'
1111

12-
interface GifExampleProps {
13-
onPressReload: () => void
14-
bust: boolean
12+
export const GifExample = () => {
13+
const { url, bust } = useCacheBust(GIF_URL)
14+
return (
15+
<View>
16+
<Section>
17+
<FeatureText text="• GIF support." />
18+
</Section>
19+
<SectionFlex onPress={bust}>
20+
<FastImage style={styles.image} source={{ uri: url }} />
21+
</SectionFlex>
22+
</View>
23+
)
1524
}
1625

17-
const GifExample = ({ onPressReload, bust }: GifExampleProps) => (
18-
<View>
19-
<Section>
20-
<FeatureText text="• GIF support." />
21-
</Section>
22-
<SectionFlex onPress={onPressReload}>
23-
<FastImage style={styles.image} source={{ uri: GIF_URL + bust }} />
24-
</SectionFlex>
25-
</View>
26-
)
27-
2826
const styles = StyleSheet.create({
2927
image: {
3028
backgroundColor: '#ddd',
@@ -34,5 +32,3 @@ const styles = StyleSheet.create({
3432
flex: 0,
3533
},
3634
})
37-
38-
export default withCacheBust(GifExample)

0 commit comments

Comments
 (0)