Using npm
npm install as-components
Using yarn
yarn add as-components
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 | 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 |
import { ProgressiveImage } from "as-components";
<ProgressiveImage
resizeMode="contain"
thumbnailSource={require("../../placeholder.png")}
source={{ url: this.state.image }}
imageStyle={{ width: 100, height: 100 }}
/>;
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 |
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 | 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 |
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 | 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 |
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 | 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 |
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 | 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 |
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 | 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 |
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 | 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 |