I'm using slider in a modal that will be removed when onSlideSuccess is executed. Problem is that timeout with setState is triggered 1 second after that. In my case component doesn't exist anymore and React complain about it:

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the SlideButton component.

That timeout could be cleared with clearTimeout or fixed in some other way when React component is unmounted.

Hi, I got some npm errors when I went to use this package.

It seems like the dimensions npm package is being referenced, but isn't declared as a dependency in package.json. The dimensions library has a further dependency on fs, which doesn't appear to be available from a react native environment.

It looks like it would be safe to just remove this dependency completely, along with the SCREEN_WIDTH and SCREEN_HEIGHT properties.

Hello!

Thanks for the component. 👍 I see that the latest version is 1.3.0 but npm has 1.2.1 listed as the last one. Necessary update?

(I'm still getting the Dimensions import error and I believe it's due to that. Will try to pull from Github directly for now).

Thank you!

self.onSwipeSuccess(); is not a function

onPress is not getting called Inner wrapper

example

            <SlideButton
                onSlideSuccess={this.stopRecording}
                slideDirection={SlideDirection.RIGHT}
                width={SCREEN_WIDTH}
                height={50}>
                    <Button title={'Click me'} onPress={()=>console.warn('clicked')} /> // not working
            </SlideButton>

here is my component

/**

• Sample React Native App
• https://github.com/facebook/react-native
• @flow
  */

import React, {Component} from 'react';
import {View, Text} from 'react-native';
import {SlideButton, SlideDirection} from './SlideButton';
import Button from './Button';

export default class App extends Component {
onSlide() {
console.log('clicked!!');
}

render() {
    return (
        <View
            style={{
                backgroundColor: 'rgba(0,0,0,0.8)',
                position: 'absolute',
                bottom: 0,
                height: 70,
                flex: 1,
                width: 500
            }}>
            <View
                style={{
                    backgroundColor: '#212121',
                    borderRadius: 20,
                    width: 350,
                    height: 50,
                    marginTop: 10,
                    marginLeft: 5
                }}
            >
                <SlideButton
                    onSlideSuccess={()=>{console.log('clicked!!')}}
                    width={500}
                    height={50}
                    successfulSlidePercent={40}

                >
                    <View style={{height: 50, width: 80, flexDirection: 'row'}}>
                        <Button>Pay 250</Button>

                    </View>
                </SlideButton>
                <Text style={{position: 'absolute', marginLeft: 150, color: 'white', marginTop: 10}}>Swipe
                    to continue>></Text>
            </View>
        </View>
    );
}

}

const styles = {
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
buttonOuter: {
marginTop: 20
},

button: {
    color: 'black',
    fontSize: 15,
    width: 100,
    borderRadius: 10,
    backgroundColor: 'white',
    fontWeight: 'bold'
}

};