diff --git a/packages/rn-tester/js/examples/Vibration/VibrationExample.js b/packages/rn-tester/js/examples/Vibration/VibrationExample.js
index b328d80f538db8..2ad338fed5f054 100644
--- a/packages/rn-tester/js/examples/Vibration/VibrationExample.js
+++ b/packages/rn-tester/js/examples/Vibration/VibrationExample.js
@@ -10,108 +10,123 @@
'use strict';
-const React = require('react');
-
-const {
+import React from 'react';
+import {
StyleSheet,
View,
Text,
TouchableHighlight,
Vibration,
Platform,
-} = require('react-native');
+} from 'react-native';
exports.framework = 'React';
exports.title = 'Vibration';
-exports.description = 'Vibration API';
+exports.description =
+ 'Vibration API that exposes methods to make device vibrate.';
+/** show platform specific parameter usage */
let pattern, patternLiteral, patternDescription;
+
if (Platform.OS === 'android') {
pattern = [0, 500, 200, 500];
patternLiteral = '[0, 500, 200, 500]';
- patternDescription = `${patternLiteral}
-arg 0: duration to wait before turning the vibrator on.
-arg with odd: vibration length.
-arg with even: duration to wait before next vibration.
+ patternDescription = `Vibration length on Android can be set as needed.
+
+For Example, the arguments :
+${patternLiteral} behave following these rules.
+
+argument at 0: duration to wait before turning the vibrator on.
+argument at odd index: vibration length.
+argument at even index: duration to wait before next vibration.
`;
} else {
pattern = [0, 1000, 2000, 3000];
patternLiteral = '[0, 1000, 2000, 3000]';
- patternDescription = `${patternLiteral}
-vibration length on iOS is fixed.
-pattern controls durations BETWEEN each vibration only.
+ patternDescription = `Unlike Android, vibration length on iOS is fixed.
+
+For example, the pattern in arguments : ${patternLiteral} control only the durations BETWEEN each vibration.
-arg 0: duration to wait before turning the vibrator on.
-subsequent args: duration to wait before next vibration.
+argument at 0: duration to wait before turning the vibrator on.
+rest arguments: duration to wait before next vibration.
`;
}
+/** example use-cases */
+const PlatformDescription = () => (
+
+ {patternDescription}
+
+);
+
+const SingleVibrateExample = () => (
+ Vibration.vibrate(1000)}>
+
+ Vibrate
+
+
+);
+
+const PatternVibrateExample = () => (
+ Vibration.vibrate(pattern)}>
+
+ Vibrate following pattern
+
+
+);
+
+const InfiniteVibrateExample = () => (
+ Vibration.vibrate(pattern, true)}>
+
+ Vibrate until cancel
+
+
+);
+
+const StopVibrationExample = () => (
+ Vibration.cancel()}>
+
+ Stop Vibration
+
+
+);
+
exports.examples = [
{
- title: 'Pattern Descriptions',
- render(): React.Node {
- return (
-
- {patternDescription}
-
- );
- },
+ title: 'API Description',
+ description:
+ 'The vibration API behaves differently for different platforms, the use-case for your current platform is given here',
+ render: (): React.Node => ,
},
{
- title: 'Vibration.vibrate()',
- render(): React.Node {
- return (
- Vibration.vibrate()}>
-
- Vibrate
-
-
- );
- },
+ title: 'Simple Device Vibration',
+ description:
+ 'The vibrate method without any argument triggers a single vibration cycle.',
+ render: (): React.Node => ,
},
+
{
- title: `Vibration.vibrate(${patternLiteral})`,
- render(): React.Node {
- return (
- Vibration.vibrate(pattern)}>
-
- Vibrate once
-
-
- );
- },
+ title: 'Vibration based on timed pattern',
+ description: `The vibrate method can be used to trigger the vibration as per the passed pattern. Here, the api call processes the pattern : ${patternLiteral}.`,
+ render: (): React.Node => ,
},
{
- title: `Vibration.vibrate(${patternLiteral}, true)`,
- render(): React.Node {
- return (
- Vibration.vibrate(pattern, true)}>
-
- Vibrate until cancel
-
-
- );
- },
+ title: 'Infinite vibration until manually stopped',
+ description:
+ 'Vibration.vibrate provides an api to trigger the device vibrator, and accepts two parameters. Setting the second(option) repeat parameter to true makes the device vibrate untill manually cancelled.',
+ render: (): React.Node => ,
},
{
- title: 'Vibration.cancel()',
- render(): React.Node {
- return (
- Vibration.cancel()}>
-
- Cancel
-
-
- );
- },
+ title: 'Stop device vibration',
+ description:
+ 'Once a vibration call has been made with the repeat enabled, the vibration would continue until Vibration.cancel() is called.',
+ render: (): React.Node => ,
},
];