Typescript generic Promise with React-Native Image Picker

Question

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' 
  }
});

score 0 · Answer 1 · answered Jul 27 '18 at 19:32

When using react-native-image-picker npm package v0.26.10 and typescript 2.9.2 ImagePicker is not defined, because the type declaration is wrong in index.d.ts.

Solution: in package at index.d.ts file delete the class definition and add this

export function showImagePicker(options: Options, callback: (response: Response) => void): void;
export function launchCamera(options: Options, callback: (response: Response) => void): void;
export function launchImageLibrary(options: Options, callback: (response: Response) => void): void;

then import functions like this

import { showImagePicker } from 'react-native-image-picker';

Additional Information:

React Native version: 0.56
Platform: iOS
Development Operating System: MacOS High Siera
Dev tools: VS Code

Modifying packages is only to be use as a quickfix and cannot in any case be considered as a permanent solution though. — Shikatsu Kagaminara, Jun 24 '19 at 09:54

Typescript generic Promise with React-Native Image Picker

1 Answers1