React Native Snippets

Acode Plugin — Automatically provides autocomplete snippets for React Native components in jsx/tsx files.

🚀 Features

• Snippet autocomplete
• Tab-stop supported snippet expansion (${1:name} format)
• File extension–based snippet filtering
• Basic Components
• User Interface Components
• List Views
• Css Styles
• Android-specific Components
• iOS-specific Components
• API snippets
• Expo Import & Components autocomplete

📂 Supported File Types

• .jsx
• .tsx
• .js
• .ts

📖 Usage

1. Install the plugin in Acode.
2. Open a JSX, TSX, JS, or TS file.
3. Start with a pre-made template using the rnfe command.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const Component = () => {
  return (
    <View style={styles.container}>
      <Text>Component</Text>
    </View>
  );
};

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

export default Component;

4. Type a snippet prefix (e.g.: useState, text, view).
5. Select a suggestion from the autocomplete list.
6. Use Tab to navigate between placeholder fields.

Expo Autocomplete (Import & Components)

---

• When you start typing Import Document Picker it will appear in a list of suggestions, and pressing Enter will autocomplete it, as shown in the example below.

import * as DocumentPicker from 'expo-document-picker 

• When you start typing DocumentPicker.getDocument, it will appear in the suggestion list, and pressing Enter will autocomplete it as shown in the example below.

const pickDocument = async () => {
  const result = await DocumentPicker.getDocumentAsync({
    type: '*/*', // e.g.: 'application/pdf'
    copyToCacheDirectory: true,
  });

  if (result.type === 'success') {
    console.log(result.uri);
  }
}; 

• And much more...

🐛 Bug Reporting and Contribution

• You can report any bugs you encounter or new feature requests via the GitHub repository (from the Issues tab).

• If you think there are any missing components, please let us know so we can add them.

• If you would like to contribute code, feel free to submit a Pull Request (PR)!

GitHub Issues =>

🧑‍💻 Author

🌟 Star on GitHub

If you find the React Native Snippets plugin useful, consider giving it a star rating on GitHub.

It's a simple way to show your appreciation and help others discover the project. Whether through code or a simple star rating, help make the React Native Snippets plugin better for the entire community.

License

This project is licensed under the MIT License - see the LICENSE file for details.

❤️ Thank you for your support!