Crossplatform React-Native Components

Beautiful React-Native components using react-native-paper and other libraries. If using a paper provider your theme should be applied to all the components.

Show me Components!

Package renamed
Previous package name: @crossplatform/react-native-components
New package name: react-native-cross-components

Install

When using Expo icons and Paper are bundled.

Note that version of React-Native-Vector-Icons is bound by Expo for compatibility.

The iconset used is currently FontAwesome v4 icons. Ability to customize which iconset is used might be added.

$3

Install with react-native-paper and react-native-vector-icons if you don't already have them.

``bash
npm i react-native-cross-components
npm i react-native-paper
npm i react-native-vector-icons
react-native link
`

`bash
yarn add react-native-cross-components
yarn add react-native-paper
yarn add react-native-vector-icons
react-native link
`

$3

`bash
npm i react-native-cross-components
`

`bash
yarn add react-native-cross-components
`

Documentation

See our GitHub Pages generated from code comments. This documentation is also available as intellisense / auto complete.

* API Documentation

The styles used by this library are exported for your convenience.

See Components below for examples

---

!GitHub



Table of Contents

* [Show me Components!](#-show-me-components----components-)
* Install
+ Native
+ Expo prev CRNA
* Documentation
* Components
+ CrossButton
+ CrossBusyIndicator
+ CrossSpinner
+ CrossLabel
+ CrossEditor

Table of contents generated with markdown-toc

Components

$3


Renders an FontAwesome Button if only iconName is supplied, else an Paper Button.

For properties and documentation, see API reference - Class CrossButton.

Styles can be customized using ButtonStyle, IconStyle and style properties.

However, react-native-paper is currently missing the option to customize fontSize.

Examples

Button with title, but no icon and mode contained (background color):

`typescript
import { CrossButton } from 'react-native-cross-components';

export const ButtonComp => () => (
title="Click me"
mode="contained"
onPress={() => OnButtonPress('Pressed button with no icon')}
/>
);
`

Button with title and iconName, default text mode (no background):

`typescript
import { CrossButton } from 'react-native-cross-components';

export const ButtonComp => () => (
title="Click me"
iconName="home"
onPress={() => OnButtonPress('Pressed button with icon')}
/>
);
`

Clickable icon:

`typescript
import { CrossButton } from 'react-native-cross-components';

export const ButtonComp => () => (
iconName="map"
onPress={() => OnButtonPress('Pressed icon with no title')}
backgroundColor="transparent"
/>
);
`

$3


Renders a react-native-modal containing cool animations from react-native-indicators.

For properties and documentation, see API reference - Class CrossBusyIndicator.

Examples

Feedback message and PacmanIndicator type (because, why not).

`typescript
isBusy={this.state.isBusy}
type='PacmanIndicator'
isCancelButtonVisible={true}
message="Loading.."
onCancel={() => this.setState({ isBusy: false })}
/>
`

Non-cancellable and custom styles for spinnerProps and messageStyle:

`typescript
spinnerProps={{ color: 'red', type: 'WaveIndicator' }}
messageStyle={{ color: 'red' }}
isBusy={this.state.isBusy2}
isCancelButtonVisible={false}
message="Resistance is futile"
/>
`

Custom modal props:

`typescript
modalProps={{
swipeDirection: 'up',
backdropColor: 'blue'
}}
isBusy={this.state.isBusy2}
isCancelButtonVisible={false}
message="Busy busy busy.."
/>
`




$3


Basically just wraps react-native-indicators so you can provide the type you want via property.

For properties and documentation, see API reference - Class CrossSpinner.

Examples

`typescript
type={CrossSpinnerType.MaterialIndicator}
style={styles.spinner}
/>
`

$3


Wraps react-native-paper typhography components and can also act as a clickable text link.

For properties and documentation, see API reference - Class CrossLabel.

Examples

Headline component:

`typescript
Crossplatform (isHeadline=true)
`

Title component:

`typescript
<CrossLabel isTitle=true>
`

Subheading (with custom style):

`typescript
isSubheading={true}
style={{ marginTop: 5 }}
>
isSubHeading = true

`
Caption component (with custom style):

`typescript
isCaption={true}
style={{ color: Colors.CrossLightBlue, marginTop: 10 }}
>
isCaption=true, custom color

`

Paragraph component (with custom style):

`typescript
isParagraph={true}
style={{ marginTop: 5 }}
>
isParagraph = true

`

URL link using onPressUrlTarget property. You can also set color using linkColor.

`typescript
onPressUrlTarget="https://www.typescriptlang.org/"
isSubheading={true}
style={{ marginTop: 20, marginBottom: 10 }}
>
Clickable link (onPressUrlTarget):

`

Regular onPress event:

`typescript
onPress={() => Message('CrossLabel onPress')}
style={{ marginTop: 20, marginBottom: 10 }}
>
onPress message

`

$3


A Paper TextInput that also supports masking using react-native-masked-input.

For properties and documentation, see API reference - Class CrossEditor.

Examples

Basic usage

`typescript
label={'Test'}
onChangeText={(val) => console.log('Got value', val)}
value={'Textvalue'}
/>
`

Masked input usage. For maskProps documentation see react-native-masked-input.

`typescript

``