title: How do create a custom button by adding an overlay to the Viewer?
body: <p>I want to add a custom save button as on overlay to my file viewer application. I created the button in the SaveButton.jsx file
  code snippet</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default function SaveButton({ text, onPress }) {
      &lt;TouchableOpacity onPress={onPress}&gt;
          &lt;View style={styles.button}&gt;
              &lt;Text style={styles.buttonText}&gt;{text}&lt;/Text&gt;
          &lt;/View&gt;
      &lt;/TouchableOpacity&gt;;
  }</code></pre>
  </div>
  </div>
  </p>
  <p>And I want to add this to my App.jsx file. But I get an error JSX expressions must have one parent element - when I remove the View tag and if I add the  tag it doesn't render anything.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>return (&lt;View&gt;
          &lt;DocumentView
            document={filepath}
            /&gt;
          &lt;SaveButton&gt;onPress={() =&gt; {
                  text="Save"
                  // Manual Save
                  this._viewer.saveDocument().then((filePath) =&gt; {
                  console.log('saveDocument:', filePath);
                });
                }}&lt;/SaveButton&gt;
          &lt;/View&gt;
              );
          }</code></pre>
  </div>
  </div>
  </p>
  <p>How do I make it render the save button?
  Is there a better way to add the overlay button?
  The expected UI for save button is <a href="https://i.stack.imgur.com/XIjHm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XIjHm.png" alt="enter image description here" /></a>
  Any suggestion appreciated</p>