Giter Club home page Giter Club logo

react-native-toasty's Introduction

PRs Welcome

ReactNative: Native Toast

If this project has helped you out, please support us with a star 🌟

This library is a wrapper around native Toast library which 5 different states of beautiful toasts:

  • Normal, Info, Success, Warning, Error
Android: GrenderG/Toasty
iOS: scalessec/Toast

📖 Getting Started

$yarn install react-native-toasty

This library is supports React Native 60 and above

  • Add react-native-image-helper your app package.json

$ npm install react-native-image-helper --save

  • Add react-native-vector-icons to your app package.json and configure it as per their installation steps

$ npm install react-native-vector-icons --save

  • Android

Please add below snippet into your app build.gradle

allprojects {
    repositories {
        maven { url 'https://www.jitpack.io' }
    }
}

💻 Usage

import { RNToasty } from 'react-native-toasty'
RNToasty.Show({
  title: 'This is a toast',
  fontFamily: 'Arial',
  position: 'center',
})

🎨 API's

Normal, Info, Success, Warning, Error, Custom

RNToasty.Normal({}),
  RNToasty.Info({}),
  RNToasty.Success({}),
  RNToasty.Warn({}),
  RNToasty.Error({}),
  RNToasty.Show({})

💡 Props

  • Props: Generic

| Prop | Type | Default | Note | | ------------ | --------------------- | --------- | --------------------------------------------------------------------- | --- | | title | string | | Specify the title of toast | | titleSize | number | 16 | Specify the title size | | | titleColor | string: HEX-COLOR | #FFFFFF | Specify the title color | | | duration | number | | Specify the duration of toast: 0: SHORT; 1: LONG | | tintColor | string: HEX-NUMBER | #000000 | Specify the tint color of toast | | withIcon | bool | true | Specify whether you need icon | | icon | vector-icon | | Specify icon of toast | | fontFamily | string | | Name of font in assets/fonts folder => like 'Arial' [Only on Android] | | position | top\|center\|bottom | bottom | Specify position of toast | | offsetX | number | 0 | Specify X offset of toast [Only on Android] | | offsetY | number | 0 | Specify Y offset of toast [Only on Android] |

Icons

	let facebook = <Icon family={'FontAwesome'} name={'facebook'} color={'#000000'} size={30} />

	<RNBottomActionSheet.GridView.Item title={"Facebook"} icon={facebook} />

Note:

  • We have added family prop for Icon class, please make sure that you pass the props

✨ Credits

🤔 How to contribute

Have an idea? Found a bug? Please raise to ISSUES. Contributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given.

💫 Where is this library used?

If you are using this library in one of your projects, add it in this list below. ✨

📜 License

This library is provided under the Apache 2 License.

RNToasty @ prscX

💖 Support my projects

I open-source almost everything I can, and I try to reply everyone needing help using these projects. Obviously, this takes time. You can integrate and use these projects in your applications for free! You can even change the source code and redistribute (even resell it).

However, if you get some profit from this or just want to encourage me to continue creating stuff, there are few ways you can do it:

  • Starring and sharing the projects you like 🚀

  • If you're feeling especially charitable, please follow prscX on GitHub.

    Buy Me A Coffee

    Thanks! ❤️
    prscX.github.io
    </ Pranav >

react-native-toasty's People

Contributors

dineshmm23 avatar h2soheili avatar igor-ribeiro-dev avatar jerakrus avatar johakr avatar mzachariadis avatar promasoud avatar prscms avatar prscx avatar questionablequestion avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

react-native-toasty's Issues

[!] No podspec found for `RNToasty` in `../node_modules/react-native-toasty`

I have install react-native-toasty using "react-native-toasty": "git+https://github.com/prscX/react-native-toasty.git" in package.json
as indicated by this. Pod install succeeds after the npm installation. Then I do react-native link react-native-toasty and succeeds. But then if I do cd ios && pod install from the root of react-native project, it fails with the following error:

