kmagiera

function SomeComponent() {
  const randomWidth = useSharedValue(64);

  const style = useAnimatedStyle(() => {
    return {
      // get the value carried by `randomWidth` SV by accessing value field
      width: randomWidth.value,
    };
  });

kmagiera

return (
  <View style={styles.container}>
    {/* you can mix static RN styles and animated styles */}
    <Animated.View style={[styles.box, style]} />
  </View>
);

kmagiera

const style = useAnimatedStyle(() => {
  // when defining method in one of the hooks from reanimated, you don't
  // need to add 'worklet' directive. It is a worklet by default.
  return {
    width: 64,
  };
});

kmagiera

function callback(text) {
  console.log('Running on the RN thread', text);
}

function someWorklet() {
  'worklet';
  console.log("I'm on UI but can call methods from the RN thread");
  callback('can pass arguments too');
}

kmagiera

function returningWorklet() {
  'worklet';
  return "I'm back";
}

function someWorklet() {
  'worklet';
  let what = returningWorklet();
  console.log('On the UI thread, other worklet says', what);
}

kmagiera

const width = 135.5;

function otherWorklet() {
  'worklet';
  console.log('Captured width is', width);
}

kmagiera

function someWorklet(greeting) {
  'worklet';
  console.log(greeting, 'From the UI thread');
}

function onPress() {
  runOnUI(someWorklet)('Howdy');
}

kmagiera

function someWorklet(greeting) {
  'worklet';
  console.log("Hey I'm running on the UI thread");
}

kmagiera

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { PanGestureHandler, State } from 'react-native-gesture-handler';
import Animated from 'react-native-reanimated';

function Snappable() {
  const dragStartX = useSharedValue(0);
  const translateX = useSharedValue(0);

  const boxStyle = useAnimatedStyle(

kmagiera

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { PanGestureHandler, State } from 'react-native-gesture-handler';
import Animated from 'react-native-reanimated';

function Snappable() {
  const boxStyle = useAnimatedStyle(
    context => {
      return {
        transform: [{ translateX: context.translateX }],