React Native Guide - Creating an iOS App Part 1.4 - 1.5

→ Transfer from here
→ Continued. Previous issues:

• Part 1.1
• Part 1.2-1.3

4. Filtering and selecting random wallpapers

In this section, we will select a certain number of random wallpapers from a given category. The section is more about JS than React Native. We will create a new module (file) that will generate a random number. If the term “module” is unfamiliar to you, I recommend referring to the Node.js documentation on modules .
Find the line declaring the class

class SplashWalls extends Component{/* ... */};

and above it add the following line. In this line we will declare a constant in which the number of randomly generated wallpapers that we will show will be stored:

const NUM_WALLPAPERS = 5;

Now we will create a module that will generate a random number. The module will have two functions. Let's look at them:

• uniqueRandomNumbers():- the function takes 3 arguments. The first is the number of random numbers that will be returned. The second and third are the lower ( lowerLimit ) and upper ( upperLimit) limits of the generated numbers, respectively . If we call a function with arguments uniqueRandomNumbers(5, 10, 20);, we get an array of 5 unique numbers,
  from 10 to 20.
• randomNumberInRange():- the function takes two arguments, respectively, the lower and upper limits of the generated numbers. For example, as a result of a function call randomNumberInRange(2, 10);, a single number from 2 to 10 will be returned.

We could combine these functions, but I am committed to quality code, so I follow the principle of The Single Responsibility Principle, SRP ( Wiki ). SRP says that every function should do one thing well and nothing more. Following good programming principles will save you from a headache in the future.
Create a new file in the same directory as the index.ios.js file . We could create functions directly in this file, but selecting them in a separate file will allow us to use them in any other project where we need to generate random numbers. In addition, this will not clog the index.ios.js file code .
We will name the new RandManager.js file . Its contents are shown below:

module.exports = {
	uniqueRandomNumbers(numRandomNumbers, lowerLimit, upperLimit) {
		var uniqueNumbers = [];
		while( uniqueNumbers.length != numRandomNumbers ) {
			var currentRandomNumber = this.randomNumberInRange(lowerLimit, upperLimit);
			if( uniqueNumbers.indexOf(currentRandomNumber) === -1 ) 
				uniqueNumbers.push(currentRandomNumber);
		}
		return uniqueNumbers;
	},
	randomNumberInRange(lowerLimit, upperLimit) {
		return Math.floor( Math.random() * (1 + upperLimit - lowerLimit) ) + lowerLimit;
	}
};

Save the file. Now we need to import our module into the index.ios.js file. To do this, add a module call after `use strict`:

'use strict';
/***/
var RandManager = require(‘./RandManager.js’);
/***/

Now we need to change our function that receives the wallpaper fetchWallsJSON():

fetchWallsJSON() {
  var url = 'http://unsplash.it/list';
  fetch(url)
    .then( response => response.json() )
    .then( jsonData => {
    /***/
      var randomIds = RandManager.uniqueRandomNumbers(NUM_WALLPAPERS, 0, jsonData.length);
      var walls = [];
      randomIds.forEach(randomId => {
        walls.push(jsonData[randomId]);
      });
      this.setState({
        isLoading: false,
        wallsJSON: [].concat(walls)
      });
    /***/
    })
    .catch( error => console.log('JSON Fetch error : ' + error) );
}

As soon as we get the JSON data, we generate random numbers and put them into the randomIds array. Then we iterate over our random numbers and put the wallpaper with the corresponding id into the walls array.
Then we update the state variables: isLoading to false, since the data is loaded and wallsJSON in the walls.
To see the result, change the renderResults () function:

renderResults() {
/***/
  var {wallsJSON, isLoading} = this.state;
  if( !isLoading ) {
    return (
  . 
        {wallsJSON.map((wallpaper, index) => {
          return(
            
              {wallpaper.id}
            
          );
        })}
   .
    );
  }
/***/
}

In the first line of the renderResults () function, we used destructuring from ES2015. Thanks to this, we were able to:

var wallsJSON = this.state.wallsJSON,
	isLoading = this.state.isLoading;

replaced by:

var {wallsJSON, isLoading} = this.state;

ES2015 is cool, I told you.
In View, we iterate over the wallsJSON array using map () .
Going through an array (or collection) of wallpapers when rendering, we need to pass a unique key (id) for each element. Therefore, we see the key property:

After updating the emulator, we should see the following:

We see 5 random id wallpapers. If we change {wallpaper.id} to {wallpaper.author} in the renderResults () function, we should see the following:

Well, we learned how to randomly extract a certain number of wallpapers (5 in this case) from the API. High five!

5. Adding a Swiper component

In this section, we will add the Swiper component. This component allows us to show wallpapers in a container that can be flipped sideways ( Youtube (en)).
We will learn how to incorporate third-party React Native components into our application. RN has a good community and on GitHub you will find a rich collection of various third-party components.
For our purposes, we will use react-native-swiper .
Go to the project directory in the terminal and type the following command:

npm install react-native-swiper --save

Now import the new component by adding the following line:

`use strict`
/***/
var Swiper = require(‘react-native-swiper’);
/***/

Let's try out Swiper.
Go to the renderResults () method and replace View with Swiper. After that, the renderResults () method should look like this:

renderResults() {
  var {wallsJSON, isLoading} = this.state;
  if( !isLoading ) {
    return (
    /***/
      
    /***/
        {wallsJSON.map((wallpaper, index) => {
          return(
            
              {wallpaper.author}
            
          );
        })}
    /***/
      
    /***/
    );
  }
}

Run in emulator:

Instead of displaying the names of the authors of wallpapers in the form of a list, we put them on different
screens, which we can scroll left and right (cool! - approx. Translator).
Now we need to add a couple of attributes:

}
activeDot.{}
loop={false}
onMomentumScrollEnd={this.onMomentumScrollEnd}
/***/
>
  {wallsJSON.map((wallpaper, index) => {
    return(
      
        {wallpaper.author}
      
    );
  })}

We changed:

• Navigation points at the bottom of the screen turn white and increase in size.
• Turned off scrolling in a circle (loop = {false}). That is, when you reach the last page and try to scroll further, you will not get to the first page.
• We launch onMomentumScrollEnd (which you will learn about later) every time we turn the page

On this we came to the end of the first part. What an interesting journey!

To summarize

1. In the first section, we learned how to create an empty RN project in Xcode.
2. In the second section, we talked about ES2015 and why it is desirable to use the new syntax, also learned how to create state variables and extract JSON data from the API.
3. In the third section, we examined the dynamic rendering of the application, depending on the value of the state variable. And a little acquainted with flexbox positioning.
4. In the fourth section, we created our own module for generating random numbers and learned how to import it into the application.
5. In the fifth section, we installed a third-party module in our application, which was easy thanks to Node.

To be honest, at the moment our application is not very interesting. I know. In the next part, we will add images of the wallpaper instead of the names of the authors. In addition, we will add a double-tap handler (double-tap - I don’t know how to translate exactly, as I understand it, double-clicking on the screen with your finger, but can you call it a double-click or not? - comment translator.) Using the PanHandler component. We will learn how to import libraries into Xcode and provide access to our application for Camera Roll (apparently an analogue of the "Gallery" in Android - approx. Translator). In addition, we will create our own component and much more. Sounds interesting? See you in the next part.
PS. How to determine where to insert a cat?