2547: Send feedback open keyboard

native/package.json

@@ -75,6 +75,7 @@
     "react-native-gesture-handler": "^2.12.1",
     "react-native-highlight-words": "^1.0.1",
     "react-native-inappbrowser-reborn": "^3.7.0",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-localize": "^3.0.2",
     "react-native-pdf": "^6.7.1",
     "react-native-permissions": "^4.0.0-beta.1",

native/src/components/Feedback.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ActivityIndicator, ScrollView, Text, TextInput } from 'react-native'
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
 import { useTheme } from 'styled-components'
 import styled from 'styled-components/native'
 
@@ -116,7 +117,7 @@ const Feedback = ({
   const renderBox = (): React.ReactNode => {
     if (['idle', 'failed'].includes(sendingStatus)) {
       return (
-        <>
+        <KeyboardAwareScrollView>
           {isSearchFeedback ? (
             <>
               <HeadlineContainer>
@@ -133,26 +134,39 @@ const Feedback = ({
               <FeedbackButtons isPositiveFeedback={isPositiveFeedback} setIsPositiveFeedback={setIsPositiveFeedback} />
             </>
           )}
+
           <HeadlineContainer>
             <Description>{t('commentHeadline')}</Description>
             <Text>({t('optionalInfo')})</Text>
           </HeadlineContainer>
           <DescriptionContainer>
             <Text>{t('commentDescription', { appName: buildConfig().appName })}</Text>
           </DescriptionContainer>
-          <CommentInput onChangeText={onCommentChanged} value={comment} multiline numberOfLines={3} />
+          <CommentInput
+            onChangeText={onCommentChanged}
+            value={comment}
+            multiline
+            numberOfLines={3}
+            blurOnSubmit
+            returnKeyType='done'
+          />
           <HeadlineContainer>
             <Description>{t('contactMailAddress')}</Description>
             <Text>({t('optionalInfo')})</Text>
           </HeadlineContainer>
-          <Input keyboardType='email-address' onChangeText={onFeedbackContactMailChanged} value={contactMail} />
+          <Input
+            keyboardType='email-address'
+            onChangeText={onFeedbackContactMailChanged}
+            value={contactMail}
+            returnKeyType='done'
+          />
           {sendingStatus === 'failed' && <Description>{t('failedSendingFeedback')}</Description>}
           <NoteBox visible={submitDisabled}>
             <StyledIcon Icon={NoteIcon} />
             <NoteText>{t('note')}</NoteText>
           </NoteBox>
           <StyledButton disabled={submitDisabled} onPress={onSubmit} text={t('send')} />
-        </>
+        </KeyboardAwareScrollView>
       )
     }
     if (sendingStatus === 'sending') {

native/src/components/__tests__/Feedback.spec.tsx

@@ -7,6 +7,9 @@ import Feedback from '../Feedback'
 
 jest.mock('styled-components')
 jest.mock('react-i18next')
+jest.mock('react-native-keyboard-aware-scroll-view', () => ({
+  KeyboardAwareScrollView: ({ children }: { children: React.ReactNode }) => children,
+}))
 
 describe('Feedback', () => {
   beforeEach(() => {

native/src/components/__tests__/FeedbackContainer.spec.tsx

@@ -26,6 +26,9 @@ jest.mock('api-client', () => ({
     request: mockRequest,
   }),
 }))
+jest.mock('react-native-keyboard-aware-scroll-view', () => ({
+  KeyboardAwareScrollView: ({ children }: { children: React.ReactNode }) => children,
+}))
 
 describe('FeedbackContainer', () => {
   beforeEach(() => {

release-notes/unreleased/2547-send-feedback-open-keyboard.yml

@@ -0,0 +1,7 @@
+issue_key: 2541
+show_in_stores: false
+platforms:
+  - android
+  - ios
+en: Close button added to keyboard on textfield
+de: Schließen Button wurde zur Tastatur des Textfeldes hinzugefügt

yarn.lock

@@ -13302,7 +13302,7 @@ prompts@^2.0.1, prompts@^2.4.0:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@*, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@*, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -13645,6 +13645,19 @@ react-native-inappbrowser-reborn@^3.7.0:
     invariant "^2.2.4"
     opencollective-postinstall "^2.0.3"
 
+react-native-iphone-x-helper@^1.0.3:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
+  integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==
+
+react-native-keyboard-aware-scroll-view@^0.9.5:
+  version "0.9.5"
+  resolved "https://registry.yarnpkg.com/react-native-keyboard-aware-scroll-view/-/react-native-keyboard-aware-scroll-view-0.9.5.tgz#e2e9665d320c188e6b1f22f151b94eb358bf9b71"
+  integrity sha512-XwfRn+T/qBH9WjTWIBiJD2hPWg0yJvtaEw6RtPCa5/PYHabzBaWxYBOl0usXN/368BL1XktnZPh8C2lmTpOREA==
+  dependencies:
+    prop-types "^15.6.2"
+    react-native-iphone-x-helper "^1.0.3"
+
 react-native-localize@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/react-native-localize/-/react-native-localize-3.0.2.tgz#43fa75c0097dbdb24a54ff320b3c8ad732407365"