Nativebase: SwipeRow dynamic toggle method

Created on 19 Feb 2018 · 7Comments · Source: GeekyAnts/NativeBase

Is there any way to call a function to switch (open/close) the SwipeRow by the reference, something like this:
this.refs.view.toggle()
and the JSX
<SwipeRow ref="view" ...

Or is there another way to toggle?

awaiting response

Source

hjJunior

Most helpful comment

@hjJunior get the reference of the <SwipeRow/> you want to close and call the closeRow() function like below

Code

import React, { Component } from 'react';
import { Container, Header, Content, SwipeRow, View, Text, Icon, Button } from 'native-base';
export default class SwipeRowExample extends Component {
  render() {
    return (
      <Container>
        <Header />
        <Content scrollEnabled={false}>
          <SwipeRow
            ref={(c) => { this.component = c }}
            leftOpenValue={75}
            rightOpenValue={-75}
            left={
              <Button success onPress={() => alert('Add')}>
                <Icon active name="add" />
              </Button>
            }
            body={
              <View>
                <Text>SwipeRow Body Text</Text>
              </View>
            }
            right={
              <Button danger onPress={() => alert('Delete')}>
                <Icon active name="trash" />
              </Button>
            }
          />
          <Button style={{ margin: 20 }} onPress={() => this.component._root.closeRow()}><Text>Close row</Text></Button>
        </Content>
      </Container>
    );
  }
}

Gif

closerow

akhil-geekyants on 20 Feb 2018

👍3

All 7 comments

@hjJunior if you are using <SwipeRow/> with <List/> you can use rowMap[`${secId}${rowId}`].props.closeRow(); as seen in the deleteRow function in the example http://docs.nativebase.io/Components.html#swipeable-multi-def-headref

akhil-geekyants on 20 Feb 2018

I'm using Flatlist, is it possible? and about if I use individually there another way?

hjJunior on 20 Feb 2018

@hjJunior get the reference of the <SwipeRow/> you want to close and call the closeRow() function like below

Code

import React, { Component } from 'react';
import { Container, Header, Content, SwipeRow, View, Text, Icon, Button } from 'native-base';
export default class SwipeRowExample extends Component {
  render() {
    return (
      <Container>
        <Header />
        <Content scrollEnabled={false}>
          <SwipeRow
            ref={(c) => { this.component = c }}
            leftOpenValue={75}
            rightOpenValue={-75}
            left={
              <Button success onPress={() => alert('Add')}>
                <Icon active name="add" />
              </Button>
            }
            body={
              <View>
                <Text>SwipeRow Body Text</Text>
              </View>
            }
            right={
              <Button danger onPress={() => alert('Delete')}>
                <Icon active name="trash" />
              </Button>
            }
          />
          <Button style={{ margin: 20 }} onPress={() => this.component._root.closeRow()}><Text>Close row</Text></Button>
        </Content>
      </Container>
    );
  }
}

Gif

closerow

akhil-geekyants on 20 Feb 2018

👍3

Thanks guy, and can I use openRow ?

hjJunior on 20 Feb 2018

@hjJunior openRow is not supported

akhil-geekyants on 20 Feb 2018

I did not know how to do openRow or toggleRow because row can be open in both direction, instead I added the methods for each direction.