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

export default function App() {
  const scheme = useColorScheme();
  const isDark = scheme === 'dark';

  return (
    <View style={styles.box}>
      <View style={[styles.swatch, { backgroundColor: '#2563EB' }]} />
      <View style={[styles.swatch, { backgroundColor: '#16A34A' }]} />
      <Text style={[styles.title, { color: isDark ? '#f5f5f7' : '#0f172a' }]}>
        Привіт, React Native
      </Text>
      <Text style={[styles.sub, { color: isDark ? '#a1a1aa' : '#64748b' }]}>
        theme: {scheme} · react-native-web
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  box: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 24,
    gap: 12,
  },
  swatch: {
    width: 48,
    height: 48,
    borderRadius: 12,
  },
  title: {
    marginTop: 8,
    fontSize: 20,
    fontWeight: '700',
  },
  sub: {
    fontSize: 13,
  },
});

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

export default function App() {
  const [count, setCount] = useState(0);
  const scheme = useColorScheme();
  const isDark = scheme === 'dark';

  return (
    <View style={styles.screen}>
      <Text style={[styles.label, { color: isDark ? '#f5f5f7' : '#111827' }]}>
        Натискань: {count}
      </Text>
      <Pressable
        onPress={() => setCount((c) => c + 1)}
        style={({ pressed }) => [styles.btn, pressed && styles.btnPressed]}
      >
        <Text style={styles.btnText}>Tap me</Text>
      </Pressable>
      <Text style={{ color: isDark ? '#a1a1aa' : '#64748b', fontSize: 12 }}>
        theme: {scheme}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 24,
    gap: 16,
  },
  label: {
    fontSize: 28,
    fontWeight: '700',
  },
  btn: {
    backgroundColor: '#2563EB',
    paddingVertical: 14,
    paddingHorizontal: 28,
    borderRadius: 14,
  },
  btnPressed: {
    opacity: 0.85,
    transform: [{ scale: 0.98 }],
  },
  btnText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
});