https://github.com/santosfrancisco/react-native-debug-on-the-fly
Tool created to assist in debugging react native applications
https://github.com/santosfrancisco/react-native-debug-on-the-fly
android app debug ios javascript logs react react-native typescript
Last synced: 3 months ago
JSON representation
Tool created to assist in debugging react native applications
- Host: GitHub
- URL: https://github.com/santosfrancisco/react-native-debug-on-the-fly
- Owner: santosfrancisco
- License: mit
- Created: 2023-03-30T18:49:31.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-30T20:32:28.000Z (over 3 years ago)
- Last Synced: 2025-10-21T22:55:31.171Z (9 months ago)
- Topics: android, app, debug, ios, javascript, logs, react, react-native, typescript
- Language: TypeScript
- Homepage:
- Size: 712 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-native-debug-on-the-fly
Tool created to assist in debugging react native applications
## Installation
```sh
npm install react-native-debug-on-the-fly
```
## Usage
Add the DOTF provider on top level of your app
```js
import { DOTFProvider } from 'react-native-debug-on-the-fly';
//...
//...
}
```
To send logs use the `pushLog` function
```js
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 (
My app
pushLog(
JSON.stringify(
{ foo: 'bar', bar: 'foo', obj: { foo: 'bar' } },
null,
2
)
)
}
/>
pushLog(`log ${Math.floor(Math.random() * 100)}`)}
/>
);
};
```
## 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](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)