React Native Folder Structure Generator
A VS Code extension that generates a standardized folder structure for React Native projects. This extension helps you maintain a clean and organized codebase by creating a well-structured directory layout following React Native best practices.
Features
- Creates a complete folder structure for React Native projects
- Adds README files in each directory explaining its purpose
- Follows React Native best practices and common patterns
- Easy to use through VS Code Command Palette
Smart Component Generation
The extension provides a powerful component generation feature that helps you create React Native components with TypeScript support, tests, and styles.
How to Generate a Component
- Open the Command Palette (Cmd+Shift+P on macOS or Ctrl+Shift+P on Windows/Linux)
- Type "React Native: Generate Component" and select it
- Enter the component name when prompted (e.g., "CustomButton")
- Select the component type from the available templates:
- Button
- Card
- (More templates coming soon)
What Gets Generated
For each component, the following structure is created:
components/
└── common/
├── Button/
│ ├── Button.tsx
│ ├── Button.styles.ts
│ ├── __tests__/
│ │ └── Button.test.tsx
│ └── index.ts
├── Card/
│ ├── Card.tsx
│ ├── Card.styles.ts
│ ├── __tests__/
│ │ └── Card.test.tsx
│ └── index.ts
└── index.ts
Component Directory (ComponentName/
):
- Contains all files related to the component
- Has its own
index.ts
for clean exports
- Includes styles and tests in the same directory
Component File (ComponentName.tsx
):
- TypeScript React Native component
- Props interface
- Basic component structure
- TestID for testing
- Proper theme imports
Test File (__tests__/ComponentName.test.tsx
):
- Jest test setup
- Basic render test
- Test utilities
Styles File (ComponentName.styles.ts
):
- StyleSheet configuration
- Theme integration
- Common styling patterns
Example Generated Files
Component File
import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';
import { colors, spacing } from '../../../theme';
import { styles } from './Button.styles';
interface ButtonProps {
title: string;
onPress: () => void;
variant?: 'primary' | 'secondary' | 'outline';
size?: 'small' | 'medium' | 'large';
disabled?: boolean;
}
export const Button: React.FC<ButtonProps> = ({
title,
onPress,
variant = 'primary',
size = 'medium',
disabled = false,
}) => {
return (
<TouchableOpacity
style={[
styles.button,
styles[variant],
styles[size],
disabled && styles.disabled,
]}
onPress={onPress}
disabled={disabled}
>
<Text style={[styles.text, styles[`${variant}Text`]]}>
{title}
</Text>
</TouchableOpacity>
);
};
Component Index File
export * from './Button';
Common Components Index File
// Export all common components
export * from './Button';
export * from './Card';
// ... other components
Configuration Options
You can customize the component generation through VS Code settings:
- Open VS Code Settings (Cmd+, on macOS or Ctrl+, on Windows/Linux)
- Search for "React Native Folder Structure"
- Configure the following options:
generateTests
: Enable/disable test file generation
generateStyles
: Enable/disable style file generation
template
: Choose the default component template
Best Practices
- Use PascalCase for component names (e.g.,
CustomButton
, UserCard
)
- Keep components in the appropriate directory structure
- Write tests for all generated components
- Use the theme system for consistent styling
- Export components through the index.ts file
Generated Structure
src/
├── assets/
│ ├── images/
│ └── fonts/
├── components/
│ ├── common/
│ └── screens/
├── navigation/
├── services/
│ ├── api/
│ └── storage/
├── utils/
├── hooks/
├── store/
│ ├── actions/
│ ├── reducers/
│ └── types/
├── theme/
├── localization/
└── config/
Directory Purposes
- assets: Static assets like images, fonts, etc.
- components: Reusable React Native components
- common: Shared components used across the application
- screens: Screen-specific components
- navigation: Navigation configuration and stack navigators
- services: Services for API calls, storage, etc.
- api: API service configurations and implementations
- storage: Local storage implementations
- utils: Utility functions and helper methods
- hooks: Custom React hooks
- store: State management (Redux/Context) related files
- theme: Theme configuration (colors, typography, etc.)
- localization: Internationalization and localization files
- config: Application configuration files
Usage
- Install the extension from VS Code Marketplace
- Open your React Native project in VS Code
- Press
Cmd/Ctrl + Shift + P
to open the Command Palette
- Type "Generate React Native Folder Structure" and select the command
- The folder structure will be created in your workspace
Requirements
- Visual Studio Code 1.60.0 or higher
- A React Native project (or any JavaScript/TypeScript project)
Extension Settings
This extension doesn't require any additional settings.
Known Issues
None at the moment.
Release Notes
1.1.2
- Added smart component generation with templates
- Added configuration options for folder structure customization
- Added test file generation with Jest templates
- Added separate style file generation
- Added support for Redux and Navigation setup options
- Added Button and Card component templates with TypeScript support
- Improved error handling and user feedback
- Added output channel for better debugging
Contributing
Feel free to open issues or submit pull requests on the GitHub repository.
License
MIT