Beautiful React-Native components using RN Paper by Callstack
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__mocks__
config
scripts
source
.babelrc
.flowconfig
.gitattributes
.gitignore
.nojekyll
.npmignore
.prettierrc
.travis.yml
.watchmanconfig
Developer.md
LICENSE
ReadMe.md
codecov.yml
jest.config.js
package.json
rn-cli.config.js
tsconfig.json
tslint.json
typedoc.js
yarn.lock

ReadMe.md

Crossplatform

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.

Native

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

	npm i react-native-cross-components
	npm i react-native-paper
	npm i react-native-vector-icons
	react-native link
	yarn add react-native-cross-components
	yarn add react-native-paper
	yarn add react-native-vector-icons
	react-native link

Expo prev CRNA

	npm i react-native-cross-components
	yarn add react-native-cross-components

Documentation

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

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

See Components below for examples


npm npm Build status codecov dependencies peer dependencies Prettier GitHub

React Native React Native Paper React Native Vector Icons React Native Indicators React Native Modal

GitHub forks GitHub stars GitHub watchers Twitter Follow

Table of Contents

Table of contents generated with markdown-toc

Components

CrossButton

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):

	import { CrossButton } from 'react-native-cross-components';
	
	export const ButtonComp => () => (
 		<CrossButton
            title="Click me"
            mode="contained"
            onPress={() => OnButtonPress('Pressed button with no icon')}
          />
	);

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

	import { CrossButton } from 'react-native-cross-components';
	
	export const ButtonComp => () => (
          <CrossButton
            title="Click me"
            iconName="home"
            onPress={() => OnButtonPress('Pressed button with icon')}
          />
	);

Clickable icon:

	import { CrossButton } from 'react-native-cross-components';
	
	export const ButtonComp => () => (
          <CrossButton
            iconName="map"
            onPress={() => OnButtonPress('Pressed icon with no title')}
            backgroundColor="transparent"
          />
	);

CrossBusyIndicator

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).

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

Non-cancellable and custom styles for spinnerProps and messageStyle:

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

Custom modal props:

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

CrossSpinner

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

    <CrossSpinner
        type={CrossSpinnerType.MaterialIndicator}
        style={styles.spinner}
      />

CrossLabel

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:

    <CrossLabel isHeadline={true}>Crossplatform (isHeadline=true)</CrossLabel>

Title component:

    <CrossLabel isTitle={true}>&lt;CrossLabel isTitle=true&gt;</CrossLabel>

Subheading (with custom style):

    <CrossLabel
      isSubheading={true}
      style={{ marginTop: 5 }}
    >
      isSubHeading = true
    </CrossLabel>

Caption component (with custom style):

    <CrossLabel
      isCaption={true}
      style={{ color: Colors.CrossLightBlue, marginTop: 10 }}
    >
      isCaption=true, custom color
    </CrossLabel>

Paragraph component (with custom style):

    <CrossLabel
      isParagraph={true}
      style={{ marginTop: 5 }}
    >
      isParagraph = true
    </CrossLabel>

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

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

Regular onPress event:

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

CrossEditor

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

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

Examples

Basic usage

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

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

	<CrossEditor label="Phone" maskProps={{ type: 'cel-phone' }} />