スタイル

import { View, Text, StyleSheet } from "react-native"

export default function Card() {
  return (
    <View style={s.card}>
      <Text style={s.title}>タイトル</Text>
      <Text style={s.body}>本文</Text>
    </View>
  )
}

const s = StyleSheet.create({
  card: {
    backgroundColor: "#fff",
    padding: 16,
    borderRadius: 12,
    shadowColor: "#000",
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 2,        // Android 用
  },
  title: { fontSize: 18, fontWeight: "600", marginBottom: 4 },
  body:  { fontSize: 14, color: "#666" },
})

<View style={{ padding: 16, backgroundColor: "#fff" }} />

<View style={[s.card, isActive && s.cardActive, { marginTop: 8 }]} />

<View style={[s.base, [s.row, s.padded], extra]} />

const merged = StyleSheet.flatten([s.a, s.b])
console.log(merged.color)   // 最終的な色を取りたい時

// 配列で重ねる
<View style={[s.box, { transform: [{ scale: zoom }] }]} />

// 関数で組み立てる
const dynamicStyle = (color: string) => ({ backgroundColor: color, padding: 16 })
<View style={dynamicStyle(theme.bg)} />

// 多くの場合は useMemo で固定
const cardStyle = useMemo(
  () => [s.card, isActive && s.active, { borderColor: tint }],
  [isActive, tint],
)

// 1px の細い線（高 DPI でも 1 物理ピクセル）
<View style={{ height: StyleSheet.hairlineWidth, backgroundColor: "#888" }} />

<View style={{ flex: 1 }}> ... </View>

<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
  <Text>中央</Text>
</View>

<View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
  <Text>戻る</Text>
  <Text>タイトル</Text>
  <Text>保存</Text>
</View>

<View style={{ flexDirection: "row" }}>
  <View style={{ flex: 2, backgroundColor: "#7dd3fc" }} />
  <View style={{ flex: 1, backgroundColor: "#fbbf24" }} />
</View>

<View style={{ flexDirection: "row" }}>
  <Text>左</Text>
  <Text style={{ marginLeft: "auto" }}>右</Text>
</View>

<View style={{ flexDirection: "row", flexWrap: "wrap", gap: 12 }}>
  {items.map((item) => (
    <View key={item.id} style={{ width: "30%", aspectRatio: 1, backgroundColor: "#7dd3fc" }} />
  ))}
</View>

{/* 幅100%・高さは幅から自動計算（16:9 の動画サムネ） */}
<View style={{ width: "100%", aspectRatio: 16/9, backgroundColor: "#000" }} />

<View style={{
  marginVertical: 8,        // 上下 8
  marginHorizontal: 16,     // 左右 16
  paddingTop: 12,
}} />

<View style={{ position: "absolute", top: 16, right: 16 }}> ... </View>

{/* 全画面を覆う（よく使う） */}
<View style={StyleSheet.absoluteFillObject} />
{/* または */}
<View style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }} />

{/* iOS：zIndex で重なる */}
<View style={{ zIndex: 10 }} />

{/* Android：影と重なり両方を出すなら elevation */}
<View style={{ elevation: 8 }} />

{/* よくある角丸カード */}
<View style={{
  borderWidth: 1,
  borderColor: "#ddd",
  borderRadius: 12,
  padding: 16,
}} />

{/* 上の角だけ丸める（モーダル下から出す等） */}
<View style={{
  borderTopLeftRadius: 16,
  borderTopRightRadius: 16,
}} />

{/* 完全な丸（円） */}
<View style={{ width: 60, height: 60, borderRadius: 30 }} />
{/* または */}
<View style={{ width: 60, height: 60, borderRadius: 999 }} />

{
  shadowColor: "#000",
  shadowOpacity: 0.15,
  shadowRadius: 8,
  shadowOffset: { width: 0, height: 4 },
}

{
  elevation: 4,
  shadowColor: "#000",   // Android でも色だけは効く（API 28+）
}

const cardShadow = {
  // iOS
  shadowColor: "#000",
  shadowOpacity: 0.1,
  shadowRadius: 8,
  shadowOffset: { width: 0, height: 4 },
  // Android
  elevation: 4,
}

