react-native-material-kit

react-native-material-kit

Version 0.6.0-beta.1
Published 4 years ago
221 kB
1 dependency
MIT license

Install

npm i react-native-material-kit

yarn add react-native-material-kit

pnpm add react-native-material-kit

Overview

react-native-material-kit, the toolkit introducing Material Design to React Native.

Author: ywu on 15/6/1.

Index

Variables

variable AccentFab

const AccentFab: SFC<ButtonProps>;

Accent colored floating action button

variable AccentRaisedButton

const AccentRaisedButton: SFC<ButtonProps>;

Raised button with Accent color

variable ButtonStyles

const ButtonStyles: {
    buttonText: typeof buttonText;
    buttonTextAccent: typeof buttonTextAccent;
    buttonTextPrimary: typeof buttonTextPrimary;
    coloredButtonText: typeof coloredButtonText;
};

Pre-defined Button props/styles for common cases

variable ColoredFab

const ColoredFab: SFC<ButtonProps>;

Primary floating action button

variable ColoredRaisedButton

const ColoredRaisedButton: SFC<ButtonProps>;

Primary raised button

variable Fab

const Fab: SFC<ButtonProps>;

Default floating action button

variable FlatButton

const FlatButton: SFC<ButtonProps>;

Flat button (text button)

variable MKColor

const MKColor: {
    Amber: string;
    Blue: string;
    BlueGrey: string;
    Brown: string;
    Cyan: string;
    DeepOrange: string;
    DeepPurple: string;
    Green: string;
    Grey: string;
    Indigo: string;
    LightBlue: string;
    LightGreen: string;
    Lime: string;
    Orange: string;
    Pink: string;
    Purple: string;
    Red: string;
    Silver: string;
    Teal: string;
    Yellow: string;
    Transparent: string;
    RGBAmber: string;
    RGBIndigo: string;
    RGBPink: string;
    RGBPurple: string;
    RGBTeal: string;
    palette_blue_400: string;
    palette_green_500: string;
    palette_red_500: string;
    palette_yellow_600: string;
};

The default palette.
Created by ywu on 15/7/16.
Modifiers
- @public

variable RaisedButton

const RaisedButton: SFC<ButtonProps>;

Default raised button

Functions

function buttonText

buttonText: (theme?: Theme, color?: AttrValue) => TextStyle;

Text style for buttons, default color is black

function buttonTextAccent

buttonTextAccent: (theme?: Theme) => TextStyle;

Text style using accent color

function buttonTextPrimary

buttonTextPrimary: (theme?: Theme) => TextStyle;

Text style using primary color

function coloredButtonText

coloredButtonText: (theme?: Theme) => TextStyle;

Text style for colored buttons

function getTheme

getTheme: () => Theme;

Retrieve a copy of the current theme

function setTheme

setTheme: (aTheme: Theme) => void;

Set the current theme.
Parameter
aTheme the new Theme
See http://www.getmdl.io/customize

Classes

class Button

class Button extends Component<ButtonProps, ButtonState> {}

The Button component.
Remarks
With configurable shadow, ripple effect, and FAB style. See ButtonProps for the available props.
Refer to Guideline or MDL implementation

constructor

constructor(props: ButtonProps);

property defaultProps

static defaultProps: ButtonProps;

Default props

method render

render: () => JSX.Element;

See documentation for Component.render from package @types/react.

class Checkbox

class Checkbox extends Component<CheckboxProps, CheckboxState> {}

The Checkbox component.
Remarks
See Guideline & MDL implementation

constructor

constructor(props: any);

property defaultProps

static defaultProps: any;

Default props

method render

render: () => JSX.Element;

method UNSAFE_componentWillMount

UNSAFE_componentWillMount: () => void;

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (nextProps: CheckboxProps) => void;

TODO using controlled components.
See Also
- https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html?#preferred-solutions

class IconToggle

class IconToggle extends Component<IconToggleProps, IconToggleState> {}

The IconToggle component.
See MDL implementation

constructor

constructor(props: IconToggleProps);

property defaultProps

static defaultProps: IconToggleProps;

Default props

method render

render: () => JSX.Element;

method UNSAFE_componentWillMount

UNSAFE_componentWillMount: () => void;

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (nextProps: IconToggleProps) => void;

class IndeterminateProgress

