ReactNative StyleSheet Lens

Shows reference counts for React Native StyleSheet definitions directly in your code using CodeLens.

Features

• Reference Count Display: Shows how many times each style is referenced in your code
• Jump to References: Click on the CodeLens to see all reference locations
• Real-time Updates: Updates automatically when you save files
• Multi-language Support: Supports Japanese and English

Usage

1. Open a TypeScript or JavaScript file containing StyleSheet.create()
2. Reference counts will appear above each style definition
3. Click on the reference count to view all locations where the style is used
4. Select a location to jump to that reference

Example

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  // 3 references  ← CodeLens appears here
  container: {
    flex: 1,
    padding: 20,
  },
  // 0 references  ← Easily identify unused styles
  unused: {
    opacity: 0.5,
  },
});

Supported Patterns

StyleSheet Definitions

• const styles = StyleSheet.create({ ... })
• export const styles = StyleSheet.create({ ... })
• Named exports like buttonStyles, layoutStyles

Style References

• Direct references: <View style={styles.container} />
• Array syntax: <View style={[styles.container, styles.padding]} />
• Conditional styles: <View style={[styles.base, active && styles.active]} />

Requirements

• VS Code 1.85.0 or higher
• TypeScript or JavaScript files (.ts, .tsx, .js, .jsx)

Extension Settings

Currently, this extension does not require any configuration.

Known Issues

• Only detects references within the same file (cross-file detection coming soon)
• Dynamic property access not supported (e.g., styles[styleName])

Release Notes

1.0.0

Initial release with basic functionality:

• StyleSheet.create() detection
• Reference counting within the same file
• CodeLens display
• Jump to reference locations
• Multi-language support (English/Japanese)