Add testID to component props to easily access component with test libraries

Is your feature request related to a problem? Please describe.
The problem I am experiencing is writing tests using detox. I currently have a few selects on a screen and need to tap each one of them in order to set the values, but I am finding it difficult because I cannot specify a custom test id for each of the selects that I use. Another issue I am experiencing is when using stack navigators the previous selects are located that are not visible and I would like a unique way to ensure that I am selecting the correct select when testing.

Describe the solution you’d like
Add a testID prop that overrides the following testID’s when you provide it:

• android_picker
• ios_touchable_wrapper
• android_touchable_wrapper So I would like to replace the testID in index.js with something like this:

<TouchableOpacity
                testID={testID || 'android_touchable_wrapper'}

So when the testID is provided replace it, otherwise keep the original testID.

Describe alternatives you’ve considered
Currently I am selecting all the selects and then accessing them by index, but when you have a lot of selects this gets confusing especially with nested views and navigation stacks

Additional details
NONE

[TildeWill]

We were able to write a test that picked something from the picker. We found that you had to tap twice on the text field to get the picker to open up, like this:

in index.js

import RNPickerSelect from 'react-native-picker-select'
...
<RNPickerSelect
  touchableWrapperProps={{testID: "myUsStatePicker"}} 
  ... 
/>

in happyPath.spec.js:

describe('Example', () => {
  beforeEach(async () => {
    await device.reloadReactNative()
  })

  it('lets the user pick a US state from the picker', async () => {
    ...
    await element(by.id('myUsStatePicker')).tap() //tap once to focus the text input
    await element(by.id('myUsStatePicker')).tap() //tap a second time to open the picker modal
    await element(by.text('Alabama')).tap() //can only pick one of the first three-ish values because they are the ones that are visible when the picker is opened, otherwise you could maybe scroll
    await element(by.text('Done')).tap()
    ...
  })
})

cc @stupakov

[chenop]

Another way of scrolling would be doing:

const picker = element(by.id("ios_picker"));
await expect(picker).toBeVisible();
await picker.tap();
picker.setColumnToValue(0, "Desired Value");