fix(android): FlatList with TextInput resize bug (#42)

* chore: update example

* feat(android): implement `keyboardMode` prop

* docs: add `keyboardMode` prop reference

* chore: example

* chore: bump deps

Author: lodev09

android/src/main/java/com/lodev09/truesheet/TrueSheetDialog.kt

@@ -62,11 +62,6 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
 
     // Setup window params to adjust layout based on Keyboard state
     window?.apply {
-      // SOFT_INPUT_ADJUST_RESIZE to resize the sheet above the keyboard
-      setSoftInputMode(
-        WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE
-      )
-
       // Store current windowAnimation value to toggle later
       windowAnimation = attributes.windowAnimations
     }

android/src/main/java/com/lodev09/truesheet/TrueSheetView.kt

@@ -286,6 +286,12 @@ class TrueSheetView(context: Context) :
     }
   }
 
+  fun setSoftInputMode(mode: Int) {
+    sheetDialog.window?.apply {
+      this.setSoftInputMode(mode)
+    }
+  }
+
   fun setDismissible(dismissible: Boolean) {
     sheetDialog.dismissible = dismissible
   }

android/src/main/java/com/lodev09/truesheet/TrueSheetViewManager.kt

@@ -1,6 +1,7 @@
 package com.lodev09.truesheet
 
 import android.util.Log
+import android.view.WindowManager
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.ReadableType
 import com.facebook.react.common.MapBuilder
@@ -56,6 +57,16 @@ class TrueSheetViewManager : ViewGroupManager<TrueSheetView>() {
     view.initialIndexAnimated = animate
   }
 
