Header is not showing up in react native

Question

Snack I want to include a touchable opacity on the right side of my app. Currently, in my app, I have a side menu that overlaps the top header space, like this- Is there any way to move the touchable opaacity 'Open' to the right side? Right now I am only able to place the touchable opacity within the side menu on the right.

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  SafeAreaView,
  TextInput,
  Picker,
  Button,
  ScrollView,
} from 'react-native';
import MenuDrawer from 'react-native-side-drawer';
import { useState, useEffect, useCallback } from 'react';
import {
  Chart,
  LineChart,
  BarChart,
  PieChart,
  ProgressChart,
  ContributionGraph,
} from 'react-native-chart-kit';
import { Container, Header, Left, Body, Right, Title } from 'native-base';

const initialData = [12, 19, 12, 25, 22, 10];
const initialFrom = '0';
const initialToMonth = '7';
const months = [
  { month: 'Jan', value: '0' },
  { month: 'Feb', value: '1' },
  { month: 'Mar', value: '2' },
  { month: 'April', value: '3' },
  { month: 'May', value: '4' },
  { month: 'June', value: '5' },
];
const initialLevelsArr = ['Jan', 'Feb', 'Mar', 'April', 'May', 'June'];
const initialLabels = ['Jan', 'Feb', 'Mar', 'April', 'May', 'June'];

