A android like toast for android and ios, android use native toast, ios use UIView+Toast

Last update: Apr 4, 2022

React Native Toast (remobile)

A android like toast for react-native support for ios and android

Installation

npm install @remobile/react-native-toast --save

Installation (iOS)

  • Drag RCTToast.xcodeproj to your project on Xcode.
  • Click on your main project file (the one that represents the .xcodeproj) select Build Phases and drag libRCTToast.a from the Products folder inside the RCTToast.xcodeproj.
  • Look for Header Search Paths and make sure it contains both $(SRCROOT)/../../../react-native/React as recursive.

Installation (Android)

...
include ':react-native-toast'
project(':react-native-toast').projectDir = new File(settingsDir, '../node_modules/@remobile/react-native-toast/android')
  • In android/app/build.gradle
...
dependencies {
    ...
    compile project(':react-native-toast')
}
  • register module (in MainApplication.java)
......
import com.remobile.toast.RCTToastPackage;  // <--- import

......

@Override
protected List<ReactPackage> getPackages() {
   ......
   new RCTToastPackage(),            // <------ add here
   ......
}

### Screencasts
![ios](https://github.com/remobile/react-native-toast/blob/master/screencasts/ios.gif)

## Usage

### Example
```js
var React = require('react');
var ReactNative = require('react-native');
var {
    StyleSheet,
    View,
    Image
} = ReactNative;

var Toast = require('react-native-toast');
var Button = require('@remobile/react-native-simple-button');

module.exports = React.createClass({
    render() {
        return (
            <View style={styles.container}>
                <Button onPress={Toast.show.bind(null, "this is a message")}>
                    show
                </Button>
                <Button onPress={Toast.showShortTop.bind(null, "this is a message")}>
                    showShortTop
                </Button>
                <Button onPress={Toast.showShortCenter.bind(null, "this is a message")}>
                    showShortCenter
                </Button>
                <Button onPress={Toast.showShortBottom.bind(null, "this is a message")}>
                    showShortBottom
                </Button>
                <Button onPress={Toast.showLongTop.bind(null, "this is a message")}>
                    showLongTop
                </Button>
                <Button onPress={Toast.showLongCenter.bind(null, "this is a message")}>
                    showLongCenter
                </Button>
                <Button onPress={Toast.showLongBottom.bind(null, "this is a message")}>
                    showLongBottom
                </Button>
            </View>
        );
    },
});


var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'space-around',
        alignItems: 'center',
        backgroundColor: 'transparent',
        paddingVertical:150,
    }
});

HELP

thanks

see detail use

GitHub

https://github.com/remobile/react-native-toast
Comments
  • 1. Sample project

    Hi, I'm new to Xcode and try to install your toast module.

    First it would be helpful to describe the steps more details. Especially I do not fully get the last point... Look for Header Search Paths and make sure it contains both $(SRCROOT)/../../../react-native/React as recursive.

    What should be exactly defined as HEADER_SEARCH_PATHS?

    Within React JS file I tried...

    import Toast from '@remobile/react-native-toast'; Toast.showLongCenter.bind(null, "this is a message");

    But no error and no Toast. Any idea? Adding a small sample project might be quite helpful.

    Reviewed by lunanigra at 2016-10-16 20:54
  • 2. Adds forward compatibility with RN > 0.40 and

    Keeps backwards compatibility. This prevents linker errors on the compiler with React Native versions above 0.40. Also prevents unlinked NativeModules causing the toast not to appear.

    Fixes #18 and #1 For us fixed #12

    Reviewed by jsdario at 2017-04-07 08:16
  • 3. android message 的前面总是会加上 项目名称

    final String message = options.getString("message"); System.out.println("-----" + message);

    这是 传递过来的 message.假设 message 为 “Hello world”. iOS 显示为 Hello world, android 显示为 项目名:Hello world.

    我也做安卓,然而是在不明白这是为什么啊?

    Reviewed by jinzunyue at 2018-07-14 12:11
  • 4. "RCTLog.h" cannot be found

    when i import this component, project will be fail with ' "RCTLog.h" cannot be found'!

    this is cause by wrong head search path in this project, should replace "$(SRCROOT)/../../../react-native/React" to "$(SRCROOT)/../../react-native/React"

    Reviewed by sophiaWang611 at 2015-11-19 11:51
  • 5. How to set up on non React Native 0.65 iOS?

    I can not run on RN 0.65, manual configuration is not working.


    System: OS: macOS 10.15.2 CPU: (4) x64 Intel(R) Core(TM) i5-5675R CPU @ 3.10GHz Memory: 657.49 MB / 8.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 8.12.0 - /usr/local/bin/node Yarn: 1.12.3 - /usr/local/bin/yarn npm: 6.4.1 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1 Android SDK: API Levels: 24, 27, 28 Build Tools: 27.0.3, 28.0.3 System Images: android-25 | Google Play Intel x86 Atom IDEs: Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild npmPackages: react: 16.9.0 => 16.9.0 react-native: 0.61.5 => 0.61.5 npmGlobalPackages: react-native-git-upgrade: 0.2.7

    Reviewed by duarte-evocorp at 2020-01-16 12:00
  • 6. Does not compile for release on android with RN 0.57

    When I compile this with new RN 0.57 I get the following errors:

    The project name '@remobile/react-native-toast' contains at least one of the following characters: [ , /, \, :, <, >, ", ?, *, |]. This has been deprecated and is scheduled to be removed in Gradle 5.0. Set the 'rootProject.name' or adjust the 'include' statement (see https://docs.gradle.org/4.4/dsl/org.gradle.api.initialization.Settings.html#org.gradle.api.initialization.Settings:include(java.lang.String[]) for more details).
    
    > Configure project :@remobile/react-native-toast 
    WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'.
    It will be removed at the end of 2018. For more information see: http://d.android.com/r/tools/update-dependency-configurations.html
    WARNING: The specified Android SDK Build Tools version (23.0.1) is ignored, as it is below the minimum supported version (27.0.3) for Android Gradle Plugin 3.1.4.
    Android SDK Build Tools 27.0.3 will be used.
    To suppress this warning, remove "buildToolsVersion '23.0.1'" from your build.gradle file, as each version of the Android Gradle Plugin now has a default version of the build tools.
    

    and

    error: resource android:style/TextAppearance.Material.Widget.Button.Borderless.Colored not found.
    error: resource android:style/TextAppearance.Material.Widget.Button.Colored not found.
    /home/mieszko4/.gradle/caches/transforms-1/files-1.1/appcompat-v7-27.1.1.aar/2894229df102aba6e62f0ed03c56206b/res/values-v26/values-v26.xml:9:5-12:13: AAPT: error: resource android:attr/colorError not found.
        
    /home/mieszko4/.gradle/caches/transforms-1/files-1.1/appcompat-v7-27.1.1.aar/2894229df102aba6e62f0ed03c56206b/res/values-v26/values-v26.xml:13:5-16:13: AAPT: error: resource android:attr/colorError not found.
        
    /home/mieszko4/.gradle/caches/transforms-1/files-1.1/appcompat-v7-27.1.1.aar/2894229df102aba6e62f0ed03c56206b/res/values-v26/values-v26.xml:17:5-93: AAPT: error: style attribute 'android:attr/keyboardNavigationCluster' not found.
        
    /home/mieszko4/.gradle/caches/transforms-1/files-1.1/appcompat-v7-27.1.1.aar/2894229df102aba6e62f0ed03c56206b/res/values/values.xml:251:5-69: AAPT: error: resource android:attr/fontStyle not found.
        
    /home/mieszko4/.gradle/caches/transforms-1/files-1.1/appcompat-v7-27.1.1.aar/2894229df102aba6e62f0ed03c56206b/res/values/values.xml:251:5-69: AAPT: error: resource android:attr/font not found.
        
    /home/mieszko4/.gradle/caches/transforms-1/files-1.1/appcompat-v7-27.1.1.aar/2894229df102aba6e62f0ed03c56206b/res/values/values.xml:251:5-69: AAPT: error: resource android:attr/fontWeight not found.
        
    error: failed linking references.
    

    This happens when I run for release (for debug it works ok) I am using com.android.tools.build:gradle:3.1.4 As a workaround the following helps:

    subprojects {
        afterEvaluate {project ->
            if (project.hasProperty("android")) {
                android {
                    compileSdkVersion rootProject.ext.compileSdkVersion
                    buildToolsVersion rootProject.ext.buildToolsVersion
                }
            }
        }
    }
    
    Reviewed by mieszko4 at 2019-01-19 21:19
  • 7. Android 编译错误 Unable to find module with Gradle path

    编译报错: Unable to find module with Gradle path ':@remobile/react-native-toast' (needed by module 'app'.) settings.gradle include ':@remobile/react-native-toast' project(':@remobile/react-native-toast').projectDir = new File(rootProject.projectDir, '../node_modules/@remobile/react-native-toast/android')

    app 中 build.gradle compile project(':@remobile/react-native-toast')

    请问有人遇到过同样的问题吗?

    Reviewed by jinzunyue at 2018-08-07 03:39
React-native-customizable-toast: yet another toast library based on reanimated 2 layout animations
React-native-customizable-toast: yet another toast library based on reanimated 2 layout animations

react-native-customizable-toast yet another toast library based on reanimated 2 layout animations Features Imperative API Fully Customizable Custom to

May 15, 2022
react native toast like component, pure javascript solution
react native toast like component, pure javascript solution

react-native-root-toast Features Pure javascript solution. Support both Android and iOS. Lots of custom options for Toast. You can show/hide Toast by

May 12, 2022
A native and easy to use toast plugin for react-native
A native and easy to use toast plugin for react-native

react-native-toast-native React Native Toast is a toast component for both Android and iOS. it uses scalessec/Toast for iOS; Demo: Getting started $ n

Mar 14, 2022
A theme friendly, easy to use react-native toast component built using styled-components and styled-system.
A theme friendly, easy to use react-native toast component built using styled-components and styled-system.

react-native-styled-toast Themeable react-native toast component built using styled-components & styled-system. Features Pure JS implementation Suppor

Apr 27, 2022
Provides a function like transform-origin in css, anchor point in iOS, pivot point in Android. It makes3D transform animation better in React-Native.
Provides a function like transform-origin in css, anchor point in iOS, pivot point in Android. It makes3D transform animation better in React-Native.

react-native-anchor-point Provide a simple, tricky but powerful function, withAnchorPoint , like Anchor Point in iOS, Pivot Point in Android, transfor

May 7, 2022
Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share
Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share

React Native Social Share Use the built-in share view from iOS and Android to let the user share on Facebook and Twitter. It will use the user's exist

Mar 25, 2022
Toast feedback messages for React Native

React-Native-Toastboard Toast feedback messages for React Native Installation Via NPM npm install react-native-toastboard Via YARN yarn add react-na

Apr 30, 2022
React Native ActionSheet for Android & IOS (IOS is using ActionSheetIOS)
React Native ActionSheet for Android & IOS (IOS is using ActionSheetIOS)

React Native ActionSheet This package will help you to using ActionSheetIOS(IOS) and BottomSheetDialog(Android). Usage of this package same as for IOS

May 23, 2021
Page Control for React Native, like iOS UIPageControl, APIs are same as UIPageControl

react-native-page-control Page Control for React Native, like iOS UIPageControl, APIs are same as UIPageControl Installation $ npm install react-nativ

Oct 7, 2021
react native Picker component for both Android and iOS based on pure JavaScript [for the old realize, you can use the version 0.0.8]
react native Picker component for both Android and iOS based on pure JavaScript [for the old realize, you can use the version 0.0.8]

The React-Native-Picker react native Picker component for both Android and iOS based on pure JavaScript. Main For the iOS, using PickerIOS as the basi

Aug 3, 2021
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

May 6, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

Nov 13, 2021
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])

React Native MarqueeLabel (remobile) A marquee label for react-native if you use js pure marquee, use remobile/react-native-marquee[ https://github.co

Mar 7, 2022
React Native Android module to use Android's AlertDialog - same idea of AlertIOS

react-native-simpledialog-android React Native Android module to use Android's AlertDialog - same idea of AlertIOS Installation npm install react-nati

Mar 1, 2020
Native CardView for react-native (All Android version and iOS)
Native CardView for react-native (All Android version and iOS)

react-native-card-view Native CardView that compatible for iOS and Android( both lollipop and pre-lolipop). Website Material Design Card Spec CardView

May 1, 2022
A Cross Platform(Android & iOS) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.
A Cross Platform(Android & iOS) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.

react-native-actions-sheet A highly customizable cross platform ActionSheet for react native. Screenshots Features Cross Platform (iOS and Android) Na

May 17, 2022
iOS and Android native search component for react native

react-native-search-bar iOS native search bar for react native. Installation In your react native project, run npm install react-native-search-bar --s

May 19, 2021
🔽 A Picker component for React Native which emulates the native select> interfaces for iOS and Android
🔽 A Picker component for React Native which emulates the native select> interfaces for iOS and Android

react-native-picker-select A Picker component for React Native which emulates the native <select> interfaces for iOS and Android For iOS, by default w

May 8, 2022