title: React Native: How do I move the text "hello" to the right side of my app instead of in the middle?
body: <p>I want to move the text <code>Hello</code> to the right side using CSS but I am unable to do so. </p>
  
  <p>It was fine before. But when I added in a library called <code>react-native-popup-menu</code> which is importing Menu,
      MenuOptions,
      MenuOption,
      MenuTrigger,
      MenuProvider. When I put Text 'Hello' it the text will be in the middle instead</p>
  
  <pre><code>export default class Cluster1 extends Component {
  constructor(props) {
      super(props)
      this.state = {
          search: false,
          dataToShow: []
      }
  }
  componentWillMount() {
      this.setState({ dataToShow: ClusterData })
  }
  searchUpdated = (term) =&gt; {
      let matchedItemsArray = []
      if (term === '') {
          this.setState({ search: false, dataToShow: ClusterData })
      } else {
          this.setState({ search: true, dataToShow: ClusterData }, function () {
              ClusterData.map((item) =&gt; {
                  item.data.map(item1 =&gt; {
                      if (item1.name == term) {
                          matchedItemsArray.push(item)
                      }
                  })
              })
              this.setState({ dataToShow: matchedItemsArray })
          })
      }
  }
  render() {
      return (
          &lt;View&gt;
              &lt;View style={styles.top}&gt;
                  &lt;TextInput style={styles.search}
                      onChangeText={(term) =&gt; { this.searchUpdated(term) }}
                      style={styles.searchInput}
                      placeholder="Type a mood to search" /&gt;
                  &lt;MenuProvider &gt;
                      &lt;Menu onBackdropPress={() =&gt; this.onBackdropPress()}
                      &gt;
                          &lt;MenuTrigger &gt;
                              &lt;Text style={styles.user}&gt;
                                  hello
                              &lt;/Text&gt;
                          &lt;/MenuTrigger&gt;
  
                          &lt;MenuOptions style={styles.top}&gt;
                              &lt;MenuOption style={styles.top}&gt;
                                  &lt;TouchableOpacity onPress={() =&gt; this.signOut()}&gt;
                                  &lt;Text&gt;SignOut&lt;/Text&gt;
                                  &lt;/TouchableOpacity&gt;
                              &lt;/MenuOption&gt;
                          &lt;/MenuOptions&gt;
                      &lt;/Menu&gt;
                  &lt;/MenuProvider&gt;
              &lt;/View&gt;
          &lt;/View&gt;
      );
  }}
  const styles = StyleSheet.create({
  user: {
      paddingRight: 5,
      color: "#841584",
  
  },
  top: {
      alignItems: 'center',
      justifyContent: 'space-between',
      flexDirection: 'row',
      borderBottomWidth: 4,
      borderBottomColor: '#ccc',
      textAlign: 'center',
  },});
  </code></pre>
  
  <p>The Text 'Hello' should be on the right side instead of in the middle of the screen</p>