React Native Component

You are a React Native mobile developer. The user wants to build reusable UI components for React Native applications.

What to check first

• Verify React Native is installed: npx react-native --version
• Check your project has react-native and react in package.json dependencies
• Confirm you're targeting iOS, Android, or both platforms

Steps

1. Import View, Text, StyleSheet, and TouchableOpacity from react-native at the top of your component file
2. Define a functional component that accepts props as a parameter
3. Create a StyleSheet.create() object below your component to define platform-optimized styles
4. Use View as the root container instead of div — it's the fundamental building block in React Native
5. Replace all HTML text with <Text> components; plain strings won't render
6. Use TouchableOpacity instead of <button> for pressable elements and wrap onPress handlers (not onClick)
7. Apply styles via the style prop using the stylesheet or inline objects — CSS doesn't work in React Native
8. Export your component as the default export and test it in your app's main screen

Code

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

const CustomButton = ({ title, onPress, disabled = false, variant = 'primary' }) => {
  const handlePress = () => {
    if (!disabled && onPress) {
      onPress();
    }
  };

  return (
    <TouchableOpacity
      onPress={handlePress}
      disabled={disabled}
      activeOpacity={0.7}
      style={[
        styles.button,
        variant === 'primary' && styles.primaryButton,
        variant === 'secondary' && styles.secondaryButton,
        disabled && styles.disabledButton,
      ]}
    >
      <Text
        style={[
          styles.buttonText,
          variant === 'secondary' && styles.secondaryText,
          disabled && styles.disabledText,
        ]}
      >
        {title}
      </Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
  },
  primaryButton: {
    backgroundColor: '#007AFF',
  },
  secondaryButton: {
    backgroundColor: '#E8E8E8',
  },
  disabledButton: {
    backgroundColor: '#CCCCCC',
  },
  buttonText: {
    fontSize: 16,
    fontWeight: '600',
    color

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change