From 2d83d11558fd19c18fba4042c94657c3ef9f0bb5 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Mon, 12 Apr 2021 17:28:38 -0400 Subject: added icons, fixed picker almost --- src/App.tsx | 10 ++-- src/assets/images/camera.png | Bin 0 -> 99285 bytes src/assets/images/gif.png | Bin 0 -> 103397 bytes src/components/messages/ChatInput.tsx | 81 ++++++++++++++++++++++------ src/components/messages/ChatInputSubmit.tsx | 5 +- src/components/profile/Content.tsx | 16 ++---- src/screens/chat/ChatScreen.tsx | 58 ++++++++++---------- 7 files changed, 107 insertions(+), 63 deletions(-) create mode 100644 src/assets/images/camera.png create mode 100644 src/assets/images/gif.png (limited to 'src') diff --git a/src/App.tsx b/src/App.tsx index 217f0627..8d823e1f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,6 +2,7 @@ import {NavigationContainer} from '@react-navigation/native'; import React, {useState} from 'react'; import {Provider} from 'react-redux'; import {StreamChat} from 'stream-chat'; +import {OverlayProvider} from 'stream-chat-react-native'; import {STREAM_CHAT_API} from './constants'; import {navigationRef} from './RootNavigation'; import Routes from './routes'; @@ -17,6 +18,7 @@ import { LocalResponseType, LocalUserType, } from './types'; +import {isIPhoneX} from './utils'; export const ChatContext = React.createContext({} as ChatContextType); @@ -37,9 +39,11 @@ const App = () => { */ - - - + + + + + ); diff --git a/src/assets/images/camera.png b/src/assets/images/camera.png new file mode 100644 index 00000000..16dbeb3a Binary files /dev/null and b/src/assets/images/camera.png differ diff --git a/src/assets/images/gif.png b/src/assets/images/gif.png new file mode 100644 index 00000000..f3d11a0c Binary files /dev/null and b/src/assets/images/gif.png differ diff --git a/src/components/messages/ChatInput.tsx b/src/components/messages/ChatInput.tsx index a73d4869..2b49295b 100644 --- a/src/components/messages/ChatInput.tsx +++ b/src/components/messages/ChatInput.tsx @@ -1,11 +1,14 @@ import React from 'react'; -import {Image, StyleSheet, TextInput, View} from 'react-native'; +import {Image, StyleSheet, View} from 'react-native'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import ImagePicker from 'react-native-image-crop-picker'; import {useStore} from 'react-redux'; import { + AutoCompleteInput, MessageInputProps, + useAttachmentPickerContext, useMessageInputContext, } from 'stream-chat-react-native'; -import {ChatInputSubmit} from '../messages'; import {RootState} from '../../store/rootReducer'; import { LocalAttachmentType, @@ -16,6 +19,8 @@ import { LocalReactionType, LocalUserType, } from '../../types'; +import {normalize} from '../../utils'; +import {ChatInputSubmit} from '../messages'; const ChatInput: React.FC< MessageInputProps< @@ -30,7 +35,35 @@ const ChatInput: React.FC< > = () => { const state: RootState = useStore().getState(); const avatar = state.user.avatar; - const {sendMessage, setText, text} = useMessageInputContext(); + const {sendMessage, text, setText, uploadNewImage} = useMessageInputContext(); + const { + setSelectedImages, + selectedImages, + openPicker, + } = useAttachmentPickerContext(); + + const selectImage = () => { + ImagePicker.openPicker({ + cropping: true, + freeStyleCropEnabled: true, + mediaType: 'photo', + multiple: true, + // includeBase64: true, + }) + .then((pictures) => { + pictures.map((pic) => + uploadNewImage({ + width: pic.width, + height: pic.height, + source: 'picker', + uri: 'ph://' + pic.localIdentifier, + }), + ); + }) + .catch((error) => { + console.log(error); + }); + }; return ( @@ -43,15 +76,23 @@ const ChatInput: React.FC< : require('../../assets/images/avatar-placeholder.png') } /> - - + + + {/* */} + + + + setText('/')}> + + + + ); @@ -77,17 +118,27 @@ const styles = StyleSheet.create({ marginHorizontal: '1%', }, avatar: { - height: 35, - width: 35, + height: normalize(30), + width: normalize(30), borderRadius: 30, marginRight: 10, marginLeft: '3%', - marginVertical: '2%', + marginVertical: 5, alignSelf: 'flex-end', }, whiteBackround: { backgroundColor: '#fff', }, + actionButtons: { + height: normalize(30) + 10, + flexDirection: 'row', + justifyContent: 'space-evenly', + alignItems: 'center', + marginRight: 10, + width: 100, + alignSelf: 'flex-end', + // borderWidth: 1, + }, }); export default ChatInput; diff --git a/src/components/messages/ChatInputSubmit.tsx b/src/components/messages/ChatInputSubmit.tsx index 6180ef20..9e29ad4d 100644 --- a/src/components/messages/ChatInputSubmit.tsx +++ b/src/components/messages/ChatInputSubmit.tsx @@ -9,7 +9,7 @@ interface ChatInputSubmitProps { onPress: () => void; } -const SIZE = normalize(30); +const SIZE = normalize(25); const ChatInputSubmit: React.FC = (props) => { const {outlined, onPress} = props; @@ -36,9 +36,6 @@ const styles = StyleSheet.create({ borderRadius: 999, justifyContent: 'center', alignItems: 'center', - marginRight: '3%', - marginVertical: '2%', - alignSelf: 'flex-end', }, background: { backgroundColor: TAGG_LIGHT_BLUE, diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx index 0052b61d..c70d6df5 100644 --- a/src/components/profile/Content.tsx +++ b/src/components/profile/Content.tsx @@ -1,14 +1,9 @@ -import React, { - useCallback, - useContext, - useEffect, - useRef, - useState, -} from 'react'; +import {useScrollToTop} from '@react-navigation/native'; +import React, {useCallback, useEffect, useRef, useState} from 'react'; import {LayoutChangeEvent, RefreshControl, StyleSheet} from 'react-native'; import Animated, { - useSharedValue, useAnimatedScrollHandler, + useSharedValue, } from 'react-native-reanimated'; import {useDispatch, useSelector, useStore} from 'react-redux'; import { @@ -36,8 +31,6 @@ import ProfileBody from './ProfileBody'; import ProfileCutout from './ProfileCutout'; import ProfileHeader from './ProfileHeader'; import PublicProfile from './PublicProfile'; -import {useScrollToTop} from '@react-navigation/native'; -import {ChatContext} from '../../App'; interface ContentProps { userXId: string | undefined; @@ -59,8 +52,6 @@ const Content: React.FC = ({userXId, screenType}) => { ); const state: RootState = useStore().getState(); - const {chatClient} = useContext(ChatContext); - /* * Used to imperatively scroll to the top when presenting the moment tutorial. */ @@ -77,7 +68,6 @@ const Content: React.FC = ({userXId, screenType}) => { const [isBlocked, setIsBlocked] = useState(false); const [profileBodyHeight, setProfileBodyHeight] = useState(0); const [socialsBarHeight, setSocialsBarHeight] = useState(0); - const [shouldBounce, setShouldBounce] = useState(true); const [refreshing, setRefreshing] = useState(false); const onRefresh = useCallback(() => { diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index 02330527..9e75c581 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -1,6 +1,6 @@ import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; import {StackNavigationProp} from '@react-navigation/stack'; -import React, {useContext} from 'react'; +import React, {useContext, useEffect} from 'react'; import {StyleSheet} from 'react-native'; import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context'; import { @@ -8,10 +8,10 @@ import { Chat, MessageInput, MessageList, - OverlayProvider, + useAttachmentPickerContext, } from 'stream-chat-react-native'; import {ChatContext} from '../../App'; -import {ChatInput, ChatHeader} from '../../components'; +import {ChatHeader, ChatInput} from '../../components'; import {TAGG_LIGHT_BLUE} from '../../constants'; import {MainStackParams} from '../../routes'; import {ScreenType} from '../../types'; @@ -27,6 +27,7 @@ interface ChatScreenProps { const ChatScreen: React.FC = () => { const {channel, chatClient} = useContext(ChatContext); const tabbarHeight = useBottomTabBarHeight(); + const {setTopInset} = useAttachmentPickerContext(); const insets = useSafeAreaInsets(); const chatTheme = { @@ -37,32 +38,33 @@ const ChatScreen: React.FC = () => { }, }; + useEffect(() => { + setTopInset(insets.top + HeaderHeight); + }); + return ( - - - - - null} - messageActions={({copyMessage, deleteMessage}) => [ - copyMessage, - deleteMessage, - ]}> - {}} /> - - - - - + + + + null} + messageActions={({copyMessage, deleteMessage}) => [ + copyMessage, + deleteMessage, + ]}> + {}} /> + {/* */} + + + + ); }; -- cgit v1.2.3-70-g09d2