react-native-toast-native
React Native Toast component for both Android and iOS. It just let iOS have the same toast performance with Android. Using scalessec/Toast for iOS;
Demo:
Getting started
$ npm install react-native-toast-native --save
Mostly automatic installation
$ react-native link react-native-toast-native
Manual installation
iOS
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜react-native-toast-native
and addRNToastNative.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNToastNative.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Run your project (
Cmd+R
)
Android
- Open up
android/app/src/main/java/[...]/MainActivity.java
- Add
import com.toast.RCTToastPackage;
to the imports at the top of the file - Add
new RCTToastPackage()
to the list returned by thegetPackages()
method
- Append 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')
## Usage
It's just the same as ToastAndroid
; Toast; // Default toast message is shown.Toast; // Specific message is shown with default duration("SHORT") and poistion("TOP") and styles.Toast; //Specific message and duration are shown with default position and styles.
You want to make customizable through style objects.You must give required parameters to this show method like following example:
; const styles= width height backgroundColor color borderWidth borderColor borderRadius Toast; // Customizable toast message is shown with specific message,duration and position.
## Options
Toast was been able to make customizable through these properties You can make customizable all of them or some of them or you can use default toast style. 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
#### Example usage:
;;const style= backgroundColor: "#4ADDFB" width: 300 height: PlatformOS === "ios" ? 50 : 100 color: "#ffffff" fontSize: 15 lineHeight: 2 lines: 4 borderRadius: 15 fontWeight: "bold" yOffset: 40 ; Toast;