{"id":28991288,"url":"https://github.com/osedea/react-native-action-bar","last_synced_at":"2025-06-25T01:14:33.209Z","repository":{"id":46938757,"uuid":"60114687","full_name":"Osedea/react-native-action-bar","owner":"Osedea","description":"An Android-like action bar for react-native","archived":false,"fork":false,"pushed_at":"2023-01-25T07:19:13.000Z","size":1026,"stargazers_count":58,"open_issues_count":16,"forks_count":15,"subscribers_count":25,"default_branch":"master","last_synced_at":"2025-06-25T01:14:32.550Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Osedea.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-31T18:46:10.000Z","updated_at":"2023-08-28T19:25:08.000Z","dependencies_parsed_at":"2023-02-14T05:30:26.224Z","dependency_job_id":null,"html_url":"https://github.com/Osedea/react-native-action-bar","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/Osedea/react-native-action-bar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Osedea%2Freact-native-action-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Osedea%2Freact-native-action-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Osedea%2Freact-native-action-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Osedea%2Freact-native-action-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Osedea","download_url":"https://codeload.github.com/Osedea/react-native-action-bar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Osedea%2Freact-native-action-bar/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261783462,"owners_count":23208956,"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":[],"created_at":"2025-06-25T01:14:28.934Z","updated_at":"2025-06-25T01:14:33.191Z","avatar_url":"https://github.com/Osedea.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-action-bar\nAn Android-like action bar for react-native\n\nFor react-native v0.39+\n\n# :warning: Breaking change for versions \u003c 2.*\n\nThe component has been redone so it hasn't much in common.\n\nCheck that [README](https://github.com/Osedea/react-native-action-bar/blob/965d0c7a6c081cd68375a85e610ddf58361cd103/README.md) for versions lower than 2.*\n\n# Example\n\niOS             |  Android\n:-------------------------:|:-------------------------:\n\u003cimg src=\"https://cdn.rawgit.com/Osedea/react-native-action-bar/603a698fe435c5e4ce860e80a2fa7d839d3fee3a/doc-images/ios.png\" height=\"500\"/\u003e | \u003cimg src=\"https://cdn.rawgit.com/Osedea/react-native-action-bar/603a698fe435c5e4ce860e80a2fa7d839d3fee3a/doc-images/android.png\" height=\"500\"/\u003e\n\n```js\n\u003cActionBar\n    containerStyle={styles.bar}\n    title={'React-native-action-bar Example'}\n    rightText={'Hello'}\n    leftIconName={'menu'}\n    leftBadge={''}\n    onLeftPress={() =\u003e console.log('Left!')}\n    onTitlePress={() =\u003e console.log('Title!')}\n    rightIcons={[\n        {\n            name: 'star',\n            badge: '1',\n            onPress: () =\u003e console.log('Right Star !'),\n        },\n        {\n            name: 'phone',\n            badge: '1',\n            onPress: () =\u003e console.log('Right Phone !'),\n            isBadgeLeft: true,\n        },\n        {\n            name: 'plus',\n            onPress: () =\u003e console.log('Right Plus !'),\n        },\n        {\n            name: 'flag',\n            badge: '1',\n            onPress: () =\u003e console.log('Right Flag !'),\n        },\n        {\n            image: require('my-custom-image.png'), // To use a custom image\n            badge: '1',\n            onPress: () =\u003e console.log('Right Custom image !'),\n        },\n    ]}\n/\u003e\n```\n\n# Are you looking for React-native's [ToolbarAndroid](https://facebook.github.io/react-native/docs/toolbarandroid.html)?\n\nTo allow more customization, I do not use [ToolbarAndroid](https://facebook.github.io/react-native/docs/toolbarandroid.html), however, this might be what you are looking for instead of my package.\n\n`react-native-action-bar` is here to provide a similar top screen bar but that looks the same on Android and iOS.\n\n# Properties\n\nProperty Name | Type | Comment\n--- | --- | ---\nallowFontScaling | React.PropTypes.bool | If you want to allow font scaling on the title and the right text (`false` by default)\nbackgroundColor | React.PropTypes.string | The background color of the Bar\nbadgeColor | [Badge](./Badge.js).propTypes.backgroundColor | The color of all badges\nbadgeTextColor | [Badge](./Badge.js).propTypes.color | The color of the text of the badges\ncontainerStyle | ViewPropTypes.style | Style of the container of the bar (has the backgroundColor)\ndisableShadows | React.PropTypes.bool | If you want the ActionBar to drop a shadow or not (The default is `false`)\ndisableStatusBarHandling | React.PropTypes.bool | If you want the ActionBar to set the color/style of the StatusBar (The default is `false`)\nelevation | React.PropTypes.number | On Android, to 'control' the Shadow dropped by the bar (default is `2`)\niconContainerStyle | ViewPropTypes.style | See the [Icon](./Icon.js) component (applies to all Icons (left and right)\niconImageStyle | Image.propTypes.style | See the [Icon](./Icon.js) component (applies to all Icons (left and right)\nisLeftBadgeLeft | React.PropTypes.bool | Position of the badge on the left Icon\nleftBadge | [Badge](./Badge.js).propTypes.content | Text of the badge on the left Icon (`''` is a valid value, it will display an empty badge. `undefined` is needed to not have the badge displayed)\nleftIconContainerStyle | [Icon](./Icon.js).propTypes.containerStyle | See the [Icon](./Icon.js) component\nleftIconImage | [Icon](./Icon.js).propTypes.source | An image to use as Icon (`require()`). Don't use remote images (`{ uri: ... }`) as it will have bad performance, but I guess you can\nleftIconImageStyle | [Icon](./Icon.js).propTypes.imageStyle | See the [Icon](./Icon.js) component\nleftIconName | [Icon](./Icon.js).propTypes.name | The name of one of the predefined Icons (see [`List of predefined Icons`](#predefined-icons))\nleftTouchableChildStyle | ViewPropTypes.style | The style of the View inside the `TouchableWithoutFeedback` element for the left Icon\nleftZoneContentContainerStyle | ViewPropTypes.style | The style of the View around the `TouchableWithoutFeedback` element for the left Icon\nonLeftPress | React.PropTypes.func | The function to execute `onPress` for the left Icon\nonRightTextPress | React.PropTypes.func | The function to execute `onPress` for the `Text` that you can display on the right of the Title\nonTitlePress | React.PropTypes.func | The function to execute `onPress` for the Title\nrenderLeftSide | React.PropTypes.func | A function to override the rendering of the part left of the Title\nrenderRightSide | React.PropTypes.func | A function to override the rendering of the part right of the Title\nrightIconContainerStyle | [Icon](./Icon.js).propTypes.containerStyle | See the [Icon](./Icon.js) component\nrightIconImageStyle | [Icon](./Icon.js).propTypes.imageStyle | See the [Icon](./Icon.js) component\nrightIcons | React.PropTypes.arrayOf(\u003cbr\u003e    React.PropTypes.shape({\u003cbr\u003e         ...[Icon](./Icon.js).propTypes,\u003cbr\u003e        badge: [Badge](./Badge.js).propTypes.content,\u003cbr\u003e        onPress: React.PropTypes.func.isRequired,\u003cbr\u003e    }),\u003cbr\u003e) | See below\nrightText | React.PropTypes.string | The text to display on the right\nrightTextStyle | Text.propTypes.style | Style of the text to display on the right\nrightTouchableChildStyle | ViewPropTypes.style | The style of the View inside the `TouchableWithoutFeedback` element for all the Icons on the right\nrightZoneContentContainerStyle | ViewPropTypes.style | The style of the View around all the Icons + Text on the right\nthrottleDelay | React.PropTypes.number | The delay to throttle the presses on the Icons (The default is `750ms`)\ntitle | React.PropTypes.string | The Text of the Title\ntitleContainerStyle | ViewPropTypes.style | The style of the `View` containing the `Text` element for the Title\ntitleStyle | Text.propTypes.style | The style of the `Text` element for the Title\n\n## rightIcons elements example\n\n```\n{\n    name: 'phone',\n    badge: '1',\n    onPress: () =\u003e console.log('Right Phone !'),\n    isBadgeLeft: true,\n}\n```\n\n# Predefined Icons\n\nRight now the following Icons are defined:\n * \u003cimg src='https://cdn.rawgit.com/Osedea/react-native-action-bar/603a698fe435c5e4ce860e80a2fa7d839d3fee3a/doc-images/back.png' width=40 /\u003e back\n * \u003cimg src='https://cdn.rawgit.com/Osedea/react-native-action-bar/603a698fe435c5e4ce860e80a2fa7d839d3fee3a/doc-images/flag.png' width=40 /\u003e flag\n * \u003cimg src='https://cdn.rawgit.com/Osedea/react-native-action-bar/603a698fe435c5e4ce860e80a2fa7d839d3fee3a/doc-images/loading.png' width=40 /\u003e loading\n * \u003cimg src='https://cdn.rawgit.com/Osedea/react-native-action-bar/603a698fe435c5e4ce860e80a2fa7d839d3fee3a/doc-images/location.png' width=40 /\u003e location\n * \u003cimg src='https://cdn.rawgit.com/Osedea/react-native-action-bar/603a698fe435c5e4ce860e80a2fa7d839d3fee3a/doc-images/menu.png' width=40 /\u003e menu\n * \u003cimg src='https://cdn.rawgit.com/Osedea/react-native-action-bar/603a698fe435c5e4ce860e80a2fa7d839d3fee3a/doc-images/phone.png' width=40 /\u003e phone\n * \u003cimg src='https://cdn.rawgit.com/Osedea/react-native-action-bar/603a698fe435c5e4ce860e80a2fa7d839d3fee3a/doc-images/plus.png' width=40 /\u003e plus\n * \u003cimg src='https://cdn.rawgit.com/Osedea/react-native-action-bar/603a698fe435c5e4ce860e80a2fa7d839d3fee3a/doc-images/star.png' width=40 /\u003e star\n * \u003cimg src='https://cdn.rawgit.com/Osedea/react-native-action-bar/603a698fe435c5e4ce860e80a2fa7d839d3fee3a/doc-images/star-outline.png' width=40 /\u003e star-outline\n\n# Example\n\nSee an implementation example in the [Example](./Example/) folder\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fosedea%2Freact-native-action-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fosedea%2Freact-native-action-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fosedea%2Freact-native-action-bar/lists"}