aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/common/BottomDrawer.tsx5
-rw-r--r--src/components/search/SearchBar.tsx2
-rw-r--r--src/screens/chat/ChatResultsCell.tsx4
-rw-r--r--src/screens/chat/ChatSearchBar.tsx28
-rw-r--r--src/screens/chat/NewChatModal.tsx19
5 files changed, 20 insertions, 38 deletions
diff --git a/src/components/common/BottomDrawer.tsx b/src/components/common/BottomDrawer.tsx
index 988c1e79..3d9c0471 100644
--- a/src/components/common/BottomDrawer.tsx
+++ b/src/components/common/BottomDrawer.tsx
@@ -6,7 +6,7 @@ import {
View,
ViewProps,
} from 'react-native';
-import Animated, {interpolateColors} from 'react-native-reanimated';
+import Animated, {interpolateColors, useValue} from 'react-native-reanimated';
import BottomSheet from 'reanimated-bottom-sheet';
import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
@@ -23,7 +23,7 @@ const BottomDrawer: React.FC<BottomDrawerProps> = (props) => {
const {isOpen, setIsOpen, showHeader, initialSnapPosition} = props;
const drawerRef = useRef<BottomSheet>(null);
const [modalVisible, setModalVisible] = useState(isOpen);
- const bgAlpha = new Animated.Value(isOpen ? 1 : 0);
+ const bgAlpha = useValue(isOpen ? 1 : 0);
useEffect(() => {
if (isOpen) {
@@ -54,6 +54,7 @@ const BottomDrawer: React.FC<BottomDrawerProps> = (props) => {
inputRange: [0, 1],
outputColorRange: ['rgba(0,0,0,0.3)', 'rgba(0,0,0,0)'],
});
+
return (
<Modal
transparent
diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index d441b07b..ea36d58b 100644
--- a/src/components/search/SearchBar.tsx
+++ b/src/components/search/SearchBar.tsx
@@ -128,7 +128,7 @@ const SearchBar: React.FC<SearchBarProps> = ({
style={styles.searchIcon}
/>
<TextInput
- style={[styles.input]}
+ style={styles.input}
placeholderTextColor={'#828282'}
onSubmitEditing={handleSubmit}
clearButtonMode="always"
diff --git a/src/screens/chat/ChatResultsCell.tsx b/src/screens/chat/ChatResultsCell.tsx
index d947c122..e1eb97dd 100644
--- a/src/screens/chat/ChatResultsCell.tsx
+++ b/src/screens/chat/ChatResultsCell.tsx
@@ -12,7 +12,7 @@ import {defaultUserProfile} from '../../utils/users';
interface ChatResults {
profileData: ProfilePreviewType;
loggedInUser: UserType;
- setChatModalVisible: Function;
+ setChatModalVisible: (open: boolean) => void;
}
const ChatResultsCell: React.FC<ChatResults> = ({
@@ -47,7 +47,7 @@ const ChatResultsCell: React.FC<ChatResults> = ({
setChannel(channel);
setTimeout(() => {
navigation.navigate('Chat');
- }, 100);
+ }, 250);
} catch (error) {
Alert.alert(ERROR_FAILED_TO_CREATE_CHANNEL);
}
diff --git a/src/screens/chat/ChatSearchBar.tsx b/src/screens/chat/ChatSearchBar.tsx
index d8aff567..3531111b 100644
--- a/src/screens/chat/ChatSearchBar.tsx
+++ b/src/screens/chat/ChatSearchBar.tsx
@@ -9,14 +9,12 @@ import {
TextInputSubmitEditingEventData,
TouchableOpacity,
View,
- ViewStyle,
} from 'react-native';
import {normalize} from 'react-native-elements';
-import Animated, {useAnimatedStyle} from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
interface SearchBarProps extends TextInputProps {
onCancel: () => void;
- animationProgress: Animated.SharedValue<number>;
searching: boolean;
placeholder: string;
}
@@ -26,7 +24,6 @@ const ChatSearchBar: React.FC<SearchBarProps> = ({
onChangeText,
value,
onCancel,
- animationProgress,
onLayout,
placeholder,
}) => {
@@ -37,14 +34,6 @@ const ChatSearchBar: React.FC<SearchBarProps> = ({
Keyboard.dismiss();
};
- /*
- * On-search marginRight style ("cancel" button slides and fades in).
- */
- const animatedStyles = useAnimatedStyle<ViewStyle>(() => ({
- marginRight: animationProgress.value * 58,
- opacity: animationProgress.value,
- }));
-
return (
<View style={styles.container} onLayout={onLayout}>
<Animated.View style={styles.inputContainer}>
@@ -61,11 +50,9 @@ const ChatSearchBar: React.FC<SearchBarProps> = ({
{...{placeholder, value, onChangeText, onFocus, onBlur}}
/>
</Animated.View>
- <Animated.View style={animatedStyles}>
- <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
- <Text style={styles.cancelText}>Cancel</Text>
- </TouchableOpacity>
- </Animated.View>
+ <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
+ <Text style={styles.cancelText}>Cancel</Text>
+ </TouchableOpacity>
</View>
);
};
@@ -87,9 +74,6 @@ const styles = StyleSheet.create({
borderRadius: 20,
backgroundColor: '#F0F0F0',
},
- searchIcon: {
- marginRight: 8,
- },
input: {
flex: 1,
fontSize: 16,
@@ -97,10 +81,8 @@ const styles = StyleSheet.create({
letterSpacing: normalize(0.5),
},
cancelButton: {
- height: '100%',
- position: 'absolute',
justifyContent: 'center',
- paddingHorizontal: 8,
+ paddingLeft: 10,
},
cancelText: {
color: '#818181',
diff --git a/src/screens/chat/NewChatModal.tsx b/src/screens/chat/NewChatModal.tsx
index 95e46ecd..9872dd6f 100644
--- a/src/screens/chat/NewChatModal.tsx
+++ b/src/screens/chat/NewChatModal.tsx
@@ -7,7 +7,6 @@ import {
Text,
View,
} from 'react-native';
-import {useSharedValue} from 'react-native-reanimated';
import {BottomDrawer} from '../../components';
import {
SEARCH_ENDPOINT_MESSAGES,
@@ -27,10 +26,6 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
setChatModalVisible,
}) => {
const [searching, setSearching] = useState(false);
- /*
- * Animated value
- */
- const animationProgress = useSharedValue<number>(0);
const [results, setResults] = useState<SectionListData<any>[]>([]);
const [query, setQuery] = useState<string>('');
const handleFocus = () => {
@@ -40,21 +35,20 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
Keyboard.dismiss();
};
const handleCancel = () => {
- setSearching(false);
+ setQuery('');
+ setChatModalVisible(false);
};
const getDefaultSuggested = async () => {
const searchResults = await loadSearchResults(
`${SEARCH_ENDPOINT_SUGGESTED}`,
);
- console.log(searchResults);
const sanitizedResult = [
{
title: 'users',
data: searchResults?.users,
},
];
- console.log(searchResults, sanitizedResult);
setResults(sanitizedResult);
};
@@ -102,7 +96,7 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
onBlur={handleBlur}
onFocus={handleFocus}
value={query}
- {...{animationProgress, searching}}
+ searching={searching}
placeholder={''}
/>
{results.length > 0 && (
@@ -125,7 +119,12 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
<BottomDrawer
initialSnapPosition={'90%'}
isOpen={modalVisible}
- setIsOpen={setChatModalVisible}
+ setIsOpen={(open) => {
+ if (!open) {
+ setQuery('');
+ }
+ setChatModalVisible(open);
+ }}
showHeader={false}>
{_modalContent()}
</BottomDrawer>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 14:14:44 +0000