CODEWITHSUNDEEP
react-native
yarism
yarism

Reputation: 465

KeyboardAvoidingView - pushing up content

I am trying to use KeyboardAvoidingView (also tried a few alternatives) but it either shows the keyboard over the input field or adds a huge amount of padding between the keyboard and the input field. When I stripe the page of any other content it fairs a bit better and only adds a bit of padding between the input field and the keyboard.

Demo of the issue:

http://i.imgur.com/qoYgJpC.gifv

<KeyboardAvoidingView behavior={'position'}>
    {this.state.story.image_key ?
        <View style={{flex: 1}}>
            <Image style={styles.storyBackgroundImage} source={{uri: this.state.story.image_url}} />
            <VibrancyView
              style={styles.absolute}
              blurType="light"
              blurAmount={25}
            />
            <Image style={styles.storyImage} source={{uri: this.state.story.image_url}} />
        </View>
        : null
    }
    <View style={styles.storyContainer}>
        <Text style={styles.storyTitle}>{this.state.story.title}</Text>
        <Text style={styles.chapterHeader} onPress={() => navigate('User', { id: this.state.story.author.id, name: this.state.story.author.name })}>Chapter 1 by {this.state.story.author.name}</Text>
        <Text style={styles.storyText}>{this.state.story.content}</Text>
        {this.state.story.chapters.map(function(chapter, i) {
            return <ChapterComponent chapter={chapter} key={i} navigation={() => navigate('User', { id: chapter.author.id, name: chapter.author.name })}></ChapterComponent>
        })}
        <WritingComponent></WritingComponent>
    </View>
</KeyboardAvoidingView>

WritingComponent

import React from 'react';
import {
    AppRegistry,
    TextInput
} from 'react-native';

export default class WritingComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = { text: '' };
    }

    render() {
        return (
            <TextInput
                style={{height: 40, borderColor: 'gray', borderWidth: 1}}
                multiline={true}
                onChangeText={(text) => this.setState({text})}
                value={this.state.text}
            />
        )
    }
}

AppRegistry.registerComponent('WritingComponent', () => WritingComponent);

Link to code

Upvotes: 2

Views: 5550

Answers (2)

Vinayak Gupta
Vinayak Gupta

Reputation: 59

set keyboardVerticalOffset="80" along with keyboardAvoidingView. Increase/decrease 80 according to the width of your component

Upvotes: -1

Jaime Liz
Jaime Liz

Reputation: 136

I think the problem is the scroll view, <ScrollView style={{flex: 1}}> should be contained within your KeyboardAvoidingView Since you want this scrolling container also be resized when keyboard comes up...

Upvotes: 2

Related Questions