React Native, Expo and navigation

React Native uses the React model but renders native components rather than HTML. View is a common layout container, Text displays text and Pressable handles actions. Expo bundles tools and mobile APIs. House Log uses Expo Router for routes and custom native modules for scanning, PDF preview and reminders. Those functions are not automatically part of a basic browser example.

Example files

index.tsx

01Create a separate Expo learning app

Create a separate Expo app with npx create-expo-app@latest native_demo --template default@sdk-57. Use Node.js according to its package.json. Save the example as app/index.tsx or src/app/index.tsx according to the generated router directory.

index.tsx · tsxOpen file

import React, { useState } from 'react';
import { View, Text, TextInput, Pressable } from 'react-native';
export default function LearningScreen() {
  const [name, setName] = useState('');
  const [confirmed, setConfirmed] = useState('');
  return <View style={{ padding: 24, gap: 16 }}>
    <Text>House name</Text>
    <TextInput accessibilityLabel="House name" value={name} onChangeText={setName}
      style={{ borderWidth: 1, padding: 12 }} />
    <Pressable accessibilityRole="button" onPress={() => setConfirmed(name.trim())}>
      <Text>Confirm</Text>
    </Pressable>
    <Text>{confirmed || 'No confirmed name'}</Text>
  </View>;
}

Run / check

npx expo start

02Read native components

TextInput supplies the new string through onChangeText. There is no event.target.value. Styles are passed as objects. padding: 24 is a number rather than the CSS string "24px". Text must appear inside Text.

03Separate navigation from domain rules

Expo Router creates routes from files. A screen can open another path. A persisted ID is suitable as a route parameter. A complete object containing private attachments is not. Feature hooks should own screen state while services coordinate domain rules.

04Respect device boundaries

Start the simple learning interface with npx expo start. It needs no custom native module. Expo Go is insufficient for the complete House Log app because its app-local Android functions must be included in a compatible development installation.

Expected result

A name can be entered. Confirm displays its normalised value as a local preview.

Your exercise

Add an error display for an empty name. Where should the real persistence rule belong later?

Show the solution and explanation

Check trim before setConfirmed and keep an appropriate message in state. The durable domain rule also belongs in a service. A repository handles persistence. The screen displays confirmed state only after a successful action.

Project context and sources

The example is simplified for learning. The linked source version shows its use in the project and the checks applied there.