Skip to content

Atharva-System/rn-components

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Alt Text

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