@planningcenter/chat-react-native 3.9.3-rc.0 → 3.9.3-rc.2

package/src/screens/message_actions_screen.tsx

@@ -1,18 +1,18 @@
 import { PlatformPressable } from '@react-navigation/elements'
 import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'
 import { useMutation } from '@tanstack/react-query'
+import { isNil, omitBy } from 'lodash'
 import React, { useCallback } from 'react'
 import { Alert, Platform, StyleSheet, View } from 'react-native'
 import { Text } from '../components'
 import { REACTION_EMOJIS, useReactionStyles } from '../components/conversation/message_reaction'
+import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
 import { useCreateAndroidRippleColor, useFontScale, useTheme } from '../hooks'
 import { useApiClient } from '../hooks/use_api_client'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
 import { useMessageReactionToggle } from '../hooks/use_message_reaction_toggle'
 import { ReactionCountResource } from '../types/resources/reaction'
 import { Clipboard } from '../utils/native_adapters'
-import { isNil, omitBy } from 'lodash'
-import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
 
 export const MessageActionsScreenOptions = getFormSheetScreenOptions({
   sheetAllowedDetents: [0.5],
@@ -122,7 +122,7 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
   }, [navigation, conversation_id, message_id])
 
   return (
-    <FormSheet.Root>
+    <FormSheet.Root style={styles.formSheetContent}>
       <View style={styles.reactionList}>
         {availableReactions.map((reaction, index) => (
           <Reaction
@@ -213,6 +213,9 @@ const useStyles = () => {
   })
 
   return StyleSheet.create({
+    formSheetContent: {
+      paddingTop: 16,
+    },
     reactionList: {
       flexDirection: 'row',
       justifyContent: 'center',

package/src/screens/reactions_screen.tsx

@@ -6,13 +6,13 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Avatar, Text } from '../components'
 import { REACTION_EMOJIS } from '../components/conversation/message_reaction'
 import { Tabs } from '../components/display/tabs'
+import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
 import { useSuspenseGet, useTheme } from '../hooks'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
+import { useFontScale } from '../hooks/use_font_scale'
 import { MemberResource } from '../types'
 import { ReactionCountResource } from '../types/resources/reaction'
-import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
 import { platformFontWeightMedium } from '../utils'
-import { useFontScale } from '../hooks/use_font_scale'
 
 export const ReactionsScreenOptions = getFormSheetScreenOptions({
   sheetAllowedDetents: Platform.select({
@@ -127,7 +127,7 @@ const useStyles = () => {
 
   return StyleSheet.create({
     formSheetContent: {
-      paddingTop: Platform.select({ android: 4, default: 16 }),
+      paddingTop: 16,
     },
     contentContainer: {
       paddingTop: 8,

package/src/screens/send_giphy_screen.tsx

@@ -1,12 +1,12 @@
 import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'
 import React from 'react'
 import { Image as NativeImage, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
-import { useGiphy } from '../hooks/use_giphy'
 import { Button, IconButton, IconString, TextButton } from '../components'
 import { DefaultLoading } from '../components/page/loading'
-import { useMessageCreateOrUpdate } from '../hooks/use_message_create_or_update'
 import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
 import { useCreateAndroidRippleColor, useTheme } from '../hooks'
+import { useGiphy } from '../hooks/use_giphy'
+import { useMessageCreateOrUpdate } from '../hooks/use_message_create_or_update'
 import { tokens } from '../vendor/tapestry/tokens'
 
 export const SendGiphyScreenOptions = getFormSheetScreenOptions({
@@ -154,7 +154,7 @@ const useStyles = () => {
 
   return StyleSheet.create({
     container: {
-      paddingTop: Platform.select({ android: 24, default: 32 }),
+      paddingTop: 32,
       paddingHorizontal: 16,
       gap: 8,
     },

package/src/utils/theme.ts

@@ -56,15 +56,6 @@ interface ChatColors {
   interaction: string
   androidModalHeaderButtonTextColor: ColorValue | string | undefined
   iOSModalHeaderButtonTextColor: OpaqueColorValue | string | undefined
-  // `switchTrackTrue` is deprecated.
-  // TODO: Remove `switchTrackTrue` once CCA stops using it.
-  switchTrackTrue: string | undefined
-  // `switchTrackFalse` is deprecated.
-  // TODO: Remove `switchTrackFalse` once CCA stops using it.
-  switchTrackFalse: string | undefined
-  // `switchThumbColor` is deprecated. Use `androidSwitchThumbColor` instead.
-  // TODO: Remove `switchThumbColor` once CCA is updated to use `androidSwitchThumbColor`.
-  switchThumbColor: string | undefined
   androidSwitchThumbColor: string | undefined
   testColor: string
   statusInfoIcon: string
@@ -92,9 +83,6 @@ const colorsChatLight: ChatColors = {
   buttonStart: undefined,
   buttonEnd: undefined,
   interaction: tokens.fillColorInteractionDefault,
-  switchTrackTrue: undefined,
-  switchTrackFalse: undefined,
-  switchThumbColor: undefined,
   androidSwitchThumbColor: undefined,
   testColor: 'hotpink',
   statusInfoIcon: tokens.iconColorStatusInfoPrimary,
@@ -122,9 +110,6 @@ const colorsChatDark: ChatColors = {
   buttonStart: undefined,
   buttonEnd: undefined,
   interaction: tokens.fillColorInteractionDefaultDark,
-  switchTrackTrue: undefined,
-  switchTrackFalse: undefined,
-  switchThumbColor: undefined,
   androidSwitchThumbColor: undefined,
   testColor: 'pink',
   statusInfoIcon: tokens.iconColorStatusInfoPrimaryDark,