{"id":16453718,"url":"https://github.com/vonovak/react-native-bottom-toolbar","last_synced_at":"2025-06-18T10:37:33.714Z","repository":{"id":46934048,"uuid":"74208788","full_name":"vonovak/react-native-bottom-toolbar","owner":"vonovak","description":"UI Bar in javascript for react native","archived":false,"fork":false,"pushed_at":"2022-12-03T15:40:42.000Z","size":845,"stargazers_count":49,"open_issues_count":4,"forks_count":11,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-02-22T04:46:51.907Z","etag":null,"topics":["android","ios","menu","menubar","react-native","tabbar","tabs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vonovak.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["vonovak"]}},"created_at":"2016-11-19T13:02:22.000Z","updated_at":"2024-11-08T15:39:04.000Z","dependencies_parsed_at":"2023-01-22T20:45:11.898Z","dependency_job_id":null,"html_url":"https://github.com/vonovak/react-native-bottom-toolbar","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vonovak%2Freact-native-bottom-toolbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vonovak%2Freact-native-bottom-toolbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vonovak%2Freact-native-bottom-toolbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vonovak%2Freact-native-bottom-toolbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vonovak","download_url":"https://codeload.github.com/vonovak/react-native-bottom-toolbar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243826788,"owners_count":20354220,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","ios","menu","menubar","react-native","tabbar","tabs"],"created_at":"2024-10-11T10:16:34.562Z","updated_at":"2025-03-16T17:37:00.502Z","avatar_url":"https://github.com/vonovak.png","language":"JavaScript","funding_links":["https://github.com/sponsors/vonovak"],"categories":[],"sub_categories":[],"readme":"# react-native-bottom-toolbar\n\nBottom toolbar styled as in iOS, implemented in JS, typed with Flow. Highly configurable with text or icons (I recommend `react-native-vector-icons`) and nested actions that display in ActionSheetIOS (iOS only). You can also render your own components as content.\n\n### Expo demo\n\n[here](https://expo.io/@vonovak/bottom-toolbar-demo), code for the demo is in the `example` folder\n\n### Installation \u0026 usage\n\n`npm i react-native-bottom-toolbar`\nor\n`yarn add react-native-bottom-toolbar`\n\n```\nimport BottomToolbar from 'react-native-bottom-toolbar'\n\n\u003cBottomToolbar\u003e\n  \u003cBottomToolbar.Action\n    title=\"Edit\"\n    onPress={(index, propsOfThisAction) =\u003e\n      console.warn(index + ' ' + JSON.stringify(propsOfThisAction))}\n  /\u003e\n  \u003cBottomToolbar.Action\n    title=\"Copy ULR\"\n    onPress={(index, propsOfThisAction) =\u003e\n      console.warn(index + ' ' + JSON.stringify(propsOfThisAction))}\n  /\u003e\n  \u003cBottomToolbar.Action\n    title=\"Delete\"\n    onPress={(index, propsOfThisAction) =\u003e\n      console.warn(index + ' ' + JSON.stringify(propsOfThisAction))}\n  /\u003e\n\u003c/BottomToolbar\u003e\n```\n\n\u003cimg src=\"https://raw.githubusercontent.com/vonovak/react-native-bottom-toolbar/master/example/one.png\" width=\"500\" /\u003e\n\n### Configuration\n\nThe component accepts these props:\n\n```\ntype BottomToolbarProps = {\n  IconComponent?: React.ComponentType\u003c*\u003e, // use this together with `color` prop and `iconName` from `BottomToolbar.Action`\n  iconSize: number,\n  onPress: (number, Object) =\u003e any,\n  wrapperStyle?: ViewStyleProp,\n  textStyle?: ViewStyleProp,\n  buttonStyle?: ViewStyleProp,\n  color: string,\n  disabledColor: string,\n  showIf: boolean,\n  children: React.Node,\n};\n\ntype ActionProps = {\n  IconElement?: React.Node, // use this to provide your own custom react element (e.g. icon with text)\n  IconComponent?: React.ComponentType\u003c*\u003e, // overrides `IconComponent` from `BottomToolbar`\n  title: string,\n  iconName?: string,\n  disabled?: boolean,\n  onPress?: (number, Object) =\u003e any,\n  color?: string,\n  testID?: string,\n  iconSize?: number,\n  actionSheetTitle?: string,\n  actionSheetMessage?: string,\n};\n\ntype NestedActionProps = {\n  title: string,\n  onPress?: (number, Object) =\u003e any,\n  style?: 'cancel' | 'destructive',\n};\n```\n\nThe `onPress` function can be specified on three different levels: you may pass it as a prop to the component itself (see the first example), you may include it in the `BottomToolbar.Action` (see the first example), or may include it in the `BottomToolbar.NestedAction` (see the second example).\n\nThe function has to be specified on at least one level. You may combine the levels together - the `onPress` of a `BottomToolbar.NestedAction` overrides the `onPress` of an `BottomToolbar.Action`, and the `onPress` of a `BottomToolbar.Action` overrides the `onPress` of the component. This gives you a lot of flexibility - you can have one event handler for all actions and nested actions, or you can specify the handlers separately. The `onPress` function always receives the `action` / `nested action` it was triggered from, so you can easily distinguish the event source.\n\nI suggest you pick an approach that works best for a given scenario and stick with it so you keep you code easy to understand.\n\n### License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvonovak%2Freact-native-bottom-toolbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvonovak%2Freact-native-bottom-toolbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvonovak%2Freact-native-bottom-toolbar/lists"}