Skip to content

Commit 338f0ec

Browse files
authored
fix(Android, FormSheet): Fix pressables with TextInput for Fabric (#3435)
## Description This PR addresses an issue where pressables became unresponsive when the keyboard was open and a FormSheet had been adjusted for keyboard height. Previously, after introducing support for offsetting FormSheets by the keyboard height, I overlooked updating the corresponding ShadowNodes to reflect this layout change. Note: this only applies on Fabric, where we need to pass offsetY to ShadowNodes. Fixes: software-mansion/react-native-screens-labs#607 ## Changes - Added a callback to notify and update ShadowNodes when the FormSheet layout shifts due to keyboard visibility. ## Screenshots / GIFs Here you can add screenshots / GIFs documenting your change. You can add before / after section if you're changing some behavior. ### Before https://github.com/user-attachments/assets/f5839b64-6a0c-43a7-ab27-7bb4f32aab05 ### After https://github.com/user-attachments/assets/db7ac121-74d9-4169-bd6c-665852351692 ## Test code and steps to reproduce Updated `Test3336` ## Checklist - [x] Included code example that can be used to test this change - [x] Ensured that CI passes
1 parent 5b9a862 commit 338f0ec

4 files changed

Lines changed: 47 additions & 1 deletion

File tree

android/src/main/java/com/swmansion/rnscreens/Screen.kt

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -491,7 +491,14 @@ class Screen(
491491
// There is no need to update shadow state for transient sheet states -
492492
// we are unsure of the exact sheet position anyway.
493493
if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED && isStable) {
494-
updateScreenSizeFabric(width, height, top)
494+
onSheetYTranslationChanged()
495+
}
496+
}
497+
498+
internal fun onSheetYTranslationChanged() {
499+
if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
500+
// Translation is relative to the bottom edge, therefore it returns negative values.
501+
updateScreenSizeFabric(width, height, top + translationY.toInt())
495502
}
496503
}
497504

android/src/main/java/com/swmansion/rnscreens/ScreenStackFragment.kt

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -280,6 +280,12 @@ class ScreenStackFragment :
280280
}
281281
return insets
282282
}
283+
284+
override fun onEnd(animation: WindowInsetsAnimationCompat) {
285+
super.onEnd(animation)
286+
287+
screen.onSheetYTranslationChanged()
288+
}
283289
}
284290

285291
ViewCompat.setWindowInsetsAnimationCallback(screen, insetsAnimationCallback)

android/src/main/java/com/swmansion/rnscreens/bottomsheet/SheetDelegate.kt

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -519,6 +519,8 @@ class SheetDelegate(
519519

520520
override fun onAnimationEnd(animation: Animator) {
521521
isSheetAnimationInProgress = false
522+
523+
screen.onSheetYTranslationChanged()
522524
}
523525
},
524526
)

apps/src/tests/Test3336.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ type StackParamList = {
3737
FormSheetWithThreeDetentsWithTextInput: undefined;
3838
FormSheetWithMaxDetentWithTextInput: undefined;
3939
FormSheetOverStatusBarWithTextInput: undefined;
40+
FormSheetTextInputAndPressable: undefined;
4041
};
4142

4243
const Stack = createNativeStackNavigator<StackParamList>();
@@ -70,6 +71,7 @@ const EXAMPLES = [
7071
'Partially covered status bar (TextInput)',
7172
'FormSheetOverStatusBarWithTextInput',
7273
],
74+
['Pressable & TextInput', 'FormSheetTextInputAndPressable']
7375
];
7476

7577
function Main({
@@ -198,6 +200,23 @@ function FormSheetTextInputNoFlex() {
198200
);
199201
}
200202

203+
function FormSheetTextInputAndPressable() {
204+
return (
205+
<View style={{ flex: 1, justifyContent: 'space-between' }}>
206+
<PressableBase />
207+
<TextInput
208+
style={{
209+
borderWidth: 1,
210+
borderColor: 'black',
211+
padding: 10,
212+
borderRadius: 10,
213+
}}
214+
/>
215+
<PressableBase />
216+
</View>
217+
);
218+
}
219+
201220
const withOptionalSafeArea =
202221
(
203222
Component: React.ComponentType,
@@ -443,6 +462,18 @@ export default function App() {
443462
sheetAllowedDetents: [0.99],
444463
}}
445464
/>
465+
<Stack.Screen
466+
name="FormSheetTextInputAndPressable"
467+
component={withOptionalSafeArea(
468+
FormSheetTextInputAndPressable,
469+
useSafeArea,
470+
safeAreaEdges,
471+
)}
472+
options={{
473+
...formSheetBaseOptions,
474+
sheetAllowedDetents: [0.5],
475+
}}
476+
/>
446477
</Stack.Navigator>
447478
</NavigationContainer>
448479
);

0 commit comments

Comments
 (0)