react-native-cross-components

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.

• API Documentation

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

See Components below for examples

---

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

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' }} />