diff --git a/packages/react-native-ui-lib/src/components/hint/__tests__/index.spec.tsx b/packages/react-native-ui-lib/src/components/hint/__tests__/index.spec.tsx index 3a42bdf107..366c6314e9 100644 --- a/packages/react-native-ui-lib/src/components/hint/__tests__/index.spec.tsx +++ b/packages/react-native-ui-lib/src/components/hint/__tests__/index.spec.tsx @@ -64,6 +64,14 @@ describe('Hint Screen component test', () => { expect(driver.getModal().isVisible()).toBe(false); }); + it('Should pass modalProps to the modal', async () => { + const renderTree = render( + + ); + + expect(renderTree.getByTestId(`${HINT_TEST_ID}.modal`).props.supportedOrientations).toEqual(['landscape']); + }); + // TODO: This scenario tests doesn't pass, need to fix it using act it.skip('Should modal be visible when showHint is true', async () => { const renderTree = render(); diff --git a/packages/react-native-ui-lib/src/components/hint/hint.api.json b/packages/react-native-ui-lib/src/components/hint/hint.api.json index 222481d2d4..e20c1ce8c8 100644 --- a/packages/react-native-ui-lib/src/components/hint/hint.api.json +++ b/packages/react-native-ui-lib/src/components/hint/hint.api.json @@ -54,6 +54,11 @@ "type": "boolean", "description": "Open the hint using a Modal component" }, + { + "name": "modalProps", + "type": "ModalProps", + "description": "Pass props to the hint modal" + }, { "name": "useSideTip", "type": "boolean", diff --git a/packages/react-native-ui-lib/src/components/hint/index.tsx b/packages/react-native-ui-lib/src/components/hint/index.tsx index 5b4ea33b46..fc25ea266d 100644 --- a/packages/react-native-ui-lib/src/components/hint/index.tsx +++ b/packages/react-native-ui-lib/src/components/hint/index.tsx @@ -26,6 +26,7 @@ const Hint = (props: HintProps) => { const { visible, useModal = true, + modalProps, position = HintPositions.BOTTOM, children, message, @@ -216,6 +217,7 @@ const Hint = (props: HintProps) => { {renderChildren()} {isUsingModal ? ( ; @@ -65,6 +66,10 @@ export interface HintProps { * Open the hint using a Modal component */ useModal?: boolean; + /** + * Additional props for the modal + */ + modalProps?: ModalProps; /** * Show side tips instead of the middle tip */