{
  boxShadow: "0 4px 8px rgba(0,0,0,0.1)",
}

style={{
  transform: [
    { translateX: 10 },
    { translateY: -5 },
    { rotate: "45deg" },
    { scale: 1.2 },
    { scaleX: 1.2 },
    { scaleY: 0.8 },
    { skewX: "10deg" },
    { skewY: "5deg" },
    { rotateX: "30deg" },
    { rotateY: "60deg" },
    { rotateZ: "90deg" },
  ],
}}

<View style={{ opacity: 0.5 }} />

<Text style={{
  fontSize: 16,
  lineHeight: 24,
  letterSpacing: 0.2,
  color: "#111",
  fontWeight: "600",
  includeFontPadding: false,    // Android で見栄え統一
  textAlign: "center",
}}>
  Hello
</Text>

<Text style={{ color: "white", fontSize: 16 }}>
  通常テキスト
  <Text style={{ fontWeight: "bold" }}>太字部分</Text>
</Text>

import { useWindowDimensions } from "react-native"

function Foo() {
  const { width, height, fontScale, scale } = useWindowDimensions()
  return <View style={{ width: width * 0.8 }} />
}

<View
  onLayout={(e) => {
    const { x, y, width, height } = e.nativeEvent.layout
    console.log(width, height)
  }}
/>

import { PixelRatio } from "react-native"

const onePixel = 1 / PixelRatio.get()  // = StyleSheet.hairlineWidth
const fontPx = PixelRatio.getPixelSizeForLayoutSize(16)  // 物理ピクセル換算

npx expo install react-native-safe-area-context

import { SafeAreaProvider } from "react-native-safe-area-context"

<SafeAreaProvider>
  <App />
</SafeAreaProvider>

import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context"

// パターン A: SafeAreaView でくるむ
<SafeAreaView style={{ flex: 1 }} edges={["top", "left", "right"]}>
  ...
</SafeAreaView>

// パターン B: 自分で padding を計算
function Header() {
  const insets = useSafeAreaInsets()
  return (
    <View style={{
      paddingTop: insets.top + 8,
      paddingHorizontal: 16,
      paddingBottom: 12,
    }}> ... </View>
  )
}

import { Platform, StyleSheet } from "react-native"

const padding = Platform.OS === "ios" ? 20 : 16

const s = StyleSheet.create({
  text: {
    fontSize: 16,
    ...Platform.select({
      ios: { fontFamily: "Helvetica" },
      android: { fontFamily: "sans-serif" },
      default: { fontFamily: "System" },
    }),
  },
})

if (Platform.OS === "ios" && parseInt(String(Platform.Version), 10) >= 17) {
  // iOS 17+
}

import { useColorScheme } from "react-native"

function Card() {
  const scheme = useColorScheme()
  const dark = scheme === "dark"
  return (
    <View style={{ backgroundColor: dark ? "#0b0d12" : "#fff" }}>
      <Text style={{ color: dark ? "#e7ebf3" : "#111" }}>こんにちは</Text>
    </View>
  )
}

const lightTheme = { bg: "#fff", text: "#111", muted: "#666" }
const darkTheme  = { bg: "#0b0d12", text: "#e7ebf3", muted: "#98a2b3" }

const ThemeContext = createContext(lightTheme)

function ThemeProvider({ children }: any) {
  const scheme = useColorScheme()
  const theme = scheme === "dark" ? darkTheme : lightTheme
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
}

export const useTheme = () => useContext(ThemeContext)

<Pressable
  style={({ pressed, hovered, focused }) => [
    s.btn,
    pressed && { opacity: 0.7 },
    hovered && { backgroundColor: "#0070cc" },   // Web 出力時のみ
    focused && { borderColor: "#3b82f6" },
  ]}
>
  <Text>ボタン</Text>
</Pressable>

npx expo install expo-linear-gradient

import { LinearGradient } from "expo-linear-gradient"

<LinearGradient
  colors={["#7dd3fc", "#9333ea"]}
  start={{ x: 0, y: 0 }}
  end={{ x: 1, y: 1 }}
  style={{ width: 200, height: 100, borderRadius: 12 }}
/>

npx expo install expo-blur

import { BlurView } from "expo-blur"

<BlurView intensity={50} tint="light" style={{ ...StyleSheet.absoluteFillObject }} />

npx expo install expo-font

import { useFonts } from "expo-font"
import { SplashScreen } from "expo-router"

SplashScreen.preventAutoHideAsync()

export default function Layout() {
  const [loaded] = useFonts({
    "Inter-Regular": require("../assets/fonts/Inter-Regular.ttf"),
    "Inter-Bold":    require("../assets/fonts/Inter-Bold.ttf"),
  })

  useEffect(() => {
    if (loaded) SplashScreen.hideAsync()
  }, [loaded])

  if (!loaded) return null
  return <Slot />
}

<Text style={{ fontFamily: "Inter-Bold" }}>太字</Text>

{/* 個別 */}
<Text allowFontScaling={false}>固定サイズ</Text>
<Text maxFontSizeMultiplier={1.5}>最大 1.5 倍まで</Text>

{/* グローバルに */}
import { Text } from "react-native"
Text.defaultProps = Text.defaultProps || {}
Text.defaultProps.allowFontScaling = true
Text.defaultProps.maxFontSizeMultiplier = 1.5

npm install nativewind tailwindcss

module.exports = {
  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: { extend: {} },
}

import { View, Text } from "react-native"

<View className="flex-1 items-center justify-center bg-slate-900 px-4">
  <Text className="text-white text-2xl font-semibold mb-4">Hello</Text>
  <Text className="text-slate-400">サブテキスト</Text>
</View>

<View className="bg-white dark:bg-slate-900">
  <Text className="text-black dark:text-white">切替</Text>
</View>

<Pressable className="bg-blue-500 active:bg-blue-700 ios:px-4 android:px-3 px-2">
  <Text className="text-white">タップ</Text>
</Pressable>

import { Stack, Text, Button } from "tamagui"

<Stack flex={1} ai="center" jc="center" bg="$background">
  <Text color="$color" fontSize="$8" fontWeight="600">Hello</Text>
  <Button theme="active" size="$5">Tap</Button>
</Stack>

function Layout() {
  const { width } = useWindowDimensions()
  const isTablet = width >= 768

  return (
    <View style={{ flex: 1, flexDirection: isTablet ? "row" : "column" }}>
      <View style={{ flex: 1 }}><List /></View>
      {isTablet ? <View style={{ flex: 2 }}><Detail /></View> : null}
    </View>
  )
}

<View style={{ height: StyleSheet.hairlineWidth, backgroundColor: "#ccc" }} />

<View style={{ borderRadius: 12, overflow: "hidden" }}>
  <Image source={...} style={{ width: 200, height: 120 }} />
</View>

<View style={{ position: "relative" }}>
  <Card />
  <View style={{
    position: "absolute",
    top: -8,
    right: -8,
    backgroundColor: "red",
    borderRadius: 999,
    paddingHorizontal: 8,
    paddingVertical: 2,
  }}>
    <Text style={{ color: "white", fontSize: 12 }}>NEW</Text>
  </View>
</View>

<Pressable style={{ alignSelf: "stretch", paddingVertical: 12, alignItems: "center" }}> ... </Pressable>

<View style={{ flex: 1 }}>
  <ScrollView style={{ flex: 1 }}> ... </ScrollView>
  <View style={{ height: 56 }}> ... フッタ ... </View>
</View>

import { KeyboardAvoidingView, Platform } from "react-native"

<KeyboardAvoidingView
  behavior={Platform.OS === "ios" ? "padding" : undefined}
  style={{ flex: 1 }}
> ... </KeyboardAvoidingView>

<Text numberOfLines={3} ellipsizeMode="tail">
  長い長い長いテキスト...
</Text>

<View style={{
  width: "100%",
  height: 80,
  backgroundColor: "#eee",
  borderRadius: 8,
  opacity: 0.6,
}} />

<View style={{ backgroundColor: "rgba(255,0,0,0.2)" }}> ... </View>

<View onLayout={(e) => console.log("layout:", e.nativeEvent.layout)} />