### Starting Metro Packager for Example App (sh)

Source: https://github.com/seniv/react-native-notifier/blob/main/CONTRIBUTING.md

Starts the Metro bundler server for the example application, allowing you to run and test changes made to the library.

```sh
yarn example start
```

--------------------------------

### Running Example App on Web (sh)

Source: https://github.com/seniv/react-native-notifier/blob/main/CONTRIBUTING.md

Builds and runs the example application in a web browser. Requires the Metro packager to be running.

```sh
yarn example web
```

--------------------------------

### Install react-native-safe-area-context Dependency (Bash)

Source: https://github.com/seniv/react-native-notifier/blob/main/MIGRATION.md

This snippet shows the command-line instructions for installing the required `react-native-safe-area-context` package using either Yarn or npm. This dependency is now used internally by react-native-notifier v3 for safe area handling.

```bash
yarn add react-native-safe-area-context
# or
npm install --save react-native-safe-area-context
```

--------------------------------

### Running Example App on iOS (sh)

Source: https://github.com/seniv/react-native-notifier/blob/main/CONTRIBUTING.md

Builds and runs the example application on a connected iOS device or simulator. Requires the Metro packager to be running.

```sh
yarn example ios
```

--------------------------------

### Running Example App on Android (sh)

Source: https://github.com/seniv/react-native-notifier/blob/main/CONTRIBUTING.md

Builds and runs the example application on a connected Android device or emulator. Requires the Metro packager to be running.

```sh
yarn example android
```

--------------------------------

### Installing Dependencies with Yarn Workspaces (sh)

Source: https://github.com/seniv/react-native-notifier/blob/main/CONTRIBUTING.md

Installs all required dependencies for the monorepo packages using Yarn workspaces from the root directory. This is the first step to set up the project for development.

```sh
yarn
```

--------------------------------

### Install react-native-notifier Package

Source: https://github.com/seniv/react-native-notifier/blob/main/README.md

Instructions for adding the react-native-notifier library to your project using either Yarn or npm package managers.

```sh
yarn add react-native-notifier
```

```sh
npm install --save react-native-notifier
```

--------------------------------

### Wrap App Root with SafeAreaProvider (React/TS)

Source: https://github.com/seniv/react-native-notifier/blob/main/MIGRATION.md

This React/TypeScript snippet demonstrates how to wrap the root component of your application or the `NotifierWrapper` with the `<SafeAreaProvider>` component from `react-native-safe-area-context`. This is required for the notifier library to correctly handle safe areas in v3.

```ts
import { SafeAreaProvider } from 'react-native-safe-area-context';

const App = () => (
  <SafeAreaProvider>
    <NotifierWrapper>
      {/* ... your app code ... */}
    </NotifierWrapper>
  </SafeAreaProvider>
);
```

--------------------------------

### Configure Notification Show Animation (React Native Notifier/TS)

Source: https://github.com/seniv/react-native-notifier/blob/main/MIGRATION.md

This TypeScript snippet illustrates the change in how notification animations are configured in react-native-notifier v3. It shows how to replace the deprecated `showAnimationDuration` and `showEasing` parameters with the new `showAnimationConfig` object, which allows specifying the animation method and its configuration.

```ts
Notifier.showNotification({
  // Old:
  showAnimationDuration: 800,
  showEasing: Easing.bounce,

  // New:
  showAnimationConfig: {
    method: 'timing',
    config: {
      duration: 800,
      easing: Easing.bounce,
    },
  },
  // ...
});
```

--------------------------------

### Creating Custom Notification Component for react-native-notifier (JS)

Source: https://github.com/seniv/react-native-notifier/blob/main/README.md

Illustrates how to create a custom React Native component to be used as a notification with react-native-notifier. The custom component receives 'title' and 'description' props, allowing full control over the notification's appearance and layout. This example defines a simple component with custom styling.

```javascript
import React from 'react';
import { StyleSheet, View, Text, SafeAreaView } from 'react-native';

const styles = StyleSheet.create({
  safeArea: {
    backgroundColor: 'orange',
  },
  container: {
    padding: 20,
  },
  title: { color: 'white', fontWeight: 'bold' },
  description: { color: 'white' },
});

const CustomComponent = ({ title, description }) => (
  <SafeAreaView style={styles.safeArea}>
    <View style={styles.container}>
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.description}>{description}</Text>
    </View>
  </SafeAreaView>
);

// ...

// Then show notification with the component

Notifier.showNotification({
  title: 'Custom',
  description: 'Example of custom component',
  Component: CustomComponent,
});
```

--------------------------------

### Implement Custom Notification Animation Function (React Native Notifier/TS)

Source: https://github.com/seniv/react-native-notifier/blob/main/MIGRATION.md

This TypeScript snippet demonstrates the structure of the new `animationFunction` parameter used for implementing custom notification animations in react-native-notifier v3. It shows how to use the provided `animationState`, `shakingTranslationX`, and `shakingTranslationY` parameters to control the style properties like opacity and transform.

```ts
animationFunction: ({
    animationState,
    shakingTranslationX,
    shakingTranslationY,
  }: AnimationFunctionParams) => {
    return {
      opacity: animationState,
      transform: [
        {
          translateX: shakingTranslationX,
        },
        {
          translateY: shakingTranslationY,
        },
      ],
    };
  },
```

--------------------------------

### Showing a Basic Notification using NotifierComponents.Notification (JavaScript)

Source: https://github.com/seniv/react-native-notifier/blob/main/README.md

This snippet demonstrates how to display a simple notification using the default `NotifierComponents.Notification` component. It shows importing the necessary modules and calling `Notifier.showNotification` with basic title, description, component, and component-specific props like `imageSource`.

```js
import { Notifier, NotifierComponents } from 'react-native-notifier';

Notifier.showNotification({
  title: 'Check this image!',
  description: 'Cool, right?',
  Component: NotifierComponents.Notification,
  componentProps: {
    imageSource: require('./react.jpg'),
  },
});
```

--------------------------------

### Publishing New Version with release-it (sh)

Source: https://github.com/seniv/react-native-notifier/blob/main/CONTRIBUTING.md

Uses the release-it tool to automate the process of publishing a new version of the library to npm, including bumping the version, creating tags, and releases.

```sh
yarn release
```

--------------------------------

### Show Notification Using NotifierRoot Ref

Source: https://github.com/seniv/react-native-notifier/blob/main/README.md

Shows an alternative approach using NotifierRoot and React's useRef hook to control notifications via a component reference, useful when global methods are disabled or for fine-grained control.

```js
import { NotifierRoot } from 'react-native-notifier';

function App() {
  const notifierRef = useRef();
  return (
    <>
      <Button
        title="Show Notification"
        onPress={() => notifierRef.current?.showNotification({ title: 'Using refs' })}
      />
      <NotifierRoot ref={notifierRef} />
    </>
  );
}
```

--------------------------------

### Running Jest Unit Tests (sh)

Source: https://github.com/seniv/react-native-notifier/blob/main/CONTRIBUTING.md

Executes the project's unit tests using the Jest testing framework to verify code functionality.

```sh
yarn test
```

--------------------------------

### Showing Notification with Params (React Native Notifier)

Source: https://github.com/seniv/react-native-notifier/blob/main/README.md

Shows a notification using the `Notifier.showNotification` function. It accepts a `params` object to configure the notification's appearance, behavior, duration, component, and various callbacks. The parameters include `title`, `description`, `duration`, `Component`, `componentProps`, `containerStyle`, `containerProps`, `queueMode`, `swipeEnabled`, animation settings (`animationDuration`, `easing`, etc.), and event callbacks (`onShown`, `onStartHiding`, `onHidden`, `onPress`).

```TypeScript
Notifier.showNotification(params: object);
```

--------------------------------

### Showing Alert Notification with react-native-notifier (JS)

Source: https://github.com/seniv/react-native-notifier/blob/main/README.md

Demonstrates how to display a standard alert notification using the built-in NotifierComponents.Alert component. This is suitable for system messages like errors or success confirmations. It shows how to set the title, description, and alert type.

```javascript
import { Notifier, NotifierComponents } from 'react-native-notifier';

Notifier.showNotification({
  title: 'The request was failed',
  description: 'Check your internet connection, please',
  Component: NotifierComponents.Alert,
  componentProps: {
    alertType: 'error',
  },
});
```

--------------------------------

### Wrap App with NotifierWrapper

Source: https://github.com/seniv/react-native-notifier/blob/main/README.md

Demonstrates how to integrate the NotifierWrapper component at the root of your React Native application to enable global notification handling.

```js
import { NotifierWrapper } from 'react-native-notifier';

const App = () => (
  <NotifierWrapper>
    <Navigation />
  </NotifierWrapper>
);
```

--------------------------------

### Fixing ESLint and Prettier Issues (sh)

Source: https://github.com/seniv/react-native-notifier/blob/main/CONTRIBUTING.md

Runs ESLint and Prettier to automatically fix formatting and some linting issues in the project's source code.

```sh
yarn lint --fix
```

--------------------------------

### Running ESLint Linter (sh)

