title: How to scroll to text input on focus when there is an input accessory with React Native
body: <p>I'm working on a React Native app and many screens has forms with text input fields.</p>
  
  <p>When I press the text input, the keyboard opens. I created a floating <code>InputAccessory</code> component which appears at the top of the keyboard to dismiss it, with the button "Done" on it.</p>
  
  <p>However now that I have this accessory, when I click an input field or press the "Next" button on the keyboard to go to the next field, the <code>ScrollView</code> scrolls to align the bottom of the text input with the top of the keyboard. With this floating accessory it poses problems as you can see below you can't see the content of the text input because of this accessory, and I'd like to have the scrollview scrolling a bit more to display the entire text input.</p>
  
  <p><a href="https://i.stack.imgur.com/oNvZy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oNvZy.png" alt="enter image description here"></a></p>
  
  <p>I could probably do the calculation for this and run the <code>.scrollTo()</code> method from the <code>ScrollView</code> component but this pattern is very common to my entire app and I'm looking for an elegant solution that could be generic enough every single time I import a text input and focus on it.</p>
  
  <p>Do you have any suggestion?</p>
  
  <p>Thanks</p>