1.0.0 • Published 5 years ago

react-native-menu-viewer v1.0.0

Weekly downloads
1
License
ISC
Repository
-
Last release
5 years ago

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

1

npm.io

npm.io

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

PropertyTypeRequiredDescription
tilesPerRownumberNO (default is 1)Number of tiles to show in each row
navigationOptionsArray of ObjectsYESDetails like your screen name, image to show on the tile and navigation screen
menuContainerStyleStyleNOStyles for Menu screen
tileStyleStyleNOStyles for Tiles
tileTitleStyleStyleNOStyle for title of tiles
imageStyleStyleNOStyle for image on tiles (provide padding to increase or decrease the size of image)
screenContainerStyleStyleNOStyle for screen which appear on Tiles click event
headerStyleStyleNOScreen header style
headerTextStyleStyleNOStyle for header text

Author

šŸ‘¤ Rishabh Goel

Show your support

Give a ā­ļø if this project helped you!