aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/App.tsx10
-rw-r--r--src/assets/images/camera.pngbin0 -> 99285 bytes
-rw-r--r--src/assets/images/gif.pngbin0 -> 103397 bytes
-rw-r--r--src/components/messages/ChatInput.tsx81
-rw-r--r--src/components/messages/ChatInputSubmit.tsx5
-rw-r--r--src/components/profile/Content.tsx16
-rw-r--r--src/screens/chat/ChatScreen.tsx58
7 files changed, 107 insertions, 63 deletions
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 = () => {
*/
<Provider store={store}>
<NavigationContainer ref={navigationRef}>
- <ChatContext.Provider value={{channel, setChannel, chatClient}}>
- <Routes />
- </ChatContext.Provider>
+ <OverlayProvider bottomInset={isIPhoneX() ? 80 : 50}>
+ <ChatContext.Provider value={{channel, setChannel, chatClient}}>
+ <Routes />
+ </ChatContext.Provider>
+ </OverlayProvider>
</NavigationContainer>
</Provider>
);
diff --git a/src/assets/images/camera.png b/src/assets/images/camera.png
new file mode 100644
index 00000000..16dbeb3a
--- /dev/null
+++ b/src/assets/images/camera.png
Binary files differ
diff --git a/src/assets/images/gif.png b/src/assets/images/gif.png
new file mode 100644
index 00000000..f3d11a0c
--- /dev/null
+++ b/src/assets/images/gif.png
Binary files 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 (
<View style={styles.container}>
@@ -43,15 +76,23 @@ const ChatInput: React.FC<
: require('../../assets/images/avatar-placeholder.png')
}
/>
- <TextInput
- style={styles.text}
- placeholder={'Message...'}
- placeholderTextColor="grey"
- multiline={true}
- value={text}
- onChangeText={setText}
- />
- <ChatInputSubmit onPress={sendMessage} outlined={text.length === 0} />
+ <AutoCompleteInput />
+ <View style={styles.actionButtons}>
+ {/* <TouchableOpacity onPress={openPicker}> */}
+ <TouchableOpacity onPress={selectImage}>
+ <Image
+ style={{width: normalize(23), height: normalize(23)}}
+ source={require('../../assets/images/camera.png')}
+ />
+ </TouchableOpacity>
+ <TouchableOpacity onPress={() => setText('/')}>
+ <Image
+ style={{width: normalize(23), height: normalize(23)}}
+ source={require('../../assets/images/gif.png')}
+ />
+ </TouchableOpacity>
+ <ChatInputSubmit onPress={sendMessage} outlined={text.length === 0} />
+ </View>
</View>
</View>
);
@@ -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<ChatInputSubmitProps> = (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<ContentProps> = ({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<ContentProps> = ({userXId, screenType}) => {
const [isBlocked, setIsBlocked] = useState<boolean>(false);
const [profileBodyHeight, setProfileBodyHeight] = useState(0);
const [socialsBarHeight, setSocialsBarHeight] = useState(0);
- const [shouldBounce, setShouldBounce] = useState<boolean>(true);
const [refreshing, setRefreshing] = useState<boolean>(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<ChatScreenProps> = () => {
const {channel, chatClient} = useContext(ChatContext);
const tabbarHeight = useBottomTabBarHeight();
+ const {setTopInset} = useAttachmentPickerContext();
const insets = useSafeAreaInsets();
const chatTheme = {
@@ -37,32 +38,33 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
},
};
+ useEffect(() => {
+ setTopInset(insets.top + HeaderHeight);
+ });
+
return (
- <OverlayProvider
- bottomInset={isIPhoneX() ? 80 : 50}
- topInset={insets.top + HeaderHeight}>
- <SafeAreaView
- style={[
- styles.container,
- // unable to figure out the padding issue, a hacky solution
- {paddingBottom: isIPhoneX() ? tabbarHeight + 20 : tabbarHeight + 50},
- ]}>
- <ChatHeader screenType={ScreenType.Chat} />
- <Chat client={chatClient} style={chatTheme}>
- <Channel
- channel={channel}
- keyboardVerticalOffset={0}
- OverlayReactionList={() => null}
- messageActions={({copyMessage, deleteMessage}) => [
- copyMessage,
- deleteMessage,
- ]}>
- <MessageList onThreadSelect={() => {}} />
- <MessageInput Input={ChatInput} />
- </Channel>
- </Chat>
- </SafeAreaView>
- </OverlayProvider>
+ <SafeAreaView
+ style={[
+ styles.container,
+ // unable to figure out the padding issue, a hacky solution
+ {paddingBottom: isIPhoneX() ? tabbarHeight + 20 : tabbarHeight + 50},
+ ]}>
+ <ChatHeader screenType={ScreenType.Chat} />
+ <Chat client={chatClient} style={chatTheme}>
+ <Channel
+ channel={channel}
+ keyboardVerticalOffset={0}
+ OverlayReactionList={() => null}
+ messageActions={({copyMessage, deleteMessage}) => [
+ copyMessage,
+ deleteMessage,
+ ]}>
+ <MessageList onThreadSelect={() => {}} />
+ {/* <MessageInput /> */}
+ <MessageInput Input={ChatInput} />
+ </Channel>
+ </Chat>
+ </SafeAreaView>
);
};
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 13:15:33 +0000