Here's the installation process for react-native-router-screen using TypeScript:

Install React Native Router Screen Package: Use npm or yarn to install react-native-router-screen package.Open your terminal and navigate to your React Native project directory.

Using npm:

   npm install react-native-router-screen

Using yarn:

   yarn add react-native-router-screen

Import and Use in Your Application.Wrap your project with NavigationContainer:

   import { useColorScheme } from 'react-native';

   function App(): JSX.Element {
       const scheme = useColorScheme();
       return (
           <NavigationContainer
               theme= { theme }
               scheme = { scheme == 'dark' ? 'dark' : 'default'
               }
               basePath = '/home'
           >
           <DrawerContainer>
               <StatusBar
                   animated={ true }
                   barStyle = 'light-content'
                   backgroundColor = { colors.primary }
                   showHideTransition = { 'slide'}
                   hidden = { false}
               />
               <Screen />
           </DrawerContainer>
       </NavigationContainer>
       );
   }

Wrap the whole project with NavigationContainer

Property	Description
scheme	An optional string with `dark` and `default`. Default `default`
theme	An optional object with dark and default themes.
- dark	An optional property for the dark theme.
- default	An optional property for the default theme.
basePath	A required string representing the base path or URL.
children	A required prop for passing child React elements.
config	An optional prop for passing child React elements.

Configuration	Type
`homeNavbar`	React.JSX.Element`
`navbar`	React.JSX.Element`
`footer`	React.JSX.Element`

Add Screen: In your React Native project, you can import and use RenderScreen class and declare with new keyword. Follow bellow code:

Import the RenderScreen class and declare it in a new variable using the new keyword

    import { RenderScreen } from 'react-native-router-screen';

    function Screen(): JSX.Element {
    const Render = new RenderScreen()
        return (
            <Render.Render>
                <Render.screen
                    path={'/home'}
                    title='Home'
                    navbar={<Navbar/>}
                    // hasNavbar={true}
                    isPrivate={true}
                    privateState={true}
                    screen={Home}
                />

                <Render.screen
                    title='Settings'
                    // hasNavbar={true}
                    path={'/settings'}
                    screen={Settings}
                />
                <Render.screen
                    title='About'
                    // hasNavbar={true}
                    path={'/about'}
                    screen={About}
                />
            </Render.Render>
        );
    };

const Home = (props: ScreenProps) => {
    const router = useRouter()
    const drawer = userDrawer()
    useEffect(() => {
        drawer.setDrawerConfig({
            renderNavigationView: <HomeDrawer />
        })
    }, [])
    return (
        <View>
            <StyleText>
                Home
            </StyleText>
            <Link href = '/about'>
                About
            </Link>
            <Button
                title = 'Home'
                onPress = {() => {
                router.push('/settings/435345')
                }}
            />
        </View>
  )
}

Start Your Application: After configuring your routes, start your React Native application to see the navigation in action.Use the appropriate commands(react-native run - android orreact - native run - ios) to launch your app on an emulator or physical device.

Install/Setup