KeyboardAvoidingView not working with Expo

Question

I cannot seem to get the keyboard to push the content up in my React-Native Expo app. I am testing this from the expo App by publishing it from my development machine.

Try as I might, nothing seems to push the view up when the keyboard comes into focus, is there a specific order of components, or some property I am missing; I have included the versions, the render block and the style blocks I think which are relevant.

I am using the following versions (latest);

"expo": "^29.0.0",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-29.0.0.tar.gz",

For the login page, the render code looks like the following;

 render() {
    return (
      <SafeAreaView style={styles.flexContainer}>
      <KeyboardAvoidingView
        style={styles.flexContainer}
        behavior="padding"
      >
        <Image style={styles.image} source={require('../../assets/images/backgroundWelcome.png')} role="presentation" />
        <View style={styles.container}>
          <View style={[styles.row, styles.border]}>
            <TextInput 
              placeholder='Email' 
              style={styles.input} 
              onChangeText={(input) => this.setState({email: input})} 
              value={this.state.email} 
            />
          </View>
          <View style={[styles.row, styles.border]}>
            <TextInput 
              placeholder='Password'
              style={styles.input}
              secureTextEntry={true}
              onChangeText={(input) => this.setState({password: input})}
              value={this.state.password} 
            />
          </View>

          <View style={styles.row}>
            <StyledButton callback={this.handleLogin} title='Log In'/>
          </View>

        </View>
      </KeyboardAvoidingView>
      </SafeAreaView>
    )
  }

These are the styles that are relevant;

  root: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  flexContainer: {
    flex: 1,
  },
  container: {
    paddingHorizontal: 40,
    paddingBottom: 22,
    alignItems: 'center',
    flex: -1
  },
  row: {
    flexDirection: 'row',
    marginVertical: 10,
  },

did you ever get this fixed? im running into an issue like this too. https://stackoverflow.com/questions/52112707/keyboardavoidingview-works-on-expo-but-not-on-apk — Donnie Darko, Sep 01 '18 at 12:42
I hope the below might shed some insight, if it does, please upvote. — dhj, Sep 30 '18 at 10:27

dhj · Accepted Answer · 2019-11-30T19:38:02.757

I ultimately could not find a full solution to the above directly, but I did find a npm module called.

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

I then nested this inside a ScrollView and included the View and Form inside it.

<ScrollView
<KeyboardAwareScrollView>
<View>
  <!-- stuff -->
<View
<KeyboardAwareScrollView>
<ScrollView>

The module can be found here;

react-native-keyboard-aware-scroll-view

At the time of writing appears a very popular module with ~30k downloads a week. I have no affiliation to this module, but it works for me.

score 2 · Answer 2 · answered Feb 03 '19 at 05:39

I had the same issue adding flex: 1 to KeyboardAvoidingView fixed my problem:

            <KeyboardAvoidingView style={{ flex: 1 }} behavior={"padding"} >

                <ScrollView >

                    <Card>

                        <CardItem header bordered>
                            <Text>Personal Information</Text>
                        </CardItem>

                        <CardItem bordered>

                            <Body>

                                <Item floatingLabel style={styles.item}>
                                    <Label>Full Name</Label>
                                    <Input />
                                </Item>

                                <Item floatingLabel style={styles.item}>
                                    <Label>Headline</Label>
                                    <Input />
                                </Item>

                                <Item floatingLabel style={styles.item}>
                                    <Label>Location</Label>
                                    <Input />
                                </Item>

                                <Item floatingLabel style={styles.item}>
                                    <Label>Email</Label>
                                    <Input />
                                </Item>

                                <Item floatingLabel style={styles.item}>
                                    <Label>Phone Number</Label>
                                    <Input />
                                </Item>
                                <Item floatingLabel style={styles.item}>
                                    <Label>Phone Number</Label>
                                    <Input />
                                </Item>
                                <Item floatingLabel style={styles.item}>
                                    <Label>Phone Number</Label>
                                    <Input />
                                </Item>

                            </Body>
                            
                        </CardItem>

                    </Card>

                    <ListItem>

                        <Left>
                            <Text>Make my Profile Public</Text>
                        </Left>

                        <Right>
                            <Switch value={this.state.publicProfileRadioValue}
                                onValueChange={(value) => this.setState({ publicProfileRadioValue: value })}
                            />
                        </Right>
                        
                    </ListItem>

                </ScrollView>

            </KeyboardAvoidingView>

when you look closely, you'll see @dhj already implement KeyboardAvoidingView as { flex: 1 }. — eemrah, Jun 12 '19 at 13:55
no actually, just overlook the all answer and just figured out you are same style with the code asked. — eemrah, Jun 17 '19 at 12:27

araldhafeeri · Answer 3 · 2021-03-24T15:03:12.277

0

Add minHeight property to the root view style.

<KeyboardAvoidingView 
      behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
      style={styles.container}> 
        {//content } 
</KeyboardAvoidingView>



minHeight: Math.round(Dimensions.get('window').height),

Do not forget to import Dimensions form react native

import { Dimensions } from 'react-native';

edited Mar 24 '21 at 15:03

answered Mar 24 '21 at 12:37

araldhafeeri

179
9

score -1 · Answer 4 · answered Aug 13 '20 at 11:16

for anyone else who ran into this when testing on Android, make sure the element you want to be keyboard avoided also has flex: 1.

this will not work:

<KeyboardAvoidingView
        behavior={Platform.OS == "ios" ? "padding" : "height"}
        style={{ flex: 1 }}
      >
   <TextInput style={{ height: 300 }} />
</KeyboardAvoidingView>

this will:

<KeyboardAvoidingView
        behavior={Platform.OS == "ios" ? "padding" : "height"}
        style={{ flex: 1 }}
      >
   <TextInput style={{ flex: 1 }} />
</KeyboardAvoidingView>

without flex 1, the target element will not resize its height accordingly to avoid the keyboard

score -1 · Answer 5 · edited Jan 28 '21 at 11:58

-1

I could achieve the right behavior with this implementation:

Removed KeyboardAvoidingView component.
Added this to the app.json file:

     "android": {
      "softwareKeyboardLayoutMode": "pan"
    }

Hope it works for you guys as well!

edited Jan 28 '21 at 11:58

user14678216

2,886
2
16
37

answered Jan 28 '21 at 09:04

Ayin

159
1
2

KeyboardAvoidingView not working with Expo

5 Answers5