KeyboardAvoidingView not working with TabNavigator

Question

I have component in tabnavigator. In my component I have text multiple line so I want use KeyboardAvoidingView to push screen when keyboard show, when I enter multiple line in InputText keyboard over it. Here is my code:

class UselessTextInput extends Component {
    render() {
        return (
            <TextInput
                {...this.props} // Inherit any props passed to it; e.g., multiline, numberOfLines below
                editable={true}
                autoFocus={false}
                placeholder={Const.TEXT_INPUT_DELETE_ACCOUNT}
                //maxLength={10000} 
                underlineColorAndroid='rgba(0,0,0,0)'
                placeholderTextColor={'gray'}
            />
        );
    }
}

class SettingProfileDetail extends React.Component {
render(){
 return (

            <KeyboardAvoidingView behavior="padding" style={styles.container}>
                <Text style={styles.textTitle}>
                    {Const.REASONDELETEACCOUNT}
                </Text>
                <UselessTextInput
                    style={styles.textInput}
                    multiline={true}
                    numberOfLines={1}
                    onChangeText={(text) => this.setState({ reason: text })}
                    value={this.state.reason}
                />
            </KeyboardAvoidingView >

        );
}
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: 'white',
    },
    textTitle: {
        fontFamily: font.bold,
        textAlign: 'center',
        color: '#666666',
        marginTop: 20,
        marginBottom: 18
    },
    textInput: {
        fontFamily: font.normal,
        marginLeft: 10,
        marginRight: 10,
        padding: 0
    },
});

and here is my result:

It only happen when I add code in component on TabNavigator, when add in App.js it work fine How I can fix my bug? Thank you very much!

1

Did you find any solution? – httpete Jun 24 '18 at 00:26

score 0 · Answer 1 · answered Jun 17 '18 at 17:42

0

I ran into the same issue, though I had a different approach that basically will calculate and positioning (using translateY) the view when the keyboard appears.

I have published it here, visit react-native-spacer for more default

answered Jun 17 '18 at 17:42

Hieu Nguyen

474
1
5
21

score 0 · Answer 2 · answered May 19 '20 at 14:18

I had a similar issue and took inspiration from @Hieu Jack Nguyen. Still clunky but a bit better.

You can see bellow my SO question (with videos and issues) and in the comments a link to my Gist where I copied my current implementation.

React Native - Android - keyboardavoidingView in stackNavigator within a tabNavigator pushes bottomTabBar (clunky behaviour)

KeyboardAvoidingView not working with TabNavigator

2 Answers2