expo-router-skia-template

Expo Router Template with React Native Skia

An Expo Router template with React Native Skia (for high-performance graphic rendering & animations).

Includes

• Expo v50: Best DUX for React Native
• Expo Router v3: Best framework to build universal apps (routing with deep linking, API server...). Based on their tabs@50 template
• React Native Skia: Most performant way to create universal graphics & animations for Web and Native
• Reanimated v3: Smooth animations ran on the UI thread

☝️ Note: This template is also available with a NativeWind integration for universal styling, if that's of interest.

Get Started

Simply create a new expo app using this template:

npx create-expo-app@latest --template expo-router-skia-template MyUniversallyAnimatedApp

Run yarn start to start the server. Works out-of-the-box for web. For iOS, run npx expo run:ios and for Android run npx expo run:android.

Optional: Update Skia Loading Method on the Web

Skia works on Web out-of-the-box in any part of this template app.

By default in this template, Skia is loaded using defered component registration via index.web.js.

If you ever wish to use code splitting instead:

• Remove the index.js and index.web.js files and change your package.json entry point by updating this line:

{
  (...)
  "main": "expo-router/entry",
  (...)
}

• Create a loading file, like SkiaUI.web.tsx:

import Constants from 'expo-constants';
import { Text, View, StyleSheet } from 'react-native';
import { WithSkiaWeb } from '@shopify/react-native-skia/lib/module/web';

const SkiaUI = () => <View style={styles.container}>
    <WithSkiaWeb
      opts={{ locateFile: () => '/static/js/canvaskit.wasm' }}
      getComponent={() => require('./HelloSkia')}
      fallback={<Text style={{ color: 'white', textAlign: 'center' }}>Loading Skia...</Text>}
    />
  </View>;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
  },
});

export default SkiaUI;

Note: for the native SkiaUI.tsx, you can simply load the <HelloSkia /> component directly.