{"id":43342316,"url":"https://github.com/codersera-repo/expo-modal","last_synced_at":"2026-02-02T01:16:13.208Z","repository":{"id":57148365,"uuid":"194230882","full_name":"codersera-repo/expo-modal","owner":"codersera-repo","description":"Shows the modal full screen on the react-native window","archived":false,"fork":false,"pushed_at":"2020-03-22T13:14:33.000Z","size":12,"stargazers_count":2,"open_issues_count":1,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-08-09T05:53:48.258Z","etag":null,"topics":["expo","expo-modal","react-native"],"latest_commit_sha":null,"homepage":null,"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/codersera-repo.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":"2019-06-28T07:46:24.000Z","updated_at":"2021-03-26T01:55:41.000Z","dependencies_parsed_at":"2022-09-05T16:51:13.013Z","dependency_job_id":null,"html_url":"https://github.com/codersera-repo/expo-modal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/codersera-repo/expo-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codersera-repo%2Fexpo-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codersera-repo%2Fexpo-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codersera-repo%2Fexpo-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codersera-repo%2Fexpo-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codersera-repo","download_url":"https://codeload.github.com/codersera-repo/expo-modal/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codersera-repo%2Fexpo-modal/sbom","scorecard":{"id":297652,"data":{"date":"2025-08-11","repo":{"name":"github.com/codersera-repo/expo-modal","commit":"c115e411e5a9731df1dfc7cf125f14984b7ac1d2"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.7,"checks":[{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Code-Review","score":1,"reason":"Found 1/8 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 3 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-17T19:56:05.781Z","repository_id":57148365,"created_at":"2025-08-17T19:56:05.781Z","updated_at":"2025-08-17T19:56:05.781Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28998411,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-01T23:10:54.274Z","status":"ssl_error","status_checked_at":"2026-02-01T23:10:47.298Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["expo","expo-modal","react-native"],"created_at":"2026-02-02T01:16:12.733Z","updated_at":"2026-02-02T01:16:13.203Z","avatar_url":"https://github.com/codersera-repo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Installation\n\n`npm install expo-modal --save`\n\n**Background**\n\nIn browser css, we have display style attribute and it has the following possible values\n- static\n- relative\n- absolute\n- fixed\n\nBut in react-native `fixed` is missing which essentially means that you can't have an element with the display:fixed styling.\nYou can have `absolute` but as you know `absolute` puts the element relative to the parent and not to the window.\n\nNow, what if you have a use case. Like if you have a modal, which covers the full screen. \nThis is not possible with react-native.\n\nTo solve that problem, you can add a element at the top of the tree, and tweak its visibility through react.\n\nThis library does the exact same thing.\n\nOne more thing to note here is that, in android, the zIndex behaves differently and it is important to have the element render at the last if you want it to come on the top of the UI.\n\n**Usage**\n\nIn your entry app.js file add Modal component.\n\n```\n/*App.js*/\n\nimport (wrapIntoModal} from 'expo-modal';\n\nexport default class App extends React.Component {\n\n  render() {\n\n    return\n        wrapIntoModal(\u003cView style={styles.container}\u003e\n          {/*other components*/}\n        \u003c/View\u003e)\n  }\n     \n}\n\n```\n\nNow in the component, where you want to display the modal, simply call showModal(yourComponent). `yourComponent` will be shown in the center of your modal.\n\nYou can always tweak the styling by passing containerStyle props.\n\n**Full example** \n\n```import React from 'react';\n   import {Video} from 'expo';\n   import {Dimensions, StyleSheet, Text, TouchableHighlight, TouchableOpacity, View} from 'react-native';\n   import {dismissModal, Modal, showModal, wrapIntoModal} from 'expo-modal';\n   \n   const {height, width} = Dimensions.get('window');\n   \n   export default class App extends React.Component {\n   \n       render() {\n   \n           // innerComponent is the one that'll be displayed within the modal, you have full control of its styling.\n           const innerComponent = \u003cView style={{height: height/2 , width: width, justifyContent: 'center', alignItems: 'center'}}\u003e\n               \u003cText\u003eHello world\u003c/Text\u003e\n               \u003cTouchableOpacity onPress={() =\u003e dismissModal()} \u003e\u003cText\u003eclose modal\u003c/Text\u003e\u003c/TouchableOpacity\u003e\n           \u003c/View\u003e;\n   \n           const appContainer = \u003cView style={styles.container}\u003e\n               \u003cVideo\n                   source={{uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4'}}\n                   shouldPlay={true}\n                   resizeMode=\"cover\"\n                   style={styles.videoPlayer}\n               /\u003e\n               \u003cTouchableHighlight\n                   onPress={() =\u003e {showModal(innerComponent)}}\n               \u003e\n                   \u003cText\u003e Touch Here \u003c/Text\u003e\n               \u003c/TouchableHighlight\u003e\n           \u003c/View\u003e;\n   \n           return wrapIntoModal(appContainer, {{backgroundColor: 'blue'}})\n       }\n   }\n   \n   const styles = StyleSheet.create({\n       container: {\n           flex: 1,\n           backgroundColor: '#fff',\n           alignItems: 'center',\n           justifyContent: 'center',\n       },\n       videoPlayer: {\n           position: 'relative',\n           width: '100%',\n           aspectRatio:3/2,\n       },\n   });\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodersera-repo%2Fexpo-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodersera-repo%2Fexpo-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodersera-repo%2Fexpo-modal/lists"}