Skip to content
| Marketplace
Sign in
Visual Studio Code>Linters>React Native Text WatcherNew to Visual Studio Code? Get it now.
React Native Text Watcher

React Native Text Watcher

supSugam

|
216,021 installs
| (3) | Free
Detects and Warns you unwrapped text strings in React Native projects.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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 <Text> component.


logo

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 <Text> 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
logo

Adding Custom Text Components Removing Custom Text Component
rn-text-watcher rn-text-watcher
Change Severity (Warning) Type Manual Configuration (.vscode/settings.json)
rn-text-watcher rn-text-watcher

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 <Text> component."

It wasn't a serious error, but it was definitely annoying when I forgot to wrap a text with the <Text> 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! 🎉

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft