Skip to content

Commit 8fd7c76

Browse files
authored
fix(surveys): android keyboard glitching (#2809)
## Problem the keyboard causes major glitching in some cases on android. customer video here: https://posthoghelp.zendesk.com/agent/tickets/44614 reproduction here, on android 16 with physical keyboard + stylus input modes enabled: [Screen Recording 2025-12-22 at 12.53.23 PM.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.com/user-attachments/thumbnails/5fe5cfd4-f747-42a0-abe8-2ce942217ead.mov" />](https://app.graphite.com/user-attachments/video/5fe5cfd4-f747-42a0-abe8-2ce942217ead.mov) <!-- Who are we building for, what are their needs, why is this important? --> ## Changes <!-- What is changed and what information would be useful to a reviewer? --> adds a new sdk param `androidKeyboardBehavior` to control the behavior for `KeyboardAvoidingView` on android setting it to `padding` resolved the issue in my testing, but i do not want to risk a regression here ## Release info Sub-libraries affected ### Libraries affected <!-- Please mark which libraries will require a version bump. --> - [ ] All of them - [ ] posthog-js (web) - [ ] posthog-js-lite (web lite) - [ ] posthog-node - [x] posthog-react-native - [ ] @posthog/react - [ ] @posthog/ai - [ ] @posthog/nextjs-config - [ ] @posthog/nuxt - [ ] @posthog/rollup-plugin - [ ] @posthog/webpack-plugin ## Checklist - [ ] Tests for new code - [x] Accounted for the impact of any changes across different platforms - [x] Accounted for backwards compatibility of any changes (no breaking changes!) - [x] Took care not to unnecessarily increase the bundle size ### If releasing new changes - [ ] Ran `pnpm changeset` to generate a changeset file - [ ] Added the "release" label to the PR to indicate we're publishing new versions for the affected packages <!-- For more details check RELEASING.md -->
1 parent 6273e1d commit 8fd7c76

File tree

3 files changed

+23
-3
lines changed

3 files changed

+23
-3
lines changed

.changeset/yellow-teeth-mix.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'posthog-react-native': patch
3+
---
4+
5+
add control for keyboard avoiding behavior on android

packages/react-native/src/surveys/PostHogSurveyProvider.tsx

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,14 @@ export type PostHogSurveyProviderProps = {
6666
*/
6767
overrideAppearanceWithDefault?: boolean
6868

69+
/**
70+
* The keyboard avoiding behavior for the survey modal (KeyboardAvoidingView), applied only to Android devices.
71+
* - 'padding': Adds padding to avoid keyboard (recommended)
72+
* - 'height': Resizes the view height (default, for legacy - may cause flickering on some Android devices)
73+
* @default 'height'
74+
*/
75+
androidKeyboardBehavior?: 'padding' | 'height'
76+
6977
client?: PostHog
7078

7179
children: React.ReactNode
@@ -165,7 +173,13 @@ export function PostHogSurveyProvider(props: PostHogSurveyProviderProps): JSX.El
165173
<ActiveSurveyContext.Provider value={activeContext}>
166174
<FeedbackSurveyContext.Provider value={{ surveys, activeSurvey, setActiveSurvey }}>
167175
{props.children}
168-
{shouldShowModal && <SurveyModal appearance={surveyAppearance} {...activeContext} />}
176+
{shouldShowModal && (
177+
<SurveyModal
178+
appearance={surveyAppearance}
179+
androidKeyboardBehavior={props.androidKeyboardBehavior}
180+
{...activeContext}
181+
/>
182+
)}
169183
</FeedbackSurveyContext.Provider>
170184
</ActiveSurveyContext.Provider>
171185
)

packages/react-native/src/surveys/components/SurveyModal.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,11 @@ export type SurveyModalProps = {
1414
appearance: SurveyAppearanceTheme
1515
onShow: () => void
1616
onClose: (submitted: boolean) => void
17+
androidKeyboardBehavior?: 'padding' | 'height'
1718
}
1819

1920
export function SurveyModal(props: SurveyModalProps): JSX.Element | null {
20-
const { survey, appearance, onShow } = props
21+
const { survey, appearance, onShow, androidKeyboardBehavior = 'height' } = props
2122
const [isSurveySent, setIsSurveySent] = useState(false)
2223
const onClose = useCallback(() => props.onClose(isSurveySent), [isSurveySent, props])
2324
const insets = useOptionalSafeAreaInsets()
@@ -39,7 +40,7 @@ export function SurveyModal(props: SurveyModalProps): JSX.Element | null {
3940
return (
4041
<Modal animationType="fade" transparent onRequestClose={onClose} statusBarTranslucent={true}>
4142
<KeyboardAvoidingView
42-
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
43+
behavior={Platform.OS === 'ios' ? 'padding' : androidKeyboardBehavior}
4344
style={{ flex: 1, justifyContent: 'flex-end' }}
4445
keyboardVerticalOffset={Platform.OS === 'ios' ? 10 : 0}
4546
>

0 commit comments

Comments
 (0)