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
*/