{"id":13376258,"url":"https://github.com/99x/first-born","last_synced_at":"2025-04-09T20:09:09.456Z","repository":{"id":53349332,"uuid":"177706284","full_name":"99x/first-born","owner":"99x","description":"Component library for React Native","archived":false,"fork":false,"pushed_at":"2020-07-14T03:36:50.000Z","size":2482,"stargazers_count":269,"open_issues_count":10,"forks_count":28,"subscribers_count":24,"default_branch":"master","last_synced_at":"2025-04-09T20:09:03.208Z","etag":null,"topics":["android","component-library","hacktoberfest","ios","javascript","react-native","ui","ux"],"latest_commit_sha":null,"homepage":"","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/99x.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-26T03:14:01.000Z","updated_at":"2025-02-05T02:35:06.000Z","dependencies_parsed_at":"2022-08-22T21:40:30.208Z","dependency_job_id":null,"html_url":"https://github.com/99x/first-born","commit_stats":null,"previous_names":["99xt/first-born"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/99x%2Ffirst-born","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/99x%2Ffirst-born/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/99x%2Ffirst-born/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/99x%2Ffirst-born/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/99x","download_url":"https://codeload.github.com/99x/first-born/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248103872,"owners_count":21048245,"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":["android","component-library","hacktoberfest","ios","javascript","react-native","ui","ux"],"created_at":"2024-07-30T05:02:37.592Z","updated_at":"2025-04-09T20:09:09.416Z","avatar_url":"https://github.com/99x.png","language":"JavaScript","funding_links":[],"categories":["Frameworks"],"sub_categories":["Other Platforms"],"readme":"# first-born\n![first-born Logo](https://user-images.githubusercontent.com/24349997/55307073-f5018300-5473-11e9-8f34-7d41680783fe.png)\n\n## Getting Started\nThese instructions will get you a copy of the project up and running on your local machine for development and testing purposes\n\n### Prerequisites\n\nThis module can only be used in a React Native app.\nTo use it, you will need a React Native app with it's dependencies installed.\nThe following modules need to be added as a dev dependency as well.\n\n - `create-react-class`\n - `react-native-vector-icons`\n\n### Installing\n\nTo install first-born run the following command in the terminal;\n```\nnpm install --save @99xt/first-born\n```\nYou will additionally require to install the following modules as well.\n```\nnpm install --save create-react-class react-native-vector-icons\n```\nFollow [this guide](https://github.com/oblador/react-native-vector-icons#installation) to configure `react-native-vector-icons` for your project. \n\nNo other steps are required to configure `first-born` separately for each platform (Android/iOS).\n\n## Development Testing\n\nTo test the repo, first clone it;\n```\ngit clone https://github.com/99xt/first-born.git\n```\n\nMove into the folder;\n```\ncd first-born\n```\n\nInstall dependencies;\n```\nnpm install\n```\n\nAnd run the test script;\n```\nnpm run test\n```\n\n## Usage\n\nImport components like this;\n\n```js\nimport { Button } from \"@99xt/first-born\";\n```\n\n### Utils\n\n#### Colors\n\n| Color               | Android                  | iOS                    |\n|---------------------|--------------------------|------------------------|\n| white               | #FFF                     | #FFF                   |\n| black               | #000                     | #000                   |\n| primary             | #486c86                  | #486c86                |\n| secondary           | #8dd9d5                  | #8dd9d5                |\n| error               | #e74c3c                  | #e74c3c                |\n| inputGrey           | rgba(33, 33, 33, 0.5)    | rgba(33, 33, 33, 0.5)  |\n| darkGrey            | rgba(33, 33, 33, 0.87)   | rgba(33, 33, 33, 0.87) |\n| lightGrey           | rgba(33, 33, 33, 0.4)    | rgba(33, 33, 33, 0.4)  |\n| overlay             | rgba(68, 68, 68, 0.6)    | rgba(68, 68, 68, 0.6)  |\n| secondaryBackground | rgba(125, 167, 217, 0.2) | #ecf8fa                |\n\n### Atoms\n\n#### Text\n\n```html\n\u003cText\u003eHello\u003c/Text\u003e\n```\n##### Android \n![Android Text](https://user-images.githubusercontent.com/24349997/55306378-ab179d80-5471-11e9-94dc-53328e7061d5.PNG \"Android Text\") \n\n##### iOS\n![iOS Text](https://user-images.githubusercontent.com/24349997/55306381-abb03400-5471-11e9-98bd-934208893883.png \"iOS Text\")\n\nYou can use any [Text property](http://facebook.github.io/react-native/docs/text.html) and the following:\n\n| Prop         | Description                                                                       | Default  |\n|--------------|-----------------------------------------------------------------------------------|----------|\n| **`size`**   | Size of the text, picked from predefined sizes, according to underlying platform. | `'p'`    |\n| **`bold`**   | If text is bold or not.                                                           | _false_  |\n| **`color`**  | Color of the text.                                                                | _black_  |\n| **`margin`** | If the text requires a margin or not.                                             | _false_  |\n| **`align`**  | Alignment of text ('left', 'right', 'center')                                     | `'left'` |\n\n| Size          | Android | iOS |\n|---------------|---------|-----|\n| h1            | 96      | 34  |\n| h2            | 60      | 28  |\n| h3            | 48      | 24  |\n| h4            | 34      | 22  |\n| h5            | 24      | 20  |\n| h6            | 20      | 17  |\n| p             | 16      | 16  |\n| callout       | 15      | 16  |\n| sub_heading   | 14      | 15  |\n| footnote      | 13      | 13  |\n| caption_big   | 12      | 12  |\n| caption_small | 11      | 11  |\n\n#### Icon\n\nThe All Icon components (all font styles) from `react-native-vector-icons` is used.\n\n```html\n\u003cIcon name='heart'/\u003e\n```\n##### Android\n![Android Icon](https://user-images.githubusercontent.com/24349997/55306382-ace16100-5471-11e9-96fb-bca1ff545b03.PNG \"Android Icon\") \n\n##### iOS\n![iOS Icon](https://user-images.githubusercontent.com/24349997/55306384-aeab2480-5471-11e9-9129-0e1650e60c60.png \"iOS Icon\")\n\nYou can use any [TouchableOpacity property](http://facebook.github.io/react-native/docs/touchableopacity.html) and the following:\n\n| Prop        | Description                                                                                                                                                                                     | Default |\n|-------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------|\n| **`size`**  | Size of the icon.                                                                                                                                                                               | `18`    |\n| **`name`**  | Similar to the name attribute in `react-native-vector-icons`. Does not require the prefix `md` or `ios` for Ionicons.                                                                           | _None_  |\n| **`color`** | Color of the icon.                                                                                                                                                                              | _white_ |\n| **`type`**  | Type of the icon font style. ('zocial', 'octicon', 'material', 'material-community', 'ionicon', 'foundation', 'evilicon', 'entypo', 'font-awesome', 'simple-line-icon', 'feather', 'antdesign') | _white_ |\n\n#### Badge\n\nOnly accepts `Text` and `Icon` atoms and `react-native Image` .\n\n```html\n\u003cBadge\u003e\n    \u003cText\u003e+1\u003c/Text\u003e\n\u003c/Badge\u003e\n\u003cBadge color=\"red\"\u003e\n    \u003cIcon name=\"heart\" /\u003e\n\u003c/Badge\u003e\n```\n\n##### Android\n![Android Badge](https://user-images.githubusercontent.com/24349997/55612807-b71f9a00-57a6-11e9-9f1e-bbc6bb4e2f75.png \"Android Badge\") \n\n##### iOS\n![iOS Badge](https://user-images.githubusercontent.com/4241926/55614817-7d04c700-57ab-11e9-91ec-1122dd7a35b6.png \"iOS Badge\") \n\nYou can use any [View property](https://facebook.github.io/react-native/docs/view.html) and the following:\n\n| Prop          | Description                         | Default   |\n|---------------|-------------------------------------|-----------|\n| **`color`**   | Color of the badge.                 | _primary_ |\n| **`outline`** | If the badge has the outline style. | _false_   |\n\n#### Thumbnail\n\nAn Image component that displays either a square or circular image.\n\n```html\n\u003cThumbnail source={require(\"path/to/image.png\")}/\u003e\n```\n\nYou can use any [Image property](http://facebook.github.io/react-native/docs/image.html) and the following:\n\n| Prop             | Description                                                                                 | Default    |\n|------------------|---------------------------------------------------------------------------------------------|------------|\n| **`size`**       | Size of the image. ('small', 'medium', 'large', 'exlarge')                                  | `'medium'` |\n| **`customSize`** | Size of the image, if it does not fit the above defined sizes.                              | _None_     |\n| **`rounded`**    | If the image is to be a circle.                                                             | _false_    |\n| **`onEdit`**     | Props to handle an image change of the thumbnail. You can use all `Button` atom properties. | _None_     |\n\n#### Button\n\nOnly accepts `Text` and `Icon` atoms and `react-native Image` .\n\n```html\n\u003cButton onPress={this.handleButtonClick} block \u003e\n    \u003cText\u003eClick Me\u003c/Text\u003e\n\u003c/Button\u003e\n```\n\n##### Android\n![Android Button](https://user-images.githubusercontent.com/24349997/55306156-c3d38380-5470-11e9-9663-88f991e1a857.PNG \"Android Button\") \n\n##### iOS\n![iOS Button](https://user-images.githubusercontent.com/24349997/55306333-7f94b300-5471-11e9-9f3c-3a068a7f7f72.png \"iOS Button\")\n\nYou can use any [TouchableOpacity property](https://facebook.github.io/react-native/docs/touchableopacity.html) and the following:\n\n| Prop          | Description                                                                | Default     |\n|---------------|----------------------------------------------------------------------------|-------------|\n| **`size`**    | Size of the button, picked from predefined sizes small, default and large. | `'default'` |\n| **`color`**   | Color of the button.                                                       | _primary_   |\n| **`rounded`** | If the button has rounded corners.                                         | _false_     |\n| **`block`**   | If the button has full width.                                              | _false_     |\n| **`ouline`**  | If the button is transparent, but with a colored border and children.      | _false_     |\n| **`rounded`** | If the button is transparent, but with colored children.                   | _false_     |\n\n#### DatePicker\n\nRenders a `Text`, that displays a date picker modal when the `onPress` method is triggered.\n\n```html\n\u003cDatePicker onDateChange={this.handleDateChange} /\u003e\n```\n\n##### Android\n![Android Date Picker](https://user-images.githubusercontent.com/24349997/55306512-2e38f380-5472-11e9-8e1a-323ce50250b7.PNG \"Android Date Picker\") \n\n##### iOS\n![iOS Date Picker](https://user-images.githubusercontent.com/24349997/55306515-2f6a2080-5472-11e9-95e9-42f49b9fb01a.png \"iOS Date Picker\")\n\nYou can use any [TextInput property](http://facebook.github.io/react-native/docs/textinput.html) and the following:\n\n| Prop                   | Description                                                         | Default         |\n|------------------------|---------------------------------------------------------------------|-----------------|\n| **`placeholder`**      | Display this string if value not selected yet. iOS only.            | `'Select Date'` |\n| **`formatChosenDate`** | User defined function that returns a formatted date.                | _None_          |\n| **`onDateChange`**     | User defined function to run when selected date changes.            | _None_          |\n| **`defaultDate`**      | Initially picked date.                                              | _None_          |\n| **`minimumDate`**      | Minimum in date range.                                              | _None_          |\n| **`maximumDate`**      | Maximum in date range.                                              | _None_          |\n| **`modalTransparent`** | If DatePicker modal is transparent. iOS only.                       | _true_          |\n| **`animationType`**    | Type of entry/exit animation for DatePicker modal. iOS only.        | `'fade'`        |\n| **`locale`**           | Locale of DatePicker. iOS only.                                     | _None_          |\n| **`mode`**             | Type of picker ('date', 'time').                                    | `'date'`        |\n| **`color`**            | Color of the `TextInput` when in focus.                             | _primary_       |\n| **`isValid`**          | User defined validation function, that returns true for valid input | _None_          |\n| **`errorMessage`**     | Error message to display below input, if validation fails           | _None_          |\n| **`rounded`**          | If DatePicker style is rounded edges.                               | _false_         |\n| **`underline`**        | If DatePicker style is an underline.                                | _false_         |\n| **`defaultStyle`**     | If DatePicker style is default as seen above.                       | _true_          |\n| **`noStyle`**          | If DatePicker has no framework defined style.                       | _false_         |\n| **`style`**            | Custom DatePicker inactive style. (Style object)                    | _None_          |\n| **`activeStyle`**      | Custom DatePicker active style. (Style object)                      | _None_          |\n| **`errorStyle`**       | Custom DatePicker error style. (Style object)                       | _None_          |\n| **`errorColor`**       | Color of DatePicker when validation fails                           | _error_         |\n\n#### Input\n\n```html\n\u003cInput onChangeText={this.handleTextChange} placeholder=\"Name\" /\u003e\n```\n\n##### Android\n![Android Input](https://user-images.githubusercontent.com/24349997/55306524-3729c500-5472-11e9-84e0-6c84edfcaa78.PNG \"Android Input\") \n\n##### iOS\n![iOS Input](https://user-images.githubusercontent.com/24349997/55306526-38f38880-5472-11e9-9057-a0f87ce1b93d.png \"iOS Input\")\n\nYou can use any [TextInput property](http://facebook.github.io/react-native/docs/textinput.html) and the following:\n\n| Prop               | Description                                                        | Default   |\n|--------------------|--------------------------------------------------------------------|-----------|\n| **`color`**        | Color of the `TextInput` when in focus.                            | _primary_ |\n| **`isValid`**      | User defined validation function, that returns true for valid text | _None_    |\n| **`errorMessage`** | Error message to display below input, if validation fails          | _None_    |\n| **`rounded`**      | If Input style is rounded edges.                                   | _false_   |\n| **`underline`**    | If Input style is an underline.                                    | _false_   |\n| **`defaultStyle`** | If Input style is default as seen above.                           | _true_    |\n| **`noStyle`**      | If Input has no framework defined style.                           | _false_   |\n| **`style`**        | Custom Input inactive style. (Style object)                        | _None_    |\n| **`activeStyle`**  | Custom Input active style. (Style object)                          | _None_    |\n| **`errorStyle`**   | Custom  Input error style. (Style object)                          | _None_    |\n| **`errorColor`**   | Color of Input when validation fails                               | _error_   |\n| **`iconLeft`**     | Icon Atom to render on the left of the Input                       | _None_    |\n| **`iconRight`**    | Icon Atom to render on the right of the Input                      | _None_    |\n\n#### Picker\n\nIn Android, display a dropdown picker.\nIn iOS, renders a `Text`, that displays a picker modal when the `onPress` method is triggered.\n```html\n\u003cPicker onValueChange={this.handleValueChange} selectedValue={this.state.pickerValue}\u003e\n    \u003cPicker.Item value=\"1\" label=\"1\" /\u003e\n    \u003cPicker.Item value=\"2\" label=\"2\" /\u003e\n    \u003cPicker.Item value=\"3\" label=\"3\" /\u003e\n\u003c/Picker\u003e\n```\n\n##### Android\n![Android Picker](https://user-images.githubusercontent.com/24349997/55306530-3bee7900-5472-11e9-95c0-1df0967f0946.PNG \"Android Picker\") \n\n##### iOS\n![iOS Picker](https://user-images.githubusercontent.com/24349997/55306531-3c870f80-5472-11e9-91e1-127eceb96764.png \"iOS Picker\")\n\nYou can use any [Picker property](http://facebook.github.io/react-native/docs/picker.html) and the following:\n\n| Prop                   | Description                                                         | Default           |\n|------------------------|---------------------------------------------------------------------|-------------------|\n| **`placeholder`**      | Display this string if value not selected yet. iOS only.            | `'Select Option'` |\n| **`modalTransparent`** | If Picker modal is transparent. iOS only.                           | _true_            |\n| **`animationType`**    | Type of entry/exit animation for Picker modal. iOS only.            | `'fade'`          |\n| **`mode`**             | Type of picker mode ('dialog', 'dropdown'). Android only.           | `'dropdown'`      |\n| **`color`**            | Color of the `TextInput` when in focus.                             | _primary_         |\n| **`isValid`**          | User defined validation function, that returns true for valid input | _None_            |\n| **`errorMessage`**     | Error message to display below input, if validation fails           | _None_            |\n| **`rounded`**          | If Picker style is rounded edges.                                   | _false_           |\n| **`underline`**        | If Picker style is an underline.                                    | _false_           |\n| **`defaultStyle`**     | If Picker style is default as seen above.                           | _true_            |\n| **`noStyle`**          | If Picker has no framework defined style.                           | _false_           |\n| **`style`**            | Custom Picker inactive style. (Style object)                        | _None_            |\n| **`activeStyle`**      | Custom Picker active style. (Style object)                          | _None_            |\n| **`errorStyle`**       | Custom Picker error style. (Style object)                           | _None_            |\n| **`errorColor`**       | Color of Picker when validation fails                               | _error_           |\n\n#### TextArea\n\nRenders a `TextInput`, that increases in height with the height of the text entered.\n\n```html\n\u003cTextArea onChangeText={this.handleTextChange} placeholder=\"Description\" /\u003e\n```\n\n##### Android\n![Android TextArea](https://user-images.githubusercontent.com/24349997/55306535-3e50d300-5472-11e9-9e48-5f07e08b7e76.PNG \"Android TextArea\") \n\n##### iOS\n![iOS TextArea](https://user-images.githubusercontent.com/24349997/55306538-3f820000-5472-11e9-883d-12256652fb17.png \"iOS TextArea\")\n\nYou can use any [TextInput property](http://facebook.github.io/react-native/docs/textinput.html) and the following:\n\n| Prop               | Description                                                        | Default   |\n|--------------------|--------------------------------------------------------------------|-----------|\n| **`color`**        | Color of the `TextInput` when in focus.                            | _primary_ |\n| **`isValid`**      | User defined validation function, that returns true for valid text | _None_    |\n| **`errorMessage`** | Error message to display below input, if validation fails          | _None_    |\n| **`underline`**    | If TextArea style is an underline.                                 | _false_   |\n| **`defaultStyle`** | If TextArea style is default as seen above.                        | _true_    |\n| **`noStyle`**      | If TextArea has no framework defined style.                        | _false_   |\n| **`style`**        | Custom TextArea inactive style. (Style object)                     | _None_    |\n| **`activeStyle`**  | Custom TextArea active style. (Style object)                       | _None_    |\n| **`errorStyle`**   | Custom TextArea error style. (Style object)                        | _None_    |\n| **`errorColor`**   | Color of TextArea when validation fails                            | _error_   |\n \n### Molecules\n\n#### Form Elements\n\n##### FormDatePicker\n\nUses the Atom `DatePicker`.\n\n```html\n\u003cFormDatePicker onDateChange={this.handleDateChange} label=\"Date\" /\u003e\n```\n\n##### Android\n![Android Form Date Picker](https://user-images.githubusercontent.com/24349997/55306633-8243d800-5472-11e9-8e7c-c40a0b064bfd.PNG \"Android Form Date Picker\") \n\n##### iOS\n![iOS Form Date Picker](https://user-images.githubusercontent.com/24349997/55306635-82dc6e80-5472-11e9-96db-cf3ed146c5ad.png \"iOS Form Date Picker\")\n\nAdditional Props;\n\n| Prop        | Description                                    | Default |\n|-------------|------------------------------------------------|---------|\n| **`label`** | Label to display name of input. **(Required)** | _None_  |\n\n##### FormInput\n\nUses the Atom `Input`.\n\n```html\n\u003cFormInput onChangeText={this.handleTextChange} label=\"Name\" /\u003e\n```\n\n##### Android\n![Android Form Input](https://user-images.githubusercontent.com/24349997/55306636-82dc6e80-5472-11e9-9ab2-6ced79bd2825.PNG \"Android Form Input\") \n\n##### iOS\n![iOS Form Input](https://user-images.githubusercontent.com/24349997/55306637-82dc6e80-5472-11e9-999e-55f8517b8736.png \"iOS Form Input\")\n\nAdditional Props;\n\n| Prop        | Description                                    | Default |\n|-------------|------------------------------------------------|---------|\n| **`label`** | Label to display name of input. **(Required)** | _None_  |\n\n##### FormPicker\n\nUses the Atom `Picker`.\n\n```html\n\u003cFormPicker onValueChange={this.handleValueChange} selectedValue={pickerValue} label=\"Number\" data={pickerData} /\u003e\n```\n\n##### Android\n![Android Form Picker](https://user-images.githubusercontent.com/24349997/55306638-82dc6e80-5472-11e9-8aa9-781de9941d82.PNG \"Android Form Picker\") \n\n##### iOS\n![iOS Form Picker](https://user-images.githubusercontent.com/24349997/55306639-83750500-5472-11e9-9604-2304727f0bcd.png \"iOS Form Picker\")\n\nAdditional Props;\n\n| Prop        | Description                                                                | Default |\n|-------------|----------------------------------------------------------------------------|---------|\n| **`label`** | Label to display name of input. **(Required)**                             | _None_  |\n| **`data`**  | An array containing objects with values and labels for each `Picker.Item`. | _None_  |\n\n##### FormTextArea\n\nUses the Atom `TextArea`.\n\n```html\n\u003cFormTextArea onChangeText={this.handleTextChange} label=\"Description\" /\u003e\n```\n\n##### Android\n![Android Form TextArea](https://user-images.githubusercontent.com/24349997/55306640-83750500-5472-11e9-9846-28a245f22504.PNG \"Android Form TextArea\") \n\n##### iOS\n![iOS Form TextArea](https://user-images.githubusercontent.com/24349997/55306641-83750500-5472-11e9-8aa2-db66455f1c85.png \"iOS Form TextArea\")\n\nAdditional Props;\n\n| Prop        | Description                                    | Default |\n|-------------|------------------------------------------------|---------|\n| **`label`** | Label to display name of input. **(Required)** | _None_  |\n\n\n#### Simple Notifications\n\n```html\n\u003cNotification ref={\"alert\"} /\u003e\n```\n\nTo use the Notification Component and pass data to it, you will need to register a Notification manager in `componentDidMount` and unregister it in `componentWillUnmount`.\n\n```js\ncomponentDidMount() {\n    NotificationBarManager.registerMessageBar(this.refs.alert);\n}\n\ncomponentWillUnmount() {\n    NotificationBarManager.unregisterMessageBar();\n}\n```\n\nTo trigger the Notification display, you will need to run the Notification manager method `showAlert`.\n\n```js\nhandleShowNotification = () =\u003e {\n    NotificationBarManager.showAlert({\n        message: 'Your alert message goes here', // required\n        icon: { name: \"alert\" },\n        // image: { source: require(\"./assets/images/accessibility.png\") }, // image prop\n    });\n}\n```\n\n##### Android\n![Android Notification](https://user-images.githubusercontent.com/24349997/55306644-840d9b80-5472-11e9-803f-63f11c6df951.PNG \"Android Notification\")\n\n##### iOS\n ![iOS Notification](https://user-images.githubusercontent.com/24349997/55306624-8112ab00-5472-11e9-9b71-ab06b5f6cbf0.png \"iOS Notification\")\n\nThe data that can be passed to the notification are;\n\n| Prop                       | Description                                                                                     | Default         |\n|----------------------------|-------------------------------------------------------------------------------------------------|-----------------|\n| **`message`**              | Message to display. **(Required)**                                                              | _None_          |\n| **`shouldHideAfterDelay`** | If notification should hide after display or keep being shown.                                  | _true_          |\n| **`durationToHide`**       | Animation duration for the notification to completely hide.                                     | `350`           |\n| **`durationToShow`**       | Animation duration for the notification to completely show.                                     | `350`           |\n| **`duration`**             | Duration of time to display the alert                                                           | `3000`          |\n| **`image`**                | Image to be displayed next to notification message                                              | _None_          |\n| **`icon`**                 | Icon to be displayed next to notification message                                               | `'alert'`       |\n| **`color`**                | Background color of the Notification body.                                                      | `'#007bff'`     |\n| **`textColor`**            | Color of the Notification text.                                                                 | _white_         |\n| **`fontSize`**             | Font size of Notification text. Accepts text identifier of above Text atom, or specific number. | `'sub_heading'` |\n| **`fontWeight`**           | Font weight of the Notification text.                                                           | `'bold'`        |\n\n#### SnackBars\n\n```html\n\u003cSnackBar ref={\"alert\"} /\u003e\n```\n\nTo use the SnackBar Component and pass data to it, you will need to register a SnackBar manager in `componentDidMount` and unregister it in `componentWillUnmount`.\n\n```js\ncomponentDidMount() {\n    SnackManager.registerMessageBar(this.refs.alert);\n}\n\ncomponentWillUnmount() {\n    SnackManager.unregisterMessageBar();\n}\n```\n\nTo trigger the SnackBar display, you will need to run the SnackBar manager method `showAlert`.\n\n```js\nhandleShowSnackBar = () =\u003e {\n    SnackManager.showAlert({\n        message: 'Your alert message goes here' // required\n    });\n}\n```\n\n##### Android\n![Android SnackBar](https://user-images.githubusercontent.com/24349997/56493489-de979600-650c-11e9-94c7-1b85c551b32d.png \"Android SnackBar\")\n\n##### iOS\n ![iOS SnackBar](https://user-images.githubusercontent.com/24349997/56493776-d55af900-650d-11e9-8692-d2b632e4a768.png \"iOS SnackBar\")\n\nThe data that can be passed to the SnackBar are;\n\n| Prop                       | Description                                                                    | Default     |\n|----------------------------|--------------------------------------------------------------------------------|-------------|\n| **`message`**              | Message to display. **(Required)**                                             | _None_      |\n| **`shouldHideAfterDelay`** | If SnackBar should hide after display or keep being shown.                     | _true_      |\n| **`durationToHide`**       | Animation duration for the SnackBar to completely hide.                        | `350`       |\n| **`durationToShow`**       | Animation duration for the SnackBar to completely show.                        | `350`       |\n| **`duration`**             | Duration of time to display the alert                                          | `3000`      |\n| **`backgroundColor`**      | Background color of the SnackBar body.                                         | `'#333333'` |\n| **`onClickDismiss`**       | If SnackBar should hide after clicking the action button.                      | _true_      |\n| **`position`**             | Position of SnackBar notification ('bottom', 'top').                           | `'bottom'`  |\n| **`action`**               | An object denoting the method to run when the snack alerts button is clicked . | see below   |\n\nThe data to be passed to the action prop of a SnackBar;\n\n| Prop          | Description                               | Default                       |\n|---------------|-------------------------------------------|-------------------------------|\n| **`title`**   | Title of the button                       | `'Close'`                     |\n| **`onPress`** | Method to run when the button is clicked. | internal method to hide alert |\n| **`color`**   | Button's text color                       | _error_                       |\n\n#### ListItem\n\nA List Item that displays a title (required), description and image. This molecule makes use of the `Text` Atom.\n\n```html\n\u003cListItem title=\"Heading\" description=\"Description\" image={{ source: require(\"path/to/image.png\")}} \u003e\n    \u003cListItem title=\"Heading\" onPress={this.handleButtonClick} description=\"Description\" /\u003e //Nested List Item\n\u003c/ListItem\u003e\n```\n\n##### Android\n![Android ListItem](https://user-images.githubusercontent.com/24349997/55306642-840d9b80-5472-11e9-8ca9-b8c8d5294102.PNG \"Android ListItem\") \n\n##### iOS\n![iOS ListItem](https://user-images.githubusercontent.com/24349997/55306643-840d9b80-5472-11e9-9478-0d33fe6d22e8.png \"iOS ListItem\")\n\nYou can use any [TouchableOpacity property](https://facebook.github.io/react-native/docs/touchableopacity.html) and the following:\n\n| Prop                  | Description                                                                     | Default |\n|-----------------------|---------------------------------------------------------------------------------|---------|\n| **`title`**           | Description of List Item. **(Required)**                                        | _None_  |\n| **`description`**     | Description of List Item.                                                       | _None_  |\n| **`image`**           | Image to display in List Item. You can use all `react-native Image` properties. | _None_  |\n| **`block`**           | If the List Item has full width of the device.                                  | _false_ |\n| **`backgroundColor`** | Background color of List Item.                                                  | _white_ |\n| **`secondary`**       | If the List Item is nested inside another.                                      | _false_ |\n| **`rounded`**         | If the image displayed on the ListItem is rouned or not.                        | _false_ |\n\n#### ThinListItem\n\nA List Item that displays a title (required), description and image. This molecule makes use of the `Text` Atom. Similar to the above molecule but smaller with a few added features\n\n```html\n\u003cThinListItem title=\"Heading\" description=\"Description\" image={{ source: require(\"path/to/image.png\") }} /\u003e\n```\n\nYou can use any [TouchableOpacity property](https://facebook.github.io/react-native/docs/touchableopacity.html) and the following:\n\n| Prop                  | Description                                                                     | Default |\n|-----------------------|---------------------------------------------------------------------------------|---------|\n| **`title`**           | Description of List Item. **(Required)**                                        | _None_  |\n| **`description`**     | Description of List Item.                                                       | _None_  |\n| **`image`**           | Image to display in List Item. You can use all `react-native Image` properties. | _None_  |\n| **`icon`**            | Icon to display in List Item. You can use all `Icon` properties.                | _None_  |\n| **`arrow`**           | If the List Item has an arrow at the right of the item.                         | _false_ |\n| **`backgroundColor`** | Background color of List Item.                                                  | _white_ |\n| **`rounded`**         | If the image displayed on the ListItem is rouned or not.                        | _false_ |\n\n#### Floating Action Button\n\nThis molecule makes use of the `Text` and `Icon` Atoms.\n\n###### One action\n\n```html\n\u003cFloatingButton onPress={this.handleAction} image={require(\"path/to/image.png\")} /\u003e\n```\n\n###### Multiple actions\n\n```js\n\nactions = [\n    { text: 'Accessibility', image: require(\"path/to/image.png\"), name: 'bt_accessibility', position: 2, onPress: () =\u003e this.handleAccessibility() },\n    { text: 'Location', icon: \"pin\", name: 'bt_room', position: 1, onPress: () =\u003e this.handleLocation() },\n    { text: 'Video', icon: \"videocam\", name: 'bt_videocam', position: 3, onPress: () =\u003e this.handleVideo() }\n];\n\n\u003cFloatingButton actions={actions} /\u003e\n```\n\n##### Android\n![Android FAB](https://user-images.githubusercontent.com/24349997/55306629-81ab4180-5472-11e9-860e-3693bcd3d8f8.PNG \"Android FAB\") ![Android FAB Expanded](https://user-images.githubusercontent.com/24349997/55306630-81ab4180-5472-11e9-9948-dc4223961298.PNG \"Android FAB Expanded\")\n\n##### iOS\n![iOS FAB](https://user-images.githubusercontent.com/24349997/55306632-8243d800-5472-11e9-94b9-a4b0c17842fc.png \"iOS FAB\") ![iOS FAB Expanded](https://user-images.githubusercontent.com/24349997/55306631-8243d800-5472-11e9-9315-ad5d91d913f0.png \"iOS FAB Expanded\")\n\nThe props for the main `FloatingButton` are;\n\n| Prop                    | Description                                                                    | Default   |\n|-------------------------|--------------------------------------------------------------------------------|-----------|\n| color                   | Background color of main button.                                               | _primary_ |\n| distanceToEdge          | Distance from edge of device for FAB positioning.                              | `30`      |\n| mainVerticalDistance    | Distance of FAB from the bottom of the screen                                  | `0`       |\n| visible                 | If the FAB and its children are visible.                                       | _true_    |\n| overlayColor            | The overlay color of the background.                                           | _overlay_ |\n| position                | The position of the FAB (center, right).                                       | `'right'` |\n| showBackground          | Show background behind the FAB.                                                | _true_    |\n| openOnMount             | If FAB should be expanded when page mounts.                                    | _false_   |\n| actionsPaddingTopBottom | Spacing between child action items.                                            | `8`       |\n| iconHeight              | Height of button icon.                                                         | `15`      |\n| iconWidth               | Width of button icon.                                                          | `15`      |\n| listenKeyboard          | If listeners are to be added for the Keyboard component.                       | _false_   |\n| dismissKeyboardOnPress  | If keyboard should be dismissed on button click.                               | _false_   |\n| onPress                 | User defined action to run when FAB main button is clicked.                    | _None_    |\n| onClose                 | User defined action to run when FAB is closed.                                 | _None_    |\n| onOpen                  | User defined action to run when FAB is expanded.                               | _None_    |\n| onPressBackdrop         | User defined action to run when the background of the expanded FAB is clicked. | _None_    |\n| onStateChange           | User defined action to run when the component state changes                    | _None_    |\n| image                   | Image to display on FAB main button.                                           | _None_    |\n| iconName                | Icon to display on FAB main button.                                            | _None_    |\n| tabs                    | If the page also includes a footer navigation                                  | _false_   |\n| action                  | Array of objects which correlate to a FloatingButtonItem                       | _false_   |\n\nThe props for the nested `FloatingButtonItems`, which is being sent through the `actions` prop are;\n\n| Prop               | Description                                                            | Default    |\n|--------------------|------------------------------------------------------------------------|------------|\n| color              | Background color of main button.                                       | _primary_  |\n| image              | Image to display on FAB main button.                                   | _None_     |\n| icon               | Icon to display on FAB main button.                                    | _None_     |\n| name               | Unique name for each button. **(Required)**                            | _None_     |\n| textContainerStyle | Style of text container                                                | _None_     |\n| text               | Text to be displayed next to button.                                   | _None_     |\n| textStyle          | Style of text.                                                         | _None_     |\n| textProps          | Other text props.                                                      | `'right'`  |\n| textBackground     | Background color of text.                                              | _white_    |\n| textColor          | Font color of text.                                                    | _darkGrey_ |\n| textElevation      | Shadow of text element.                                                | `5`        |\n| position           | The position of the FAB (center, right).                               | _None_     |\n| active             | If FAB is expanded or not.                                             | _None_     |\n| distanceToEdge     | Distance from edge of device for FAB positioning.                      | `30`       |\n| paddingTopBottom   | Vertical padding of each action item.                                  | _None_     |\n| onPress            | User defined action to run when FAB child action button is clicked.    | _None_     |\n| margin             | Padding right of each action item, if the position of FAB is `'right'` | `8`        |\n\n#### Card\n\nA Card that displays a title (required), description and image.\n\n```html\n\u003cCard title=\"Heading\" description=\"Description\" image={{ source: require(\"path/to/image.png\")}} /\u003e\n```\n\n##### Android\n![Android Card](https://user-images.githubusercontent.com/24349997/55306626-8112ab00-5472-11e9-8fad-5aaa7b981ffa.PNG \"Android Card\") \n\n##### iOS\n![iOS Card](https://user-images.githubusercontent.com/24349997/55306628-81ab4180-5472-11e9-8ec7-16f185bb82b2.png \"iOS Card\")\n\nYou can use any [TouchableOpacity property](https://facebook.github.io/react-native/docs/touchableopacity.html) and the following:\n\n| Prop                  | Description                                                                | Default |\n|-----------------------|----------------------------------------------------------------------------|---------|\n| **`title`**           | Description of Card. **(Required)**                                        | _None_  |\n| **`description`**     | Description of Card.                                                       | _None_  |\n| **`image`**           | Image to display in Card. You can use all `react-native Image` properties. | _None_  |\n| **`block`**           | If the Card has full width of the device.                                  | _false_ |\n| **`backgroundColor`** | Background color of Card.                                                  | _white_ |\n\n### Organisms\n\n#### Form\n\n```js\nformElements = [\n    { label: \"Full Name\", type: \"text\", onChangeText: (value) =\u003e this.handleTextChange(value), placeholder: \"John Doe\" },\n    { label: \"Email\", type: \"text\", onChangeText: (value) =\u003e this.handleTextChange(value), placeholder: \"john.doe@gmail.com\", isValid: (value) =\u003e this.checkInputValidity(value) },\n    { label: \"Type\", type: \"picker\", onValueChange: (value) =\u003e this.handleValueChange(value), pickerData: this.pickerData },\n    { label: \"Date\", type: \"date\", onDateChange: (value) =\u003e this.handleDateChange(value) },\n    { label: \"Address\", type: \"textarea\", onChangeText: (value) =\u003e this.handleTextChange(value) },\n];\n\n\u003cForm formElements={formElements} /\u003e\n```\n\n##### Android\n![Android Form](https://user-images.githubusercontent.com/24349997/55306877-5d039980-5473-11e9-93f2-850d9ac47ddd.PNG \"Android Form\") \n\n##### iOS\n![iOS Form](https://user-images.githubusercontent.com/24349997/55306878-5d039980-5473-11e9-9ec6-6db8356ff79e.png \"iOS Form\")\n\nThe `Form` Component iterates through the `formElements` array, to render the fields according to the type of input specified in each object. \nThe form object only has one extra prop;\n\n| Prop               | Description                                        | Default   |\n|--------------------|----------------------------------------------------|-----------|\n| **`color`**        | Color of all form elements when in focus.          | _primary_ |\n| **`rounded`**      | If form element style is rounded edges.            | _false_   |\n| **`underline`**    | If form element style is an underline.             | _false_   |\n| **`defaultStyle`** | If form element style is default as seen above.    | _true_    |\n| **`noStyle`**      | If form element has no framework defined style.    | _false_   |\n| **`style`**        | Custom form element inactive style. (Style object) | _None_    |\n| **`activeStyle`**  | Custom form element active style. (Style object)   | _None_    |\n| **`errorStyle`**   | Custom form element error style. (Style object)    | _None_    |\n\nBut each type of input has corresponding proptypes to the molecules named below;\n\n| Type         | Molecule Component                |\n|--------------|-----------------------------------|\n| `'text'`     | [FormInput](#forminput)           |\n| `'textarea'` | [FormTextArea](#formtextarea)     |\n| `'date'`     | [FormDatePicker](#formdatepicker) |\n| `'picker'`   | [FormPicker](#formpicker)         |\n\n#### ListView\nA vertical list of ListItem molecules\n\n```js\nlistData = [\n    { title: \"Heading 1\", description: \"Description 1\", image: { source: require(\"path/to/image.png\")} },\n    { title: \"Heading 2\", description: \"Description 2\", image: { source: require(\"path/to/image.png\")} },\n    { title: \"Heading 3\", description: \"Description 3\", image: { source: require(\"path/to/image.png\")} }\n];\n\n\u003cListView data={listData} /\u003e\n```\n\nYou can also pass a custom `renderItem` method to the `ListView`, to render `ListItems` with other `TouchableOpacity` props, like `onPress`;\n\n```js\nhandleListItemClick = (title, description) =\u003e {\n    Alert.alert(title, description);\n}\n\n\u003cListView data={listData} renderItem={({item}) =\u003e \u003cListItem {...item} onPress={() =\u003e handleListItemClick(item.title, item.description)} /\u003e} /\u003e\n```\n\n##### Android\n![Android ListView](https://user-images.githubusercontent.com/24349997/55306879-5d039980-5473-11e9-821e-c23d21244299.PNG \"Android ListView\") \n\n##### iOS\n![iOS ListView](https://user-images.githubusercontent.com/24349997/55306880-5d9c3000-5473-11e9-8701-0cfdef3200b8.png \"iOS ListView\")\n\nYou can use any [FlatList property](http://facebook.github.io/react-native/docs/flatlist.html) and the following:\n\n| Prop                  | Description                                              | Default |\n|-----------------------|----------------------------------------------------------|---------|\n| **`backgroundColor`** | Background color of all cards.                           | _white_ |\n| **`thin`**            | If the `'ThinListItem'` is the component to be rendered. | _false_ |\n| **`rounded`**         | If the image displayed on the ListItem is rouned or not. | _false_ |\n\nThe data to be sent to the ListView needs to contain the same fields as the props of [ListItem](#listitem) component.\n\n#### CardList\nA vertical/horizontal List of Card molecules.\n\n```js\nlistData = [\n    { title: \"Heading 1\", description: \"Description 1\", image: { source: require(\"path/to/image.png\")} },\n    { title: \"Heading 2\", description: \"Description 2\", image: { source: require(\"path/to/image.png\")} },\n    { title: \"Heading 3\", description: \"Description 3\", image: { source: require(\"path/to/image.png\")} }\n];\n\n\u003cCardList data={listData} /\u003e\n```\n\nYou can also pass a custom `renderItem` method to the `CardList`, to render `Cards` with other `TouchableOpacity` props, like `onPress`;\n\n```js\nhandleListItemClick = (title, description) =\u003e {\n    Alert.alert(title, description);\n}\n\n\u003cCardList data={listData} renderItem={({item}) =\u003e \u003cCard {...item} onPress={() =\u003e handleListItemClick(item.title, item.description)} /\u003e} /\u003e\n```\n\n##### Android\n![Android CardList](https://user-images.githubusercontent.com/24349997/55306875-5c6b0300-5473-11e9-826b-78fd3a8bb7b2.PNG \"Android CardList\") \n\n##### iOS\n![iOS CardList](https://user-images.githubusercontent.com/24349997/55306876-5c6b0300-5473-11e9-86c0-8c2fb2f64e90.png \"iOS CardList\")\n\nYou can use any [FlatList property](http://facebook.github.io/react-native/docs/flatlist.html) and the following:\n\n| Prop                  | Description                    | Default |\n|-----------------------|--------------------------------|---------|\n| **`backgroundColor`** | Background color of all cards. | _white_ |\n\nThe data to be sent to the CardList needs to contain the same fields as the props of [Card](#card) component.\n\n#### NavBar\nThe Navigation Header makes use of the `Text` and `Icon` atom.\n\n```js\n\u003cNavBar\u003e\n    \u003cNavBarLeft\u003e\n        \u003cNavBarButton type=\"drawer\" /\u003e\n    \u003c/NavBarLeft\u003e\n    \u003cNavBarBody\u003e\n        \u003cText\u003eTitle\u003c/Text\u003e\n    \u003c/NavBarBody\u003e\n    \u003cNavBarRight\u003e\n        \u003cNavBarButton onPress={this.handleFavourites} \u003e\n            \u003cIcon name=\"heart\" /\u003e\n        \u003c/NavBarButton\u003e\n    \u003c/NavBarRight\u003e\n\u003c/NavBar\u003e\n```\n\n##### Android\n![Android Nav Bar](https://user-images.githubusercontent.com/24349997/55306881-5d9c3000-5473-11e9-8162-2e60751f4ca9.PNG \"Android Nav Bar\") \n\n##### iOS\n![iOS Nav Bar](https://user-images.githubusercontent.com/24349997/55306883-5e34c680-5473-11e9-905e-17f074c14930.png \"iOS Nav Bar\")\n\n`NavBar` is the main container for the header. It makes use of the [View property](https://facebook.github.io/react-native/docs/view.html) and the following:\n\n| Prop                 | Description                                                       | Default                                                 |\n|----------------------|-------------------------------------------------------------------|---------------------------------------------------------|\n| **`transparent`**    | If status bar above header is transparent                         | _None_                                                  |\n| **`statusBarColor`** | Background color of the `NavBar`.                                 | _primary_ for Android, `'#F8F8F8'` for iOS              |\n| **`statusBarColor`** | Content type of the `StatusBar`.('light-content', 'dark-content') | `'light-content'` for Android, `'dark-content'` for iOS |\n\n`NavBarBody` is a container that displays its children in the center of the header. It only accepts the title of the page within a Text tag. It makes use of the [View property](https://facebook.github.io/react-native/docs/view.html) and the following:\n\n| Prop        | Description               | Default                              |\n|-------------|---------------------------|--------------------------------------|\n| **`color`** | Color of the title`Text`. | _white_ for Android, _black_ for iOS |\n\n`NavBarLeft` displays its children on the left while, `NavBarRight` is displays its children on the right side of the header. \n**All headers must contain these three tags, to render uniformly.**\n\n`NavBarButton` is the button element to be used within the `NavBar`. It will only accept the atoms `Text`, `Icon` and a `react-native Image`. It contains the same property as a [TouchableOpacity](https://facebook.github.io/react-native/docs/touchableopacity.html). It also comes with an inbuilt type for common features, which are `'drawer'`, `'back'` and `'search'`.\n\n| Prop        | Description                                                                 | Default                                  |\n|-------------|-----------------------------------------------------------------------------|------------------------------------------|\n| **`type`**  | Built in UI implementation of common `NavBar` button (drawer, back, search) | _None_                                   |\n| **`color`** | Text and Icon color of button.                                              | _white_ for Android, `'#0a60ff'` for iOS |\n\n#### TabBar\nThe Navigation Footer makes use of the `Text` and `Icon` atom.\n\n```js\n\u003cTabBar\u003e\n    \u003cTabItem active\u003e\n        \u003cIcon name=\"heart\" /\u003e\n        \u003cText\u003eFavorites\u003c/Text\u003e\n    \u003c/TabItem\u003e\n    \u003cTabItem\u003e\n        \u003cIcon name=\"add\" /\u003e\n        \u003cText\u003eAdd New\u003c/Text\u003e\n    \u003c/TabItem\u003e\n    \u003cTabItem\u003e\n        \u003cIcon name=\"camera\" /\u003e\n        \u003cText\u003eCamera\u003c/Text\u003e\n    \u003c/TabItem\u003e\n    \u003cTabItem\u003e\n        \u003cIcon name=\"settings\" /\u003e\n        \u003cText\u003eSettings\u003c/Text\u003e\n    \u003c/TabItem\u003e\n\u003c/TabBar\u003e\n```\n\n##### Android\n![Android Tab Bar](https://user-images.githubusercontent.com/24349997/55306888-5ecd5d00-5473-11e9-8737-8b01377343b8.PNG \"Android Tab Bar\") \n\n##### iOS\n![iOS Tab Bar](https://user-images.githubusercontent.com/24349997/55306874-5c6b0300-5473-11e9-9cdc-9048e69df1bc.png \"iOS Tab Bar\")\n\n`TabBar` is the main container for the footer navigation. It makes use of the [View property](https://facebook.github.io/react-native/docs/view.html) and the following:\n\n| Prop                | Description                                        | Default                                                       |\n|---------------------|----------------------------------------------------|---------------------------------------------------------------|\n| **`color`**         | Background color of the `TabBar`.                  | _primary_ for Android, `'#F8F8F8'` for iOS                    |\n| **`activeColor`**   | Text and Icon color of active tab.                 | _white_ for Android, `'#0a60ff'` for iOS                      |\n| **`inactiveColor`** | Text and Icon color of inactive tab.               | `'rgba(209, 216, 224, 0.8)'` for Android, `'#8e8e93'` for iOS |\n| **`top`**           | If the TabBar is on top of the page. Android only. | _false_                                                       |\n\n`TabItem` is the button element to be used within the `TabBar`. It will only accept the atoms `Text`, `Icon` and a `react-native Image`. It contains the same property as a [TouchableOpacity](https://facebook.github.io/react-native/docs/touchableopacity.html). In addition, it contains the following properties as well;\n\n| Prop                | Description                          | Default                                                       |\n|---------------------|--------------------------------------|---------------------------------------------------------------|\n| **`activeColor`**   | Text and Icon color of active tab.   | _white_ for Android, `'#0a60ff'` for iOS                      |\n| **`inactiveColor`** | Text and Icon color of inactive tab. | `'rgba(209, 216, 224, 0.8)'` for Android, `'#8e8e93'` for iOS |\n| **`active`**        | If current `TabItem` is active.      | _false_                                                       |\n\n\n#### PillBar\nThe Pill Navigation Bar.\n\n```js\npillScenes = [\n    { scene: \u003cHome /\u003e },\n    { scene: \u003cCardList data={listData} /\u003e },\n    { scene: \u003cListView data={listData} /\u003e },\n    { scene: \u003cView style={styles.innerContainer}\u003e\u003cForm formElements={formElements} /\u003e\u003c/View\u003e },\n];\n\npillHeaders = [\n    { title: 'Home', icon: \"home\" },\n    { title: 'Card List', icon: \"card\" },\n    { title: 'List View', icon: \"list\" },\n    { title: 'Form', icon: \"help\" }\n];\n\n\u003cPillView pillHeaders={pillHeaders} pillScenes={pillScenes} /\u003e\n```\n\n\n##### Android\n![Android Pill Bar](https://user-images.githubusercontent.com/24349997/55306884-5e34c680-5473-11e9-90a8-5a6138c534e4.PNG \"Android Pill Bar\") \n\n##### iOS\n![iOS Pill Bar](https://user-images.githubusercontent.com/24349997/55306886-5e34c680-5473-11e9-8ad4-05f85ddcef65.png \"iOS Pill Bar\")\n\nThe index of the pillHeader object, will be used to query the corresponding pillScene, during transition.\n\n`PillBar` is the main container for the pill navigation. It makes use of the [View property](https://facebook.github.io/react-native/docs/view.html) and the following:\n\n| Prop        | Description                                | Default                                    |\n|-------------|--------------------------------------------|--------------------------------------------|\n| **`color`** | Active color of the PillBar. Android only. | _primary_ for Android, `'#0a60ff'` for iOS |\n\nThis property `color`, will be passed down to child element `PillItem` as the `activeColor` prop mentioned below\n\n`PillItem` is the button element to be used within the `PillBar`. It will only accept the atoms `Text`, `Icon` and a `react-native Image`. It contains the same property as a [TouchableOpacity](https://facebook.github.io/react-native/docs/touchableopacity.html). In addition, it contains the following properties as well;\n\n| Prop                | Description                                        | Default                                  |\n|---------------------|----------------------------------------------------|------------------------------------------|\n| **`activeColor`**   | Text and Icon color of active tab.                 | _white_ for Android, `'#0a60ff'` for iOS |\n| **`inactiveColor`** | Text and Icon color of inactive tab. Android only. | `'#adadad'`                              |\n| **`active`**        | If current `PillItem` is active.                   | _false_                                  |\n\n## Contributing\nPlease read [CONTRIBUTING.md](https://github.com/99xt/first-born/blob/master/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.\n\n## Versioning\n\nWe use [SemVer](http://semver.org/) for versioning. \n\n## Authors\n\n* **Sameeha Rahman** - *Initial work* - [samsam-026](https://github.com/samsam-026)\n* **Muditha Batagoda** - *Initial Design* - [mudithabatagoda](https://github.com/mudithabatagoda)\n\nSee also the list of [contributors](https://github.com/99xt/first-born/graphs/contributors) who participated in this project.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](https://github.com/99xt/first-born/blob/master/LICENSE) file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F99x%2Ffirst-born","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F99x%2Ffirst-born","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F99x%2Ffirst-born/lists"}