Clash Royale CLAN TAG

Typescript generic Promise with React-Native Image Picker

I am learning react-nativv v0.56 and the react community's react-native-image-picker (this). I am trying to implement he image picker on iOS using TypeScript. A followed all the install instruction, and got an error. Now I am trying to implement it using Promises. Here is what I was trying and not got any error in the console debugger.
Here is my experimental code:

import * as React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Image, ImageSourcePropType, ImageURISource } from 'react-native';
import { Navigation } from 'react-native-navigation';
import Icon from 'react-native-vector-icons/FontAwesome';
import ImagePicker from 'react-native-image-picker';

import { ScreenID } from '../screenID'


export interface IWelcomeScreenProps {
navigator: Navigator;
componentId: string;
}

export interface IWelcomeScreenState {
pickedImage: ImageURISource;
}


export class WelcomeScreen extends React.Component<IWelcomeScreenProps, IWelcomeScreenState> {

constructor(props: IWelcomeScreenProps)
{
super(props);

this.state = {
pickedImage : {
uri: undefined
}
};

Navigation.events().bindComponent(this);
this.pushMapsScreen = this.pushMapsScreen.bind(this);
}

async pushMapsScreen()
{
await Navigation.push(this.props.componentId, {
component: {
name: ScreenID.mapScreen
}
})
}

async pickImageHandler()
{
return new Promise<ImageURISource>( (resolve, reject) =>
{
ImagePicker.showImagePicker({
title: 'Select Image'
},
result =>
{
if(result.didCancel)
{
reject('Image pick canceled!')
}
else if(result.error)
{
reject(result.error)
}
else
{
resolve(result);
}
});
}).then(x => {
this.setState({
...this.state,
pickedImage: {uri: x.uri}
})
}).catch(x => {
new Error(x.error)
});
}

//static declaration of the layout of the this screen
static get options()
{
return {
topBar:
{
title:
{
text: 'Mapporia Routes',
fontSize: 20,
color: 'red'
}
}
}
}

render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to Mapporia Routes!
</Text>
<TouchableOpacity onPress={ this.pushMapsScreen }>
<Icon name="map" size={200} color="#900"/>
</TouchableOpacity>
<Text style={styles.instructions}>
Pannonic IT
</Text>
<Image source={this.state.pickedImage} style={styles.previewImage} />
<TouchableOpacity style={ styles.button } onPress={this.pickImageHandler}>
<Text style={styles.buttonText}>PICK IMAGE</Text>
</TouchableOpacity>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
fontSize:30
},
button:{
marginTop: 20,
backgroundColor: 'blue',
padding:10
},
buttonText:{
color: 'white',
fontSize: 20
},
previewImage:{
width: 250,
height: 160,
backgroundColor: 'black'
}
});


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.