Source: https://github.com/seniv/react-native-notifier/blob/main/CONTRIBUTING.md

Runs ESLint to check the project's code for potential errors, style issues, and adherence to coding standards.

```sh
yarn lint
```

--------------------------------

### Show Notification Using Global Notifier

Source: https://github.com/seniv/react-native-notifier/blob/main/README.md

Illustrates how to display a notification anywhere in your code by calling the static Notifier.showNotification method with various configuration options.

```js
import { Notifier, Easing } from 'react-native-notifier';

Notifier.showNotification({
  title: 'John Doe',
  description: 'Hello! Can you help me with notifications?',
  duration: 0,
  showAnimationDuration: 800,
  showEasing: Easing.bounce,
  onHidden: () => console.log('Hidden'),
  onPress: () => console.log('Press'),
  hideOnPress: false,
});
```

--------------------------------

### Running TypeScript Type Check (sh)

Source: https://github.com/seniv/react-native-notifier/blob/main/CONTRIBUTING.md

Executes the TypeScript compiler to perform static type checking on the project's source code, ensuring type safety.

```sh
yarn typecheck
```

--------------------------------

### Implementing Custom Translate and Scale Animation with react-native-notifier

Source: https://github.com/seniv/react-native-notifier/blob/main/README.md

Defines a function that generates animated styles for a notification container, combining translation and scaling based on the provided translateY animated value. It then demonstrates how to use this function with Notifier.showNotification to apply the custom animation.

```ts
const getContainerStyleWithTranslateAndScale = (translateY: Animated.Value) => ({
  transform: [
    {
      // this interpolation is used just to "clamp" the value and didn't allow to drag the notification below "0"
      translateY: translateY.interpolate({
        inputRange: [-1000, 0],
        outputRange: [-1000, 0],
        extrapolate: 'clamp',
      }),
    },
    {
      // scaling from 0 to 0.5 when value is in range of -1000 and -200 because mostly it is still invisible,
      // and from 0.5 to 1 in last 200 pixels to make the scaling effect more noticeable.
      scale: translateY.interpolate({
        inputRange: [-1000, -200, 0],
        outputRange: [0, 0.5, 1],
        extrapolate: 'clamp',
      }),
    },
  ],
});

Notifier.showNotification({
  title: 'Custom animations',
  description: 'This notification is moved and scaled',
  containerStyle: getContainerStyleWithTranslateAndScale,
})
```

--------------------------------

### Fixing Android Shadow Animation with containerProps in react-native-notifier

Source: https://github.com/seniv/react-native-notifier/blob/main/README.md

Shows how to use the containerProps parameter to pass platform-specific props to the notification container. Specifically, it demonstrates setting needsOffscreenAlphaCompositing to true for Android to resolve issues with animating shadows when using opacity.

```ts
const animatedContainerProps = isAndroid ? { needsOffscreenAlphaCompositing: true } : undefined;
// ...
Notifier.showNotification({
  title: 'Custom animations',
  description: 'This notification is moved and scaled',
  containerStyle: getContainerStyleWithTranslateAndScale,
  containerProps: animatedContainerProps,
})
```

--------------------------------

### Adjusting for iOS SafeAreaView Padding in react-native-notifier Scale Animations

Source: https://github.com/seniv/react-native-notifier/blob/main/README.md

Provides a solution for unexpected movement during scale animations on iOS caused by SafeAreaView padding. It shows how to add the safe area inset to the container's margin and replace the default SafeAreaView container component with a standard View.

```ts
Notifier.showNotification({
  title: 'Zoom In/Out Animation',
  containerStyle: (translateY: Animated.Value) => ({
    // add safe area inset to the container
    marginTop: safeTopMargin,
    // ...
  }),
  // replace SafeAreaView with View
  componentProps: {
    ContainerComponent: View,
  },
})
```

--------------------------------

### Hiding Notification (React Native Notifier)

Source: https://github.com/seniv/react-native-notifier/blob/main/README.md

Hides the currently displayed notification. Optionally accepts an `onHiddenCallback` function that is executed when the notification has completely finished its hiding animation.

```TypeScript
Notifier.hideNotification(onHiddenCallback?: (result: Animated.EndResult) => void);
```

--------------------------------

### Clearing Notification Queue (React Native Notifier)

Source: https://github.com/seniv/react-native-notifier/blob/main/README.md

Clears the queue of pending notifications. An optional boolean parameter `hideDisplayedNotification` can be passed to also immediately hide the notification currently being displayed. This is useful for scenarios like user logout where queued notifications should no longer appear.

```TypeScript
Notifier.clearQueue(hideDisplayedNotification?: boolean);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.