{"id":20148118,"url":"https://github.com/mariusmonkam/rn-reusable-components","last_synced_at":"2026-04-18T01:36:49.016Z","repository":{"id":38874820,"uuid":"273081411","full_name":"mariusmonkam/rn-reusable-components","owner":"mariusmonkam","description":"Resusable components, Buttons, Cards, Images, List of objects,animation for react-native","archived":false,"fork":false,"pushed_at":"2022-12-06T22:40:40.000Z","size":1900,"stargazers_count":1,"open_issues_count":16,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-03T00:25:32.067Z","etag":null,"topics":["buttons","cardscript","image","list","react-native","svg"],"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/mariusmonkam.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":"2020-06-17T21:25:48.000Z","updated_at":"2024-02-23T10:53:36.000Z","dependencies_parsed_at":"2022-08-30T05:02:56.103Z","dependency_job_id":null,"html_url":"https://github.com/mariusmonkam/rn-reusable-components","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mariusmonkam/rn-reusable-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mariusmonkam%2Frn-reusable-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mariusmonkam%2Frn-reusable-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mariusmonkam%2Frn-reusable-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mariusmonkam%2Frn-reusable-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mariusmonkam","download_url":"https://codeload.github.com/mariusmonkam/rn-reusable-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mariusmonkam%2Frn-reusable-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271755444,"owners_count":24815408,"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-23T02:00:09.327Z","response_time":69,"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":["buttons","cardscript","image","list","react-native","svg"],"created_at":"2024-11-13T22:34:30.220Z","updated_at":"2026-04-18T01:36:43.994Z","avatar_url":"https://github.com/mariusmonkam.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# rn-reusable-components\nResusable components, Buttons, Cards, Images, List of objects,animation for react-native\n# Installation\nfirst install install react-native via expo by run the following code\n`Assuming that you have Node 12 LTS or greater installed, you can use npm \nto install the Expo CLI command line utility:`\n```javascript\nnpm install -g expo-cli\n```\nThen run the following commands to create a new React Native project called \"YourProjectName\":\n```javascript\nexpo init YourProjectName\ncd YourprojectName\nnpm start # you can also use: expo start\n```\n[Read more about Installing React-native with expo here](https://reactnative.dev/docs/environment-setup)\n\nWhen your project is ready , create a directory that you can call ##components and a subdirectory\nthat you can call ##buttons inside ##buttons \n*create a file and name it #Button.js\n*copy and paste the following code inside the file is your main button component \n```javascript\nimport React from \"react\";\nimport { TouchableOpacity, StyleSheet, Text } from \"react-native\";\n\nexport function Button(props) {\n  //Let's define our props\n  const { title, color, ...otherProps } = props;\n  return (\n    \u003cTouchableOpacity\n      style={[\n        styles.button,\n        styles.boxWithShadow,\n        { backgroundColor: color },\n      ]}\n      {...otherProps}\n    \u003e\n      \u003cText style={styles.text}\u003e{title}\u003c/Text\u003e\n    \u003c/TouchableOpacity\u003e\n  );\n}\n\nButton.defaultProps = {\n  color: \"blue\",\n};\n\nconst styles = StyleSheet.create({\n  button: {\n    borderRadius: 10,\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: 15,\n    margin: 5,\n  },\n  boxWithShadow: {\n    shadowColor: \"#000\",\n    shadowOffset: { width: 0, height: 1 },\n    shadowOpacity: 0.8,\n    shadowRadius: 2,\n    elevation: 2,\n  },\n  text: {\n    fontSize: 20,\n    fontWeight: \"bold\",\n    color: \"white\",\n    elevation: 4,\n  },\n});\n\n```\nNow you can use your button any where in your app by importing it like this,\n```javascript\nimport React from \"react\";\nimport { StyleSheet, Alert, View } from \"react-native\";\nimport { Button } from \"./Button\";\n\nexport default function HomeButton() {\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cView\u003e\n        \u003cButton\n          onPress={() =\u003e Alert.alert(\"Press me\")}\n          title=\"Press me\"\n          color=\"skyblue\"\n        /\u003e\n        \u003cButton\n          onPress={() =\u003e Alert.alert(\"Click  me\")}\n          title=\"Click me\"\n          color=\"red\"\n        /\u003e\n        \u003cButton\n          onPress={() =\u003e Alert.alert(\"Smile to  me\")}\n          title=\"Smile to me\"\n          color=\"indigo\"\n        /\u003e\n\n        \u003cButton\n          onPress={() =\u003e Alert.alert(\"Read  me\")}\n          title=\"Read me\"\n          color=\"seagreen\"\n        /\u003e\n        \u003cButton\n          onPress={() =\u003e Alert.alert(\"Follow  me\")}\n          title=\"Follow me\"\n          color=\"yellowgreen\"\n        /\u003e\n        \u003cButton\n          onPress={() =\u003e Alert.alert(\"Share  me\")}\n          title=\"Share me\"\n          color=\"mediumorchid\"\n        /\u003e\n        \u003cButton\n          onPress={() =\u003e Alert.alert(\"Guide  me\")}\n          title=\"Guide me\"\n          color=\"navy\"\n        /\u003e\n      \u003c/View\u003e\n    \u003c/View\u003e\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```\nPay attention on where is located your ##Button.js when importing\n\nHappy Hacking!\nMore reusable components coming!\nStay tune!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmariusmonkam%2Frn-reusable-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmariusmonkam%2Frn-reusable-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmariusmonkam%2Frn-reusable-components/lists"}