React Native and Expo: your first app

npx create-expo-app@latest service-card --yes
cd service-card
npm run reset-project   # на вопрос о переносе примеров ответьте n
npx expo start

export type Service = {
  id: string;
  title: string;
  description: string;
  durationMin: number;
  includes: string[];
};

export const service: Service = {
  id: 'haircut',
  title: 'Haircut and styling',
  description: 'Consultation, wash, haircut and styling with a senior stylist.',
  durationMin: 60,
  includes: ['Consultation', 'Wash', 'Haircut', 'Styling'],
};

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

import type { Service } from '@/data/service';

type Props = {
  service: Service;
  booked: boolean;
  onBook: () => void;
};

export function ServiceCard({ service, booked, onBook }: Props) {
  return (
    <View style={styles.card}>
      <Image source={require('../../assets/images/icon.png')} style={styles.cover} resizeMode="cover" />

      <View style={styles.body}>
        <Text style={styles.title}>{service.title}</Text>
        <Text style={styles.meta}>{service.durationMin} min</Text>
        <Text style={styles.description}>{service.description}</Text>

        <View style={styles.tags}>
          {service.includes.map((item) => (
            <Text key={item} style={styles.tag}>
              {item}
            </Text>
          ))}
        </View>

        <Pressable
          onPress={onBook}
          disabled={booked}
          accessibilityRole="button"
          accessibilityState={{ disabled: booked }}
          style={({ pressed }) => [
            styles.button,
            pressed && styles.buttonPressed,
            booked && styles.buttonDone,
          ]}>
          <Text style={styles.buttonText}>{booked ? 'Request sent' : 'Book a visit'}</Text>
        </Pressable>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#ffffff',
    borderRadius: 20,
    borderWidth: 1,
    borderColor: '#e4e4e7',
    overflow: 'hidden',
  },
  cover: {
    width: '100%',
    height: 180,
  },
  body: {
    padding: 20,
    gap: 12,
  },
  title: {
    fontSize: 24,
    fontWeight: '700',
    color: '#18181b',
  },
  meta: {
    fontSize: 14,
    color: '#71717a',
  },
  description: {
    fontSize: 16,
    lineHeight: 24,
    color: '#3f3f46',
  },
  tags: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 8,
  },
  tag: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 999,
    backgroundColor: '#f4f4f5',
    fontSize: 13,
    color: '#3f3f46',
  },
  button: {
    marginTop: 8,
    minHeight: 48,
    borderRadius: 14,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#18181b',
  },
  buttonPressed: {
    opacity: 0.7,
  },
  buttonDone: {
    backgroundColor: '#16a34a',
  },
  buttonText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#ffffff',
  },
});

import { useState } from 'react';
import { ScrollView, StyleSheet, Text } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

import { ServiceCard } from '@/components/service-card';
import { service } from '@/data/service';

export default function ServiceScreen() {
  const [booked, setBooked] = useState(false);

  return (
    <SafeAreaView style={styles.safeArea}>
      <ScrollView contentContainerStyle={styles.content}>
        <Text style={styles.heading}>Our services</Text>
        <ServiceCard service={service} booked={booked} onBook={() => setBooked(true)} />
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#fafafa',
  },
  content: {
    width: '100%',
    maxWidth: 560,
    alignSelf: 'center',
    padding: 16,
    gap: 16,
  },
  heading: {
    fontSize: 32,
    fontWeight: '800',
    color: '#18181b',
  },
});

import { Stack } from 'expo-router';

export default function RootLayout() {
  return <Stack screenOptions={{ headerShown: false }} />;
}

npx expo install jest-expo jest @types/jest @testing-library/react-native --dev

{
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "preset": "jest-expo"
  }
}

import { describe, expect, test } from '@jest/globals';
import { fireEvent, render, screen } from '@testing-library/react-native';

import ServiceScreen from '@/app/index';

describe('<ServiceScreen />', () => {
  test('shows the service and books it once', async () => {
    await render(<ServiceScreen />);

    expect(screen.getByText('Haircut and styling')).toBeTruthy();
    expect(screen.getByText('60 min')).toBeTruthy();

    const button = screen.getByRole('button', { name: 'Book a visit' });
    await fireEvent.press(button);

    expect(screen.getByText('Request sent')).toBeTruthy();
    expect(screen.getByRole('button', { name: 'Request sent' })).toBeDisabled();
  });
});

$ npx tsc --noEmit
$ npm test
PASS __tests__/service-screen-test.tsx
  <ServiceScreen />
    √ shows the service and books it once (427 ms)

Tests:       1 passed, 1 total
$ npx expo export --platform android
Using src/app as the root directory for Expo Router.
React Compiler enabled
Starting Metro Bundler
› android bundles (1):
_expo/static/js/android/entry-943190dc34f449e6a0d00f14bf2ed486.hbc (2.7MB)
Exported: dist
$ npx expo-doctor
21/21 checks passed. No issues detected!