React Native Academy · Ders

StyleSheet.create ve Satır İçi Stiller

Performans için StyleSheet.create kullanarak stil nesneleri oluşturun, bunları satır içi stillerle karşılaştırın ve diziler kullanarak birden çok stil uygulayın.

StyleSheet.create ve Satır İçi Stiller, CoddyKit'te ücretsiz bir React Native Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Native Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Native Academy kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

How React Native Styles Work

React Native styling is inspired by CSS but uses JavaScript objects instead of CSS files. Property names are camelCase (backgroundColor not background-color), and values for lengths and sizes are numbers representing device-independent pixels — not strings like '16px'. There are no selectors, cascading, or inheritance (except font styles inside nested Text components). Each component is styled individually through a style prop, giving you explicit control over every element's appearance.

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

export default function StyledBox() {
  return (
    // Inline style object directly
    <View style={{
      width: 120,
      height: 120,
      backgroundColor: '#4f86f7',
      borderRadius: 16,
      padding: 16,
    }}>
      <Text style={{ color: '#fff', fontSize: 18, fontWeight: 'bold' }}>
        Hello!
      </Text>
    </View>
  );
}

StyleSheet.create() for Performance

StyleSheet.create() takes an object of named style definitions and returns a processed version. Under the hood, React Native registers these styles with the native layer and sends only an integer ID during subsequent renders, rather than the full style object. This reduces the JavaScript-to-native communication overhead — especially noticeable in lists that re-render frequently. It also runs style validation in development mode, warning you if you use unsupported properties. Always prefer StyleSheet.create over inline objects for styles that don't change.

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

export default function Card() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Card Title</Text>
      <Text style={styles.body}>Card description text goes here.</Text>
    </View>
  );
}

// Defined once, referenced by name
const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    elevation: 3,
  },
  title: { fontSize: 18, fontWeight: 'bold', color: '#222' },
  body: { fontSize: 14, color: '#666', marginTop: 6, lineHeight: 20 },
});

Inline Styles: When to Use Them

Inline styles are written directly in the JSX as a JavaScript object literal: style={{ color: 'red' }}. They are recreated on every render, which is slightly less efficient than StyleSheet.create styles. However, inline styles are appropriate when the style value is dynamic — computed from props or state at runtime. For example, setting backgroundColor based on a user's chosen theme color or computing width from the current component state. In these cases, StyleSheet.create cannot help because the value changes at runtime.

import { View } from 'react-native';

// Inline style: backgroundColor is dynamic (from props)
function ColoredBox({ color, size }) {
  return (
    <View
      style={{
        backgroundColor: color,  // dynamic — must be inline
        width: size,             // dynamic — must be inline
        height: size,
        borderRadius: size / 2,
      }}
    />
  );
}

// Usage:
<ColoredBox color='#ff6b6b' size={80} />
<ColoredBox color='#4f86f7' size={40} />

Combining Static and Dynamic Styles

React Native's style prop accepts an array of style objects. Later styles in the array override earlier ones for the same property (like specificity in CSS, but simpler). This lets you combine a base style from StyleSheet.create with dynamic inline overrides: style={[styles.box, { backgroundColor: color }]}. The static styles are efficient (only sent as IDs), while the dynamic inline object is added on top. Falsy values in the array (null, undefined, false) are safely ignored.

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

export default function Button({ label, primary, style }) {
  return (
    <TouchableOpacity
      style={[
        styles.base,           // always applied
        primary && styles.primary,  // conditional style
        style,                 // caller's overrides
      ]}
    >
      <Text style={[styles.text, primary && styles.primaryText]}>
        {label}
      </Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  base: { paddingVertical: 12, paddingHorizontal: 24, borderRadius: 24, borderWidth: 1.5, borderColor: '#4f86f7', alignItems: 'center' },
  primary: { backgroundColor: '#4f86f7', borderColor: '#4f86f7' },
  text: { color: '#4f86f7', fontWeight: '600', fontSize: 16 },
  primaryText: { color: '#fff' },
});

