Type errors with KeyboardAvoidingView

[Tobbe]

Describe the bug

Getting red squiggle with the <KeyboardAvoidingView> example code from the documentation here https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-avoiding-view#example

This is the error I get:

ts: Type '{ children: Element; behavior: "padding"; contentContainerStyle: { flex: number; borderColor: string; borderWidth: number; }; keyboardVerticalOffset: number; style: { flex: number; borderColor: string; borderWidth: number; }; }' is not assignable to type 'IntrinsicAttributes & (PropsWithChildren<KeyboardAvoidingViewProps> & RefAttributes<View>)'.
  Types of property 'contentContainerStyle' are incompatible.
    Type '{ flex: number; borderColor: string; borderWidth: number; }' is not assignable to type 'undefined'.

Code snippet

import React from "react";
import {
  Text,
  TextInput,
  TouchableOpacity,
  View,
  StyleSheet,
} from "react-native";
import { KeyboardAvoidingView } from "react-native-keyboard-controller";

export default function KeyboardAvoidingViewExample() {
  return (
    <KeyboardAvoidingView
      behavior={"padding"}
      contentContainerStyle={styles.container}
      keyboardVerticalOffset={0}
      style={styles.content}
    >
      <View style={styles.inner}>
        <Text style={styles.heading}>Header</Text>
        <View>
          <TextInput placeholder="Username" style={styles.textInput} />
          <TextInput placeholder="Password" style={styles.textInput} />
        </View>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.text}>Submit</Text>
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    borderColor: "green",
    borderWidth: 2,
  },
  content: {
    flex: 1,
    borderColor: "orange",
    borderWidth: 2,
  },
  heading: {
    fontSize: 36,
    marginBottom: 48,
    fontWeight: "600",
  },
  inner: {
    padding: 24,
    flex: 1,
    justifyContent: "space-between",
  },
  textInput: {
    height: 45,
    borderColor: "#000000",
    borderWidth: 1,
    borderRadius: 10,
    marginBottom: 36,
    paddingLeft: 10,
  },
  button: {
    marginTop: 12,
    height: 45,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: "red",
    backgroundColor: "rgb(40, 64, 147)",
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    fontWeight: "500",
    fontSize: 16,
    color: "white",
  },
});

Repo for reproducing

Sorry, I haven't created a separate repo for this yet, but can if needed.

To Reproduce
Steps to reproduce the behavior:

1. Create a new Expo app using the default template
2. Drop the code above into the app as a new screen
3. Notice TypeScript error in your IDE

Expected behavior

No red squiggle in my IDE

Screenshots

See above

Smartphone (please complete the following information):

• Desktop OS: MacOS 15.1.1
• Device: N/A
• OS: N/A
• RN version: 0.76.5
• RN architecture: "newArchEnabled": false
• JS engine: I don't know
• Library version: 1.15.0

Additional context

Diving into the generated types for the library I see this

export type KeyboardAvoidingViewProps = KeyboardAvoidingViewBaseProps & ({
    /**
     * Specify how to react to the presence of the keyboard.
     */
    behavior?: "position";
    /**
     * Style of the content container when `behavior` is 'position'.
     */
    contentContainerStyle?: ViewProps["style"];
} | {
    /**
     * Specify how to react to the presence of the keyboard.
     */
    behavior?: "height" | "padding";
    /**
     * `contentContainerStyle` is not allowed for these behaviors.
     */
    contentContainerStyle?: never;
});

And, indeed, if I change to behavior="position" the type error goes away. So there seems to be some kind of missmatch between the documentation and the actual code 🙂

[kirillzyusko]

Ooops, thanks for catching @Tobbe

I think I introduced that bug here: #711 and forgot to update a documentation 😬

contentContainerStyle is needed only if behavior="position", so it's expected beavaior to see a TS error here (in this case we tel ldevs that this property will not do anything meaningful).

I'll fix it in documentation straight away! Thanks for noticing this!

[kirillzyusko]

Published a new version of documentation! The issue should be solved now 😎