Implemented Chat Screen

nativebase · Jan 22, 2021 · bcc6d3b · bcc6d3b
1 parent bc50ed2
commit bcc6d3b
Show file tree

Hide file tree

Showing 9 changed files with 380 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -8,24 +8,25 @@
     "eject": "expo eject"
   },
   "dependencies": {
+    "@react-native-community/masked-view": "0.1.10",
     "@react-navigation/drawer": "^5.11.5",
     "@react-navigation/native": "^5.9.0",
     "expo": "~40.0.0",
     "expo-status-bar": "~1.0.3",
     "native-base": "^3.0.0-next.11",
+    "prop-types": "^15.7.2",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
+    "react-native-gesture-handler": "~1.8.0",
+    "react-native-reanimated": "~1.13.0",
+    "react-native-safe-area-context": "3.1.9",
+    "react-native-screens": "~2.15.0",
     "react-native-svg": "^12.1.0",
     "react-native-vector-icons": "^8.0.0",
     "react-native-web": "~0.13.12",
     "styled-components": "^5.2.1",
-    "styled-system": "^5.1.5",
-    "react-native-gesture-handler": "~1.8.0",
-    "react-native-reanimated": "~1.13.0",
-    "react-native-screens": "~2.15.0",
-    "react-native-safe-area-context": "3.1.9",
-    "@react-native-community/masked-view": "0.1.10"
+    "styled-system": "^5.1.5"
   },
   "devDependencies": {
     "@babel/core": "~7.9.0",

diff --git a/screens/ProfileScreen/ChatImage.js b/screens/ProfileScreen/ChatImage.js
diff --git a/screens/ProfileScreen/ChatLeft.js b/screens/ProfileScreen/ChatLeft.js
@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Box,
+  HStack,
+  Text,
+  Icon,
+  Slider,
+  SliderTrack,
+  SliderFilledTrack,
+  SliderThumb,
+} from 'native-base';
+
+export default function ChatLeft({ chat }) {
+  return (
+    <>
+      {chat === 'text' ? (
+        <Box alignItems={'flex-start'} mb={5}>
+          <HStack
+            w={'85%'}
+            justifyContent={'flex-start'}
+            alignItems={'flex-end'}
+          >
+            <Box
+              bg={'bg.500'}
+              pl={5}
+              pr={7}
+              pt={4}
+              pb={4}
+              borderRightRadius={35}
+              borderTopLeftRadius={30}
+              color={'black'}
+              fontWeight={'300'}
+            >
+              What does mean by IDK and TTYL?
+            </Box>
+            <Text fontSize={10}>6:30 AM</Text>
+          </HStack>
+        </Box>
+      ) : (
+        <Box mb={5} alignItems={'flex-start'}>
+          <HStack
+            w={'85%'}
+            alignItems={'flex-end'}
+            justifyContent={'flex-start'}
+          >
+            <Box
+              bg={'bg.500'}
+              pl={5}
+              pr={7}
+              pt={4}
+              pb={4}
+              borderRightRadius={35}
+              borderTopLeftRadius={30}
+              flexDirection='row'
+              alignItems={'center'}
+            >
+              <Box w={'15%'}>
+                <Box
+                  w={6}
+                  h={6}
+                  bg={'bg.100'}
+                  borderRadius={30}
+                  justifyContent={'center'}
+                  alignItems={'center'}
+                >
+                  <Icon type='Ionicons' name='pause' color={'white'} size={4} />
+                </Box>
+              </Box>
+              <Box w={'85%'} justifyContent={'center'}>
+                <Slider defaultValue={45} colorScheme='red.200'>
+                  <SliderTrack bg='bg.600'>
+                    <SliderFilledTrack bg='bg.700' />
+                  </SliderTrack>
+                  <SliderThumb />
+                </Slider>
+              </Box>
+            </Box>
+            <Text fontSize={10}>10:30 AM</Text>
+          </HStack>
+        </Box>
+      )}
+    </>
+  );
+}
+ChatLeft.propTypes = {
+  chat: PropTypes.string,
+};
diff --git a/screens/ProfileScreen/ChatRight.js b/screens/ProfileScreen/ChatRight.js
@@ -0,0 +1,82 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Box,
+  HStack,
+  Text,
+  Icon,
+  Slider,
+  SliderTrack,
+  SliderFilledTrack,
+  SliderThumb,
+} from 'native-base';
+
+export default function ChatRight({ chat }) {
+  return (
+    <>
+      {chat === 'text' ? (
+        <Box alignItems={'flex-end'} mb={5}>
+          <HStack w={'85%'} justifyContent={'flex-end'} alignItems={'flex-end'}>
+            <Text fontSize={10}>6:30 AM</Text>
+            <Box
+              bg={'bg.600'}
+              pl={7}
+              pr={5}
+              pt={4}
+              pb={4}
+              borderLeftRadius={35}
+              borderTopRightRadius={30}
+              color={'white'}
+              fontWeight={'300'}
+            >
+              What does mean by IDK and TTYL? mean by IDK and TTYL? mean by IDK
+              and TTYL?
+            </Box>
+          </HStack>
+        </Box>
+      ) : (
+        <Box mb={5} alignItems={'flex-end'}>
+          <HStack w={'85%'} alignItems={'flex-end'} justifyContent={'flex-end'}>
+            <Text fontSize={10}>6:30 AM</Text>
+            <Box
+              bg={'bg.600'}
+              pl={7}
+              pr={5}
+              pt={4}
+              pb={4}
+              borderLeftRadius={35}
+              borderTopRightRadius={30}
+              flexDirection='row'
+              alignItems={'center'}
+            >
+              <Box w={'15%'}>
+                <Box
+                  w={6}
+                  h={6}
+                  bg={'white'}
+                  borderRadius={30}
+                  justifyContent={'center'}
+                  alignItems={'center'}
+                >
+                  <Icon type='Ionicons' name='play' color={'bg.100'} size={4} />
+                </Box>
+              </Box>
+              <Box w={'85%'} justifyContent={'center'}>
+                <Slider defaultValue={0} colorScheme='bg.200'>
+                  <SliderTrack>
+                    <SliderFilledTrack bg='bg.800' />
+                  </SliderTrack>
+                  <SliderThumb />
+                </Slider>
+              </Box>
+            </Box>
+          </HStack>
+        </Box>
+      )}
+    </>
+  );
+}
+
+ChatRight.propTypes = {
+  chat: PropTypes.string,
+};
diff --git a/screens/ProfileScreen/Content.js b/screens/ProfileScreen/Content.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { ScrollView } from 'react-native';
+import { Box, VStack } from 'native-base';
+
+import ChatImage from './ChatImage';
+import ChatLeft from './ChatLeft';
+import ChatRight from './ChatRight';
+
+export default function Content() {
+  return (
+    <Box flex={7} bg={'white'} borderRadius={20}>
+      <ScrollView>
+        <VStack bg={'white'} pl={2} pr={2} pt={5} pb={2}>
+          <ChatLeft chat={'text'} />
+          <ChatRight chat={'text'} />
+          <ChatImage />
+          <ChatRight chat={'audio'} />
+          <ChatLeft chat={'audio'} />
+        </VStack>
+      </ScrollView>
+    </Box>
+  );
+}
diff --git a/screens/ProfileScreen/Footer.js b/screens/ProfileScreen/Footer.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import { Box, Icon, Input } from 'native-base';
+
+export default function Footer() {
+  return (
+    <Box
+      flex={1.3}
+      bg={'white'}
+      borderTopRadius={30}
+      borderBottomRadius={20}
+      shadow={5}
+    >
+      <Box
+        pl={5}
+        pr={5}
+        mt={'auto'}
+        mb={'auto'}
+        justifyContent={'space-between'}
+        alignItems={'center'}
+        flexDirection={'row'}
+      >
+        <Box
+          w={9}
+          h={9}
+          shadow={1}
+          bg={'white'}
+          justifyContent={'center'}
+          alignItems={'center'}
+          borderRadius={20}
+          borderColor={'#DEF3FE'}
+        >
+          <Icon type='Ionicons' name='attach' color={'black'} size={6} />
+        </Box>
+        <Input
+          variant='rounded'
+          w='70%'
+          type={'text'}
+          InputRightElement={
+            <Box pl={3} mr={4}>
+              <Icon type='Feather' name='smile' color={'black'} size={5} />
+            </Box>
+          }
+          placeholder='Type your message...'
+          borderColor={'bg.400'}
+          backgroundColor={'bg.400'}
+        />
+        <Box
+          w={9}
+          h={9}
+          shadow={1}
+          bg={'white'}
+          justifyContent={'center'}
+          alignItems={'center'}
+          borderRadius={20}
+          borderColor={'#DEF3FE'}
+        >
+          <Icon type='Ionicons' name='mic' color={'black'} size={5} />
+        </Box>
+      </Box>
+    </Box>
+  );
+}
diff --git a/screens/ProfileScreen/Header.js b/screens/ProfileScreen/Header.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import { Box, HStack, Icon, Text, Avatar } from 'native-base';
+
+export default function Header() {
+  return (
+    <Box flex={1.4} bg={'bg.100'} borderRadius={20}>
+      <HStack
+        pl={5}
+        pr={5}
+        mt={'auto'}
+        mb={'auto'}
+        justifyContent={'space-between'}
+      >
+        <HStack alignItems={'center'}>
+          <Box mr={1}>
+            <Icon
+              type='Entypo'
+              name='chevron-small-left'
+              color={'white'}
+              size={7}
+            />
+          </Box>
+
+          <Avatar
+            name='Abc'
+            source={{
+              uri:
+                'https://pbs.twimg.com/profile_images/1177303899243343872/B0sUJIH0_400x400.jpg',
+            }}
+            borderColor={'white'}
+            borderWidth={1}
+            size={'sm'}
+          />
+          <Text pl={2} fontSize={18} color={'white'} fontWeight={'500'}>
+            Zunaid
+          </Text>
+        </HStack>
+
+        <HStack justifyContent={'space-between'}>
+          <Box pr={2}>
+            <Icon type='FontAwesome' name='phone' color={'white'} size={5} />
+          </Box>
+          <Box pl={2}>
+            <Icon type='Entypo' name='video-camera' color={'white'} size={5} />
+          </Box>
+          <Box pl={2}>
+            <Icon
+              type='Entypo'
+              name='dots-three-vertical'
+              color={'white'}
+              size={5}
+            />
+          </Box>
+        </HStack>
+      </HStack>
+    </Box>
+  );
+}
diff --git a/screens/ProfileScreen/index.js b/screens/ProfileScreen/index.js
@@ -1,13 +1,20 @@
 import React from 'react';
-import { SafeAreaView, ScrollView } from 'react-native';
-
+import { SafeAreaView } from 'react-native';
 import { Box } from 'native-base';
 
+import Header from './Header';
+import Footer from './Footer';
+import Content from './Content';
+
 export default function Index() {
   return (
     <SafeAreaView flex={1}>
       <Box flex={1} p={3} pt={5} bg={'white'}>
-        <Box flex={1} bg={'bg.100'} borderRadius={20}></Box>
+        <Box flex={1} bg={'white'} borderRadius={20} shadow={5}>
+          <Header />
+          <Content />
+          <Footer />
+        </Box>
       </Box>
     </SafeAreaView>
   );

diff --git a/utils/colorTheme.js b/utils/colorTheme.js
@@ -3,5 +3,10 @@ export const newColorTheme = {
     100: '#005A86',
     200: '#DFF3FF',
     300: '#CBDEEB',
+    400: '#DFF3FF',
+    500: '#F2F2F2',
+    600: '#008DD6',
+    700: '#60BFED',
+    800: '#61C0EE',
   },
 };