Common StyleSheet Properties

React Native supports a well-defined subset of CSS properties. The most frequently used ones are: layout (flex, flexDirection, justifyContent, alignItems, padding, margin, width, height), visual (backgroundColor, borderRadius, opacity), and text (fontSize, fontWeight, color, lineHeight). Properties like grid, float, display: grid, z-index (use zIndex), and CSS animations are NOT supported in React Native — use Flexbox and the Animated API instead.

const styles = StyleSheet.create({
  // Layout
  container: { flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' },
  // Box model
  box: { width: 100, height: 100, margin: 8, padding: 12 },
  // Visual
  card: { backgroundColor: '#fff', borderRadius: 12, opacity: 0.9, zIndex: 10 },
  // Borders
  bordered: { borderWidth: 1, borderColor: '#ccc', borderStyle: 'solid' },
  // Text styles (only valid on Text component)
  heading: { fontSize: 24, fontWeight: '700', color: '#333', letterSpacing: 0.5 },
});

Percentage Values in Styles

React Native supports percentage strings for width, height, and positioning properties like top, left. A width of '100%' fills the parent, '50%' takes half, and so on. Percentages are resolved relative to the parent container's size, not the screen. This is useful for full-width cards (width: '100%') and two-column layouts (width: '48%'). For the screen width itself, use the Dimensions API or the useWindowDimensions hook for responsive, dynamic values.

import { View, useWindowDimensions, StyleSheet } from 'react-native';

export default function HalfBox() {
  const { width } = useWindowDimensions();
  const cardWidth = (width - 48) / 2; // two columns with gutters

  return (
    <View style={styles.row}>
      <View style={[styles.card, { width: cardWidth }]} />
      <View style={[styles.card, { width: cardWidth }]} />
    </View>
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: 'row', gap: 16, paddingHorizontal: 16 },
  card: { height: 100, backgroundColor: '#4f86f7', borderRadius: 12 },
});

StyleSheet.flatten and Style Merging

StyleSheet.flatten() accepts a style array and returns a single merged object. This is useful when you need to read the final computed style value programmatically — for example, reading the backgroundColor from a style array to pass it to an animation. It resolves array styles the same way React Native does: later values override earlier ones. Logging StyleSheet.flatten(styles) is also helpful during debugging to see exactly what styles a component will receive after all merging is done.

import { StyleSheet } from 'react-native';

const base = StyleSheet.create({
  box: { width: 100, height: 100, backgroundColor: 'blue' },
});

const override = { backgroundColor: 'red', borderRadius: 12 };

// Merge and inspect the final style
const final = StyleSheet.flatten([base.box, override]);
console.log(final);
// {
//   width: 100,
//   height: 100,
//   backgroundColor: 'red',   ← override wins
//   borderRadius: 12           ← new property added
// }

StyleSheet.hairlineWidth

StyleSheet.hairlineWidth returns the thinnest possible line width on the current device — typically 0.5 on retina displays and 1 on lower-density screens. Use it for thin dividers and borders that look crisp at any pixel density. It is preferable to hardcoding borderWidth: 0.5 because hairlineWidth adapts to the screen's pixel ratio automatically. This is a small but noticeable polish detail on high-density screens like modern iPhone and Pixel devices.

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

// A 1-physical-pixel divider line
export default function Divider() {
  return <View style={styles.divider} />;
}

const styles = StyleSheet.create({
  divider: {
    height: StyleSheet.hairlineWidth,  // thinnest possible
    backgroundColor: '#e0e0e0',
    marginVertical: 8,
  },
});

// StyleSheet.hairlineWidth value:
// Retina (2× pixel ratio) → 0.5
// 3× pixel ratio → 0.333...
// 1× screen → 1

Colocating Styles with Components

