Skip to content

iOS keyboard hide textinput , need to scroll to see it, (it should scroll and came in front auto) #511

@sandeep14

Description

@sandeep14

This is my code, issue i facing issue at bottom there is text input when I focus textinput, keyboard came then I have to manually scroll to see textinput, it should not come in front automatically

issue is in iOS only .

return (
<Modalize
ref={this.modalRef}
modalHeight={this.deviceHeight/1.5}
//adjustToContentHeight={true}
// panGestureEnabled={false}
keyboardAvoidingBehavior={Platform.OS === 'ios' ? 'padding' : 'height'}
// keyboardAvoidingOffset={Platform.OS === 'ios' ? 100 : 0}
handlePosition="inside"
scrollViewProps={{
keyboardShouldPersistTaps: 'always'
}}
onClose={() => {
// Called when modal is dismissed by swipe or back
this.props.closePopup();
}}
modalStyle={{ borderTopLeftRadius: 16, borderTopRightRadius: 16, paddingHorizontal: 0, backgroundColor: '#ffffff' }}
>

 <KeyboardAvoidingView
behavior={Platform.OS === "ios" ? undefined : undefined}
style={{ flex: 1 }}
    <TouchableOpacity
      style={{ height: '100%' }}
      activeOpacity={1}
    // onPressOut={() => { this.props.closePopup() }}
    >
      <View style={{ height: (this.deviceHeight/1.5), paddingHorizontal:20,paddingBottom:10,overflow:'hidden',paddingTop:20}}>

<View
// onPress={() => alert('click')}
style={{ paddingBottom: 5, borderBottomColor: toggleButtonClick == "Comments"&&false ? Constants.COLORS.Orange : Constants.COLORS.iconsGrayBackgroundColor, borderBottomWidth: toggleButtonClick == "Comments" ? 0 : 0 }}>

          <Text style={{ color: toggleButtonClick == "Comments" ? "#334155" : "#334155", fontFamily: Constants.LatoBold, fontSize: 16, fontWeight: toggleButtonClick == "Comments" ? "700" : "400", lineHeight: 22, letterSpacing: 0.3, paddingVertical: 2 }}>{Comments (${Number(this.props.NewsCardDetails?.commentcount) || 0})}</Text>
</View>

       

           {<TextInput
                               multiline={true}
                               numberOfLines={3} // only works in android
                               scrollEnabled={true}
                               showsVerticalScrollIndicator={false}
                              onChangeText={(text) => mobileVal(text, "comments")}
                               maxLength={1000}
                               value={""}
                               keyboardType='default' style={{ fontFamily: Constants.LatoRegular, color: "#334155", textAlign: 'left', paddingTop: 8,paddingBottom:8,paddingHorizontal:10,fontSize: 14,borderRadius:10,height:40,marginLeft:5}}
                               autoFocus={false}
                              // editable={postloader ? false : true}
                               returnKeyType={"return"}
                               placeholder={ "Add a comment..."}
                         placeholderTextColor="#717A88"
                              // onFocus={() => this.props.handleCommentAccess()}
                               //  onSubmitEditing={() => { Keyboard.dismiss(); this.props.postClicked() }}
                               blurOnSubmit={false}
                               ref={(input) => { this.commentTextInput = input; }}
                           />}
           </View>
    </TouchableOpacity>
    </KeyboardAvoidingView>
    
      
    
  </Modalize> 

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions