diff --git a/e2e/kit/017-keyboard-chat-scroll-view.e2e.ts b/e2e/kit/017-keyboard-chat-scroll-view.e2e.ts new file mode 100644 index 0000000000..4e227e7df9 --- /dev/null +++ b/e2e/kit/017-keyboard-chat-scroll-view.e2e.ts @@ -0,0 +1,61 @@ +import { expect } from "detox"; + +import { expectBitmapsToBeEqual } from "./asserts"; +import { + scrollDownUntilElementIsVisible, + waitAndTap, + waitForElementById, + waitForExpect, +} from "./helpers"; + +describe("`KeyboardChatScrollView` specs", () => { + it("should navigate to `KeyboardChatScrollView` example", async () => { + await scrollDownUntilElementIsVisible("main_scroll_view", "chat_kit"); + await waitAndTap("chat_kit"); + await waitForElementById("chat.input"); + await expect(element(by.id("layout_passes"))).toHaveText("Layout pass: 2"); + }); + + it("should use non-inverted `FlatList`", async () => { + await waitAndTap("open_bottom_sheet_modal"); + await waitAndTap("bottom_sheet_toggle_flat_list_state"); + await waitAndTap("bottom_sheet_close_modal"); + await element(by.id("chat.scroll")).swipe("up", "fast", 1, 0.5, 0.5); + // component gets re-mounted + await expect(element(by.id("layout_passes"))).toHaveText("Layout pass: 1"); + }); + + it("should push content up with `always` mode", async () => { + await waitAndTap("chat.input"); + await waitForExpect(async () => { + await expectBitmapsToBeEqual("KeyboardChatScrollViewAlways"); + }); + await expect(element(by.id("layout_passes"))).toHaveText("Layout pass: 1"); + }); + + it("should push content down even if you scrolled a little bit", async () => { + await element(by.id("chat.scroll")).swipe("down", "slow", 0.1, 0.5, 0.3); + await waitAndTap("layout_passes"); + await waitForExpect(async () => { + await expectBitmapsToBeEqual("KeyboardChatScrollViewAlwaysClosed"); + }); + await expect(element(by.id("layout_passes"))).toHaveText("Layout pass: 1"); + }); + + it("should not change position if we reached the top", async () => { + await element(by.id("chat.scroll")).swipe("down", "fast", 1, 0.5, 0.5); + await waitAndTap("chat.input"); + await element(by.id("chat.scroll")).swipe("down", "fast", 0.25, 0.5, 0.2); + await expect(element(by.id("layout_passes"))).toHaveText("Layout pass: 1"); + await waitAndTap("layout_passes"); + await waitForExpect(async () => { + await expectBitmapsToBeEqual("KeyboardChatScrollViewAlwaysClosedAtTop"); + }); + }); + + it("should change content position when input grows", () => {}); + + it("should work with inverted list", () => {}); + + it("should close keyboard interactively", () => {}); +}); diff --git a/e2e/kit/assets/ios/iPhone 17 Pro/KeyboardChatScrollViewAlways.png b/e2e/kit/assets/ios/iPhone 17 Pro/KeyboardChatScrollViewAlways.png new file mode 100644 index 0000000000..38542ca7f3 Binary files /dev/null and b/e2e/kit/assets/ios/iPhone 17 Pro/KeyboardChatScrollViewAlways.png differ diff --git a/e2e/kit/assets/ios/iPhone 17 Pro/KeyboardChatScrollViewAlwaysClosed.png b/e2e/kit/assets/ios/iPhone 17 Pro/KeyboardChatScrollViewAlwaysClosed.png new file mode 100644 index 0000000000..8916d67280 Binary files /dev/null and b/e2e/kit/assets/ios/iPhone 17 Pro/KeyboardChatScrollViewAlwaysClosed.png differ diff --git a/e2e/kit/assets/ios/iPhone 17 Pro/KeyboardChatScrollViewAlwaysClosedAtTop.png b/e2e/kit/assets/ios/iPhone 17 Pro/KeyboardChatScrollViewAlwaysClosedAtTop.png new file mode 100644 index 0000000000..e5cc7d0730 Binary files /dev/null and b/e2e/kit/assets/ios/iPhone 17 Pro/KeyboardChatScrollViewAlwaysClosedAtTop.png differ diff --git a/e2e/kit/helpers/actions/index.ts b/e2e/kit/helpers/actions/index.ts index 45f47c1803..4f5c5dafb7 100644 --- a/e2e/kit/helpers/actions/index.ts +++ b/e2e/kit/helpers/actions/index.ts @@ -137,7 +137,7 @@ export const scrollDownUntilElementIsVisible = async ( await waitFor(element(by.id(elementId))) .toBeVisible() .whileElement(by.id(scrollViewId)) - .scroll(100, "down", x, y); + .scroll(200, "down", x, y); }; export const scrollUpUntilElementIsBarelyVisible = async ( diff --git a/example/src/screens/Examples/KeyboardChatScrollView/VirtualizedListScrollView.tsx b/example/src/screens/Examples/KeyboardChatScrollView/VirtualizedListScrollView.tsx index 26b02d186c..58c37c46a3 100644 --- a/example/src/screens/Examples/KeyboardChatScrollView/VirtualizedListScrollView.tsx +++ b/example/src/screens/Examples/KeyboardChatScrollView/VirtualizedListScrollView.tsx @@ -5,7 +5,10 @@ import { StyleSheet, Text, } from "react-native"; -import { KeyboardChatScrollView } from "react-native-keyboard-controller"; +import { + KeyboardChatScrollView, + KeyboardController, +} from "react-native-keyboard-controller"; import { useSafeAreaInsets } from "react-native-safe-area-context"; import { useChatConfigStore } from "./store"; @@ -65,7 +68,11 @@ const VirtualizedListScrollView = forwardRef< onLayout={onLayout} {...props} /> - + KeyboardController.dismiss()} + > Layout pass: {layoutPass}