React-native-compassites-commons NPM

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 add RNCompassitesCommons.xcodeproj
In XCode, in the project navigator, select your project. Add libRNCompassitesCommons.a to your project's Build 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 the getPackages() 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'

react-native

@infinitebrahmanuniverse/nolb-react-native-co @everything-registry/sub-chunk-2574 @zalastax/nolb-react-native-co

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago