as-components
Version:
A simple and customized reuseable components
276 lines (217 loc) • 12 kB
Markdown
# 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](https://github.com/heyman333/react-native-responsive-fontSize)
You can also use props of [TextInput](https://reactnative.dev/docs/textinput)
```jsx
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
```jsx
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 <a href="https://reactnative.dev/docs/flatlist">FlatList</a>
```jsx
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 <a href="https://reactnative.dev/docs/flatlist">FlatList</a>
```jsx
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 <a href='https://github.com/atharvasystem/rn-components/blob/master/ExampleLoaderButton.js'>ExampleLoaderButton.js</a> file
This component's style is based on default Device's System Dark Mode.
```jsx
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
```jsx
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](https://github.com/heyman333/react-native-responsive-fontSize)
```jsx
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
```jsx
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 |