{"id":22887261,"url":"https://github.com/appandflow/react-native-magic-scroll","last_synced_at":"2025-03-17T14:15:28.738Z","repository":{"id":246548066,"uuid":"796851682","full_name":"AppAndFlow/react-native-magic-scroll","owner":"AppAndFlow","description":"A cartesian way of managing scrollviews and keyboards.","archived":false,"fork":false,"pushed_at":"2025-01-08T15:58:53.000Z","size":2102,"stargazers_count":42,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-05T02:15:00.069Z","etag":null,"topics":["expo","keyboard","react-native","scrollview","ui"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AppAndFlow.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-06T18:41:04.000Z","updated_at":"2025-02-06T22:39:49.000Z","dependencies_parsed_at":"2024-06-28T16:33:42.456Z","dependency_job_id":"f52d1da7-9348-4cb9-b0c8-cbaa557b363a","html_url":"https://github.com/AppAndFlow/react-native-magic-scroll","commit_stats":null,"previous_names":["appandflow/react-native-magic-scroll"],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AppAndFlow%2Freact-native-magic-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AppAndFlow%2Freact-native-magic-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AppAndFlow%2Freact-native-magic-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AppAndFlow%2Freact-native-magic-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AppAndFlow","download_url":"https://codeload.github.com/AppAndFlow/react-native-magic-scroll/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244047646,"owners_count":20389206,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["expo","keyboard","react-native","scrollview","ui"],"created_at":"2024-12-13T20:32:04.580Z","updated_at":"2025-03-17T14:15:28.717Z","avatar_url":"https://github.com/AppAndFlow.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n![magicscroll](https://github.com/user-attachments/assets/3ac67386-d41d-47ab-a361-bbaee7e0de0f)\n\n### About\nApp \u0026 Flow is a Montreal-based React Native engineering and consulting studio. We partner with the world’s top companies and are recommended by [Expo](https://expo.dev/consultants). Need a hand? Let’s build together. team@appandflow.com\n\n[![npm (scoped)](https://img.shields.io/npm/v/@appandflow/react-native-magic-scroll.svg)](https://www.npmjs.com/package/@appandflow/react-native-magic-scroll)\n\n## Why react-native-magic-scroll?\nThe goal of the library is to seamlessly and precisely handle your keyboard, scrollview and inputs when interacting with forms. While other solutions offer plug-and-play functionalities, we wanted to have something more precise and with more flexibility so that it can be used in any situation.\n\n### Examples\nWe recreated two flows from popular apps to showcase our library in action.\nThe demo app code is available [here](https://github.com/AppAndFlow/react-native-magic-scroll-demo).\n\n| Twitch's sign up  | Shop's check out |\n| ------------- | ------------- |\n| \u003cvideo src=\"https://github.com/AppAndFlow/react-native-magic-scroll-demo/assets/129197567/c1e2b9f4-f66d-4aaf-a57d-9eb4b89400e9\"\u003e  | \u003cvideo src=\"https://github.com/AppAndFlow/react-native-magic-scroll-demo/assets/129197567/4d1a23f2-c55e-414f-a564-4883dfc2c3aa\"\u003e|\n\n## Installation\n\n### react-native-magic-scroll\n\n```sh\nyarn add @appandflow/react-native-magic-scroll\n```\n\n```sh\nnpm i @appandflow/react-native-magic-scroll\n```\n\n### Dependencies\n\nTo use our library, you will need to install these two dependencies into your project.\n\n**1) React Native Reanimated**\n\n```sh\nnpx expo install react-native-reanimated\n```\n\nLearn more about this dependency [here](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started).\n\n**2) SafeAreaContext**\n\n```sh\nnpx expo install react-native-safe-area-context\n```\n\nLearn more about this dependency [here](https://docs.expo.dev/versions/latest/sdk/safe-area-context/).\n\n### Android\n\nOn Android, make sure to set `android:windowSoftInputMode` in your `AndroidManifest.xml` to **pan**\n\n#### Expo\n\n```\n// app.json\n\"android\": {\n  ...rest,\n  \"softwareKeyboardLayoutMode\": \"pan\"\n}\n```\n\n\n\n## Basic Usage\n\nWrap your screen within our ScrollView.\n\n```tsx\nimport { MagicScroll } from '@appandflow/react-native-magic-scroll';\n// rest of your imports\n\nconst YourScreen = () =\u003e {\n  return (\n    \u003cMagicScroll.ScrollView\u003e\n      // Your form\n    \u003c/MagicScroll.ScrollView\u003e\n  );\n};\n\nexport default YourScreen;\n```\n\nYou then use our TextInputs for the form itself, that you place inside the MagicScroll.ScrollView. Easily \"chain\" your inputs (so that the return keyboard button hops to the next desired input) by using the MagicScroll.TextInput `name` and `chainTo` props, like so:\n\n```tsx\nimport { MagicScroll } from '@appandflow/react-native-magic-scroll';\n// rest of your imports\n\nconst textInputStyle = {\n  height: 50,\n  backgroundColor: '#ddd',\n  borderRadius: 10,\n  marginTop: 8,\n};\n\n\nconst YourScreen = () =\u003e {\n  return (\n    \u003cMagicScroll.ScrollView\u003e\n      \u003cMagicScroll.TextInput\n        // This is the name of this text input, used by the `chainTo` prop\n        name=\"email\"\n        // This is where you can design your a custom label above the input\n        renderTop={() =\u003e \u003cText\u003eEmail\u003c/Text\u003e}\n        // This is where you can design your custom label below the input\n        renderBottom={() =\u003e \u003cText\u003eMust be unique\u003c/Text\u003e}\n        // This is the function that will make the text input named \"password\" focused when pressing the Enter or Return key on the device's keyboard\n        chainTo=\"password\"\n        textInputProps={{\n          style: textInputStyle,\n        }}\n      /\u003e\n      \u003cMagicScroll.TextInput\n        name=\"password\"\n        renderTop={() =\u003e \u003cText\u003ePassword\u003c/Text\u003e}\n        textInputProps={{\n          secureTextEntry: true,\n          style: textInputStyle,\n        }}\n      /\u003e\n    \u003c/MagicScroll.ScrollView\u003e\n  );\n};\n```\n\n## Advanced\n\nAs mentioned in the introduction, the drawbacks of a plug-and-play library are 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.\n\n## Tips\n\nIt's a great idea to wrap our MagicScroll.TextInput within your own for re-usability!\n\nHere's an example\n\n```tsx\nimport { MagicScroll } from '@appandflow/react-native-magic-scroll';\n\n// rest of your imports\n\ninterface Props {\n  label?: string;\n  isPassword?: boolean;\n  name?: string;\n  description?: string;\n  chainTo?: string;\n}\n\nconst YourCustomInput = (props: Props) =\u003e {\n  return (\n    \u003cMagicScroll.TextInput\n      name={props.name}\n      chainTo={props.chainTo}\n      renderTop={() =\u003e \u003cText\u003e{props.label}\u003c/Text\u003e}\n      renderBottom={() =\u003e \u003cText\u003e{props.description}\u003c/Text\u003e}\n      textInputProps={{\n        secureTextEntry: props.isPassword,\n        style: {\n          height: 50,\n          backgroundColor: '#ddd',\n          borderRadius: 10,\n          marginTop: 8,\n        },\n      }}\n    /\u003e\n  );\n};\n```\n\n## Props (Optional)\nAll of these props are optional. It is, however, recommended to use them to get the most out of the library. \n\n#### MagicScroll.ScrollView:\n\n| Name | Description | Values |\n| ---- | ----------- | ------ |\n| additionalPadding | adds extra padding between your text input and the keyboard | number |\n| scrollViewProps | contains all props of the scrollview from React's Reanimated library | [props](https://reactnative.dev/docs/scrollview#props) |\n\n#### MagicScroll.TextInput:\n\n| Name | Description | Values |\n| ---- | ----------- | ------ |\n| chainTo | a string containing the name of the next text input that will be focused when pressing the \"Enter Key\" | string |\n| containerStyle | contains all Style props of the View from React Native | [props](https://reactnative.dev/docs/view-style-props) |\n| name | a string to name the current text input, used in the \"chainTo\" props mentionned above | string |\n| renderBottom() | a function that renders components to display custom text under the text input | ```renderBottom={() =\u003e \u003cText\u003ebottomText\u003c/Text\u003e}``` |\n| renderTop() | a function that renders components to display custom text above the text input | ```renderTop={() =\u003e \u003cText\u003etopText\u003c/Text\u003e}``` |\n| textInputProps | contains all props of the TextInput component from React Native  | [props](https://reactnative.dev/docs/textinput#props) |\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappandflow%2Freact-native-magic-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fappandflow%2Freact-native-magic-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappandflow%2Freact-native-magic-scroll/lists"}