{"id":26560609,"url":"https://github.com/crossplatformsweden/react-native-components","last_synced_at":"2025-08-02T02:04:15.815Z","repository":{"id":57104549,"uuid":"157700553","full_name":"crossplatformsweden/react-native-components","owner":"crossplatformsweden","description":"Beautiful React-Native components using RN Paper by Callstack","archived":false,"fork":false,"pushed_at":"2019-01-25T14:38:57.000Z","size":477,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-29T21:31:56.600Z","etag":null,"topics":["components","crossplatform","fontawesome","javascript","jsx","react-native","react-native-modal","react-native-paper","react-native-vector-icons","typescript"],"latest_commit_sha":null,"homepage":"https://www.crossplatform.se/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/crossplatformsweden.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-11-15T11:29:17.000Z","updated_at":"2020-06-16T16:21:46.000Z","dependencies_parsed_at":"2022-08-20T17:10:50.484Z","dependency_job_id":null,"html_url":"https://github.com/crossplatformsweden/react-native-components","commit_stats":null,"previous_names":["crossplatformsweden/react-native-core"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crossplatformsweden%2Freact-native-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crossplatformsweden%2Freact-native-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crossplatformsweden%2Freact-native-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crossplatformsweden%2Freact-native-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/crossplatformsweden","download_url":"https://codeload.github.com/crossplatformsweden/react-native-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244959458,"owners_count":20538629,"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":["components","crossplatform","fontawesome","javascript","jsx","react-native","react-native-modal","react-native-paper","react-native-vector-icons","typescript"],"created_at":"2025-03-22T13:18:30.828Z","updated_at":"2025-03-22T13:18:31.556Z","avatar_url":"https://github.com/crossplatformsweden.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Crossplatform](https://crossplatform.se/wp-content/uploads/2018/05/Crossplatform-Sweden-AB-01_web.jpg)](https://www.crossplatform.se/)\n\n\u003c!-- language-all: javascript --\u003e\n\n# Crossplatform React-Native Components\n\nBeautiful React-Native components using [react-native-paper](https://github.com/callstack/react-native-paper) and other libraries. If using a paper provider your theme should be applied to all the components.\n\n## [Show me Components!](#components)\n\n**Package renamed**  \nPrevious package name: `@crossplatform/react-native-components`  \nNew package name: `react-native-cross-components`\n\n## Install\nWhen using [Expo](https://www.expo.io/) icons and Paper are bundled.\n\nNote that version of [**React-Native-Vector-Icons**](https://github.com/oblador/react-native-vector-icons) is bound by [Expo](https://www.expo.io) for compatibility.\n\nThe iconset used is currently [FontAwesome v4 icons](https://fontawesome.com/v4.7.0/icons/). Ability to customize which iconset is used might be added. \n\n### Native\nInstall with [react-native-paper](https://github.com/callstack/react-native-paper) and [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) if you don't already have them.\n\n```bash\n\tnpm i react-native-cross-components\n\tnpm i react-native-paper\n\tnpm i react-native-vector-icons\n\treact-native link\n```\n\n```bash\n\tyarn add react-native-cross-components\n\tyarn add react-native-paper\n\tyarn add react-native-vector-icons\n\treact-native link\n```\n\n### Expo prev CRNA\n\n```bash\n\tnpm i react-native-cross-components\n```\n\n```bash\n\tyarn add react-native-cross-components\n```\n\n## Documentation\nSee our GitHub Pages generated from code comments. This documentation is also available as intellisense / auto complete.\n\n* **[API Documentation](https://crossplatformsweden.github.io/react-native-components/)**\n\nThe **[styles](https://crossplatformsweden.github.io/react-native-components/modules/_styles_.html)** used by this library are exported for your convenience.\n\nSee **[Components](#components)** below for examples\n\n---\n\n[![npm](https://img.shields.io/npm/v/react-native-cross-components.svg)](https://www.npmjs.com/package/react-native-cross-components) \n[![npm](https://img.shields.io/npm/dt/react-native-cross-components.svg)](https://www.npmjs.com/package/react-native-cross-components) \n[![Build status](https://img.shields.io/azure-devops/build/crossplatformsweden/parkeraapp/15.svg)](https://crossplatformsweden.visualstudio.com/ParkeraApp/_build/latest?definitionId=15) \n[![codecov](https://codecov.io/gh/crossplatformsweden/react-native-components/branch/master/graph/badge.svg)](https://codecov.io/gh/crossplatformsweden/react-native-components) \n[![dependencies](https://david-dm.org/crossplatformsweden/react-native-components/status.svg)](https://david-dm.org/crossplatformsweden/react-native-components) \n[![peer dependencies](https://img.shields.io/david/peer/crossplatformsweden/react-native-components.svg)](https://github.com/crossplatformsweden/react-native-components)\n[![Prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n![GitHub](https://img.shields.io/github/license/crossplatformsweden/react-native-components.svg) \n\n[![React Native](https://img.shields.io/badge/React%20Native-v0.57-blue.svg)](https://facebook.github.io/react-native/) \n[![React Native Paper](https://img.shields.io/badge/React%20Native%20Paper-v2.2.4-blue.svg)](https://github.com/callstack/react-native-paper) \n[![React Native Vector Icons](https://img.shields.io/badge/React%20Native%20Vector%20Icons-v4.5.0-blue.svg)](https://github.com/oblador/react-native-vector-icons) \n[![React Native Indicators](https://img.shields.io/badge/React%20Native%20Indicators-v0.13.0-blue.svg)](https://github.com/n4kz/react-native-indicators) \n[![React Native Modal](https://img.shields.io/badge/React%20Native%20Modal-v7.0.0-blue.svg)](https://github.com/react-native-community/react-native-modal) \n\n[![GitHub forks](https://img.shields.io/github/forks/crossplatformsweden/react-native-components.svg?style=social\u0026label=Fork)](https://github.com/crossplatformsweden/react-native-components)\n[![GitHub stars](https://img.shields.io/github/stars/crossplatformsweden/react-native-components.svg?style=social\u0026label=Star)](https://github.com/crossplatformsweden/react-native-components)\n[![GitHub watchers](https://img.shields.io/github/watchers/crossplatformsweden/react-native-components.svg?style=social\u0026label=Watch)](https://github.com/crossplatformsweden/react-native-components)\n[![Twitter Follow](https://img.shields.io/twitter/follow/crossplatformse.svg?style=social)](https://twitter.com/crossplatformse)\n\n## Table of Contents\n  * [[Show me Components!](#components)](#-show-me-components----components-)\n  * [Install](#install)\n    + [Native](#native)\n    + [Expo prev CRNA](#expo-prev-crna)\n  * [Documentation](#documentation)\n  * [Components](#components)\n    + [CrossButton](#crossbutton)\n    + [CrossBusyIndicator](#crossbusyindicator)\n    + [CrossSpinner](#crossspinner)\n    + [CrossLabel](#crosslabel)\n    + [CrossEditor](#crosseditor)\n\n\u003csmall\u003e\u003ci\u003e\u003ca href='http://ecotrust-canada.github.io/markdown-toc/'\u003eTable of contents generated with markdown-toc\u003c/a\u003e\u003c/i\u003e\u003c/small\u003e\n\n## Components\n### CrossButton\n![](https://media.giphy.com/media/MohS56wPG7AgPGteu1/giphy.gif)\n\nRenders an [FontAwesome Button](https://github.com/oblador/react-native-vector-icons#iconbutton-component) if only `iconName` is supplied, else an [Paper Button](https://callstack.github.io/react-native-paper/button.html).\n\nFor properties and documentation, see **[API reference - Class CrossButton](https://crossplatformsweden.github.io/react-native-components/classes/_components_buttons_crossbutton_.crossbutton.html)**. \n\nStyles can be customized using [ButtonStyle, IconStyle and style properties](https://crossplatformsweden.github.io/react-native-components/interfaces/_components_buttons_crossbutton_.icrossbuttonprops.html).\n\nHowever, react-native-paper is currently missing the option to customize **[fontSize](https://github.com/callstack/react-native-paper/issues/546)**.\n\n**Examples**\n\nButton with **[title](https://crossplatformsweden.github.io/react-native-components/interfaces/_components_modals_crossbusyindicator_.ibusyindicatorprops.html#type)**, but no icon and **[mode](https://crossplatformsweden.github.io/react-native-components/interfaces/_components_buttons_crossbutton_.icrossbuttonprops.html#mode)** *contained* (background color):\n\n```typescript\n\timport { CrossButton } from 'react-native-cross-components';\n\t\n\texport const ButtonComp =\u003e () =\u003e (\n \t\t\u003cCrossButton\n            title=\"Click me\"\n            mode=\"contained\"\n            onPress={() =\u003e OnButtonPress('Pressed button with no icon')}\n          /\u003e\n\t);\n```\n\nButton with **[title](https://crossplatformsweden.github.io/react-native-components/interfaces/_components_modals_crossbusyindicator_.ibusyindicatorprops.html#type)** and **[iconName](https://crossplatformsweden.github.io/react-native-components/interfaces/_components_buttons_crossbutton_.icrossbuttonprops.html#iconname)**, default *text* **[mode](https://crossplatformsweden.github.io/react-native-components/interfaces/_components_buttons_crossbutton_.icrossbuttonprops.html#mode)** (no background):\n\n```typescript\n\timport { CrossButton } from 'react-native-cross-components';\n\t\n\texport const ButtonComp =\u003e () =\u003e (\n          \u003cCrossButton\n            title=\"Click me\"\n            iconName=\"home\"\n            onPress={() =\u003e OnButtonPress('Pressed button with icon')}\n          /\u003e\n\t);\n```\n\t\nClickable icon:\n\n```typescript\n\timport { CrossButton } from 'react-native-cross-components';\n\t\n\texport const ButtonComp =\u003e () =\u003e (\n          \u003cCrossButton\n            iconName=\"map\"\n            onPress={() =\u003e OnButtonPress('Pressed icon with no title')}\n            backgroundColor=\"transparent\"\n          /\u003e\n\t);\n```\n\n### CrossBusyIndicator\n![](https://media.giphy.com/media/1jYwyqHG3zWRcKucSg/giphy.gif)\n\nRenders a [react-native-modal](https://github.com/react-native-community/react-native-modal) containing cool animations from [react-native-indicators](https://github.com/n4kz/react-native-indicators).\n\nFor properties and documentation, see **[API reference - Class CrossBusyIndicator](https://crossplatformsweden.github.io/react-native-components/classes/_components_modals_crossbusyindicator_.crossbusyindicator.html)**. \n\n**Examples**\n\nFeedback **[message](https://crossplatformsweden.github.io/react-native-components/interfaces/_components_modals_crossbusyindicator_.ibusyindicatorprops.html#message)** and *PacmanIndicator* **[type](https://crossplatformsweden.github.io/react-native-components/interfaces/_components_modals_crossbusyindicator_.ibusyindicatorprops.html#type)** (because, why not).\n\n```typescript\n\t\u003cCrossBusyIndicator\n\t\t  isBusy={this.state.isBusy}\n\t\t  type='PacmanIndicator'\n\t\t  isCancelButtonVisible={true}\n\t\t  message=\"Loading..\"\n\t\t  onCancel={() =\u003e this.setState({ isBusy: false })}\n\t/\u003e\n```\n\nNon-cancellable and custom styles for `spinnerProps` and `messageStyle`:\n\n```typescript\n\t\u003cCrossBusyIndicator\n\t\t  spinnerProps={{ color: 'red', type: 'WaveIndicator' }}\n\t\t  messageStyle={{ color: 'red' }}\n\t\t  isBusy={this.state.isBusy2}\n\t\t  isCancelButtonVisible={false}\n\t\t  message=\"Resistance is futile\"\n\t/\u003e\n```\n\nCustom **[modal](https://crossplatformsweden.github.io/react-native-components/interfaces/_components_modals_crossbusyindicator_.ibusyindicatorprops.html#modalprops)** props:\n\n```typescript\n       \u003cCrossBusyIndicator\n          modalProps={{\n            swipeDirection: 'up',\n            backdropColor: 'blue'\n          }}\n          isBusy={this.state.isBusy2}\n          isCancelButtonVisible={false}\n          message=\"Busy busy busy..\"\n        /\u003e\n```\n\n\n### CrossSpinner\n[![](https://user-images.githubusercontent.com/2055622/28246049-e82c70e8-6a1b-11e7-93cc-8aa6d0d19867.gif)](https://github.com/n4kz/react-native-indicators)\n\nBasically just wraps [react-native-indicators](https://github.com/n4kz/react-native-indicators) so you can provide the type you want via property.\n\nFor properties and documentation, see **[API reference - Class CrossSpinner](https://crossplatformsweden.github.io/react-native-components/modules/_components_animations_crossspinner_.html)**. \n\n\n**Examples**\n\n```typescript\n    \u003cCrossSpinner\n        type={CrossSpinnerType.MaterialIndicator}\n        style={styles.spinner}\n      /\u003e\n```\n\n### CrossLabel\n![](https://media.giphy.com/media/9uI8mhykeGr65G97Iq/giphy.gif)\n\nWraps [react-native-paper](https://callstack.github.io/react-native-paper/index.html) typhography components and can also act as a clickable text link.\n\nFor properties and documentation, see **[API reference - Class CrossLabel](https://crossplatformsweden.github.io/react-native-components/modules/_components_labels_crosslabel_.html)**.\n\n**Examples**\n\n**Headline** component:\n\n```typescript\n    \u003cCrossLabel isHeadline={true}\u003eCrossplatform (isHeadline=true)\u003c/CrossLabel\u003e\n```\n\n**Title** component:\n\n```typescript\n    \u003cCrossLabel isTitle={true}\u003e\u0026lt;CrossLabel isTitle=true\u0026gt;\u003c/CrossLabel\u003e\n```\n\n**Subheading** (with custom style):\n\n```typescript\n    \u003cCrossLabel\n      isSubheading={true}\n      style={{ marginTop: 5 }}\n    \u003e\n      isSubHeading = true\n    \u003c/CrossLabel\u003e\n```\n**Caption** component (with custom style):\n\n```typescript\n    \u003cCrossLabel\n      isCaption={true}\n      style={{ color: Colors.CrossLightBlue, marginTop: 10 }}\n    \u003e\n      isCaption=true, custom color\n    \u003c/CrossLabel\u003e\n```\n\n**Paragraph** component (with custom style):\n\n```typescript\n    \u003cCrossLabel\n      isParagraph={true}\n      style={{ marginTop: 5 }}\n    \u003e\n      isParagraph = true\n    \u003c/CrossLabel\u003e\n```\n\nURL link using **[onPressUrlTarget](https://crossplatformsweden.github.io/react-native-components/interfaces/_components_labels_crosslabel_.icrosslabelprops.html#onpressurltarget)** property. You can also set color using **[linkColor](https://crossplatformsweden.github.io/react-native-components/interfaces/_components_labels_crosslabel_.icrosslabelprops.html#linkcolor)**.\n\n```typescript\n    \u003cCrossLabel\n      onPressUrlTarget=\"https://www.typescriptlang.org/\"\n      isSubheading={true}\n      style={{ marginTop: 20, marginBottom: 10 }}\n    \u003e\n      Clickable link (onPressUrlTarget):\n    \u003c/CrossLabel\u003e\n```\n\nRegular **onPress** event:\n\n```typescript\n    \u003cCrossLabel\n      onPress={() =\u003e Message('CrossLabel onPress')}\n      style={{ marginTop: 20, marginBottom: 10 }}\n    \u003e\n      onPress message\n    \u003c/CrossLabel\u003e\n```\n\n### CrossEditor\n![](https://media.giphy.com/media/TH694OoLKfFGvm65TD/giphy.gif)\n\nA [Paper TextInput](https://callstack.github.io/react-native-paper/text-input.html) that also supports masking using [react-native-masked-input](https://github.com/benhurott/react-native-masked-text).\n\nFor properties and documentation, see **[API reference - Class CrossEditor](https://crossplatformsweden.github.io/react-native-components/modules/_components_input_crosseditor_.html)**. \n\n**Examples**\n\nBasic usage\n\n```typescript\n\t\u003cCrossEditor\n        label={'Test'}\n        onChangeText={(val) =\u003e console.log('Got value', val)}\n        value={'Textvalue'}\n        /\u003e\n```\n\nMasked input usage. For `maskProps` documentation see [react-native-masked-input](https://github.com/benhurott/react-native-masked-text).\n\n```typescript\n\t\u003cCrossEditor label=\"Phone\" maskProps={{ type: 'cel-phone' }} /\u003e\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrossplatformsweden%2Freact-native-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrossplatformsweden%2Freact-native-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrossplatformsweden%2Freact-native-components/lists"}