{"id":4317,"url":"https://github.com/xgfe/react-native-stylesheet-xg","last_synced_at":"2025-10-11T20:48:42.986Z","repository":{"id":57340467,"uuid":"57375448","full_name":"xgfe/react-native-stylesheet-xg","owner":"xgfe","description":"extension stylesheet for cross platforms and responsive","archived":false,"fork":false,"pushed_at":"2018-11-18T06:48:30.000Z","size":96,"stargazers_count":10,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-11T20:48:41.027Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Objective-C","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/xgfe.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-04-29T10:03:13.000Z","updated_at":"2025-02-06T15:59:11.000Z","dependencies_parsed_at":"2022-09-09T09:00:54.469Z","dependency_job_id":null,"html_url":"https://github.com/xgfe/react-native-stylesheet-xg","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/xgfe/react-native-stylesheet-xg","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xgfe%2Freact-native-stylesheet-xg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xgfe%2Freact-native-stylesheet-xg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xgfe%2Freact-native-stylesheet-xg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xgfe%2Freact-native-stylesheet-xg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xgfe","download_url":"https://codeload.github.com/xgfe/react-native-stylesheet-xg/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xgfe%2Freact-native-stylesheet-xg/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279008636,"owners_count":26084480,"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-10-11T02:00:06.511Z","response_time":55,"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:08.048Z","updated_at":"2025-10-11T20:48:42.957Z","avatar_url":"https://github.com/xgfe.png","language":"Objective-C","funding_links":[],"categories":["Components","Others"],"sub_categories":["UI"],"readme":"# react-native-stylesheet-xg\nextension stylesheet for cross platforms and responsive\n\n## Example\nCheck [index.js](https://github.com/xgfe/react-native-stylesheet-xg/blob/master/example/index.android.js) in the Example folder.\n\n### origin\n```javascript\n{\n  test1: {\n    width: 0,\n    height: 1,\n    borderWidth: 100,\n    $borderRadius: 100,\n  },\n  test: {\n    width: 100,\n    color: 'red',\n    android: {\n      width: 0,\n      height: 1,\n      width: 200,\n      color: 'blue'\n    },\n    ios: {\n      width: 300,\n      color: 'green'\n    }\n  }\n}\n```\n\n### android (width: 360, base: 320)\n```javascript\n{\n  test1: {\n    width: 0,\n    height: 1,\n    borderWidth: 113,\n    $borderRadius: 100,\n  },\n  test: {\n    width: 225,\n    color: 'blue',\n    height: 1\n  }\n}\n```\n\n### ios (width: 320, base: 320)\n```javascript\n{\n  test1: {\n    width: 0,\n    height: 1,\n    borderWidth: 100,\n    $borderRadius: 100,\n  },\n  test: {\n    width: 300,\n    color: 'green'\n  }\n}\n```\n\n## Usage\n\n```bash\nnpm install react-native-stylesheet-xg --save\n```\n\n```javascript\nimport StyleSheet from 'react-native-stylesheet-xg';\n\n// before use, you may need set the base width with StyleSheet.setBase(width:number), which default to 320\nStyleSheet.setBase(360); // this is optional, if your target screen is 320\n\n// use react-native-stylesheet-xg replace react-native StyleSheet Module\nStyleSheet.create({\n  test: {\n    width: 100\n  }\n});\n\n// or you can use StyleSheet.r(num:number) to get the target responsive num\nStyleSheet.r(100); // 113 (width: 360, base: 320)\n\n```\n\n| Method  | Params  | Description |\n| :------------ |:---------------:| :---------------:|\n| setBase | width:number | set the target width according to the UI |\n| setMinWidth | width:number | set the responsive minWidth. If the device width is less than minWidth, will use minWidth as the device width! |\n| setMaxWidth | width:number | set the responsive maxWidth. If the device width is greater than minWidth, will use maxWidth as the device width! |\n| create | style:object | replace native StyleSheet creating stylesheet  |\n| r | num:number | the inner function to get the responsive size according to the device with and base |\n| switchR | isRon:boolean | set the flag to switch the responsive size function, which return the prev value |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxgfe%2Freact-native-stylesheet-xg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxgfe%2Freact-native-stylesheet-xg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxgfe%2Freact-native-stylesheet-xg/lists"}