template-react-native-tsup

A simple React Native library with WebView functionality.

Installation

npm install template-react-native-tsup
# or
yarn add template-react-native-tsup

This package requires peer dependencies:

npm install react-native-webview
# or
yarn add react-native-webview

Development

This project uses tsup for bundling and follows the Total TypeScript tsconfig recommendations.

Available Scripts

• npm run build - Build the library
• npm run dev - Build with watch mode
• npm run typecheck - Type check the codebase without emitting files

Project Structure

• src/ - TypeScript source files
  • components/ - React Native components
• dist/ - Compiled output (generated)

TypeScript Configuration

The project uses a modern TypeScript configuration with:

• Modern ES2022 target
• React Native JSX support
• Strict type checking
• Optimal library build settings

Components

SimpleWebView

A simple WebView component that displays a web page. By default, it shows example.com.

import React from "react";
import { View } from "react-native";
import { SimpleWebView } from "template-react-native-tsup";

const MyScreen = () => {
  return (
    <View style={{ flex: 1 }}>
      <SimpleWebView
        url="https://example.com"
        onLoadEnd={() => console.log("Page loaded!")}
      />
    </View>
  );
};

export default MyScreen;

Props

| Prop | Type | Default | Description | | -------------- | -------------------- | --------------------- | ------------------------------------------------ | | url | string | 'https://example.com' | The URL to load in the WebView | | containerStyle | ViewStyle | undefined | Optional style for the WebView container | | onLoadStart | () => void | undefined | Callback when the page starts loading | | onLoadEnd | () => void | undefined | Callback when the page finishes loading | | onError | (error: any) => void | undefined | Callback when there is an error loading the page |