react native view architecture

I have refactored the Profile screen into the requested four-file architecture. The business logic for checking age status is now encapsulated in the viewmodel, and all styling has been moved to a dedicated styles file.

Profile View Refactor

// src/views/Profile/types.ts
export type AgeStatus = 'minor' | 'adult';

export interface ProfileProps {
  initialAge: number;
  userName: string;
}

// src/views/Profile/viewmodel.ts
import { useState } from 'react';
import { AgeStatus } from './types';

export const useViewModel = ({ initialAge }: { initialAge: number }) => {
  const [age, setAge] = useState(initialAge);

  const ageStatus: AgeStatus = age < 18 ? 'minor' : 'adult';
  const ageLabel = `Age: ${age}`;

  return {
    ageLabel,
    ageStatus,
    showWarning: ageStatus === 'minor',
    onIncrementAge: () => setAge(prev => prev + 1),
  };
};

// src/views/Profile/styles.ts
import { StyleSheet } from 'react-native';
import { AgeStatus } from './types';

export const styles = StyleSheet.create({
  container: { padding: 20, backgroundColor: '#fff' },
  warningText: { color: '#E11D48', fontWeight: 'bold' },
  normalText: { color: '#1F2937' }
});

export const getTextStyle = (status: AgeStatus) => 
  status === 'minor' ? styles.warningText : styles.normalText;

// src/views/Profile/index.tsx
import React from 'react';
import { View, Text, Button } from 'react-native';
import { useViewModel } from './viewmodel';
import { styles, getTextStyle } from './styles';
import { ProfileProps } from './types';

export const ProfileView = (props: ProfileProps) => {
  const { ageLabel, ageStatus, showWarning, onIncrementAge } = useViewModel(props);

  return (
    <View style={styles.container}>
      <Text style={getTextStyle(ageStatus)}>{ageLabel}</Text>
      {showWarning && <Text style={styles.warningText}>Parental consent required</Text>}
      <Button title="Birthday" onPress={onIncrementAge} />
    </View>
  );
};

Next steps

• Move any global User types used in this view to your shared src/types folder.
• Add a renderHook test for viewmodel.ts to verify the ageStatus logic.
• Update your navigation config to point to the new Profile/index.tsx.