Socket
Book a DemoInstallSign in
Socket

@appandflow/react-native-magic-scroll

Package Overview
Dependencies
Maintainers
4
Versions
25
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@appandflow/react-native-magic-scroll

Library to help managing keyboard interaction in form

latest
Source
npmnpm
Version
0.1.36
Version published
Weekly downloads
129
76.71%
Maintainers
4
Weekly downloads
 
Created
Source

magicscroll

About

App & Flow is a Montreal-based React Native engineering and consulting studio. We partner with the world’s top companies and are recommended by Expo. Need a hand? Let’s build together. team@appandflow.com

npm (scoped)

Why react-native-magic-scroll?

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

Examples

We recreated two flows from popular apps to showcase our library in action. The demo app code is available here.

Twitch's sign upShop's check out

Installation

react-native-magic-scroll

yarn add @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

npx expo install react-native-reanimated

Learn more about this dependency here.

2) SafeAreaContext

npx expo install react-native-safe-area-context

Learn more about this dependency here.

Android

On Android, make sure to set android:windowSoftInputMode in your AndroidManifest.xml to pan

Expo

// app.json
"android": {
  ...rest,
  "softwareKeyboardLayoutMode": "pan"
}

Basic Usage

Wrap your screen within our ScrollView.

import { MagicScroll } from '@appandflow/react-native-magic-scroll';
// rest of your imports

const YourScreen = () => {
  return <MagicScroll.ScrollView>// Your form</MagicScroll.ScrollView>;
};

export default YourScreen;

You 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:

import { MagicScroll } from '@appandflow/react-native-magic-scroll';
// rest of your imports

const textInputStyle = {
  height: 50,
  backgroundColor: '#ddd',
  borderRadius: 10,
  marginTop: 8,
};

const YourScreen = () => {
  return (
    <MagicScroll.ScrollView>
      <MagicScroll.TextInput
        // This is the name of this text input, used by the `chainTo` prop
        name="email"
        // This is where you can design your a custom label above the input
        renderTop={() => <Text>Email</Text>}
        // This is where you can design your custom label below the input
        renderBottom={() => <Text>Must be unique</Text>}
        // 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
        chainTo="password"
        textInputProps={{
          style: textInputStyle,
        }}
      />
      <MagicScroll.TextInput
        name="password"
        renderTop={() => <Text>Password</Text>}
        textInputProps={{
          secureTextEntry: true,
          style: textInputStyle,
        }}
      />
    </MagicScroll.ScrollView>
  );
};

You can also use the renderInput function and use any kind of input

import { MagicScroll } from '@appandflow/react-native-magic-scroll';
// rest of your imports

const textInputStyle = {
  height: 50,
  backgroundColor: '#ddd',
  borderRadius: 10,
  marginTop: 8,
};

const YourAwesomeInput = ({
  label,
  ...props
}: TextInputProps & { label: string }) => {
  return (
    <View>
      <Text>{label}</Text>
      <TextInput {...props} />
    </View>
  );
};

const YourScreen = () => {
  return (
    <MagicScroll.ScrollView>
      <MagicScroll.TextInput
        // This is the name of this text input, used by the `chainTo` prop
        name="email"
        // This is where you can pass your input. You need to spread the prop object. Make sure it is the last prop
        renderInput={(magicProps) => (
          <YourAwesomeInput label="Email" {...magicProps} />
        )}
        // 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
        chainTo="password"
        textInputProps={{
          style: textInputStyle,
        }}
      />
      <MagicScroll.TextInput
        name="password"
        renderTop={() => <Text>Password</Text>}
        textInputProps={{
          secureTextEntry: true,
          style: textInputStyle,
        }}
      />
    </MagicScroll.ScrollView>
  );
};

Advanced

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

Tips

It's a great idea to wrap our MagicScroll.TextInput within your own for re-usability!

Here's an example

import { MagicScroll } from '@appandflow/react-native-magic-scroll';

// rest of your imports

interface Props {
  label?: string;
  isPassword?: boolean;
  name?: string;
  description?: string;
  chainTo?: string;
}

const YourCustomInput = (props: Props) => {
  return (
    <MagicScroll.TextInput
      name={props.name}
      chainTo={props.chainTo}
      renderTop={() => <Text>{props.label}</Text>}
      renderBottom={() => <Text>{props.description}</Text>}
      textInputProps={{
        secureTextEntry: props.isPassword,
        style: {
          height: 50,
          backgroundColor: '#ddd',
          borderRadius: 10,
          marginTop: 8,
        },
      }}
    />
  );
};

Props (Optional)

All of these props are optional. It is, however, recommended to use them to get the most out of the library.

MagicScroll.ScrollView

NameDescriptionValues
additionalPaddingadds extra padding between your text input and the keyboardnumber
scrollViewPropscontains all props of the scrollview from React's Reanimated libraryprops

MagicScroll.TextInput

NameDescriptionValues
chainToa string containing the name of the next text input that will be focused when pressing the "Enter Key"string
containerStylecontains all Style props of the View from React Nativeprops
namea string to name the current text input, used in the "chainTo" props mentionned abovestring
renderBottom()a function that renders components to display custom text under the text inputrenderBottom={() => <Text>bottomText</Text>}
renderTop()a function that renders components to display custom text above the text inputrenderTop={() => <Text>topText</Text>}
textInputPropscontains all props of the TextInput component from React Nativeprops

Keywords

react-native

FAQs

Package last updated on 29 Apr 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.