Android vs iOS image sharing on React Native

Home.android.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { PureComponent } from 'react'
import {
  Button,
  Image,
  Modal,
  Text,
  View,
} from 'react-native'
import Share from 'react-native-share'
import ViewShot from 'react-native-view-shot'
import logo from 'static/images/logo.png'
import styles from './Home.style'
import type { ReduxProps } from './'

// const testImage = 'https://res.cloudinary.com/rocksauce-studios/image/upload/v1436392175/j6ahzhlwzd0wizwjfpgp.png'

type Props = ReduxProps & {
  history: Object,
}

type State = {
  modalVisible: boolean,
  uri: string,
}

class Home extends PureComponent<Props, State> {

  state = {
    modalVisible: false,
    uri: '',
  }

  onPress = () => {

    this.viewShot.capture()
      .then(uri => {

        this.setState({
          uri: `data:image/jpeg;base64,${uri}`,
          modalVisible: true,
        })

      })
      .catch(err => console.error(err))

  }

  onShare = () => {

    Share.open({
      title: 'Test',
      url: this.state.uri,
      type: 'image/jpeg',
    })
      .catch(err => console.error(err))

  }

  dismissModal = () => this.setState({ modalVisible: false })

  viewShot: any

  render () {

    return (
      <View style={styles.container}>
        <Modal
          animationType="fade"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={this.dismissModal}
        >
          {/*
              <Image source={`data:image/jpg;base64,${this.state.uri}`} />
              */}
          <Image
            style={styles.resultImage}
            source={{ uri: this.state.uri }}
          />
          <Button
            onPress={this.onShare}
            title="Share"
          />
          <Button
            onPress={this.dismissModal}
            title="Dismiss"
          />
        </Modal>
        <ViewShot
          options={{
            format: 'jpg',
            quality: 0.9,
            result: 'base64',
          }}
          style={styles.viewshot}
          ref={ref => {

            this.viewShot = ref

          }}
        >
          <Image style={styles.logo} source={logo} />
          <Text style={styles.welcome}>
            Welcome to React Native!
          </Text>
          <Text style={styles.instructions}>
            To get started, edit index.ios.js
          </Text>
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+D or shake for dev menu
          </Text>
        </ViewShot>
        <Button
          onPress={this.onPress}
          title="Take Photo"
        />
      </View>
    )

  }

}


export default Home

Home.ios.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { PureComponent } from 'react'
import {
  Button,
  Image,
  Modal,
  Share,
  Text,
  View,
} from 'react-native'
import ViewShot from 'react-native-view-shot'
import logo from 'static/images/logo.png'
import styles from './Home.style'
import type { ReduxProps } from './'

// const testImage =
// 'https://res.cloudinary.com/rocksauce-studios/image/upload/v1436392175/j6ahzhlwzd0wizwjfpgp.png'

type Props = ReduxProps & {
  history: Object,
}

type State = {
  modalVisible: boolean,
  uri: string,
}

class Home extends PureComponent<Props, State> {

  state = {
    modalVisible: false,
    uri: '',
  }

  onPress = () => {

    this.viewShot.capture()
      .then(uri => {

        this.setState({
          uri,
          modalVisible: true,
        })

      })

  }

  onShare = () => {

    Share.share({
      url: this.state.uri,
      // message: testImage,
    })

  }

  dismissModal = () => this.setState({ modalVisible: false })

  viewShot: any

  render () {

    return (
      <View style={styles.container}>
        <Modal
          animationType="fade"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={this.dismissModal}
        >
          {/*
              <Image source={`data:image/jpg;base64,${this.state.uri}`} />
              */}
          <Image
            style={styles.resultImage}
            source={{ uri: this.state.uri }}
          />
          <Button
            onPress={this.onShare}
            title="Share"
          />
          <Button
            onPress={this.dismissModal}
            title="Dismiss"
          />
        </Modal>
        <ViewShot
          options={{
            format: 'jpg',
            quality: 0.9,
            result: 'data-uri',
          }}
          style={styles.viewshot}
          ref={ref => {

            this.viewShot = ref

          }}
        >
          <Image style={styles.logo} source={logo} />
          <Text style={styles.welcome}>
            Welcome to React Native!
          </Text>
          <Text style={styles.instructions}>
            To get started, edit index.ios.js
          </Text>
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+D or shake for dev menu
          </Text>
        </ViewShot>
        <Button
          onPress={this.onPress}
          title="Take Photo"
        />
      </View>
    )

  }

}


export default Home