react-native-router-screen v1.0.5-0.1

react-native-router-screen

Npm install

npm i react-native-router-screen

NB: Close the project and start anew

Example

Import

import { NavigationContainer,RenderScreen, useRouter, useNavigation,useParamsScreenProps, DrawerContainer, userDrawer, useTheme} from 'react-native-router-screen';

import {
  Checkbox,Link,Pagination,PressableButton,Ratings,StyledText,Toast,Input,TouchableOpacityButton} from 'react-native-router-screen'

How Setup it

Wrap the whole project with NavigationContainer

Example Navbar

homeNavbar

import and use. | Property | Type | Description | |-------------|--------------------|----------------------------------------------------------------------| | title | string | The title to be displayed in the main navigation bar. | | children | React.ReactNode | (Optional) Additional React elements that can be included in the main navigation bar. |

const MainNavbar = ({ title }) => {
    const { colors } = useTheme();

    const styles = StyleSheet.create({
        navbar: {
            display: 'flex',
            backgroundColor: colors.primary,
            flexDirection: 'row',
            alignItems: 'center',
            width: '100%',
            justifyContent: 'space-between',
            color: 'black',
            height: 64,
            paddingHorizontal: 10,
            alignContent: 'space-between',

            shadowColor: "#000",
            shadowOffset: {
                width: 0,
                height: 1,
            },
            shadowOpacity: 0.15,
            shadowRadius: 1.00,
            elevation: 3,
        },
        navbar_button: {
            padding: 8,
        },
    });

    return (
        <View style={styles.navbar}>
            <View>
                <Text style={{
                    fontSize: 24,
                    fontWeight: '600',
                    color: colors.primary_text
                }}>
                    {title}
                </Text>
            </View>

            <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                {/* 
        <View>
          <Pressable onPress={() => setIsVisible(true)}>
            <View
              style={styles.navbar_button}
            >
              <Image
                source={assets_images.search_white}
                style={{ height: 28, width: 28 }}
              />
            </View>
          </Pressable>
        </View> */}
            </View>
        </View>
    );
};

export default MainNavbar;

navbar

import and use. | Property | Type | Description | |-------------------|-----------------------------------------|-------------------------------------------------------------------------------------| | title | string | The title to be displayed in the navbar. | | clickAbleFunction| () => void | (Optional) Function to be executed when the title is clicked. | | style | ViewStyle or TextStyle or ImageStyle or object | (Optional) Style object or React Native style type to customize the appearance of the title component. | | children | React.ReactNode | (Optional) Additional React elements that can be included as children of the title component. |

const NavbarTitleBackButton = ({
    title,
    clickAbleFunction,
    style,
    children
}: {
    title: string
    backward: string,
    clickAbleFunction?: () => void,
    children?: React.ReactNode,
    style?: ViewStyle | TextStyle | ImageStyle | object,
}) => {
    const { push, history, basePath } = useRouter()
    const { colors, dark } = useTheme()

    const styles = StyleSheet.create({
        navbar: {
            paddingHorizontal: 20,
            display: 'flex',
            backgroundColor: colors.card,
            flexDirection: 'row',
            alignItems: 'center',
            width: '100%',
            justifyContent: 'space-between',
            color: 'black',
            height: 64,
            paddingLeft: 10,
            paddingRight: 10,
            alignContent: 'space-between',

            shadowColor: "#000",
            shadowOffset: {
                width: 0,
                height: 1,
            },
            shadowOpacity: 0.15,
            shadowRadius: 1.00,
            elevation: 3,

        },
        navbar_button: {
            padding: 8,
        },
    });
    return (
        <View style={[styles.navbar, style]}>
            {/* <Image source={{ uri: svgBase64 }} /> */}
            <View>
                <TouchableOpacityButton
                    key={title}
                    imageStyle={{
                        width: 24,
                        height: 24,
                    }}
                    onPress={() => {
                        if (clickAbleFunction) {
                            clickAbleFunction()
                        }
                        else {
                            if (history.get().length) {
                                history.back()
                            }
                            else {
                                push(basePath)
                            }
                        }
                    }}
                    image={assets_images.arrow_left_indicate}
                    containerStyle={{
                        backgroundColor: 'transparent',
                        width: 36,
                        height: 36,
                        borderWidth: 0,
                    }}
                />
            </View>
            <View style={{
                flex: 1,
                alignItems: 'center',
                left: children ? 0 : -18
            }}>
                <StyledText
                    style={
                        [
                            global_styles.text_xl,
                            global_styles.font_bold,
                            {
                                color: colors.primary
                            }
                        ]
                    }
                >
                    {
                        title
                    }
                </StyledText>
            </View>
            <View>
                {
                    children
                }
            </View>

        </View>
    );
};

