1.0.0 ⢠Published 5 years ago
react-native-menu-viewer v1.0.0
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!
1.0.0
5 years ago