close SwipeRow without using SwipeListView

[giale1234]

Because I render item in agenda in calendar library so that it is impossible for me to render item SwipeListView. So how can open SwiperRow be closed when another SwiperRow is opened without rowMap[ ] (without using SwipeListView) .

export default class Swipe extends Component {
constructor(props){
super(props);
this.openRowRefs = [];
}
render() {
const Swipe_Row = () => {
return(



Delete

          <TouchableHighlight style={styles.rowFront}>
            <View>
              <Text>Hello </Text>
            </View>
          </TouchableHighlight>
      </SwipeRow>
  )
}
return (
  <Container>
    <Header />
    <Content padder>

          <Swipe_Row/>
          <Swipe_Row/>
          <Swipe_Row/>

    </Content>
  </Container>
);

}
}

[jemise111]

Hey @giale1234 here's a quick example for you I wrote up. Please LMK if you have any questions:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import SwipeRow from '../SwipeRow';

const data = [{ key: '0' }, { key: '1' }, { key: '2' }, { key: '3' }];

export default class StandalonSwipeRow extends React.Component {
  constructor(props) {
    super(props);
    this.rowRefs = {};
    this.openRowKey = null;
  }

  onRowOpen = key => () => {
    if (this.openRowKey && key !== this.openRowKey) {
      const rowRef = this.rowRefs[this.openRowKey];
      rowRef.closeRow && rowRef.closeRow();
    }
    this.openRowKey = key;
  };

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.standalone}>
          {data.map((d, i) => (
            <SwipeRow
              key={i}
              ref={ref => (this.rowRefs[d.key] = ref)}
              leftOpenValue={75}
              rightOpenValue={-75}
              onRowOpen={this.onRowOpen(d.key)}
            >
              <View style={styles.standaloneRowBack}>
                <Text style={styles.backTextWhite}>Left</Text>
                <Text style={styles.backTextWhite}>Right</Text>
              </View>
              <View style={styles.standaloneRowFront}>
                <Text>I am standalone SwipeRow #{i}</Text>
              </View>
            </SwipeRow>
          ))}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1,
  },
  standalone: {
    marginTop: 30,
    marginBottom: 30,
  },
  standaloneRowFront: {
    alignItems: 'center',
    backgroundColor: '#CCC',
    justifyContent: 'center',
    height: 50,
  },
  standaloneRowBack: {
    alignItems: 'center',
    backgroundColor: '#8BC645',
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 15,
  },
  backTextWhite: {
    color: '#FFF',
  },
  spacer: {
    height: 50,
  },
});