export default NavbarTitleBackButton;

Footer

import { Image, Pressable, StyleSheet, View } from 'react-native';
import { StyledText, useRouter, useTheme } from 'react-native-router-screen';
import { assets_images } from '../../assets/assets_images';
import { useTranslate } from '../../context/TranslateContext';
import navigate_link from '../../navigate_link';


export default function Footer() {
    const router = useRouter();
    const { colors, dark } = useTheme()
    const { wishlist, home, cart, shopping, profile } = useTranslate()
    const footerMenuButton = [
        {
            select: assets_images.home_primary,
            default: assets_images.home,
            title: home,
            link: navigate_link.home,
        },
        {
            select: assets_images.shopping_primary,
            default: assets_images.shopping,
            title: shopping,
            link: navigate_link.shopping
        },
        {
            select: assets_images.wishlist_primary,
            default: assets_images.wishlist,
            title: wishlist,
            link: navigate_link.wishlists
        },
        {
            select: assets_images.carts_primary,
            default: assets_images.carts,
            title: cart,
            link: navigate_link.carts
        },
        {
            select: assets_images.profile_primary,
            default: assets_images.profile,
            title: profile,
            link: navigate_link.account
        }
    ]
    const styles = StyleSheet.create({
        footer: {
            backgroundColor: colors.card,
            // borderTopEndRadius: 20,
            // borderTopStartRadius: 20,
            padding: 16,
            paddingHorizontal: 20,
            display: 'flex',
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            borderColor: colors.border,
            borderWidth: 0.5,
            shadowColor: "#000",
            height: 64,
            width: '100%',
        },
        button: {
            gap: 2,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            flexDirection: 'column',
            height: 48,
            minWidth: 48,
            padding: 4,
        },
        buttonGPlusStyle: {
            flexDirection: 'row',
            alignItems: 'center',
            backgroundColor: '#dc4e41',
            borderWidth: 0.5,
            borderColor: '#fff',
            height: 40,
            borderRadius: 5,
            margin: 5,
        },
        buttonFacebookStyle: {
            flexDirection: 'row',
            alignItems: 'center',
            backgroundColor: '#485a96',
            borderWidth: 0.5,
            borderColor: '#fff',
            height: 40,
            borderRadius: 5,
            margin: 5,
        },
        buttonImageIconStyle: {
            padding: 10,
            margin: 5,
            height: 25,
            width: 25,
            resizeMode: 'stretch',
        },
        buttonTextStyle: {
            color: '#fff',
            marginBottom: 4,
            marginLeft: 10,
        },
        buttonIconSeparatorStyle: {
            backgroundColor: '#fff',
            width: 1,
            height: 40,
        },
    });
    return (
        <View style={styles.footer}>
            {
                footerMenuButton?.map((r, index) => {
                    const check = router.path === r.link;
                    return (
                        <View key={index}>
                            <Pressable
                                // style={{
                                //     paddingVertical: 10,
                                //     paddingHorizontal: 4
                                // }}
                                // underlayColor={colors?.background}
                                onPress={() => router.push(r?.link)}
                                disabled={check}
                            >
                                <View style={styles.button}>
                                    <View>
                                        <Image
                                            source={
                                                check ? r?.select : r?.default
                                            }
                                            style={{
                                                height: 24, width: 24, objectFit: 'contain',
                                            }}
                                        />
                                    </View>
                                    <StyledText style={{
                                        fontSize: 10,
                                        color: check ? colors?.primary : colors.grey
                                    }}>
                                        {
                                            r?.title
                                        }
                                    </StyledText>
                                </View>
                            </Pressable>
                        </View>
                    )
                })
            }

        </View>
    );
}

