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 |