change height while running

[rashawa]

hello I'm having an issue
my logic is
I have a swipe item list which contains a toggler too when I click on the toggle it shows another component in a vertical
way so this affects the height of the item and on this case the new hight of the visible row isn't reflected on the hidden one
is there a way to set a hight dependency to it ?

[jemise111]

@rashawa did you try the prop recalculateHiddenLayout={true}?

[Pashkagreen]

have the same problem, did you solve it?

[KaneDenzil]

I also have the same problem, my renderHiddenItem are not matching the renderItem height. even while adding recalculateHiddenLayout={true}

  <SwipeListView
        testID="notesComponent.notesListView"
        keyExtractor={item => item._id}
        data={publishedNotes}
        renderItem={renderNotesListRow}
        renderHiddenItem={renderEditListRow}
        leftOpenValue={100}
        rightOpenValue={0}
        stopLeftSwipe={100}
        recalculateHiddenLayout={true}
      />

      
const renderNotesListRow = (noteItem: ListRenderItemInfo<INoteInternalContent>) => (
    <NotesListRow
      generalNote={noteItem.item.data.note}
      expirationWindowDuration={getExpirationWindowDuration(
        noteItem.item.data.fromDate,
        noteItem.item.data.toDate
      )}
      expirationWindowInDays={noteItem.item.data.scheduleWindow}
      lastUpdatedDate={calculateLastUpdatedDate(noteItem.item.audits?.edit?.date)}
      lastUpdatedName={`${noteItem.item.audits?.edit?.firstName} ${noteItem.item.audits?.edit?.lastName}`}
    />
  );

  const renderEditListRow = (noteItem: ListRenderItemInfo<INoteInternalContent>) => (
    <TouchableOpacity onPress={() => editNote(noteItem)}>
      <EditButtonContainer>
        <EditImage source={{ uri: 'editIcon' }} />
        <EditText>Edit</EditText>
      </EditButtonContainer>
    </TouchableOpacity>
  );`

`import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
import styled from 'styled-components/native';

export const NotesContainer = styled.View`
  display: flex;
  padding-horizontal: ${responsiveWidth(1)}px;
  height: 100%;
`;

export const EditButtonContainer = styled.View`
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-top: ${responsiveHeight(0.5)}px;
  padding-vertical: ${responsiveHeight(2.8)}px;
  padding-left: ${responsiveWidth(1.5)}px;
  background-color: rgba(20, 30, 146, 1);
`;
export const EditImage = styled.Image`
  height: 13.33px;
  width: 13.33px;
  margin-right: ${responsiveWidth(1)}px;
`;
export const EditText = styled.Text`
  font-size: 16px;
  font-weight: 400;
  color: white;
`;
`

[Pashkagreen]

I also have the same problem, my renderHiddenItem are not matching the renderItem height. even while adding recalculateHiddenLayout={true}

+++

[mmaass]

recalculateHiddenLayout fixed my problem. As for you who have still problems, check if you have the flexGrow: 1 or absolute positioning with top/bottom: 0 styles set to your hiddenItem View

[Pashkagreen]

recalculateHiddenLayout fixed my problem. As for you who have still problems, check if you have the flexGrow: 1 or absolute positioning with top/bottom: 0 styles set to your hiddenItem View

vielen Dank! Alles funktioniert wie es soll)