class IndeterminateProgress extends Component<SimpleProgressProps> {}

Indeterminate linear progress indicator.
Remarks
Continually growing and shrinking along the track until the process is complete. See SimpleProgressProps for the available props.
Refer to Guideline or MDL implementation

constructor

constructor(props: SimpleProgressProps);

property defaultProps

static defaultProps: SimpleProgressProps;

Defaults, see defaultSimpleProps

method render

render: () => JSX.Element;

See documentation for Component.render from package @types/react.

class Progress

class Progress extends Component<ProgressProps> {}

Determinate linear progress indicator.
Remarks
Increasing in width from 0 to 100% of the track, in sync with the process’s progress, with a simplified buffering effect. Refer to Guideline or MDL implementation

constructor

constructor(props: ProgressProps);

property buffer

buffer: number;

Get current buffering progress

property defaultProps

static defaultProps: ProgressProps;

Defaults, see defaultSimpleProps

property Indeterminate

static Indeterminate: typeof IndeterminateProgress;

The indeterminate version of Progress

property progress

progress: number;

Get current progress

method render

render: () => JSX.Element;

See documentation for Component.render from package @types/react.

method UNSAFE_componentWillMount

UNSAFE_componentWillMount: () => void;

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (nextProps: ProgressProps) => void;

class RadioButton

class RadioButton extends Component<RadioButtonProps, RadioButtonState> {}

The RadioButton component.
Remarks
See Guideline & MDL implementation

constructor

constructor(props: RadioButtonProps);

property defaultProps

static defaultProps: RadioButtonProps;

Default props

method componentWillUnmount

componentWillUnmount: () => void;

method confirmToggle

confirmToggle: () => void;

method confirmUncheck

confirmUncheck: () => void;

method render

render: () => JSX.Element;

method UNSAFE_componentWillMount

UNSAFE_componentWillMount: () => void;

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (nextProps: RadioButtonProps) => void;

class RadioButtonGroup

class RadioButtonGroup {}

Managing a group of radio buttons.

constructor

constructor(onAdd?: Pred, onRemove?: Pred);

method add

add: (btn: RadioButton) => void;

method onChecked

onChecked: (btn: RadioButton, checked: boolean) => void;

method remove

remove: (btn: RadioButton) => void;

class RangeSlider

class RangeSlider extends Component<RangeSliderProps> {}

The RangeSlider component.
Remarks
See RangeSliderProps for the available props. Refer to Guideline or MDL implementation

constructor

constructor(props: RangeSliderProps);

property defaultProps

static defaultProps: RangeSliderProps;

Defaults, see defaultProps

property maxValue

maxValue: number;

Retrieve the current maxValue

property minValue

minValue: number;

Retrieve the current minValue

method render

render: () => JSX.Element;

method UNSAFE_componentWillMount

UNSAFE_componentWillMount: () => void;

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (nextProps: RangeSliderProps) => void;

class Ripple

class Ripple extends Component<RippleProps, RippleState> {}

Reusable Ripple effect.

constructor

constructor(
    props: {
        rippleColor?: string;
        rippleDuration?: number;
        rippleLocation?: RippleLocation;
        maskEnabled?: boolean;
        maskColor?: string;
        borderWidth?: number;
        maskBorderRadius?: number;
        maskBorderRadiusInPercent?: number;
        maskDuration?: number;
        shadowAniEnabled?: boolean;
        disabled?: boolean;
    } & MKTouchableProps
);

property defaultProps

static defaultProps: {
    rippleColor?: string;
    rippleDuration?: number;
    rippleLocation?: RippleLocation;
    maskEnabled?: boolean;
    maskColor?: string;
    borderWidth?: number;
    maskBorderRadius?: number;
    maskBorderRadiusInPercent?: number;
    maskDuration?: number;
    shadowAniEnabled?: boolean;
    disabled?: boolean;
} & MKTouchableProps;

Default props

method hideRipple

hideRipple: () => void;

Stop the ripple effect

method measure

measure: (cb: MeasureOnSuccessCallback) => any;

Measure the size of the Ripple.
Parameter cb
measurement callback

method render

render: () => JSX.Element;

See documentation for Component.render from package @types/react.

method showRipple

showRipple: () => void;

Start the ripple effect

class Slider

class Slider extends Component<SliderProps> {}

The Slider component.
Remarks
See SliderProps for the available props. Refer to Guideline or MDL implementation

