Giter Club home page Giter Club logo

react-native-components's Introduction

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.

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

react-native-components's People

Contributors

thomashagstrom avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

thomashagstrom

react-native-components's Issues

Not all components are working

Not all components are rendered.

  1. react-native init MyApp --template typescript && node MyApp/setup.js
  2. npm i [email protected] react-native-paper react-native-cross-components && react-native link
  3. Add components to App.tsx

Suggestion add:
npm i [email protected] react-native-paper react-native-cross-components && react-native link react-native-vector-icons to postinstall in package.json? hardcode correct paper version?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.