How can I animate scroll in React Native

Question

I have a bunch of data in a horizontal scrolling ListView (within a ReactNative app). I want to scroll the text over the course of about 3 minutes (this is not just bouncing or an event). I can't find any example of how to do it. The ListView.scrollTo() function is all that seems to fit, but it doesn't allow such a controlled gradual scroll. Also, I'm keen to use the native animation if possible, so perhaps a transform?

export default class App extends React.Component {
  // Initialize the hardcoded data
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows([
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin',
        'Daryl', 'Donny', 'Frederick', 'Fanny', 'Fanulf', 'Gordon'
      ])
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <ListView
          horizontal={true}
          style={styles.content}
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Text>{rowData}</Text>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  content: {
    flex: 1,
    padding: 5
  }
});

Live view of transparency transform as an example: webpackbin.com/bins/-Kjimv-RjiHvK2iM_CiY — sventechie
– sventechie, Commented May 10, 2017 at 1:21

Irfan Ayaz · Accepted Answer · 2017-05-10 05:49:11Z

You could use Animated api for this. Get the total contentsize of the scrollview and then use scrollTo in animated value intervals to scroll your view. Your code will be something similar to this.

    export defaul class App extends React.Component {
  // Initialize the hardcoded data
  constructor(props) {
    super(props);
    this._contentWidth = 0;
    this.animatedValue = new Animated.Value(0);

    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows([
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin',
        'Daryl', 'Donny', 'Frederick', 'Fanny', 'Fanulf', 'Gordon',
        'Daryl', 'Donny', 'Frederick', 'Fanny', 'Fanulf', 'Gordon',
        'Daryl', 'Donny', 'Frederick', 'Fanny', 'Fanulf', 'Gordon',
        'Daryl', 'Donny', 'Frederick', 'Fanny', 'Fanulf', 'Gordon',
        'Daryl', 'Donny', 'Frederick', 'Fanny', 'Fanulf', 'Gordon',
        'Daryl', 'Donny', 'Frederick', 'Fanny', 'Fanulf', 'Gordon',
        'Daryl', 'Donny', 'Frederick', 'Fanny', 'Fanulf', 'Gordon',

      ])
    };
  }

  componentWillMount() {

    let self = this;

    this.animatedListenerId = this.animatedValue.addListener(
      ({value}) => {
        console.log("VALUE: ", value)
        this.refs.listview.scrollTo({x: (self._contentWidth/180)*value, y:0, animated: false})
      });

    Animated.timing(this.animatedValue, {
      toValue: 180,
      duration: 180*1000,
      easing: Easing.linear
    }).start();
  }

  render() {
    return (
      <View style={styles.container}>
        <ListView
          ref='listview'
          horizontal={true}
          style={styles.content}
          dataSource={this.state.dataSource}
          onContentSizeChange = {( contentWidth, contentHeight ) => {
            this._contentWidth = contentWidth
          }}
          renderRow={(rowData) => <Text>{rowData}</Text>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  content: {
    flex: 1,
    padding: 5
  }
});

Collectives™ on Stack Overflow

How can I animate scroll in React Native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related