Saturday, June 1, 2019

React Native Full Width Horizontal JSON ScrollView showing Page Numbers

This tutorial explains how can we create full width horizontal JSON ScrollView showing page numbers in react native application and here we are using random user json api that helps to generate random user and display the user data in scroll view layout. When user scroll left to right or right to left, then it will display the user data accordingly. Also it will display the total number of users count in the bottom of the screen and when user scroll left then user count increases and right then user count decreases.

React Native Full Width Horizontal JSON ScrollView showing Page Numbers


React Native Full Width Horizontal JSON ScrollView showing Page Numbers :


Lets follow the below steps that helps to create full width horizontal JSON ScrollView showing page numbers in react native application.



Project Structure :


CustomScrollView Component

Lets see the below source code to display user data in scroll view in horizontal manner.

CustomScrollView.js
import React, { Component } from 'react';
import { AppRegistry, Text, View, ScrollView, Dimensions, StyleSheet, Platform } from 'react-native';

var deviceWidth = Dimensions.get('window').width;

export default class CustomScrollView extends Component {
  constructor() {
    super();

    this.state = { currentHorizontalPage: 1 }
  }

  handleScroll = (event) => {
    this.scrollX = event.nativeEvent.contentOffset.x;
    this.setState({ currentHorizontalPage: Math.min(Math.max(Math.floor(this.scrollX / deviceWidth + 0.5) + 1, 0), React.Children.count(this.props.children)) });
  }

  render() {
    return (
      <View style={styles.container}>
        <ScrollView onScroll={this.handleScroll} showsHorizontalScrollIndicator={false} horizontal={true} pagingEnabled={true} scrollEventThrottle={64}>
          {this.props.children}
        </ScrollView>

        <View style={styles.pagingContainer}>          
          <Text style={styles.headerText}>{this.state.currentHorizontalPage} / {React.Children.count(this.props.children)}</Text>
        </View>
      </View>
    );
  }
}



const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      backgroundColor: '#29b6f6',
      paddingTop: (Platform.OS === 'ios') ? 20 : 0,
      position: 'relative'
    },
    pagingContainer: {
      backgroundColor: 'transparent',
      position: 'absolute',
      bottom: 20,
      left: 30,
      width: '100%',
      flexDirection: 'row'
    },
    headerText: {
      color: 'white',
      fontSize: 25
    },

  });

App Component

As you know In React Native, the component exported from App.js is the entry point (or root component) for react app. Lets see the complete source code for App component.

App.js
import React, { Component } from 'react';
import { AppRegistry, View, ActivityIndicator, Image, Dimensions, Text, StyleSheet, Platform } from 'react-native';
import CustomScrollView from "./src/components/CustomScrollView.js"

var deviceWidth = Dimensions.get('window').width;

export default class App extends Component {
  constructor() {
    super();
    this.state = { dataLoaded: false, viewsHolder: [] }
  }

  componentDidMount() {
    fetch("https://randomuser.me/api/0.8/?results=15").then(
      (response) => response.json()).then(
        (responseData) => {
          responseData.results.map((item, key) => {
            this.state.viewsHolder.push
              (
                <View key={key} style={[styles.childContainer, { width: deviceWidth }]}>
                  <Image source={{ uri: item.user.picture.large }}
                    style={{ width: 250, height: 250, borderRadius: 250 / 2 }} />
                  <Text style={styles.setTextLayout}>{item.user.name.first}</Text>
                </View>
              );
          })
          this.setState({ dataLoaded: true, viewsHolder: this.state.viewsHolder });
        });
  }

  render() {
    if (this.state.dataLoaded)
      return (
        <CustomScrollView>
          {
            this.state.viewsHolder
          }
        </CustomScrollView>
      );
    else {
      return (
        <View style={styles.activityIndicatorHolder}>
          <ActivityIndicator size="large" />
        </View>
      );
    }
  }
}

const styles = StyleSheet.create(
  {

    childContainer: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
    },

    setTextLayout: {
      fontSize: 35,
      color: 'white'
    },

    activityIndicatorHolder: {
      backgroundColor: 'rgba(0,0,0,0.1)',
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
    }
  });

Screenshot :




This is all about React Native Full Width Horizontal JSON ScrollView showing Page Numbers. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.

2 comments:

  1. Hi
    for example top one you declared as like that
    var deviceWidth = Dimensions.get('window').width;

    but whyn't accessing to that width

    you declared as normal way like that pagingContainer: {

    width: '100%',
    }
    have error?

    ReplyDelete
    Replies
    1. Yes, we can use Dimensions property to set as width. In both condition we will get same results.

      Delete