+  @ReactProp(name = "keyboardMode")
+  fun setKeyboardMode(view: TrueSheetView, mode: String) {
+    val softInputMode = when (mode) {
+      "pan" -> WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN
+      else -> WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE
+    }
+
+    view.setSoftInputMode(softInputMode)
+  }
+
   @ReactProp(name = "dimmedIndex")
   fun setDimmedIndex(view: TrueSheetView, index: Int) {
     view.setDimmedIndex(index)

docs/docs/reference/01-props.mdx

@@ -116,6 +116,15 @@ Used with `initialIndex`.
 | - | - | - | - |
 | `boolean` | `true` | ✅ | ✅ |
 
+### `keyboardMode`
+
+Determines how the software keyboard will impact the layout of the sheet.
+Set to `pan` if you're working with `FlatList` with a `TextInput`.
+
+| Type | Default | 🍎 | 🤖 |
+| - | - | - | - |
+| `"resize", "pan"` | `"resize"` |  | ✅ |
+
 ### `grabber`
 
 Shows a grabber (or handle). Native on IOS and styled `View` on Android.

example/package.json

@@ -13,7 +13,7 @@
     "build:ios": "cd ios && xcodebuild -workspace TrueSheetExample.xcworkspace -scheme TrueSheetExample -configuration Debug -sdk iphonesimulator CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ GCC_OPTIMIZATION_LEVEL=0 GCC_PRECOMPILE_PREFIX_HEADER=YES ASSETCATALOG_COMPILER_OPTIMIZATION=time DEBUG_INFORMATION_FORMAT=dwarf COMPILER_INDEX_STORE_ENABLE=NO"
   },
   "dependencies": {
-    "expo": "~51.0.11",
+    "expo": "~51.0.14",
     "expo-build-properties": "~0.12.3",
     "react": "18.2.0",
     "react-native": "0.74.2",

example/src/App.tsx

@@ -35,12 +35,6 @@ export default function App() {
         userInterfaceStyle="dark"
       />
 
-      {/* <Button
-        style={{ position: 'absolute', top: 0, left: 0, right: 0 }}
-        text="Present"
-        onPress={() => sheetRef.current?.present(1)}
-      /> */}
-
       <TrueSheet
         sizes={['15%', 'auto', 'large']}
         ref={sheetRef}
@@ -70,7 +64,6 @@ export default function App() {
         <Spacer />
         <Button text="Expand" onPress={() => sheetRef.current?.resize(2)} />
         <Button text="Collapse" onPress={() => sheetRef.current?.resize(1)} />
-        {/* <Button text="Dismiss" onPress={() => sheetRef.current?.dismiss()} /> */}
 
         <BasicSheet ref={basicSheet} />
         <PromptSheet ref={promptSheet} />

example/src/components/Input.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { TextInput, View, type TextStyle, type ViewStyle } from 'react-native'
+
+import { BORDER_RADIUS, GRAY, INPUT_HEIGHT, SPACING } from '../utils'
+
+export const Input = () => {
+  return (
+    <View style={$inputContainer}>
+      <TextInput style={$input} placeholder="Enter some text..." placeholderTextColor={GRAY} />
+    </View>
+  )
+}
+
+const $inputContainer: ViewStyle = {
+  backgroundColor: 'white',
+  paddingHorizontal: SPACING,
+  height: INPUT_HEIGHT,
+  borderRadius: BORDER_RADIUS,
+  justifyContent: 'center',
+  marginBottom: SPACING,
+}
+
+const $input: TextStyle = {
+  fontSize: 16,
+  height: INPUT_HEIGHT,
+}

example/src/components/index.ts

@@ -2,3 +2,4 @@ export * from './Footer'
 export * from './DemoContent'
 export * from './Button'
 export * from './Spacer'
+export * from './Input'

example/src/sheets/FlatListSheet.tsx

@@ -1,9 +1,9 @@
 import React, { forwardRef, useRef, type Ref } from 'react'
-import { FlatList, type ViewStyle } from 'react-native'
+import { FlatList, View, type ViewStyle } from 'react-native'
 import { TrueSheet, type TrueSheetProps } from '@lodev09/react-native-true-sheet'
 
-import { SPACING, times } from '../utils'
-import { DemoContent } from '../components'
+import { DARK, DARK_GRAY, INPUT_HEIGHT, SPACING, times } from '../utils'
+import { DemoContent, Input } from '../components'
 
 interface FlatListSheetProps extends TrueSheetProps {}
 
@@ -14,21 +14,24 @@ export const FlatListSheet = forwardRef((props: FlatListSheetProps, ref: Ref<Tru
     <TrueSheet
       ref={ref}
       scrollRef={flatListRef}
-      sizes={['large']}
-      cornerRadius={24}
-      grabber={false}
-      maxHeight={600}
+      sizes={['medium', 'large']}
+      blurTint="dark"
+      backgroundColor={DARK}
+      keyboardMode="pan"
       onDismiss={() => console.log('Sheet FlatList dismissed!')}
       onPresent={() => console.log(`Sheet FlatList presented!`)}
       {...props}
     >
+      <View style={$header}>
+        <Input />
+      </View>
       <FlatList<number>
         ref={flatListRef}
         nestedScrollEnabled
         data={times(50, (i) => i)}
         contentContainerStyle={$content}
         indicatorStyle="black"
-        renderItem={() => <DemoContent radius={24} />}
+        renderItem={() => <DemoContent color={DARK_GRAY} />}
       />
     </TrueSheet>
   )
@@ -38,4 +41,16 @@ FlatListSheet.displayName = 'FlatListSheet'
 
 const $content: ViewStyle = {
   padding: SPACING,
+  paddingTop: INPUT_HEIGHT + SPACING * 4,
+}
+
+const $header: ViewStyle = {
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  backgroundColor: DARK,
+  paddingTop: SPACING * 2,
+  paddingHorizontal: SPACING,
+  zIndex: 1,
 }

example/src/sheets/PromptSheet.tsx

@@ -1,17 +1,9 @@
 import React, { forwardRef, useRef, type Ref, useImperativeHandle, useState } from 'react'
-import { TextInput, View, type TextStyle, type ViewStyle } from 'react-native'
+import { type ViewStyle } from 'react-native'
 import { TrueSheet, type TrueSheetProps } from '@lodev09/react-native-true-sheet'
 
-import {
-  BORDER_RADIUS,
-  DARK,
-  DARK_BLUE,
-  GRABBER_COLOR,
-  GRAY,
-  INPUT_HEIGHT,
-  SPACING,
-} from '../utils'
-import { Button, DemoContent, Footer } from '../components'
+import { DARK, DARK_BLUE, GRABBER_COLOR, SPACING } from '../utils'
+import { Button, DemoContent, Footer, Input } from '../components'
 
 interface PromptSheetProps extends TrueSheetProps {}
 
@@ -67,28 +59,6 @@ export const PromptSheet = forwardRef((props: PromptSheetProps, ref: Ref<TrueShe
 
 PromptSheet.displayName = 'PromptSheet'
 
-const Input = () => {
-  return (
-    <View style={$inputContainer}>
-      <TextInput style={$input} placeholder="Enter some text..." placeholderTextColor={GRAY} />
-    </View>
-  )
-}
-
 const $content: ViewStyle = {
   padding: SPACING,
 }
-
-const $inputContainer: ViewStyle = {
-  backgroundColor: 'white',
-  paddingHorizontal: SPACING,
-  height: INPUT_HEIGHT,
-  borderRadius: BORDER_RADIUS,
-  justifyContent: 'center',
-  marginBottom: SPACING,
-}
-
-const $input: TextStyle = {
-  fontSize: 16,
-  height: SPACING * 3,
-}

src/TrueSheet.tsx

@@ -209,6 +209,7 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
       grabber = true,
       dimmed = true,
       initialIndexAnimated = true,
+      keyboardMode = 'resize',
       initialIndex,
       dimmedIndex,
       grabberProps,
@@ -237,6 +238,7 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
         dimmedIndex={dimmedIndex}
         initialIndex={initialIndex}
         initialIndexAnimated={initialIndexAnimated}
+        keyboardMode={keyboardMode}
         dismissible={dismissible}
         maxHeight={maxHeight}
         onMount={this.onMount}

src/TrueSheet.types.ts

@@ -221,6 +221,15 @@ export interface TrueSheetProps extends ViewProps {
    */
   FooterComponent?: ComponentType<unknown> | ReactElement
 
+  /**
+   * Determines how the software keyboard will impact the layout of the sheet.
+   * Set to `pan` if you're working with `FlatList` with a `TextInput`.
+   *
+   * @platform android
+   * @default resize
+   */
+  keyboardMode?: 'resize' | 'pan'
+
   /**
    * This is called when the sheet is ready to present.
    */