HomeScreen.js

import React from 'react';
import {
  Image,
  Linking,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

import { MonoText } from '../components/StyledText';

import Exponent from 'exponent';

export default class HomeScreen extends React.Component {
  static route = {
    navigationBar: {
      visible: false,
    },
  }

  constructor(props){
        super(props);

        this.state = {
            uri: '',
            urlup: ''
       }
 }

  componentDidMout(){

 }
  render() {

        let x = this.state.uri == "" ? (

        <Image
          source={{uri: 'http://schooloftesl.org/wp/wp-content/uploads/2014/01/blank-avatar.png'}}
          style={styles.welcomeImage}
        />):(

        <Image
          source={{uri: this.state.uri}}
          style={styles.welcomeImage}
        />);



    return (
      <View style={styles.container}>
        <ScrollView
          style={styles.container}
          contentContainerStyle={styles.contentContainer}>

          <View style={styles.welcomeContainer}>
            {x}
          </View>


          <View style={styles.getStartedContainer}>
            <TouchableOpacity onPress={ ()=> this.openImage() }>
                  <View>
                        <Text>Carregar Imagem</Text>
                  </View>
            </TouchableOpacity>
          </View>
          <View style={styles.getStartedContainer}>
            <TouchableOpacity style={{marginTop: 30, padding: 10, backgroundColor:'red'}} onPress={ ()=> this.uploadImage() }>
                  <View>
                        <Text>Upload Imagem</Text>
                  </View>
            </TouchableOpacity>
          </View>
          <Text style={{marginTop: 20}} onPress={ ()=> Linking.openURL(this.state.urlup == '' ? 'http://google.com' : this.state.urlup) }>URL {
                this.state.urlup
          }</Text>

        </ScrollView>


      </View>
    );
  }

  uploadImage(){

          let apiUrl = `https://api.imgur.com/3/image`

          console.log(this.state.uri);
      

          let formData = new FormData();
          formData.append('file', {
            uri: this.state.uri,
            type: 'image/jpeg',
          });

          let options = {
            method: 'post',
            body: formData,
            headers: {
             'Authorization':'Client-ID 865f69a3869078e',
              'Accept': '*/*',
              'Content-Type': 'multipart/form-data',
            },
          };

          fetch(apiUrl, options).then(res => res.json())
          .then( (data) =>{

                console.log(data);
                this.setState({
                      urlup: data.data.link
                });
          });
 }

  openImage(){
        Exponent.ImagePicker.launchImageLibraryAsync(
             {
                   allowsEditing:true,
                   aspect: [4,5]
             }
      ).then((data)=>{
            console.log(data);
            this.setState({
                  uri: data.uri
            })
      });
 }
  _maybeRenderDevelopmentModeWarning() {
    if (__DEV__) {
      const learnMoreButton = (
        <Text onPress={this._handleLearnMorePress} style={styles.helpLinkText}>
          Learn more
        </Text>
      );

      return (
        <Text style={styles.developmentModeText}>
          Development mode is enabled, your app will run slightly slower but
          you have access to useful development tools. {learnMoreButton}.
        </Text>
      );
    } else {
      return (
        <Text style={styles.developmentModeText}>
          You are not in development mode, your app will run at full speed.
        </Text>
      );
    }
  }

  _handleLearnMorePress = () => {
    Linking.openURL('https://docs.getexponent.com/versions/latest/guides/development-mode');
  }

  _handleHelpPress = () => {
    Linking.openURL('https://docs.getexponent.com/versions/latest/guides/up-and-running.html#can-t-see-your-changes');
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  developmentModeText: {
    marginBottom: 20,
    color: 'rgba(0,0,0,0.4)',
    fontSize: 15,
    textAlign: 'center',
  },
  contentContainer: {
    paddingTop: 80,
  },
  welcomeContainer: {
    alignItems: 'center',
    marginTop: 10,
    marginBottom: 20,
  },
  welcomeImage: {
    width: 200,
    height: 200,
    marginTop: 3,
  },
  getStartedContainer: {
    alignItems: 'center',
    marginHorizontal: 50,
  },
  homeScreenFilename: {
    marginVertical: 7,
  },
  codeHighlightText: {
    color: 'rgba(96,100,109, 0.8)',
  },
  codeHighlightContainer: {
    backgroundColor: 'rgba(0,0,0,0.05)',
    borderRadius: 3,
    paddingHorizontal: 4,
  },
  getStartedText: {
    fontSize: 17,
    color: 'rgba(96,100,109, 1)',
    lineHeight: 23,
    textAlign: 'center',
  },
  tabBarInfoContainer: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    ...Platform.select({
      ios: {
        shadowColor: 'black',
        shadowOffset: {height: -3},
        shadowOpacity: 0.1,
        shadowRadius: 3,
      },
      android: {
        elevation: 20,
      },
    }),
    alignItems: 'center',
    backgroundColor: '#fbfbfb',
    paddingVertical: 20,
  },
  tabBarInfoText: {
    fontSize: 17,
    color: 'rgba(96,100,109, 1)',
    textAlign: 'center',
  },
  navigationFilename: {
    marginTop: 5,
  },
  helpContainer: {
    marginTop: 15,
    alignItems: 'center',
  },
  helpLink: {
    paddingVertical: 15,
  },
  helpLinkText: {
    fontSize: 14,
    color: '#2e78b7',
  },
});