constructor

constructor(props: SliderProps);

property defaultProps

static defaultProps: SliderProps;

Defaults, see defaultProps

property value

value: number;

method render

render: () => JSX.Element;

method UNSAFE_componentWillMount

UNSAFE_componentWillMount: () => void;

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (nextProps: SliderProps) => void;

class Spinner

class Spinner extends Component<SpinnerProps, SpinnerState> {}

The default Spinner component.
Remarks
See SpinnerProps for the available props.
Refer to Guideline or MDL implementation

constructor

constructor(props: SpinnerProps);

property defaultProps

static defaultProps: SpinnerProps;

Default props of Spinner

method render

render: () => JSX.Element;

See documentation for Component.render from package @types/react.

class Switch

class Switch extends Component<SwitchProps, SwitchState> {}

The Switch component.
Remarks
Which is made up of a Track and a Thumb.
See Guideline & MDL implementation

constructor

constructor(props: SwitchProps);

property defaultProps

static defaultProps: SwitchProps;

Default props

method render

render: () => JSX.Element;

See documentation for Component.render from package @types/react.

method UNSAFE_componentWillMount

UNSAFE_componentWillMount: () => void;

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (nextProps: SwitchProps) => void;

class Textfield

class Textfield extends Component<TextfieldProps, TextfieldState> {}

The Textfield component, which has an optional FloatingLabel and Underline. - TODO styling read-only & disabled mode

constructor

constructor(props: TextfieldProps);

property defaultProps

static defaultProps: Partial<TextfieldProps>;

Defaults, see defaultProps

method blur

blur: () => void;

Removes focus from an input or view. This is the opposite of focus().

method componentDidMount

componentDidMount: () => void;

method focus

focus: () => void;

Requests focus for the given input or view. The exact behavior triggered will depend on the platform and type of view.

method isFocused

isFocused: () => boolean;

Checks if the input is currently focused.

method render

render: () => JSX.Element;

method UNSAFE_componentWillMount

UNSAFE_componentWillMount: () => void;

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (nextProps: TextfieldProps) => void;

Interfaces

interface ButtonProps

interface ButtonProps extends TouchableWithoutFeedbackProps, RippleProps {}

Props of Button, which extends RippleProps and TouchableWithoutFeedbackProps

property enabled

enabled?: boolean;

Whether the button is enabled.

property fab

fab?: boolean;

Whether this's a FAB.

interface CheckedEvent

interface CheckedEvent {}

property checked

checked: boolean;

interface Dimension

interface Dimension {}

property height

height: number;

property width

width: number;

interface IconToggleProps

interface IconToggleProps extends RippleProps, TouchableWithoutFeedbackProps {}

Props of IconToggle

property checked

checked?: boolean;

Toggle status

property enabled

enabled?: boolean;

property onCheckedChange

onCheckedChange?: CheckedListener;

Callback when the toggle status is changed

interface NumRange

interface NumRange {}

Numeric range

property max

max: number;

property min

min: number;

interface ProgressProps

interface ProgressProps extends SimpleProgressProps {}

Props of Progress, which extends SimpleProgressProps

property buffer

buffer?: number;

Initial value of buffering, Number: [0, 1.0]

property bufferAniDuration

bufferAniDuration?: number;

Duration of the buffering animation, in milliseconds

property bufferColor

bufferColor?: string;

Color of the buffering layer

property progress

progress?: number;

Initial value of progress, Number: [0, 1.0]

interface RadioButtonProps

interface RadioButtonProps extends RippleProps, TouchableWithoutFeedbackProps {}

Props of RadioButton

property borderOffColor

borderOffColor?: string;

property borderOnColor

borderOnColor?: string;

property checked

checked?: boolean;

property extraRippleRadius

extraRippleRadius?: number;

property fillColor

fillColor?: string;

property group

group?: RadioButtonGroup;

property onCheckedChange

onCheckedChange?: CheckedListener;

interface RangeSliderProps

interface RangeSliderProps extends ViewProps {}

Props of RangeSlider

property lowerTrackColor

lowerTrackColor?: any;

Color of the lower part of the track, it's also the color of the thumb

property max

max: number;

Upper limit of the range, default is 100

property min

min: number;

Lower limit of the range, default is 0

property onChange

onChange?: (range: NumRange) => void;

Callback when value changed

property onConfirm

onConfirm?: (range: NumRange) => void;

Callback when the value is confirmed

property onStart

onStart?: ThumbGestureCallback;

Callback when drag gesture begins

property range

range?: NumRange;

Initial value of range

property step

step?: number;

Step value of the RangeSlider, must be a divisor of max

property thumbPadding

thumbPadding?: number;

Padding for the hitSlop on the RangeSlider thumb

property thumbRadius

thumbRadius?: number;

Radius of the thumb of the RangeSlider

property trackSize

trackSize?: number;

The thickness of the RangeSlider track

property upperTrackColor

upperTrackColor?: any;

Color of the upper part of the track

interface SimpleProgressProps

interface SimpleProgressProps extends ViewProps {}

Basic Props of Progress, which extends ViewProps

property progressAniDuration

progressAniDuration?: number;

Animation duration (milliseconds)

property progressColor

progressColor?: string;

Color of the progress layer

interface SliderProps

interface SliderProps extends ViewProps {}

Props of Slider

property lowerTrackColor

lowerTrackColor?: any;

Color of the lower part of the track, it's also the color of the thumb

property max

max: number;

Maximum value of the range, default is 100.

property min

min: number;

Minimum value of the range, default is 0.

property onChange

onChange?: (value: number) => void;

Callback when value changed

property onConfirm

onConfirm?: (value: number) => void;

Callback when the value is confirmed

property onPressIn

onPressIn?: () => void;

Callback when slider is pressed anywhere

property onPressOut

onPressOut?: () => void;

Callback when slider stops being pressed

property step

step?: number;

Step value of the Slider, must be a divisor of max

property thumbPadding

thumbPadding?: number;

Padding for the hitSlop on the Slider thumb

property thumbRadius

thumbRadius?: number;

Radius of the thumb of the Slider

property trackSize

trackSize?: number;

The thickness of the Slider track

property upperTrackColor

upperTrackColor?: any;

Color of the upper part of the track

property value

value: number;

Current value

interface SpinnerProps

interface SpinnerProps extends ViewProps {}

Props of Spinner, which extends ViewProps

property spinnerAniDuration

spinnerAniDuration?: number;

Duration of the spinner animation, in milliseconds

property strokeColor

strokeColor?: any;

Colors of the progress stroke.
type: {Array|String} can be a list of colors or a single one

property strokeWidth

strokeWidth?: number;

Width of the progress stroke

interface SwitchProps

interface SwitchProps extends TouchableWithoutFeedbackProps {}

Props of Switch

property checked

checked?: boolean;

Toggle status of the Switch

property offColor

offColor?: string;

Color of the track, when switch is off

property onCheckedChange

onCheckedChange?: CheckedListener;

Callback when the toggle status is changed.

property onColor

onColor?: string;

Color of the track, when switch is checked

property rippleAniDuration

rippleAniDuration?: number;

Duration of the ripple effect, in milliseconds

property rippleColor

rippleColor?: string;

Color of the ripple layer

property thumbAniDuration

thumbAniDuration?: number;

Duration of the thumb sliding animation, in milliseconds

property thumbOffColor

thumbOffColor?: string;

Color of the thumb, when switch is off

property thumbOnColor

thumbOnColor?: string;

Color of the thumb, when switch is checked

property thumbRadius

thumbRadius?: number;

Radius of the thumb button

property trackLength

trackLength?: number;

The length of the Switch track

property trackSize

trackSize?: number;

The thickness of the Switch track

interface TextfieldProps

interface TextfieldProps
    extends TextInputProps,
        FloatingLabelPublicProps,
        UnderlinePublicProps {}

Props of the Textfield component

property additionalInputProps

additionalInputProps?: TextInputProps;

Additional props passed directly to the react native TextInput component

property highlightColor

highlightColor?: any;

Color of the highlighted underline, and also the floating label

property onTextChange

onTextChange?: (text: string) => void;

alias to onChangeText

property password

password?: boolean;

Alias to secureTextEntry

property textInputStyle

textInputStyle?: StyleProp<TextStyle>;

Style applied to the TextInput component, ok to use StyleSheet

property tint

tint?: any;

Color of the un-highlighted underline, and the placeholder - TODO cursor color is not affected for now
See Also
- https://github.com/facebook/react-native/issues/1685

