udaysravank / rnswipebutton Goto Github PK

Hello, when I include RNSwipeButton, I have a react native warning saying: AccessibilityInfo.fetch is deprecated, call Accessibility.isScreenReaderEnabled instead

Thanks

I'm trying to mock this package with jest without success.

Describe the solution you'd like

it's possible to add jest/rn-swipe-button-mock ? Or can you help me how to do it?

Currently, the component gets stuck with the slider in the right-most (swiped) state. I had to manually reset it by maintaining an internal state variable which removes it from the virtual DOM on submit and then re-adds it. Feels hacky. Ideally this component might expose some helper method for resetting its internal state.

When i try to use a different icon then the default one i get this error

ExceptionsManager.js:82 Warning: Failed prop type: Invalid prop `thumbIconComponent` supplied to `SwipeButton`, expected a ReactNode.
.....
.....
.....

Usage of component

render() {
        const { title, disabled, swipeSuccessThresholdPercentage, titleFontSize }: Props = this.props;

        return <RNSwipeButton
            title={title}
            onSwipeSuccess={this.handleOnSwipeSuccess}
            disabled={disabled}
            swipeSuccessThreshold={swipeSuccessThresholdPercentage}
            onSwipeStart={this.handleOnSwipeStart}
            onSwipeFail={this.handleOnSwipeFail}
            thumbIconComponent={this.renderIcon}
            titleFontSize={titleFontSize}
            titleColor={this.titleColor}
            thumbIconBackgroundColor={this.thumbColor}
            thumbIconBorderColor={this.thumbColor}
            disabledThumbIconBorderColor={this.disabledThumbIconColor}
            disabledThumbIconBackgroundColor={this.disabledThumbIconColor}
            railBackgroundColor={this.railBackgroundColor}
            railBorderColor={this.railBorderColor}
            railFillBackgroundColor={this.railFillColor}
            disabledRailBackgroundColor={this.disabledRailBackgroundColor}
            railFillBorderColor="transperant"
            successTitle="hello world"
        />;
    }

    renderIcon = () => {
        const { icon }: Props = this.props;

        if (Boolean(icon)) {
            return icon;
        }

        return <Icon
            name="send"
            fontFamily="MaterialIcons"
            color={this.iconColor}
            size={20}
        />;
    }
```

Hi, folks! Could you help me, please? After successful swiping, if we press on the container, SwipeThumb always returns to the initial position. Is it possible to forbid/prevent returning to the initial position and initial width, if a user presses on the container?

Hello, thanks for making this library. It does exactly what I need!

I found an issue, though:
I'm trying to customize the styles of the component, but the containerStyles prop is being ignored. I added a console.log(containerStyles) right into the SwipeButton component and its getting as {}

I'm using expo in v40. Steps to reproduce: create new expo project, add this component and try to pass the containerStylesprop

Can you add a prop to add a custom title component just like you gave a prop to add a custom thumb attached a reference image and gif.

?

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

The typing for the property thumbIconComponent was incorrect.

Here is the diff that solved my problem:

diff --git a/node_modules/rn-swipe-button/types.d.ts b/node_modules/rn-swipe-button/types.d.ts
index af2a37e..f9c0b26 100644
--- a/node_modules/rn-swipe-button/types.d.ts
+++ b/node_modules/rn-swipe-button/types.d.ts
@@ -23,7 +23,7 @@ interface Props {
     swipeSuccessThreshold?: number; // Ex: 70. Swipping 70% will be considered as successful swipe
     thumbIconBackgroundColor?: string;
     thumbIconBorderColor?: string;
-    thumbIconComponent?: ReactElement;
+    thumbIconComponent?: () => JSX.Element;
     thumbIconImageSource?: string | number;
     thumbIconStyles?: StyleProp<ViewStyle>;
     thumbIconWidth?: number;

This issue body was partially generated by patch-package.

Describe the bug
We have a swiper on a component that is hidden once the swipe is completed. Since updates to 1.3.8 from 1.3.6 we get

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    in SwipeThumb (at SwipeButton/index.js:133)

From what I can see that line number is meaningless (minified?) and I've not been able to narrow down the exact reproducible configuration yet, but I raise it now in case anyone else is hitting this issue. I'll update with more information as I get it.

Smartphone (please complete the following information):

• Device: Pixel 4a
• OS: Android 13

Describe the bug
I am setting a flag on swipe success and based on that I am changing background colors, text and starting a timer. If I switch the screens and comes back to the screen then colors and timer looking fine but the thumb is resetting to initial position

First of all. This is a very very nice component. I find it much better than the alternatives. Good job, I love it ❤️ 👍 The code is readable and easy to understand and it just works

I have a request for enhancement.
I would like to have the text change color depending on where the ThumbButton is in the view, list displayed in the attachment.
Also if i give the rail a solid color the text disappears under the rail. Would this be an easy fix?

While i'm at reporting stuff :p when the disabled-props is set to true and when tapping the thumb button the color changes. I found a workarround of checking the value of the disabled-prop be fore calling onSwipeStart

    handleOnSwipeStart = () => {
        const { disabled, onSwipeStart }: Props = this.props;

        !disabled && this.setState({ isSwiping: true });

        return onSwipeStart();
    }

My component

import React, { ReactElement } from 'react';
import Icon from './Icon';
import colors from '../colors';
import RNSwipeButton from 'rn-swipe-button';

interface Props {
    onSuccess: () => void;
    swipeSuccessThresholdPercentage?: number;
    disabled?: boolean;
    onSwipeStart: () => void;
    onSwipeFail: () => void;
    title: string;
    titleFontSize?: number;
    icon?: ReactElement;
}

interface State {
    isSwiping: boolean;
}

export default class SwipeButton extends React.Component<Props, State> {

    static defaultProps = {
        onSwipeFail: () => { },
        onSwipeStart: () => { },
        disabled: true,
        swipeSuccessThresholdPercentage: 70,
        titleFontSize: 14,
    };

    state: State = {
        isSwiping: false,
    };

    render() {
        const { title, disabled, swipeSuccessThresholdPercentage, titleFontSize }: Props = this.props;

        return <RNSwipeButton
            title={title}
            onSwipeSuccess={this.handleOnSwipeSuccess}
            disabled={disabled}
            swipeSuccessThreshold={swipeSuccessThresholdPercentage}
            onSwipeStart={this.handleOnSwipeStart}
            onSwipeFail={this.handleOnSwipeFail}
            thumbIconComponent={this.renderIcon}
            titleFontSize={titleFontSize}
            titleColor={this.titleColor}
            thumbIconBackgroundColor={this.thumbColor}
            thumbIconBorderColor={this.thumbColor}
            disabledThumbIconBorderColor={this.disabledThumbIconColor}
            disabledThumbIconBackgroundColor={this.disabledThumbIconColor}
            railBackgroundColor={this.railBackgroundColor}
            railBorderColor={this.railBorderColor}
            railFillBackgroundColor={this.railFillColor}
            disabledRailBackgroundColor={this.disabledRailBackgroundColor}
            railFillBorderColor="transperant"
            successTitle="hello world"
        />;
    }

    renderIcon = () => {
        const { icon }: Props = this.props;

        if (Boolean(icon)) {
            return icon;
        }

        return <Icon
            name="send"
            fontFamily="MaterialIcons"
            color={this.iconColor}
            size={20}
        />;
    }

    handleOnSwipeSuccess = () => {
        const { onSuccess }: Props = this.props;

        this.setState({ isSwiping: false });

        return onSuccess();
    }

    handleOnSwipeStart = () => {
        const { disabled, onSwipeStart }: Props = this.props;

        !disabled && this.setState({ isSwiping: true });

        return onSwipeStart();
    }

    handleOnSwipeFail = () => {
        const { onSwipeFail }: Props = this.props;

        this.setState({ isSwiping: false });

        return onSwipeFail();
    }

    get titleColor() {
        const { disabled }: Props = this.props;
        const { isSwiping }: State = this.state;

        return disabled
            ? colors.disabledGrey
            : isSwiping
                ? colors.primaryGray
                : colors.fadedText;
    }

    get thumbColor() {
        const { isSwiping }: State = this.state;

        return isSwiping
            ? colors.white
            : colors.primaryBlue;
    }

    get railBorderColor() {
        const { disabled }: Props = this.props;

        return disabled
            ? colors.veryLightGrayAlmostWhite
            : colors.tertiaryBlue;
    }

    get disabledThumbIconColor() {
        return colors.disabledGrey;
    }

    get railBackgroundColor() {
        return colors.tertiaryBlue;
    }

    get railFillColor() {
        return colors.primaryBlue;
    }

    get disabledRailBackgroundColor() {
        return colors.veryLightGrayAlmostWhite;
    }

    get iconColor() {
        const { isSwiping }: State = this.state;

        return isSwiping
            ? colors.primaryBlue
            : colors.white;
    }
}

As a user, I'd like to be able to override the default font family on this component to better match my theme.

Amazing library!

Is your feature request related to a problem? Please describe.
I would like to add a shimmer effect/skeleton loading animation that keeps infinitely running in the background indicating the user to swipe right.

Describe the solution you'd like
Possibility to add a child component which will be rendered as background. Using the LinearGradient component, I can show an animation running in the background.

Describe alternatives you've considered
At the moment, animating the background doesn't seem to be an option. I can't find any alternatives.

Additional context
https://www.npmjs.com/package/react-native-shimmer

The example in the above library provides a demo of what's expected. But, instead of text, the animation happens in the background.

Describe the bug
I am using Webstorm IDE and the suggestions for props for containerStyles say containerStyle so is kind of confusing because the correct prop is containerStyles

you can see this on the file types.d.ts

To Reproduce
Steps to reproduce the behavior:

1. Import RNSwipeButton component
2. Try to use
3. With vscode or webstorm try to hit ctrl + space
4. You will see containerStyle suggestion prop

Expected behavior
containerStyles suggestions prop

Screenshots

Extra info

• Version 1.3.4

How to change the thumbColor?

getting this error message

First off great job on the swipe button. It functions really great.

We were trying to incorporate this into our project but we found we were not able to completely customise the swipe button. We wanted to change the border width on the swipe button container but it seems to be hard coded to 1px.

Also we were hoping to apply shadows to the thumb icon. Would this be possible to do?

Thanks,
Venkat

Issue

I have integrated the swipe button into a specific screen in an app. When accessibility voiceover is turned on and navigated to that screen app crashes with the following error.

ERROR  TypeError: Cannot add new property '_tracking'
This error is located at:
    in SwipeThumb (at SwipeButton/index.js:133)
    in RCTView (at View.js:32)
    in View (at SwipeButton/index.js:102)
    in RCTScrollContentView (at ScrollView.js:1682)
    in RCTScrollView (at ScrollView.js:1800)
    in ScrollView (at ScrollView.js:1826)
    in RCTView (at View.js:32)...

Expected behavior
App should proceed without crashing.

Additional context

"react-native": "0.69.5"
"rn-swipe-button": "^1.3.8",

This panStyle with the animatedWidth is causing the issue only if accessibility is turned on in the device.

I have implemented this library in my project. For android, it is working fine but for iOS mobiles when I am doing the swipe it gets stuck OR it moves very slow. Can someone please explain to me the reason. Thanks in advance.
My code for how I am using the button:

      <SwipeButton
            thumbIconBorderColor={colors.primaryColor}
            style={{ alignSelf: 'center' }}
            railBackgroundColor={colors.primaryColor}
            railBorderColor={colors.primaryColor}
            railFillBorderColor={colors.primaryDarkColor}
            railFillBackgroundColor={colors.primaryDarkColor}
            thumbIconBackgroundColor={colors.colorWhite}
            thumbIconComponent={thumbIcon}
            titleColor={colors.colorWhite}
            titleFontSize={dimens.ms11}
            title={strings.swipe_to_}
            width={dimens.ms230}
            height={dimens.ms40}
            resetAfterSuccessAnimDuration={3000}
            shouldResetAfterSuccess={true}
            onSwipeSuccess={() => {
              this.handleOnClick()
            }}
          />

VERSION
node: v8.13.0
"react": "16.8.6",
"react-native": "0.60.4",
"rn-swipe-button": "^1.3.6",

Describe the bug
After swiping for a few times, the railFillBackgroundColor is disappeared. (On both iOS and Android)

Video
https://user-images.githubusercontent.com/53001193/180167681-bc77b630-6a24-4230-8eeb-a7128f3b2203.mov

Expected behavior
Always show the railFillBackgroundColor

CODE

const handleSwipeSuccess = () => {
setIsStarted((prev) => !prev);
};

renderThumbComponent function will return:

//  
// <View style={s.thumbComponent}>
//    <Image
//      style={s.thumbComponentIcon}
//      source={IMAGE.ICON_RIGHT_ARROW_X2}
//    />
//  </View>

<SwipeButton
height={verticalScale(60)}
width={"90%"}
title={isStarted ? "End" : "Start"}
titleStyles={styles.sliderTitle}
railBackgroundColor={themes.SWIPE_BACKGROUND_COLOR}
railBorderColor={themes.VIOLET_COLOR}
railFillBorderColor={themes.VIOLET_COLOR}
railFillBackgroundColor={themes.VIOLET_COLOR}
thumbIconComponent={renderThumbComponent}
thumbIconBorderColor={themes.VIOLET_COLOR}
thumbIconBackgroundColor={themes.VIOLET_COLOR}
onSwipeSuccess={handleSwipeSuccess}
screenReaderEnabled={true}
shouldResetAfterSuccess={true}
resetAfterSuccessAnimDelay={50} //50ms
resetAfterSuccessAnimDuration={50} //50ms
swipeSuccessThreshold={80} //Swiping 80% will be considered as successful swipe
/>

STYLES:
sliderTitle: {
fontFamily: themeConstants.FontFamily.montserrat,
fontWeight: themeConstants.FontWeight.w600,
lineHeight: fontSizeScale(32),
fontSize: fontSizeScale(24),
color: themes.VIOLET_COLOR,
}

thumbComponent: {
backgroundColor: themes.VIOLET_COLOR,
borderRadius:
Math.round(Dimensions.get("window").width + Dimensions.get("window").height) / 2, //create a circle
margin: verticalScale(10),
}

thumbComponentIcon: {
width: verticalScale(29),
height: verticalScale(29),
}

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Hi, I'm getting this error after importing the package in my project. Any fixed for this?

Describe the bug
If load screen with button with disabled prop "true" and update to disabled prop to "false", styles updated but button swipe functionality not.

To Reproduce
Steps to reproduce the behavior:

1. Load screen with disabled to "true"
2. On React.useEffect or with timeout set disabled to "false"
3. Styles updated to enabled button but if you try to swipe button, it does not work.

Versions

    "react": "16.13.1",
    "react-native": "0.63.3",
    "rn-swipe-button": "^1.3.2"

Hello, I put the swipe button in a draggable card container and the thumb button is not able to be dragged to the end. Sometimes that is happening also when you put the swipeButton in a ScrollView also.

Hi,

I have used your components. It is really good!
I would like to request a feature that makes it can swipe from right to left.
It would be perfect. I can't find any that can do this.

Regards,
Palakorn V.

Hi, my app crashes when using this library. I get the following error when first rendering the button:

Error: AnimatedValue: Attempting to set value to undefined
This error is located at:
    in SwipeThumb (at SwipeButton/index.js:148)

I found the solution to be quite simple. In line 24 of SwipeThumb/index.js, change
animatedWidth: new Animated.Value(),
to
animatedWidth: new Animated.Value(0),

Versions:

• react-native v0.63.0
• rn-swipe-button v1.2.8

It seems no one else is experiencing this issue, so any help would be welcome.

How to use Detox with rn-swipe-button?

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/rn-swipe-button/src/components/SwipeButton/index.js b/node_modules/rn-swipe-button/src/components/SwipeButton/index.js
index e77cacd..d9f7df5 100644
--- a/node_modules/rn-swipe-button/src/components/SwipeButton/index.js
+++ b/node_modules/rn-swipe-button/src/components/SwipeButton/index.js
@@ -48,7 +48,7 @@ const SwipeButton = props => {
       setScreenReaderEnabled(isEnabled);
     };
     setIsUnmounting(false);
-    AccessibilityInfo.addEventListener('change', handleScreenReaderToggled);
+    const subscription = AccessibilityInfo.addEventListener('change', handleScreenReaderToggled);
 
     AccessibilityInfo.isScreenReaderEnabled().then(isEnabled => {
       if (isUnmounting) {
@@ -59,10 +59,11 @@ const SwipeButton = props => {
 
     return () => {
       setIsUnmounting(true);
-      AccessibilityInfo.removeEventListener(
-        'change',
-        handleScreenReaderToggled,
-      );
+      subscription.remove();
+      // AccessibilityInfo.removeEventListener(
+      //   'change',
+      //   handleScreenReaderToggled,
+      // );
     };
   }, [isUnmounting, screenReaderEnabled]);
 

This issue body was partially generated by patch-package.

I can't make the swipe gesture when I change the layout of the app to RTL layout for languages like Arabic language. it is not available, could you please help. If I kept it as default LeftToRight, I can't make the swipe as well in RTL layout.

I am sorry

I've experienced that if you change the height the position of the thumb changes

default height

height set to 80

import React, { ReactElement } from 'react';
import Icon from './Icon';
import colors from '../colors';
import RNSwipeButton from 'rn-swipe-button';

type SwipeButtonType = 'green' | 'blue';

const GREEN = 'green';
const BLUE = 'blue';

interface Props {
    onSuccess: () => void;
    title: string;
    disabled: boolean;
    type?: SwipeButtonType;
    swipeSuccessThresholdPercentage?: number;
    onSwipeStart?: () => void;
    onSwipeFail?: () => void;
    titleFontSize?: number;
    icon?: ReactElement;
}

interface State {
    isSwiping: boolean;
}

export default class SwipeButton extends React.Component<Props, State> {

    static defaultProps = {
        swipeSuccessThresholdPercentage: 70,
        titleFontSize: 14,
        type: BLUE,
    };

    state: State = {
        isSwiping: false,
    };

    render() {
        const { title, disabled, swipeSuccessThresholdPercentage, titleFontSize }: Props = this.props;

        return <RNSwipeButton
            title={title}
            // height={80}
            onSwipeSuccess={this.handleOnSwipeSuccess}
            disabled={disabled}
            swipeSuccessThreshold={swipeSuccessThresholdPercentage}
            onSwipeStart={this.handleOnSwipeStart}
            onSwipeFail={this.handleOnSwipeFail}
            thumbIconComponent={this.renderIcon}
            titleFontSize={titleFontSize}
            titleColor={this.titleColor}
            thumbIconBackgroundColor={this.thumbColor}
            thumbIconBorderColor={this.thumbColor}
            disabledThumbIconBorderColor={this.disabledThumbIconColor}
            disabledThumbIconBackgroundColor={this.disabledThumbIconColor}
            railBackgroundColor={this.railBackgroundColor}
            railBorderColor={this.railBorderColor}
            railFillBackgroundColor={this.railFillColor}
            disabledRailBackgroundColor={this.disabledRailBackgroundColor}
            railFillBorderColor={colors.transparent}
        />;
    }

    renderIcon = () => {
        const { icon }: Props = this.props;

        if (Boolean(icon)) {
            return icon;
        }

        return <Icon
            name="send"
            fontFamily="MaterialIcons"
            color={this.iconColor}
        />;
    }

    handleOnSwipeSuccess = () => {
        const { onSuccess }: Props = this.props;

        this.setState({ isSwiping: false });

        return onSuccess();
    }

    handleOnSwipeStart = () => {
        const { disabled, onSwipeStart }: Props = this.props;

        !disabled && this.setState({ isSwiping: true });

        return onSwipeStart && onSwipeStart();
    }

    handleOnSwipeFail = () => {
        const { onSwipeFail }: Props = this.props;

        this.setState({ isSwiping: false });

        return onSwipeFail && onSwipeFail();
    }

    get titleColor() {
        const { disabled }: Props = this.props;
        const { isSwiping }: State = this.state;

        if (disabled) {
            return colors.disabledGrey;
        }

        return isSwiping
            ? colors.primaryGray
            : colors.fadedText;
    }

    get thumbColor() {
        const { type }: Props = this.props;

        const { isSwiping }: State = this.state;

        if (type === GREEN) {
            return colors.primaryDarkGreen;
        }

        return isSwiping
            ? colors.white
            : colors.primaryBlue;
    }

    get railBorderColor() {
        return colors.tertiaryBlue;
    }

    get disabledThumbIconColor() {
        return colors.disabledGrey;
    }

    get railBackgroundColor() {
        const { type }: Props = this.props;

        if (type === GREEN) {
            return colors.tertiaryGreen;
        }

        return colors.tertiaryBlue;
    }

    get railFillColor() {
        const { type }: Props = this.props;

        if (type === GREEN) {
            return colors.primaryDarkGreen;
        }

        return colors.primaryBlue;
    }

    get disabledRailBackgroundColor() {
        return colors.veryLightGrayAlmostWhite;
    }

    get iconColor() {
        const { isSwiping }: State = this.state;

        return isSwiping
            ? colors.primaryBlue
            : colors.white;
    }
}

Hi,
How can we add custom component instead of "thumbIconComponent", like i want to create a rectangular button.

Is your feature request related to a problem? Please describe.

• add support for custom title component

Describe the solution you'd like

titleComponent={<View><Text>Custom</Text><Image source={} /><View>}

Describe alternatives you've considered

• n/a

Additional context
This will help users to use a custom component like a Text + Icon/Image

Describe the bug
The actual dependencies to react and react native are tied in package.json rather than in package-lock.json

To Reproduce
Steps to reproduce the behavior:

1. run npm i rn-swipe-button@latest --save

Expected behavior
No warnings

Screenshots

This is problematic, rn last version is far away from the one referenced in this package.json - so a user expect to get a clean install without warning

Desktop (please complete the following information):

• OS: [any]

Smartphone (please complete the following information):

• Device: [any]

The solution is to manage version through package-lock.json and add symbol ^ before react and react native version
"react": "^16.8.6",
"react-native": "^0.60.5"

Are you planning to update the code base to use Hooks for function components instead of class components at all?

I can customize the entire component, which is cool, but I cannot style the rail.
I wish to have no border radius and that's possible for all styles except the rail.
Something like this:

<SwipeButton
     railStyles={{
         borderRadius: 0
     }} 
/>

Describe the bug
onSwipeSuccess doesn't work properly when you want to call it with params. In my case I would like to call an async function and pass it email and password. Unfortunately, in the current implementation of onSwipeSuccess it "remembers" the function with just default values that you pass to it.

  onSwipeSuccess={() => 
                signInWithEmailAndPassword({ email, password })
              }

in the example above the email and password params come from React.useState:

 const [email, setEmail] = React.useState('')
 const [password, setPassword] = React.useState('')

where setEmail and setPassword are passed as onChangeText to react native TextInput component.
When I call signInWithEmailAndPassword as onPress with a simple button, it works fine.

For example, if you use a simple console.log like that:

  onSwipeSuccess={() => 
              console.log({ email, password })
              }

you will always have the following result: email: "", password: "", no matter how the email and password values are changed via Text Inputs, because onSwipeSuccess accepts the function passsed to it just once and doesn't rerender it...

Expected behavior
onSwipeSuccess accepts a function with parameters according to the latest state of these pareameters without memozining the initially passed function (or whatever it does to it now...)

Describe the bug
SwipeButton stuck if swiped halfway and scrolled vertically inside scrollview.

i.e. if you swipe halfway and then move it up or down, scrollview takes over control, and you cannot continue to swipe the half-swiped thumb anymore.

To Reproduce
Steps to reproduce the behavior:

1. Put SwipeButton inside a ScrollView.
2. Test it on iOS.
3. See bug.

Expected behavior
Scrollview SHOULD NOT take over control.

Additional context
Using 1.2.8 as 1.2.9 and 1.3.0 doesn't support RN 0.61.x.

Hi,
I am back again. After using your new feature "Swipe Right To Left", I would like to request some events.

1. onStartSwipe, this event will be raised when the user starts to swipe.
2. onStopSwip, this event will be raised when the user changes his mind after swiping a bit.

These two events will be very useful such as clear the text when the user starts to swipe or restore the text if the user changes his mind after swiping a bit.

Very thank you.
Palakorn V.

I am unable to figure out how do i make the title to 2-liners. please help

Hi, I wanted to use both LeftToRightSwipe and RightToLeftSwipe and call different functions . Is that possible at the moment ?

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Describe the bug
Swipe gets stuck in middle while swipe.

Screenshots

Desktop (please complete the following information):

• OS: iOS 16
• react-native: 0.66.5
• rn-swipe-button: 1.3.6

Additional context
Works fine in android and was working fine in iOS.

I am new to React Native having spent much of my time in Xamarin. I have a need to use the as a Swipe to Connect feature, but also Swipe to Disconnect. Currently the button is Single Direction, meaning when I swipe right and run onSwipeSuccess, if I click the control it resets, but what am looking for is a way to Swipe Right run onSuccess, stay there Change the arrow and text, and then when I swipe RTL run onSuccess again.

Currently I have 2 buttons, one set to RTL. When I swipe Right, the first button hides, and the second RTL button shows, but that presents a screen flicker.

Describe the bug
When I go to swipe, I get the following warning:

"This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function."

Screenshots

Screen Shot 2021-08-04 at 11 26 36 AM

Smartphone (please complete the following information):

• Device: iPhone 11
• OS: iOS 14
• Browser: chrome
• Version: 1.3.4

Describe the bug
I want to have the start position of swipe at the right position with "enableReverseSwipe" option.
Swiping to the left wont work only to swipe to right which is not the desired behaviour.

Expected behavior
You should be able to swipe to the left when starting in right position.

Screenshots

Describe the bug
In the implementation of the lib the argument maxFontSizeMultiplier is missing from tags, and the consequence is that when we use with large font scale the render is bad.

To Reproduce
Steps to reproduce the behavior:

1. instantiate in a demo code application
2. increase front scale from ios simulator (or android)
3. 
4. 
5. 
6. go back to your application and observe the label render

Expected behavior
Should add a props to limit the font size multiplier
https://reactnative.dev/docs/text#maxfontsizemultiplier

• before enlarging font scale

• this is the result after enlarging the font size

Desktop (please complete the following information):

• OS: [any]

Good! I need the swipe to use an icon that will slide. This icon is obtained from react-native-vectors-icon. Is there any way to use it in this package?

When I got successful to swipe the end, but maybe my API response occur error, I want to reset the button to the start.
How can I do?