Scroll to a specific item position

[RatFou]

Hi, I'm trying to scroll to a specific item but I'm stucked.

In my last test I used a modified scroll function (without the callback):
this.refs.scrollingMenu.scrollToIndex(i);
but it seems that the widths state is empty (this.state.widths[itemNum]).

I understand that this state is pushed in the loop function and the width is calculated with onLayout. I just don't get how to reproduce this onLayout in another function.

Any lead?

[bradbyte]

@thathirsch any thoughts?

[arminsal1]

I have this use case as well. @thathirsch

[xstable]

You can do it as follow:

<ScrollingMenu
                  defaultIndex={0}
                  ref={(c) => this.scrollingMenu = c}
                  items={items}
                  itemStyle={styles.yourItemStyle}
                  selectedItemStyle={styles.yourSelectedItemStyle}
                  containerStyle={styles.yourContainerStyle}
                  onSelect={(index) => {
                   ... do this and that
                  }}
                />

And then to scroll to a given Item:

<TouchableOpacity onPress={index => this.scrollingMenu.select(index) ) }>
      <Icon type="FontAwesome" style={{ color: config.fontLight, fontSize: 18, paddingTop: 10 }} name="chevron-left" />
</TouchableOpacity>

Here you can use the Methods which are allready declared in ScrollMenu Component, like select() or scrollTo().