react-native-toast-native .React Native Toast is a toast component for both Android and iOS. it uses scalessec/Toast for iOS;
$ npm install react-native-toast-native --save
$ react-native link react-native-toast-native
Add the following to your podfile:
pod 'RNToastNative', :path => '../node_modules/react-native-toast-native/ios`
Libraries
➜ Add Files to [your project's name]
node_modules
➜ react-native-toast-native
and add RNToastNative.xcodeproj
libRNToastNative.a
to your project’s Build Phases
➜ Link Binary With Libraries
Cmd+R
)android/app/src/main/java/[...]/MainActivity.java
import com.toast.RCTToastPackage;
to the imports at the top of the filenew RCTToastPackage()
to the list returned by the getPackages()
methodAppend the following lines to android/settings.gradle
:
include ':react-native-toast-native'
project(':react-native-toast-native').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-toast-native/android')
Insert the following lines inside the dependencies block in android/app/build.gradle
:
compile project(':react-native-toast-native')
It’s just the same as ToastAndroid
import Toast from 'react-native-toast-native';
Toast.show(); // Default toast message is shown.
Toast.show('This is a toast.'); // Specific message is shown with default duration("SHORT") and poistion("TOP") and styles.
Toast.show('This is a long toast.',Toast.LONG); //Specific message and duration are shown with default position and styles.
It is higly customasible. Just provide a style object as a parameter. example:
import Toast from 'react-native-toast-native';
const styles={
width,
height,
backgroundColor,
color,
borderWidth,
borderColor,
borderRadius
}
Toast.show('This is a long toast.',Toast.SHORT,Toast.TOP,styles);
// Customizable toast message is shown with specific message,duration and position.
You can style the toast with below options; Android:
{
width,
height,
backgroundColor,
color,
borderWidth,
paddingLeft,
paddingRight,
paddingBottom,
paddingTop,
fontSize,
lineHeight,
xOffset,
yOffset,
letterSpacing,
fontWeight
}
Ios:
{
width,
height,
backgroundColor,
color,
borderWidth,
borderColor,
borderRadius
}
if you want to make a customizable toast,you add an object like above to show
and showGravity
import Toast from 'react-native-toast-native';
import {Platform} from 'react-native';
const style={
backgroundColor: "#4ADDFB",
width: 300,
height: Platform.OS === ("ios") ? 50 : 100,
color: "#ffffff",
fontSize: 15,
lineHeight: 2,
lines: 4,
borderRadius: 15,
fontWeight: "bold",
yOffset: 40
};
Toast.show(message, Toast.SHORT, Toast.TOP,style);
Author: onemolegames
GitHub: https://github.com/onemolegames/react-native-toast-native
#react-native #programming