🛠️ Automate Your React Native Workflow with a Custom Yarn Command

⚙️ Step 1: Create the Script

At the root of your project, create a folder — scripts

and create a typescript file

touch generate-component.js

Now paste this code:

const fs = require('fs');
const path = require('path');

const componentName = process.argv[2];

if (!componentName) {
  console.error(
    '❌ Please provide a component name (e.g. yarn component [Component Name]])',
  );
  process.exit(1);
}

const basePath = path.join(
  `${__dirname}`,
  '..',
  'src',
  'components',
  componentName,
);
if (fs.existsSync(basePath)) {
  console.error(`❌ ${componentName} Component already exists!`);
  process.exit(1);
}

fs.mkdirSync(basePath, { recursive: true });

// index.tsx
fs.writeFileSync(
  path.join(basePath, 'index.tsx'),
  `import React from 'react';
import { View, Text } from 'react-native';
import styles from './styles';
import use${componentName} from './use${componentName}';

const ${componentName} = () => {
  const {} = use${componentName}();

  return (
    <View style={styles.container}>
      <Text>${componentName} Component</Text>
    </View>
  );
};

export default ${componentName};
`,
);

// styles.ts
fs.writeFileSync(
  path.join(basePath, &#x27;styles.ts&#x27;),
  `import { StyleSheet } from &#x27;react-native&#x27;;

export default StyleSheet.create({
  container: {
    padding: 16,
  },
});
`,
);

// useComponent.ts
fs.writeFileSync(
  path.join(basePath, `use${componentName}.ts`),
  `const use${componentName} = () => {
  return {};
};

export default use${componentName};`,
);

console.log(
  `✅ Component ${componentName} created in components ${componentName}`,
);

🧩 Step 2: Add a Yarn Script

Open your package.json and add this under scripts:

"scripts": {
  "component": "node scripts/generate-component.ts"
}

This lets you run yarn component ComponentName, where component is a custom alias for the component generator.

🧪 Step 3: Use It!

yarn component Headers

Boom 💥!

Your src/components/Header/ folder will be created with all the essential files.

💡 Why This Is Awesome

• 🧠 Saves mental energy
• ⏱️ Boosts speed
• 🧹 Keeps folder structure consistent
• 🧰 Easy to extend for screens, Redux modules, tests, etc.

This is the kind of small productivity booster that pays off big over time.

Instead of creating folders manually 100+ times across a project, automate it once and focus your energy on building actual features.

Let me know in the comments if you want a create-screen version with navigation next. 💬