title: React native three dots menu appearing on left side
body: <p>i'm creating a screen using react-native-paper. When i use a Appbar as header with three dots menu, the options appear at the wrong side of the screen. It should appear at the right side, not the left one.
  <br/>My code:</p>
  <pre><code>import React, { useEffect,useState } from 'react'
  import {
      SafeAreaView,
      StyleSheet,
      Platform
  } from 'react-native'
  import {connect} from 'react-redux'
  ...
  import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
  import {Appbar,Menu} from 'react-native-paper'
  import MComponent from './subpages/component'
  const Tab = createMaterialTopTabNavigator();
  const TAG = 'TAG'
  const MPage = ({ navigation,handleLoadData,isLoading }) =&gt; {
      useEffect(() =&gt; {
          handleLoadData()
      }, [])
      const [openMenu,setOpenMenu] = useState(false)
      return (
          &lt;SafeAreaView style={styles.container}&gt;
        &lt;Menu
              style={styles.menu}
              visible={openMenu}
              onDismiss={()=&gt;{
                setOpenMenu(false)
              }}
              
              anchor={
                &lt;Appbar.Header
                statusBarHeight={0}
            &gt;
            &lt;Appbar.BackAction
              onPress={()=&gt;{
                navigation.goBack()
              }}
            /&gt;
            &lt;Appbar.Content
              title=&quot;App Screen&quot;
            /&gt;
            &lt;Appbar.Action icon=&quot;dots-vertical&quot; onPress={()=&gt;{
                setOpenMenu(true)}}
              /&gt;
          &lt;/Appbar.Header&gt;
              }
            &gt;
              &lt;Menu.Item onPress={() =&gt; {
                setOpenMenu(false)
                handleLoadServiceOrders()
              }} title=&quot;Option 1&quot; /&gt;
              &lt;Menu.Item onPress={() =&gt; {}} title=&quot;Option 2&quot; /&gt;
            &lt;/Menu&gt;
              &lt;Loading
                  loading={isLoading}
              /&gt;
              &lt;Tab.Navigator&gt;
                  &lt;Tab.Screen name={OPTIONS.PAGE_A} component={MComponent} /&gt;
                  &lt;Tab.Screen name={OPTIONS.PAGE_B} component={MComponent } /&gt;
              &lt;/Tab.Navigator&gt;
          &lt;/SafeAreaView&gt;
      )
  }
  
  const styles = StyleSheet.create({
      container: {
          marginTop: Platform.OS === 'android' ? 30 : 0,
          justifyContent: 'center',
          flex:1
      }
  })
  ...
  </code></pre>
  <p>Images showing what happened:
  <br/>
  <a href="https://imgur.com/a/xq3Gcac" rel="nofollow noreferrer">https://imgur.com/a/xq3Gcac</a>
  <a href="https://i.stack.imgur.com/bF1gL.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bF1gL.jpg" alt="menu closed before clicking at three dots menu" /></a>
  <br/>
  <a href="https://i.stack.imgur.com/AJEAW.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AJEAW.jpg" alt="menu opened at the wrong side" /></a></p>
  <p><br/>
  I'm using react-native with react-native-paper lib to create the Appbar. The Menu component also belongs to react-native-paper.</p>