React Native Styled Toast

Overview:

The react-native-styled-toast is a fully customizable toast library for React Native. It supports multiple toasts, is compatible with both iOS and Android, and is written using React Hooks and TypeScript.

Features:

• Pure JS implementation
• Supports multiple toasts
• iOS and Android compatible
• Styled with theme constraints
• Written using React Hooks
• Fully typed with TypeScript

Installation:

To install the react-native-styled-toast library, use the following command:

$ yarn add react-native-styled-toast

Usage:

1. Wrap your app in the ThemeProvider component from styled-components to ensure that the toasts rely on theming.

2. Use the ToastProvider and wrap the rest of your app.

3. Access the Toast context by using the provided useToast hook to trigger a toast anywhere in your app. If you can’t use hooks, you can still use the ToastContext.Consumer to fire off a toast.

4. Configure your theme object to contain at least a spacing scale with some default colors. The theme object should look something like this:

{
  spacing: [0, 4, 8, 16, 32],
  colors: {
    background: '#FFF',
    text: '#000',
    success: '#00FF00',
    info: '#0000FF',
    error: '#FF0000',
    muted: '#888'
  }
}

5. If your theme object does not contain the required color keys, you can customize these values in the toast configuration object.

Summary:

The react-native-styled-toast library provides a fully customizable toast solution for React Native apps. It supports multiple toasts, is compatible with both iOS and Android, and is written using React Hooks and TypeScript. The library relies on theming and styled-components to style the toasts, and can be easily integrated into any React Native app.