├── assets ├── icon.png └── splash.png ├── babel.config.js ├── .expo-shared └── assets.json ├── .gitignore ├── app.json ├── package.json └── App.js /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carlos-levir/youtube-react-native-image-picker-expo/HEAD/assets/icon.png -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carlos-levir/youtube-react-native-image-picker-expo/HEAD/assets/splash.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /.expo-shared/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "f9155ac790fd02fadcdeca367b02581c04a353aa6d5aa84409a59f6804c87acd": true, 3 | "89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44": true 4 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/**/* 2 | .expo/* 3 | npm-debug.* 4 | *.jks 5 | *.p8 6 | *.p12 7 | *.key 8 | *.mobileprovision 9 | *.orig.* 10 | web-build/ 11 | web-report/ 12 | 13 | # macOS 14 | .DS_Store 15 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "expo-upload", 4 | "slug": "expo-upload", 5 | "privacy": "public", 6 | "sdkVersion": "36.0.0", 7 | "platforms": [ 8 | "ios", 9 | "android", 10 | "web" 11 | ], 12 | "version": "1.0.0", 13 | "orientation": "portrait", 14 | "icon": "./assets/icon.png", 15 | "splash": { 16 | "image": "./assets/splash.png", 17 | "resizeMode": "contain", 18 | "backgroundColor": "#ffffff" 19 | }, 20 | "updates": { 21 | "fallbackToCacheTimeout": 0 22 | }, 23 | "assetBundlePatterns": [ 24 | "**/*" 25 | ], 26 | "ios": { 27 | "supportsTablet": true 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "scripts": { 4 | "start": "expo start", 5 | "android": "expo start --android", 6 | "ios": "expo start --ios", 7 | "web": "expo start --web", 8 | "eject": "expo eject" 9 | }, 10 | "dependencies": { 11 | "axios": "^0.19.0", 12 | "expo": "~36.0.0", 13 | "expo-image-picker": "~8.0.1", 14 | "react": "~16.9.0", 15 | "react-dom": "~16.9.0", 16 | "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz", 17 | "react-native-web": "~0.11.7" 18 | }, 19 | "devDependencies": { 20 | "@babel/core": "^7.0.0", 21 | "babel-preset-expo": "~8.0.0" 22 | }, 23 | "private": true 24 | } 25 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { View, TouchableOpacity, Text, StyleSheet, Image } from "react-native"; 3 | 4 | import Constants from "expo-constants"; 5 | import * as Permissions from "expo-permissions"; 6 | import * as ImagePicker from "expo-image-picker"; 7 | import Axios from "axios"; 8 | 9 | export default function Upload() { 10 | const [avatar, setAvatar] = useState(); 11 | 12 | async function imagePickerCall() { 13 | if (Constants.platform.ios) { 14 | const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL); 15 | 16 | if (status !== "granted") { 17 | alert("Nós precisamos dessa permissão."); 18 | return; 19 | } 20 | } 21 | 22 | const data = await ImagePicker.launchImageLibraryAsync({ 23 | mediaTypes: ImagePicker.MediaTypeOptions.All 24 | }); 25 | 26 | if (data.cancelled) { 27 | return; 28 | } 29 | 30 | if (!data.uri) { 31 | return; 32 | } 33 | 34 | setAvatar(data); 35 | } 36 | 37 | async function uploadImage() { 38 | const data = new FormData(); 39 | 40 | data.append("avatar", { 41 | uri: avatar.uri, 42 | type: avatar.type 43 | }); 44 | 45 | await Axios.post("http://localhost:3333/files", data); 46 | } 47 | 48 | return ( 49 | 50 | 58 | 59 | Escolher imagem 60 | 61 | 62 | Enviar imagem 63 | 64 | 65 | ); 66 | } 67 | 68 | const styles = StyleSheet.create({ 69 | container: { 70 | flex: 1, 71 | justifyContent: "center", 72 | alignItems: "center" 73 | }, 74 | button: { 75 | width: 150, 76 | height: 50, 77 | borderRadius: 3, 78 | backgroundColor: "#7159c1", 79 | justifyContent: "center", 80 | alignItems: "center", 81 | marginTop: 20 82 | }, 83 | buttonText: { 84 | color: "#fff" 85 | }, 86 | avatar: { 87 | width: 100, 88 | height: 100, 89 | borderRadius: 50 90 | } 91 | }); 92 | --------------------------------------------------------------------------------