React-native-pager-view: children component of <ViewPager> could not use ref props

[KingAmo]

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

[troZee]

Following code should work

this.textInputRef1 = React.createRef()
<TextInput ref={this.textInputRef1} />
console.log(this.textInputRef1.current)

[KingAmo]

Following code should work

this.textInputRef1 = React.createRef()
<TextInput ref={this.textInputRef1} />
console.log(this.textInputRef1.current)

@troZee unfortunately, it does not work, console.log(this.textInputRef1.current)
got null

[KingAmo]

i edit my code above, as i make some mistakes when writing this issue, but my code in my project is correct that still cause this issue, and i tried your code and it did not work

[troZee]

Can you provide a repository to reproduce your issue?

[sennevc]

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.

[KingAmo]

@sennevc great work, need @troZee to reopen it

[grean]

If you are testing in iOS emulator and the virtual keyboard is disabled, you will not received your ref on an TextInput component.

[Su-Yong]

I found a solution. If wrap your children component, ref works correctly.

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

like this

https://stackoverflow.com/questions/62728009/react-createref-for-a-childcomponent-inside-a-viewpager-in-react-native

[troZee]

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