Menu bar is inside search bar-CodePudding

I am building a ecommerce App using React-Native; I was trying to add Drawer Navigation but there few errorsimage1 with drawer inside the search bar

As you can see in the image it is inside the search bar, I want it beside search bar And second error is It's open inside the search bar as shown in the image belowimage2 with drawer opened inside the search bar

Expected Behavior :

I want Menu beside search bar on blue header and I want to hide Home name displaced beside Menu icon

My Code:

import React, {Component} from 'react';
import {SafeAreaView, View, TextInput, StatusBar} from 'react-native';
import Feather from 'react-native-vector-icons/Feather';
import Menu from './Menu';

class Headers extends Component {
  render() {
    return (
      <SafeAreaView style={{backgroundColor: '#22e3dd'}}
      >
        <View
          style={{
            marginTop: 24,
            marginLeft: 50,
            margin: 10,
            padding: 5,
            backgroundColor: 'white',
            flexDirection: 'row',
            alignItems: 'center',
          }}>
            <Menu />
          <StatusBar
            barstyle="dark-content"
            backgroundColor="#22e3dd"
            hidden={false}
            translucent={false}
          />
          <Feather name="search" size={20} />
          <TextInput style={{height: 40, margin: 9}} placeholder="Search..." />
        </View>
      </SafeAreaView>
    );
  }
}

export default Headers;

CodePudding user response：

It's because you have your Menu component inside of your View with the white background, just take it outside and that would fix the button placement.

<SafeAreaView style={{backgroundColor: '#22e3dd',flexDirection: 'row'}}>
        <Menu />
        <View
          style={{
            marginTop: 24,
            marginLeft: 50,
            margin: 10,
            padding: 5,
            backgroundColor: 'white',
            flexDirection: 'row',
            alignItems: 'center',
          }}>
            
          <StatusBar
            barstyle="dark-content"
            backgroundColor="#22e3dd"
            hidden={false}
            translucent={false}
          />
          <Feather name="search" size={20} />
          <TextInput style={{height: 40, margin: 9}} placeholder="Search..." />
        </View>
      </SafeAreaView>