Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/onemolegames/react-native-toast-native
A native and easy to use toast plugin for react-native
https://github.com/onemolegames/react-native-toast-native
android ios react-native toast
Last synced: about 1 month ago
JSON representation
A native and easy to use toast plugin for react-native
- Host: GitHub
- URL: https://github.com/onemolegames/react-native-toast-native
- Owner: onemolegames
- Created: 2017-06-20T06:46:16.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-11-27T19:57:51.000Z (over 3 years ago)
- Last Synced: 2024-04-15T00:00:06.311Z (about 2 months ago)
- Topics: android, ios, react-native, toast
- Language: Objective-C
- Homepage:
- Size: 98.6 KB
- Stars: 100
- Watchers: 6
- Forks: 43
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
Lists
- awesome-react-native - react-native-toast-native ★51
- awesome-reactnative-ui - react-native-toast-native - native|<ul><li>Last updated : This week</li><li>Stars : 60</li><li>Open issues : 18</li></ul>|| (Others)
- awesome-react-native - react-native-toast-native ★51
- awesome - react-native-toast-native ★51
- awesome-react-native - react-native-toast-native ★21
- awesome-reactnative-ui - react-native-toast-native - native|<ul><li>Last updated : This week</li><li>Stars : 60</li><li>Open issues : 18</li></ul>|| (Others)
- awesome-react-native - react-native-toast-native ★51
- awesome-react-native - react-native-toast-native ★21
- awesome-react-native - react-native-toast-native ★51
- awesome-react-native - react-native-toast-native ★51
README
[](https://stackshare.io/onemolegames/onemolegames)
# react-native-toast-native
React Native Toast is a toast component for both Android and iOS. it uses [scalessec/Toast](https://github.com/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 (CocoaPods)
Add the following to your podfile:
```
pod 'RNToastNative', :path => '../node_modules/react-native-toast-native/ios`
```
#### 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
2. 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](http://facebook.github.io/react-native/docs/toastandroid.html)
```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.
```
It is higly customasible. Just provide a style object as a parameter.
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
You can style the toast with below options;
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);
```