Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add KeyboardAvoidingView to SurveyModal #405

Open
wants to merge 2 commits into
base: feat/surveys
Choose a base branch
from

Conversation

ian-craig
Copy link

@ian-craig ian-craig commented Feb 22, 2025

Pulling over a couple of bug fixes from my fork:

  • When focusing a text field in a popover/modal survey the keyboard would cover the modal so you couldn't see what you were typing
  • The useFeedbackSurvey hook was returning surveys which were not launched/enabled in PostHog

#110

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR Summary

This PR addresses keyboard interaction and survey filtering issues in the React Native survey implementation, focusing on modal visibility and survey activation state.

  • Added KeyboardAvoidingView in /posthog-react-native/src/surveys/components/SurveyModal.tsx to prevent keyboard from obscuring text input fields
  • Modified useFeedbackSurvey hook in /posthog-react-native/src/surveys/PostHogSurveyProvider.tsx to filter for active surveys using start_date and end_date checks
  • Adjusted modal layout with proper margin handling between backdrop and content for better keyboard interaction
  • Improved survey visibility by using statusBarTranslucent={true} for full-screen modal display

💡 (2/5) Greptile learns from your feedback when you react with 👍/👎!

2 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings | Greptile

<View style={styles.topIconContainer}>
<Cancel onPress={onClose} appearance={appearance} />
<Pressable style={[styles.modalBackdrop]} onPress={onClose} accessible={false}>
<KeyboardAvoidingView behavior={'padding'} style={{ marginBottom: insets.bottom + 10, marginHorizontal: 10 }}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: Consider platform-specific behavior - Android may need 'height' instead of 'padding'

Suggested change
<KeyboardAvoidingView behavior={'padding'} style={{ marginBottom: insets.bottom + 10, marginHorizontal: 10 }}>
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{ marginBottom: insets.bottom + 10, marginHorizontal: 10 }}>

Comment on lines +38 to +39
survey.start_date !== null &&
survey.end_date === null
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should call getActiveMatchingSurveys instead, passing context?.surveys.
Since the survey should only be shown in certain conditions, and this is a subset of it but, everything should apply right, even if you call useFeedbackSurvey yourself.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants