Skip to main content

Setting up custom commands

With Reactotron you can register custom commands that can do anything you want when they are executed. You can see all your registered commands in the "Custom Commands" tab in reactotron.

Registering a command

There are two ways you can write your custom commands.

command: "test2",
handler: () => console.log("This is an example 2"), // Optional settings
title: "A thing", // This shows on the button
description: "The desc", // This shows below the button
Reactotron.onCustomCommand("test", () => console.log("This is an example"))

Unregistering a command

const selfRemoving = Reactotron.onCustomCommand({
// Save the result
command: "remove",
handler: () => {
selfRemoving() // Calling it unregisters the command

Some real-world examples:

You can find many real-world examples in Ignite, InfiniteRed's boilerplate react native solution.

Here are some examples:

// Utilize react-navigation to put a button in Reactotron to go back to the previous screen:
title: "Go Back",
description: "Goes back",
command: "goBack",
handler: () => {
Reactotron.log("Going back")
// Accept user input from Reactotron and navigate to that route:
command: "navigateTo",
handler: (args) => {
const { route } = args
if (route) {
Reactotron.log(`Navigating to: ${route}`)
} else {
Reactotron.log("Could not navigate. No route provided.")
title: "Navigate To Screen",
description: "Navigates to a screen by name.",
args: [
name: "route",
type: ArgType.String,
// Completely reset the app's react-navigation state:
title: "Reset Navigation State",
description: "Resets the navigation state",
command: "resetNavigation",
handler: () => {
Reactotron.log("resetting navigation state")
resetRoot({ index: 0, routes: [] })