react-native-ui-toolbox
Just another collection of cross platform React Native UI components.
Extended from react-native-community's
react-native-elements
Demo
Expo (Android only):
- Get the Expo app
- Open the Expo app, scan the QR code above or go to the "Explore" tab and search for:
@czphilip/react-native-ui-toolbox-demo
. - BOOM!
Demo App source code
Todo
- Make formInputs a stand alone library and deprecate typography (since https://github.com/hectahertz/react-native-typography)
- Add default styles to doc
- Add timeZoneOffset prop support to
FormDatePicker
- Allow formInputs to take children/rendererFunction for rendering the touchable result display button.
Components Included
- Avatar
- Heading
- Title
- Subtitle
- BodyText
- FormTextInput
- FormDatePicker
- FormPicker
- FormPickerNative
- FormSelect
Change logs
-
1.1.4:
- add
getRef
forFormTextInput
.
- add
-
1.0.4:
- Update dependencies.
-
0.0.19:
- Give
FormDatePicker
'smode
prop a default value of'date'
. - Add
inputContainerStyle
prop to FormInputs. - Fix
FormInput
s icon default style being override. - Fix
FormTextInput
multiline style bug. - Fix
FormTextInput
validation style.
- Give
-
0.0.18:
- FormInput components: API breaking changes. See the API docs below.
- FormInput components: accept custom component as touchable
- FormInput components: add icon
- Refactor
FormPicker
to use pure RN implementation, CreateFormPickerNative
for native implementation - Refactor ModalContainer to render content directly with children
-
Modal
: add props to config controlBar position -
FormDatePicker
: addmode
prop for picking time
-
0.0.17: Update
Avatar
API. -
0.0.16: Add
FormSelect
Roadmap
-
component
-
FormTextBox
- Refactor typography components into a single
Text
with type props -
Hyperlink
that takes a url and tries to open it when pressed. https://facebook.github.io/react-native/docs/linking.html
-
-
Feature
- Error icon & customizable error block
-
Modal
: props to config view mode (dialog/slide in) -
FormPicker
: accept more list item props (e.g. styles, custom component) -
FormSelect
: accept more list item props (e.g. styles, custom component)
-
Style
- Consistent default styles for all input types
- Consistent theme options for all elements
Installation
Inside your project:
npm install react-native-ui-toolbox --save
API
Avatar
Insert screenshot here
Insert sample code here
Prop Types
const propTypes = component: PropTypes avatarContainerProps: PropTypesobject size: PropTypesnumber rounded: PropTypesbool containerStyle: ViewpropTypesstyle avatarContainerStyle: ViewpropTypesstyle source: PropTypesobject imageStyle: ImagepropTypesstyle icon: PropTypesshape name: PropTypesstring type: PropTypesstring color: PropTypesstring style: ViewpropTypesstyle title: PropTypesshape text: PropTypesstring color: PropTypesstring style: TextpropTypesstyle showEditButton: PropTypesbool onEditPress: PropTypesfunc editButton: PropTypesshape size: PropTypesnumber iconName: PropTypesstring iconType: PropTypesstring iconColor: PropTypesstring underlayColor: PropTypesstring style: ViewpropTypesstyle showIndicator: PropTypesbool indicator: PropTypesshape size: PropTypesnumber types: PropTypes status: PropTypesstring style: ViewpropTypesstyle ;
Default Props
const defaultProps = component: View size: 100 rounded: false containerStyle: null avatarContainerProps: {} avatarContainerStyle: null source: null imageStyle: null icon: name: null type: 'material' color: '#fff' style: null title: text: null color: DEFAULT_COLORS3 style: null showEditButton: false onEditPress: null editButton: size: null iconName: 'mode-edit' iconType: 'material' iconColor: '#fff' underlayColor: DEFAULT_COLORS0 style: null showIndicator: false indicator: size: null types: key: 'active' color: 'green' key: 'inactive' color: 'red' status: 'active' style: null ;
Typography
- Heading
- Title
- Subtitle
- BodyText
Insert screenshot here
Insert sample code here
Form Inputs
- FormTextInput
- FormDatePicker
- FormPicker (single selection)
- FormPickerNative (single selection implemented with android/iOS's native components)
- FormSelect (multiple selection)
Insert gif screenshot here
Insert sample code here
Common Prop Types
const FormInputHOCPropTypes = // For the wrapper component around the input field and the error. wrapperStyle: ViewpropTypesstyle // For the touchable component. validContainerStyle: ViewpropTypesstyle invalidContainerStyle: ViewpropTypesstyle // For the value display text. validInputStyle: TextpropTypesstyle invalidInputStyle: TextpropTypesstyle errorContainerStyle: ViewpropTypesstyle errorTextStyle: ViewpropTypesstyle errorText: PropTypesstring validator: PropTypesfunc const inputFieldPropTypes = component: PropTypesany componentProps: PropTypesobject onValueChange: PropTypesfunc placeholder: PropTypesstring; const stylePropTypes = containerStyle: ViewpropTypesstyle contentContainerStyle: ViewpropTypesstyle inputContainerStyle: ViewpropTypesstyle inputStyle: TextpropTypesstyle; const modalPropTypes = modal: PropTypesshape cancelBtnText: PropTypesstring confirmBtnText: PropTypesstring controlBarHeight: PropTypesnumber controlBarPosition: PropTypes height: PropTypesnumber fullScreen: PropTypesbool containerStyle: ViewpropTypesstyle bodyContainerStyle: ViewpropTypesstyle bodyContentContainerStyle: ViewpropTypesstyle controlBarStyle: ViewpropTypesstyle cancelBtnStyle: ViewpropTypesstyle confirmBtnStyle: ViewpropTypesstyle cancelBtnTextStyle: TextpropTypesstyle confirmBtnTextStyle: TextpropTypesstyle ; const iconPropTypes = showIcon: PropTypesbool icon: PropTypesshape name: PropTypesstring type: PropTypesstring color: PropTypesstring size: PropTypesnumber containerStyle: ViewpropTypesstyle ;
Common Default Props
const defaultInputFieldProps = component: TouchableOpacity componentProps: undefined onValueChange: undefined; const defaultModalProps = modal: cancelBtnText: 'CANCEL' confirmBtnText: 'CONFIRM' controlBarHeight: undefined controlBarPosition: 'top' height: undefined fullScreen: false containerStyle: undefined bodyContainerStyle: undefined bodyContentContainerStyle: undefined controlBarStyle: undefined cancelBtnStyle: undefined confirmBtnStyle: undefined cancelBtnTextStyle: undefined confirmBtnTextStyle: undefined ; const defaultIconProps = showIcon: false icon: name: 'settings' type: 'material' size: 28 color: DEFAULT_COLORS2 containerStyle: marginRight: 8 marginLeft: 0 ;
FormTextInput
Specific Prop Types
const propTypes = value: PropTypesstring multiline: PropTypesbool getRef: PropTypesfunc;
Also accepts all react native
TextInput
props exceptonChangeText
, useonValueChange
instead.
Specific Default Props
const defaultProps = value: undefined multiline: undefined;
FormDatePicker
Specific Prop Types
const propTypes = date: PropTypes maxDate: PropTypes minDate: PropTypes dateFormat: PropTypesstring timeFormat: PropTypesstring locale: PropTypesstring;
Also accepts all react native
DatePicker
props
Specific Default Props
const defaultProps = date: undefined maxDate: undefined // DatePickerAndroid don't take null. minDate: undefined // DatePickerAndroid don't take null. dateFormat: 'Y-M-D (dd)' timeFormat: 'hh:mm:ss A' locale: 'en' placeholder: 'Select a date...';
FormPicker
Specific Prop Types
const ACCEPT_VALUE_TYPES = PropTypesstring PropTypesnumber PropTypesbool;const ACCEPT_LABEL_TYPES = PropTypesstring PropTypesnumber; const propTypes = pickedValue: PropTypes items: PropTypesisRequired;
Specific Default Props
const defaultProps = items: label: 'item 1' value: 'item 1 value' label: 'item 2' value: 'item 2 value' pickedValue: undefined placeholder: 'Pick...';
FormPickerNative
Specific Prop Types
const ACCEPT_VALUE_TYPES = PropTypesstring PropTypesnumber PropTypesbool;const ACCEPT_LABEL_TYPES = PropTypesstring PropTypesnumber; const propTypes = pickedValue: PropTypes items: PropTypesisRequired;
Also accepts all react native
Picker
props
Specific Default Props
const defaultProps = items: label: 'item 1' value: 'item 1 value' label: 'item 2' value: 'item 2 value' pickedValue: undefined placeholder: 'Pick...';
FormSelect
Specific Prop Types
const ACCEPT_VALUE_TYPES = PropTypesstring PropTypesnumber PropTypesbool;const ACCEPT_LABEL_TYPES = PropTypesstring PropTypesnumber; const propTypes = selectedValues: PropTypes items: PropTypesisRequired;
Specific Default Props
const defaultProps = items: label: 'item 1' value: 'item 1 value' label: 'item 2' value: 'item 2 value' selectedValues: placeholder: 'Select...';
Theme
const fontStylePropTypes = PropTypes;const fontWeightPropTypes = PropTypes;const textDecorationLinePropTypes = PropTypes;const textShadowOffsetPropTypes = PropTypesshape width: PropTypesnumber height: PropTypesnumber ; theme: PropTypesshape // Color color: PropTypesstring colorHeading: PropTypesstring colorTitle: PropTypesstring colorSubtitle: PropTypesstring colorText: PropTypesstring // Family fontFamily: PropTypesstring fontFamilyHeading: PropTypesstring fontFamilyTitle: PropTypesstring fontFamilySubtitle: PropTypesstring fontFamilyText: PropTypesstring // Size fontSizeBase: PropTypesnumber fontSizeHeading: PropTypesnumber fontSizeTitle: PropTypesnumber fontSizeSubtitle: PropTypesnumber fontSizeText: PropTypesnumber // Style fontStyle: fontStylePropTypes fontStyleHeading: fontStylePropTypes fontStyleTitle: fontStylePropTypes fontStyleSubtitle: fontStylePropTypes fontStyleText: fontStylePropTypes // Weight fontWeight: fontWeightPropTypes fontWeightHeading: fontWeightPropTypes fontWeightTitle: fontWeightPropTypes fontWeightSubtitle: fontWeightPropTypes fontWeightText: fontWeightPropTypes // Line Height lineHeightHeading: PropTypesnumber lineHeightTitle: PropTypesnumber lineHeightSubtitle: PropTypesnumber lineHeightText: PropTypesnumber // Text Decoration Line textDecorationLine: textDecorationLinePropTypes textDecorationLineHeading: textDecorationLinePropTypes textDecorationLineTitle: textDecorationLinePropTypes textDecorationLineSubtitle: textDecorationLinePropTypes textDecorationLineText: textDecorationLinePropTypes // Shadow Color textShadowColor: PropTypesstring textShadowColorHeading: PropTypesstring textShadowColorTitle: PropTypesstring textShadowColorSubtitle: PropTypesstring textShadowColorText: PropTypesstring // Shadow Offset textShadowOffset: textShadowOffsetPropTypes textShadowOffsetHeading: textShadowOffsetPropTypes textShadowOffsetTitle: textShadowOffsetPropTypes textShadowOffsetSubtitle: textShadowOffsetPropTypes textShadowOffsetText: textShadowOffsetPropTypes // Shadow Radius textShadowRadius: PropTypesnumber textShadowRadiusHeading: PropTypesnumber textShadowRadiusTitle: PropTypesnumber textShadowRadiusSubtitle: PropTypesnumber textShadowRadiusText: PropTypesnumber