원클릭으로 Manus에서 모든 스킬 실행

시작하기

react-native-styling

스타0

포크0

업데이트2026년 5월 30일 12:37

Senior-level styling guidelines for React Native using custom theme and StyleSheet.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

Volontariapp

Volontariapp/nativapp

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

🎨 React Native Styling Guidelines

Follow these rules strictly when styling components.

🚫 No Inline Styles

Never use inline styles unless it's strictly necessary for dynamic values (e.g., animations or dynamically computed dimensions).

// ❌ BAD
<View style={{ marginTop: 10, backgroundColor: 'red' }} />

// ✅ GOOD
<View style={styles.container} />

📐 The Design System (Theme)

You must ALWAYS use the shared theme object for spacing, colors, typography, and border radius.

import { theme } from '@/shared/themes/theme';

const styles = StyleSheet.create({
  container: {
    padding: theme.spacing.md,
    backgroundColor: theme.colors.background,
    borderRadius: theme.radius.lg,
  },
});

Do not hardcode hex codes or pixel padding (except for 1px borders sometimes). Always search the theme object first.

🔤 Typography

Do NOT use the bare <Text> component from react-native. Always use the custom AppText component (located in src/components/typography/AppText) which applies correct default fonts, colors, and accessibility traits.

🧩 Component Composition

When creating custom UI components (like buttons, chips, inputs):

Pass style props: Always allow the parent to pass an overriding style prop.
Use array syntax: Combine default styles with passed styles using array syntax: style={[styles.base, style]}.
Pressable over TouchableOpacity: Use Pressable for buttons to handle complex state (e.g., pressed, hovered) more elegantly.

[!TIP] Use SafeAreaView or useSafeAreaInsets from react-native-safe-area-context for screens, not manual padding, to handle notches and home indicators gracefully.

이 저장소의 다른 Skills

같은 저장소

react-native-keyboard-handling

Volontariapp/nativapp

Mandatory rules and components for handling keyboard avoidance smoothly in the React Native app.

2026-06-010

react-native-protobuf-dates

Volontariapp/nativapp

How to correctly handle and format protobuf Timestamp dates sent by the API Gateway to prevent "Invalid Date" issues.

2026-05-310

react-native-architecture

Volontariapp/nativapp

Senior-level React Native architecture and patterns for Expo 54 apps.

2026-05-300

react-native-clean-code-standards

Volontariapp/nativapp

Strict coding standards, naming conventions, file size limits, and typing rules.

2026-05-300

react-native-data-fetching-api

Volontariapp/nativapp

Guidelines for managing server state, queries, and API clients in React Native.

2026-05-300

react-native-forms-validation

Volontariapp/nativapp

Best practices for implementing forms with React Hook Form and Zod.

2026-05-300

name	React Native Styling
description	Senior-level styling guidelines for React Native using custom theme and StyleSheet.

🎨 React Native Styling Guidelines

Follow these rules strictly when styling components.

🚫 No Inline Styles

Never use inline styles unless it's strictly necessary for dynamic values (e.g., animations or dynamically computed dimensions).

// ❌ BAD
<View style={{ marginTop: 10, backgroundColor: 'red' }} />

// ✅ GOOD
<View style={styles.container} />

📐 The Design System (Theme)

You must ALWAYS use the shared theme object for spacing, colors, typography, and border radius.

import { theme } from '@/shared/themes/theme';

const styles = StyleSheet.create({
  container: {
    padding: theme.spacing.md,
    backgroundColor: theme.colors.background,
    borderRadius: theme.radius.lg,
  },
});

Do not hardcode hex codes or pixel padding (except for 1px borders sometimes). Always search the theme object first.

🔤 Typography

🧩 Component Composition

When creating custom UI components (like buttons, chips, inputs):

Pass style props: Always allow the parent to pass an overriding style prop.
Use array syntax: Combine default styles with passed styles using array syntax: style={[styles.base, style]}.
Pressable over TouchableOpacity: Use Pressable for buttons to handle complex state (e.g., pressed, hovered) more elegantly.

[!TIP] Use SafeAreaView or useSafeAreaInsets from react-native-safe-area-context for screens, not manual padding, to handle notches and home indicators gracefully.