Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Confusion about meaning of `itemWidth` and `contentOffset`

See original GitHub issue

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. . 2018-03-13_1344

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 (
        data={ &&}
        extractKey={team =>}
        // 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 (
                width: cardWidth,
                height: layout.window.height - (headerHeight + peek),
                margin: gutter,
                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>

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…

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

geirmancommented, Mar 15, 2018

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.

kkemplecommented, Mar 15, 2018

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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

What exactly are contentOffset, ContentInset and ContentSize ...
contentOffset indicates the current position of the scroll view content, relative to the origin coordinates on the top-left corner. The content ...
Read more >
What exactly are contentOffset& contentInset of ScrollView
contentOffset indicates the current position of the scroll view content, relative to the origin coordinates on the top-left corner.
Read more >
contentOffset | Apple Developer Documentation
Sets the offset from the content view's origin that corresponds to the scroll view's origin.
Read more >
Year of confusion Definition & Meaning - Merriam-Webster
The meaning of YEAR OF CONFUSION is the year 46 b.c. when the Julian calendar was introduced 708 years from the founding of...
Read more >
Confusion Definition & Meaning -
the act of confusing. · the state of being confused. · disorder; upheaval; tumult; chaos: The army retreated in confusion. · lack of...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found