Lecture 3 || REACT NATIVE || SCROLL VIEW || HORIZONTAL & VERTICAL ||

in blurttribe •  3 years ago 

Assalam-o-Alaikum!

Welcome back on my lecture to my all BLURT FELLOWS

Welcome back to my lecture 3 on the React Native. My goal is to understand in a simple and easy way.. Because there are methods on the other sites but it is not very long and easy. Not everyone understands very easily the react Native, so if I want to tell it in a very simple and straightforward way, then today topic is Scroll view. We will understand what is the meaning of scroll view


image.png

  • Scroll View is used to hold one or more components inside. It calculates the horizontal scrolling as well as vertical scrolling

  • We mainly use scroll view to move the data material which is higher than the screen or layout.

  • It does not appear in the screen, then we see the whole data using scroll view

  • If we want to be horizontal then we have to use horizontal screen view. But if we want to be vertical, we have to use vertical horizontally.

  • Swipe between views can also be applied on Android using the view pager component

In this code we have to answer the functional component first, because the response import is in the answer itself, which means it will show what we have imported. Or what we want to import. And then we have to import the components, and here we import the scene, the text, the buttons, the images. If we want to add more but here we can use them easily

And the text is used for text typing and we can also use styles like flex and font size that I want. You know we can use buttons where we have to press anything. And the image component is used when we have to import an image from the internet or anywhere. This can be from your laptop or from your internet.

image.png

First we need to import View, Text and Scroll View into Reac native App.js which is the default app. Then we have to use the Render and Return component. After that use style component and set flex size

Now we show the horizontal scroll view

And after you have to write this
Scroll View Horizontal = {True}

Then you can set different styles in the view component such as height, width and font size and others that you know . and that you want more. It's all depend on you. And then export the class that you import at the first.

image.png

Then you have to run your project. First you need to connect your device to the laptop. And you have to establish good connection. Then run the project using these functions.

  • adb devices

  • Reactive-native run-android

Now it's time to export the class that we copied to the app

I Special Thanks To:
@zahidsun || @blurt-pakistan || @imransoudaghar ||@practicalthought

Regards: @arinaz08

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE BLURT!
Sort Order:  

Hi, @arinaz08,

Thank you for your contribution to the Blurt ecosystem.


Please consider voting for the witness @symbionts.
Or delegate to @ecosynthesizer to earn a portion of the curation rewards!