CODEWITHSUNDEEP
react-nativereact-native-flatlist
wandremark
wandremark

Reputation: 11

Positioning view between two rows in Flatlist - React native

I have to put a card between two elements in a flatlist in react native project. The actual situation is this, and how you can see it goes under the next calendar row. I am using zIndex right now but it's not working

image

      <DateContainer>
        <Body color={Colors.GREY_3}>{getWeekDay(formattedDate).toLowerCase()}</Body>
        <DayContainer isSelectedDay={isSelectedDay}>
          <Day color={isSelectedDay ? Colors.WHITE : Colors.BLACK} weight={FontWeight.BOLD}>
            {formattedDate.date()}
          </Day>
        </DayContainer>
      </DateContainer>
      {/*  {children} */}
      <View
        onLayout={({
          nativeEvent: {
            layout: { height }
          }
        }) => setCardHeight(height / 2)}
        style={[
          { flex: 1 },
          isNightShift && { position: 'absolute', width: '84%', left: 79, bottom: -cardHeight, zIndex: 10 }
        ]}
      >
        {children}
      </View>
    </Container>
  );
};

interface IContainerProps {
  backgroundColor?: 'white' | 'grey';
  isNightShift?: boolean;
}

const Container = styled.TouchableOpacity<IContainerProps>`
  align-items: center;
  background-color: ${({ backgroundColor }) => (backgroundColor === 'grey' ? '#FAFBFC' : Colors.WHITE)};
  flex-direction: row;
  min-height: ${({ isNightShift }) => (isNightShift ? 124 : 72)};
  padding-left: 21px;
  padding-right: 16px;
  padding-vertical: 20px;
`;```

Upvotes: 1

Views: 425

Answers (1)

emrich
emrich

Reputation: 248

When I understand your question correct, you want to show two different types of items in a FlatList. The items A and B are displayed in alternating order, exemplary A B A B. Additionally, you want to display A on the left side and B on the right side with A starting from left of the row and B filling 84% starting from the right side of the row.

Currently, the item A (dom 17) is displaying correct, but turno notturno should not be cut anymore. What you are doing currently is trying to position the element absolute and setting the height of the view to height / 2 because you have some issues displaying the item. Hence, the halve of the card does not display.

What I recommend to do now is the following: Create two different components for the two different use-cases. A being <Date /> and B being <Information/>. In the renderItem method of the FlatList you use some property to decide whether to display A or B for the data. Doing this you can show A and B in an arbitrary order.

Then use Flexbox in both items to space them. The first item should be implemented something like:

    <View style={{display: 'flex', flex-direction: 'row'}}>
            <View style={{width: '16%'}}/> // mon 17
     </View>

Then also use Flexbox to align the second item, something like:

    <View style={{display: 'flex', flex-direction: 'row-reverse'}}>
            <View style={{width: '84%'}}/> // turno notturno item
     </View>

An in general please don't use position absolute. 99% of use-cases can be responsively designed with flex-box or grid.

Upvotes: 1

Related Questions