zahidalidev / toastify-react-native Goto Github PK
View Code? Open in Web Editor NEW๐ toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!
License: MIT License
๐ toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!
License: MIT License
Thanks @Abrar-Devs .
Originally posted by @zahidalidev in #10 (comment)
Hi. I hope you are well. after installing the package I have an error with react-native-modal.
this is my package version "toastify-react-native": "^4.0.0",
Clicking the close button on ios doesn't do anything, but it does work on android.
Is there any way to remove the status bar?
I have shown the toast after creating and updating any item. But when I create or update an item the item list refreshes and shows an activity indicator. At that time the toast progress bar didn't run smoothly for me.
Hi,
Thanks for the creating of this library, it is really helpful.
I got an issue about progress bar that cannot run smoothly, i set the duration to 3000 and after toast is finished, the keyboard will show up. Probably you can help me.
Thank you.
when I action very fast so the alert is stop one position
Is there any way to reduce fontsize for toast?
I tried with <ToastManager style={{fontSize:12}} />
but it doesn't work.
Also can we make width as 100% rather giving a numeric value.
error: Error: Unable to resolve module react-native-modal from E:\live_cafeapp\node_modules\toastify-react-native\components\ToastManager.js: react-native-modal could not be found within the project or in these directories:
Could you make it possible to use custom icons and icon styles (color, size, etc)?
Create the types definition of the library
I made ToastifyProvider like this
import React, { createContext, useContext, useState } from 'react';
import ToastManager, { Toast } from 'toastify-react-native';
// Create a context to manage toast state
const ToastContext = createContext<{
showToast: (type:string, message: string) => void;
}>({
showToast: () => {},
});
// Create a ToastProvider component
export const ToastProvider = ({ children }:any) => {
const showToast = (type: string, message: string) => {
switch(type) {
case 'success':
return Toast.success(message);
case 'warn':
return Toast.warn(message);
case 'error':
return Toast.error(message);
default:
break;
}
};
return (
<ToastContext.Provider value={{ showToast }}>
{children}
<ToastManager
width={307}
height={58}
animationStyle="rightInOut"
duration={2000}
/>
</ToastContext.Provider>
);
};
// Create a custom hook to use the ToastProvider context
export const useToast = () => {
return useContext(ToastContext);
};
And This is my App.tsx code
function App(): JSX.Element {
return (
<NativeBaseProvider>
<ToastProvider>
<NavigationContainer>
<Stack.Navigator initialRouteName="Login">
<Stack.Screen
name='Login'
component={TestLogin}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Valve"
component={Valve}
options={{
title: "Valves",
headerShown: false
}}
/>
</Stack.Navigator>
</NavigationContainer>
</ToastProvider>
</NativeBaseProvider>
);
}
And I am using FullScreen Modal in Valve Screen Component, but Toastify message showed behind Modal
Can anyone help me to show alert on React-Native Modal?
I noticed in your description that you mentioned, "You can display multiple toasts at the same time." I'm curious about how this can be achieved. Could you please provide an example to illustrate the process? Thank you very much.
how to make the toast appears over the backdrop of the RBSheet
Description:
Encountered issues with missing information while working on a project. Errors indicate the absence of essential dependencies, particularly related to modals and responsive font sizing.
Errors:
Fix:
I manually added the missing dependencies to make it work. Can we update the docs with clear install steps for these if these dependencies are needed in our project?
Info:
Hello, I have an error in the font in the ios project
https://drive.google.com/file/d/14yfnwQH3NhzH-wFDxqGYgwL5HOmyuA0z/view?usp=sharing
https://drive.google.com/file/d/1tHdSzJKGVKifM82azCHTb-Cu2RNQn4Y8/view?usp=sharing
I have correction suggestions, I can create a pull request if you prefer.
Thanks for your lib!
ios-close-outline
no longer exist on lib react-native-vector-icons
On ToastManager.js
<TouchableOpacity onPress={this.hideToast} activeOpacity={0.9} style={styles.hideButton}>
<Icon name='ios-close-outline' size={22} color={Colors[theme].text} />
</TouchableOpacity>
replace with
close-outline
Facing below issue after installing the subject package:
This library simply doesn't work properly, TOAST doesn't appear in some components, there's no way to make a global configuration, I've already tried to create a context for it but it doesn't do anything, it still doesn't appear in some specific components, no error appears indicating the reason for it not appearing, as already mentioned in someone else's error below, the INFO type gives the following error WARN "ios-information-circle" is not a valid icon name for family "ionicons", simply poorly done, the devs who developed it She doesn't respond to issues, difficult. I do not recommend.
My CONTEXT
I have to import it in all components for it to appear, I even have to import it within MODALS for it to appear, does it really work like this or is there another way?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.