as-components

Installation

Using npm

npm install as-components

Using yarn

yarn add as-components

Usage

1. InlineImageTextInput

You also need to install react-native-responsive-fontsize

You can also use props of TextInput

import { InlineImageTextInput } from 'as-components'

handleChangeText=(text)=>{
        console.log(text)
}

<InlineImageTextInput
    handleChangeText={this.handleChangeText.bind(this}
    label="Enter Your Email"
    keyboardType="email"
    icon={require("../../email.png")}
    value={this.state.email}
    isSecureTextEntry={false}
    errorMessage={this.state.errorMessage}
    isSubDomain={true}
    subDomain=".subdomain.com"
    customStyle={{fontSize:16,color:"black"}}
    />

Props

Props	Type	Default	Optional	Description
handleChangeText	func	null	no	callback that return the text value
placeholder	string	null	Yes	Placeholder text
keyboardType	string	default	Yes	keyboardType like email,numeric
icon	image source	null	Yes	icon beside text input
value	string	empty	Yes	value of text input
isSecureTextEntry	bool	false	Yes	to hide or show text on textinput
errorMessage	string	empty	Yes	to show error of textinput field
isSubDomain	bool	false	Yes	show domain text or not
isEditable	bool	true	Yes	allow user to input text or not
pointerEvent	string	auto	Yes	allow user touch or not
subDomain	string	.ensurexper.com	Yes	domain text for show
customStyle	object	null	Yes	text style for textinput
label	string	null	Yes	label same as material text inut

2. ProgressiveImage

import { ProgressiveImage } from "as-components";

<ProgressiveImage
  resizeMode="contain"
  thumbnailSource={require("../../placeholder.png")}
  source={{ url: this.state.image }}
  imageStyle={{ width: 100, height: 100 }}
/>;

Props

Props	Type	Default	Optional	Description
containerStyle	object	null	Yes	image container style
thumbnailSource	source	static given	Yes	thumb image before loading image
source	source	null	No	image url or local image
resizeMode	string	stretch	Yes	image resize mode

3. ListLoadMore

You can also use props of FlatList

import { ListLoadMore } from 'as-components'

<ListLoadMore
data={[]}
refreshing={false}
renderItem={(data,index)=>{return(<View><Text>{data.toString()}</Text></View>)}}
onNextPageLoad={{nextPage}=>{console.log("nextPage",nextPage)}}
loaderSize="small"
/>

Props

Props	Type	Default	Optional	Description
containerStyle	object	{flex:1}	Yes	container style of list
listStyle	object	{flex:1}	Yes	style of list
data	array	[]	No	data for list
refreshing	bool	false	Yes	for pull to refresh
renderItem	func	null	No	to render list item
reachedThreshHold	number	0.01	Yes	threshold for pagination from where pagination start
onNextPageLoad	func	null	Yes	get next page when list reached to its threashold
renderFooter	func	null	Yes	render view for show loader at the bottom of list
loaderSize	string	small	Yes	size of loader in footer view
isAllDataFetched	bool	false	No	set true when all data fetched

4. GridLoadMore

You can also use props of FlatList

import { GridLoadMore } from 'as-components'
<GridLoadMore
data={[]}
refreshing={false}
renderItem={(data,index)=>{return(<View><Text>{data.toString()}</Text></View>)}}
onNextPageLoad={{nextPage}=>{console.log("nextPage",nextPage)}}
loaderSize="small"
numColumn={2}
/>

Props

Props	Type	Default	Optional	Description
containerStyle	object	{flex:1}	Yes	container style of list
listStyle	object	{flex:1}	Yes	style of list
data	array	[]	No	data for list
refreshing	bool	false	Yes	for pull to refresh
renderItem	func	null	No	to render list item
reachedThreshHold	number	0.01	Yes	threshold for pagination from where pagination start
onNextPageLoad	func	null	Yes	get next page when list reached to its threashold
renderFooter	func	null	Yes	render view for show loader at the bottom of list
loaderSize	string	small	Yes	size of loader in footer view
numColumn	number	2	No	for show grid column
isAllDataFetched	bool	false	No	set true when all data fetched

4. LoaderButton

Example

Example Avilable in ExampleLoaderButton.js file

This component's style is based on default Device's System Dark Mode.

import { LoaderButton } from "as-components";

onButtonClick = () => {
  setLoading(true);
  clearTimeout(this.loadTime);
  setTimeout(() => {
    setLoading(false);
  }, 1000);
};
<LoaderButton
  title="Login"
  isLoading={this.state.loading}
  onButtonClick={() => onButtonClick()}
  loaderSize="small"
/>;

Props

Props	Type	Default	Optional	Description
title	string	Title	No	Title For button
isLoading	bool	false	No	isLoading is boolean for showing loader
loaderSize	string	small	Yes	loaderSize is loader size
loaderColor	string	black	Yes	loaderColor is color for loader
onButtonClick	fucn	undefined	No	callback function for button click
buttonStyle	object		Yes	style for button view
textStyle	object		Yes	style for text
containerStyle	object	height : 45	Yes	style for container view of button

5. Loader

Usage

This component will placed at the end of compoent and before last closed view/scrollview or any component

import { Loader } from "as-components";

<View>
  .... other components ... other components
  <Loader
    isLoading={this.state.loading}
    backgroundColor="black"
    indicatorColor="white"
    size="small"
  />
</View>;

Props

Props	Type	Default	Optional	Description
isLoading	bool	false	No	isLoading is boolean for showing loader
size	string	small	Yes	size is loader size
backgroundColor	string	00000040	Yes	backgroundColor is color for loader's background
indicatorColor	string	FFFFFF	Yes	indicatorColor is color for loader

6. ReactButton

Usage

You also need to install react-native-responsive-fontsize

import { ReactButton } from "as-components";

<View>
  .... other components ... other components
  <ReactButton
    styleButton={styles.submit}
    onPress={() => {
      this.onPressSubmit();
    }}
    backgroundColor={colors.LIGHT_BLUE}
    textColor={colors.WHITE}
    label="Submit"
  />
</View>;

Props

Props	Type	Default	Optional	Description
label	string	empty	No	label for button
styleButton	object	falsenull	Yes	Style for button
onPress	func	null	No	call back function for button click
backgroundColor	string	00000040	Yes	backgroundColor is color for loader's background
disabled	bool	null	Yes	by default disabled is false, true for disable click for user action
textColor	string	null	No	color for text

7. ReactText

Usage

import { ReactText } from "as-components";

<View>
  .... other components ... other components
  <ReactText
    buttonStyle={{ width: 120, height: 45, backgroundColor: "black" }}
    textStyle={{ color: "white" }}
    onPress={() => {
      this.onPressSubmit();
    }}
    content="Submit"
  />
</View>;

Props

Props	Type	Default	Optional	Description
content	string	empty	No	content for text
buttonStyle	object	falsenull	Yes	Style for button
onPress	func	null	No	call back function for button click
textStyle	object	null	Yes	style for content
disabled	bool	null	Yes	by default disabled is false, true for disable click for user action