{"id":21223827,"url":"https://github.com/react-ui-kit/native","last_synced_at":"2025-07-10T14:30:59.821Z","repository":{"id":57346912,"uuid":"141559644","full_name":"react-ui-kit/native","owner":"react-ui-kit","description":"React UI Kit Native","archived":false,"fork":false,"pushed_at":"2018-10-27T09:22:22.000Z","size":690,"stargazers_count":37,"open_issues_count":0,"forks_count":9,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-11-11T21:53:19.367Z","etag":null,"topics":["native-ui","react-native","reactjs","ui-kit"],"latest_commit_sha":null,"homepage":"https://native.react-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":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-19T09:53:27.000Z","updated_at":"2024-07-16T23:18:58.000Z","dependencies_parsed_at":"2022-08-25T18:51:52.452Z","dependency_job_id":null,"html_url":"https://github.com/react-ui-kit/native","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-ui-kit%2Fnative","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-ui-kit%2Fnative/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-ui-kit%2Fnative/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-ui-kit%2Fnative/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-ui-kit","download_url":"https://codeload.github.com/react-ui-kit/native/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225640535,"owners_count":17500978,"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","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":["native-ui","react-native","reactjs","ui-kit"],"created_at":"2024-11-20T22:53:34.252Z","updated_at":"2024-11-20T22:53:34.920Z","avatar_url":"https://github.com/react-ui-kit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# **React Native UI Kit**\nReact Native components based on React UI Kit\n\nOffical documentation of `React UI Kit Native` made for `React Native` applications and you can easily use the components in your project. A lot of predefined styles \u0026 properties so it's perfectly fit for prototyping of your app UI.\n\n- [React UI Kit Native - Website](https://native.react-ui-kit.com)\n\nSupport: [contact@react-ui-kit.com](mailto:contact@react-ui-kit.com)\n\n### **Setup**\n#### Install \u0026 usage\n1. Install local module with react-ui-kit-native (it will also download all required dependencies)\n\n```cmd\nnpm install react-ui-kit-native --save\n```\n2. Use any component you want, all available props are available separately for each component below in this documentation. For example: \n\n```javascript\nimport React from 'react';\nimport { Button } from 'react-ui-kit-native';\n\nexport default class MyButton extends React.Component {\n  render() {\n    return (\n      \u003cButton full primary rounded label=\"My button\" /\u003e\n    );\n  }\n}\n```\n\n### **Components**\nList of available components:\n\n**Status** | **Type** | **Component**  | **Description**\n:--- | :--- | :--- | :--- |\n:heavy_check_mark: | button | [`Button`](?id=Button) | react-native `TouchableOpacity` component with predefined styles \u0026 props\n:heavy_check_mark: | button | [`Link`](?id=Link) | react-native `Text` \u0026 `Linking` component with predefined properties\n:heavy_check_mark: | input | [`Input`](?id=Input) | react-native `TextInput` component with predefined styles \u0026 props\n:heavy_check_mark: | input | [`Select`](?id=Select) | [`react-native-modal-dropdown`](https://github.com/sohobloo/react-native-modal-dropdown) module with predefined styles\n:soon: | input | `Checkbox` | react-native `Switch` component with predefined styles \u0026 props\n:soon: | input | `Datepiker` | react-native `DatePickerIOS` \u0026 `DatePickerAndroid` component with predefined styles \u0026 props\n:soon: | input | `Progress` | react-native `ProgressViewIOS` \u0026 `ProgressBarAndroid` component with predefined styles \u0026 props\n:heavy_check_mark: | view | [`Block`](?id=Block) | react-native `View` component with predefined styles \u0026 props\n:heavy_check_mark: | view | [`Container`](?id=Container) | react-native `View` component with predefined styles \u0026 props\n:heavy_check_mark: | view | [`Text`](?id=Text) | react-native `Text` component with predefined styles \u0026 props\n:heavy_check_mark: | view | [`Icon`](?id=Icon)  | [`react-native-vector-icons`](https://github.com/oblador/react-native-vector-icons) module with predefined props\n:heavy_check_mark: | view | [`Image`](?id=Image) | react-native `Image` component with predefined styles \u0026 props\n:soon: | view | `Badge` | react-native `View` component with predefined styles \u0026 props\n:soon: | view | `Label` | react-native `View` component with predefined styles \u0026 props\n:soon: | view | `Tabs` | react-native `TabBarIOS` component with predefined styles \u0026 props\n:soon: | view | `List` | react-native `ScrollView` component with predefined styles \u0026 props\n:soon: | view | `Menu` | react-native `ScrollView` component with predefined styles \u0026 props\n\n#### Button\n**PROP** | **TYPE** | **DEFAULT** | **DESCRIPTION**\n:--- | :--- | :--- | :---\ncolor | string | `#FFFFFF` | Specifies a text color\nsize | number | `16` | Specifies a `fontSize` size\nlabel | string | null | Specifies a string for the button text \nicon | bool | null | Specifies an icon name - check [Icon](?id=icon) component\nfamily | bool | null | Specifies an icon family - check [Icon](?id=icon) component\nloading | bool | `false` | Disable touch/press events and render `ActivityIndicator`\nfull | bool | `false` | Set the width of the component to 80% from the total width of the screen\nopacity | number | `0.8` | Determines what the `activeOpacity` of the Button should be when touch is active\nbasic | bool | `false` | Include `styles.basic` with _backgroundColor: #FFFFFF_, _borderColor: #45547e_ \u003cspan style=\"color: #45547e\"\u003e█\u003c/span\u003e\nbold | bool | `false` | Determines whether the `styles.bold` should be included\nborder | bool | `false` | Determines whether the `styles.border` should be included \nrounded | bool | `false` | Determines whether the `styles.basic` should be included\nprimary | bool | `false` | Include `styles.primary` with _backgroundColor: #7CB527_ \u003cspan style=\"color: #7CB527\"\u003e █\u003c/span\u003e\nsecondary | bool | `false` | Include `styles.secondary` with _backgroundColor: #FF3D57_ \u003cspan style=\"color: #FF3D57\"\u003e █\u003c/span\u003e\ntertiary | bool | `false` | Include `styles.tertiary` with _backgroundColor: #7857A9_ \u003cspan style=\"color: #7857A9\"\u003e █\u003c/span\u003e\nstyle | View style | `{}` | Add `style` properties for better customization\n\nFor more properties visit [TouchableOpacity props](https://facebook.github.io/react-native/docs/touchableopacity#props)\n\n#### Link\n**PROP** | **TYPE** | **DEFAULT** | **DESCRIPTION**\n:--- | :--- | :--- | :---\ncolor | string | `color: #323642` \u003cspan style=\"color: #323642\"\u003e █\u003c/span\u003e | Specifies a text color\nhref | string | null | A link (web URL, email, contact etc.)\nonPress | func | `() =\u003e {}` | Called when the touch is released \nstyle | View style | `{}` | Add `style` properties for better customization\n\n#### Input\n**PROP** | **TYPE** | **DEFAULT** | **DESCRIPTION**\n:--- | :--- | :--- | :---\ncolor | string | `#293042` \u003cspan style=\"color: #293042\"\u003e █\u003c/span\u003e | Specifies a text color\nplaceHolderColor | string | `#5E6D95` \u003cspan style=\"color: #5E6D95\"\u003e █\u003c/span\u003e | Specifies a `placeholderTextColor`\nbgColor | string | `#FFFFFF` | Specifies a `backgroundColor` color\nrounded | bool | `false` | Determines whether the `styles.rounded` should be included\ntype | string | `default` | One of `'default', 'email-address', 'numeric', 'phone-pad', 'number-pad', 'decimal-pad'` for `keyboardType`\nhelp | string | null | Specifies a `string` or `node` for the text positioned between `label` and `input`\nleft | bool | `true` | Positioning the icon on the `left`\nright | bool | `false` | Positioning the icon on the `right`\ntransparent | bool | `false` | Determines whether the `styles.transparent` should be included\nborderless | bool | `false` | Determines whether the `styles.borderless` should be included\nborder | bool | `false` | Determines whether the `styles.border` should be included\n\nFor more properties visit [TextInput props](https://facebook.github.io/react-native/docs/textinput#props)\n\n#### Text\n**PROP** | **TYPE** | **DEFAULT** | **DESCRIPTION**\n:--- | :--- | :--- | :---\nh1 | bool | false | `styles.h1` with `fontSize` size of `112` \nh2 | bool | false | `styles.h2` with `fontSize` size of `56` \nh3 | bool | false | `styles.h3` with `fontSize` size of `~45` \nh4 | bool | false | `styles.h4` with `fontSize` size of `~34` \nh5 | bool | false | `styles.h5` with `fontSize` size of `~24` \ntitle | bool | false | `styles.title` with `fontSize` size of `~20` \nsubtitle | bool | false | `styles.subtitle` with `fontSize` size of `16` \ncaption | bool | false | `styles.caption` with `fontSize` size of `12` \nsize | number | `14` | Specifies a `fontSize` size of `14`\ncolor | string | `#808080` \u003cspan style=\"color: #808080\"\u003e █\u003c/span\u003e | Specifies a text color `#808080`\nthin | bool | false | Set the `fontWeight` to `100`\nbold | bool | false | Set the `fontWeight` to `300`\nlight | bool | false | Set the `fontWeight` to `bold`\nitalic | bool | false | Set the `fontStyle` to `italic`\nalign | bool | null | Specifies a `textAlign`\n\nFor more properties visit [Text props](https://facebook.github.io/react-native/docs/text.html#props)\n\n#### Icon\n**PROP** | **TYPE** | **DEFAULT** | **DESCRIPTION**\n:--- | :--- | :--- | :---\ncolor | string | `#808080` \u003cspan style=\"color: #808080\"\u003e █\u003c/span\u003e | Specifies an Icon color `COLOR_DEFAULT #808080`\nsize | number | `16` | Specifies a `fontSize` size, `BASE_SIZE 16px`\nname | string | null` | What icon to show, for more example see [Icon Explorer](https://oblador.github.io/react-native-vector-icons/)\nfamily | string | null` | One of the sets from [Bundled Icon Sets](https://github.com/oblador/react-native-vector-icons#bundled-icon-sets)\n\nFor more properties visit [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons)\n\n#### Image\n**PROP** | **TYPE** | **DEFAULT** | **DESCRIPTION**\n:--- | :--- | :--- | :---\navatar | string | `false` | Based on image width \u0026 height will add `borderRadius` with value of minimum between WIDTH \u0026 HEIGHT\nwidth | number | null | Add `WIDTH` to image style\nheight | number | null | Add `HEIGHT` to image style\nsize | number | null | **width** \u0026 **height** changed using: `tiny` divided by _2_, `small` divided by _1.25_ or `large` multiplied by _2_\nsource | string | null | [Image source](https://facebook.github.io/react-native/docs/image#source) (either a remote URL or a local file resource).\n\nFor more properties visit [Image props](https://facebook.github.io/react-native/docs/image#props)\n\n### **Examples**\nA list of example screens based on the above components:\n#### Login\n\n![Login Screen](https://raw.githubusercontent.com/react-ui-kit/native/master/docs/images/native_login.jpg \"Login Screen\")\n\n```javascript\nimport React from 'react';\nimport { Block, Button, Input, Text } from 'react-ui-kit-native';\n\nexport default class LoginScreen extends React.Component {\n  render() {\n    return (\n      \u003cBlock flex middle\u003e\n        \u003cText title light color=\"#000\"\u003e\n          LOGIN SCREEN\n        \u003c/Text\u003e\n        \u003cText caption thin color=\"#000\"\u003e\n          Please login to your account\n        \u003c/Text\u003e\n        \u003cInput placeholder=\"Email\" /\u003e\n        \u003cInput password placeholder=\"Password\" /\u003e\n        \u003cButton full primary rounded label=\"SIGN IN\" /\u003e\n      \u003c/Block\u003e\n    );\n  }\n}\n```\n\n#### Forgot\n![Forgot Screen](https://raw.githubusercontent.com/react-ui-kit/native/master/docs/images/native_forgot.jpg \"Forgot Screen\")\n\n```javascript\nimport React from 'react';\nimport { Block, Button, Input, Text } from 'react-ui-kit-native';\n\nexport default class LoginScreen extends React.Component {\n  static navigationOptions = {\n    header: null,\n  };\n\n  render() {\n    return (\n      \u003cBlock flex middle\u003e\n        \u003cText title light color=\"#000\"\u003e\n          FORGOT PASSWORD\n        \u003c/Text\u003e\n        \u003cInput placeholder=\"Email\" /\u003e\n        \u003cButton full rounded label=\"RESET PASSWORD\" /\u003e\n      \u003c/Block\u003e\n    );\n  }\n}\n```\n\n#### Register\n![Register Screen](https://raw.githubusercontent.com/react-ui-kit/native/master/docs/images/native_register.jpg \"Register Screen\")\n\n```javascript\nimport React from 'react';\nimport { Block, Button, Input, Text } from 'react-ui-kit-native';\n\nexport default class RegisterScreen extends React.Component {\n  render() {\n    return (\n      \u003cBlock fluid flex middle\u003e\n        \u003cText title light color=\"#000\"\u003e\n          REGISTER SCREEN\n        \u003c/Text\u003e\n        \u003cInput label=\"First name\" placeholder=\"React\" right icon=\"text\" family=\"Entypo\" /\u003e\n        \u003cInput label=\"Last name\" placeholder=\"UI Kit\" right icon=\"text\" family=\"Entypo\" /\u003e\n        \u003cInput\n          right\n          icon=\"location-pin\"\n          family=\"Entypo\"\n          label=\"Address\"\n          placeholder=\"Street name, number, house\"\n        /\u003e\n        \u003cInput\n          right\n          icon=\"phone\"\n          family=\"Entypo\"\n          type=\"phone-pad\"\n          label=\"Phone number\"\n          placeholder=\"0712345678\"\n        /\u003e\n        \u003cButton full rounded tertiary label=\"SIGN UP\" /\u003e\n      \u003c/Block\u003e\n    );\n  }\n}\n```\n\n#### Profile\n![Profile Screen](https://raw.githubusercontent.com/react-ui-kit/native/master/docs/images/native_profile.jpg \"Profile Screen\")\n\n```javascript\nimport React from 'react';\nimport { StyleSheet, Image } from 'react-native';\nimport { Block, Text } from 'react-ui-kit-native';\n\nclass ProfileScreen extends React.Component {\n  render() {\n    const { profile } = this.props;\n\n    return (\n      \u003cBlock fluid flex middle style={styles.profile}\u003e\n        \u003cText h5 light color=\"#000\"\u003e{profile.fullname}\u003c/Text\u003e\n        \u003cImage source={{ uri: profile.avatar }} style={styles.avatar} /\u003e\n        \u003cText subtitle light\u003e{`${profile.city}, ${profile.country}`}\u003c/Text\u003e\n        \u003cText bold\u003e{profile.email}\u003c/Text\u003e\n      \u003c/Block\u003e\n    );\n  }\n}\n\nProfileScreen.defaultProps = {\n  profile: {\n    fullname: `React UI Kit`,\n    city: `London`,\n    country: `United Kingdom`,\n    email: `contact@react-ui-kit.com`,\n    avatar: `https://react-ui-kit.com/assets/img/react-ui-kit-logo.png`,\n  },\n};\n\nexport default ProfileScreen;\n\nconst styles = StyleSheet.create({\n  profile: {\n    paddingTop: 15,\n    backgroundColor: '#fff',\n  },\n  avatar: {\n    width: 200,\n    height: 200,\n    resizeMode: 'contain',\n  },\n});\n\n```\n\n### **Work in progress**\n- [x] export components style as `styles` for easy import\n- [ ] create `theme HoC` with default **theme.js**\n\n### **Contribution**\nHave an idea for a new component or Screen? Just contact us at contact@react-ui-kit.com and will add it to our list.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-ui-kit%2Fnative","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-ui-kit%2Fnative","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-ui-kit%2Fnative/lists"}