callstack / callstack/react-native-pager-view

ViewPager child height is doubled in ScrollView

Đang mở
#162 14 bình luận 0 reaction 0 người được giao Xem trên GitHub
android bug ios
Ngôn ngữ chính
TypeScript
Star
3.4k
Fork
476
Merge trung bình
10 ngày 21 giờ
Pull request đã merge (30 ngày)
2

Mô tả

# Bug

First of all, thank you for this great package.

ViewPager child's height is doubled (or so) when ViewPager is embedded inside a ScrollView. This affects the dynamic content's UI I am fetching from my API (e.g. I receive content of 300px height and the ViewPager scales to ~600px).

I don't know if this is a bug or normal behaviour, but I do want to know how to work around this issue without any `marginBottom: -100%` non-reliable code.

Here is a sample video from my app. Although, another interesting thing is that it doesn't double on first render, because I present an while the content is downloaded, but it overextends just as I scroll to another page:

![ezgif com-video-to-gif](https://user-images.githubusercontent.com/7328298/79975997-93f48500-84a4-11ea-9fd4-607b452d9e8c.gif)

## Environment info

`react-native info` output:

```bash
System:
OS: macOS 10.15.4
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 13.8.0 - /usr/local/bin/node
Yarn: Not Found
npm: 6.14.4 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK:
Android NDK: 21.0.6113669
IDEs:
Android Studio: 3.6 AI-192.7142.36.36.6308749
Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
Languages:
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.0 => 16.13.0
react-native: ^0.62.0 => 0.62.0
npmGlobalPackages:
*react-native*: Not Found
```

Library version: 3.3.0

## Steps To Reproduce

1. Embed ViewPager (`flex: 1`) in ScrollView.
2. Add View (check its height with e.g. 'backgroundColor: 'red'`) with content that is bigger in size than the ViewPager (e.g. bigger than the screen).
3. Scroll to next page and see that the ViewPager increased in height way beyond its initial height is extended.

Describe what you expected to happen:

1. The children to not be stretched or to be stretched only as big as the ViewPager (not to overflow its height).

## Reproducible sample code

```js
import ViewPager from '@react-native-community/viewpager'
import React from 'react'
import { ScrollView, View } from 'react-native'

const CHILD_HEIGHT = 300

const ViewPagerHeightBug = (): JSX.Element => (


{Array.from(Array(2)).map((item, index) => (



))}


)

export default ViewPagerHeightBug
```

As you can see in this example, whatever the `CHILD_HEIGHT` we set, the ViewPager somehow doubles.

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với sample ViewPagerHeightBug và cấu trúc lồng nhau của ScrollView/ViewPager, sau đó kiểm tra hành vi layout của ViewPager trong quá trình chuyển trang. Tái hiện với CHILD_HEIGHT được đặt thành 300 và xác minh rằng việc chuyển trang giữ pager và phần tử con ở chiều cao mong đợi thay vì tăng gấp đôi.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
javascript, react-native
Lĩnh vực
mobile
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.