🚀 React Native Custom Snippets

⚡ Boost your React Native development speed with ready-to-use, production-friendly code snippets.

---

🌐 Marketplace

🔗 https://marketplace.visualstudio.com/items?itemName=JatinBhuva.react-native-custom-snippets

---

✨ Overview

React Native Custom Snippets is a VS Code extension that provides a collection of reusable and commonly used React Native code snippets.

💡 Instead of writing repetitive boilerplate code, simply type a shortcut and generate complete, structured components instantly.

---

🎯 Why Use This?

• ⏱️ Saves development time
• ♻️ Eliminates repetitive boilerplate code
• 📦 Improves consistency across projects
• 🚀 Speeds up UI development
• 🧠 Reduces mental overhead

👉 Example: Typing rnflatlist generates a fully structured FlatList setup with renderItem, keyExtractor, and more.

---

🧩 Supported Languages

• TypeScript (.ts, .tsx)
• JavaScript (.js, .jsx)

---

⚡ Snippet Categories

📱 Core Components

rnview, rntext, rnimage, rnbutton, rnmodal, rnstatusbar

📋 Lists & Layout

rnflatlist, rnsectionlist, rnscrollview, rnvertulizedlist

🎯 User Interaction

rnpressable, rntouchableopacity, rntouchablehighlight, rntouchablewithoutfeedback

⚙️ Hooks & Utilities

rnuseeffect, rnstatevariable, rnlog, rnalert

📐 Layout & Dimensions

rnwindowsize, rnscreensize, rnstylesheet

🔌 Native Modules

rnlinking, rnkeyboard, rnshare, rnappstate, rnpermissionsandroid, rnbackhandler

---

📌 Popular Snippets

🔹 rnfunction – Functional Component

import React from 'react';
import { View } from 'react-native';

const App = () => {
  return <View />;
};

export default App;

---

🔹 rnflatlist – FlatList Template

const renderItem = ({ item }) => <View />;

<FlatList
  data={DATA}
  renderItem={renderItem}
  keyExtractor={(item) => item.id}
/>

---

🔹 rnuseeffect

useEffect(() => {
}, []);

---

🔹 rnstatevariable

const [state, setState] = useState();

---

📚 Full Snippet List

Snippet	Description
rnfunction	Functional component
rnflatlist	FlatList setup
rnimage	Image component
rnmodal	Modal component
rnpressable	Pressable variations
rnscrollview	ScrollView
rnsectionlist	SectionList
rntextinput	TextInput
rnstylesheet	StyleSheet
rnuseeffect	useEffect hook
rnstatevariable	useState
rnlog	console.log
rnalert	Alert
rnwindowsize	Window dimensions
rnscreensize	Screen dimensions
rnlinking	Linking API
rnkeyboard	Keyboard API
rnshare	Share API
rnappstate	AppState
rnpermissionsandroid	Permissions
rnbackhandler	BackHandler

---

🧠 Advanced Snippets Examples

🔹 AppState

const [appState, setAppState] = useState(AppState.currentState);

---

🔹 Linking

Linking.openURL('https://example.com');

---

🔹 Share API

await Share.share({ message: 'Check this out!' });

---

🤝 Contributing

Have an idea for a new snippet?

👉 Feel free to contribute or suggest improvements via GitHub discussions or issues.

---

⭐ Support

If this extension improves your workflow:

👉 Give it a star ⭐ on Marketplace 👉 Share it with other developers

---

📬 Feedback

Have suggestions or need custom snippets?

👉 Reach out via Q&A or GitHub

---

💡 Built to simplify React Native development and boost productivity.