react / react/react-native

Android Scrollview ContentInset/ContentOffset do not behave properly.

Open
#30,533 26 comments 12 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Component: ScrollView Platform: Android
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
4

Description

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

Please provide a clear and concise description of what the bug is. Include screenshots if needed.
Please test using the latest React Native release to make sure your issue has not already been fixed: https://reactnative.dev/docs/upgrading.html

Content Offset and Content Inset do not work for Android devices on React Native ScrollViews

React Native version:

Run react-native info in your terminal and copy the results here.

System:
OS: macOS 10.15.7
CPU: (8) x64 Intel(R) Core(TM) i7-3770 CPU @ 3.40GHz
Memory: 91.34 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.15.1 - /usr/local/bin/node
Yarn: Not Found
npm: 6.13.7 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.3 - /Users/Dellybro/.rvm/gems/ruby-2.6.3/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.1, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0
Android SDK: Not Found
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.5900203
Xcode: 12.1/12A7403 - /usr/bin/xcodebuild
Languages:
Java: 11.0.2 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.3 => 0.63.3
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

  1. Create a horizontal scrollview and attempt to use content inset and content offset. Nothing will happen

Expected Results

Describe what you expected to happen.

I would expect the same results as iOS with contentInset is moves the start and contentOffset is moves the initial starting value

Snack, code example, screenshot, or link to a repository:

Please provide a Snack (https://snack.expo.io/), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.
You may provide a screenshot of the application if you think it is relevant to your bug report.
Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

https://stackoverflow.com/questions/65014040/react-native-android-scrollview-content-inset-content-offset-not-applied

Please review this stackoverflow question which has all of the information about my current situation.

Snack Expo link https://snack.expo.io/gW4iCCXOD

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the horizontal ScrollView case using the linked Snack and review how Android handles contentInset and contentOffset. Trace the Android ScrollView entry point and compare its behavior with the stated iOS expectations; done means both properties affect the initial content position as described.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, react-native
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
50/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.