Browse Source

Update image gallery button to use TypeScript

Arnaud Vergnet 3 years ago
parent
commit
18f8c64302
1 changed files with 21 additions and 26 deletions
  1. 21
    26
      src/components/Media/ImageGalleryButton.tsx

src/components/Media/ImageGalleryButton.js → src/components/Media/ImageGalleryButton.tsx View File

@@ -17,41 +17,36 @@
17 17
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18 18
  */
19 19
 
20
-// @flow
21
-
22 20
 import * as React from 'react';
23 21
 import {TouchableRipple} from 'react-native-paper';
24
-import {StackNavigationProp} from '@react-navigation/stack';
25 22
 import {Image} from 'react-native-animatable';
26
-import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
23
+import {useNavigation} from '@react-navigation/native';
24
+import {ViewStyle} from 'react-native';
27 25
 
28 26
 type PropsType = {
29
-  navigation: StackNavigationProp,
30
-  images: Array<{url: string}>,
31
-  style: ViewStyleProp,
27
+  images: Array<{url: string}>;
28
+  style: ViewStyle;
32 29
 };
33 30
 
34
-class ImageGalleryButton extends React.Component<PropsType> {
35
-  onPress = () => {
36
-    const {navigation, images} = this.props;
37
-    navigation.navigate('gallery', {images});
31
+function ImageGalleryButton(props: PropsType) {
32
+  const navigation = useNavigation();
33
+
34
+  const onPress = () => {
35
+    navigation.navigate('gallery', {images: props.images});
38 36
   };
39 37
 
40
-  render(): React.Node {
41
-    const {style, images} = this.props;
42
-    return (
43
-      <TouchableRipple onPress={this.onPress} style={style}>
44
-        <Image
45
-          resizeMode="contain"
46
-          source={{uri: images[0].url}}
47
-          style={{
48
-            width: '100%',
49
-            height: '100%',
50
-          }}
51
-        />
52
-      </TouchableRipple>
53
-    );
54
-  }
38
+  return (
39
+    <TouchableRipple onPress={onPress} style={props.style}>
40
+      <Image
41
+        resizeMode="contain"
42
+        source={{uri: props.images[0].url}}
43
+        style={{
44
+          width: '100%',
45
+          height: '100%',
46
+        }}
47
+      />
48
+    </TouchableRipple>
49
+  );
55 50
 }
56 51
 
57 52
 export default ImageGalleryButton;

Loading…
Cancel
Save