diff --git a/FabricExample/__tests__/__snapshots__/components-rendering.spec.tsx.snap b/FabricExample/__tests__/__snapshots__/components-rendering.spec.tsx.snap index 454b5afd6..7697df3f4 100644 --- a/FabricExample/__tests__/__snapshots__/components-rendering.spec.tsx.snap +++ b/FabricExample/__tests__/__snapshots__/components-rendering.spec.tsx.snap @@ -24,6 +24,7 @@ exports[`components rendering should render \`KeyboardAvoidingView\` 1`] = ` exports[`components rendering should render \`KeyboardAwareScrollView\` 1`] = ` + ); diff --git a/FabricExample/package.json b/FabricExample/package.json index a45f28708..9eada4784 100644 --- a/FabricExample/package.json +++ b/FabricExample/package.json @@ -10,6 +10,7 @@ "postinstall": "patch-package" }, "dependencies": { + "@gorhom/bottom-sheet": "^4.6.0", "@react-native-masked-view/masked-view": "^0.2.9", "@react-navigation/bottom-tabs": "^6.5.8", "@react-navigation/native": "^6.1.7", @@ -29,13 +30,13 @@ "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", + "@react-native/metro-config": "^0.72.11", "@testing-library/jest-native": "^5.3.3", "@testing-library/react-native": "^11.5.0", - "@react-native/metro-config": "^0.72.11", "@tsconfig/react-native": "^3.0.0", + "@types/react": "^18.0.24", "babel-jest": "^29.2.1", "jest": "^29.2.1", - "@types/react": "^18.0.24", "metro-react-native-babel-preset": "0.76.8", "patch-package": "^6.4.7", "react-test-renderer": "18.2.0" diff --git a/FabricExample/src/App.tsx b/FabricExample/src/App.tsx index 585b4181a..a8d223966 100644 --- a/FabricExample/src/App.tsx +++ b/FabricExample/src/App.tsx @@ -1,5 +1,6 @@ import "react-native-gesture-handler"; +import { BottomSheetModalProvider } from "@gorhom/bottom-sheet"; import { NavigationContainer } from "@react-navigation/native"; import * as React from "react"; import { ActivityIndicator, StyleSheet } from "react-native"; @@ -41,9 +42,11 @@ export default function App() { - - - + + + + + diff --git a/FabricExample/src/screens/Examples/AwareScrollView/index.tsx b/FabricExample/src/screens/Examples/AwareScrollView/index.tsx index 37250aa59..4f049d831 100644 --- a/FabricExample/src/screens/Examples/AwareScrollView/index.tsx +++ b/FabricExample/src/screens/Examples/AwareScrollView/index.tsx @@ -1,5 +1,6 @@ -import React, { useEffect, useState } from "react"; -import { Text } from "react-native"; +import { BottomSheetModal } from "@gorhom/bottom-sheet"; +import React, { useCallback, useEffect, useRef, useState } from "react"; +import { Button, Switch, Text, View } from "react-native"; import { KeyboardAwareScrollView } from "react-native-keyboard-controller"; import TextInput from "../../../components/TextInput"; @@ -12,38 +13,79 @@ import type { StackScreenProps } from "@react-navigation/stack"; type Props = StackScreenProps; export default function AwareScrollView({ navigation }: Props) { + const bottomSheetModalRef = useRef(null); + + const handlePresentModalPress = useCallback(() => { + bottomSheetModalRef.current?.present(); + }, []); + const [disableScrollOnKeyboardHide, setDisableScrollOnKeyboardHide] = useState(false); + const [enabled, setEnabled] = useState(true); useEffect(() => { navigation.setOptions({ headerRight: () => ( setDisableScrollOnKeyboardHide((value) => !value)} - testID="disable_scroll_on_keyboard_hide" + onPress={handlePresentModalPress} + testID="open_bottom_sheet_modal" > - {`Back scroll: ${!disableScrollOnKeyboardHide ? "true" : "false"}`} + Open config ), }); - }, [disableScrollOnKeyboardHide]); + }, []); return ( - - {new Array(10).fill(0).map((_, i) => ( - + + {new Array(10).fill(0).map((_, i) => ( + + ))} + + +