Confusion about meaning of `itemWidth` and `contentOffset`

Firstly, thanks for the work you’ve done on this library and for open sourcing it so that I have a great starting place. Also, loved your article on medium titled “I’m an imposter.”

I’m finding it a little frustrating to implement in practice though, which may just be the result of a couple cognitive disconnects that could be easily cleared up with updates to the documentation.

If you’ll allow me, let me first explain the problem I’m struggling to solve. This screenshot shows my implementation on the left and the target on the right (twitter’s highlight card swiper), which is basically like this example of yours, which doesn’t seem to have a snack associated with it. Or maybe I’m not looking hard enough. .

And here’s where I am with the code so far…

class EventList extends React.Component {
  state = {
    currentIndex: 0,
  };

  render() {
    const peek = 20;
    const gutter = peek / 4;
    const cardWidth = layout.window.width - gutter * 2 - peek * 2;
    // const offset = 25;
    const headerHeight = 80;
    return (
      <SideSwipe
        data={this.props.data && this.props.data.me.teams}
        extractKey={team => team.id}
        index={this.state.currentIndex}
        itemWidth={cardWidth}
        // style={{ width: layout.window.width }}
        contentContainerStyle={{ backgroundColor: colors.base.hint }}
        // contentOffset={offset}
        threshold={layout.window.width / 4}
        onIndexChange={idx =>
          this.setState(state => {
            const targetIndex = idx; // clamp to inc/dec by max 1/-1
            return { currentIndex: targetIndex };
          })
        }
        renderItem={({ itemIndex, currentIndex, item, animatedValue }) => {
          const backgroundColor = backgroundColors[itemIndex % backgroundColors.length];
          return (
            <View
              style={{
                width: cardWidth,
                height: layout.window.height - (headerHeight + peek),
                margin: gutter,
                backgroundColor,
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <Text style={{ color: colors.white, fontSize: 25 }}>{item.event.title}</Text>
              <Text style={{ color: colors.white }}>currentIndex: {currentIndex}</Text>
              <Text style={{ color: colors.white }}>itemIndex: {itemIndex}</Text>
              <Button
                title="Logout"
                onPress={this.props.screenProps.onLogout}
                accentColor={colors.white}
                hollow
                condensed
              />
            </View>
          );
        }}
      />
    );
  }
}

My problem is that I cannot seem to figure out how to keep the card centered in the view with equal parts of the sibling cards “peeking” out on either side. I’ve been playing with various values for itemWidth and contentOffset, which was my best guess as to the problem. I stopped trying to do math and started plugging in static values to see if I could get a better idea how inc/dec them affected the behavior. I’m lost. I went back to the docs to try and understand, but am left with these questions…

1. What is itemWidth exactly? The docs say // width of each child, but I’m unclear if the “child” includes my card width + the gutter on each side + the peek value of each sibling card (essentially the window.width) or it’s really just the width of the card itself. I’m going with the latter.
2. What is contentOffset? The docs say // horizontal padding on carousel but I’m not sure what you mean by “carousel”. Do you mean padding around the SideSwipe component, or around my card (e.g. peek + gutter)?
3. I was also confused about the difference between flatListStyle and style since both are documented with the exact same comment // style for the FlatList element

I’d probably be able to figure this all out if you’d point me to this reference implementation…

[geirman]

I got it figured out! Sometimes, all you have to do is step away from the problem then come back with fresh eyes after a sound sleep. Ha!

In my case itemWidth is cardWidth + (gutter * 2) and contentOffset is (layout.window.width - itemWidth) / 2

So, whatever it is I want centered in the window is the itemWidth, which was the card plus gutters on each side. Boom!

That makes contentOffset equal to the padding on either side of the centered item.

This covers questions 1 & 2, but I’m still unsure on question 3 and haven’t looked into it, but it’s also not relevant to this particular issue. I’ll submit a PR if you agree I’m grasping this now.

[kkemple]

Yeah! You got it! Sorry I couldn’t get that done up for you yet. I’m so glad you were able to figure it out and would absolutely love a PR clearing that up!