const theme = {
  dark: {
    background: 'red'
  },
  default: {
    background: 'green',
    primary: 'gold'
  }
}

function App(): JSX.Element {
  const [isDarkTheme, setDarkTheme] = useState<boolean>(false);

  return (
    <NavigationContainer
      scheme={isDarkTheme ? 'dark' : 'default'}
      // scheme={scheme !== 'dark' ? 'dark' : 'default'}
      basePath={home_path}
      config={{
        footer: <Footer />
      }}
    >
      <WrapScreen />
    </NavigationContainer>
  );
}

WrapScreen:

const WrapScreen = () => {
  const { dark, colors } = useTheme();
  return (
    <AuthenticationCheckProvider>
      <TranslateProvider>
        <DrawerContainer>
          <StatusBar
            animated={true}
            barStyle={dark ? "light-content" : 'dark-content'}
            backgroundColor={colors.card}
            showHideTransition={'slide'}
            hidden={false}
          />
          <Screen />
        </DrawerContainer>
      </TranslateProvider>
    </AuthenticationCheckProvider>

  )
}

Drawer

Wrap the whole project with DrawerContainer

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

props: | Property | Description | | ------------------- | ------------------------------------------------ | | drawerConfig | Configuration for a drawer component. | | drawerWidth | The width of the drawer . Default 300 | | drawerPosition | The position of the drawer (left, right, or undefined). Default left | | renderNavigationView | Content to render inside the drawer. |

How to use drawer and deferent content

<Render.screen
        title='home'
        drawerConfig={{
          drawerPosition: 'left',
          drawerWidth: 300,
          renderNavigationView: <DrawerHome/>
        }}
        hasFooter={true}
        path='/home'
        screen={HomeScreen}
/>

Note: If you use the navigation drawer in the parent container it will nest in all pages. If you don't want to see any screen then follow the example below

<Render.screen
        title='home'
        drawerConfig={{
          renderNavigationView: undefined
        }}
        hasFooter={true}
        path='/home'
        screen={HomeScreen}
/>

Or if you want to add it manually inside the screen component

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

Open drawer handler

  const {drawerRef} = userDrawer()
  const openDrawer = () => {
        return drawerRef.current?.openDrawer()
    }

Close drawer handler

  const {drawerRef} = userDrawer()
  const closeDrawer = () => {
        return drawerRef.current?.closeDrawer()
    }

Theme color

Here's a breakdown of the themeColorNameProps type properties and their descriptions:

• primary: The primary color used for elements like buttons and highlighting.
• background: The background color of the UI.
• card: The color of cards or containers in the UI.
• text: The text color.
• link: The color used for hyperlinks or links.
• border: The color of borders and separators.
• notification: The color used for notifications or alerts.
• transparent: A transparent color.
• primary_text: The text color for primary elements.
• secondary: A secondary color for elements like secondary buttons.
• secondary_text: The text color for secondary elements.
• success: The color used to indicate success.
• success_text: The text color for success messages.
• danger: The color used to indicate danger or errors.
• danger_text: The text color for error messages.
• warning: The color used to indicate warnings.
• warning_text: The text color for warning messages.
• info: The color used for informational messages.
• info_text: The text color for informational messages.
• grey: A general grey color.
• light_grey: A lighter shade of grey.
• dark_grey: A darker shade of grey.

Using the operating system preferences

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}
        />
        <N />
      </DrawerContainer>
    </NavigationContainer>
  );
}

Add Screen

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

  const Render = new RenderScreen()

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>
  );
}

How loading component work in screen

