@ethora/chat-component-rn 26.8.1 → 26.8.3

package/src/components/MainComponents/ProfileImagePlaceholder.tsx

@@ -69,27 +69,27 @@ export const ProfileImagePlaceholder: React.FC<
     if (words.length === 0) {return '';}
 
     if (words.length >= 2) {
-      const firstLetter = /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[0]?.[0] || '')
+      const firstLetter = /^[\p{L}\p{N}]$/u.test(words[0]?.[0] || '')
         ? words[0][0].toUpperCase()
         : '';
-      const secondLetter = /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[1]?.[0] || '')
+      const secondLetter = /^[\p{L}\p{N}]$/u.test(words[1]?.[0] || '')
         ? words[1][0].toUpperCase()
         : '';
       return firstLetter + secondLetter;
     }
 
     if (words.length === 1 && words[0].length >= 2) {
-      const firstLetter = /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[0][0] || '')
+      const firstLetter = /^[\p{L}\p{N}]$/u.test(words[0][0] || '')
         ? words[0][0].toUpperCase()
         : '';
-      const secondLetter = /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[0][1] || '')
+      const secondLetter = /^[\p{L}\p{N}]$/u.test(words[0][1] || '')
         ? words[0][1].toUpperCase()
         : '';
       return firstLetter + secondLetter;
     }
 
     if (words.length === 1 && words[0].length === 1) {
-      return /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[0][0] || '')
+      return /^[\p{L}\p{N}]$/u.test(words[0][0] || '')
         ? words[0][0].toUpperCase()
         : '';
     }
@@ -97,16 +97,26 @@ export const ProfileImagePlaceholder: React.FC<
     return '';
   };
 
-  const getInitials = () => (!icon && name ? getTwoUppercaseLetters(name) : '');
+  const getInitials = () =>
+    !imageSource && name ? getTwoUppercaseLetters(name) : '';
+
+  const imageSource =
+    typeof icon === 'string' && icon
+      ? { uri: icon }
+      : typeof icon === 'number'
+      ? icon
+      : icon && typeof (icon as any).uri === 'string' && (icon as any).uri
+      ? (icon as any)
+      : null;
 
   return (
     <Wrapper
-      bgColor={icon ? 'transparent' : backgroundColor?.backgroundColor}
+      bgColor={imageSource ? 'transparent' : backgroundColor?.backgroundColor}
       size={size}
       isClickable={active || !!upload?.active}
     >
       <AvatarCircle
-        bgColor={icon ? 'transparent' : backgroundColor?.backgroundColor}
+        bgColor={imageSource ? 'transparent' : backgroundColor?.backgroundColor}
         size={size}
         isClickable={active || !!upload?.active}
         onPress={
@@ -117,11 +127,8 @@ export const ProfileImagePlaceholder: React.FC<
             : undefined
         }
       >
-        {icon ? (
-          <AvatarImage
-            source={typeof icon === 'string' ? { uri: icon } : icon as any}
-            size={size}
-          />
+        {imageSource ? (
+          <AvatarImage source={imageSource} size={size} />
         ) : placeholderIcon ? (
           placeholderIcon
         ) : (
@@ -140,7 +147,7 @@ export const ProfileImagePlaceholder: React.FC<
           </Overlay>
         )}
       </AvatarCircle>
-      {remove?.enabled && icon && role !== 'participant' && (
+      {remove?.enabled && imageSource && role !== 'participant' && (
         <RemoveButton onPress={remove.onRemoveClick}>
           <RemoveButtonText>&times;</RemoveButtonText>
         </RemoveButton>

package/src/components/MainComponents/RNStyled.tsx

@@ -12,23 +12,23 @@ export const Container = styled.View`
 
 export const Message = styled.Text`
   font-size: 16px;
-  color: #333;
+  color: ${({theme}) => theme.text};
 `;
 
 export const OrDelimiter = styled.Text`
   font-size: 14px;
-  color: #666;
+  color: ${({theme}) => theme.textSecondary};
 `;
 
 export const CustomButton = styled.TouchableOpacity`
   width: 100%;
-  background-color: #007bff;
+  background-color: ${({theme}) => theme.primary};
   padding: 10px;
   border-radius: 4px;
   align-items: center;
 `;
 
 export const ButtonText = styled.Text`
-  color: #fff;
+  color: ${({theme}) => theme.textOnPrimary};
   font-size: 16px;
 `;

package/src/components/MainComponents/ReduxWrapper.tsx

@@ -2,6 +2,8 @@ import React, {useMemo} from 'react';
 import {Provider, useDispatch} from 'react-redux';
 import {KeyboardProvider} from 'react-native-keyboard-controller';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
+import {ThemeProvider} from 'styled-components/native';
+import {resolveTheme} from '../../theme/theme';
 import {store} from '../../roomStore';
 import {setConfig} from '../../roomStore/chatSettingsSlice';
 import {ConfigUser, IConfig, MessageProps} from '../../types/types';
@@ -12,12 +14,19 @@ import LoginWrapper from './LoginWrapper';
 import '../../helpers/storeConsole';
 import {installPromiseRejectionTracker} from '../../utils/installPromiseRejectionTracker';
 import {useChatFonts} from '../../hooks/useChatFonts';
+import {installPushTokenHook} from '../../services/pushRegistration';
 
 // Mount-time, dev-only — wire a global unhandled-promise-rejection
 // tracker so any future leak surfaces with a real stack trace in Metro
 // logs (bug #4 follow-up). No-op in production.
 installPromiseRejectionTracker();
 
+// Arms the push-token watcher once for the package: it runs
+// `config.pushNotifications.getPushTokens` for every login and flushes
+// tokens handed over through `registerPushToken` before sign-in. Cheap
+// (one store subscription), no-op for hosts that never use push.
+installPushTokenHook();
+
 interface ChatWrapperProps {
   token?: string;
   roomJID?: string;
@@ -61,14 +70,21 @@ export const ReduxWrapper: React.FC<ChatWrapperProps> = React.memo(
     // KeyboardAvoidingView under the same flag).
     const ownKeyboardHandling = !memoizedConfig?.disableKeyboardAvoidingView;
 
+    // Light/dark palette (config.dark + config.darkColors). Styled
+    // components read it via `({ theme }) => theme.surface`; plain RN
+    // styles via the `useTheme()` hook.
+    const theme = useMemo(() => resolveTheme(memoizedConfig), [memoizedConfig]);
+
     const tree = (
-      <XmppProvider config={memoizedConfig} isVisible={props.isVisible}>
-        <ToastProvider>
-          <MessageNotificationProvider config={memoizedConfig}>
-            <LoginWrapper config={memoizedConfig} {...props} />
-          </MessageNotificationProvider>
-        </ToastProvider>
-      </XmppProvider>
+      <ThemeProvider theme={theme}>
+        <XmppProvider config={memoizedConfig} isVisible={props.isVisible}>
+          <ToastProvider>
+            <MessageNotificationProvider config={memoizedConfig}>
+              <LoginWrapper config={memoizedConfig} {...props} />
+            </MessageNotificationProvider>
+          </ToastProvider>
+        </XmppProvider>
+      </ThemeProvider>
     );
 
     return (

package/src/components/MainComponents/RoomList.tsx

@@ -13,8 +13,8 @@ import {
   FlatList,
   Pressable,
   Animated,
-  Text,
-  TouchableOpacity,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
 } from 'react-native';
 import { IRoom } from '../../types/types';
 import { SearchInput } from '../InputComponents/Search';
@@ -26,6 +26,7 @@ import { HeaderRoomList } from '../Header/HeaderRoomList';
 import { HeaderRoomListMenu } from '../Menu/HeaderRoomListMenu';
 import { getIconColor } from '../../helpers/getIconColor';
 import { useT } from '../../i18n/useT';
+import { useTheme } from '../../hooks/useTheme';
 
 const LONG_PRESS_THRESHOLD = 200;
 
@@ -35,6 +36,41 @@ interface RoomListProps {
   onRoomClick?: (chat: IRoom) => void;
 }
 
+// The page ground behind the room list, the search field and the header's
+// rounded bottom corners is `theme.listBackground` (applied inline below).
+
+/** A release that leaves the search strip in between is settled by
+ * scrolling to whichever end is nearer; this delay lets the platform tell
+ * us first whether the finger threw the list (momentum) or just let go. */
+const SNAP_SETTLE_DELAY = 60;
+
+const COLLAPSED_SCALE = 0.86;
+
+const SEARCH_REST_GAP = 16;
+
+export const searchRevealStyle = (
+  scrollY: Animated.Value,
+  hiddenOffset: number
+) => {
+  const travel = Math.max(hiddenOffset, 1);
+  return {
+    opacity: scrollY.interpolate({
+      inputRange: [0, travel * 0.85],
+      outputRange: [1, 0],
+      extrapolate: 'clamp' as const,
+    }),
+    transform: [
+      {
+        scale: scrollY.interpolate({
+          inputRange: [0, travel],
+          outputRange: [1, COLLAPSED_SCALE],
+          extrapolate: 'clamp' as const,
+        }),
+      },
+    ],
+  };
+};
+
 const RoomList: React.FC<RoomListProps> = ({
   chats,
   burgerMenu = false,
@@ -42,14 +78,18 @@ const RoomList: React.FC<RoomListProps> = ({
 }) => {
   const { config } = useChatSettingState();
   const t = useT();
+  const theme = useTheme();
 
   const [open, setOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
   const [isLongPress, setIsLongPress] = useState(false);
   const [isDrawerOpen, setDrawerOpen] = useState(false);
+  const [isSearchFocused, setSearchFocused] = useState(false);
 
   const pressTimer = useRef<NodeJS.Timeout | null>(null);
   const containerRef = useRef<View>(null);
+  const listRef = useRef<FlatList<IRoom> | null>(null);
+  const scrollY = useRef(new Animated.Value(0)).current;
 
   const drawerAnimation = useRef(new Animated.Value(0)).current;
   const overlayAnimation = useRef(new Animated.Value(0)).current;
@@ -120,6 +160,124 @@ const RoomList: React.FC<RoomListProps> = ({
     }
   }, [burgerMenu]);
 
+  // The search field is the list's own header rather than a bar pinned
+  // above it: it lives in the scrollable content, so the list opens
+  // already scrolled past it (rooms first, no search in sight) and
+  // dragging the content down brings it back with the finger — the way
+  // Telegram's chat list behaves. A pinned bar could not do this on
+  // Android, where a list sitting at offset 0 has nothing left to drag.
+  const searchBarHeight = useRef(0);
+  const [measuredBarHeight, setMeasuredBarHeight] = useState(0);
+  const listHeight = useRef(0);
+  const contentHeight = useRef(0);
+  /** The list starts hidden-search only once, and only before the user
+   * has touched it — chats arriving later must not yank the view. */
+  const didInitialHide = useRef(false);
+  const hasDragged = useRef(false);
+  const inMomentum = useRef(false);
+  const settleTimer = useRef<NodeJS.Timeout | null>(null);
+
+  // A search being typed in (or just focused) is never tucked away
+  // under the header, whichever way the list is then dragged.
+  const searchIsActive = useRef(false);
+  searchIsActive.current = isSearchFocused || searchTerm.length > 0;
+
+  /** How far the list can scroll — the strip can only be hidden fully
+   * when the rooms below it are tall enough to take its place. */
+  const maxOffset = () => contentHeight.current - listHeight.current;
+
+  const hiddenOffset = () =>
+    Math.max(searchBarHeight.current - SEARCH_REST_GAP, 0);
+
+  const hideSearchInitially = useCallback(() => {
+    if (didInitialHide.current || hasDragged.current) return;
+    const hidden = hiddenOffset();
+    if (!hidden || !listHeight.current || !contentHeight.current) return;
+    if (maxOffset() < hidden) return;
+    didInitialHide.current = true;
+    listRef.current?.scrollToOffset({ offset: hidden, animated: false });
+  }, []);
+
+  /** The magnet: a strip left half-way in or out settles to whichever
+   * end it is closer to. */
+  const snapSearch = useCallback((offset: number) => {
+    const hidden = hiddenOffset();
+    if (!hidden || maxOffset() < hidden) return;
+    if (offset <= 0 || offset >= hidden) return;
+    const hide = !searchIsActive.current && offset > hidden / 2;
+    listRef.current?.scrollToOffset({
+      offset: hide ? hidden : 0,
+      animated: true,
+    });
+  }, []);
+
+  const clearSettleTimer = () => {
+    if (settleTimer.current) {
+      clearTimeout(settleTimer.current);
+      settleTimer.current = null;
+    }
+  };
+
+  useEffect(() => clearSettleTimer, []);
+
+  const handleScroll = useMemo(
+    () =>
+      Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
+        useNativeDriver: true,
+      }),
+    [scrollY]
+  );
+
+  const revealStyle = useMemo(
+    () =>
+      searchRevealStyle(
+        scrollY,
+        Math.max(measuredBarHeight - SEARCH_REST_GAP, 0)
+      ),
+    [scrollY, measuredBarHeight]
+  );
+
+  const handleScrollBeginDrag = useCallback(() => {
+    hasDragged.current = true;
+    clearSettleTimer();
+  }, []);
+
+  const handleScrollEndDrag = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const offset = e.nativeEvent.contentOffset.y;
+      inMomentum.current = false;
+      clearSettleTimer();
+      // A flick keeps scrolling after the release; snapping now would
+      // fight it, so wait a beat and let momentum claim the gesture.
+      settleTimer.current = setTimeout(() => {
+        settleTimer.current = null;
+        if (!inMomentum.current) snapSearch(offset);
+      }, SNAP_SETTLE_DELAY);
+    },
+    [snapSearch]
+  );
+
+  const handleMomentumBegin = useCallback(() => {
+    inMomentum.current = true;
+    clearSettleTimer();
+  }, []);
+
+  const handleMomentumEnd = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      inMomentum.current = false;
+      snapSearch(e.nativeEvent.contentOffset.y);
+    },
+    [snapSearch]
+  );
+
+  // Tapping the field pulls it fully into view even if it was caught
+  // half-way, so the caret never sits under the header.
+  useEffect(() => {
+    if (isSearchFocused) {
+      listRef.current?.scrollToOffset({ offset: 0, animated: true });
+    }
+  }, [isSearchFocused]);
+
   const toggleDrawer = () => {
     if (isDrawerOpen) {
       closeDrawer();
@@ -157,6 +315,33 @@ const RoomList: React.FC<RoomListProps> = ({
     });
   };
 
+  const searchHeader = (
+    <View
+      testID="room-list-search"
+      style={styles.searchBar}
+      onLayout={(e) => {
+        const height = e.nativeEvent.layout.height;
+        searchBarHeight.current = height;
+        setMeasuredBarHeight((prev) => (prev === height ? prev : height));
+        hideSearchInitially();
+      }}
+    >
+      <Animated.View
+        testID="room-list-search-field"
+        style={[styles.searchField, revealStyle]}
+      >
+        <SearchInput
+          icon={<SearchIcon height={20} />}
+          value={searchTerm}
+          onChangeText={handleSearchChange}
+          onFocus={() => setSearchFocused(true)}
+          onBlur={() => setSearchFocused(false)}
+          placeholder={t('search.placeholder')}
+        />
+      </Animated.View>
+    </View>
+  );
+
   return (
     <>
       {burgerMenu && !open && (
@@ -174,45 +359,59 @@ const RoomList: React.FC<RoomListProps> = ({
       )}
       <View
         ref={containerRef}
-        style={[styles.container, config?.roomListStyles]}
+        style={[
+          styles.container,
+          { backgroundColor: theme.listBackground },
+          config?.roomListStyles,
+        ]}
       >
         {(open || !burgerMenu) && (
           <>
             <View style={styles.scrollContainer}>
               <HeaderRoomList setDrawerOpen={toggleDrawer} />
-              {/* Search sits ABOVE the list rather than in its
-                  ListHeaderComponent. As a list header it was simply the
-                  first scrolling row, so the moment you scrolled the rooms
-                  it slid up and disappeared behind the opaque header band.
-                  Fixed here it stays reachable, which is the entire point
-                  of a search field over a long list. */}
-              <View style={styles.searchBar}>
-                <SearchInput
-                  icon={<SearchIcon height={20} />}
-                  value={searchTerm}
-                  onChangeText={handleSearchChange}
-                  placeholder={t('search.placeholder')}
+              <View style={styles.listArea}>
+                {/* Animated.FlatList, so the reveal runs on the native
+                    thread off the very same scroll it follows. */}
+                <Animated.FlatList
+                  ref={listRef}
+                  data={filteredChats}
+                  keyExtractor={(item) => item.jid}
+                  ListHeaderComponent={searchHeader}
+                  onLayout={(e) => {
+                    listHeight.current = e.nativeEvent.layout.height;
+                    hideSearchInitially();
+                  }}
+                  onContentSizeChange={(_w, h) => {
+                    contentHeight.current = h;
+                    hideSearchInitially();
+                  }}
+                  onScroll={handleScroll}
+                  scrollEventThrottle={16}
+                  onScrollBeginDrag={handleScrollBeginDrag}
+                  onScrollEndDrag={handleScrollEndDrag}
+                  onMomentumScrollBegin={handleMomentumBegin}
+                  onMomentumScrollEnd={handleMomentumEnd}
+                  keyboardShouldPersistTaps="handled"
+                  renderItem={({ item }) => (
+                    <Pressable
+                      // Stable testID so e2e drivers can target a room
+                      // row by its jid local-part (e.g. Main chat under
+                      // app id `..._...759` → testID `room-...759`).
+                      testID={`room-${(item.jid || '').split('@')[0]}`}
+                      accessibilityLabel={`room-${item.title || item.name}`}
+                      onPress={() => performClick(item)}
+                      onPressIn={handlePressIn}
+                      onPressOut={handlePressOut}
+                    >
+                      <ChatRoomItem chat={item} config={config} />
+                    </Pressable>
+                  )}
+                  style={[
+                    styles.chatList,
+                    { backgroundColor: theme.listBackground },
+                  ]}
                 />
               </View>
-              <FlatList
-                data={filteredChats}
-                keyExtractor={(item) => item.jid}
-                renderItem={({ item }) => (
-                  <Pressable
-                    // Stable testID so e2e drivers can target a room
-                    // row by its jid local-part (e.g. Main chat under
-                    // app id `..._...759` → testID `room-...759`).
-                    testID={`room-${(item.jid || '').split('@')[0]}`}
-                    accessibilityLabel={`room-${item.title || item.name}`}
-                    onPress={() => performClick(item)}
-                    onPressIn={handlePressIn}
-                    onPressOut={handlePressOut}
-                  >
-                    <ChatRoomItem chat={item} config={config} />
-                  </Pressable>
-                )}
-                style={styles.chatList}
-              />
 
               <HeaderRoomListMenu
                 closeDrawer={closeDrawer}
@@ -238,7 +437,6 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '100%',
     flex: 1,
-    backgroundColor: '#fff',
   },
   scrollContainer: {
     flexGrow: 1,
@@ -249,21 +447,26 @@ const styles = StyleSheet.create({
     padding: 16,
     justifyContent: 'space-between',
   },
+  listArea: {
+    flex: 1,
+  },
   searchBar: {
+    paddingBottom: 4,
     // `row` matters: SearchInputWrapper is `flex: 1` plus a fixed 44px
     // height. In a column parent that flex resolves VERTICALLY against a
     // parent with no height of its own and collapses the field to nothing
-    // but its magnifier. As a row it resolves to width, which is what it
-    // meant back when the field was a list-header child.
+    // but its magnifier. As a row it resolves to width.
     flexDirection: 'row',
     paddingTop: 8,
-    paddingHorizontal: 16,
-    backgroundColor: '#FAFAFA',
+    backgroundColor: 'transparent',
+  },
+  searchField: {
+    flexDirection: 'row',
+    flex: 1,
   },
   chatList: {
     flex: 1,
     paddingHorizontal: 16,
-    backgroundColor: '#FAFAFA',
   },
 });
 

package/src/components/MainComponents/Select.tsx

@@ -8,6 +8,7 @@ import {
   Keyboard,
 } from 'react-native';
 import { Iso639_1Codes } from '../../types/types';
+import { useTheme } from '../../hooks/useTheme';
 
 const SelectWrapper = styled.View`
   position: relative;
@@ -18,20 +19,21 @@ const SelectBox = styled.TouchableOpacity<{
   isOpen: boolean;
   borderColor?: string;
 }>`
-  border: ${({ borderColor }) =>
-    borderColor ? `1px solid ${borderColor}` : '1px solid #ccc'};
+  border: ${({ borderColor, theme }) =>
+    `1px solid ${borderColor || theme.border}`};
   padding: 10px;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  background-color: #fff;
+  background-color: ${({ theme }) => theme.surface};
   border-radius: 5px;
   box-shadow: ${({ isOpen }) =>
     isOpen ? '0px 4px 8px rgba(0, 0, 0, 0.1)' : 'none'};
 `;
 
+// Light keeps its original #aaa; dark uses the palette's muted text.
 const Placeholder = styled.Text`
-  color: #aaa;
+  color: ${({ theme }) => (theme.dark ? theme.textMuted : '#aaa')};
 `;
 
 const Icon = styled(Animated.Text)`
@@ -43,9 +45,9 @@ const Dropdown = styled.View`
   top: 100%;
   left: 0;
   right: 0;
-  background-color: #fff;
+  background-color: ${({ theme }) => theme.surface};
   max-height: 200px;
-  border: 1px solid #ccc;
+  border: 1px solid ${({ theme }) => theme.border};
   border-radius: 5px;
   z-index: 100;
 `;
@@ -54,7 +56,8 @@ const SearchBox = styled.TextInput`
   width: 100%;
   padding: 10px;
   border-bottom-width: 1px;
-  border-color: #ccc;
+  border-color: ${({ theme }) => theme.border};
+  color: ${({ theme }) => theme.text};
   box-sizing: border-box;
 `;
 
@@ -63,7 +66,7 @@ const DropdownItem = styled.TouchableOpacity`
 `;
 
 const DropdownItemText = styled.Text`
-  color: #000;
+  color: ${({ theme }) => theme.text};
 `;
 
 interface SelectProps {
@@ -81,6 +84,7 @@ const Select: React.FC<SelectProps> = ({
   accentColor,
   selectedValue = null,
 }) => {
+  const theme = useTheme();
   const [isOpen, setIsOpen] = useState(false);
   const [selected, setSelected] = useState<{ name: string; id: string } | null>(
     selectedValue
@@ -139,6 +143,7 @@ const Select: React.FC<SelectProps> = ({
         <Dropdown>
           <SearchBox
             placeholder="Search..."
+            placeholderTextColor={theme.textMuted}
             value={searchTerm}
             onChangeText={setSearchTerm}
           />