Create Redux Based Toast Notification For React Native Applications

Category: React React Others | July 6, 2021
Author: Blaumaus
Official Page: Go to website
Last Update: July 6, 2021
License: MIT

react toast notification

Description:

react-native-redux-alert is a redux based toast notification component for React Native. Which is purely written in JavaScript and is compatible with Expo and React Native. Its easy to implement in your existing or new application and is fully customizable.

How to use it?

Step1: First, install the component with NPM.

npm install --save react-native-redux-alert

Step2: Then, you have to add alertReducer to your store.

import { createStore, combineReducers } from 'redux'
import { alertReducer } from 'react-native-redux-alert'
const reducers = combineReducers({
  alertReducer,
})
export default createStore(reducers)

Step3: In this step, you will have to mount the alert into the component where you will be using it.

import React from 'react'
import { Provider } from 'react-redux'
import { SafeAreaView } from 'react-native'
import { Alert } from 'react-native-redux-alert'

import store from './src/redux/store'
import Home from './src/Home'

const App = () => (
  <Provider store={store}>
    <SafeAreaView style={{ flex: 1 }}>
      <Home />
      <Alert />
    </SafeAreaView>
  </Provider>
)

Step4: Next, you are able to call the toast messages by dispatching the appropriate action like this.

import React from 'react'
import { Button, View } from 'react-native'
import { actions } from 'react-native-redux-alert'

const Home = ({ dispatch }) => {
  const warningHandler = () => {
    dispatch(actions.showWarning('A warning message!', 2500))
  }

  return (
    <View>
      <Button title={'Warn'} onPress={warningHandler} />
    </View>
  )
}