Customise the React Native Developer Menu with Dev Settings API

Azim Ahmed comes with a few practical code snippets to alter the React Native Developer Menu from within your code, via the DevSettings Module:

  1. Toggle why-did-you-render
  2. Perform an action on the current route
import {DevSettings} from 'react-native';
import React, {useEffect, useState} from 'react';

if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {trackAllPureComponents: false});
}

const App = () => {
  const [trackAllPureComponents, setTrackAllPureComponents] = useState(false);

  useEffect(() => {
    if (process.env.NODE_ENV === 'development') {
      const whyDidYouRender = require('@welldone-software/why-did-you-render');
      whyDidYouRender.wdyrStore.options.trackAllPureComponents =
        trackAllPureComponents;
    }

    DevSettings.addMenuItem('Toggle whyDidYouRender', () => {
      setTrackAllPureComponents(val => !val);
    });
  }, [trackAllPureComponents]);

  return null;
};

export default App;

React Native: 3 ways to use Dev Settings API →
React Native DevSettings API Example App →

About the author

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.