title: React Native + Appium testing nested accessibility labels
body: <p>I have a couple of custom components in React Native that I'd like access to when doing end-to-end testing with Appium. Some of my components have nested Views, for example (with unnecessary details removed):</p>
  
  <p><strong>MyView</strong></p>
  
  <pre><code>&lt;View accessibilityLabel={this.props.accessibilityLabel}&gt;
        &lt;TextInput accessibilityLabel={'input'} /&gt;
        &lt;Text accessibilityLabel={'error'}&gt;{this.props.error}&lt;/Text&gt;
  &lt;/View&gt;
  </code></pre>
  
  <p>Note how the containing view has its accessibility label set by the parent. </p>
  
  <p>I have a view that contains multiple of the view above, like such:</p>
  
  <pre><code>&lt;MyView accessibilityLabel={'email'}/&gt;
  &lt;MyView accessibilityLabel={'password'}/&gt;
  &lt;MyView accessibilityLabel={'confirmPassword'}/&gt;
  </code></pre>
  
  <p>In Appium, I'd like to access the <code>TextInput</code> field of each of the elements separately, like so:</p>
  
  <pre><code>const emailInput = await driver.elementByAccessibilityId('email')
       .elementByAccessibilityId('input');
  const passwordInput = await driver.elementByAccessibilityId('password')
       .elementByAccessibilityId('input');
  </code></pre>
  
  <p>However, <code>passwordInput</code> does not load correctly. Are <code>accessibilityLabel</code>s required to be unique? Is nesting them impossible? And how would I solve the problem?</p>
  
  <p>I am aware that I can just include another <code>prop</code> to hold the <code>accessibilityLabel</code> of <code>TextInput</code> within <code>MyView</code>, but that seems rather bloated and is not the answer I'm looking for.</p>