how to show overlayScreen?

[Yasir5247]

Hi, Dear @kanzitelli. how can i fix this problem?

PinOverlay: {
  component: PinOverlay,
    options: {
        layout: {
          backgroundColor: '#12469A',
        },
        overlay: {
          interceptTouchOutside: true,
        },
    },
},

This doesnt work. it says "Type '"PinOverlay"' has no properties in common with type 'Layout'."
screens.N.showOverlay('PinOverlay');

My goal here is to show pinScreen to hide content.

[kanzitelli]

Hi @Yasir5247! Please, provide some extra code, it's hard to say with the provided snippet. Also, screens.N is a plain react-native-navigation instance and while using that, you have to check their docs. From what I see, you're just providing a string (screen name) which is not the way of doing that, please consider checking the docs -- https://wix.github.io/react-native-navigation/api/overlay.

[Yasir5247]

export const screens = generateRNNScreens({
    LoginScreen: {
      component: LoginScreen,
      options: {
        bottomTabs: {
          visible: false,
          drawBehind: true,
        },
        topBar: {
          visible: false,
        },
      },
    },
    PinOverlay: {
      component: PinOverlay,
      options: {
        layout: {
          backgroundColor: '#12469A',
        },
        overlay: {
          interceptTouchOutside: true,
        },
      },
    },
    ScanScreen: {
      component: ScanScreen,
      options: {
        topBar: {
          ...withRightButtons('flashOn'),
        },
        hardwareBackButton: {
          bottomTabsOnPress: 'first',
        },
        ...withBottomTab(
          services.t.do('section.navigation.screens.scanScreen'),
          'scan',
        ),
      },
    },
}, [withGestureHandler, withSS, withClient, withAppearance])

suppose i have these screens in my app. in the scan screen i would like show "PinOverlay" as soon as the user
navigates to that screen

//scanScreen.tsx

//this works. i was just wondering if this is the best way u to show the overlay screen.

useEffect(() => {
    screens.N.showOverlay({
      component: {
        name: 'PinOverlay',
      },
    });
  }, []);

[Yasir5247]

@kanzitelli my local language is from right to left. is it possible to
change layout direction without app reload also when i switch languages?

This doesn't work definitely.

export const navDefaultOptions = (): Options => {
  console.log('LOGG', stores.ui.language === 'dh' ? 'rtl' : 'ltr');
  return {
    layout: {
      orientation: ['portrait'],
      componentBackgroundColor: DesignSystem.themeColor('bgColor'),
      backgroundColor: DesignSystem.themeColor('bgColor'),
      direction: stores.ui.language === 'dh' ? 'rtl' : 'ltr',   <-----------------------here
    },
    ...screenDefaultOptions(),
    ...tabsDefaultOptions(),
    ...tabDefaultOptions(),
  };
};

[Yasir5247]

@kanzitelli just hoping to get a reply. sorry for the trouble.

[kanzitelli]

hey @Yasir5247. I am very busy with the project as am preparing it for the release, and don't have enough time for GitHub life.

About overlay, yeah I would just do it inside useEffect or using this hook -- https://underscopeio.github.io/react-native-navigation-hooks/docs/use-navigation-component-did-appear.

And I have never worked with rtl and ltr and not sure how it works with RNN. But all dynamic changes for RNN are happening here https://github.com/kanzitelli/rnn-starter/blob/master/src/services/navigation/index.ts#L25 when you change UI values.

[Yasir5247]

@kanzitelli thank you. and best of luck