function SignUpScreen(props: ScreenProps) {
    const router = useRouter()
    const translate = useTranslate()
    const { colors } = useTheme()
    const { push, history, basePath } = useRouter()

    const { isLoading, refetch, role, isLoggedIn, user_info } = useAuth();

    useEffect(() => {
        if (isLoggedIn) {
            props.setLoadingComponent(true)
            setTimeout(() => {
                history.back()
                props.setLoadingComponent(false)
            }, 100);
        }
        else {
            props.setLoadingComponent(false)
        }
        return () => {
        }
    }, [isLoading, isLoggedIn, refetch])

    const {
        sign_in,
        password_error,
        sign_up,
        password,
        name,
     } = translate

    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string>()

    const signupHandle = async () => {
       
    }

    return (
        <ScrollView>
          //-----------------------------------------------
          //-----------------------------------------------
          //-----------------------------------------------
          //-----------------------------------------------
          //-----------------------------------------------
        </ScrollView>
    );
}

export default SignUpScreen;

export const translate = {
   en: {
        incomplete_order_message: "You have an incomplete order.",
        view_order: "View order",
        discount_high_to_low: "Discount: high to low",
        discount_low_to_high: "Discount: low to high",
        price_high_to_low: "Price: High to low",
        price_low_to_high: "Price: Low to high",
    },
    bn:{
      // ---------------------------------
      // ---------------------------------
      // ---------------------------------
      // ---------------------------------
      // ---------------------------------
    },
    in:{
      // ------------------------------------
      // ------------------------------------
      // ------------------------------------
      // ------------------------------------
      // ------------------------------------
    }
}

import React, { useContext, createContext } from 'react';
import { translate, TranslateInterface } from './translate'

const TranslateContext = createContext<TranslateInterface>(translate.bn)
function TranslateProvider({ children }: { children: React.ReactNode }) {
    const bn = translate.bn
    return (
        <TranslateContext.Provider value={bn}>
            {
                children
            }
        </TranslateContext.Provider>
    );
}
export function useTranslate() {
    const translate: TranslateInterface = useContext(TranslateContext);
    return translate
}
export default TranslateProvider;

pass parameter:

How to Create a 404 screen

Use at the end:

      <Render.screen
        title='Not Found'
        hasFooter={true}
        hasNavbar={true}
        path='*'
        screen={NotFound}
      />

How to redirect to other

export default function NotFound(props: ScreenProps) {
    const router = useRouter();
    const navigation = useNavigation()
    useEffect(() => {
        navigation.setLoadingComponent(true)
        router.push('/home')
        navigation.setLoadingComponent(false)
        return () => {
        }
    }, [])

    return (
        <View>
        </View>
    )
}

const Home = (props: ScreenProps) => {
  const router = useRouter()
  return (
    <View>
      <Text>
        Home
      </Text>
      <Link href='/about'>
        About
      </Link>
      <Button
        title='Home'
        onPress={() => {
          router.push('/settings/435345')
        }}
      />
    </View>
  )
}

Dynamic screen

const Navigate = () => {
  const Render = new RenderScreen();
  const navigation = useNavigation();
  const params = useParams()
  const searchparams = useSearchparams()
  return (
    <Render.Render>
      <Render.screen
        title='home'
        // hasNavbar={true}
        path='/settings/:settingID'
        screen={Settings}
      />
      <Render.screen
        title='home'
        // hasNavbar={true}
        path={'/blog/:blogID/:title'}
        screen={About}
      />
    </Render.Render>
  )
}

Note: Avoid using slashes at the end of path

Bad/not working: /blog/:blogID/:title/ Use: /blog/:blogID/:title

Params

const params = useParams()

 const Home = (props: ScreenProps) => {
  const params = props?.params;
  console.log(params)
  const router = useRouter()
  return (
    <View>
      <Text>
        Home
      </Text>
      <Link href="/settings/435345?search=5435&query=45435&done=true#done">
        Settings
      </Link>
      <Button
        title='Settings'
        onPress={() => {
          router.push('/settings/435345?search=5435&query=45435&done=true#done')
        }}
      />
    </View>
  )
}

{
  blogID:53455,
  title:"Title"
}

Screen component props

Router properties

  const router = useRouter()
  console.log(router)

