Appearance

React Native ​

You should create a functional component named App as the main entry point of your application using React Native primitives (View, Text, StyleSheet, Pressable, etc.) imported from react-native. The same source compiles unchanged for iOS/Android via Expo or RN CLI — only the browser preview is the differentiator.

Internally, the template uses react-native-web, which ships the web implementations of RN primitives. A Vite alias ('react-native' → react-native-web) handles the swap at build/test time, so your imports stay identical to a real mobile project.

Entry file ​

The entry file for this template must be one of the following: index.jsx or App.jsx. The first one present is used as the entry point. index.jsx should register the app via AppRegistry (RN convention; on web it mounts onto document.getElementById('root')).

Version ​

Running React Native Web v0.19 with React 18 and Vitest v3.2 on Node.js v20.

Supported languages ​

Javascript

Testing framework ​

Vitest with @testing-library/react

Special reminders and implementation details ​

  • Source files must import RN primitives from 'react-native' (NOT 'react-native-web') — the Vite alias resolves the swap at build/test time. This keeps the source portable to iOS/Android.
  • RN web renders View as a <div>, Text as a <div> with dir="auto", and Pressable as a <div> with role/tabindex, so role and text queries (getByText, getByRole) work normally against jsdom.
  • For press events in tests, use fireEvent.click(...) — RN web maps onPress to web click events. Do not use fireEvent.press.
  • Style with StyleSheet.create({...}) rather than CSS — RN style objects map to inline web styles.

Example with @testing-library/react: ​

jsx
import { render, screen } from '@testing-library/react';
import App from './App';

describe('App', () => {
  test("renders 'Hello, World!'", () => {
    render(<App />);
    expect(screen.getByText('Hello, World!')).toBeInTheDocument();
  });
});

A typical App.jsx:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, World!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24 },
  text: { fontSize: 24, fontWeight: '600' }
});

Included libraries ​

How to debug ​

React Native Web maps RN primitives to web HTML elements, so debugging is identical to standard React DOM — console.log from inside components prints to the browser console.

Steps to Debug Using Console Logs ​

  1. Identify the Problem Area: Pinpoint the component or function where you suspect the problem resides.
  2. Insert console.log() Statements: Strategically log variable values and execution flow before/after the suspected code.
  3. Check the Results Output of your tests.
  4. Use the Debug Icon in the Preview Area: Click on the debug icon in the Preview area to check the console output, or open the browser devtools console directly.
  5. Analyze the Output: Examine the logged output to understand the application's execution and identify potential issues.

Example of using console.log() for debugging:

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

export default function Counter() {
  const [count, setCount] = useState(0);

  const handlePress = () => {
    console.log('pressed', count); // Log press event
    setCount(count + 1);
  };

  console.log('Current count:', count);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Pressable onPress={handlePress}>
        <Text>Increment</Text>
      </Pressable>
    </View>
  );
}