interface Theme

interface Theme {}

index signature

[name: string]: AttrValue;

Type Aliases

type AttrValue

type AttrValue = string | number | Theme | AttrReference;

type CheckboxProps

type CheckboxProps = {
    /** Color of the border (outer circle), when checked */
    borderOnColor?: string;
    /** Color of the border (outer circle), when unchecked */
    borderOffColor?: string;
    /** Toggle status */
    checked?: boolean;
    /** Callback when the toggle status is changed */
    onCheckedChange?: CheckedListener;
    /** How far the ripple can extend outside the Checkbox's border, `5` by default */
    extraRippleRadius?: number;
    /** Toggle Editable */
    editable?: boolean;
} & TickProps &
    RippleProps &
    TouchableWithoutFeedbackProps;

Props of Checkbox

type CheckedListener

type CheckedListener = (event: CheckedEvent) => void;

type NullableAttrValue

type NullableAttrValue = AttrValue | null | undefined;

type NullableReactChild

type NullableReactChild = ReactChild | null | undefined;

type NullableString

type NullableString = string | null | undefined;

type NullableStyle

type NullableStyle = object | any[] | null | undefined;

type Prediction

type Prediction<T> = (obj?: T) => boolean;

type RippleLocation

type RippleLocation = 'tapLocation' | 'center';

type RippleProps

type RippleProps = {
    /** Color of the `Ripple` layer */
    rippleColor?: string;
    /** Duration of the ripple effect, in milliseconds */
    rippleDuration?: number;
    /** Hot-spot position of the ripple effect, see {@link RippleLocation} */
    rippleLocation?: RippleLocation;
    /**
     * Whether a `Mask` layer should be used, to clip the ripple to the container’s bounds, default is `true`
     * @defaultValue `true`
     */
    maskEnabled?: boolean;
    /** Color of the `Mask` layer */
    maskColor?: string;
    /** Border width TODO move to `style`? */
    borderWidth?: number;
    /** Border radius of the `Mask` layer */
    maskBorderRadius?: number;
    /** Border radius of the `Mask` layer, in percentage (of min(width, height)) */
    maskBorderRadiusInPercent?: number;
    /** Duration of the mask effect (alpha), in milliseconds */
    maskDuration?: number;
    /** Animating the shadow (on pressed/released) or not */
    shadowAniEnabled?: boolean;
    /** Whether the component is disabled */
    disabled?: boolean;
} & MKTouchableProps;

Props of Ripple

type Style

type Style = object | any[];

Package Files (1)

lib/react-native-material-kit.d.ts

Dependencies (1)

ramda

Dev Dependencies (18)

Peer Dependencies (2)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-native-material-kit.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-native-material-kit)

HTML

<a href="https://www.jsdocs.io/package/react-native-material-kit"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 1 year ago.
Package analyzed in 4453 ms.
Missing or incorrect documentation? Open an issue for this package.

react-native-material-kit

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Variables

variable AccentFab

variable AccentRaisedButton

variable ButtonStyles

variable ColoredFab

variable ColoredRaisedButton

variable Fab

variable FlatButton

variable MKColor

Modifiers

variable RaisedButton

Functions

function buttonText

function buttonTextAccent

function buttonTextPrimary

function coloredButtonText

function getTheme

function setTheme

Parameter

Classes

class Button

Remarks

property defaultProps

method render

class Checkbox

Remarks

property defaultProps

method render

method UNSAFE_componentWillMount

method UNSAFE_componentWillReceiveProps

See Also

class IconToggle

property defaultProps

method render

method UNSAFE_componentWillMount

method UNSAFE_componentWillReceiveProps

class IndeterminateProgress

Remarks

property defaultProps

method render

class Progress

Remarks

property buffer

property defaultProps

property Indeterminate

property progress

method render

method UNSAFE_componentWillMount

method UNSAFE_componentWillReceiveProps

class RadioButton

Remarks

property defaultProps

method componentWillUnmount

method confirmToggle

method confirmUncheck

method render

method UNSAFE_componentWillMount

method UNSAFE_componentWillReceiveProps

class RadioButtonGroup

method add

method onChecked

method remove

class RangeSlider

Remarks

property defaultProps

property maxValue

property minValue

method render

method UNSAFE_componentWillMount

method UNSAFE_componentWillReceiveProps

class Ripple