Fetching podspec for `RNToasty` from `../node_modules/react-native-toasty`
[!] No podspec found for `RNToasty` in `../node_modules/react-native-toasty`

Environment:
react: 16.8.6
react-native: 0.60.4
react-native-toasty: git+https://github.com/prscX/react-native-toasty.git

Customed Icon errors

Please Allow this package to add Customed Icon from (Fontello/etc)-react-native-vector-icons

TypeScript Support

Hey!

Great work with the library. It's the most painless customizable toast library for RN in my experience. :)

Would you be interested in a PR that adds index.d.ts with typescript support?

Thank you.

Toast at the top

Hi,
I have a tab navigation application and display a welcome message on login, but the toast is right on the tabs and you cannot navigate properly until the toast is gone.
My question is what should I do to make the toasts appear at the top of the screen instead of the bottom.

Thanks!

Avoid passing 'icon' as null if 'withIcon' is set to true

Reproducible by:

    RNToasty.Success({
      title: 'XXX',
      titleColor: "#46CC9F",
      tintColor: "#F1F9FF",
      icon: props => <AntDesign name='checkcircleo' {...props} style={props.style} />,
      withIcon: true
    });

If you remove the tintColor property, it works again

Error in Production Build

Hello! Made an application release with the latest version of the package (1.0.2) a couple of days ago. I use firebase-analytics in the application. About 1-2 percent of users started receiving errors with the following stack trace:

Fatal Exception: java.lang.NullPointerException: Attempt to invoke virtual method 'android.content.res.Resources android.content.Context.getResources()' on a null object reference
       at androidx.appcompat.widget.ResourceManagerInternal.createDrawableIfNeeded(ResourceManagerInternal.java:176)
       at androidx.appcompat.widget.ResourceManagerInternal.getDrawable(ResourceManagerInternal.java:141)
       at androidx.appcompat.widget.ResourceManagerInternal.getDrawable(ResourceManagerInternal.java:132)
       at androidx.appcompat.content.res.AppCompatResources.getDrawable(AppCompatResources.java:104)
       at es.dmoral.toasty.ToastyUtils.getDrawable(ToastyUtils.java:55)
       at es.dmoral.toasty.Toasty.error(Toasty.java:242)
       at ui.toasty.RNToastyModule.Show(RNToastyModule.java:103)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
       at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:151)
       at com.facebook.react.bridge.queue.NativeRunnable.run(NativeRunnable.java)
       at android.os.Handler.handleCallback(Handler.java:754)
       at android.os.Handler.dispatchMessage(Handler.java:95)
       at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
       at android.os.Looper.loop(Looper.java:165)
       at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:226)
       at java.lang.Thread.run(Thread.java:760)

