vergnet/application-amicale
5
5
Fork 5
Code Issues Pull requests Releases Wiki Activity

Update image gallery button to use TypeScript

Browse source
This commit is contained in:
Arnaud Vergnet 2020-09-22 11:52:17 +02:00
parent 98518c46b6
commit 18f8c64302
1 changed files with 21 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/components/Media/ImageGalleryButton.js → src/components/Media/ImageGalleryButton.tsx
View file

@ -17,41 +17,36 @@
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>. * along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/ */
// @flow
import * as React from 'react'; import * as React from 'react';
import {TouchableRipple} from 'react-native-paper'; import {TouchableRipple} from 'react-native-paper';
import {StackNavigationProp} from '@react-navigation/stack';
import {Image} from 'react-native-animatable'; import {Image} from 'react-native-animatable';
import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet'; import {useNavigation} from '@react-navigation/native';
import {ViewStyle} from 'react-native';
type PropsType = { type PropsType = {
navigation: StackNavigationProp, images: Array<{url: string}>;
images: Array<{url: string}>, style: ViewStyle;
style: ViewStyleProp,
}; };
class ImageGalleryButton extends React.Component<PropsType> { function ImageGalleryButton(props: PropsType) {
onPress = () => { const navigation = useNavigation();
const {navigation, images} = this.props;
navigation.navigate('gallery', {images}); const onPress = () => {
navigation.navigate('gallery', {images: props.images});
}; };
render(): React.Node { return (
const {style, images} = this.props; <TouchableRipple onPress={onPress} style={props.style}>
return ( <Image
<TouchableRipple onPress={this.onPress} style={style}> resizeMode="contain"
<Image source={{uri: props.images[0].url}}
resizeMode="contain" style={{
source={{uri: images[0].url}} width: '100%',
style={{ height: '100%',
width: '100%', }}
height: '100%', />
}} </TouchableRipple>
/> );
</TouchableRipple>
);
}
} }
export default ImageGalleryButton; export default ImageGalleryButton;