Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added onShowing, onShown, onClosing, onClosed prop events  #47

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

added onShowing, onShown, onClosing, onClosed prop events  #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
68df6c8
added onShowing, onShown, onClosing, onClosed prop events
coderproject Sep 9, 2018
df24a09
added onShowing, onShown, onClosing, onClosed
coderproject Sep 9, 2018
b7f103b
Merge pull request #1 from CoderProject/patch-2
coderproject Sep 9, 2018
8406438
add parameter to onClosed
coderproject Sep 12, 2018
ca7e6fd
cleared timeout on manual close
coderproject Sep 13, 2018
9fb5414
updated defaultProps
coderproject Sep 14, 2018
35aa69c
updated readme
coderproject Sep 14, 2018
a60a7c4
removed unused argument
coderproject Sep 14, 2018
64c49c8
merge [email protected]:robcalcroft/react-native-in-app-notification.git…
YamadaTakahito Apr 15, 2021
0a322a2
add additionalProps to onShowing, onShown, onClosing and onClosed
YamadaTakahito Apr 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 20 additions & 16 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,29 +58,33 @@ For Android you need to add the `VIBRATE` permission to your app `AndroidManifes

## Props

| Prop Name | Prop Description | Data Type | Required | Default |
| ------------------------- | --------------------------------------------------- | ---------------------- | ----------- | --------------------------- |
| closeInterval | How long the notification stays visible | Number | No | `4000` |
| openCloseDuration | The length of the open / close animation | Number | No | `200` |
| height | The height of the Notification component | Number | No | `80` |
| backgroundColour | The background colour of the Notification component | String | No | `white` |
| iconApp | App Icon | ImageSourcePropType | No | `null` |
| notificationBodyComponent | **See below about NotificationBody** | React Node or Function | Recommended | `./DefaultNotificationBody` |
| Prop Name | Prop Description | Data Type | Required | Default |
| -------------------------- | --------------------------------------------------- | ---------------------- | ----------- | --------------------------- |
| closeInterval | How long the notification stays visible | Number | No | `4000` |
| openCloseDuration | The length of the open / close animation | Number | No | `200` |
| height | The height of the Notification component | Number | No | `80` |
| backgroundColour | The background colour of the Notification component | String | No | `white` |
| iconApp | App Icon | ImageSourcePropType | No | `null` |
| notificationBodyComponent | **See below about NotificationBody** | React Node or Function | Recommended | `./DefaultNotificationBody` |
| onShowing(additionalProps) | Method called before showing notification | Function | No | `null` |
| onShown(additionalProps) | Method called after notification shown | Function | No | `null` |
| onClosing(additionalProps) | Method called before closing notification | Function | No | `null` |
| onClosed(additionalProps) | Method called after notification closed | Function | No | `null` |

### NotificationBody

The notification body is what is rendered inside the main Notification component and gives you the ability to customise how the notification looks. You can use the default notification body component in `./DefaultNotificationBody.js` as inspiration and guidance.

Your `notificationBodyComponent` component is given five props:

| Prop Name | Prop Description | Data Type | Default |
| ----------------- | ------------------------------------------------------------- | ------------------- | ------- |
| title | The title passed to `NotificationRef.show` | String | `''` |
| message | The message passed to `NotificationRef.show` | String | `''` |
| onPress | The callback passed to `NotificationRef.show` | Function | `null` |
| icon | Icon for notification passed to `NotificationRef.show` | ImageSourcePropType | `null` |
| vibrate | Vibrate on show notification passed to `NotificationRef.show` | Boolean | `true` |
| additionalProps | Any additional props passed to `NotificationBodyComponent` | Object | `null` |
| Prop Name | Prop Description | Data Type | Default |
| ----------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------- | ------- |
| title | The title passed to `NotificationRef.show` | String | `''` |
| message | The message passed to `NotificationRef.show` | String | `''` |
| onPress | The callback passed to `NotificationRef.show` | Function | `null` |
| icon | Icon for notification passed to `NotificationRef.show` | ImageSourcePropType | `null` |
| vibrate | Vibrate on show notification passed to `NotificationRef.show` | Boolean | `true` |
| additionalProps | Any additional props passed to `NotificationBodyComponent`, `onShowing`, `onShown`, `onClosing` and `onClosed` | Object | `null` |

## Usage

Expand Down
34 changes: 31 additions & 3 deletions src/Notification.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,19 +85,35 @@ class Notification extends Component {
}

showNotification(done) {
const {
onShowing,
onShown
} = this.props;
onShowing(this.state.additionalProps);
Animated.timing(this.state.animatedValue, {
toValue: 1,
duration: this.props.openCloseDuration,
useNativeDriver: true,
}).start(done);
}).start(() => {
done();
onShown(this.state.additionalProps);
});
}

closeNotification(done) {
const {
onClosing,
onClosed
} = this.props;
onClosing(this.state.additionalProps);
Animated.timing(this.state.animatedValue, {
toValue: 0,
duration: this.props.openCloseDuration,
useNativeDriver: true,
}).start(done);
}).start(() => {
done && done();
onClosed(this.state.additionalProps);
});
}

render() {
Expand Down Expand Up @@ -138,7 +154,11 @@ class Notification extends Component {
iconApp={iconApp}
icon={icon}
vibrate={vibrate}
onClose={() => this.setState({ isOpen: false }, this.closeNotification)}
onClose={() => {
//clear timeout
clearTimeout(this.currentNotificationInterval);
this.setState({ isOpen: false }, this.closeNotification);
}}
additionalProps={this.state.additionalProps}
/>
</Animated.View>
Expand All @@ -154,6 +174,10 @@ Notification.propTypes = {
backgroundColour: PropTypes.string,
notificationBodyComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
iconApp: Image.propTypes.source,
onShowing: PropTypes.func,
onShown: PropTypes.func,
onClosing: PropTypes.func,
onClosed: PropTypes.func
};

Notification.defaultProps = {
Expand All @@ -164,6 +188,10 @@ Notification.defaultProps = {
backgroundColour: 'white',
notificationBodyComponent: DefaultNotificationBody,
iconApp: null,
onShowing: (additionalProps) => {},
onShown: (additionalProps) => {},
onClosing: (additionalProps) => {},
onClosed: (additionalProps) => {},
};

export default Notification;