I am not using any other similar library, so I guess the problem is here. I also seem to have encountered a similar problem in react-native-screens (software-mansion/react-native-screens#463 (comment)), because there are 97% crashes according to analytics occurring in the background. But my knowledge of native code is too small to figure it out. It would be nice if we could do it for everyone.

Снимок экрана 2020-09-06 в 17 18 39

Снимок экрана 2020-09-06 в 17 22 26

P.s. Sorry for my English, I'm using a translator.)

can't run in react native v.0.69 and react v.18.0.0

why i'm install in react native v.0.69 and react v.18.0.0 can't run ?
which threw an
exception: Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.

pod install failed

[!] The RNToasty pod failed to validate due to 1 error:
- ERROR | attributes: Missing required attribute homepage.
- WARN | source: The version should be included in the Git tag.
- WARN | description: The description is equal to the summary.

RN 60.4
IOS 9

android fontFamily

Why did you suggest the font file extension to be ttf?
on Android.

// fontFamily + ".ttf"

How about taking only fontFamily or putting props that give extension?

Task :react-native-toasty:verifyReleaseResources FAILED

There is an issue when taking Release Build. On Debug Build, it works perfectly.

Package.json
{
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"android-linux": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res"
},
"dependencies": {
"@react-native-community/async-storage": "^1.4.0",
"@react-native-community/netinfo": "^3.2.1",
"i18n-js": "^3.3.0",
"jetifier": "^1.6.4",
"lodash": "^4.17.11",
"lodash.memoize": "^4.1.2",
"moment": "^2.24.0",
"npm-check-updates": "^3.1.9",
"react": "16.8.3",
"react-native": "^0.59.9",
"react-native-app-intro-slider": "^3.0.0",
"react-native-calendars": "^1.141.0",
"react-native-countdown-component": "^2.5.0",
"react-native-datepicker": "^1.7.2",
"react-native-elements": "^1.1.0",
"react-native-firebase": "^5.3.1",
"react-native-gesture-handler": "^1.4.1",
"react-native-image-picker": "^0.28.0",
"react-native-indicators": "^0.13.0",
"react-native-localize": "^1.2.1",
"react-native-material-buttons": "^0.5.0",
"react-native-material-dropdown": "^0.11.1",
"react-native-material-textfield": "^0.12.0",
"react-native-paper": "^2.15.2",
"react-native-splash-screen": "^3.2.0",
"react-native-svg": "^9.4.0",
"react-native-toasty": "0.0.4",
"react-native-vector-icons": "^6.4.2",
"react-navigation": "^3.11.0",
"react-navigation-material-bottom-tabs": "^1.0.0",
"react-redux": "^7.0.3",
"realm": "^2.28.1",
"redux": "^4.0.1",
"rn-fetch-blob": "^0.11.2",
"socket.io-client": "^2.2.0",
"victory-native": "^32.0.2"
},
"devDependencies": {
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "24.8.0",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}

Screenshot 2019-11-04 at 3 16 07 PM

react-native-toasty is the causing the issue. Any patches released for this ?

RNToasty.java NullPointerException

Seeing nonstop crashes on Samsung Galaxy phones, predominantly using Android 9 (though happening in 10, 11 as well):

java.lang.NullPointerException: 
  at ui.toasty.RNToastyModule.Show (RNToastyModule.java:80)
  at java.lang.reflect.Method.invoke (Native Method)
  at com.facebook.react.bridge.JavaMethodWrapper.invoke (JavaMethodWrapper.java:372)
  at com.facebook.react.bridge.JavaModuleWrapper.invoke (JavaModuleWrapper.java:151)
  at com.facebook.react.bridge.queue.NativeRunnable.run (Native Method)
  at android.os.Handler.handleCallback (Handler.java:938)
  at android.os.Handler.dispatchMessage (Handler.java:99)
  at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage (MessageQueueThreadHandler.java:27)
  at android.os.Looper.loop (Looper.java:246)
  at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run (MessageQueueThreadImpl.java:226)
  at java.lang.Thread.run (Thread.java:923)

Android issue when tintColor is added

I've read the issues and I believe this is not a duplicate.

When using android and specifying a tintColor, the following issue arises.

Screenshot_1604082220

I believe it's an issue over the parseColor function.

There is an error trying to build the app after installing this package

So i just installed the package through npm, ran react-native run-android and I just can't make it work. These are the app dependencies:
"dependencies": { "@react-native-community/async-storage": "^1.7.1", "@react-native-community/datetimepicker": "^2.2.1", "@react-native-community/masked-view": "^0.1.6", "react": "16.12.0", "react-native": "0.61.5", "react-native-gesture-handler": "^1.5.6", "react-native-reanimated": "^1.7.0", "react-native-safe-area-context": "^0.7.2", "react-native-screens": "^2.0.0-beta.2", "react-native-toasty": "^1.0.0", "react-native-vector-icons": "^6.6.0", "react-navigation": "^4.1.1", "react-navigation-stack": "^2.1.1" },

And this is the error that just pops up:
image

Error when creating release build

Following error happens when taking release build. All libraries inked properly.

Task :react-native-toasty:verifyReleaseResources FAILED
FAILURE: Build failed with an exception.

  • What went wrong:
    Execution failed for task ':react-native-toasty:verifyReleaseResources'.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.