Estoy creando una aplicación de comercio electrónico usando React-Native; Estaba tratando de agregar Drawer Navigation pero hay algunos errores image1 con el cajón dentro de la barra de búsqueda

Como puede ver en la imagen, está dentro de la barra de búsqueda, lo quiero junto a la barra de búsqueda. Y el segundo error es Está abierto dentro de la barra de búsqueda, como se muestra en la imagen a continuación, image2 con el cajón abierto dentro de la barra de búsqueda.

Comportamiento esperado :

Quiero el menú al lado de la barra de búsqueda en el encabezado azul y quiero ocultar el nombre de la casa desplazado al lado del ícono del menú

Mi código:

 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;