@ethora/chat-component-rn 26.8.2 → 26.8.3

package/src/components/MainComponents/MessageList.tsx

@@ -29,6 +29,7 @@ import { ArowDownIcon } from '../../assets/icons';
 import CustomTypingIndicator from '../styled/StyledInputComponents/CustomTypingIndicator';
 import { getIconColor } from '../../helpers/getIconColor';
 import { getChatBackgroundColor } from '../../helpers/getChatBackground';
+import { useTheme } from '../../hooks/useTheme';
 import { isOwnMessage } from '../../helpers/isOwnMessage';
 
 interface MessageListProps<TMessage extends IMessage> {
@@ -81,6 +82,7 @@ const MessageList = <TMessage extends IMessage>({
 }: MessageListProps<TMessage>) => {
   const { composing, messages, composingList } = useRoomState(roomJID)
     .room! as IRoom;
+  const theme = useTheme();
   const [isUserAtBottom, setIsUserAtBottom] = useState(true);
   const [showNewMessageIndicator, setShowNewMessageIndicator] = useState(false);
   const [isLoadingMore, setIsLoadingMore] = useState(false);
@@ -473,16 +475,24 @@ const MessageList = <TMessage extends IMessage>({
         <TouchableOpacity
           style={[
             styles.newMessageIndicator,
-            { backgroundColor: getIconColor(config) },
+            {
+              backgroundColor: getIconColor(config),
+              shadowColor: theme.shadow,
+            },
           ]}
           onPress={handleNewMessageIndicatorPress}
         >
           {/* White chevron on the saturated FAB. The icon's default
               color is white, which was invisible against the previous
               light `secondary` background — hence "no icon". */}
-          <ArowDownIcon color="#FFFFFF" width={22} height={22} />
+          <ArowDownIcon color={theme.textOnPrimary} width={22} height={22} />
           {unreadWhileScrolledUp > 0 && (
-            <View style={styles.newMessageBadge}>
+            <View
+              style={[
+                styles.newMessageBadge,
+                { backgroundColor: theme.danger, borderColor: theme.surface },
+              ]}
+            >
               <Text style={styles.newMessageBadgeText}>
                 {unreadWhileScrolledUp > 99 ? '99+' : unreadWhileScrolledUp}
               </Text>

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

@@ -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,9 +36,8 @@ interface RoomListProps {
   onRoomClick?: (chat: IRoom) => void;
 }
 
-/** Page ground behind the room list, the search field and the header's
- * rounded bottom corners. */
-const LIST_BACKGROUND = '#E8EDF2';
+// 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
@@ -78,6 +78,7 @@ const RoomList: React.FC<RoomListProps> = ({
 }) => {
   const { config } = useChatSettingState();
   const t = useT();
+  const theme = useTheme();
 
   const [open, setOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
@@ -358,7 +359,11 @@ const RoomList: React.FC<RoomListProps> = ({
       )}
       <View
         ref={containerRef}
-        style={[styles.container, config?.roomListStyles]}
+        style={[
+          styles.container,
+          { backgroundColor: theme.listBackground },
+          config?.roomListStyles,
+        ]}
       >
         {(open || !burgerMenu) && (
           <>
@@ -401,7 +406,10 @@ const RoomList: React.FC<RoomListProps> = ({
                       <ChatRoomItem chat={item} config={config} />
                     </Pressable>
                   )}
-                  style={styles.chatList}
+                  style={[
+                    styles.chatList,
+                    { backgroundColor: theme.listBackground },
+                  ]}
                 />
               </View>
 
@@ -429,7 +437,6 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '100%',
     flex: 1,
-    backgroundColor: LIST_BACKGROUND,
   },
   scrollContainer: {
     flexGrow: 1,
@@ -460,7 +467,6 @@ const styles = StyleSheet.create({
   chatList: {
     flex: 1,
     paddingHorizontal: 16,
-    backgroundColor: LIST_BACKGROUND,
   },
 });
 

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}
           />

package/src/components/Menu/HeaderRoomListMenu.tsx

@@ -24,6 +24,7 @@ import { setActiveModal } from '../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { useLogout } from '../../hooks/useLogout';
+import { useTheme } from '../../hooks/useTheme';
 import {
   shouldClaimVerticalDrag,
   shouldDismissOnDrag,
@@ -112,7 +113,10 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
   const { config } = useChatSettingState();
   const performLogout = useLogout();
   const logoutConfig = config?.logout?.enabled ? config.logout : undefined;
-  const primaryColor = config?.colors?.primary ?? '#0052CD';
+  const theme = useTheme();
+  const primaryColor = theme.primary;
+  const iconColor = theme.icon;
+  const labelColor = theme.text;
 
   const insets = useSafeAreaInsets();
   // Measured, so the sheet is exactly as tall as its rows and starts
@@ -243,22 +247,22 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
     }[] = [
       {
         label: 'New Chat',
-        icon: <AddNewIcon color={primaryColor} />,
+        icon: <AddNewIcon color={iconColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.NEW_CHAT));
         },
-        styles: { color: '#141414' },
+        styles: { color: labelColor },
       },
       {
         label: 'Profile',
-        icon: <ProfileIcon color={primaryColor} />,
+        icon: <ProfileIcon color={iconColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.PROFILE));
         },
       },
       {
         label: 'Settings',
-        icon: <SettingIcon color={primaryColor} />,
+        icon: <SettingIcon color={iconColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.SETTINGS));
         },
@@ -267,7 +271,7 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
     if (logoutConfig) {
       options.push({
         label: logoutConfig.label ?? DEFAULT_LOGOUT_LABEL,
-        icon: <LogoutIcon color={primaryColor} />,
+        icon: <LogoutIcon color={iconColor} />,
         styles: { color: primaryColor },
         onClick: () => {
           runLogoutFlow(logoutConfig, performLogout).catch(() => {});
@@ -275,7 +279,7 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
       });
     }
     return options;
-  }, [dispatch, logoutConfig, performLogout, primaryColor]);
+  }, [dispatch, logoutConfig, performLogout, primaryColor, iconColor, labelColor]);
 
   return (
     // Presented through a real <Modal>: as an in-tree overlay the sheet was
@@ -308,6 +312,8 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
         style={[
           styles.sheet,
           {
+            backgroundColor: theme.surface,
+            shadowColor: theme.shadow,
             paddingBottom: insets.bottom + 20,
             // Two entries rather than Animated.add: the parent's value is
             // driven natively, and stacking the transforms keeps each node
@@ -324,7 +330,12 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
           style={styles.grabArea}
           {...handlePan.panHandlers}
         >
-          <View style={styles.grabber} />
+          <View
+            style={[
+              styles.grabber,
+              theme.dark ? { backgroundColor: theme.textMuted } : null,
+            ]}
+          />
         </View>
         <View style={styles.card}>
           {menuOptions.map((option, index) => (
@@ -336,12 +347,19 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
                 onPress={() => handleOptionPress(option.onClick)}
               >
                 <View style={styles.iconSlot}>{option.icon}</View>
-                <Text style={[styles.label, option?.styles]}>
+                <Text
+                  style={[styles.label, { color: theme.text }, option?.styles]}
+                >
                   {option.label}
                 </Text>
               </TouchableOpacity>
               {index < menuOptions.length - 1 && (
-                <View style={styles.divider} />
+                <View
+                  style={[
+                    styles.divider,
+                    theme.dark ? { backgroundColor: theme.divider } : null,
+                  ]}
+                />
               )}
             </View>
           ))}
@@ -369,12 +387,12 @@ const styles = StyleSheet.create({
   label: {
     fontSize: 16,
     fontWeight: '500',
-    color: '#141414',
     marginLeft: 12,
   },
   divider: {
     height: StyleSheet.hairlineWidth,
     marginLeft: 54,
+    // Light hairline; swapped for theme.divider in dark mode.
     backgroundColor: '#E4E4E9',
   },
   sheet: {
@@ -385,9 +403,7 @@ const styles = StyleSheet.create({
     right: 3,
     bottom: 3,
     paddingTop: 8,
-    backgroundColor: '#FFFFFF',
     borderRadius: 20,
-    shadowColor: '#000',
     shadowOpacity: 0.12,
     shadowOffset: { width: 0, height: -3 },
     shadowRadius: 12,
@@ -403,6 +419,7 @@ const styles = StyleSheet.create({
     width: 40,
     height: 4,
     borderRadius: 2,
+    // Light pill; swapped for theme.textMuted in dark mode.
     backgroundColor: '#C9CBD1',
   },
   card: {

package/src/components/MessageBubble/BottomReplyContainer.tsx

@@ -3,6 +3,7 @@ import { IReply, IUser } from '../../types/types';
 import { Avatar } from './Avatar';
 import { styled } from 'styled-components/native';
 import { Platform, Text, View } from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
 
 interface BottomReplyContainerProps {
   isUser: boolean;
@@ -11,7 +12,7 @@ interface BottomReplyContainerProps {
 }
 
 const ReplyContainer = styled.TouchableOpacity<{ isUser: boolean }>`
-  background-color: #ffffff;
+  background-color: ${({ theme }) => theme.surface};
   left: ${(props) => (!props.isUser ? '10px' : 'auto')};
   right: ${(props) => (props.isUser ? '10px' : 'auto')};
   padding: 4px 8px 4px 16px;
@@ -21,17 +22,20 @@ const ReplyContainer = styled.TouchableOpacity<{ isUser: boolean }>`
   gap: 6px;
   margin: 8px 8px 0;
 
-  ${Platform.select({
-    ios: `
-      shadow-color: rgba(185, 198, 199, 1);
+  ${({ theme }) =>
+    Platform.select({
+      // The light shadow is a soft bluish-grey tuned for a white card; on
+      // the dark palette that would read as a glow, so use the theme shadow.
+      ios: `
+      shadow-color: ${theme.dark ? theme.shadow : 'rgba(185, 198, 199, 1)'};
       shadow-offset: 0px 0px;
       shadow-opacity: 1;
       shadow-radius: 8px;
     `,
-    android: `
+      android: `
       elevation: 8;
     `,
-  })}
+    })}
 `;
 
 const AvatarCircle = styled.View`
@@ -46,20 +50,20 @@ const CircleCurrent = styled.View`
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid #f0f0f0;
+  border: 1px solid ${({ theme }) => theme.border};
   border-radius: 50%;
-  background-color: #ffffff;
+  background-color: ${({ theme }) => theme.surface};
 `;
 
 const CircleCurrentText = styled.Text`
-  color: #8c8c8c;
+  color: ${({ theme }) => theme.textSecondary};
   font-size: 10px;
   font-weight: 100;
 `;
 
 const CounterRepliesText = styled.Text`
   font-size: 12px;
-  color: #0052cd;
+  color: ${({ theme }) => theme.primary};
   font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -70,6 +74,7 @@ export const BottomReplyContainer: FC<BottomReplyContainerProps> = ({
   reply,
   onClick,
 }) => {
+  const theme = useTheme();
   const uniqueUsers: IUser[] = useMemo(() => {
     return Object.values(
       reply.reduce<Record<string, IUser>>((acc, item) => {
@@ -94,7 +99,7 @@ export const BottomReplyContainer: FC<BottomReplyContainerProps> = ({
                 height: '100%',
                 width: '100%',
                 borderWidth: 1,
-                borderColor: '#F0F0F0',
+                borderColor: theme.border,
                 borderStyle: 'solid',
                 fontSize: 10,
               }}