Offset.js

import React from 'react'
import RX from 'reactxp'
import ReactDOM from 'react-dom'

const numbersDataSource = [
  {id: '1', text: 'one'},{id: '2', text: 'two'},{id: '3', text: 'three'},{id: '4', text: 'four'},{id: '5', text: 'five'},{id: '6', text: 'six'},{id: '7', text: 'seven'},{id: '8', text: 'eight'},{id: '9', text: 'nine'},{id: '10', text: 'ten'},
  {id: '11', text: 'eleven'},{id: '12', text: 'twelve'},{id: '13', text: 'thirteen'},{id: '14', text: 'fourteen'},{id: '15', text: 'fifteen'},{id: '16', text: 'sixteen'},{id: '17', text: 'seventeen'},{id: '18', text: 'eighteen'},{id: '19', text: 'nineteen'},{id: '20', text: 'twenty'}
];

export default class Offset extends RX.Component {
    rowz = [];

    scrollToRef(itemRef) {
      // The ref access here returns "is not a function" error not sure why as this.rowz[itemRef] does exist
      // this.rowz[itemRef].scrollIntoView({block: 'start', behavior: 'smooth'});

      // Since above doesn't work, we'll access the element from ReactDOM instead
      ReactDOM.findDOMNode(this.rowz[itemRef]).scrollIntoView({block: 'start', behavior: 'smooth'});

      // Issue is that using "scrollIntoView" some browsers will scroll with animation while others ignore the scrollIntoView options and jump to element without animation
      // Is there any way to animate the scroll across all browsers for a consistent animated scroll experience?
      // I know the offsetTop we need to scroll to is 460
      // ReactXP Code...
    }

    render() {
      return (
        <RX.View style={styles.wrapper}>
            <RX.Button style={styles.button} onPress={() => this.scrollToRef('item_7')}>
              <RX.Text style={styles.text}>Scroll to row of ref item_7!</RX.Text>
            </RX.Button>

            <RX.View>
              {numbersDataSource.map((item) => {
                return (
                  <RX.View ref={(row) => this.rowz["item_"+item.id] = row} key={"item_"+item.id} style={styles.itemRow}>
                    <RX.Text>ref is {"item_"+item.id}</RX.Text>
                    <RX.Text>{item.text}</RX.Text>
                  </RX.View>
                );
              })}
            </RX.View>
        </RX.View>
      )
    }
}

const styles = {
  wrapper: RX.Styles.createViewStyle({
    flex: 1
  }),
  button: RX.Styles.createButtonStyle({
    backgroundColor: 'red',
    padding: 50
  }),
  text: RX.Styles.createTextStyle({
    color: 'white',
    textAlign: 'center',
    fontSize: 16
  }),
  itemRow: RX.Styles.createViewStyle({
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: 'black'
  })
};