{"id":21223832,"url":"https://github.com/react-ui-kit/expo-ui-kit","last_synced_at":"2025-08-18T08:07:50.996Z","repository":{"id":36861123,"uuid":"177424906","full_name":"react-ui-kit/expo-ui-kit","owner":"react-ui-kit","description":"expo-ui-kit - a components based React-Native UI Kit","archived":false,"fork":false,"pushed_at":"2024-08-28T18:30:21.000Z","size":420,"stargazers_count":109,"open_issues_count":7,"forks_count":25,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-28T07:15:56.806Z","etag":null,"topics":["expo","expo-ui-kit","hacktoberfest","predefined-props","react-native","react-native-component","react-ui-kit","rgba","theme","ui-kit","ui-kit-framework"],"latest_commit_sha":null,"homepage":"http://expo-ui-kit.com","language":"JavaScript","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/react-ui-kit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["react-ui-kit"],"custom":["https://github.com/sponsors/react-ui-kit"]}},"created_at":"2019-03-24T14:21:18.000Z","updated_at":"2025-04-24T17:53:24.000Z","dependencies_parsed_at":"2024-11-20T22:55:09.290Z","dependency_job_id":"59f3d639-7570-43d3-9b02-8528f3c72fac","html_url":"https://github.com/react-ui-kit/expo-ui-kit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/react-ui-kit/expo-ui-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-ui-kit%2Fexpo-ui-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-ui-kit%2Fexpo-ui-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-ui-kit%2Fexpo-ui-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-ui-kit%2Fexpo-ui-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-ui-kit","download_url":"https://codeload.github.com/react-ui-kit/expo-ui-kit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-ui-kit%2Fexpo-ui-kit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270962391,"owners_count":24675965,"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-18T02:00:08.743Z","response_time":89,"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":["expo","expo-ui-kit","hacktoberfest","predefined-props","react-native","react-native-component","react-ui-kit","rgba","theme","ui-kit","ui-kit-framework"],"created_at":"2024-11-20T22:53:34.410Z","updated_at":"2025-08-18T08:07:50.970Z","avatar_url":"https://github.com/react-ui-kit.png","language":"JavaScript","funding_links":["https://github.com/sponsors/react-ui-kit"],"categories":["Stale"],"sub_categories":["React Native \u0026 Expo"],"readme":"# expo-ui-kit - a components based React-Native UI Kit\n\nexpo-ui-kit is a React-Native UI framework based on Expo.io SDK that will help build React-Native Expo apps using predefined \u0026 customizable UI components.\n\n**UI Components:**\n\n- Block: based on [React-Native View](https://facebook.github.io/react-native/docs/view) component\n- Card: Block with predefined props\n- Button: based on [React-Native TouchableOpacity](https://facebook.github.io/react-native/docs/touchableopacity) with predefined props and styles\n- Input: based on [React-Native TextInput](https://facebook.github.io/react-native/docs/textinput) component\n- Text: Typography component based on [React-Native Text](https://facebook.github.io/react-native/docs/text) component\n\n**Tools \u0026 Utils:**\n\n- **helpers**: getMargins, getPaddings, mergeTheme\n- **rgba**: transform hex colors into rgba colors using opacity\n- **theme.js**: default theme for UI components with predefined values for: COLORS, SIZES, FONTS\n\n# Block\n\nhttps://reactnative.dev/docs/view\n\nhttps://reactnative.dev/docs/flexbox\n\nUsage:\n\n- default Block has flex: 1\n\n```html\n\u003cBlock\u003e\n  \u003cText\u003ecomponents\u003c/Text\u003e\n\u003c/Block\u003e\n```\n\n- disable flex\n\n```html\n\u003cBlock flex=\"{0}\"\u003e\n  \u003cText\u003eflex: 0\u003c/Text\u003e\n\u003c/Block\u003e\n\u003cBlock noFlex\u003e\n  \u003cText\u003eflex: 0\u003c/Text\u003e\n\u003c/Block\u003e\n```\n\n- flex for half of the size\n\n```html\n\u003cBlock flex=\"{0.5}\"\u003e\n  \u003cText\u003eflex: 0.5\u003c/Text\u003e\n\u003c/Block\u003e\n```\n\n- row will render flexDirection: row\n\n```html\n\u003cBlock row\u003e\n  \u003cText\u003etext 1\u003c/Text\u003e\n  \u003cText\u003etext 2\u003c/Text\u003e\n\u003c/Block\u003e\n```\n\n- vertical centering the content\n\n```html\n\u003cBlock center\u003e\n  \u003cText\u003etext 1\u003c/Text\u003e\n  \u003cText\u003etext 2\u003c/Text\u003e\n\u003c/Block\u003e\n```\n\n- horizontal centering the content\n\n```html\n\u003cBlock middle\u003e\n  \u003cText\u003etext 1\u003c/Text\u003e\n  \u003cText\u003etext 2\u003c/Text\u003e\n\u003c/Block\u003e\n```\n\n- vertical \u0026 horizontal centering the content\n\n```html\n\u003cBlock center middle\u003e\n  \u003cText\u003etext 1\u003c/Text\u003e\n  \u003cText\u003etext 2\u003c/Text\u003e\n\u003c/Block\u003e\n```\n\nColors\n\n- will render backgroundColor using predefined colors from theme.js COLORS array\n- predefined colors: primary, secondary, tertiary, black, white, gray, error, warning, success, info\n\n```html\n\u003cBlock primary\u003e\n  \u003cText\u003ebackgroundColor: COLORS.primary\u003c/Text\u003e\n\u003c/Block\u003e\n\u003cBlock secondary\u003e\n  \u003cText\u003ebackgroundColor: COLORS.secondary\u003c/Text\u003e\n\u003c/Block\u003e\n```\n\n- custom color using hex color\n\n```html\n\u003cBlock color=\"#DDDDDD\"\u003e\n  \u003cText\u003ebackgroundColor: #DDDDDD\u003c/Text\u003e\n\u003c/Block\u003e\n```\n\nArrange content using justifyContent\n\nhttps://reactnative.dev/docs/layout-props#justifycontent\n\n- space between the content\n\n```html\n\u003cBlock space=\"between\"\u003e\n  \u003cText\u003e1st text\u003c/Text\u003e\n  \u003cText\u003e2nd text\u003c/Text\u003e\n\u003c/Block\u003e\n```\n\n- space evenly the content\n\n```html\n\u003cBlock space=\"evenly\"\u003e\n  \u003cText\u003e1st text\u003c/Text\u003e\n  \u003cText\u003e2nd text\u003c/Text\u003e\n\u003c/Block\u003e\n```\n\n- space around the content\n\n```html\n\u003cBlock space=\"around\"\u003e\n  \u003cText\u003e1st text\u003c/Text\u003e\n  \u003cText\u003e2nd text\u003c/Text\u003e\n\u003c/Block\u003e\n```\n\nBorder radius\n\n- round the corners using borderRadius: 6\n\n```html\n\u003cBlock radius=\"{6}\"\u003e\n  \u003cText\u003e1st text\u003c/Text\u003e\n  \u003cText\u003e2nd text\u003c/Text\u003e\n\u003c/Block\u003e\n```\n\nWrap content using flexWrap, default flexWrap: 'nowrap'\n\nhttps://reactnative.dev/docs/flexbox#flex-wrap\n\n- flexWrap: 'wrap'\n\n```html\n\u003cBlock wrap\u003e\n  \u003cText\u003e1st text\u003c/Text\u003e\n  \u003cText\u003e2nd text\u003c/Text\u003e\n  \u003cText\u003e3rd text\u003c/Text\u003e\n\u003c/Block\u003e\n```\n\nFor animations animate props can be use to render Animated.View component\n\n- animated will render Animated.View\n\n```html\n\u003cBlock animated\u003e\n  \u003cText\u003eanimated view\u003c/Text\u003e\n\u003c/Block\u003e\n```\n\nFor safe area views, safe props can be use to render SafeAreaView component\n\n- safe will render SafeAreaView\n\n```html\n\u003cBlock safe\u003e\n  \u003cText\u003esafe area view\u003c/Text\u003e\n\u003c/Block\u003e\n```\n\n# Button\n\nhttps://reactnative.dev/docs/touchableopacity\n\nhttps://reactnative.dev/docs/touchablehighlight\n\nhttps://reactnative.dev/docs/touchablenativefeedback\n\nhttps://reactnative.dev/docs/touchablewithoutfeedback\n\nDefault render an instance of TouchableOpacity\n\n- TouchableHighlight\n\n```html\n\u003cbutton highlight\u003e\n  \u003cText\u003einstance of TouchableHighlight\u003c/Text\u003e\n\u003c/button\u003e\n```\n\n- TouchableNativeFeedback\n\n```html\n\u003cbutton nativeFeedback\u003e\n  \u003cText\u003einstance of TouchableNativeFeedback\u003c/Text\u003e\n\u003c/button\u003e\n```\n\n- TouchableWithoutFeedback\n\n```html\n\u003cbutton withoutFeedback\u003e\n  \u003cText\u003einstance of TouchableWithoutFeedback\u003c/Text\u003e\n\u003c/button\u003e\n```\n\nColors\n\n- will render backgroundColor using predefined colors from theme.js COLORS array\n- predefined colors: primary, secondary, tertiary, black, white, gray, error, warning, success, info\n\n```html\n\u003cbutton primary\u003e\n  \u003cText\u003ebackgroundColor: COLORS.primary\u003c/Text\u003e\n\u003c/button\u003e\n\u003cbutton transparent\u003e\n  \u003cText\u003ebackgroundColor: \"transparent\"\u003c/Text\u003e\n\u003c/button\u003e\n```\n\n- custom color using hex color\n\n```html\n\u003cbutton color=\"#DDDDDD\"\u003e\n  \u003cText\u003ebackgroundColor: #DDDDDD\u003c/Text\u003e\n\u003c/button\u003e\n```\n\nSet activeOpacity using opacity prop\ndefault activeOpacity=0.8\n\n```html\n\u003cbutton opacity=\"{0.5}\"\u003e\n  \u003cText\u003eopacity={0.5}\u003c/Text\u003e\n\u003c/button\u003e\n```\n\nOutlined and add borderColor equal with backgroundColor\n\n```html\n\u003cbutton primary outlined\u003e\n  \u003cText\u003eoutlined\u003c/Text\u003e\n\u003c/button\u003e\n```\n\nDisabling the button\n\n```html\n\u003cbutton disabled\u003e\n  \u003cText\u003edisabled\u003c/Text\u003e\n\u003c/button\u003e\n\u003cbutton disabled=\"{false}\"\u003e\n  \u003cText\u003efalse\u003c/Text\u003e\n\u003c/button\u003e\n```\n\nAdd flex to button style\n\n```html\n\u003cbutton flex\u003e\n  \u003cText\u003eflex=1\u003c/Text\u003e\n\u003c/button\u003e\n\u003cbutton flex=\"{2}\"\u003e\n  \u003cText\u003eflex=2\u003c/Text\u003e\n\u003c/button\u003e\n```\n\nAdd height to button style\n\n```html\n\u003cbutton height=\"{58}\"\u003e\n  \u003cText\u003eheight=58\u003c/Text\u003e\n\u003c/button\u003e\n```\n\n# Card\n\nhttps://reactnative.dev/docs/view\n\nhttps://reactnative.dev/docs/flexbox\n\nUsing Block component with predefined props: color, radius and padding\n\n```html\n\u003cCard\u003e\n  \u003cText\u003edefault card\u003c/Text\u003e\n\u003c/Card\u003e\n```\n\nBorder radius using radius props\n\n```html\n\u003cCard radius=\"{8}\"\u003e\n  \u003cText\u003eradius={8}\u003c/Text\u003e\n\u003c/Card\u003e\n```\n\nPadding using padding props\n\n- default padding={SIZES.base}\n\n```html\n\u003cCard padding=\"{12}\"\u003e\n  \u003cText\u003epadding={12}\u003c/Text\u003e\n\u003c/Card\u003e\n```\n\nSet shadow using shadow props\n\n- default shadow with color black and elevation\n- shadowOffset is calculated using elevation - 1\n- shadowRadius is equal with elevation value\n\n```html\n\u003cCard shadow\u003e\n  \u003cText\u003eshadow\u003c/Text\u003e\n\u003c/Card\u003e\n\n\u003cCard shadow elevation=\"{2}\"\u003e\n  \u003cText\u003eshadow elevation={2}\u003c/Text\u003e\n\u003c/Card\u003e\n```\n\nSet borderColor using outlined prop\n\n- default borderWidth: 1 and borderColor: Utils.rgba(COLORS.black, 0.16) with alpha 0.16\n\n```html\n\u003cCard outlined\u003e\n  \u003cText\u003eoutlined\u003c/Text\u003e\n\u003c/Card\u003e\n```\n\n# Input\n\nhttps://reactnative.dev/docs/textinput\n\nValidation\n\n- onValidation return a single boolean or object with boolean values\n- pattern using regex string for validating the value\n- single pattern to validate the value\n\n```html\n\u003cInput pattern=\"/\\d/\" // validate digits onValidation={isValid =\u003e\nconsole.log(isValid)} /\u003e\n```\n\n- multiple pattern to validate the value\n\n```html\n\u003cInput pattern={[ \"/\\d/\", \"/\\w/\"]} // validate digits and words\nonValidation={isValid =\u003e console.log(isValid)} /\u003e\n```\n\nBorder color using color prop\n\n```html\n\u003cinput color=\"red\" /\u003e\n```\n\nPass ref from props using internalRef reference\n\n```html\n\u003cInput internalRef={c =\u003e this.c} /\u003e\n```\n\n# Text\n\nhttps://reactnative.dev/docs/text\n\nUsage:\n\n- fontSize predefined by theme.js\n\n```html\n\u003cText h1\u003efontSize of 34 from FONTS.h1\u003c/Text\u003e\n\u003cText h2\u003efontSize of 24 from FONTS.h2\u003c/Text\u003e\n\u003cText h3\u003efontSize of 20 from FONTS.h3\u003c/Text\u003e\n\u003cText title\u003efontSize of 18 from FONTS.title\u003c/Text\u003e\n\u003cText subtitle\u003efontSize of 14 from FONTS.subtitle\u003c/Text\u003e\n\u003cText caption\u003efontSize of 12 from FONTS.caption\u003c/Text\u003e\n\u003cText small\u003efontSize of 10 from FONTS.small\u003c/Text\u003e\n```\n\n- fontSize defined by user\n\n```html\n\u003cText size=\"{20}\"\u003efontSize of 20\u003c/Text\u003e\n```\n\n- margin \u0026 padding\n\n```html\n\u003cText margin=\"{4}\"\u003eset margin 4 to: top, right, bottom \u0026 left\u003c/Text\u003e\n\u003cText padding=\"{6}\"\u003eset margin 6 to: top, right, bottom \u0026 left\u003c/Text\u003e\n```\n\n- text styling\n\n```html\n\u003cText transform\u003etextTransform: capitalize, lowercase, uppercase\u003c/Text\u003e\n\u003cText regular\u003efontWeight from WEIGHTS.regular\u003c/Text\u003e\n\u003cText bold\u003efontWeight from WEIGHTS.bold\u003c/Text\u003e\n\u003cText semibold\u003efontWeight from WEIGHTS.semibold\u003c/Text\u003e\n\u003cText medium\u003efontWeight from WEIGHTS.medium\u003c/Text\u003e\n\u003cText light\u003efontWeight from WEIGHTS.light\u003c/Text\u003e\n\u003cText weight=\"700\"\u003efontWeight from user input\u003c/Text\u003e\n```\n\n- text colors\n\n```html\n\u003cText primary\u003ecolor from COLORS.primary\u003c/Text\u003e\n\u003cText secondary\u003ecolor from COLORS.secondary\u003c/Text\u003e\n\u003cText tertiary\u003ecolor from COLORS.tertiary\u003c/Text\u003e\n\u003cText black\u003ecolor from COLORS.black\u003c/Text\u003e\n\u003cText white\u003ecolor from COLORS.white\u003c/Text\u003e\n\u003cText gray\u003ecolor from COLORS.gray\u003c/Text\u003e\n\u003cText info\u003ecolor from COLORS.info\u003c/Text\u003e\n\u003cText success\u003ecolor from COLORS.success\u003c/Text\u003e\n\u003cText warning\u003ecolor from COLORS.warning\u003c/Text\u003e\n\u003cText error\u003ecolor from COLORS.error\u003c/Text\u003e\n\u003cText color=\"#DDD\"\u003ecolor from user input\u003c/Text\u003e\n```\n\ncustom theme using the src/theme.js data structure\n\n- create a custom theme by defining: const customTheme.js\n- with the following structure to rewrite any value\n\n```js\n{\n  COLORS: {\n    primary: \"cyan\" or \"#8A00D4\",\n    secondary: \"fucsia\" or \"#D527B7\",\n    tertiary: \"yellow\" or \"#FFC46B\"\n  },\n  SIZES: {\n    font: 15,\n    h1: 28\n    title: 17\n  }\n}\n```\n\n- include the custom theme to the component props\n\n```html\n\u003cText primary theme=\"{customTheme}\"\u003eprimary using new color: #8A00D4\u003c/Text\u003e\n```\n\n- animating text can be used using the \"animated\" props\n\n```html\n\u003cText animated\u003ewill render Animated.Text\u003c/Text\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-ui-kit%2Fexpo-ui-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-ui-kit%2Fexpo-ui-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-ui-kit%2Fexpo-ui-kit/lists"}