What Happens When The Spaceship In The Animation Has Zero Horizontal Velocity Paragraph

Intro

React Native's ScrollView component is a generic container that can incorporate multiple elements — Views, Texts, Pressables, and even another ScrollView. After putting all those elements inside the ScrollView component, y'all can utilise it to gyre through them vertically (the default) or horizontally (by adding information technology as a prop).

Nosotros can run into scrolled components in almost every app available on the App Shop and Google Play. Today, I'll explain some common mistakes when using ScrollView in React Native and how to avoid them, plus a few tips and tricks to aid provide the all-time user experience possible.

When to use ScrollView

The first and most mutual mistake of using ScrollView is not knowing when to use it. At that place are two common List components in React Native: ScrollView and FlatList.

To determine which one to use, we only accept to call up i matter: ScrollView works best to brandish a small corporeality of elements with a express size because all of ScrollView's children components are rendered at in one case — fifty-fifty if they're not currently visible on-screen.

This is why if you have a lot of elements inside your ScrollView and some of them are, for case, taller, portrait-style pictures, ScrollView's performance may exist a bit laggy and unpleasant for the user.

Whenever you're fetching information from an API in the form of lists, for example, the all-time way to display them in your app would exist with the FlatList component, which is implemented differently. Because FlatList but renders elements that are currently showing on the screen — non all the elements at once — information technology is capable of displaying long lists in a more performant way.

FlatList exposes to u.s.a. a long list of props that are designed for the best UX and performance of rendering long information lists, including:

removeClippedSubviews – A Boolean that, when enabled (it'due south false past default), detaches views that are outside the viewport from the native view bureaucracy, which reduces time spent on the main thread, leading to reduced take chances of dropped frames
initialNumToRender – This is the initial corporeality of items to exist rendered into the FlatList. The best exercise is to define the precise amount of items that would embrace the viewport for every device, which could be a performance heave for the initial rendering of the component. Setting this number too low may crusade blank areas

At that place are a few more swell tips on how to meliorate FlatList performance, which have been very well explained in the docs hither. I hope by reading the paragraph above I helped you empathize when to employ which component.

Styling ScrollView the correct way

Now that we know when to use the ScrollView component, let'southward have a await at how to use information technology. Beginners often waste a lot of time figuring out how to properly style the ScrollView because it has two styling props: manner and contentContainerStyle. Here's a short explanation of those props:

The style prop is used for the styling of the ScrollView parent element, which we can call up of as a simple, not-scrollable View. We're setting the size of the ScrollView chemical element on the window viewport and its relative position to sibling elements. This parent container cannot exceed viewport'due south tiptop or width
The contentContainerStyle prop is a scrollable container within the parent ScrollView I described above. It's the moving office of the ScrollView, and this is where we're applying styles that permit us to align the items inside, add padding, etc.

Here's a alive case yous tin test on snack.expo.io:

And so now that we know when to employ ScrollView and how to mode information technology, I'll explain some of the mutual props that may cause some confusion and atomic number 82 to bugs.

Tracking scroll position

When working with ScrollView, we often need to rails the curlicue position. To exercise so correctly, we should use onScroll props. This event fires maximally once per frame during scrolling. A unmarried scroll upshot is an object that looks similar this:

{   nativeEvent: {     contentInset: {bottom, left, correct, top},     contentOffset: {x, y},     contentSize: {elevation, width},     layoutMeasurement: {meridian, width},     zoomScale   } }

In lodge to utilise those values correctly, we take to know what each of those properties does:

contentInset – This is the margin of distance from the edges of the ScrollView to its content; the default object value is {top: 0, left: 0, lesser: 0, correct: 0}
contentOffset – This value is the distance that the user has already scrolled from the beginning, most often used when we desire to track the scrolled value. If it's a horizontal ScrollView component, we're using contentOffset.ten; if it's vertical, nosotros're using contentOffset.y
contentSize – We use this prop to get the height and width of the content inside the ScrollView. It's often used together with layoutMeasurement and contentOffset — for example, to determine whether the user has scrolled to the end of the content. We accept to exist especially conscientious when using this prop considering it is not available on Android for performance reasons
layoutMeasurement – This is the height and width of the viewport
zoomScale – The electric current calibration value of the ScrollView's content. When ScrollView contains only one Paradigm component, we tin use it together with the maximumZoomScale and minimumZoomScale props to zoom in on the Image

Correctly using onScroll and tracking ringlet position may be a catchy task due to functioning reasons. This is why it's ever important to recollect how many necessary operations we're calling with a single coil event.

To take better command of the scroll event, nosotros utilise a scrollEventThrottle prop, which controls how ofttimes the coil outcome will exist fired while the user is scrolling (past time interval in milliseconds). A lower corporeality tin pb to better accuracy for tracking the coil value position (contentOffset), but information technology may frequently lead to performance issues.

The deviation between values 1–16 volition not exist noticeable for the middle considering the JS run loop is synchronized to the screen refresh charge per unit (sixteen is the recommended number hither in most cases). Setting a college number results in less code sent across the React Native span, which improves performance.

Nesting ScrollViews

Terminal only not least, I wanted to talk about nesting a ScrollView component in another ScrollView component. We may sometimes desire this kind of composition when, for example, implementing a mix of horizontal and vertical elements.

By default, nesting ScrollViews is automatically enabled on iOS, but in order to have information technology on Android, we have to set the nestedScrollEnabled props to true and also remember that our Android API must be on level 21+ (the default in React Native v0.63 is 24).

Summary

Although in that location are many more interesting props within the ScrollView component that permit united states of america to create tons of interesting user experiences, I think I've emphasized the nearly common mistakes and important use cases of the ScrollView component based on my feel.

I hope I've explained them in a style that will assistance you use this component a chip more than easily. If you have whatsoever other issues with the use of ScrollView component, feel free to accost them in the comment section — I'll keep an eye on it, and I'll answer all the questions you may have.

LogRocket: Instantly recreate issues in your React Native apps.

LogRocket is a React Native monitoring solution that helps yous reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.

LogRocket as well helps you increment conversion rates and production usage by showing you exactly how users are interacting with your app. LogRocket's production analytics features surface the reasons why users don't complete a item catamenia or don't adopt a new characteristic.

Start proactively monitoring your React Native apps — effort LogRocket for gratuitous.

Source: https://blog.logrocket.com/common-bugs-react-native-scrollview/

Posted by: tathamferamplon.blogspot.com