Create Horizontal ScrollView in React Native Tutorial Android iOS

How to add multiple View, Images and Text inside Horizontal ScrollView in React Native application and change ScrollView background color using color style.

Horizontal ScrollView is very famous to show multiple menus in android and iOS application which can be scrolled on both directions left to right and right to left. This view is place on screen from Left to right and can be stretched according to its child elements. There is no limitation, Developer can add multiple Views inside it. But there is one limitation Horizontal ScrollView can be scroll only horizontally. So if you want to Scroll vertically then read my this tutorial.

Contents in this project Horizontal ScrollView :

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Add AppRegistry, StyleSheet, ScrollView, Text, Image, View component in import block.

3.  Add View component in render’s return block.

4. Using Inline style set view background color.

5. Add ScrollView component inside View .

6. Set ScrollView’s prop as Horizontal = { true } . This makes this scroll view in Horizontal format. If you want to make this scroll view in vertical format then don’t add this prop.

7. Create a folder inside your project’s directory named as images . Just like i did in below screenshot :

8. Download All 5 images from below and paste them inside the images folder. These are the images we have been calling inside our Horizontal ScrollView.

9. Screenshot of images folder after adding these images.

10. Add 2 Text components and 5 Image components inside ScrollView .

11. Complete Source Code for index.android.js file :

Screenshots:

Horizontal ScrollView

3 Comments

  1. too bad it doesn t show how to render several react components in 1 scrollview

Leave a Reply

Your email address will not be published. Required fields are marked *