diff --git a/package-lock.json b/package-lock.json index 66714c3..7227a75 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8218,6 +8218,11 @@ "resolved": "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.5.4.tgz", "integrity": "sha512-FF1NhlerA4uBiS0gFIHa4FBp8/aftv4vPj14Y47lGNkYjSI94tnI6oYO3EfUxXjEyCUPiOVNKZOB9kScyjc5Ew==" }, + "react-native-platform-touchable": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/react-native-platform-touchable/-/react-native-platform-touchable-1.1.1.tgz", + "integrity": "sha1-/eSsxl7qWF0osWTQw3FqQhKaaOQ=" + }, "react-native-power-translator": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/react-native-power-translator/-/react-native-power-translator-1.1.1.tgz", diff --git a/package.json b/package.json index a70b2e3..9eeb7f5 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "react-native-gesture-handler": "^1.1.0", "react-native-image-picker": "^0.28.1", "react-native-linear-gradient": "^2.5.4", + "react-native-platform-touchable": "^1.1.1", "react-native-power-translator": "^1.1.1", "react-native-size-matters": "^0.1.7", "react-native-svg": "^9.3.7", diff --git a/src/Components/About/aboutHeader.js b/src/Components/About/aboutHeader.js index bf3b21a..d4be29f 100644 --- a/src/Components/About/aboutHeader.js +++ b/src/Components/About/aboutHeader.js @@ -1,13 +1,15 @@ import React from "react" -import { View, StyleSheet, Text, TouchableOpacity } from "react-native" +import { View, StyleSheet, Text } from "react-native" +import Touchable from "react-native-platform-touchable" import { Icon } from "react-native-elements" const aboutHeader = props => { return ( - { const { navigation } = props @@ -15,8 +17,8 @@ const aboutHeader = props => { }} hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }} > - - + + Sobre @@ -31,23 +33,19 @@ const styles = StyleSheet.create({ fontFamily: "OpenSans" }, headerContent: { - backgroundColor: "#fff", marginBottom: 15, marginTop: 15, - marginRight: 10, - paddingLeft: 15, flexDirection: "row" }, backButton: { - justifyContent: "center" + justifyContent: "center", + width: 40, + marginLeft: 10 }, languagesInfo: { - flex: 1, fontSize: 22, textAlign: "left", - backgroundColor: "#fff", - marginLeft: 20, - paddingRight: 20 + marginLeft: 10 } }) diff --git a/src/Components/Chat/chatHeader.js b/src/Components/Chat/chatHeader.js index 2f2e95d..7cacc3f 100644 --- a/src/Components/Chat/chatHeader.js +++ b/src/Components/Chat/chatHeader.js @@ -1,7 +1,8 @@ import React from "react" -import { View, StyleSheet, Text, TouchableOpacity } from "react-native" +import { View, StyleSheet, Text } from "react-native" import { Avatar, Icon } from "react-native-elements" +import Touchable from "react-native-platform-touchable" const chatHeader = props => { const { userName, userPhoto, navigation, status } = props @@ -9,33 +10,37 @@ const chatHeader = props => { return ( - navigation.goBack()} > - - - - - - navigation.navigate("PreviewImage", { - img: userPhoto, - name: userName, - isLoggedIn: true - }) - } - > - {userName} - - {status} - + + + + + + + navigation.navigate("PreviewImage", { + img: userPhoto, + name: userName, + isLoggedIn: true + }) + } + > + + {userName} + {status} + + Conta - { navigation.navigate("LanguagesScreen") }} > - - Idiomas - - + + + Idiomas + + + - + - { navigation.navigate("EditPerfilScreen") }} > - - Perfil - - + + + Perfil + + + - + - - - Notificação - - + + + + Notificação + + + - + Aplicativo - - - Enviar Feedback - + + + + Enviar Feedback + + - { Share.share({ message: @@ -110,37 +120,47 @@ export default class configBody extends Component { }) }} > - - Compartilhar App - + + + Compartilhar App + + - - - Avaliar App - - + + + Avaliar App + + + { Linking.openURL( "https://github.com/ES2-UFPI/Unichat/blob/dev/PRIVACY-POLICY.md" ) }} > - - Política de Privacidade - + + + + Política de Privacidade + + + - { navigation.navigate("AboutScreen") }} > - - Sobre - + + + Sobre + + - + Excluir Conta @@ -162,17 +182,16 @@ const styles = StyleSheet.create({ }, innerBody: { marginTop: 10, - marginLeft: 30 + marginLeft: 20, + marginRight: 20 }, chevronStyle: { flex: 1, - marginRight: 10, alignItems: "flex-end" }, touchableIcon: { flexDirection: "row", - alignItems: "center", - marginTop: 10 + alignItems: "center" }, touchableStyle: { fontFamily: "OpenSans", @@ -202,5 +221,8 @@ const styles = StyleSheet.create({ borderTopColor: "#dce1ea", borderTopWidth: 2, marginRight: 20 + }, + platformTouchable: { + marginBottom: 5 } }) diff --git a/src/Components/Contacts/contactHeader.js b/src/Components/Contacts/contactHeader.js index c971e63..5b6fd1a 100644 --- a/src/Components/Contacts/contactHeader.js +++ b/src/Components/Contacts/contactHeader.js @@ -1,13 +1,8 @@ import React from "react" -import { - View, - StyleSheet, - Text, - TouchableOpacity, - Dimensions -} from "react-native" +import { View, StyleSheet, Text, Dimensions } from "react-native" import { Icon } from "react-native-elements" +import Touchable from "react-native-platform-touchable" const contactsHeader = props => { const { syncronize, onPressSearch } = props @@ -16,19 +11,21 @@ const contactsHeader = props => { Contatos - + - + - - + - + background={Touchable.SelectableBackgroundBorderless()} + > + + + ) @@ -59,11 +56,8 @@ const styles = StyleSheet.create({ }, Icon: { justifyContent: "center", - marginRight: 10, - marginLeft: 10 - }, - syncIcon: { - justifyContent: "center" + marginRight: 5, + marginLeft: 5 } }) diff --git a/src/Components/Contato/contato.js b/src/Components/Contato/contato.js new file mode 100644 index 0000000..b90b12d --- /dev/null +++ b/src/Components/Contato/contato.js @@ -0,0 +1,64 @@ +import React from "react" + +import { View, StyleSheet, Text } from "react-native" +import { Avatar } from "react-native-elements" +import Touchable from "react-native-platform-touchable" + +const Contato = props => { + const { item, onPress } = props + + return ( + onPress(item)} + > + + + + {item.contactName} + {item.phoneNumbers[0].number} + + + + ) +} +const styles = StyleSheet.create({ + button: { + backgroundColor: "white", + marginBottom: 1 + }, + contato: { + flexDirection: "row", + width: "100%", + marginBottom: 1 + }, + avatar: { + marginTop: 10, + marginLeft: 10, + marginBottom: 10 + }, + mainInformation: { + flex: 1, + marginTop: 15, + marginBottom: 15, + marginLeft: 15 + }, + name: { + position: "absolute", + top: 0 + }, + phone: { + position: "absolute", + bottom: 0, + color: "#a9a9a9", + fontSize: 13 + } +}) + +export default Contato diff --git a/src/Components/Conversa/conversa.js b/src/Components/Conversa/conversa.js new file mode 100644 index 0000000..ca41c54 --- /dev/null +++ b/src/Components/Conversa/conversa.js @@ -0,0 +1,120 @@ +import React from "react" + +import { View, StyleSheet, Text } from "react-native" +import LinearGradient from "react-native-linear-gradient" +import getTime from "~/functions/getTime" +import firebase from "react-native-firebase" +import { Avatar } from "react-native-elements" +import Touchable from "react-native-platform-touchable" + +const conversa = props => { + const { item, onPress, onLongPress } = props + + const parseTime = dateNanoScds => { + const date = dateNanoScds.toDate() + const atualDate = firebase.database().getServerTime() + let textDate = "" + if (atualDate.getDate() - date.getDate() === 0) { + textDate = getTime(date) + } else if (atualDate.getDate() - date.getDate() === 1) { + textDate = "Ontem" + } else if (atualDate.getDate() - date.getDate() >= 2) { + textDate = `${date + .getDate() + .toString()}/${(date + .getMonth() + 1) + .toString()}/${date.getFullYear().toString()}` + } + return textDate + } + + return ( + onPress(item)} + onLongPress={() => onLongPress(item)} + > + + + + {item.contactName} + {item.lastMessage} + + + {parseTime(item.dateLastMessage)} + {item.unreadMsgs && ( + + {item.numUnreadMsgs} + + )} + + + + ) +} + +const styles = StyleSheet.create({ + button: { + backgroundColor: "white", + marginBottom: 1 + }, + conversa: { + flexDirection: "row", + width: "100%" + }, + avatar: { + marginTop: 10, + marginLeft: 10, + marginBottom: 10 + }, + mainInformation: { + flex: 1, + marginRight: 60, + marginTop: 15, + marginBottom: 15, + marginLeft: 15 + }, + name: { + position: "absolute", + top: 0 + }, + lastMsg: { + position: "absolute", + bottom: 0, + color: "#a9a9a9", + fontSize: 13 + }, + cont: { + width: 20, + height: 20, + borderRadius: 10, + justifyContent: "center", + marginTop: 5 + }, + data: { + fontSize: 8 + }, + unread: { + fontWeight: "bold", + fontSize: 8, + alignSelf: "center", + color: "white" + }, + rightInformation: { + position: "absolute", + alignItems: "center", + justifyContent: "center", + right: 0, + marginRight: 10, + top: "50%", + bottom: "50%" + } +}) + +export default conversa diff --git a/src/Components/Languages/languagesHeader.js b/src/Components/Languages/languagesHeader.js index eea107b..095aa59 100644 --- a/src/Components/Languages/languagesHeader.js +++ b/src/Components/Languages/languagesHeader.js @@ -1,13 +1,15 @@ import React from "react" -import { View, StyleSheet, Text, TouchableOpacity } from "react-native" +import { View, StyleSheet, Text } from "react-native" +import Touchable from "react-native-platform-touchable" import { Icon } from "react-native-elements" const languagesHeader = props => { return ( - { const { navigation } = props @@ -15,8 +17,10 @@ const languagesHeader = props => { }} hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }} > - - + + + + Idiomas @@ -31,23 +35,20 @@ const styles = StyleSheet.create({ fontFamily: "OpenSans" }, headerContent: { - backgroundColor: "#fff", + flexDirection: "row", + alignContent: "center", marginBottom: 15, - marginTop: 15, - paddingLeft: 15, - marginRight: 10, - flexDirection: "row" + marginTop: 15 }, backButton: { - justifyContent: "center" + justifyContent: "center", + width: 40, + marginLeft: 10 }, languagesInfo: { - flex: 1, fontSize: 22, textAlign: "left", - backgroundColor: "#fff", - marginLeft: 20, - paddingRight: 20 + marginLeft: 10 } }) diff --git a/src/Components/PreviewImage/previewImageHeader.js b/src/Components/PreviewImage/previewImageHeader.js index 56446fa..db6f9b4 100644 --- a/src/Components/PreviewImage/previewImageHeader.js +++ b/src/Components/PreviewImage/previewImageHeader.js @@ -1,12 +1,7 @@ import React from "react" -import { - View, - StyleSheet, - Text, - TouchableOpacity, - StatusBar -} from "react-native" +import { View, StyleSheet, Text, StatusBar } from "react-native" +import Touchable from "react-native-platform-touchable" import { Icon } from "react-native-elements" const previewImageHeader = props => { @@ -17,14 +12,16 @@ const previewImageHeader = props => { - { navigation.goBack() }} hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }} > - - + + {userName} @@ -39,20 +36,20 @@ const styles = StyleSheet.create({ fontFamily: "OpenSans" }, headerContent: { - backgroundColor: "#000", marginBottom: 15, marginTop: 15, - marginRight: 10, - paddingLeft: 15, + alignContent: "center", flexDirection: "row" }, previewImageInfo: { - flex: 1, fontSize: 22, - textAlign: "left", color: "#fff", - backgroundColor: "#000", - marginLeft: 20 + marginLeft: 10 + }, + backButton: { + justifyContent: "center", + width: 40, + marginLeft: 10 } }) diff --git a/src/Components/SearchBar.js b/src/Components/SearchBar.js index 72846ef..f2e7209 100644 --- a/src/Components/SearchBar.js +++ b/src/Components/SearchBar.js @@ -1,21 +1,25 @@ import React from "react" -import { View, TextInput, StyleSheet, TouchableOpacity } from "react-native" +import { View, TextInput, StyleSheet } from "react-native" import { Icon } from "react-native-elements" +import Touchable from "react-native-platform-touchable" const Components = props => { const { onChangeText, value, onBackPressHandler } = props return ( - + - + - + + + + + { this.verLinguaOriginal() }} > - - - - - - + {nomeRemetente && ( {nomeRemetente} @@ -243,7 +245,7 @@ export default class Mensagem extends PureComponent { )} {content} - + {date} diff --git a/src/Screens/Auth/auth.js b/src/Screens/Auth/auth.js index 2b103cf..c9241ee 100644 --- a/src/Screens/Auth/auth.js +++ b/src/Screens/Auth/auth.js @@ -235,6 +235,7 @@ export default class Auth extends Component { this.confirmPhone()} disabled={notValid} + style={styles.touchable} > Enviar @@ -316,9 +317,11 @@ const styles = StyleSheet.create({ button: { height: 60, borderRadius: 20, - justifyContent: "center", + justifyContent: "center" + }, + touchable: { + marginTop: 20, marginLeft: 40, - marginRight: 40, - marginTop: 20 + marginRight: 40 } }) diff --git a/src/Screens/Contacts/contacts.js b/src/Screens/Contacts/contacts.js index a12361a..0fc9b8f 100644 --- a/src/Screens/Contacts/contacts.js +++ b/src/Screens/Contacts/contacts.js @@ -1,14 +1,8 @@ /* eslint-disable camelcase */ /* eslint-disable react-native/split-platform-components */ import React, { Component } from "react" -import { - View, - FlatList, - StyleSheet, - ToastAndroid, - TouchableOpacity -} from "react-native" -import { ListItem, Avatar } from "react-native-elements" +import { View, FlatList, StyleSheet, ToastAndroid } from "react-native" +import Contato from "~/Components/Contato/contato" import Contacts from "react-native-contacts" import AsyncStorage from "@react-native-community/async-storage" import firebase from "react-native-firebase" @@ -152,33 +146,12 @@ export default class Contatos extends Component { data={arrayholder.sort((a, b) => a.givenName.localeCompare(b))} renderItem={({ item }) => { return ( - navigation.navigate("ChatScreen", { item })} - > - 0 - ? item.phoneNumbers[0].number - : null - } - leftAvatar={ - item.contactPhoto === "" ? ( - - ) : ( - { - source: { uri: item.contactPhoto }, - size: "medium" - } - ) - } - /> - + { + navigation.navigate("ChatScreen", { item: param }) + }} + /> ) }} keyExtractor={i => i.recordID} @@ -194,9 +167,5 @@ const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#F4F5F8" - }, - contact: { - backgroundColor: "#F4F5F8", - marginBottom: 1 } }) diff --git a/src/Screens/Conversas/conversas.js b/src/Screens/Conversas/conversas.js index 40825ce..511c05f 100644 --- a/src/Screens/Conversas/conversas.js +++ b/src/Screens/Conversas/conversas.js @@ -6,16 +6,17 @@ import { StyleSheet, Text, Image, - TouchableOpacity, BackHandler, Alert, - AppState + AppState, + StatusBar } from "react-native" -import { ListItem, Icon } from "react-native-elements" +import Touchable from "react-native-platform-touchable" +import Conversa from "~/Components/Conversa/conversa" +import { Icon } from "react-native-elements" import LinearGradient from "react-native-linear-gradient" import firebase from "react-native-firebase" import AsyncStorage from "@react-native-community/async-storage" -import getTime from "~/functions/getTime" import NetInfo from "@react-native-community/netinfo" import SearchBar from "~/Components/SearchBar" @@ -252,26 +253,6 @@ export default class Conversas extends Component { navigation.navigate("ContactsScreen") } - search = () => {} - - parseTime = dateNanoScds => { - const date = dateNanoScds.toDate() - const atualDate = firebase.database().getServerTime() - let textDate = "" - if (atualDate.getDate() - date.getDate() === 0) { - textDate = getTime(date) - } else if (atualDate.getDate() - date.getDate() === 1) { - textDate = "Ontem" - } else if (atualDate.getDate() - date.getDate() >= 2) { - textDate = `${date - .getDate() - .toString()}/${date - .getMonth() - .toString()}/${date.getFullYear().toString()}` - } - return textDate - } - searchFilterFunction = text => { this.setState({ text }) const { conversas } = this.state @@ -308,7 +289,8 @@ export default class Conversas extends Component { {myName} - { this.setState({ isSerchable: true }) }} @@ -316,67 +298,41 @@ export default class Conversas extends Component { - + ) return ( + {toolbar} { return ( - { - this.goToChat(item) + { + this.goToChat(param) }} - onLongPress={() => { - this.confirmDelete(item) + onLongPress={param => { + this.confirmDelete(param) }} - > - - {item.contactName} - {item.lastMessage} - - - {this.parseTime(item.dateLastMessage)} - - {item.unreadMsgs && ( - - - {item.numUnreadMsgs} - - - )} - - - } - leftAvatar={{ - source: { uri: item.contactPhoto }, - size: "medium" - }} - /> - + /> ) }} keyExtractor={i => i.key} keyboardShouldPersistTaps="always" /> - { this.newConversa() }} > - + ) @@ -389,10 +345,6 @@ const styles = StyleSheet.create({ fontFamily: "OpenSans", backgroundColor: "#F4F5F8" }, - containerSub: { - position: "absolute", - width: "100%" - }, header: { backgroundColor: "#fff", elevation: 5, @@ -416,11 +368,6 @@ const styles = StyleSheet.create({ searchIcon: { justifyContent: "center" }, - conversa: { - width: "100%", - backgroundColor: "#E8E3E3", - marginBottom: 1 - }, button: { elevation: 5, alignItems: "center", @@ -432,35 +379,6 @@ const styles = StyleSheet.create({ bottom: 5, right: 5 }, - cont: { - width: 20, - height: 20, - borderRadius: 10, - justifyContent: "center", - marginTop: 5 - }, - data: { - fontSize: 8 - }, - unread: { - fontWeight: "bold", - fontSize: 8, - alignSelf: "center", - color: "white" - }, - rightInformation: { - position: "absolute", - alignItems: "center", - justifyContent: "center", - right: 0, - top: "50%", - bottom: "50%" - }, - lastMsg: { - marginTop: 10, - color: "#a9a9a9", - fontSize: 13 - }, myPicture: { width: 40, height: 40, diff --git a/src/Screens/EditPerfil/editperfil.js b/src/Screens/EditPerfil/editperfil.js index c5fd9ac..d6d1249 100644 --- a/src/Screens/EditPerfil/editperfil.js +++ b/src/Screens/EditPerfil/editperfil.js @@ -13,6 +13,7 @@ import { TextInput, Alert } from "react-native" +import Touchable from "react-native-platform-touchable" import AsyncStorage from "@react-native-community/async-storage" import firebase from "react-native-firebase" import LinearGradient from "react-native-linear-gradient" @@ -191,13 +192,14 @@ export default class Conversas extends Component { - - - + + Perfil @@ -234,6 +236,7 @@ export default class Conversas extends Component { Digite o email Nome {myName} - - + Email {email} - - + Telefone @@ -337,19 +342,15 @@ const styles = StyleSheet.create({ fontFamily: "OpenSans" }, headerContent: { - justifyContent: "space-between", + flexDirection: "row", alignContent: "center", marginBottom: 15, - marginTop: 15, - marginRight: 10, - paddingLeft: 15, - flexDirection: "row" + marginTop: 15 }, perfilInfo: { - flex: 1, fontSize: 22, textAlign: "left", - marginLeft: 20 + marginLeft: 10 }, editImage: { justifyContent: "center", @@ -459,7 +460,9 @@ const styles = StyleSheet.create({ backgroundColor: "#fff" }, back: { - justifyContent: "center" + justifyContent: "center", + width: 40, + marginLeft: 10 }, editNameContainer: { elevation: 6, diff --git a/src/Screens/Languages/languages.js b/src/Screens/Languages/languages.js index a1206a6..3ac8c37 100644 --- a/src/Screens/Languages/languages.js +++ b/src/Screens/Languages/languages.js @@ -5,10 +5,10 @@ import { Text, FlatList, StyleSheet, - TouchableOpacity, ToastAndroid, BackHandler } from "react-native" +import Touchable from "react-native-platform-touchable" import LanguagesHeader from "~/Components/Languages/languagesHeader" import { CheckBox } from "react-native-elements" import firebase from "react-native-firebase" @@ -105,22 +105,25 @@ export default class Languages extends Component { extraData={this.state} renderItem={({ item, index }) => { return ( - this.changeLanguage(item)} > - {item.name} - - this.changeLanguage(item)} - /> + + {item.name} + + this.changeLanguage(item)} + /> + - + ) }} /> @@ -155,11 +158,13 @@ const styles = StyleSheet.create({ paddingBottom: 10, paddingLeft: 20 }, - buttonStyle: { + touchableStyle: { backgroundColor: "#fff", + marginBottom: 2 + }, + buttonStyle: { flexDirection: "row", alignItems: "center", - marginBottom: 2, paddingLeft: 20 }, checkBoxView: { diff --git a/src/Screens/PerfilSettings/perfilsettings.js b/src/Screens/PerfilSettings/perfilsettings.js index 6ffefc8..211551f 100644 --- a/src/Screens/PerfilSettings/perfilsettings.js +++ b/src/Screens/PerfilSettings/perfilsettings.js @@ -10,8 +10,8 @@ import { StyleSheet, Dimensions, BackHandler, - KeyboardAvoidingView, ActivityIndicator, + ScrollView, Keyboard, Alert } from "react-native" @@ -142,7 +142,7 @@ export default class PerfilSettings extends Component { const { language, code, img, disabled, uploading } = this.state return ( - + Configurações de Perfil Email: this.setState({ eMail: text })} placeholder="Digite seu e-mail" @@ -214,7 +215,7 @@ export default class PerfilSettings extends Component { Cadastrar - + ) } } diff --git a/src/Screens/Verification/verification.js b/src/Screens/Verification/verification.js index 5bac6ad..f43aae9 100644 --- a/src/Screens/Verification/verification.js +++ b/src/Screens/Verification/verification.js @@ -86,7 +86,10 @@ export default class Verificacao extends Component { }} /> - this.submitCode()}> + this.submitCode()} + > Verificar @@ -128,8 +131,6 @@ const styles = StyleSheet.create({ fontWeight: "bold" }, button: { - marginLeft: 40, - marginRight: 40, height: 60, borderRadius: 20, justifyContent: "center" @@ -142,5 +143,9 @@ const styles = StyleSheet.create({ alignSelf: "center", fontSize: 25, color: "white" + }, + touchable: { + marginLeft: 40, + marginRight: 40 } })