Documentation Added

Author: mmusaib

README.md

@@ -1,2 +1,108 @@
-# react-native-otp-text-input
-A react native/expo package for splitted otp text inputs
+|                          | |  |   |   |
+| --------------------------------------- | -------- | ---------- |---------- |---------- |
+| <a href="https://www.npmjs.com/package/react-native-text-input-otp">![NPM VERSION](https://img.shields.io/npm/v/react-native-text-input-otp?style=for-the-badge)</a> | <a href="https://www.npmjs.com/package/react-native-text-input-otp">![NPM WEEKLY DOWNLOADS](https://img.shields.io/npm/dw/react-native-text-input-otp?color=%232CA215&label=WEEKLY%20DOWNLOADS&style=for-the-badge)</a> | <a href="https://github.com/mmusaib/react-native-text-input-otp/stargazers">![GITHUB STAR](https://img.shields.io/github/stars/mmusaib/react-native-text-input-otp?label=Give%20Us%20A%20Star&style=for-the-badge)</a> | <a href="https://www.youtube.com/channel/UCSwIR2KBHiqiProH3Me8IZQ">![YOUTUBE VIEWS](https://img.shields.io/youtube/channel/views/UCSwIR2KBHiqiProH3Me8IZQ?label=YOUTUBE%20VIEWS&style=for-the-badge)</a> | <a href="https://www.npmjs.com/package/react-native-text-input-otp">![NPM LIFETIME DOWNLOADS](https://img.shields.io/npm/dt/react-native-text-input-otp?color=%232CA215&style=for-the-badge)</a>
+
+<h1 align="center">
+  🏳️‍🌈  React Native OTP Text Input
+</h1>
+
+<div align="center">
+
+🟢 Splitted OTP Text Input for ReactNative and Expo powered apps
+
+<a href="https://twitter.com/_mmusaib" target="_blank"></a>
+<img src="https://i.imgur.com/toxEFWe.png" width="500" />
+</div>
+
+
+
+<h4>Light Weight and <b>Robust</b> Splitted Text Input.</h4>
+
+-   Design skeleton loading screen of your choice 
+-   Pass colors of your choice
+-   Powered by Reanimated 3
+-   Make your apps professional in UI/UX
+
+
+
+
+# Compatibility
+
+
+|  iOS  | Android | Expo |
+--------|---------|------|
+|  ✅  |    ✅    |  ✅  |
+
+
+
+
+# 🔌 Installation
+
+```sh
+$ npm install react-native-text-input-otp
+
+```
+
+OR
+
+```sh
+$ yarn add react-native-text-input-otp
+```
+
+
+
+
+# 😎 Displaying the otp input
+All you need is to just import the otp text input component and then pass the 
+required props to display the splitted otp text input as shown in the code snippet below:
+
+```jsx
+import OtpTextInput from 'react-native-text-input-otp'
+
+const App = () => {
+
+  return(
+    
+  )
+
+};
+```
+
+
+
+For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@mmusaib/react-native-skeleton-loading?platform=android)
+
+# ⭐ Props  for  the component
+| Name | Type | Description |
+| ---- | ----------- | ----------- |
+| background | hex color string | Hex color string for the background of loading component
+| highlight | hex color string | Hex color string for the highlight of loading component
+
+
+
+
+# 💲 Would you like to support me?
+
+If you would like me come up with similar packages, buy me a cup of coffee to boost my energy.
+<br><br>
+[![Paypal](https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-100px.png)](https://paypal.me/mmusaib)
+<br><br>
+
+
+
+<!-- # ▶️ Watch Tutorial Video 
+
+ [![Watch video](https://i.imgur.com/QcWCHk9.png)](https://www.youtube.com/watch?v=ZstelmTWhjw) -->
+
+
+<!-- For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@mmusaib/react-native-stock-star-rating)
+
+
+
+
+
+
+
+
+
+

dist/OtpInput.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ViewStyle, TextStyle } from 'react-native';
 
 export interface OtpProps {

dist/OtpTextInput.js

@@ -1,5 +1,5 @@
 {
-  "name": "react-native-otp-text-input",
+  "name": "react-native-text-input-otp",
   "version": "1.0.0",
   "description": "A light weight react-native and expo split text input",
   "main": "dist/index.js",
@@ -11,7 +11,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/mmusaib/react-native-otp-text-input.git"
+    "url": "git+https://github.com/mmusaib/react-native-text-input-otp.git"
   },
   "keywords": [
     "otp",

index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+
 import { View,TextInput } from 'react-native';
 
 const OtpInput = ({ digits, otpRef, style, setOtp, otp, _render }) => {

package.json

@@ -1,3 +1,4 @@
+import React from 'react';
 import OtpInput from "./OtpInput";
 import { 
         styles,