Skip to content

passing enabled={false} with behavior="translate-with-padding" does not disable KeyboardAvoidingView #1079

@itsramiel

Description

@itsramiel

Describe the bug
I want to disable a KeyboardAvoidingView using the enabled props. It's behaviour is translate-with-padding. When I pass false to enabled, the avoiding is still happenind

Code snippet

import { StyleSheet, TextInput, View } from 'react-native';
import {
  KeyboardAvoidingView,
  KeyboardProvider,
} from 'react-native-keyboard-controller';

function App() {
  return (
    <KeyboardProvider>
      <KeyboardAvoidingView
        enabled={false}
        behavior="translate-with-padding"
        style={styles.container}
      >
        <View style={styles.main} />
        <TextInput style={styles.input} />
      </KeyboardAvoidingView>
    </KeyboardProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  main: {
    flex: 1,
    backgroundColor: 'red',
  },
  input: {
    padding: 12,
    borderWidth: 1,
    borderColor: 'black',
  },
});

export default App;

Repo for reproducing
https://github.com/itsramiel/translate-with-padding-keyboard-disable

To Reproduce
Clone repo

  1. run app
  2. tap on text input
  3. notice that avoiding is still enabled

Expected behavior
The avoiding behavior to be disabled when I pass false to enabled

Smartphone (please complete the following information):

  • Desktop OS: MacOs
  • Device: Android emulator, iOS simulator
  • OS: api 31, 18.5
  • RN version: 0.80.2
  • RN architecture: new
  • JS engine: Hermes
  • Library version: 1.18.4

Additional context
Created a pr. Hope you can help review

Metadata

Metadata

Assignees

Labels

KeyboardAvoidingView 🧪Anything related to KeyboardAvoidingView component🐛 bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions