Close not work for me

[jamninetyfive]

hi , thanks for your job.

when i use that close not work for me .

it work when i console.log(this.swipeItemRef.close) Function close

but the swiper item not close for me .

it's a TS react-native project. code like this.

swipeItemRef: SwipeItem | null | undefined;

<SwipeProvider mode="single" closeTrigger="onButtonShowed"

<SwipeItem ref={(item) => this.swipeItemRef = item} style={{flex:1}} key={index} rightButtons={this.rightButton(item)} disableSwipeIfNoButton={true}

<Item ... />

close () : this.swipeItemRef && this.swipeItemRef.close();

[ambisign-gavin]

Do you use the class component?

if you use React.createRef(), please try this:

class SwipeItemWrapper extends React.Component {
  private _swipeRef: any;

  constructor(props: any) {
    super(props);
    this._swipeRef = React.createRef();
  }

  render(): React.ReactNode {
    return (
      <SwipeItem
        style={styles.containerStyle}
        swipeContainerStyle={styles.swipeContentContainerStyle}
        ref={this._swipeRef}
        leftButtons={
          <SwipeButtonsContainer style={styles.leftButton}>
            <TouchableOpacity
              onPress={() => {
                this._swipeRef.current?.close();
              }}>
              <Text>Click me !</Text>
            </TouchableOpacity>
          </SwipeButtonsContainer>
        }>
        <Text>Wrapper</Text>
      </SwipeItem>
    );
  }
}

if you use callback refs, please try this one:

class SwipeItemWrapper extends React.Component {
  private _swipeRef: any;

  constructor(props: any) {
    super(props);
  }

  render(): React.ReactNode {
    return (
      <SwipeItem
        style={styles.containerStyle}
        swipeContainerStyle={styles.swipeContentContainerStyle}
        ref={ref => (this._swipeRef = ref)}
        leftButtons={
          <SwipeButtonsContainer style={styles.leftButton}>
            <TouchableOpacity
              onPress={() => {
                this._swipeRef?.close();
              }}>
              <Text>Click me !</Text>
            </TouchableOpacity>
          </SwipeButtonsContainer>
        }>
        <Text>Wrapper</Text>
      </SwipeItem>
    );
  }
}

those two work for me.

[jamninetyfive]

i'm callback refs. still not work . strangely . close function can be invoke. but buttons still showing.

[ambisign-gavin]

That's weird, could you provide a minimal reproducible example or tell me what operation behavior you expect, like when and why you need to call the close manually?

[jamninetyfive]

My operation is to delete and stick item in rightbuttons. When I click delete, I need to close swipe and a confirmation a alert. When I click stick , I need to close swipe and stick item.

[ambisign-gavin]

do you store ref correctly when you render the swipe item by loop? like this.

[jamninetyfive]

I'll tri it now.

[jamninetyfive]

Do you use the class component?

if you use React.createRef(), please try this:

class SwipeItemWrapper extends React.Component {
  private _swipeRef: any;

  constructor(props: any) {
    super(props);
    this._swipeRef = React.createRef();
  }

  render(): React.ReactNode {
    return (
      <SwipeItem
        style={styles.containerStyle}
        swipeContainerStyle={styles.swipeContentContainerStyle}
        ref={this._swipeRef}
        leftButtons={
          <SwipeButtonsContainer style={styles.leftButton}>
            <TouchableOpacity
              onPress={() => {
                this._swipeRef.current?.close();
              }}>
              <Text>Click me !</Text>
            </TouchableOpacity>
          </SwipeButtonsContainer>
        }>
        <Text>Wrapper</Text>
      </SwipeItem>
    );
  }
}

if you use callback refs, please try this one:

class SwipeItemWrapper extends React.Component {
  private _swipeRef: any;

  constructor(props: any) {
    super(props);
  }

  render(): React.ReactNode {
    return (
      <SwipeItem
        style={styles.containerStyle}
        swipeContainerStyle={styles.swipeContentContainerStyle}
        ref={ref => (this._swipeRef = ref)}
        leftButtons={
          <SwipeButtonsContainer style={styles.leftButton}>
            <TouchableOpacity
              onPress={() => {
                this._swipeRef?.close();
              }}>
              <Text>Click me !</Text>
            </TouchableOpacity>
          </SwipeButtonsContainer>
        }>
        <Text>Wrapper</Text>
      </SwipeItem>
    );
  }
}

those two work for me.

sloved thanks. now i have a another issues.

when rightButton more than 2 . open Item will so difficult. how to set the minSwipe distance?

and how to don't scale buttons when hide to show .

[ambisign-gavin]

The library hasn't supported minimal swipe distance and disabled scale yet. I'll make the library support them soon.

[jamninetyfive]

Save my life . Thank you and your great work.

[ambisign-gavin]

Hi, you can upgrade to v0.7.0 now, and use these two props, swipeThreshold, and disableButtonScale.

[asadChopDawg]

kindly help me, When i click on Delete button swipe item not auto close. i used functional component kindly help me