ImageBrowserScreen.js

 import React, { Component } from 'react';
import { StyleSheet, View, Text, TouchableOpacity, ActivityIndicator } from 'react-native';
import { Button } from 'react-native';
import { connect } from 'react-redux';
import * as ImageManipulator from 'expo-image-manipulator';
import { ImageBrowser } from 'expo-image-picker-multiple';
import * as RootNavigation from '../RootNavigation';
import { SelectPhoto, UploadImage } from '../src/action/pic';
class ImageBrowserScreen extends Component {
  constructor(props) {
    super(props);
    this.state = { num: 1 };
  }
  static navigationOptions = ({ navigation }) => {
    const headerTitle = navigation.getParam('headerTitle');
    const right = navigation.getParam('headerRight');
    const loading = navigation.getParam('loading');
    const headerLeft =
      <TouchableOpacity onPress={() => navigation.goBack()}>
        <Text>
          Back
            </Text>
      </TouchableOpacity>;
    const headerRight =
      <TouchableOpacity title={'Done'} onPress={right}>
        <Text>
          Done
            </Text>
      </TouchableOpacity>;
    const headerLoader = (
      <View style={styles.headerLoader}>
        <ActivityIndicator size="small" color={'#0580FF'} />
      </View>
    );

    if (loading) return { headerTitle, headerLeft, headerRight: headerLoader };
    return { headerTitle, headerLeft, headerRight };
  };

  componentDidMount() {

    // this.props.navigation.setOptions({headerRight:(props)=>(<Button title="SSS"></Button>)});
  }

  imagesCallback = (callback) => {

    callback.then(async (photos) => {
      const cPhotos = [];
      for (let photo of photos) {
        const pPhoto = await this._processImageAsync(photo.uri);
        cPhotos.push({
          uri: pPhoto.uri,

        })
      }
     
      var pt = cPhotos;
      let uploadData = new FormData();
      uploadData.append("submit", "ok");
      if (pt != undefined) {
        for (i = 0; i < pt.length; i++) {
          uploadData.append("file[]", { type: "image/png", uri: pt[i].uri, name: "test" + i + ".png" });
        }
        this.props.UploadImage(uploadData, this.props.route.params.pdata.id);
      }
      RootNavigation.navigate('Notes', { pdata: this.props.route.params.pdata });
    })
      .catch((e) => console.log(e))
      .finally(() => console.log("test"));
  };

  async _processImageAsync(uri) {
    const file = await ImageManipulator.manipulateAsync(
      uri,
      [{ resize: { width: 1000 } }],
      { compress: 0.8, format: ImageManipulator.SaveFormat.JPEG }
    );
    return file;
  }

  updateHandler = (count, onSubmit) => {
    this.setState({ num: count + 1 });
    this.props.navigation.setOptions({ headerRight: (props) => (<Button title="Submit" onPress={onSubmit}></Button>) });

  };

  renderSelectedComponent = (number) => (
    <View style={styles.countBadge}>
      <Text style={styles.countBadgeText}>{number}</Text>
    </View>
  );

  render() {
    const emptyStayComponent = <Text style={styles.emptyStay}>Empty =(</Text>;
    return (
      <View style={[styles.flex, styles.container]}>
        <ImageBrowser
          max={this.state.num}
          onChange={this.updateHandler}
          callback={this.imagesCallback}
          renderSelectedComponent={this.renderSelectedComponent}
          emptyStayComponent={emptyStayComponent}
        />
      </View>
    );
  }
}
const mapStateToProp = (state) => {
  return {
    picReducer: state.picReducer,

  }
}
const mapDispatchToProp = {
  SelectPhoto, UploadImage
};
export default connect(mapStateToProp, mapDispatchToProp)(ImageBrowserScreen);

const styles = StyleSheet.create({
  flex: {
    flex: 1
  },
  container: {
    position: 'relative'
  },
  emptyStay: {
    textAlign: 'center',
  },
  countBadge: {
    paddingHorizontal: 8.6,
    paddingVertical: 5,
    borderRadius: 50,
    position: 'absolute',
    right: 3,
    bottom: 3,
    justifyContent: 'center',
    backgroundColor: '#0580FF'
  },
  countBadgeText: {
    fontWeight: 'bold',
    alignSelf: 'center',
    padding: 'auto',
    color: '#ffffff'
  }
});