bzbs-my-command - React Native Component Generator

A powerful CLI tool for React Native development that generates TypeScript/JavaScript components instantly with npx.

🚀 Quick Start

No installation required! Use it directly with npx:

# Generate a TypeScript button component
npx bzbs-my-command add button

# Generate a JavaScript screen component
npx bzbs-my-command add screen HomeScreen --js

# Generate component in custom folder
npx bzbs-my-command add card --path src/ui/components

# Show help
npx bzbs-my-command help

📦 Installation

You don't need to install anything! Just use npx:

npx bzbs-my-command add button

Or install globally (optional):

npm install -g bzbs-my-command
bzbs-my-command add button

📁 Project Structure

bzbs-my-command/
 ├─ index.js           # CLI entry point
 ├─ package.json       # Package configuration
 ├─ README.md          # Documentation
 └─ templates/         # Component templates (organized by language)
     ├─ typescript/    # TypeScript templates (.tsx)
     │   ├─ button.tsx
     │   ├─ card.tsx
     │   ├─ input.tsx
     │   ├─ screen.tsx
     │   └─ list.tsx
     └─ javascript/    # JavaScript templates (.jsx)
         ├─ button.jsx
         ├─ card.jsx
         ├─ input.jsx
         ├─ screen.jsx
         └─ list.jsx

🛠️ Available Commands

• bzbs-my-command add <component> [name] [options] - Add a React Native component template
• bzbs-my-command clean - Clean React Native build caches (iOS & Android)
• bzbs-my-command init [platform] - Initialize with platform-specific setup
• bzbs-my-command help - Show help message

Options for add Command

• --js - Generate JavaScript instead of TypeScript (default: TypeScript)
• --path <path> - Custom folder path (default: src/components)

Why bzbs-my-command?

✅ TypeScript First - Generate TypeScript components with proper types by default
✅ Zero Config - Works out of the box, no setup required
✅ Flexible - Support both TypeScript and JavaScript
✅ Customizable - Choose your own folder structure
✅ Production Ready - All components follow React Native best practices

Component Templates

Generate ready-to-use React Native components:

button

Customizable button with TouchableOpacity

<ButtonComponent 
  title="Click Me" 
  onPress={() => alert('Pressed!')}
  style={{ backgroundColor: 'red' }}
  textStyle={{ fontSize: 18 }}
/>

card

Card component with shadow and styling

<CardComponent title="Card Title">
  <Text>Card content goes here</Text>
</CardComponent>

input

Text input with label support

<InputComponent 
  label="Email"
  value={email}
  onChangeText={setEmail}
  placeholder="Enter your email"
  keyboardType="email-address"
/>

screen

Screen template with SafeAreaView and ScrollView

// Ready-to-use screen component with safe area and scroll

list

FlatList component with default item rendering

<ListComponent 
  data={[{title: 'Item 1'}, {title: 'Item 2'}]}
  renderItem={({item}) => <Text>{item.title}</Text>}
/>

📝 How It Works

1. The Shebang Line

#!/usr/bin/env node

This tells the system to run the file with Node.js.

2. The bin Field in package.json

{
  "bin": {
    "my-command": "./index.js"
  }
}

This maps the command name my-command to the executable file index.js.

3. Template Loading

Templates are stored as separate files in the templates/ directory:

• TypeScript templates: templates/typescript/*.tsx
• JavaScript templates: templates/javascript/*.jsx

The CLI reads these files and replaces COMPONENT_NAME with the actual component name.

4. Argument Parsing

const args = process.argv.slice(2);
const command = args[0];

This captures command-line arguments passed to your script, including flags like --js and --path.

🌐 NPM Package

This package is published on npm as bzbs-my-command.

• NPM: https://www.npmjs.com/package/bzbs-my-command
• Version: Check latest on npm
• License: ISC

Using the Package

# Use directly with npx (recommended)
npx bzbs-my-command add button

# Or install globally
npm install -g bzbs-my-command
bzbs-my-command add button

🔄 Version History

• 1.0.0 - Initial release with TypeScript/JavaScript templates
• 1.0.1 - Updated documentation and examples

🤝 Contributing

Want to add more templates or improve existing ones?

1. Fork the repository
2. Add your template files in templates/typescript/ and templates/javascript/
3. Update the availableComponents array in index.js
4. Submit a pull request

🧪 Local Development

If you want to contribute or modify:

# Clone the repo
git clone https://github.com/yourusername/bzbs-my-command.git
cd bzbs-my-command

# Link for local testing
npm link

# Test your changes
bzbs-my-command add button

# Unlink when done
npm unlink -g bzbs-my-command

💡 Usage Examples

In a React Native Project

cd my-react-native-app
npx bzbs-my-command add button
npx bzbs-my-command add screen ProfileScreen
npx bzbs-my-command clean

Generate Components

# Generate a TypeScript button component (default)
npx bzbs-my-command add button
# Creates: src/components/ButtonComponent.tsx

# Generate a JavaScript button component
npx bzbs-my-command add button --js
# Creates: src/components/ButtonComponent.jsx

# Generate a screen with custom name
npx bzbs-my-command add screen HomeScreen
# Creates: src/components/HomeScreen.tsx

# Generate a component in a custom folder
npx bzbs-my-command add card --path components
# Creates: components/CardComponent.tsx

# Generate a component with custom name and path
npx bzbs-my-command add input CustomInput --path src/ui
# Creates: src/ui/CustomInput.tsx

# Generate JavaScript component in custom folder
npx bzbs-my-command add list MyList --js --path src/components/lists
# Creates: src/components/lists/MyList.jsx

Using Generated Components

After generating a component, you can import and use it:

// In your React Native file
import ButtonComponent from './src/components/ButtonComponent';
import HomeScreen from './src/components/HomeScreen';

// Use the button
<ButtonComponent 
  title="Click Me" 
  onPress={() => console.log('Pressed!')} 
/>

With Arguments

npx bzbs-my-command init android
npx bzbs-my-command init ios

🎯 Extending the CLI

Adding New Commands

To add new commands, edit index.js and add a new case:

case "your-command":
  console.log("🎉 Running your command");
  // Your logic here
  break;

Adding New Component Templates

To add a new component template:

1. Create a TypeScript template file in templates/typescript/yourcomponent.tsx
2. Create a JavaScript template file in templates/javascript/yourcomponent.jsx
3. Use COMPONENT_NAME as a placeholder that will be replaced with the actual component name

Example TypeScript template (templates/typescript/modal.tsx):

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

interface ModalProps {
  visible: boolean;
  onClose: () => void;
  children: React.ReactNode;
}

const COMPONENT_NAME = ({ visible, onClose, children }: ModalProps) => {
  return (
    <Modal visible={visible} onRequestClose={onClose} transparent>
      <View style={styles.container}>
        <View style={styles.content}>
          {children}
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  content: {
    backgroundColor: '#FFF',
    borderRadius: 12,
    padding: 20,
    width: '80%',
  },
});

export default COMPONENT_NAME;

Then update the availableComponents array in index.js:

const availableComponents = ['button', 'card', 'input', 'screen', 'list', 'modal'];

📚 Resources

• npm CLI Documentation
• Creating Node.js CLI Tools
• Publishing npm Packages

📄 License

ISC