{"id":13776465,"url":"https://github.com/brentvatne/react-native-overlay","last_synced_at":"2025-05-16T16:06:08.108Z","repository":{"id":30253212,"uuid":"33804495","full_name":"brentvatne/react-native-overlay","owner":"brentvatne","description":"An \u003cOverlay /\u003e component that brings content inside to the front of the view regardless of its current position in the component tree.","archived":false,"fork":false,"pushed_at":"2016-09-22T16:57:56.000Z","size":1667,"stargazers_count":638,"open_issues_count":23,"forks_count":79,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-05-13T17:37:36.043Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Objective-C","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/brentvatne.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-12T05:28:10.000Z","updated_at":"2024-11-05T22:54:35.000Z","dependencies_parsed_at":"2022-07-31T08:37:57.358Z","dependency_job_id":null,"html_url":"https://github.com/brentvatne/react-native-overlay","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brentvatne%2Freact-native-overlay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brentvatne%2Freact-native-overlay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brentvatne%2Freact-native-overlay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brentvatne%2Freact-native-overlay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brentvatne","download_url":"https://codeload.github.com/brentvatne/react-native-overlay/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254564127,"owners_count":22092122,"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":"2024-08-03T18:00:26.692Z","updated_at":"2025-05-16T16:06:08.053Z","avatar_url":"https://github.com/brentvatne.png","language":"Objective-C","funding_links":[],"categories":["\u003ca name=\"UI:-Native-Modules\"\u003eUI: Native Modules\u003c/a\u003e","Objective-C"],"sub_categories":[],"readme":"## react-native-overlay\n\nAn `\u003cOverlay /\u003e` component that brings content inside to the front of the view regardless of its current position in the component tree. This was extracted from [react-native-modal](https://github.com/brentvatne/react-native-modal) because a modal is not the only time that you want to bring something to the front of the screen.\n\n### Should you use this?\n\nIdeally, no. This should probably only be used as a last resort. You can usually accomplish what you need to by just absolute positioning an view at the bottom of your root component.\n\n*In fact, as of 0.29.0 zIndex is supported on iOS and Android, so you should probably never use this.*\n\n### Add it to your project\n\n1. Run `npm install react-native-overlay --save`\n2. Open your project in XCode, right click on `Libraries` and click `Add\n   Files to \"Your Project Name\"` [(Screenshot)](http://url.brentvatne.ca/jQp8) then [(Screenshot)](http://url.brentvatne.ca/1gqUD).\n3. Add `libRNOverlay.a` to `Build Phases -\u003e Link Binary With Libraries`\n   [(Screenshot)](http://url.brentvatne.ca/17Xfe).\n4. Whenever you want to use it within React code now you can: `var Overlay = require('react-native-overlay');`\n\n## Example - Loading Overlay\n\nThis shows how you might implement a loading overlay and uses\n[react-native-blur](http://github.com/kureev/react-native-blur) to blur\nthe background. Notice that all we need to do is wrap the content that\nwe want to bring to the front in an `Overlay` element!\n\n```javascript\nvar React = require('react-native');\nvar Overlay = require('react-native-overlay');\nvar BlurView = require('react-native-blur').BlurView;\n\nvar {\n  View,\n  ActivityIndicatorIOS,\n  StyleSheet,\n} = React;\n\nvar LoadingOverlay = React.createClass({\n  getDefaultProps(): StateObject {\n    return {\n      isVisible: false\n    }\n  },\n\n  render(): ReactElement {\n    return (\n      \u003cOverlay isVisible={this.props.isVisible}\u003e\n        \u003cBlurView style={styles.background} blurType=\"dark\"\u003e\n          \u003cActivityIndicatorIOS\n            size=\"large\"\n            animating={true}\n            style={styles.spinner} /\u003e\n        \u003c/BlurView\u003e\n      \u003c/Overlay\u003e\n    );\n  }\n});\n\nvar styles = StyleSheet.create({\n  background: {\n    flex: 1,\n    justifyContent: 'center',\n  },\n})\n\nmodule.exports = LoadingOverlay;\n```\n\nElsewhere in our app, we can render this:\n\n```javascript\nvar LoadingOverlayExampleApp = React.createClass({\n  render: function() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cImage source={require('image!announcement')} style={styles.image} /\u003e\n\n        { /* It doesn't matter where we put this component, it can be nested */ }\n        { /* anywhere within your component tree */ }\n        \u003cLoadingOverlay isVisible={true} /\u003e\n      \u003c/View\u003e\n    );\n  }\n});\n```\nThis would produce something like this:\n\n![Example code result](https://raw.githubusercontent.com/brentvatne/react-native-overlay/master/example.png)\n\nYou can try this code yourself by cloning this repo and running\n`Examples/LoadingOverlay`.\n\n## Example - Toast\n\nThere are so many other types of overlays but I thought I'd give another\nsimple example to stir your imagination.\n\n![Example code result](https://raw.githubusercontent.com/brentvatne/react-native-overlay/master/example-toast.png)\n\nCheck it out in `Examples/Toast`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrentvatne%2Freact-native-overlay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrentvatne%2Freact-native-overlay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrentvatne%2Freact-native-overlay/lists"}