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 => , }, ];