Como subir imágenes a un servidor

En este tutorial aprenderemos como subir una imagen desde nuestra aplicación de react-native hacia un servidor en la nube y primero vamos a instalar una app que a mi punto de vista esta genial para tomar fotografías usando la cámara del móvil o accediendo a la galería de imagenes

Paso 1:Instalar con el gestor de paquete que tengas instalado en tu ordenador la aplicación react-native-image-picke
yarn add react-native-image-picker o **npm install react-native-image-picker --save **
Paso 2: ejecutar react-native link react-native-image-picker

Paso 3: importar el componente en el lugar donde lo quieras usar y aplicar los estilos de css para tu boton de modo que se ajuste a tu aplicación

import ImagePicker from 'react-native-image-picker';
 
const options = {
  title: 'Seleccione la imagen', 
  takePhotoButtonTitle: 'Tomar foto',
  chooseFromLibraryButtonTitle: "Cambiar imagen",
  quality: 1
};

class MICamara extends Component {
    async componentDidMount(){
      this.requestCameraRollPermission()
    }

    async requestCameraRollPermission() {
      try {
          const granted = await PermissionsAndroid.request(
            PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
            {
              'title': 'Permiso de archivos',
              'message': 'La aplicación necesita acceso a tus imagenes'
            }
          )
          if (granted === PermissionsAndroid.RESULTS.GRANTED) {
            console.log("You can use the camera")
          } else {
            console.log("Camera permission denied")
          }
        } catch (err) {
          console.warn(err)
        }
      }

    handleSelectImage() {
      ImagePicker.showImagePicker(options, (response) => {
      console.log('Response = ', response);

      if (response.didCancel) {
        console.log('usuario canceló la selección de la imagen');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('Botón personalizado del usuario pulsado: ', response.customButton);
      } else {
          const source = { uri: response.uri };
          this.setState({
          avatarSource: source,
          data:response.data
        })
      }
    });
    
  } 
  render(){
	return (
	
   	<Button onPress={this.handleSelectImage.bind(this)}> 
          	<Text>Tomar foto</Text>
     	</Button>	
)
}
 
}

Una vez que tenemos ya instalado y configurado el componente para gestionar las imágenes, debemos instalar otra aplicación que nos ayudara a enviar la imagen a nuestro servidor

Paso 4: instalar
npm install --save rn-fetch-blob o yarn add rn-fetch-blob

Paso 5: ejecutar react-native link

Paso 6: Agregamos a la aplicación el botón que deseamos que nos sirva para ejecutar la función que sube al servidor la imagen que tenemos seleccionada e importamos las configuraciones necesarias.

import RNFetchBlob from 'rn-fetch-blob'

//funcion para enviar 
  handleSubmit()=>{
 	 RNFetchBlob.fetch('POST', 'http://www.example.com/upload-form', {
        Authorization : "Bearer access-token",
        otherHeader : "foo",
        'Content-Type' : 'multipart/form-data',
      }, [ 
       { name : 'image', filename : 'image.png', type:'image/png', data: this.state.data},      
         
      ]).then((resp) => {
        // ...
      }).catch((err) => {
        // ...
      })
  }