React Native Snippet Shortcut

A VS Code extension that provides quick access to 33 common React Native code snippets directly from the right-click context menu. Speed up your React Native development by inserting frequently-used code patterns with just a few clicks!

✨ Features

• 33 Ready-to-Use Snippets covering components, hooks, navigation, storage, and more
• Context Menu Integration - Right-click anywhere in your code to access snippets
• Smart Component Naming - Automatically uses your filename for component names
• TypeScript Support - All snippets include proper TypeScript types
• Organized Categories - Snippets grouped logically for easy navigation
• Zero Configuration - Works out of the box

🚀 Quick Start

1. Install the extension
2. Open any .js, .jsx, .ts, or .tsx file
3. Right-click anywhere in the editor
4. Select "React Native Snippets" from the context menu
5. Choose your desired snippet

📦 Available Snippets

Component Templates

• Functional Component - Complete TypeScript component with props and styles

React Hooks (7 snippets)

• useState - State management
• useEffect - Side effects with cleanup
• useRef - Refs for DOM access or mutable values
• useCallback - Memoized callbacks
• useMemo - Memoized values
• useContext - Context consumer
• Custom Hook - Template for custom hooks

Basic Components

• View - Container component
• Text - Text component
• Image - Image with source and resize mode

Container Components

• ScrollView - Scrollable container
• SafeAreaView - Safe area wrapper
• KeyboardAvoidingView - Keyboard-aware container
• Modal - Modal dialog with controls

List Components

• FlatList - Optimized list for large data
• SectionList - Sectioned list with headers

Touchable Components

• TouchableOpacity - Button with opacity feedback
• TouchableHighlight - Button with highlight feedback
• Pressable - Modern pressable with state

Input Components

• TextInput - Text input field
• Switch - Toggle switch

Feedback Components

• ActivityIndicator - Loading spinner
• Alert Dialog - Native alert with buttons

Navigation

• Navigation Setup - React Navigation stack navigator

Storage

• AsyncStorage Get - Retrieve data from storage
• AsyncStorage Set - Store data in storage

API

• Fetch API - Fetch data with error handling

Animation

• Animated Value - Animated value with timing

Utilities

• Dimensions - Get screen dimensions
• Platform Check - Platform-specific code
• StyleSheet - StyleSheet.create template

💡 Usage Examples

Insert a Functional Component

1. Create a new file MyComponent.tsx
2. Right-click in the file
3. Select "React Native Snippets" → "Insert Functional Component"
4. A complete component template is inserted using "MyComponent" as the name

Insert useState Hook

1. Right-click where you want to add state
2. Select "React Native Snippets" → "Insert useState Hook"
3. const [state, setState] = useState(); is inserted at cursor position

Insert Custom Hook

1. Right-click where you want to add the hook
2. Select "React Native Snippets" → "Insert Custom Hook"
3. Enter the hook name (e.g., "FetchData")
4. Complete custom hook template is inserted

🎯 Why Use This Extension?

• Save Time - No more typing boilerplate code from scratch
• Consistency - All snippets follow React Native best practices
• Discoverability - Browse available snippets without memorizing shortcuts
• Error-Free - Properly formatted and syntactically correct code every time
• Learn Faster - See examples of proper React Native patterns

📋 Requirements

• VS Code 1.105.0 or higher
• React Native project (optional dependencies below)

Optional Dependencies

Some snippets work best with these packages installed in your project:

• Navigation snippets: @react-navigation/native and @react-navigation/native-stack
• Storage snippets: @react-native-async-storage/async-storage

These are not required for the extension to work, but you'll need them to use those specific snippets in your project.

🔧 Extension Settings

This extension works out of the box with no configuration needed. The snippets are automatically available in the context menu for JavaScript and TypeScript files.

📝 Snippet Categories

Snippets are organized in the context menu by category:

1. Templates - Component templates
2. Hooks - React hooks
3. Styles - StyleSheet
4. Basic - View, Text, Image
5. Containers - ScrollView, SafeAreaView, Modal, etc.
6. Lists - FlatList, SectionList
7. Touchables - Buttons and pressable components
8. Inputs - TextInput, Switch
9. Feedback - Loading and alerts
10. Navigation - React Navigation
11. Storage - AsyncStorage
12. API - Fetch methods
13. Animation - Animated API
14. Utils - Platform, Dimensions

🎨 Example Snippets

Functional Component

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

interface MyComponentProps {
  // Define your props here
}

export const MyComponent = ({}: MyComponentProps) => {
  return (
    <View style={styles.container}>
      <Text>MyComponent</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

FlatList

<FlatList
  data={data}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => (
    <View>
      <Text>{item.name}</Text>
    </View>
  )}
/>

Fetch API

const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

🤝 Contributing

Found a bug or have a suggestion? Please open an issue on GitHub!

Want to add more snippets? Pull requests are welcome!

📄 License

[Add your license here]

🔗 Links

• Full Snippet Reference
• Testing Guide
• Changelog

⭐ Show Your Support

If this extension helps you develop React Native apps faster, please consider:

• ⭐ Starring the repository
• 📝 Writing a review
• 🐛 Reporting issues
• 💡 Suggesting new snippets

📝 Release Notes

0.0.1

Initial release with 33 React Native snippets:

• Component templates
• React hooks (useState, useEffect, useRef, useCallback, useMemo, useContext, custom hooks)
• Core components (View, Text, Image, ScrollView, FlatList, etc.)
• Touchable components (TouchableOpacity, Pressable, etc.)
• Input components (TextInput, Switch)
• Navigation setup
• AsyncStorage helpers
• Fetch API template
• Animation helpers
• Utility functions

Enjoy faster React Native development! 🚀