react-native-gifted-chat 3.1.3 → 3.1.5

package/README.md

@@ -210,6 +210,7 @@ Messages, system messages, quick replies etc.: [data structure](src/Models.ts)
 - **`onSend`** _(Function)_ - Callback when sending a message
 - **`messageIdGenerator`** _(Function)_ - Generate an id for new messages. Defaults to a simple random string generator.
 - **`locale`** _(String)_ - Locale to localize the dates. You need first to import the locale you need (ie. `require('dayjs/locale/de')` or `import 'dayjs/locale/fr'`)
+- **`colorScheme`** _('light' | 'dark')_ - Force color scheme (light/dark mode). When set to `'light'` or `'dark'`, it overrides the system color scheme. When `undefined`, it uses the system color scheme. Default is `undefined`.
 
 ### Refs
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-chat",
-  "version": "3.1.3",
+  "version": "3.1.5",
   "description": "The most complete chat UI for React Native",
   "keywords": [
     "android",

package/src/Actions.tsx

@@ -89,7 +89,8 @@ const styles = StyleSheet.create({
     alignItems: 'flex-end',
   },
   button: {
-    paddingHorizontal: 8,
+    paddingLeft: 10,
+    paddingRight: 4,
     paddingVertical: 7,
   },
 

package/src/Composer.tsx

@@ -5,11 +5,11 @@ import {
   TextInputChangeEvent,
   TextInputContentSizeChangeEvent,
   TextInputProps,
-  useColorScheme,
   View,
 } from 'react-native'
 import { TextInput } from 'react-native-gesture-handler'
 import { Color } from './Color'
+import { useColorScheme } from './hooks/useColorScheme'
 import stylesCommon, { getColorSchemeStyle } from './styles'
 
 export interface ComposerProps {
@@ -86,6 +86,7 @@ const styles = StyleSheet.create({
     lineHeight: 22,
     paddingTop: 8,
     paddingBottom: 10,
+    paddingHorizontal: 8,
   },
   textInput_dark: {
     color: '#fff',

package/src/GiftedChat/index.tsx

@@ -10,6 +10,7 @@ import React, {
 import {
   View,
   LayoutChangeEvent,
+  useColorScheme,
 } from 'react-native'
 import {
   ActionSheetProvider,
@@ -48,6 +49,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     user = {},
     onSend,
     locale = 'en',
+    colorScheme: colorSchemeProp,
     renderLoading,
     actionSheet,
     textInputProps,
@@ -56,6 +58,9 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     isInverted = true,
   } = props
 
+  const systemColorScheme = useColorScheme()
+  const colorScheme = colorSchemeProp !== undefined ? colorSchemeProp : systemColorScheme
+
   const actionSheetRef = useRef<ActionSheetProviderRef>(null)
 
   const messagesContainerRef = useMemo(
@@ -236,8 +241,9 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
             actionSheetRef.current!.showActionSheetWithOptions,
         })),
       getLocale: () => locale,
+      getColorScheme: () => colorScheme,
     }),
-    [actionSheet, locale]
+    [actionSheet, locale, colorScheme]
   )
 
   useEffect(() => {

package/src/GiftedChat/types.ts

@@ -45,6 +45,8 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   user?: User
   /*  Locale to localize the dates */
   locale?: string
+  /* Force color scheme (light/dark); default is undefined (uses system color scheme) */
+  colorScheme?: 'light' | 'dark'
   /* Format to use for rendering times; default is 'LT' */
   timeFormat?: string
   /* Format to use for rendering dates; default is 'll' */

package/src/GiftedChatContext.ts

@@ -11,6 +11,7 @@ export interface IGiftedChatContext {
     ) => void
   }
   getLocale(): string
+  getColorScheme(): 'light' | 'dark' | null | undefined
 }
 
 export const GiftedChatContext = createContext<IGiftedChatContext>({
@@ -18,6 +19,7 @@ export const GiftedChatContext = createContext<IGiftedChatContext>({
   actionSheet: () => ({
     showActionSheetWithOptions: () => {},
   }),
+  getColorScheme: () => undefined,
 })
 
 export const useChatContext = () => useContext(GiftedChatContext)

package/src/InputToolbar.tsx

@@ -1,9 +1,10 @@
 import React, { useMemo } from 'react'
-import { StyleSheet, View, StyleProp, ViewStyle, useColorScheme } from 'react-native'
+import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native'
 
 import { Actions, ActionsProps } from './Actions'
 import { Color } from './Color'
 import { Composer, ComposerProps } from './Composer'
+import { useColorScheme } from './hooks/useColorScheme'
 import { IMessage } from './Models'
 import { Send, SendProps } from './Send'
 import { getColorSchemeStyle } from './styles'

package/src/Send.tsx

@@ -4,7 +4,6 @@ import {
   StyleProp,
   ViewStyle,
   TextStyle,
-  useColorScheme,
 } from 'react-native'
 import { Text } from 'react-native-gesture-handler'
 import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated'
@@ -12,6 +11,7 @@ import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-na
 import { Color } from './Color'
 import { TouchableOpacity, TouchableOpacityProps } from './components/TouchableOpacity'
 import { TEST_ID } from './Constant'
+import { useColorScheme } from './hooks/useColorScheme'
 import { IMessage } from './Models'
 import { getColorSchemeStyle } from './styles'
 

package/src/SystemMessage.tsx

@@ -64,7 +64,6 @@ const styles = StyleSheet.create({
   },
   text: {
     backgroundColor: Color.backgroundTransparent,
-    fontStyle: 'italic',
     fontSize: 12,
     fontWeight: '300',
   },

package/src/__tests__/GiftedChat.test.tsx

@@ -28,3 +28,33 @@ it('should render <GiftedChat/> and compare with snapshot', () => {
 
   expect(toJSON()).toMatchSnapshot()
 })
+
+it('should render <GiftedChat/> with light colorScheme and compare with snapshot', () => {
+  const { toJSON } = render(
+    <GiftedChat
+      messages={messages}
+      onSend={() => {}}
+      user={{
+        _id: 1,
+      }}
+      colorScheme='light'
+    />
+  )
+
+  expect(toJSON()).toMatchSnapshot()
+})
+
+it('should render <GiftedChat/> with dark colorScheme and compare with snapshot', () => {
+  const { toJSON } = render(
+    <GiftedChat
+      messages={messages}
+      onSend={() => {}}
+      user={{
+        _id: 1,
+      }}
+      colorScheme='dark'
+    />
+  )
+
+  expect(toJSON()).toMatchSnapshot()
+})

package/src/__tests__/__snapshots__/Composer.test.tsx.snap

@@ -29,6 +29,7 @@ exports[`should render <Composer /> and compare with snapshot 1`] = `
             "fontSize": 16,
             "lineHeight": 22,
             "paddingBottom": 10,
+            "paddingHorizontal": 8,
             "paddingTop": 8,
           },
           undefined,

package/src/__tests__/__snapshots__/GiftedChat.test.tsx.snap

@@ -46,3 +46,97 @@ exports[`should render <GiftedChat/> and compare with snapshot 1`] = `
   </KeyboardProvider>
 </View>
 `;
+
+exports[`should render <GiftedChat/> with dark colorScheme and compare with snapshot 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <KeyboardProvider
+    navigationBarTranslucent={true}
+    statusBarTranslucent={true}
+  >
+    <View
+      style={
+        {
+          "flex": 1,
+        }
+      }
+    >
+      <View
+        behavior="padding"
+        style={
+          {
+            "flex": 1,
+          }
+        }
+      >
+        <View
+          onLayout={[Function]}
+          style={
+            [
+              {
+                "flex": 1,
+              },
+              {
+                "overflow": "hidden",
+              },
+            ]
+          }
+          testID="GC_WRAPPER"
+        />
+      </View>
+    </View>
+  </KeyboardProvider>
+</View>
+`;
+
+exports[`should render <GiftedChat/> with light colorScheme and compare with snapshot 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <KeyboardProvider
+    navigationBarTranslucent={true}
+    statusBarTranslucent={true}
+  >
+    <View
+      style={
+        {
+          "flex": 1,
+        }
+      }
+    >
+      <View
+        behavior="padding"
+        style={
+          {
+            "flex": 1,
+          }
+        }
+      >
+        <View
+          onLayout={[Function]}
+          style={
+            [
+              {
+                "flex": 1,
+              },
+              {
+                "overflow": "hidden",
+              },
+            ]
+          }
+          testID="GC_WRAPPER"
+        />
+      </View>
+    </View>
+  </KeyboardProvider>
+</View>
+`;

package/src/__tests__/__snapshots__/InputToolbar.test.tsx.snap

@@ -58,6 +58,7 @@ exports[`should render <InputToolbar /> and compare with snapshot 1`] = `
                 "fontSize": 16,
                 "lineHeight": 22,
                 "paddingBottom": 10,
+                "paddingHorizontal": 8,
                 "paddingTop": 8,
               },
               undefined,

package/src/__tests__/__snapshots__/SystemMessage.test.tsx.snap

@@ -52,7 +52,6 @@ exports[`SystemMessage should render <SystemMessage /> and compare with snapshot
             {
               "backgroundColor": "transparent",
               "fontSize": 12,
-              "fontStyle": "italic",
               "fontWeight": "300",
             },
             undefined,

package/src/hooks/useColorScheme.ts

@@ -0,0 +1,18 @@
+import { useColorScheme as useRNColorScheme } from 'react-native'
+import { useChatContext } from '../GiftedChatContext'
+
+/**
+ * Custom hook that returns the color scheme from GiftedChat context if provided,
+ * otherwise falls back to the system color scheme from React Native.
+ * 
+ * @returns The current color scheme ('light', 'dark', null, or undefined)
+ */
+export function useColorScheme() {
+  const { getColorScheme } = useChatContext()
+  const contextColorScheme = getColorScheme()
+  const systemColorScheme = useRNColorScheme()
+  
+  return contextColorScheme !== undefined && contextColorScheme !== null
+    ? contextColorScheme
+    : systemColorScheme
+}

package/src/index.ts

@@ -20,3 +20,4 @@ export { Time } from './Time'
 export { GiftedAvatar } from './GiftedAvatar'
 export { MessageAudio } from './MessageAudio'
 export { MessageVideo } from './MessageVideo'
+export { useColorScheme } from './hooks/useColorScheme'