react-native-debug-on-the-fly

Tool created to assist in debugging react native applications

Installation

npm install react-native-debug-on-the-fly

Usage

Add the DOTF provider on top level of your app

import { DOTFProvider } from 'react-native-debug-on-the-fly';


//...
    <DOTFProvider enabled>
      <App />
    </DOTFProvider>
//...
}

To send logs use the pushLog function

import * as React from 'react';
import { StyleSheet, View, Text, Button } from 'react-native';
import { useDOTF } from 'react-native-debug-on-the-fly';

const Content = () => {
  const { pushLog, clear, logs } = useDOTF();
  return (
    <View style={styles.container}>
      <Text style={styles.title}>My app</Text>
      <Button
        title="Send log 1"
        onPress={() =>
          pushLog(
            JSON.stringify(
              { foo: 'bar', bar: 'foo', obj: { foo: 'bar' } },
              null,
              2
            )
          )
        }
      />
      <Button
        title="Send log 2"
        onPress={() => pushLog(`log ${Math.floor(Math.random() * 100)}`)}
      />
    </View>
  );
};

Table of props

Provider

Property	Type	Description
enabled	boolean	Indicates if the tool is enabled and will receive logs. When false, the logs are not stored and the tool is not visible

Hook

Property	Type	Description
logs	{time: string, content: string}[]	List of logs
pushLog	() => void	Function that adds the log to the list
clear	() => void	Clear the log list

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library