0

The fixed header is scrolling after keyboard is open on iOS device. Is there any possibility to have fixed header after keyboard is open? I do not want to have header scrolling with the content.

Here is explained similar problem: https://medium.com/@im_rahul/safari-and-position-fixed-978122be5f29

I am facing the problem in the React project using Cordova.

Thank you very much for your help.

marek8623
  • 97
  • 15

2 Answers2

0

use keyboardAvoidingView from 'react-native'
docs 

   import {
      KeyboardAvoidingView
    } from 'react-native';

<KeyboardAvoidingView behavior="padding" style={styles.container}>


          <View style={styles.inputContainer}>
            <TextInput
              returnKeyType="next"
              placeholder="Mobile No."
              placeholderTextColor="powderblue"
              keyboardType="number-pad"
              onSubmitEditing={() => this.passwordInput.focus()}
              style={styles.input}
               onChangeText={(value) => this.setState({mobileno:value})}
               value={this.state.mobileno}
            />

            <TextInput
              returnKeyType="go"
              placeholder="Password"
              placeholderTextColor="powderblue"
              style={styles.input}
              secureTextEntry
              ref={input => (this.passwordInput = input)}
               onChangeText={(value) => this.setState({pssd:value})}
               value={this.state.pssd}
            />
          </View>



      </KeyboardAvoidingView>
Viraj Singh
  • 1,951
  • 1
  • 17
  • 27
  • I am not using react-native so is there any possible solution how to solve this issue using just React and Cordova? – marek8623 May 24 '19 at 07:10
0

If you are hiding status bar the KeyboardAvoiding will push everything including the header to top, it’s a bug of KeyboardAvoidingView in react native.

To make your header fixed while keyboard is shown, make your statusbar hidden=false

Dharman
  • 30,962
  • 25
  • 85
  • 135
ELMA
  • 3
  • 4