A common convention is to define styles at the bottom of the same file as the component that uses them. This keeps related code together and makes it easy to understand a component's full visual specification without opening another file. For very large components with many style sections, you might split styles into a separate ComponentName.styles.ts file. Avoid creating a single global styles.js file for the whole app — it grows unmanageable and makes it hard to know which styles are used where.

// ProfileCard.tsx
import { View, Text, StyleSheet } from 'react-native';

export default function ProfileCard({ name, bio }) {
  return (
    <View style={styles.card}>
      <Text style={styles.name}>{name}</Text>
      <Text style={styles.bio}>{bio}</Text>
    </View>
  );
}

// Styles defined at the bottom of the same file
const styles = StyleSheet.create({
  card: { backgroundColor: '#fff', borderRadius: 16, padding: 20 },
  name: { fontSize: 20, fontWeight: 'bold', color: '#111' },
  bio: { fontSize: 14, color: '#555', marginTop: 6, lineHeight: 20 },
});

Dark Mode-Aware Styles

To support dark mode, use the useColorScheme hook to detect the current scheme ('light' or 'dark'), then select different color values for each mode. Combine this with your style array: the base styles hold layout and shape, while a dynamic color object applies theme-specific colors. A more scalable approach is a ThemeContext that provides color tokens throughout the app, but useColorScheme is the quickest way to get dark mode working without any extra libraries.

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

export default function ThemedCard({ title }) {
  const scheme = useColorScheme(); // 'light' | 'dark'
  const colors = scheme === 'dark'
    ? { bg: '#1c1c1e', text: '#f0f0f0', border: '#3a3a3c' }
    : { bg: '#ffffff', text: '#111111', border: '#e0e0e0' };

  return (
    <View style={[styles.card, { backgroundColor: colors.bg, borderColor: colors.border }]}>
      <Text style={[styles.title, { color: colors.text }]}>{title}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: { borderWidth: 1, borderRadius: 12, padding: 16, marginBottom: 12 },
  title: { fontSize: 18, fontWeight: '600' },
});

Styled Components in React Native

If you prefer a CSS-in-JS syntax, styled-components works with React Native. Install it with npm install styled-components and use the styled.View, styled.Text factories. Styled-components generate optimized StyleSheet entries under the hood while letting you write CSS-like syntax with template literals (use single quotes inside, not backticks with interpolation for static styles). It also supports props-based dynamic styling with full TypeScript support. Many teams prefer it for the familiar CSS authoring experience.

import styled from 'styled-components/native';

// Define styled components
const Card = styled.View`
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  elevation: 3;
`;

const Title = styled.Text`
  font-size: 18px;
  font-weight: bold;
  color: #222;
`;

export default function StyledCard({ title }) {
  return (
    <Card>
      <Title>{title}</Title>
    </Card>
  );
}

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

In this lesson you learned: StyleSheet.create is more efficient than inline objects because styles are sent as IDs not full objects, style arrays merge multiple style objects with later entries taking precedence, and useColorScheme enables dark mode-aware styling. Next up we explore Flexbox direction, justifyContent, and alignItems for full layout control.

Sıkça Sorulan Sorular

“StyleSheet.create ve Satır İçi Stiller” dersi ücretsiz mi?

Evet — “StyleSheet.create ve Satır İçi Stiller” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Native Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Native Academy kursu toplamda 4 dersten oluşur.

“StyleSheet.create ve Satır İçi Stiller” dersinde ne öğreneceğim?

Performans için StyleSheet.create kullanarak stil nesneleri oluşturun, bunları satır içi stillerle karşılaştırın ve diziler kullanarak birden çok stil uygulayın. React Native Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Native Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Native Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“StyleSheet.create ve Satır İçi Stiller” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Native Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Native Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

StyleSheet.create ve Satır İçi Stiller
Flexbox Yönü, JustifyContent, AlignItems
flex, flexGrow ve Duyarlı Boyutlandırma
Duyarlı Kart Izgarası Oluşturma

← React Native Academy Sayfasına Dön