SliderApp.js

/**
 * Creator Asim Karel
 * https://github.com/AsimKarel
 *
 */

import React from 'react';
import {
  FlatList,
  Button,
  View,
  StyleSheet,
  Dimensions,
  Text,
} from 'react-native';

const App = () => {
  return <MySlider />;
};

class MySlider extends React.Component {
  state = {
    data: ['A', 'B', 'C'],
  };
  currentIndex = 0;
  scrollNext = () => {
    if (this.currentIndex !== this.state.data.length - 1) {
      this.flatListRef.scrollToIndex({
        index: this.currentIndex + 1,
        animated: true,
      });
    }
  };
  scrollPrevious = () => {
    if (this.currentIndex !== 0) {
      this.flatListRef.scrollToIndex({
        index: this.currentIndex - 1,
        animated: true,
      });
    }
  };
  onViewableItemsChanged = ({viewableItems, changed}) => {
    if (changed[0].isViewable) {
      this.currentIndex = changed[0].index;
    }
  };
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          ref={ref => {
            this.flatListRef = ref;
          }}
          onViewableItemsChanged={this.onViewableItemsChanged}
          horizontal={true}
          pagingEnabled={true}
          data={this.state.data}
          renderItem={({item}) => (
            <Text key={item} style={styles.item}>
              {item}
            </Text>
          )}
        />
        <View style={styles.buttonContainer}>
          <Button title={'Previous'} onPress={this.scrollPrevious} />
          <Button title={'Next'} onPress={this.scrollNext} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 50,
    marginLeft: 10,
    marginRight: 10,
    marginBottom: 200,
    alignItems: 'center',
  },
  item: {
    flex: 1,
    fontSize: 150,
    borderWidth: 1,
    borderColor: 'blue',
    width: Dimensions.get('window').width - 20,
  },
  buttonContainer: {
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
});
export default App;