Detect reusable/duplicate React Native code (components, hooks, styles, utils) and suggest refactors. Ships as a CLI + Node API.
npm install react-native-reuse-finder🔍 Detect reusable/duplicate React Native code (components, hooks, styles, utils) and suggest refactors. Ships as a CLI + Node API.


- Find Type-1/2/3 clones (exact/renamed/near-miss) across RN projects
- Rank by reuse value (duplication × churn × size)
- Output actionable suggestions + extractable snippet templates
- Autofix (optional): create shared module + codemod imports
``bash`
npm install react-native-reuse-finderor
yarn add react-native-reuse-finder
`bashAnalyze current directory
npx rn-reuse-finder analyze
$3
| Option | Description | Default |
|--------|-------------|---------|
|
--types | Comma-separated snippet types | component,hook,stylesheet,utility |
| --similarity | Minimum similarity threshold (0.0-1.0) | 0.8 |
| --min-size | Minimum snippet size in characters | 100 |
| --max-results | Maximum duplicate groups to return | 50 |
| --no-churn | Disable churn analysis | false |
| --no-auto-fix | Disable auto-fix suggestions | false |
| --output | Output format (json, table, summary) | table |
| --file | Analyze specific file only | - |
| --directory | Analyze specific directory only | - |$3
`typescript
import { ReuseAnalyzer, SnippetType } from 'react-native-reuse-finder';// Create analyzer
const analyzer = new ReuseAnalyzer('./my-project', {
includeTypes: [SnippetType.COMPONENT, SnippetType.HOOK],
minSimilarity: 0.8,
minSize: 100,
maxResults: 50,
enableChurnWeighting: true,
enableAutoFix: true
});
// Analyze entire project
const result = await analyzer.analyzeProject();
console.log(
Found ${result.duplicates.length} duplicate groups);// Analyze specific file
const snippets = await analyzer.analyzeSpecificFile('./src/components/Button.tsx');
// Analyze specific directory
const snippets = await analyzer.analyzeDirectory('./src/components');
`$3
`typescript
import { analyzeProject, analyzeFile, analyzeDirectory } from 'react-native-reuse-finder';// Quick project analysis
const result = await analyzeProject('./my-project', {
includeTypes: ['component', 'hook'],
minSimilarity: 0.9
});
// Quick file analysis
const snippets = await analyzeFile('./src/components/Button.tsx', {
includeTypes: ['component']
});
// Quick directory analysis
const snippets = await analyzeDirectory('./src/components', {
includeTypes: ['component', 'stylesheet']
});
`📊 Output Format
$3
`typescript
interface AnalysisResult {
duplicates: DuplicateGroup[];
summary: {
totalFiles: number;
totalSnippets: number;
duplicateGroups: number;
estimatedSavings: number;
};
suggestions: RefactorSuggestion[];
}
`$3
`typescript
interface DuplicateGroup {
id: string;
snippets: CodeSnippet[];
similarity: number;
reuseScore: number;
suggestion: RefactorSuggestion;
}
`$3
`typescript
interface RefactorSuggestion {
type: 'extract' | 'consolidate' | 'parameterize';
description: string;
targetModule: string;
codeTemplate: string;
estimatedEffort: 'low' | 'medium' | 'high';
benefits: string[];
}
`🔧 Configuration
$3
-
component - React components (JSX returning functions)
- hook - Custom React hooks (use* functions)
- stylesheet - StyleSheet.create objects
- utility - Utility functions
- animation - Animation functions
- navigation - Navigation-related code
- api_client - API client functions
- function - General functions$3
`typescript
interface AnalysisOptions {
includeTypes: SnippetType[];
minSimilarity: number; // 0.0 to 1.0
minSize: number; // Minimum characters
maxResults: number; // Maximum duplicate groups
enableChurnWeighting: boolean; // Use git history for scoring
enableAutoFix: boolean; // Generate auto-fix suggestions
}
`🧪 Examples
$3
`typescript
// Found duplicate components with 95% similarity
const result = await analyzeProject('./my-app', {
includeTypes: ['component'],
minSimilarity: 0.9
});result.duplicates.forEach(group => {
console.log(
Component: ${group.snippets[0].type});
console.log(Similarity: ${(group.similarity * 100).toFixed(1)}%);
console.log(Duplicates: ${group.snippets.length});
console.log(Suggestion: ${group.suggestion.description});
});
`$3
`typescript
// Analyze custom hooks for duplication
const hooks = await analyzeFile('./src/hooks/useForm.ts', {
includeTypes: ['hook']
});hooks.forEach(hook => {
console.log(
Hook: ${hook.id});
console.log(Size: ${hook.size} characters);
console.log(Churn Weight: ${hook.churnWeight});
});
`$3
`typescript
// Find duplicate styles
const styles = await analyzeDirectory('./src/styles', {
includeTypes: ['stylesheet'],
minSimilarity: 0.8
});styles.forEach(style => {
console.log(
Style: ${style.id});
console.log(Content: ${style.content.substring(0, 100)}...);
});
`🚀 Advanced Features
$3
The tool analyzes git history to determine which files change frequently:
`typescript
// Enable churn analysis for better scoring
const analyzer = new ReuseAnalyzer('./my-project', {
enableChurnWeighting: true
});// Files with high churn get higher reuse scores
const result = await analyzer.analyzeProject();
`$3
`typescript
// Configure parser for specific needs
analyzer.setParserOptions({
includeJSX: true,
includeTypeScript: true,
includeFlow: false,
sourceType: 'module'
});
`$3
`typescript
// JSON output for programmatic processing
const result = await analyzer.analyzeProject();
const jsonOutput = JSON.stringify(result, null, 2);// Summary output for quick overview
const summary = result.summary;
console.log(
Files: ${summary.totalFiles}, Snippets: ${summary.totalSnippets});
`🤝 Contributing
1. Fork the repository
2. Create a feature branch:
git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request$3
`bash
git clone https://github.com/yourusername/react-native-reuse-finder.git
cd react-native-reuse-finder
npm install
npm run build
npm test
``Made with ❤️ by Anurag for the React Native community