jemise111 / react-native-swipe-list-view

A React Native ListView component with rows that swipe open and closed
https://www.npmjs.com/package/react-native-swipe-list-view
MIT License
2.79k stars 526 forks source link

Changing Open Value According to Rendered Hidden Items #581

Open erayaras opened 3 years ago

erayaras commented 3 years ago

I have 2 hidden buttons. I show both of them if item.item.showViewJobButton is true. If not true then I only show one button.

Even If I show only one hidden button, not showed button also occupies area.

Can I change rightOpenValue conditionally?

 <SwipeListView
    data={filteredNotificationData}
    renderItem={renderItem}
    renderHiddenItem={renderHiddenItem}
    rightOpenValue={-194}    // I want to change this value conditionally
    recalculateHiddenLayout={true}    // This is only work on rotation I believe
    onRowDidOpen={onRowDidOpen}
    disableRightSwipe
    keyExtractor={item => item.id.toString()}
    closeOnScroll
 />
const renderHiddenItem = (item, rowMap) => (
    <View
      style={{
        alignItems: 'center',
        backgroundColor: Colors.white,
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
      }}
    >
      {item.item.showViewJobButton && // Condition
        <TouchableOpacity
          style={{
            alignItems: 'center',
            bottom: 0,
            justifyContent: 'center',
            position: 'absolute',
            top: 0,
            width: 97,
            backgroundColor: '#FDBA4C',
            right: 97,
          }}
          onPress={() => {
            closeRow(rowMap, item.item.id)
          }}
        >
          <Text
            style={[[Fonts.textInterRegular14], { color: Colors.white, top: 1 }]}
          >
            {t('notifications.viewJob')}
          </Text>
        </TouchableOpacity>
      }

      <TouchableOpacity
        style={{
          alignItems: 'center',
          bottom: 0,
          justifyContent: 'center',
          position: 'absolute',
          top: 0,
          width: 97,
          backgroundColor: '#FD624C',
          right: 0,
        }}
        onPress={() => {
          deleteRow(rowMap, item.item.id)
        }}
      >
        <Text style={[[Fonts.textInterRegular14], { color: Colors.white }]}>
          {t('messages.delete')}
        </Text>
      </TouchableOpacity>
    </View>
  )
fukemy commented 2 years ago

hi did u solved this?

marry1822 commented 2 years ago

Same issue, any suggestions?

Banana-Boat commented 1 year ago

try <SwipeRow> https://github.com/jemise111/react-native-swipe-list-view/blob/master/docs/per-row-behavior.md