Keyboard is hiding the statusupdateform's send button

[jamesawer3]

Setup (always fill this in):

• iOS or Android? iOS
• Expo or regular React Native? React Native
• React Native Version: 0.61.5
• react-native-activity-feed or expo-activity-feed version: react-native-activity-feed@0.8.17
• getstream version: getstream@4.2.5

Describe the bug
iPhones greater than X is phasing this issue. Keyboard is hiding half of the send button

To Reproduce
Just install it and try

Expected behavior
Should be able to press it.

Screenshots

My Code

<SafeAreaView style={{ flex: 1, marginTop: Platform.OS == 'ios' ? -20 : 0, paddingBottom: viewPaddingBottom }} forceInset={{ top: 'always' }}>
        <StreamApp
          apiKey={getStreamConfig().apiKey}
          appId={getStreamConfig().appId}
          userId={groupId}
          token={feedSlugTokens[groupId]}>

          <FlatFeed
            flatListProps={{ inverted: true }}
            styles={{
              container: { backgroundColor: colors.lightGray },
              activity: { container: { borderColor: 'transparent', paddingBottom: -40, backgroundColor: 'transparent' } }
            }}
            feedGroup="groups"
            userId={groupId}
            notify
            navigation={navigation}
            Activity={(props) => (
              <TouchableOpacity
                style={{
                  marginBottom: 10, borderRadius: 10, paddingBottom: -40,
                  backgroundColor: props.activity.postedBy && props.activity.postedBy.data && props.activity.postedBy.data.userId === user._id || props.activity.actor && props.activity.actor.id && props.activity.actor.id === user._id ? '#DCF8C6' : colors.white,
                  marginLeft: props.activity.postedBy && props.activity.postedBy.data && props.activity.postedBy.data.userId === user._id || props.activity.actor && props.activity.actor.id && props.activity.actor.id === user._id ? 50 : 0,
                  marginRight: props.activity.postedBy && props.activity.postedBy.data && props.activity.postedBy.data.userId === user._id || props.activity.actor && props.activity.actor.id && props.activity.actor.id === user._id ? 0 : 50,
                }}
                activeOpacity={1}
                onLongPress={() => {
                  if (props && props.activity && props.activity.postedBy && props.activity.postedBy.data && props.activity.postedBy.data.userId === user._id) {
                    setActivityProps(props)
                    if (this.modaLize) {
                      this.modaLize.open();
                    }
                  }
                }}
                onPress={() => {
                  if (props && props.activity && props.activity.attachments && props.activity.attachments.images && props.activity.attachments.images.length > 0) {
                    setImageProps(_.map(props.activity.attachments.images || [], (item) => {
                      return { url: item }
                    }));
                    setShowImageModal(true);
                  }
                }}>
                <Activity
                  {...props}
                  onPressHashtag={(text, activity) => onHashTagPressed(text, activity)}
                  Header={
                    <View style={[getStyle('activity').header, { marginTop: -25 }]}>
                      <UserBar
                        styles={{ subtitle: { fontSize: 10, color: colors.blueGray500 }, username: { fontWeight: '700', color: 'black' } }}
                        username={props.activity.postedBy && props.activity.postedBy.data ? props.activity.postedBy.data.name : props.activity.actor && props.activity.actor.data ? props.activity.actor.data.name : ''}
                        subtitle={moment.utc(props.activity.time).local().format("DD MMM YYYY") + ' at ' + moment.utc(props.activity.time).local().format("LT")}
                        icon={props.activity.icon}
                        onPressAvatar={onActivityAvatorClick.bind(this, props)}
                      />
                    </View>
                  }
                />
              </TouchableOpacity>
            )}
          />
          <StatusUpdateForm
            styles={{
              textInput: { borderColor: colors.greyLighter, borderWidth: 1 },
              submitImage: { width: 32, height: 32 }
            }}
            feedGroup={"groups"}
            height={100}
            modifyActivityData={(data) => {
              return {
                ...data, channel: 'group', postedBy: {
                  data: {
                    userId: user._id,
                    name: user.firstName,
                    profileImage: user.photoUrl || strings['defaultImage'],
                    groupName: activeGroup.name
                  }
                }
              }
            }}
            onSuccess={refreshScreen}
          />
        </StreamApp>

[tbarbugli]

@jamesawer3 I see you closed this already; were you able to find a solution for this?

[tbarbugli]

@jaapbakker88 is there anything we should do on our side about this?

[jamesawer3]

Yes can you please test on iPhone's came after X series i face this issue

[jaapbakker88]

@jamesawer3 I can confirm I'm seeing this behaviour, adding a KeyboardAvoidingView fixed it for me:

<SafeAreaView style={{flex: 1}}>
      <KeyboardAvoidingView style={{flex: 1}}>
        <StreamApp
          apiKey={apiKey}
          appId={appId}
          token={token}
          userId='batman'
        >
          <FlatFeed Activity={renderActivity} notify />
          <StatusUpdateForm feedGroup="timeline" />
        </StreamApp>
      </KeyboardAvoidingView>
    </SafeAreaView>

[jamesawer3]

Yup its working fine but i couldn't scroll my flatfeed till the end if the keyboard is active contents are hiding