react-native-notify

toast for react app

Installation

npm i @venjo/react-native-notify

###or

yarn add @venjo/react-native-notify

Usage

app.js

import {   NotifyContainer } from '@venjo/react-native-notify/lib/commonjs';


// ...

<NotifyContainer configs={configs}/>
// ...

someComponent.js

import {   useNotify } from '@venjo/react-native-notify/lib/commonjs';


const SomeComponent = ()=> {

  const Notify = useNotify();

  const onError = () => {
    Notify.error('some error message');
  };
  const onSuccess = () => {
    Notify.success('some success message');
  };
  const onInfo = () => {
    Notify.info('some info message');
  };

  return (
    <>
      <TouchableOpacity onPress={onError}>
        <Text>Error</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={onSuccess}>
        <Text>Success</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={onInfo}>
        <Text>Info</Text>
      </TouchableOpacity>
    </>
  );
}

TYPES

config

type config = {
    kippingTime?: number      // 10000ms
    theme?: Partial<Theme>
    maxVisibleCount?: number  // 3
} | undefind

Theme

type Theme = {
  baseSize: number      // 16
  colors: {
    background: string  // #eee0d7
    success: string     // #6AC45B
    error: string       // #d51a52
    info: string        // #1a43d5
  }
  fonts: {
    title: StyleProp<TextStyle>     // fontSize: 22, lineHeight: 32, fontWeight: '600', letterSpacing: 0,
    content: StyleProp<TextStyle>   // fontSize: 16, lineHeight: 24, fontWeight: '400', letterSpacing: 0,
  }
  shadow: {
    shadowColor: string       // #000000
    elevation: number         // 20
    shadowOffset: {           // { width: 0, height: 0 }
      width: number
      height: number
    }
    shadowOpacity: number     // 0.3
    shadowRadius: number      // 10
  }
}

expo

android ios

Contacts

• [email protected]
• linkidin - /in/smbat-siradeghyan