1.0.5 • Published 7 years ago
react-native-compassites-commons v1.0.5
react-native-compassites-commons
Getting started
$ npm install react-native-compassites-commons --save
Mostly automatic installation
$ react-native link react-native-compassites-commons
Manual installation
iOS
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜react-native-compassites-commons
and addRNCompassitesCommons.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNCompassitesCommons.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Run your project (
Cmd+R
)<
Android
- Open up
android/app/src/main/java/[...]/MainActivity.java
- Add
import com.reactlibrary.RNCompassitesCommonsPackage;
to the imports at the top of the file - Add
new RNCompassitesCommonsPackage()
to the list returned by thegetPackages()
method
- Append the following lines to
android/settings.gradle
:include ':react-native-compassites-commons' project(':react-native-compassites-commons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-compassites-commons/android')
- Insert the following lines inside the dependencies block in
android/app/build.gradle
:compile project(':react-native-compassites-commons')
Usage
import RNCompassitesCommons from 'react-native-compassites-commons';
// TODO: What to do with the module?
RNCompassitesCommons;
##Loader
Name | Description | Type | Default |
---|---|---|---|
text | Text to be displayed below the loader | String | |
textSize | Size of the text to be displayed | Number | 24 |
textColor | Text color | Color | #000 |
color | Color of the loader | Color | teal |
loaderSize | Loader si | Number | 24 |
backgroundColor | Loader and text background color | Color | transparent |
fullScreen | True if the loader should mask the entire screen, False if the loader should take only the component size | Boolean | false |
image | If you need a gif in place of the default spinner, pass the url | url |
##Textfield ####Supports all props of react-native TextInput, along with that, the following
Name | Description | Type | Default |
---|---|---|---|
animationDuration | Label animations | Number | 225 |
fontSize | User input text size | Number | 16 |
titleFontSize | Size of the title | Number | 12 |
labelFontSize | Size of the label | Number | 12 |
labelHeight | Floating height of the label | Number | 32 |
labelPadding | Floating label padding | Number | 4 |
inputContainerPadding | User input padding | Number | 8 |
labelTextStyle | Styles for the label text tag | Object | |
titleTextStyle | Styles for the title text tag | Object | |
affixTextStyle | Styles for the affixes tag | Object | |
tintColor | On focus the line, label and cursor take this color | Color | rgb(0, 145, 234) |
textColor | User input text color | Color | rgba(0, 0, 0, .87) |
baseColor | When not focused, the line, label and cursor take this color | Color | rgba(0, 0, 0, .38) |
label | Text to be displayed in the label | String | |
title | Text to be displayed in the title | String | |
error | Text to be displayed when there is an error | String | |
errorColor | Color for error text | Color | rgb(213, 0, 0) |
disabled | To be able to edit, disabled should be false | Boolean | false |
disabledLineType | The line type should be one of these : solid, dotted, dashed, none | String | dotted |
prefix | Prefix text | String | |
suffix | Suffix text | String | |
containerStyle | Style for the container that consists of input, label, title/error | Object | |
inputContainerStyle | Style for the container that consists of input and label | Object |
##Switch
Name | Description | Type | Default |
---|---|---|---|
value | True if the switch is on and false if it is off | Boolean | 225 |
onChangeValue | Function whenever the switch is toggled | Function | |
buttonOnText | ON text on the switch, when it is ON | String | |
buttonOffText | OFF text on the switch, when it is OFF | String | |
buttonTextSize | The size of the text on the selected switch | Number | 10 |
buttonOnColor | Color when on | Color | green |
buttonOFFColor | Color when off | Color | grey |
buttonOnTextColor | The color of the text on the switch, when it is on | Color | white |
buttonOffTextColor | The color of the text on the switch, when it is off | Color | black |
backgroundOnText | ON text on the switch background, when it is OFF | String | |
backgroundOffText | OFF text on the switch background, when it is ON | String | |
backgroundTextSize | The size of the text on the switch that is not selected and is in the background | Number | 10 |
backgroundOnTextColor | ON text color of the switch, when it i s ON | Color | black |
backgroundOffTextColor | OFF text color of the switch, when it is OFF | Color | black |
backgroundOnColor | ON text color of the switch, when it i s OFF | Color | white |
backgroundOffColor | OFF text color of the switch, when it i s ON | Color | white |
backgroundWidth | Width of the switch background | Number | 70 |
backgroundHeight | Height of the switch background | Number | 30 |
backgroundBorderRadius | Radius of the switch background component | Number | 15 |
backgroundBorderColor | The border color of the switch background | Color | grey |
backgroundBorderWidth | The border width of the switch background | Number | 0 |
buttonWidth | The switch button width | Number | 25 |
buttonHeight | The switch button height | Number | 25 |
buttonBorderRadius | Radius of the switch button | Number | 15 |
buttonBorderColor | The border color of the switch button | Color | grey |
buttonBorderWidth | The border width of the switch button | Number | 0 |
labelText | Label for the switch | String | |
labelTextColor | Color of the label text | Color | black |
labelPosition | Position for the label, it can be one of : left, right, top, bottom | String | right |
labelTextSize | Size of the label text | Number | 20 |
labelPadding | Padding for the label | Number | 10 |
animationTime | Switch on/off animation time | Number | 150 |
padding | Padding between the label and the switch | Number | 5 |
##Button
Name | Description | Type | Default |
---|---|---|---|
onButtonClick | Function that should be executed when there is a button click | Function | null |
backgroundStyle | Object to style the button background | Object | backgroundStyle:{borderColor:'black',borderWidth:1,backgroundColor:'white'} |
textStyle | Object to style the text | Object | textStyle:{fontSize:14,color:'black'} |
text | Text to be displayed on the Button | String | 'Button' |
iconImage | Image Source which is required to render Image | Image.propTypes.source | null Example: require ('../../'); |
iconURL | Image URL which is required to render Image. | String | null |
iconVectorName | Vector Image Name of the Icon from react-native-vector icon lib | String | null |
iconVectorSize | Size of the vector icon | Number | 30 |
iconVectorColor | Vector Icon color | String | 'black' |
iconPosition | Icon Postion | String | 'left' |
##Drawer
Name | Description | Type | Default |
---|---|---|---|
disabled | Disable the component or not. | Boolean | false |
leftDisabled | Disable left drawer or not | Boolean | false |
rightDisabled | Disable right drawer or not. | Boolean | false |
type | Type of the drawer. default overlay You can also use static value Drawer.types.Default Drawer.types.Overlay. | String | ‘default' |
DrawerPosition | Determine where does the drawer come out. left right both You can also use static value Drawer.positions.Left Drawer.positions.Right Drawer.positions.Both. | String | ‘left' |
drawerWidth | The width of drawer, it’s disabled when use replace type. | Number | 200 |
drawerContent | The content of the drawer menu, default is left content. | React Component (A complete View) | null |
leftDrawerContent | The content of the left drawer menu. | React Component (A complete View) | null |
rightDrawerContent | The content of the right drawer menu. | React Component (A complete View) | null |
duration | The duration of animation to open or close drawer. | Number | 160 |
maskAlpha | Maximum value is 0.5, the opactiy value of the mask over the main board when drawer is open. Mask can be disabled with showMask property. | Number | 0.4 |
ShowMask | Whether show the mask when drawer is open. | Boolean | true |
customStyles | Customize drawer styles. You can customize main / mask / drawer / leftDrawer / rightDrawer. | Object | {} |
onDrawerOpen | Triggers when drawer is totally opened. | function | null |
onLeftDrawerOpen | Triggers when the left drawer is totally opened. | function | null |
onRightDrawerOpen | Triggers when the left drawer is totally opened. | function | null |
onDrawerClose | Triggers when drawer is totally closed. | function | null |
onLeftDrawerClose | Triggers when the left drawer is totally closed. | function | null |
onRightDrawerClose | Triggers when the right drawer is totally closed. | function | null |
startCapture | Whether to capture touch events while clicking on screen. | Boolean | false |
moveCapture | Whether to capture touch events while clicking on screen. | Boolean | false |
easingFunc | Easing function of drawer animation, default is Easing.linear. You can pass function like Easing.ease/Easing.bezier(x1, y1, x2, y2)/Easing.sin/Easing.elastic(times)/Easing.bounce etc. | function | null |
responderNegotiate | Customize conditions to set pan responder, evt & gestureState will be passed as arguments. Default condition is left 20% area on screen in left Drawer, or right 20% area on screen in right Drawer. | function | null |
##OTP
Name | Description | Type | Default |
---|---|---|---|
label | The text above the otp input | String | 'ONE TIME PASSWORD' |
minutes | Total time to enter the otp received | Number | 3 |
resend | Function to send the otp again | Function | null |
labelTextStyle | Style for text to be displayed above the otp input | Object | {} |
borderColor | Color of the otp input views | String | '#dedede' |
borderColorOnFocus | Color of the otp input view currently in focus | String | '#1989e8' |
error | Error message to be displayed if any | String | 'Wrong OTP' |
onExpiry | Function to be called when the time is over | Function | null |
onBlur | Function to be called to get the otp entered | Function | example: onBlur={(otp) =>{this.setState({ otp })}} |
errorStyle | Style for text to be displayed when error occurs | Object | {} |
value | the otp that is received via call or sms | Number | null |
##MobileTextView
Name | Description | Type | Default |
---|---|---|---|
number | The phone number value | String | 0000000000 |
numberTextStyle | The style of the number text view | Text.proptype.style | numberTextStyle: {fontFamily: "WorkSans",fontSize: 24,fontWeight: "500",letterSpacing: 4.62,textAlign: "center",color: "#000000"}, |
hideNumber | hide number | boolean | true |
replaceSymbol | text character to be replace when hiding the number | String | 'x' |