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

Keyboard is hiding the statusupdateform's send button #99

Closed
jamesawer3 opened this issue Jan 7, 2020 · 5 comments · Fixed by #167
Closed

Keyboard is hiding the statusupdateform's send button #99

jamesawer3 opened this issue Jan 7, 2020 · 5 comments · Fixed by #167

Comments

@jamesawer3
Copy link

jamesawer3 commented Jan 7, 2020

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: [email protected]
  • getstream version: [email protected]

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
Simulator Screen Shot - iPhone 11 Pro Max - 2020-01-07 at 13 18 11

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
Copy link
Member

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

@jamesawer3 jamesawer3 reopened this Jan 7, 2020
@tbarbugli
Copy link
Member

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

@jamesawer3
Copy link
Author

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

@jaapbakker88
Copy link
Contributor

@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
Copy link
Author

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

@vishalnarkhede vishalnarkhede linked a pull request Jan 7, 2021 that will close this issue
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 a pull request may close this issue.

4 participants