概要
公開日: 2026-06-02
翻訳生成に失敗したため、原文をそのまま保存しています。
原文
Integrating native code with your React Native application takes some effort. Expo modules help you with that, but there are two main friction points when using them: - The package boilerplate: You have to create the module, which acts as a standalone package, and only after setting it up can you write the native code. - Multiple interfaces: You have to manually maintain a TypeScript module interface that matches the native ones (Swift and Kotlin). In SDK 56 we've decided to work on these pain points and are now releasing the inline-modules and the expo-type-information package to address them. With these changes, writing new modules is now easier and faster. Using inline modules with type generation The main idea behind inline modules is to minimize the overhead. You can now write Swift and Kotlin modules directly in the project structure, right next to your other app files. Need a custom native view? Just create the NativeView.kt and NativeView.swift files beside your App.tsx and write your view there. Inline modules setup Inline modules setup is extremely simple: in your app configuration file you set watchedDirectories — a list of directories in your project that contain inline modules. After running npx expo prebuild to synchronize the native projects, you're ready to start using them. { "expo": { "experiments": { "inlineModules": { "watchedDirectories": ["app"] } } } } With "app" added to your watchedDirectories, you can now create Swift and Kotlin files anywhere within the app directory or its subdirectories (like app/nested/ or app/nested/directory/). For example, you can now open app/nested/InlineModule.swift and write your Expo module inside it. internal import ExpoModulesCore class InlineModule: Module { public func definition() -> ModuleDefinition { Constant("Hello") { return "Hello iOS inline modules!" } } } Once written, you can access it from JavaScript using requireNativeModule('InlineModule'). Or, if you've created a view in that module, you can import it using requireNativeView('InlineModule'). Adding type generation While inline modules eliminate most of the boilerplate required to create an Expo module, type generation simplifies interfacing with it. Once your native module is written, you need a TypeScript interface to have an easier time using it (enable type checking and autocompletion). This part is handled by the expo-type-information package, which parses Swift modules and automatically generates the matching TypeScript types for them. The package comes with a powerful CLI tool. CLI Tool The CLI includes a command specifically tailored for inline modules: inline-modules-interface. It finds all Swift inline modules in your project and generates two TypeScript files for each one. After running the command, you will see a pair of generated files appear: InlineModule.generated.ts and InlineModule.tsx right next to your Swift file: InlineModule - The Generated File ([ModuleName].generated.ts): Contains all the type information about the module, including module DSL declarations (functions, constants, classes, views, etc.) and convertible Swift constructs (enums and record structs). This file is overwritten every time you run the command. /Automatically generated by expo-type-information./ import { ViewProps } from 'react-native'; import { NativeModule } from 'expo'; export declare class InlineModuleNativeModuleType extends NativeModule { readonly Hello: string; } - The Stable File ([ModuleName].tsx): Re-exports the module interface and provides a default export for the main view if one exists. This file can be edited and will not be overwritten once you’ve modified it. // File hash: 8dfc86f5416afbe08cc1ee581c850fc9cec446479211d85501d9a5e2d24cc534 import { InlineModuleNativeModuleType } from './InlineModule.generated'; import { requireNativeModule, requireNativeView } from 'expo'; const InlineModule: InlineModuleNativeModuleType = requireNativeModule<InlineModuleNativeModuleType>('InlineModule'); export c