navigate a link

 const Home = (props: ScreenProps) => {
  const params = props?.params
  const router = useRouter()
  return (
    <View>
      <Text>
        Home
      </Text>
      <Link href="/settings/435345?search=5435&query=45435&done=true#done">
        Settings
      </Link>
      <Button
        title='Settings'
        onPress={() => {
          router.push('/settings/435345?search=5435&query=45435&done=true#done')
        }}
      />
    </View>
  )
}

Searchparams

  const router = useRouter()
  const searchparams = router?.query

with query: https://example.com/path?name=Branch&product=5345 | Property | Details | |----------------|--------------------------------------| | key | Keys of type string. | | values | Values of type string or number. |

Note: Avoid using slashes at the end of link/url

Bad/not working: /settings/435345/?search=5435&query=45435&done=true#done Use: /settings/435345?search=5435&query=45435&done=true#done

Navigation Provider

 const navigation = useNavigation();

Navigation properties:

Modal

https://reactnative.dev/docs/modal

Components

• StyledText
• PressableButton
• TouchableOpacityButton
• Link
• checkbox
• input
• Toast
• Ratings
• Pagination
• Dropdown picker

StyledText

<StyledText>
        Home
</StyledText>

PressableButton or TouchableOpacityButton

    <PressableButton onPress={()=>{}} text={'Home'} />

These descriptions provide a detailed explanation of each property, its data type, and the role it plays in the buttonPropsType type definition. You can use this table to better understand the purpose of each property and how to use them in your code or documentation.

Link

     <Link href='/path?name=Branch&products=[Journeys,Email,Universal%20Ads]'>
        lorem
      </Link>

Checkbox

 <Checkbox isChecked={isChecked} setChecked={setChecked}/>

Ratings

<Ratings rating={10} size={10} />

Toast

  Toast({ text: noResultsFoundPlaceholder })

Input

 <Input
          setValue={setEmail}
          value={email}
          placeholder={"emailTr"}
          toast={"email_error"}
          pattern={/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/}
        />

Pagination

 <Pagination
        currentPage={10}
        getLastPage={100} pageHandle={() => { }}
        disableButton={{
          bg: 'red',
          text: 'white'
        }}
        button={{
          bg: 'gold',
          text: "white",
          borderWidth: 1,
          borderColor: 'red',
        }}
      />

Dropdown picker

<View>
        <DropDownPicker
          multipleConfig={{
            hasMultiple: true,
            storeValue: storeValue,
            resetTitle: "Reset",
            selectedTitle: "Selected",
            setStoreValue: setStoreValue
          }}

          items={[
            { label: '4545', value: "FFFFFFsFF" },
            { label: '4545', value: "FFFFFfFFF" },
            { label: '4545', value: "FFFFsfFFFF" },
            { label: '4545', value: "FFFFFFFF" },
            { label: '4545', value: "FFFFfFFFF" },
          ]}
        />
      </View>

type DropDownPickerProps = {
    placeholderConfig?: {
        noResultsFoundPlaceholder?: string,
        searchPlaceholder?: string,
        placeholder?: string,
    },

    multipleConfig?: {
        asset?: {
            checked?: number,
            unchecked?: number
        }
        hasMultiple: boolean,
        setStoreValue: React.Dispatch<any[]>,
        storeValue: any[],
        selectedTitle: string,
        resetTitle: string,
    }
    singleConfig?: {
        value: {
            id?: number | string,
            label: string;
            value: string;
        },
        defaultValue: {
            id?: number | string,
            label: string;
            value: string;
        },
        setValue: React.Dispatch<React.SetStateAction<{
            id?: number | string,
            label: string;
            value: string;
        }>>
    }

    hiddenArrow?: boolean,
    imageStyle?: ViewStyle | TextStyle | ImageStyle | object,
    textStyle?: ViewStyle | TextStyle | ImageStyle | object,
    width?: number,
    disable?: boolean,
    disableStyle?: ViewStyle | TextStyle | ImageStyle | object,
    containerStyle?: ViewStyle | TextStyle | ImageStyle | object,
    items: {
        id?: number | string,
        label: string;
        value: string;
    }[],
    animationType?: "slide" | "fade"
    asset?: number,
}