DOCSEARCHbyAlgolia
Submit Docs

Reactotron Documentation

website·Indexed 38 days ago

https://docs.infinite.red

A powerful desktop app for finding bugs in React and React Native apps. Includes a plugin system for tracking AsyncStorage, Redux, MMKV, networking, and global errors, as well as support for MobX State Tree and Storybook.

Tokens
62.8K
Snippets
393
Records
499
Agent score
66%

What's inside Reactotron

  1. Overview of Reactotron debugger capabilities

    Reactotron is an open-source desktop debugger for React and React Native applications. It is installed as a development dependency to ensure it does not increase the production build size. It allows developers to monitor application state, network requests, and performance metrics regardless of project scale.

    Key capabilities include:

    • State Management: View application state, subscribe to specific state slices, and hot-swap state using Redux or mobx-state-tree.
    • Network & Logging: Monitor API requests/responses and display logs similar to console.log.
    • Error Tracking: Track global errors with source-mapped stack traces, including support for saga stack traces.
    • Performance: Perform quick performance benchmarks.
    • React Native Specifics: Track Async Storage and show image overlays.
    • Action Dispatching: Manually dispatch actions to the application.
    • Extensibility: Extend functionality via a plugin system.

  2. Overview of react-native-mlkit-face-detection

    The react-native-mlkit-face-detection module provides React Native APIs for Google's ML Kit Native Modules (Swift and Kotlin). It allows developers to detect faces in images, identify key facial features, and obtain face contours in real-time. Note that this API is designed for face detection and feature analysis, not for individual person recognition.

  3. Overview of Ignite CLI architectural opinions

    Ignite provides a highly opinionated framework for React Native applications, prescribing specific structures, dependencies, and layouts to ensure consistency and best practices. For customizations or features that fall outside the default Ignite application scope, developers should refer to the Ignite Cookbook for implementation recipes.
    Visit the Ignite Cookbook for recipes: https://ignitecookbook.com/

  4. Overview of react-native-mlkit for Expo

    react-native-mlkit is a native module for Expo and React Native that provides an interface to use the Google MLKit library. It is designed to allow developers to integrate machine learning capabilities into their mobile applications.

  5. Overview of Ignite Text Component

    The Ignite Text component is an enhanced version of the React Native Text component. It provides built-in support for internationalization (i18n) and a system of customizable style presets to ensure consistent typography (fonts, weights, and sizes) across an application.

  7. Overview of the ListItem component

    The ListItem component is used to display a single item in a list. It is highly flexible and can be used for simple text displays or complex components containing multiple actionable and custom-styled elements. Because it is interactable, it wraps a TouchableOpacity component and accepts all valid TouchableOpacity props.

  9. Use the EmptyState component to display empty data states

    The EmptyState component is a container used when there is no data to display (e.g., after an API call returns no results). It can optionally include an image, a heading, descriptive content, and an interactive button.
    <EmptyState
  preset="generic"
  style={{ padding: 10 }}
  imageSource={require("@assets/images/sad-face.png")}
  imageStyle={{ height: 400, width: 400 }}
  ImageProps={{ resizeMode: "contain" }}
  heading="EmptyState Heading"
  headingStyle={{ color: "#a511dc" }}
  HeadingTextProps={{ weight: "bold" }}
  content="EmptyState Content"
  contentStyle={{ color: "#a511dc" }}
  ContentTextProps={{ weight: "light" }}
  button="Press here"
  buttonOnPress={handleButtonPress}
/>

  10. Understand the Gluegun Toolbox object

    The toolbox object (also referred to as the 'Context') is passed to the run function of Gluegun commands. It provides a collection of utility 'drawers' for common CLI tasks, many of which wrap popular third-party libraries.
    module.exports = {
  name: 'dostuff',
  alias: 'd',
  run: async function (toolbox) {
    // Access tools via the toolbox object
    toolbox.print.info(toolbox.meta.version());

    // Or use destructuring
    const { 
      print: { info }, 
      meta: { version } 
    } = toolbox;
    info(version());
  },
}

  12. Understand the Ignite boilerplate project structure

    Ignite provides an opinionated project structure to organize React Native code. The majority of application logic resides in the /app directory, while native configurations and tool settings reside in the root directory.
    your-project
├── .maestro
├── android
├── app
│   ├── components
│   ├── config
│   ├── devtools
│   ├── i18n
│   ├── context
│   ├── navigators
│   ├── screens
│   ├── services
│   ├── theme
│   ├── utils
│   ├── app.tsx
├── assets
├── ignite
│   └── templates
├── ios
├── test
│   ├── i18n.test.ts
│   ├── mockFile.ts
│   ├── setup.ts
│   ├── test-tsconfig.json
├── app.config.ts
├── app.json
├── index.tsx
├── eas.json
├── package.json
└── README.md