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

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-toast-native and add RNToastNative.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNToastNative.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)

Android

1. 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 the getPackages() method

1. 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')

`` 3. 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
```javascript 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. ``` You want to make customizable through style objects.You must give required parameters to this show method like following example:

```javascript

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.

```

## 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: ```javascript {

width,
height,
backgroundColor,
color,
borderWidth,
paddingLeft,
paddingRight,
paddingBottom,
paddingTop,
fontSize,
lineHeight,
xOffset,
yOffset,
letterSpacing,
fontWeight

} ``` Ios: ```javascript

{
                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:
```javascript 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);

```