Place the Drawer element at the bottom of the menu

Is there a way to position the menu point at the bottom of the screen? It would be great if we could easily customize the style of the navigation options for each element.

Check out my App Navigator below:

    const AppNavigator = createDrawerNavigator(
      {
        Einkaufsliste: {
          screen: MainScreen,
          navigationOptions: {
            drawerIcon: <Icon name="shopping-cart" />
          }
        },
        Bearbeiten: {
          screen: BasketEditScreen,
          navigationOptions: {
            drawerIcon: <Icon name="edit" />
          }
        }
      },

      {
        contentComponent: CustomDrawerComponent
      }
    );

https://i.sstatic.net/bpR3f.png

Thank you!

javascriptreact-nativereact-navigation

Answer №1

As per the documentation on react-navigation, it is possible to create a custom Drawer navigator by following their example:

import { DrawerItems, SafeAreaView } from 'react-navigation';

const CustomDrawerContentComponent = (props) => (
  <ScrollView>
    <SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
      <DrawerItems {...props} />
    </SafeAreaView>
  </ScrollView>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

To implement this in your case, you would need to make the following adjustments:

    import { DrawerItems, SafeAreaView } from 'react-navigation';

    const CustomDrawerContentComponent = (props) => (
      <ScrollView>
        <SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
        <View style={{flex: 1 }}>
              <DrawerItems {...props} />
        </View>
        <TouchableOpacity style={{flexDirection: 'row', alignItems: 'center'}}>
              //Your pencil icon here with correct margin to the right
              <Text>Edit</Text>
        </TouchableOpacity>
        </SafeAreaView>
      </ScrollView>
    );

    const styles = StyleSheet.create({
      container: {
        flex: 1,
      },
    });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble with Directive - the watch function isn't functioning as expected

After spending countless hours and trying almost everything, I can't seem to get it to work... I have an Angular directive that calls another Angular directive. I need to handle events in the child directive. So my child directive looks like: ...

javascriptangularjs

Performing MongoDB aggregation to tally the number of documents in a query for every array field

Here's an example through JS code of what I'm trying to achieve: let waiting = findSessions() // regular query for status "WAITING" let results = []; for (let w of waiting) { // Only push it to results if the w.members[0] and TARGET_USER_ID h ...

javascriptnode.jsmongodbaggregation-framework

Issue: The navigation object could not be located. Please ensure that your component is nested within a NavigationContainer. (Instructions on how to utilize useNavigation within the Navigation container)

Currently, I am in the process of developing a react-native MERN chat application and have reached the point where I need to implement a profile page for users to edit or add their data. To enable users to access this page, I have included a button inside ...

reactjsreact-nativenavigationuinavigationcontroller

Tips for launching and troubleshooting an AngularJS application within Eclipse

Looking to dive into Nodeclipse and get up and running with debugging an AngularJS application like the angular-phonecat example from Eclipse. Specifically, I want to utilize a Debug on Server launcher to kick off a server with my app and launch a web b ...

javascripteclipseangularjsnodeclipse

Breaking apart a pipe-separated text and sending it through a JavaScript function

CSS: <div class="pageEdit" value="Update|1234567|CLOTHES=5678~-9876543?|5678"> <a href="https://host:controller">Update</a> </div> Trying to retrieve the data within the div and pass it into a JavaScr ...

javascripthtmljqueryjsp

What are the steps to create an endless scrolling feature?

I'm trying to create a slider with a horizontal scrolling effect, but I've hit a roadblock. How can I make the slider scroll infinitely? In my code, you can see that after Item 6, it stops scrolling and I have to scroll backward. However, I want ...

javascripthtmljquerycss

When the onInput event is triggered, React renders components and console.log() displays different values

When I type in the input field, it triggers the onInputChange() function. This function updates the state of inputValue, and then calls the getValue() function which retrieves the current state of inputValue and logs it to the console. However, the value d ...

javascriptreactjs

Struggling to get JavaScript to successfully load a .txt file in order to load various links

I created a cool feature that takes users to a random link, but I currently have a large list of links and wanted to find a way for JavaScript to read them from a text file. The code I have tried so far is not working, and I have experimented with other s ...

javascripthtml

Overcoming Troublesome Login Input Box in Web

In an effort to streamline tasks in our office, I am working on automating certain processes. Specifically, this program is designed to log into our insurance company's website and extract information for payroll purposes. Below is the code snippet th ...

javascripthtmlexcelvbaautomation

Hide the search results if the user leaves the input field blank

I am trying to implement Live Search JSON Data Using Ajax jQuery, and I want to be able to search through multiple JSON files. When the page initially loads with an empty input field, no results are displayed. However, if you type and then delete text in ...

javascripthtmljqueryjsonajax

Tips for using various versions of jQuery at the same time

Despite searching on Stack Overflow, none of the answers provided seem to work for my issue. My requirement is to utilize two separate versions of jQuery. Below is the code snippet: I first link to the initial version and use the following code: <sc ...

javascriptjqueryhtml

Require modifying the radio button's value based on the presence of a certain class in an input field

Feeling overwhelmed. I am currently working on implementing a credit card auto system using the Stripe Payment plugin, but I find myself at a loss. Specifically, when a MasterCard is entered in the card number input field, it should receive the "masterca ...

javascriptjqueryradio-buttonstripe-payments

Is it possible to retrieve the ID of an anchor tag when the text within two table items meets my specified criteria?

In the table with ID "PTSRCHRESULTS," each row contains anchor links. I am trying to find the ID of an element within a row that contains both "Undergrad" and "1". This is for Power Automate Desktop, but I can use JavaScript to get the necessary ID to clic ...

javascriptjquery

Considering a Servlet for managing AJAX requests?

Looking for advice on best practices for implementing a yes or no question with AJAX requests. Open to feedback if I make any missteps along the way. I have a specific Servlet (AjaxServlet?) designated to handle all AJAX requests AjaxServlet is mapped t ...

javajavascriptajaxservlets

Navigating through a collection of objects

My array consists of objects, each having the following structure: var car = { make: "", model: "", price: "" } I am attempting to iterate through each object and check if a specific property is defined in this manner: for (i = 0; i <= ...

javascriptarraysloopsobject

Image not showing up on HTML page following navigation integration

Having trouble with my responsive website setup - the background image for ".hero-image" isn't showing up after adding the navigation. Google Chrome console is throwing a "Failed to load resource: the server responded with a status of 404 (Not Found)" ...

javascripthtmlcss

Having Trouble with React Native Views Creation?

I am facing an issue with creating two views in React Native. ViewA needs to have a fixed size of 60 * 60, while the remaining space is for ViewB. How can I achieve this layout in React Native? The image below showcases the view that I am trying to create. ...

reactjsreact-nativereact-native-ios

Tips for capturing a jQuery trigger in traditional JavaScript

I am trying to trigger an event using jQuery and I want to bind to it in a non-jQuery script. It appears that while I can bind to the event in jQuery using on, I am unable to do so with addEventListener. Check out this jsFiddle for a demonstration: http: ...

javascriptjqueryaddeventlistener

Encountering a problem with the scope of child_process in Node

When utilizing the child_process module in Node.js with the fork method, I am able to send data to a specific file and receive a response. However, I am not logging this data to the console after receiving it from the execution process. The code in first. ...

javascriptnode.jschild-process

JS, Async (library), Express. Issue with response() function not functioning properly within an async context

After completing some asynchronous operations using Async.waterfall([], cb), I attempted to call res(). Unfortunately, it appears that the req/res objects are not accessible in that scope. Instead, I have to call them from my callback function cb. functio ...

javascriptnode.jsexpressasynchronousasync.js