Skip to content

Commit

Permalink
refactor: conditional types for KeyboardAvoidingView (#711)
Browse files Browse the repository at this point in the history
## 📜 Description

`contentContainerStyle` can be used only when `behavior="position"`.

## 💡 Motivation and Context

To eep people aware about that additionally I decided to specify
conditional TS types. Now people will get a warning if they specify this
property and don't specify behavior as `position`.

## 📢 Changelog

<!-- High level overview of important changes -->
<!-- For example: fixed status bar manipulation; added new types
declarations; -->
<!-- If your changes don't affect one of platform/language below - then
remove this platform/language -->

### JS

- add conditional types to `KeyboardAvoidingView`;

## 🤔 How Has This Been Tested?

Tested in example project.

## 📸 Screenshots (if appropriate):

### Forbidden

<img width="994" alt="image"
src="https://github.com/user-attachments/assets/b1cd85ae-c7ab-40b0-9079-847a35fca149">

### Allowed

<img width="785" alt="image"
src="https://github.com/user-attachments/assets/de6572a4-49ce-4462-9447-8649159f32bf">

## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed
  • Loading branch information
kirillzyusko authored Dec 2, 2024
1 parent 737e452 commit 5ded2a7
Showing 1 changed file with 27 additions and 11 deletions.
38 changes: 27 additions & 11 deletions src/components/KeyboardAvoidingView/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,7 @@ import { useKeyboardAnimation } from "./hooks";

import type { LayoutRectangle, ViewProps } from "react-native";

export type KeyboardAvoidingViewProps = {
/**
* Specify how to react to the presence of the keyboard.
*/
behavior?: "height" | "position" | "padding";

/**
* Style of the content container when `behavior` is 'position'.
*/
contentContainerStyle?: ViewProps["style"];

export type KeyboardAvoidingViewBaseProps = {
/**
* Controls whether this `KeyboardAvoidingView` instance should take effect.
* This is useful when more than one is on the screen. Defaults to true.
Expand All @@ -38,6 +28,32 @@ export type KeyboardAvoidingViewProps = {
keyboardVerticalOffset?: number;
} & ViewProps;

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;
}
);

const defaultLayout: LayoutRectangle = {
x: 0,
y: 0,
Expand Down

0 comments on commit 5ded2a7

Please sign in to comment.