Image picker#jpe

android/app/build.gradle

@@ -140,6 +140,7 @@ android {
 }
 
 dependencies {
+    implementation project(':react-native-image-picker')
     implementation project(':react-native-text-input-mask')
     implementation project(':react-native-linear-gradient')
     implementation project(':react-native-vector-icons')
@@ -153,6 +154,7 @@ dependencies {
     implementation 'com.google.firebase:firebase-core:16.0.8'
     implementation 'com.google.firebase:firebase-auth:16.2.1'
     implementation "com.google.firebase:firebase-firestore:18.2.0"
+    implementation "com.google.firebase:firebase-storage:16.1.0"
 
 }
 

android/app/src/main/AndroidManifest.xml

@@ -2,6 +2,9 @@
   package="com.unichat">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.CAMERA" />
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
 
     <application
       android:name=".MainApplication"

android/app/src/main/java/com/unichat/MainApplication.java

@@ -3,6 +3,7 @@
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.imagepicker.ImagePickerPackage;
 import com.RNTextInputMask.RNTextInputMaskPackage;
 import com.BV.LinearGradient.LinearGradientPackage;
 import com.oblador.vectoricons.VectorIconsPackage;
@@ -15,6 +16,7 @@
 import com.facebook.soloader.SoLoader;
 import io.invertase.firebase.auth.RNFirebaseAuthPackage;
 import io.invertase.firebase.firestore.RNFirebaseFirestorePackage;
+import io.invertase.firebase.storage.RNFirebaseStoragePackage;
 
 import java.util.Arrays;
 import java.util.List;
@@ -31,14 +33,16 @@ public boolean getUseDeveloperSupport() {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new ImagePickerPackage(),
             new RNTextInputMaskPackage(),
             new LinearGradientPackage(),
             new VectorIconsPackage(),
             new RNFirebasePackage(),
             new RNFirebaseAuthPackage(),
             new RNFirebaseFirestorePackage(),
             new SvgPackage(),
-            new RNGestureHandlerPackage()
+            new RNGestureHandlerPackage(),
+            new RNFirebaseStoragePackage()
       );
     }
 

android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'Unichat'
+include ':react-native-image-picker'
+project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')
 include ':react-native-text-input-mask'
 project(':react-native-text-input-mask').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-text-input-mask/android')
 include ':react-native-linear-gradient'

ios/Podfile

@@ -11,6 +11,8 @@ target 'Unichat' do
 
   pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'
 
+  pod 'react-native-image-picker', :path => '../node_modules/react-native-image-picker'
+
   target 'UnichatTests' do
     inherit! :search_paths
     # Pods for testing

package.json

@@ -18,6 +18,7 @@
     "react-native-elements": "^1.1.0",
     "react-native-firebase": "^5.3.1",
     "react-native-gesture-handler": "^1.1.0",
+    "react-native-image-picker": "^0.28.1",
     "react-native-linear-gradient": "^2.5.4",
     "react-native-masked-text": "^1.12.2",
     "react-native-power-translator": "^1.1.1",

src/Screens/Auth/auth.js

@@ -38,8 +38,15 @@ export default class Auth extends Component {
     const { navigation } = this.props
     firebase.auth().onAuthStateChanged(user => {
       if (user) {
+        const userRef = firebase.firestore().collection("users").doc(user.uid)
         this.setState({ loading: false })
-        navigation.navigate("ChatScreen")
+        userRef.get().then(doc => {
+          if(!doc.exists) {
+            navigation.navigate("PerfilSettings")
+          } else {
+            navigation.navigate("Conversas")
+          }
+        })
       } else {
         this.setState({ loading: false })
       }

src/Screens/PerfilSettings/perfilsettings.js

@@ -8,11 +8,14 @@ import {
   TouchableOpacity,
   Picker,
   StyleSheet,
-  Dimensions
+  Dimensions,
+  Alert
 } from "react-native"
 import { Icon } from "react-native-elements"
+import firebase from "react-native-firebase"
 import shortid from "shortid"
 import LinearGradient from "react-native-linear-gradient"
+import ImagePicker from "react-native-image-picker"
 import profileImage from "../../assets/imgs/profile-placeholder.png"
 import languagelist from "../../assets/languages/languages"
 
@@ -22,14 +25,77 @@ export default class PerfilSettings extends Component {
     this.state = {
       language: [],
       code: "",
-      img: profileImage
+      img: profileImage,
+      userName: "",
+      eMail: "",
+      profileImageUrl: ""
     }
   }
 
   componentDidMount() {
     this.setState({ language: languagelist })
   }
 
+  confirmPerfilSettings = () => {
+    const { navigation } = this.props
+    const user = firebase.auth().currentUser
+    const { userName, eMail, code, profileImageUrl } = this.state
+    firebase
+      .firestore()
+      .collection("users")
+      .doc(user.uid)
+      .set({
+        phone: user.phoneNumber,
+        username: userName,
+        email: eMail,
+        language_code: code,
+        profile_img_url: profileImageUrl
+      })
+      navigation.navigate("Conversas")
+  }
+
+  uploadphotos = () => {
+    const user = firebase.auth().currentUser
+    const { img } = this.state
+
+    firebase
+      .storage()
+      .ref(`profile_pics/${user.uid}`)
+      .putFile(img.path).on(
+        firebase.storage.TaskEvent.STATE_CHANGED,
+        snapshot => {
+          let state = {}
+          state = {
+            ...state,
+            progress: (snapshot.bytesTransferred / snapshot.totalBytes) * 100 // Progress bar
+          }
+          if(snapshot.state === firebase.storage.TaskState.SUCCESS) {
+            Alert.alert("Image upload successful.")
+            state = {
+              uploading: false,
+              progress: 0,
+              profileImageUrl: snapshot.downloadURL
+            }
+          }
+
+          this.setState(state)
+        })
+  }
+
+  handleChooseImage = () => {
+    const options = {
+      noData: true,
+      title: "Escolha uma foto",
+    }
+
+    ImagePicker.showImagePicker(options, response => {
+      if(response.uri) {
+        this.setState({img: response})
+        this.uploadphotos()
+      }
+    })
+  }
+
   previewImage = () => {
     const { navigation } = this.props
     const { img } = this.state
@@ -48,16 +114,30 @@ export default class PerfilSettings extends Component {
               this.previewImage()
             }}
           >
-            <Image source={img} style={styles.imagePlaceHolder} />
+          {img && (
+            <Image
+            source={{uri: img.uri}} 
+            style={styles.imagePlaceHolder}
+            />
+          )}
           </TouchableOpacity>
-          <TouchableOpacity style={styles.roundbutton}>
+          <TouchableOpacity 
+          style={styles.roundbutton}
+          onPress={this.handleChooseImage}
+          >
             <Icon name="create" />
           </TouchableOpacity>
         </View>
         <Text style={styles.labeltext}>Nome:</Text>
-        <TextInput style={styles.entrada} placeholder="Digite seu nome" />
+        <TextInput
+          style={styles.entrada}
+          onChangeText={text => this.setState({userName: text})}
+          placeholder="Digite seu nome" />
         <Text style={styles.labeltext}>Email:</Text>
-        <TextInput style={styles.entrada} placeholder="Digite seu e-mail" />
+        <TextInput
+          style={styles.entrada}
+          onChangeText={text => this.setState({eMail: text})}
+          placeholder="Digite seu e-mail" />
         <Text style={styles.labeltext}>Idiomas:</Text>
         <View style={styles.languagePicker}>
           <Picker
@@ -74,9 +154,11 @@ export default class PerfilSettings extends Component {
             ))}
           </Picker>
         </View>
-        <LinearGradient colors={["#547BF0", "#6AC3FB"]} style={styles.button}>
-          <Text style={styles.textButton}>Avançar</Text>
-        </LinearGradient>
+        <TouchableOpacity onPress={this.confirmPerfilSettings}>
+          <LinearGradient colors={["#547BF0", "#6AC3FB"]} style={styles.button}>
+            <Text style={styles.textButton}>Cadastrar</Text>
+          </LinearGradient>
+        </TouchableOpacity>
       </View>
     )
   }

src/Screens/Verification/verification.js

@@ -3,7 +3,6 @@ import React, { Component } from "react"
 import { View, Text, StyleSheet, Linking, TouchableOpacity } from "react-native"
 import LinearGradient from "react-native-linear-gradient"
 import CodeInput from "react-native-confirmation-code-input"
-import firebase from "react-native-firebase"
 
 export default class Verificacao extends Component {
   constructor() {
@@ -22,21 +21,13 @@ export default class Verificacao extends Component {
   confirmChoice = code => {
     const { navigation } = this.props
     const confirmResult = navigation.getParam("confirmResultFirebase")
-    const phoneNumber = navigation.getParam("phoneNumber")
 
     if (confirmResult && code.length) {
       confirmResult
         .confirm(code)
         // Continuar as rotas se a confirmação ocorrer com sucesso aqui
-        .then(user => {
-          firebase
-            .firestore()
-            .collection("users")
-            .doc(user.uid)
-            .set({
-              phone: phoneNumber
-            })
-          navigation.navigate("Conversas")
+        .then(() => {
+          navigation.navigate("PerfilSettings")
         })
         // Caso dê algum erro, o tratamento é feito aqui
         .catch(() => {})