rn-navigation-templates

rn-navigation-templates

A built-in navigation tabs and drawers for your react-native application.

Demo:

The package includes 6 different templates for navigation.

LDrawer	CDrawer	BottomTabsAnimated
TopTabsIconView	TopTabsTextView	BottomTabs

Installation

First of all, copy the command

  npm install rn-navigation-templates

Now, if you are working on expo project you have to add one line in the file called babel.config.js.

  module.exports = function (api) {
  ...
  return {
    ...
    plugins: ["react-native-reanimated/plugin"],
  };
};

Note : You have to add plugins: at the end of any text inside return keyword.

Now, you can choose the navigation template you want to add in your project.

Props:

Component	Props	Values	Description
<LDrawer /> <CDrawer />	tabs profile styles	tabs - array of objects profile styles - objects	tabs should contains object name icon screen profile should contain name email image styles should contains HEADCOLOR THEME COLOR
<BottomTabsAnimated />	tabs styles	tabs - array of objects styles - objects	tabs should contains objects name icon screen color styles should contain only Color
<TopTabsIconView />	tabs styles	tabs - array of objects styles - objects	tabs should contains objects name icon screen styles should contains BOTTOMLINE BGCOLOR
<TopTabsTextView />	tabs styles	tabs - array of objects styles - objects	tabs should contains objects name screen styles should contains BOTTOMLINE BGCOLOR COLOR
<BottomTabs />	tabs styles	tabs - array of objects styles - objects	tabs should contains objects name icon focused screen styles should contain only bgColor activeColor Color

Note: You have to pass all the props mention above for particular component, otherwise it will throw an error.

Usage:

• LDrawer

  import React from "react";
  import Home from "./Screens/Home";
  import Settings from "./Screens/Settings";
  import Message from "./Screens/Message";
  import { FontAwesome5, Ionicons, MaterialIcons } from "@expo/vector-icons";
  import bgImage from "./assets/favicon.png";
  import { LDrawer } from "rn-navigation-templates";

  let tabs = [
    {
      name: "Home",
      icon: <FontAwesome5 name="home" size={24} color="black" />,
      screen: Home,
    },
    {
      name: "Settings",
      icon: <Ionicons name="settings" size={24} color="black" />,
      screen: Settings,
    },
    {
      name: "Message",
      icon: <MaterialIcons name="message" size={24} color="black" />,
      screen: Message,
    },
  ];

  const styles = {
    HEADCOLOR: "white",
    THEME: "yellow",
    COLOR: "black",
  };

  const profile = {
    name: "Nikhil",
    email: "[e-mail]",
    image: bgImage,
  };

  export default App = () => {
    return <CDrawer profile={profile} tabs={tabs} styles={styles} />;
  };

• BottomTabsAnimated

  import React from "react";
  import Home from "./Screens/Home";
  import Settings from "./Screens/Settings";
  import Message from "./Screens/Message";
  import { FontAwesome5, Ionicons, MaterialIcons } from "@expo/vector-icons";
  import { BottomTabsAnimated } from "rn-navigation-templates";

  let tabs = [
    {
      name: "Home",
      icon: <FontAwesome5 name="home" size={24} color="black" />,
      screen: Home,
      color: 'red'
    },
    {
      name: "Settings",
      icon: <Ionicons name="settings" size={24} color="black" />,
      screen: Settings,
      color: 'blue'
    },
    {
      name: "Message",
      icon: <MaterialIcons name="message" size={24} color="black" />,
      screen: Message,
      color: 'green'
    },
  ];

  const styles = {
    Color: 'white',
  }

  export default App = () => {
    return <BottomTabsAnimated tabs={tabs} styles={styles} />;
  };

• TopTabsIconView

  import React from "react";
  import Home from "./Screens/Home";
  import Settings from "./Screens/Settings";
  import Message from "./Screens/Message";
  import { FontAwesome5, Ionicons, MaterialIcons } from "@expo/vector-icons";
  import { TopTabsIconView } from "rn-navigation-templates";

  let tabs = [
    {
      name: "Home",
      icon: <FontAwesome5 name="home" size={24} color="black" />,
      screen: Home,
    },
    {
      name: "Settings",
      icon: <Ionicons name="settings" size={24} color="black" />,
      screen: Settings,
    },
    {
      name: "Message",
      icon: <MaterialIcons name="message" size={24} color="black" />,
      screen: Message,
    },
  ];

  const styles = {
    BOTTOMLINE: "red",
    BGCOLOR: "yellow",
  };

  export default App = () => {
    return <TopTabsIconView tabs={tabs} styles={styles} />;
  };

• BottomTabs

  import React from "react";
  import Home from "./Screens/Home";
  import Settings from "./Screens/Settings";
  import Message from "./Screens/Message";
  import { FontAwesome5, Ionicons, MaterialIcons } from "@expo/vector-icons";
  import { BottomTabs } from "rn-navigation-templates";

  let tabs = [
    {
      name: "Home",
      icon: <FontAwesome5 name="home" size={24} color="black" />,
      focused: <FontAwesome5 name="home" size={24} color="red" />,
      screen: Home,
    },
    {
      name: "Settings",
      icon: <Ionicons name="settings" size={24} color="black" />,
      focused: <Ionicons name="settings" size={24} color="red" />,
      screen: Settings,

    },
    {
      name: "Message",
      icon: <MaterialIcons name="message" size={24} color="black" />,
      focused: <MaterialIcons name="message" size={24} color="red" />,
      screen: Message,

    },
  ];

  const styles = {
    activeColor: "red",
    bgColor: "white",
    Color: "black",
  }

  export default App = () => {
    return <BottomTabs tabs={tabs} styles={styles} />;
  };

Author

• @NikhilBarot