Welcome to react-native-menu-viewer 👋

This package provides an efficient and customizable grid view to show your application's screens with a default navigation bar at top.

🏠 Homepage

Install

npm install react-native-menu-viewer

Usage

npm run start

Run tests

npm run test

Screenshots

Example

import {View,StatusBar,Text} from 'react-native'
import * as React from 'react';

//import your screens you want show

import BankDetails from './app/screen/BankDetails'
import TimeTable from './app/screen/TimeTable'
import Theme from './app/screen/Theme'
import EditDetails from './app/screen/EditDetails'
import ChatBox from './app/screen/ChatBox'
import Logout from './app/screen/Logout'
import Exit from './app/screen/Exit'
import Books from './app/screen/Books'
import Menu from './app/screen/Menu'
import Feedback from './app/screen/Feedback'
import Password from './app/screen/Password'


import ReactNativeMenuViewer from 'react-native-menu-viewer'

export default function App() {
  return (
    <View style={{flex:1}}>
      <StatusBar barStyle = "dark-content" hidden = {false} backgroundColor = "transparent" translucent = {true}/>
      
      <ReactNativeMenuViewer
        tilesPerRow={2} 
        navigationOptions={navigationOptions} 
        menuContainerStyle={{paddingTop:StatusBar.currentHeight,backgroundColor:'#f2f2f2'}}
        tileStyle={{borderColor:'#f2f2f2',borderWidth:2}}
        imageStyle={{tintColor:'#ff9966',padding:25}}
        screenContainerStyle={{paddingTop:StatusBar.currentHeight,backgroundColor:'#f2f2f2'}}
        tileTitleStyle={{fontSize:15}}
      />
      
    </View>

  );
}

const navigationOptions = [
  {
    image:"https://i.ibb.co/3WLp3HD/bank-menua.png",
    name:"Bank Details",
    screen:BankDetails,
  },{
    image:"https://i.ibb.co/xY4smHp/clocka.png",
    name:"TimeTable",
    screen:TimeTable
  },
  {
    image:"https://i.ibb.co/qnLSc2Z/dark-Mode-Menu.png",
    name:"Theme",
    screen:Theme
  },{
    image:"https://i.ibb.co/TLhwwpd/edit.png",
    name:"Edit Details",
    screen:EditDetails
  },
  {
    image:"https://i.ibb.co/p26fSw2/feedback-menu.png",
    name:"Chat Box",
    screen:ChatBox
  },{
    image:"https://i.ibb.co/r5zqP2N/logout.png",
    name:"Logout",
    screen:Logout
  },{
    image:"https://i.ibb.co/FHqnPL3/logout-menu.png",
    name:"Exit",
    screen:Exit
  },
  {
    image:"https://i.ibb.co/bFQxWQt/marks-menu.png",
    name:"Books",
    screen:Books
  },{
    image:"https://i.ibb.co/kSqDz09/menu.png",
    name:"Menu",
    screen:Menu
  },
  {
    image:"https://i.ibb.co/pd67zv6/no-Preview.png",
    name:"Feedback",
    screen:Feedback
  },
  {
    image:"https://i.ibb.co/3YHz3HJ/password-menu.png",
    name:"Password",
    screen:Password
  }
]

API Usage

Property	Type	Required	Description
tilesPerRow	number	NO (default is 1)	Number of tiles to show in each row
navigationOptions	Array of Objects	YES	Details like your screen name, image to show on the tile and navigation screen
menuContainerStyle	Style	NO	Styles for Menu screen
tileStyle	Style	NO	Styles for Tiles
tileTitleStyle	Style	NO	Style for title of tiles
imageStyle	Style	NO	Style for image on tiles (provide padding to increase or decrease the size of image)
screenContainerStyle	Style	NO	Style for screen which appear on Tiles click event
headerStyle	Style	NO	Screen header style
headerTextStyle	Style	NO	Style for header text

Author

👤 Rishabh Goel

• Github: @Goel-Rishabh
• LinkedIn: @https://www.linkedin.com/in/rishabh-goel-55a25b135/
• Instagram: @_rishabh__goel _]

Show your support

Give a ⭐️ if this project helped you!

---