{"id":4133,"url":"https://github.com/rafaelmotta/react-native-scl-alert","last_synced_at":"2025-08-04T00:32:20.088Z","repository":{"id":56495597,"uuid":"126094368","full_name":"rafaelmotta/react-native-scl-alert","owner":"rafaelmotta","description":"📢 A react native implementation of the package SCLAlertView-Swift","archived":true,"fork":false,"pushed_at":"2020-11-05T04:17:21.000Z","size":416,"stargazers_count":216,"open_issues_count":10,"forks_count":54,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-07-31T07:56:34.168Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://github.com/rafaelmotta/react-native-scl-alert","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/rafaelmotta.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":"2018-03-20T23:10:20.000Z","updated_at":"2024-10-10T10:58:03.000Z","dependencies_parsed_at":"2022-08-15T19:50:32.256Z","dependency_job_id":null,"html_url":"https://github.com/rafaelmotta/react-native-scl-alert","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/rafaelmotta/react-native-scl-alert","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaelmotta%2Freact-native-scl-alert","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaelmotta%2Freact-native-scl-alert/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaelmotta%2Freact-native-scl-alert/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaelmotta%2Freact-native-scl-alert/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rafaelmotta","download_url":"https://codeload.github.com/rafaelmotta/react-native-scl-alert/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaelmotta%2Freact-native-scl-alert/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268634038,"owners_count":24281891,"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","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-01-05T20:17:02.134Z","updated_at":"2025-08-04T00:32:19.745Z","avatar_url":"https://github.com/rafaelmotta.png","language":"JavaScript","funding_links":[],"categories":["Components","Others"],"sub_categories":["UI"],"readme":"# react-native-scl-alert\n\n[![npm version](https://badge.fury.io/js/react-native-scl-alert.svg)](https://badge.fury.io/js/react-native-scl-alert)\n\nA pure react native javascript implementation of the package https://github.com/vikmeup/SCLAlertView-Swift\n\n## Road Map\n- [x] Documentation to customize styles\n- [ ] Handle orientation \n- [x] Default images for header\n- [ ] Text Field Component\n- [ ] More transitions\n\n## Features\n\n- Declarative API\n- High customizable UI\n- Built in themes inspired on bootstrap\n\n## Demo\n\nYou can try on expo: https://exp.host/@rafaelmotta021/react-native-scl-alert-demo\n\nor just check the images bellow:\n\n\u003cp align=\"center\"\u003e\n  \u003cimg      src=\"https://raw.githubusercontent.com/rafaelmotta/react-native-scl-alert/master/demo-1.jpeg\" \n    height=\"500\" \n  /\u003e\n  \u003cimg      src=\"https://raw.githubusercontent.com/rafaelmotta/react-native-scl-alert/master/demo-2.jpeg\" \n    height=\"500\" \n  /\u003e\n  \u003cimg      src=\"https://raw.githubusercontent.com/rafaelmotta/react-native-scl-alert/master/demo-3.jpeg\" \n    height=\"500\" \n  /\u003e\n\u003c/p\u003e\n\n\n## Setup\n\n`yarn add react-native-scl-alert`\n\nor \n\n`npm install --save react-native-scl-alert`\n\n## Usage\n\n```javascript\nimport React from 'react'\nimport {\n  View,\n  Button,\n  StyleSheet\n} from 'react-native'\n\nimport {\n  SCLAlert,\n  SCLAlertButton\n} from 'react-native-scl-alert'\n\nexport default class App extends React.Component {\n  state = {\n    show: false\n  }\n\n  handleOpen = () =\u003e {\n    this.setState({ show: true })\n  }\n\n  handleClose = () =\u003e {\n    this.setState({ show: false })\n  }\n\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cButton title=\"Show\" onPress={this.handleOpen} /\u003e\n        \u003cSCLAlert\n          theme=\"info\"\n          show={this.state.show}\n          title=\"Lorem\"\n          subtitle=\"Lorem ipsum dolor\"\n        \u003e\n          \u003cSCLAlertButton theme=\"info\" onPress={this.handleClose}\u003eDone\u003c/SCLAlertButton\u003e\n        \u003c/SCLAlert\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#fff',\n    alignItems: 'center',\n    justifyContent: 'center'\n  }\n})\n\n```\n\n## Demo\nYou can customized the look and feel of this library the way you want, but, if you prefer, we ship 6 themes for you:\n\n- ```default```\n- ```inverse```\n- ```success```\n- ```info```\n- ```danger```\n- ```warning```\n\n## SCLAlert\n\n| Name | Type| Default | Description |\n| --- | --- | --- | --- |\n| show | PropTypes.bool | false | Show the alert |\n| cancellable | PropTypes.bool | true | If user press in the overlay, will trigger onRequestClose func|\n| onRequestClose | PropTypes.func | null | Trigger a function asking to close the alert |\n| slideAnimationDuration | PropTypes.number | 250 | Duration in ms of the alert animation |\n| overlayStyle | ViewPropTypes.style | {} | Extends the overlay view style |\n| title | PropTypes.string | REQUIRED | A string to render in the modal title |\n| titleContainerStyle | ViewPropTypes.style | {} | Extends the title container view style |\n| titleStyle | Text.propTypes.style | {} | Extends the title text style |\n| subtitle | PropTypes.string | REQUIRED | A string to render in the modal subtitle |\n| subtitleContainerStyle | ViewPropTypes.style | {} | Extends the subtitle container view style |\n| subtitleStyle | Text.propTypes.style | {} | Extends the subtitle text style |\n| headerContainerStyles | ViewPropTypes.style | {} | Extends the title headerContainer view style |\n| headerInnerStyles | ViewPropTypes.style | {} | Extends the title headerInner view style |\n| headerIconComponent | PropTypes.node | null | A component to render inside the header |\n| children | PropTypes.node | null | Custom content. Put here buttons and text inputs |\n\n## SCLAlertButton\n\n| Name | Type| Default | Description |\n| --- | --- | --- | --- |\n| children | PropTypes.string or PropTypes.node | REQUIRED | String or react node |\n| containerStyle | ViewPropTypes.style | {} | | custom style object to customize container view |\n| textStyle | Text.propTypes.style | {} | | custom style object to customize the text |\n| theme | PropTypes.string | 'default' | Check options above |\n| onPress | PropTypes.func | REQUIRED | Callback after user press in the button |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafaelmotta%2Freact-native-scl-alert","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frafaelmotta%2Freact-native-scl-alert","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafaelmotta%2Freact-native-scl-alert/lists"}