New logo (#19)

* Change to logo in initial screens. * add logo in home header. * fix styles.
NachoRaik · Jul 2, 2020 · 467e375 · 467e375
1 parent 4370060
commit 467e375
Show file tree

Hide file tree

Showing 10 changed files with 24 additions and 42 deletions.
diff --git a/src/app/assets/tutubo-03.png b/src/app/assets/tutubo-03.png
diff --git a/src/app/index.js b/src/app/index.js
@@ -1,9 +1,11 @@
 import 'react-native-gesture-handler';
 import React from 'react';
+import { Image } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
+import logo from '@assets/tutubo-03.png';
 import { ROUTES } from '@constants/routes';
 import { COLORS } from '@constants/colors';
 import LoginScreen from '@screens/LoginScreen';
@@ -30,6 +32,13 @@ function WallStackScreen() {
         name={ROUTES.Home}
         component={TabNavigatorScreen}
         options={({ navigation }) => ({
+          headerTitle: () => (
+            <Image
+              style={{ width: 120, marginTop: 5 }}
+              source={logo}
+              resizeMode="contain"
+            />
+          ),
           headerRightContainerStyle: { flexDirection: 'row' },
           headerRight: () => <HeaderButtons navigation={navigation} />
         })}
@@ -74,7 +83,6 @@ function TabNavigatorScreen() {
         name={ROUTES.Wall}
         component={HomeScreen}
         options={{
-          title: 'Muro',
           tabBarIcon: ({ focused, size }) => (
             <TabBarIcon name="md-home" focused={focused} size={size} />
           )
@@ -84,7 +92,6 @@ function TabNavigatorScreen() {
         name={ROUTES.ChatList}
         component={ChatListScreen}
         options={{
-          title: 'Chats',
           tabBarIcon: ({ focused, size }) => (
             <TabBarIcon name="md-chatbubbles" focused={focused} size={size} />
           )

diff --git a/src/app/screens/ChatListScreen/index.js b/src/app/screens/ChatListScreen/index.js
@@ -24,17 +24,6 @@ function ChatListScreen({ navigation }) {
   const [chats, setChats] = useState([]);
   const [openModal, setOpenModal] = useState(false);
 
-  useFocusEffect(
-    useCallback(() => {
-      const stackNavigator = navigation.dangerouslyGetParent();
-      if (stackNavigator) {
-        stackNavigator.setOptions({
-          title: 'Chats'
-        });
-      }
-    }, [navigation])
-  );
-
   const updateChats = useCallback((chat) => {
     setChats((prevChats) => {
       const copy = [...prevChats];

diff --git a/src/app/screens/HomeScreen/index.js b/src/app/screens/HomeScreen/index.js
@@ -11,17 +11,6 @@ import styles from './styles';
 function HomeScreen({ navigation }) {
   const dispatch = useDispatch();
 
-  useFocusEffect(
-    useCallback(() => {
-      const stackNavigator = navigation.dangerouslyGetParent();
-      if (stackNavigator) {
-        stackNavigator.setOptions({
-          title: 'Muro'
-        });
-      }
-    }, [navigation])
-  );
-
   const videos = useSelector((state) => state.videos.videos);
   const videosLoading = useSelector((state) => state.videos.loading);
 

diff --git a/src/app/screens/InitialLoading/index.js b/src/app/screens/InitialLoading/index.js
@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
-import { SafeAreaView, ActivityIndicator, Text } from 'react-native';
+import { SafeAreaView, ActivityIndicator, Image } from 'react-native';
 
+import logo from '@assets/tutubo-03.png';
 import { ROUTES } from '@constants/routes';
 import { COLORS } from '@constants/colors';
 import actionCreator from '@redux/auth/actions';
@@ -27,7 +28,7 @@ function InitialLoading({ navigation }) {
 
   return (
     <SafeAreaView style={styles.container}>
-      <Text style={styles.title}>Tu2bo</Text>
+      <Image style={styles.logo} source={logo} resizeMode="contain" />
       <ActivityIndicator size="large" color={COLORS.main} />
     </SafeAreaView>
   );

diff --git a/src/app/screens/InitialLoading/styles.js b/src/app/screens/InitialLoading/styles.js
@@ -8,10 +8,8 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     backgroundColor: COLORS.white
   },
-  title: {
-    fontSize: 40,
-    fontWeight: 'bold',
-    color: COLORS.main,
+  logo: {
+    width: 220,
     marginBottom: 30
   }
 });

diff --git a/src/app/screens/LoginScreen/index.js b/src/app/screens/LoginScreen/index.js
@@ -1,7 +1,8 @@
 import React, { useCallback, useState, useEffect } from 'react';
-import { View, SafeAreaView, TextInput, Text } from 'react-native';
+import { View, SafeAreaView, TextInput, Text, Image } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 
+import logo from '@assets/tutubo-03.png';
 import CustomButton from '@components/CustomButton';
 import { ROUTES } from '@constants/routes';
 import { COLORS } from '@constants/colors';
@@ -51,7 +52,7 @@ function LoginScreen({ navigation }) {
 
   return (
     <SafeAreaView style={styles.container}>
-      <Text style={styles.title}>Tu2bo</Text>
+      <Image style={styles.logo} source={logo} resizeMode="contain" />
       <View styles={styles.loginContainer}>
         <TextInput
           style={styles.input}

diff --git a/src/app/screens/LoginScreen/styles.js b/src/app/screens/LoginScreen/styles.js
@@ -8,10 +8,8 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     backgroundColor: COLORS.white
   },
-  title: {
-    fontSize: 40,
-    fontWeight: 'bold',
-    color: COLORS.main,
+  logo: {
+    width: 220,
     marginBottom: 30
   },
   loginContainer: {

diff --git a/src/app/screens/SignUpScreen/index.js b/src/app/screens/SignUpScreen/index.js
@@ -1,7 +1,8 @@
 import React, { useCallback, useState, useEffect } from 'react';
-import { View, SafeAreaView, TextInput, Text } from 'react-native';
+import { View, SafeAreaView, TextInput, Text, Image } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 
+import logo from '@assets/tutubo-03.png';
 import CustomButton from '@components/CustomButton';
 import { ROUTES } from '@constants/routes';
 import { COLORS } from '@constants/colors';
@@ -58,7 +59,7 @@ function SignUpScreen({ navigation }) {
         visible={openModal}
         onPress={onCloseModal}
       />
-      <Text style={styles.title}>Tu2bo</Text>
+      <Image style={styles.logo} source={logo} resizeMode="contain" />
       <View styles={styles.loginContainer}>
         <TextInput
           style={styles.input}

diff --git a/src/app/screens/SignUpScreen/styles.js b/src/app/screens/SignUpScreen/styles.js
@@ -8,10 +8,8 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     backgroundColor: COLORS.white
   },
-  title: {
-    fontSize: 40,
-    fontWeight: 'bold',
-    color: COLORS.main,
+  logo: {
+    width: 220,
     marginBottom: 30
   },
   loginContainer: {