react-native-awesome

Table of Contents

• Introduction
• Features
• Installation & Setup
• Components
• Examples
• Motivation
• Dependencies

1. Introduction?

React Native Awesome is a mobile-first, component library for React Native. it will help to develop an attractive ui and a lots of feature in sometime.

2. Features

• It supports in both platform android and iOS
• An Attractive ui

3. Installation

npm i react-native-awesome react-native run-android Then import components like below: import ScrollableTable from 'rn-scrollable-table'

4. Components

• Scrollable Horizontal & Vertical Table
• Custom Text
• ErrorBoundary
• SweetAlert
• Toast
• Custom Modal Alert

5. Example

import ScrollableTable from 'rn-scrollable-table'

  <ScrollableTable
    headerData={headerData}
    tableData={tableData}
    />

The Format of headerData and tableData :-

• The Header data can be anything in the format of array like below:-

var headerData = ["Ornaments", "Total", "Weight", "Total Sold Out", "Weight", "Net. Weight", "In Stock", "Status"]

• The Table data accept only json Arra. And the key can be anything i just have given one example of the json format but you can pass any key

NOTE:- The Table Data json key must be the length of the Header Data.

var tableData = [ { key1: "Zumkha", key2: "2", key3: "987KB89", key4: "12/08/2022", key5: "22g", key6: "20g", key7: "75", key8: "Sold" }, { key1: "Zumkha 2", key2: "22", key3: "087KB89", key4: "12/08/2020", key5: "20g", key6: "10g", key7: "5", key8: "available" }, ]

. How To use Custom App Text:-

• In this app text you can pass h1-h6 as attributes and many more.

  import {AppText} from 'react-native-awesome'

  <AppText h1>This is App Text</AppText>
  

. How To use Error Boundary:-

• You can use this to prevent crashes your app. it will trace all the error and will disply in custom screen.

NOTE:- Now wrap your main app or Main NavigationContainer with ErrorBoundary in index.js or App.js

import {ErrorBoundary} from 'react-native-awesome'

    <ErrorBoundary>
    <App />
    </ErrorBoundary>

    or 

    <ErrorBoundary>
      <NavigationContainer>
        ...
      </NavigationContainer>
    </ErrorBoundary>  

4. SweetAlert

SweetAlert uses:-

With the help of this components you can acheive Sweet Alert Message, Custom Alert Message, Loader & Modals.

import {SweetAlert} from 'react-native-awesome'

Example 1: Sweet Alert Message]

horizontal: false | true to get vertical and horizontal button

<SweetAlert
horizontal={false}
  onDismiss={()=>alert("dissmissed)}
  visible={true}
  title="Order Number #11"
  subTitle="Your Order has been placed successfully. we will delivered your order asap."
  onPressButton1={()=>{
      Alert.alert("yes")
  }}
  onPressButton2={()=>{
      Alert.alert("cancel")}
  }
  buttonText1="Yes"
  buttonText2="Cancel"
  />

Example 2: Sweet Alert Message With Custom Button]

<SweetAlert
      onDismiss={()=>alert("dissmissed)}
      visible={true}
      title="Order Number #11"
      subTitle="Your Order has been placed successfully. we will delivered your order asap."
      isCustomButton={true}
      >
      <Pressable onPress={()=>alert("Hello")}>
      <Text>Click Me</Text>
      </Pressable>
  </SweetAlert>

Example 3: Custom Loader ]

       <SweetAlert
         isLoader={true}
         loaderSize="large"       // Optional
         loaderColor='red' .       //Optional
          visible={true}
       />

Example 4: Custom Modal or Overlay ]

         <SweetAlert
          visible={true}
          onDismiss={()=>alert("Will hide to modal when you will click out side popup)}
          >
          <Text>Hello!!</Text>
          
       </SweetAlert>

Additional Props:-

props	default value	Description
isLoader	false	if it accepts boolean value it is used to show loader
loaderSize	small	it accpets "small or large" and it is used to change the size of loader
loaderColor	red	It accepts color. you can pass any color to cahnge to loader color
horizontal	false	boolean value, it will change button orientation vertical or horizontal
visible	false	boolean value, it is used to hide and show the Sweet Alert Message
title		string value, This title message will be displayed as Sweet Alert title Message
subTitle		string value, This subTitle message will be displayed as Sweet Alert subTitle Message
onPressButton1		To handle the onPress events of button 1
onPressButton2		To handle the onPress events of button 2
buttonColor1	blue	it accepts color to cahnge to button color of button 1
buttonColor2	red	it accepts color to cahnge to button color of button 2
buttonTextColor1 || buttonTextColor2	white	it accepts color to cahnge the text color of button 1 and button 2
buttonText1	Yes	string value of button1
buttonText2	No	string value of button2
isCustomButton	false	boolean value, if you will pass true then you can pass your own button components as it children. example: <SweetAlert isCustomButton={true}> ..here will be your button components </SweetAlert> </td>
children		<SweetAlert>...pass your own custom components in here....</SweetAlert> </td>

5. Toast

it supports in android and ios. You can custmize it using below props:-

How use it:-

import {ToastController } from 'react-native-awesome';

Now, pass ToastController in side NavigationContainer like bwlow:-

    <NavigationContainer>
    ...Your Remaining code...
      <ToastController />
    </NavigationContainer>

Then, import {Toast} from 'react-native-awesome'

Now you can use in any components:-

Toast.showToast({message:"This is custom toast message!!"})})

Additional Props:-

props	default value	Description
message		it will display as text message
title		it will display as title message of Toast message
backgroundColor	'#333'	Background color of Toast message
type	'default'	'success'|'danger'|'info'|'default'|'warning'
position	'bottom'	'top'|'bottom'|'middle'
textColor	'#fff'	color of text message
containerStyle		it supports all the props style of view. you can use it to cusomize toast messge.
messageTextStyle		it supports all the props style of Text. you can use it to cusomize toast messge style.
titleTextStyle		it supports all the props style of Text. you can use it to cusomize toast title style.
duration	1000	Used it to delay the popup message to hide and show

6. Custom Modal Alert

it supports in android and ios platform. You can customize it using below props:-

How to use it:-

import {AlertController } from 'react-native-awesome';

Now, pass AlertController in side NavigationContainer like bwlow:-
      
        <NavigationContainer>
        ...Your Remaining code...
          <AlertController />
        </NavigationContainer>

Then, 
import {CustomAlert} from 'react-native-awesome'    

Now you can use in any components to call this function:-

CustomAlert.showAlert({title:"Title of Custom Modal Alert",message:"This is custom modal message!!"})})

Additional Props:-

props	default value	Description
message		it will display as text message
title		it will display as title message
cancelable	false	To enable and disable cancelable outside alert
onPress		call back function; in this function passing the index value of button. By checking the button index you can handle the events like onPress:(value)=>if(value==0){ console.log(onPressed button 1) }
buttons		it is addition props if you will not pass this props then default button will be visible else buttons props will be visible. it takes an array as an argument. Basically it is used to pass the value and styles of buttons exmple: buttons:[ {text:"Cancel",style:{},textStyle:{}}, {text:"Yes",style:{},textStyle:{}} ] here:- style: this props is used to customize the button, textStyle:this props is used to customize the button Text
messageTextStyle		To customize the styles of message
titleTextStyle		To customize the styles of title
containerStyle		To customize the width height etc of Custom Alert popup.
defaultButtonText | defaultButtonStyle | defaultButtonTextStyle		These props is used to customize the default button