@planningcenter/chat-react-native 3.12.2 → 3.12.3-rc.1

package/src/screens/conversation_filters/context/conversation_filter_context.tsx

@@ -2,15 +2,21 @@ import React from 'react'
 import { createContext, PropsWithChildren, useState } from 'react'
 import { ConversationFiltersParams, ConversationFiltersScreenProps } from '../screen_props'
 import { RouteProp, StackActions, useNavigation, useRoute } from '@react-navigation/native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { Platform } from 'react-native'
+
+const DEFAULT_LIST_PADDING_BOTTOM = 64
 
 export const FilterContext = createContext<{
   params: ConversationFiltersParams
   scrollOffset: number
   setScrollOffset: (offset: number) => void
+  setFormSheetHeaderHeight: (height: number) => void
   resetFilter: () => void
   setGroupFilter: (params: ConversationFiltersParams) => void
   setAppFilter: (params: ConversationFiltersParams) => void
   applyFilters: (params: ConversationFiltersParams) => void
+  platformListPaddingBottom: number | undefined
 }>({
   params: {
     chat_group_graph_id: undefined,
@@ -18,20 +24,32 @@ export const FilterContext = createContext<{
   },
   scrollOffset: 0,
   setScrollOffset: () => {},
+  setFormSheetHeaderHeight: () => {},
   resetFilter: () => {},
   setGroupFilter: () => {},
   setAppFilter: () => {},
   applyFilters: () => {},
+  platformListPaddingBottom: DEFAULT_LIST_PADDING_BOTTOM,
 })
 
 export const FilterProvider = ({ children }: PropsWithChildren) => {
   const [scrollOffset, setScrollOffset] = useState(0)
+  const [formSheetHeaderHeight, setFormSheetHeaderHeight] = useState(56)
   const navigation = useNavigation()
   const route = useRoute<RouteProp<ConversationFiltersScreenProps['route']>>()
+  const { bottom } = useSafeAreaInsets()
+
+  const platformListPaddingBottom = Platform.select({
+    ios: bottom + formSheetHeaderHeight,
+    android: bottom + 12,
+  })
+
   const filterContextValue = {
     params: route.params,
     scrollOffset,
     setScrollOffset,
+    platformListPaddingBottom,
+    setFormSheetHeaderHeight,
     resetFilter: () => {
       navigation.dispatch(
         StackActions.popTo('Conversations', {

package/src/screens/conversation_filters/group_filters.tsx

@@ -7,7 +7,6 @@ import { StaticScreenProps } from '@react-navigation/native'
 import { useGroupsToFilter } from './hooks/filters'
 import { GroupRow } from './components/rows'
 import { useFilterContext } from './context/conversation_filter_context'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 export type GroupFiltersScreenProps = StaticScreenProps<ConversationFiltersParams>
 
@@ -32,10 +31,10 @@ export const GroupFilters = () => {
 }
 
 const useStyles = () => {
-  const { bottom } = useSafeAreaInsets()
+  const { platformListPaddingBottom } = useFilterContext()
   return StyleSheet.create({
     container: {
-      paddingBottom: bottom + 12,
+      paddingBottom: platformListPaddingBottom,
     },
   })
 }

package/src/screens/conversation_filters/team_filters.tsx

@@ -7,7 +7,6 @@ import { TeamRow } from './components/rows'
 import { useFilterContext } from './context/conversation_filter_context'
 import { useTeamsToFilter } from './hooks/filters'
 import { ConversationFiltersParams } from './screen_props'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 export type GroupFiltersScreenProps = StaticScreenProps<ConversationFiltersParams>
 
@@ -32,10 +31,11 @@ export const TeamFilters = () => {
 }
 
 const useStyles = () => {
-  const { bottom } = useSafeAreaInsets()
+  const { platformListPaddingBottom } = useFilterContext()
+
   return StyleSheet.create({
     container: {
-      paddingBottom: bottom + 12,
+      paddingBottom: platformListPaddingBottom,
     },
   })
 }

package/src/screens/conversation_filters_screen.tsx

@@ -1,8 +1,8 @@
 import { useHeaderHeight } from '@react-navigation/elements'
 import { createComponentForStaticNavigation, RouteProp, useRoute } from '@react-navigation/native'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
-import React from 'react'
-import { Platform, StyleSheet, useWindowDimensions } from 'react-native'
+import React, { useCallback } from 'react'
+import { LayoutChangeEvent, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import {
   FilterProvider,
@@ -74,18 +74,27 @@ export const ConversationFiltersScreen = (_props: ConversationFiltersScreenProps
 }
 
 const FormSheetHeaderWithContext = () => {
-  const { resetFilter, applyFilters } = useFilterContext()
+  const { resetFilter, applyFilters, setFormSheetHeaderHeight } = useFilterContext()
   const route = useRoute<RouteProp<ConversationFiltersScreenProps['route']>>()
   const styles = useStyles()
 
+  const handleFormSheetHeaderLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      setFormSheetHeaderHeight(event.nativeEvent.layout.height)
+    },
+    [setFormSheetHeaderHeight]
+  )
+
   return (
-    <FormSheet.Header style={styles.header}>
-      <FormSheet.HeaderTitle>Filters</FormSheet.HeaderTitle>
-      <FormSheet.HeaderActions>
-        <FormSheet.HeaderTextButton onPress={resetFilter}>Reset</FormSheet.HeaderTextButton>
-        <FormSheet.HeaderButton title="Apply" onPress={() => applyFilters(route.params)} />
-      </FormSheet.HeaderActions>
-    </FormSheet.Header>
+    <View onLayout={handleFormSheetHeaderLayout}>
+      <FormSheet.Header style={styles.header}>
+        <FormSheet.HeaderTitle>Filters</FormSheet.HeaderTitle>
+        <FormSheet.HeaderActions>
+          <FormSheet.HeaderTextButton onPress={resetFilter}>Reset</FormSheet.HeaderTextButton>
+          <FormSheet.HeaderButton title="Apply" onPress={() => applyFilters(route.params)} />
+        </FormSheet.HeaderActions>
+      </FormSheet.Header>
+    </View>
   )
 }
 

package/src/screens/reactions_screen.tsx

@@ -120,6 +120,8 @@ const Author = memo(({ author }: { author: AuthorProps }) => {
   )
 })
 
+const TABS_HEIGHT = 67
+
 const useStyles = () => {
   const { colors } = useTheme()
   const { bottom } = useSafeAreaInsets()
@@ -131,7 +133,7 @@ const useStyles = () => {
     },
     contentContainer: {
       paddingTop: 8,
-      paddingBottom: bottom + Platform.select({ android: 24, default: 16 }),
+      paddingBottom: bottom + Platform.select({ android: 24, default: TABS_HEIGHT + 24 }),
     },
     authorRow: {
       flexDirection: 'row',