Update WIP README.md

README.md

@@ -1,5 +1,9 @@
+![image](https://cdn.discordapp.com/attachments/1233084704295751750/1252345604571398288/Github_Banner.png?ex=6671e13b&is=66708fbb&hm=ff3de0eb88407a5f8b0092333786004907aeb3f3369ea593e3eb3d77ee25e599&)
+
 The objective of the library is to ease the discomfort of scrolling by implementing keyboard management for user input. While another solution offered plug-and-play functionality, we opted against it because it lacked the flexibility to address issues when they arise. We believe our approach will empower you to resolve any challenges your app may encounter.
 
+
+
 ## Installation
 
 ```sh
@@ -35,17 +39,16 @@ import { MagicScroll } from '@appandflow/react-native-magic-scroll';
 
 const YourScreen = () => {
   return (
-    <MagicScroll.SmartScrollView>
+    <MagicScroll.ScrollView>
       <YourForm />
-    </MagicScroll.SmartScrollView>
+    </MagicScroll.ScrollView>
   );
 };
 
-// Don't forget this portion
-export default MagicScroll.withSmartScroll(YourScreen);
+export default YourScreen;
 ```
 
-Then inside your form/component you can use our TextInput.
+Then inside your form/component where you can use our TextInput.
 
 ```tsx
 import { MagicScroll } from '@appandflow/react-native-magic-scroll';
@@ -56,8 +59,14 @@ const YourForm = () => {
   return (
     <View>
       <MagicScroll.TextInput
+        // This is the name of this text input
         name="email"
+        // This is where you can design your custom label
         renderTop={() => <Text>Email</Text>}
+        // This is where you can add descriptive text under the text input
+        renderBottom={() => <Text>Must be unique</Text>}
+        // This is the function that will make the text input named "password" focused when pressing the Enter key on the device's keyboard
+        chainable="password"
         textInputProps={{
           style: {
             height: 50,
@@ -69,7 +78,6 @@ const YourForm = () => {
       />
       <MagicScroll.TextInput
         name="password"
-        // This is where you can design your custom label
         renderTop={() => <Text>Password</Text>}
         textInputProps={{
           secureTextEntry: true,
@@ -106,12 +114,14 @@ interface Props {
   isPassword?: boolean;
   name?: string;
   description?: string;
+  chainTo?: string;
 }
 
 const YourCustomInput = (props: Props) => {
   return (
     <MagicScroll.TextInput
       name={props.name}
+      chainable={props.chainTo}
       renderTop={() => <Text>{props.label}</Text>}
       renderBottom={() => <Text>{props.description}</Text>}
       textInputProps={{
@@ -127,3 +137,24 @@ const YourCustomInput = (props: Props) => {
   );
 };
 ```
+
+## Props
+
+Scrollview props: 
+
+| Name | Description | Values |
+| ---- | ----------- | ------ |
+| additionalPadding | a number that will add extra padding between your text input and the keyboard | number |
+| scrollViewProps | contains all props of the scrollview from React's Reanimated library | |
+
+Text Input props:
+
+| Name | Description | Values |
+| ---- | ----------- | ------ |
+| chainable | a string containing the name of the next text input that will be focused when pressing the "Enter Key" | string |
+| containerStyle | contains all Style props of the View from React Native | |
+| name | a string to name the current text input, used in the "chainable" props mentionned above | string |
+| renderBottom() | a function that renders components to display custom text under the text input | ```renderBottom={() => <Text>bottomText</Text>}``` |
+| renderTop() | a function that renders components to display custom text above the text input | ```renderTop={() => <Text>topText</Text>}``` |
+| textInputProps | contains all props of the TextInput component from React Native | |
+