Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

children component of <ViewPager> could not use ref props

See original GitHub issue

Bug

ViewPager’s children component could not use ref props

Environment info

React native info output:

 System:
    OS: macOS 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 676.96 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.3.1 - /usr/local/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.11.3 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      API Levels: 21, 23, 26, 27, 28
      Build Tools: 23.0.1, 26.0.1, 28.0.3, 29.0.2
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5900203
    Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.2 => 0.61.2

Library version: 2.0.1

Steps To Reproduce

<ViewPager>
    <TextInput ref={ref => {this.textInputRef1 = ref};} />
    <TextInput ref={ref => {this.textInputRef2 = ref};} />
</ViewPager>

   componentDidMount() {
        console.log(this.textInputRef1,this.textInputRef2)
   }
// undefined, undefined

Describe what you expected to happen: textInputRef1, textInputRef2 is not undefined

Reproducible sample code

Issue Analytics

State:
Created 4 years ago
Comments:9 (3 by maintainers)

Top GitHub Comments

5reactions

sennevccommented, Dec 11, 2019

Can this issue be reopened? the bug is still there.

I created a sample repo where the issue can be reproduced: https://github.com/sennevc/react-native-viewpager-issue-77-sample

I did also find out that the issue only happens on children directly under the <ViewPager>, so you can wrap your components in a <View> to bypass the issue for now.

0reactions

troZeecommented, Feb 24, 2021

It has been fixed in 5.x version. Please try it and let me know in case of any errors.

Top Results From Across the Web

children component of <ViewPager> could not use ref props #77

Bug ViewPager's children component could not use ref props Environment info React native info output: System: OS: macOS 10.14.6 CPU: (12) ...

React createRef for a childComponent inside a ViewPager in ...

I finally found a solution, since viewpager children cannot be referenced directly I have wrapped up the child page in a View component...

react-native-pager-view - npm

React Native wrapper for Android and iOS ViewPager. ... Attention: Note that you can only use View components as children of PagerView (cf....

Upgrading from 5.x - React Navigation

If you need to have some configuration based on which screen is focused in child navigator, you can still do it using the...

How to Use React Refs - Ross Bulat - Medium

Referencing a class component gives us access to that component's props, state, methods, and it's entire prototype. We cannot attach refs to functional ......