Table of Contents

1. Introduction
2. Features
3. Installation & Setup
4. Components
5. Examples
6. Motivation
7. 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

1. It supports in both platform android and iOS
2. 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

1. Scrollable Horizontal & Vertical Table
2. Custom Text
3. ErrorBoundary
4. SweetAlert
5. Toast
6. Custom Modal Alert

5. Example

import ScrollableTable from 'rn-scrollable-table'

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

The Format of headerData and tableData :-

1. 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"]

2. 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>

      <SweetAlert isCustomButton={true}>
      ..here will be your button components
        </SweetAlert>
</td>

  <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!!"})})

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!!"})})