export default function App() {
  const [open, setOpen] = useState(false);

  const toggleOpen = () => {
    setOpen(!open);
  };

  const [filterLimit, setfilterLimit] = useState(100);
  const [lessThanOrGreaterThan, setlessThanOrGreaterThan] = useState(
    'greaterThan'
  );
  const [datas, setDatas] = useState(initialData);
  const [from, setFrom] = useState(initialFrom);
  const [toMonth, setToMonth] = useState(initialToMonth);
  const [labels, setLabels] = useState(initialLabels);

  const applyFilter = () => {
    const isLessThan = lessThanOrGreaterThan === 'greaterThan';
    const value = filterLimit;
    // update instance variable
    const newDatas = initialData.map((v) => {
      if (isLessThan ? v >= value : v <= value) return v;
      return 0;
    });

    setDatas(newDatas);
  };

  const applyDateFilter = () => {
    const newLabels = initialLevelsArr.slice(
      parseInt(from),
      parseInt(toMonth) + 1
    );
    const newDatas = initialData.slice(parseInt(from), parseInt(toMonth) + 1);

    setLabels(newLabels);
    setDatas(newDatas);
  };

  const dataset = {
    labels: labels,
    datasets: [
      {
        data: datas,
        colors: [
          (opacity = 1) => `red`,
          (opacity = 1) => `blue`,
          (opacity = 1) => `yellow`,
          (opacity = 1) => `green`,
          (opacity = 1) => `purple`,
          (opacity = 1) => `orange`,
        ],
      },
    ],
  };

  const drawerContent = () => {
    return (
      <SafeAreaView style={styles.chartContainer}>
        <View>
          <TextInput
            style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginTop: 100 }}
            numeric
            placeholder="Filter Limit"
            value={filterLimit}
            onChangeText={(text) => setfilterLimit(text)}
          />
        </View>
        <View style={styles.pickerContainer}>
          <Picker
            selectedValue={lessThanOrGreaterThan}
            style={{ height: 50, alignSelf: 'stretch' }}
            onValueChange={(itemValue, itemIndex) =>
              setlessThanOrGreaterThan(itemValue)
            }>
            <Picker.Item label="Greater Than" value="greaterThan" />
            <Picker.Item label="Less Than" value="lessThan" />
          </Picker>
        </View>
        <View style={styles.filterContainer}>
          <Button
            onPress={() => applyFilter()}
            title="Apply Filter"
            color="#841584"
          />
        </View>
        <View style={styles.wrapper}>
            <View>
            <Button
              onPress={() => applyDateFilter()}
              title = "Apply DateFilter"
              color="#841584"
                />
                <View style={{flexDirection:"row"}}>
                    <View style={{flex:1}}>
                        <Picker
                          selectedValue={from}
                          style={{ height: 50, width: 150, justifyContent: 'flex-start' }}
                          onValueChange={(itemValue, itemIndex) => setFrom(itemValue)}
                        >
                          <Picker.Item label ="Jan" value="0" />
                          <Picker.Item label="Feb" value="1" />
                          <Picker.Item label ="Mar" value="2" />
                          <Picker.Item label="Apr" value="3" />
                          <Picker.Item label ="May" value="4" />
                          <Picker.Item label="Jun" value="5" />
                        </Picker>
                    </View>
                    <View style={{flex:1}}>
                    <Picker
                      selectedValue={toMonth}
                      style={{ height: 50, width: 150, justifyContent: 'flex-start' }}
                      onValueChange={(itemValue, itemIndex) => setToMonth(itemValue)}
                    >
                      <Picker.Item label ="Jan" value="0" />
                      <Picker.Item label="Feb" value="1" />
                      <Picker.Item label ="Mar" value="2" />
                      <Picker.Item label="Apr" value="3" />
                      <Picker.Item label ="May" value="4" />
                      <Picker.Item label="Jun" value="5" />
                    </Picker>
                    </View>
                </View>
            </View>
        </View>
      </SafeAreaView>
    );
  };

  return (
    <View style={styles.container}>
    <Header>
        <Left>
        <Button
          title="Press me"
          onPress={() => Alert.alert('Simple Button pressed')}
        />
        </Left>
        <Body>
          <Title>Header</Title>
        </Body>
        <Right>
        <Button
          title="Press me"
          onPress={() => Alert.alert('Simple Button pressed')}
        />
        </Right>
      </Header>
      <MenuDrawer
        open={open}
        position='right'
        drawerContent={drawerContent()}
        drawerPercentage={45}
        animationTime={250}
        overlay={true}
        opacity={0.4}>
        <TouchableOpacity onPress={toggleOpen} style={styles.body}>
          <Text>Open</Text>
        </TouchableOpacity>
        <BarChart
          data={dataset}
          width={300}
          height={220}
          withCustomBarColorFromData={true}
          flatColor={true}
          fromZero={true}
          chartConfig={{
            backgroundColor: '#ffffff',
            backgroundGradientFrom: '#ffffff',
            backgroundGradientTo: '#ffffff',
            data: dataset.datasets,
            color: (opacity = 1) => '#fff',
            labelColor: () => '#6a6a6a',
          }}
        />
      </MenuDrawer>
    </View>
  );
}

const styles = StyleSheet.create({
  chartContainer: {
    flex: 1,
    zIndex: 5,
    backgroundColor: '#FFF',
  },
  pickerContainer: {
    alignSelf: 'stretch',
  },
  inputContainer: {
    marginTop: 12,
    paddingHorizontal: 24,
  },
  filterContainer: {
    marginTop: 100,
    paddingHorizontal: 24,
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 30,
    zIndex: 0,
  },
  animatedBox: {
    flex: 1,
    backgroundColor: '#38C8EC',
    padding: 10,
  },
  body: {
    alignSelf: 'stretch',
    height: 50,
    marginTop: 30,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fcba03',
    width: '20%',
  },
}); 

Answer 1

Final Output:

Make the following changes to your code:

wrap TouchableOpacity in View:

<View
     style={{
            width: '100%',
            height: 50,
     }}>
     <TouchableOpacity
         onPress={toggleOpen}
         style={[styles.body, open ? { left: 0 } : { right: 0 }]}>
         <Text>{open?"Close": "Open"}</Text>
     </TouchableOpacity>
</View>

now give these styles to body

body: {
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fcba03',
    width: '20%',
    position: 'absolute',
 
  }

Finished Example: Expo Snack

Happy Coding.