Merge branch 'main' of https://github.com/AppAndFlow/react-native-mag…

…ic-scroll
AppAndFlow · Jun 20, 2024 · 2d898ed · 2d898ed
2 parents 7a48490 + 9b4b531
commit 2d898ed
Showing 1 changed file with 82 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,19 @@
-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.
+![image](https://cdn.discordapp.com/attachments/1233084704295751750/1252345604571398288/Github_Banner.png?ex=6671e13b&is=66708fbb&hm=ff3de0eb88407a5f8b0092333786004907aeb3f3369ea593e3eb3d77ee25e599&)
+
+[![npm (scoped)](https://img.shields.io/npm/v/@appandflow/rn-magic-scroll.svg)](https://www.npmjs.com/package/@appandflow/rn-magic-scroll)
+
+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 as they arise. We believe our approach will empower you to resolve any challenges your app may encounter.
+
+We recreated two flows from existing apps to showcase our library.
+
+| Twitch's sign up  | Shop's check out |
+| ------------- | ------------- |
+| <video src="https://github.com/AppAndFlow/react-native-magic-scroll-demo/assets/129197567/c1e2b9f4-f66d-4aaf-a57d-9eb4b89400e9">  | <video src="https://github.com/AppAndFlow/react-native-magic-scroll-demo/assets/129197567/4d1a23f2-c55e-414f-a564-4883dfc2c3aa">|
 
 ## Installation
 
+### react-native-magic-scroll
+
 ```sh
 yarn install @appandflow/react-native-magic-scroll
 ```
@@ -10,23 +22,45 @@ yarn install @appandflow/react-native-magic-scroll
 npm i @appandflow/react-native-magic-scroll
 ```
 
+### Dependencies
+
+To use our library, you will need to install these two dependencies into your project.
+
+**1) React Native Reanimated**
+
+```sh
+npx expo install react-native-reanimated
+```
+
+Learn more about this dependency [here](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started).
+
+**2) SafeAreaContext**
+
+```sh
+npx expo install react-native-safe-area-context
+```
+
+Learn more about this dependency [here](https://docs.expo.dev/versions/latest/sdk/safe-area-context/).
+
 ### Android
 
 On Android, make sure to set `android:windowSoftInputMode` in your `AndroidManifest.xml` to **pan**
 
 ##### Expo
 
-```json
+```
 // app.json
 "android": {
   ...rest,
   "softwareKeyboardLayoutMode": "pan"
 }
 ```
 
+
+
 ## Basic Usage
 
-Wrap your form/screen within our ScrollView. Utilizing context requires it to be one level higher for enhanced control over your inputs. Alternatively, you can employ the Higher Order Component (HOC) for this purpose.
+Wrap your form/screen within our ScrollView. 
 
 ```tsx
 import { MagicScroll } from '@appandflow/react-native-magic-scroll';
@@ -35,50 +69,52 @@ 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';
 
 // rest of your imports
 
+const textInputStyle = {
+  height: 50,
+  backgroundColor: '#ddd',
+  borderRadius: 10,
+  marginTop: 8,
+};
+
+
 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,
-            backgroundColor: '#ddd',
-            borderRadius: 10,
-            marginTop: 8,
-          },
+          style: textInputStyle,
         }}
       />
       <MagicScroll.TextInput
         name="password"
-        // This is where you can design your custom label
         renderTop={() => <Text>Password</Text>}
         textInputProps={{
           secureTextEntry: true,
-          style: {
-            height: 50,
-            backgroundColor: '#ddd',
-            borderRadius: 10,
-            marginTop: 8,
-          },
+          style: textInputStyle,
         }}
       />
     </View>
@@ -88,13 +124,13 @@ const YourForm = () => {
 
 ## Advance usage
 
-As mentioned in the introduction, the drawback of a plug-and-play library is its limitations when you need to deviate from the standard functionality. That's precisely why our library allows for customization, enabling you to tailor its usage to suit your specific needs and use cases.
+As mentioned in the introduction, the drawback of a plug-and-play library lies in its limitations when deviating from standard functionality. That's precisely why our library allows for customization, enabling you to tailor its usage to suit your specific needs and use cases.
 
 ## Tips
 
 We encourage you to wrap our TextInput with your custom one.
 
-Here an example
+Here's an example
 
 ```tsx
 import { MagicScroll } from '@appandflow/react-native-magic-scroll';
@@ -106,12 +142,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 +165,24 @@ const YourCustomInput = (props: Props) => {
   );
 };
 ```
+
+## Props
+
+Scrollview props: 
+
+| Name | Description | Values |
+| ---- | ----------- | ------ |
+| additionalPadding | adds extra padding between your text input and the keyboard | number |
+| scrollViewProps | contains all props of the scrollview from React's Reanimated library | [props](https://reactnative.dev/docs/scrollview#props) |
+
+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 | [props](https://reactnative.dev/docs/view-style-props) |
+| 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  | [props](https://reactnative.dev/docs/textinput#props) |
+