React Native Text Watcher installs statistics

React Native Text Watcher

Welcome to the React Native Text Watcher extension! This extension helps you catch a common mistake in React Native development by providing warnings when text strings are not wrapped within a component.

Features

• 📐 Accurate JSX Parsing: Precisely identifies JSX portions in your code. • ⚠️ Text Wrapping Warnings: Get warnings when you don't wrap text strings within a component. • 🛞 Custom Text Components: Supress warnings for your custom text components. • 🔍 Smart Detection: Warns you in most cases except for function calls that return strings or string variables.

| Problem | Prevention to the Problem |

| | |

| Adding Custom Text Components | Removing Custom Text Component |

| | |

| Change Severity (Warning) Type | Manual Configuration (.vscode/settings.json) |

| | |

Requirements

• A project with react-native in package.json dependencies. • The extension activates only for .tsx and .jsx files. • TypeScript Installed in your node_modules.

Extension Options

This extension contributes the following settings:

• reactNativeTextWatcher.enable: Enable/disable this extension. • react-native-text.changeSeverityType: Set the severity of the warnings: Error, Warning, Information, Hint (default: Warning). • react-native-text.manageTextComponents: An array of Component Name that you want to supress text warnings for (default: Text).

Known Issues

• Does not currently warn for function calls that return strings or string variables.

Release Notes

1.0.0

• Initial release of React Native Text Watcher. • Improved JSX parsing accuracy. • Enhanced warning messages.

1.0.1

• Specify custom text components to supress text warnings for. • Change severity type of warnings ie. Error, Warning, Information, Hint.

1.0.2

• Fix: Issue with unwanted warn on conditional text string. • Excluded unnecessary files from the extension (Reduced Size).

1.0.3

• NEW: This version only works if you have TypeScript installed as devDependencies. • Works on mono-repos, the extension will activate when for the first project folder that has react-native and typescript. • Super Lightweight, Extension Size is not 782KiB Only, Reduced by 86.83% 🚀

Future Plans

• 🚀 Function Call Detection: Introduce the ability to warn on function calls that return strings or string variables.

Personal Note

I am fairly new to React Native. I somehow managed to build a music app using React Native for my final year project. During that period, I often encountered this error: "Text strings must be rendered within a component."

It wasn't a serious error, but it was definitely annoying when I forgot to wrap a text with the component. That error screen with the red header was a constant source of frustration.

So, I came up with this small VS Code extension, React Native Text Watcher. It's not complete but offers a good enough solution to give you warnings in obvious cases.

I'm open to collaboration! If you have any ideas or improvements, feel free to contribute.

Enjoy! 🎉