How Can I reslove this issue Keyboard overlapped when i entered text input

Question

How can i solve this issue .

keyboard overlapping like this below

Code Here

<View style={styles.container}>
            <View style={styles.Subcontainer}>
      <ScrollView contentContainerStyle={styles.scrolViewFlex} ref='scrollView' automaticallyAdjustContentInsets={true} showsHorizontalScrollIndicator={true} showsVerticalScrollIndicator={true}>
            <View style={styles.logoView}>
              <Image source={require('@images/Icon_K.png')} style={styles.imageStyles} />
            </View>
        <View style={styles.textInputView}>
        <ActivityIndicator
                   animating = {this.state.animating}
                   color = '#494949'
                   size = "large"
                   style = {styles.activityIndicator}
                   /> 

        <View style={styles.namesContainer}>
           {/*<View style={styles.exploreContainerDirection}> */}
             <View style={styles.pincodeContainer}>
               <TextInput
                  underlineColorAndroid="transparent"
                  autoCapitalize="words"
                  style={[styles.firstnameTextInput,{borderColor:this.state.backgroundColor,color: this.state.color}]}
                  placeholder=" First Name"
                  placeholderTextColor="#494949"
                  returnKeyType='next'
                  onChangeText={this.handleChange.bind(this,'FirstName')}
                  value={this.state.updateAccountValues.FirstName}
                  onFocus={this.inputFocused.bind(this,'FirstName')}
                  onSubmitEditing={(event)=>{
                    this.refs.SecondInput.focus();
                    }}/>
             </View>
             <View style={styles.spaceview}/>
             <View style={styles.mobileNoContainer}>
               <TextInput
                  underlineColorAndroid="transparent"
                  autoCapitalize="words"
                  ref="SecondInput"
                  style={[styles.lastnametextInput,{borderColor:this.state.backgroundColor,color: this.state.color}]}
                  placeholder=" Last Name"
                  placeholderTextColor="#494949"
                  returnKeyType='next'
                  onChangeText={this.handleChange.bind(this,'LastName')}
                  onFocus={this.inputFocused.bind(this,'LastName')}
                  value={this.state.updateAccountValues.LastName}
                  onSubmitEditing={(event)=>{
                    this.refs.ThirdInput.focus();
                    }}/>
             </View>
          {/* </View>*/}
           </View>
  </ScrollView>
  </View>

  </View>

So this is my Screen short when i enter in textinput keyboard appers some times like this below screen

So, Please check it once and find Our my Issue

I want Exactly... When i was enter Data in text Inputs the Entire Design was not Adjustable in that Screen — Lavaraju, Sep 04 '17 at 07:14
that is my issue Some times Design was Good when Keyboard Appears — Lavaraju, Sep 04 '17 at 07:15
So, Finally if it show keyboard Design show exact Design.. but not Getting — Lavaraju, Sep 04 '17 at 07:16
Check keyboardavoidingview api and keyboardavoidingscrollview library — eden, Sep 04 '17 at 07:17
So basically you don't want the entire screen changed if the keyboard appear? — Wanda Ichsanul Isra, Sep 04 '17 at 07:26
yes when i go to enter text input keyboard appear design changes — Lavaraju, Sep 04 '17 at 07:46

score 2 · Answer 1 · answered Sep 04 '17 at 08:40

2

I followed this: Set android:windowSoftInputMode="adjustPan" in MainfestFile.xml file

React-native: How to control what keyboard pushes up

answered Sep 04 '17 at 08:40

Lavaraju

2,614
7
29
49

How Can I reslove this issue Keyboard overlapped when i entered text input

1 Answers1