diff --git a/packages/docs-reanimated/docs/advanced/dispatchCommand.mdx b/packages/docs-reanimated/docs/advanced/dispatchCommand.mdx
index 4bd2c16f0e4..d1a2d0bda1c 100644
--- a/packages/docs-reanimated/docs/advanced/dispatchCommand.mdx
+++ b/packages/docs-reanimated/docs/advanced/dispatchCommand.mdx
@@ -4,71 +4,82 @@ sidebar_position: 7
# dispatchCommand
-import DocsCompatibilityInfo from '../_shared/_docs_compatibility_info.mdx';
+import DispatchCommandSrc from '!!raw-loader!@site/src/examples/DispatchCommand';
-
+`dispatchCommand` allows you to run commands on a native component from the UI thread directly.
-Allows to dispatch command on a native component synchronously from the UI thread.
+## Reference
+
+```javascript
+import { dispatchCommand } from 'react-native-reanimated';
+
+function App() {
+ const animatedRef = useAnimatedRef();
+
+ const gesture = Gesture.Tap().onStart(() => {
+ // highlight-next-line
+ dispatchCommand(animatedRef, 'focus');
+ });
+
+ return (
+ <>
+
+
+
+
+
+ );
+}
+```
+
+
+Type definitions
+
+```typescript
+function dispatchCommand(
+ animatedRef: AnimatedRef,
+ commandName: string,
+ args?: unknown[]
+) => void;
+```
+
+
### Arguments
#### `animatedRef`
-The product of [`useAnimatedRef`](/docs/core/useAnimatedRef) which is Reanimated's extension of a standard React ref (delivers the view tag on the UI thread).
+An [animated ref](/docs/core/useAnimatedRef#returns) connected to the component you'd want to update. The animated ref has to be passed either to an [Animated component](/docs/fundamentals/glossary#animated-component) or a React Native built-in component.
-#### `commandName` [String]
+#### `commandName`
-The name of the command to execute, e.g. `focus` or `scrollToEnd`.
+The name of the command to execute, e.g. `'focus'` or `'scrollToEnd'`.
-#### `args` [Array]
+#### `args`
The array of command arguments. Defaults to an empty array.
-### Returns
+## Example
-`void`
+
-### Example
+
-```ts
-import Animated, {
- dispatchCommand,
- useAnimatedRef,
-} from 'react-native-reanimated';
-import { Button, StyleSheet, TextInput, View } from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+## Remarks
-import React from 'react';
+- Commands differ from component to component. Check relevant sources i.e. React Native documentation on [components](https://reactnative.dev/docs/components-and-apis) to see which commands are available.
-const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+## Platform compatibility
-export default function DispatchCommandExample() {
- const aref = useAnimatedRef();
+
diff --git a/packages/docs-reanimated/src/examples/DispatchCommand.tsx b/packages/docs-reanimated/src/examples/DispatchCommand.tsx
new file mode 100644
index 00000000000..306603163c9
--- /dev/null
+++ b/packages/docs-reanimated/src/examples/DispatchCommand.tsx
@@ -0,0 +1,260 @@
+import Animated, {
+ dispatchCommand,
+ useAnimatedRef,
+} from 'react-native-reanimated';
+import {
+ SafeAreaView,
+ StyleSheet,
+ TextInput,
+ View,
+ Text,
+ Alert,
+ Pressable,
+} from 'react-native';
+import {
+ Gesture,
+ GestureDetector,
+ GestureHandlerRootView,
+} from 'react-native-gesture-handler';
+import React, { useState } from 'react';
+
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+
+export default function LoginFormExample() {
+ const tosRef = useAnimatedRef();
+ const loginRef = useAnimatedRef();
+
+ const [login, setLogin] = useState('');
+ const [password, setPassword] = useState('');
+
+ const goDown = Gesture.Tap().onStart(() => {
+ dispatchCommand(tosRef, 'scrollToEnd', [true]);
+ dispatchCommand(loginRef, 'focus');
+ });
+
+ const handleLogin = () => {
+ Alert.alert(`Welcome ${login}`, 'Successfully logged in!');
+ };
+
+ return (
+
+
+
+
+
+
+
+ I'm tired of reading.
+
+
+
+ Terms of Service
+
+ Welcome to Services! These Terms of Service ("Terms") govern your
+ use of our website, products, and services ("Services"). By
+ accessing or using our Services, you agree to be bound by these
+ Terms. If you do not agree to these Terms, do not use our Services.
+
+ 1. Acceptance of Terms
+
+ By using our Services, you affirm that you are at least 18 years
+ old, or if you are under 18 years old, that you have the consent of
+ your parent or legal guardian.
+
+ 2. Changes to Terms
+
+ We reserve the right to modify these Terms at any time. We will
+ notify you of any changes by posting the new Terms on our website.
+ You are advised to review these Terms periodically for any changes.
+ Your continued use of the Services after the changes are posted
+ constitutes your acceptance of the new Terms.
+
+ 3. Use of Services
+
+ You agree to use the Services only for lawful purposes and in
+ accordance with these Terms. You agree not to use the Services:
+ {'\n'}• In any way that violates any applicable federal, state,
+ local, or international law or regulation.
+ {'\n'}• For the purpose of exploiting, harming, or attempting to
+ exploit or harm minors in any way.
+ {'\n'}• To transmit, or procure the sending of, any advertising or
+ promotional material, including any "junk mail," "chain letters,"
+ "spam," or any other similar solicitation.
+ {'\n'}• To impersonate or attempt to impersonate Services, a
+ Services employee, another user, or any other person or entity.
+ {'\n'}• In any way that infringes upon the rights of others, or in
+ any way is illegal, threatening, fraudulent, or harmful, or in
+ connection with any unlawful, illegal, fraudulent, or harmful
+ purpose or activity.
+ {'\n'}• To engage in any other conduct that restricts or inhibits
+ anyone's use or enjoyment of the Services, or which, as determined
+ by us, may harm Services or users of the Services, or expose them to
+ liability.
+
+ 4. User Accounts
+
+ To access some of the Services, you may be required to create an
+ account. You agree to provide accurate, current, and complete
+ information during the registration process and to update such
+ information to keep it accurate, current, and complete. You are
+ responsible for safeguarding your password and agree not to disclose
+ your password to any third party. You agree that you are solely
+ responsible for any activities or actions under your account,
+ whether you have authorized such activities or actions. You will
+ immediately notify us of any unauthorized use of your account.
+
+ 5. Termination
+
+ We may terminate or suspend your access to the Services immediately,
+ without prior notice or liability, for any reason whatsoever,
+ including without limitation if you breach the Terms. Upon
+ termination, your right to use the Services will immediately cease.
+ If you wish to terminate your account, you may simply discontinue
+ using the Services.
+
+ 6. Limitation of Liability
+
+ In no event shall Services, nor its directors, employees, partners,
+ agents, suppliers, or affiliates, be liable for any indirect,
+ incidental, special, consequential, or punitive damages, including
+ without limitation, loss of profits, data, use, goodwill, or other
+ intangible losses, resulting from (i) your use or inability to use
+ the Service; (ii) any unauthorized access to or use of our servers
+ and/or any personal information stored therein; (iii) any
+ interruption or cessation of transmission to or from the Service;
+ (iv) any bugs, viruses, trojan horses, or the like that may be
+ transmitted to or through our Service by any third party; (v) any
+ errors or omissions in any content or for any loss or damage
+ incurred as a result of your use of any content posted, emailed,
+ transmitted, or otherwise made available through the Service; and/or
+ (vi) the defamatory, offensive, or illegal conduct of any third
+ party. In no event shall Services be liable for any claims,
+ proceedings, liabilities, obligations, damages, losses, or costs in
+ an amount exceeding the amount you paid to Services hereunder or
+ $100.00, whichever is greater.
+
+ 7. Governing Law
+
+ These Terms shall be governed and construed in accordance with the
+ laws of Poland, without regard to its conflict of law provisions.
+ Our failure to enforce any right or provision of these Terms will
+ not be considered a waiver of those rights. If any provision of
+ these Terms is held to be invalid or unenforceable by a court, the
+ remaining provisions of these Terms will remain in effect. These
+ Terms constitute the entire agreement between us regarding our
+ Service, and supersede and replace any prior agreements we might
+ have had between us regarding the Service.
+
+
+ Welcome!
+
+ By logging in you accept our Terms of Service.
+
+
+
+
+ Login
+
+
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ safeArea: {
+ flex: 1,
+ backgroundColor: '#f8f9fa',
+ },
+ container: {
+ flex: 1,
+ },
+ tosContainer: {
+ alignItems: 'center',
+ paddingHorizontal: 20,
+ },
+ background: {
+ width: '10%',
+ },
+ tosTitle: {
+ fontSize: 22,
+ fontWeight: '700',
+ marginVertical: 16,
+ color: '#001a72',
+ },
+ tosSubtitle: {
+ fontSize: 18,
+ fontWeight: '600',
+ marginVertical: 16,
+ color: '#001a72',
+ },
+ tosContent: {
+ fontFamily: 'Aeonik',
+ fontSize: 16,
+ marginBottom: 8,
+ color: '#001a72',
+ },
+ input: {
+ borderWidth: 1,
+ borderColor: '#ced4da',
+ color: '#001a72',
+ borderRadius: 8,
+ width: '80%',
+ padding: 12,
+ fontSize: 16,
+ marginBottom: 20,
+ },
+ stickyButtonContainer: {
+ backgroundColor: '#f8f9ff',
+ paddingVertical: 16,
+ paddingHorizontal: 48,
+ width: '100%',
+ },
+ button: {
+ backgroundColor: '#b58df1',
+ marginVertical: 16,
+ paddingVertical: 12,
+ paddingHorizontal: 48,
+ borderRadius: 32,
+ },
+ buttonText: {
+ fontSize: 18,
+ color: '#f8f9ff',
+ textAlign: 'center',
+ },
+ loginForm: {
+ marginVertical: 32,
+ width: '100%',
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ loginFormTitle: {
+ fontSize: 22,
+ fontFamily: 'Aeonik',
+ color: '#001a72',
+ fontWeight: '600',
+ marginBottom: 8,
+ },
+ loginFormSubtitle: {
+ fontFamily: 'Aeonik',
+ color: '#001a7299',
+ marginBottom: 16,
+ },
+});
diff --git a/packages/docs-reanimated/static/recordings/dispatchCommand_android.mov b/packages/docs-reanimated/static/recordings/dispatchCommand_android.mov
new file mode 100644
index 00000000000..9b0a55af351
Binary files /dev/null and b/packages/docs-reanimated/static/recordings/dispatchCommand_android.mov differ
diff --git a/packages/docs-reanimated/static/recordings/dispatchCommand_ios.mov b/packages/docs-reanimated/static/recordings/dispatchCommand_ios.mov
new file mode 100644
index 00000000000..75fda5be714
Binary files /dev/null and b/packages/docs-reanimated/static/recordings/dispatchCommand_ios.mov differ