piaskowyk

import { useEffect, useState, Profiler } from 'react';
import { Button, View } from 'react-native';

const AMOUNT = 1000;

function TestView() {
  return (
    <View style={[
      { width: 100, height: 1, backgroundColor: 'red', flex: 1 },
    ]} />

piaskowyk

import React from 'react';
import { View } from 'react-native';
import Animated, { css } from 'react-native-reanimated';

export default function Ball() {

  return (
    <View style={styles.container}>
      <Animated.View style={styles.blob} />
      <Animated.View style={styles.shadow} />

piaskowyk

import React, { useState } from 'react';
import { Pressable, View } from 'react-native';
import Animated, { css } from 'react-native-reanimated';

export default function Wave() {
  const [clickLocation, setClickLocation] = useState({ x: -1, y: -1 });

  const dots = Array.from({ length: 323 });
  const size = 19;
  const color = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`

piaskowyk

import React, { useState } from 'react';
import { Pressable, Text } from 'react-native';
import Animated, { css } from 'react-native-reanimated';

export default function GlowButton() {
  const [pressed, setPressed] = useState(false);

  return (
    <Pressable onPress={() => setPressed(!pressed)}>
      <Animated.View 

piaskowyk

import React, { useState } from 'react';
import { Pressable, Text } from 'react-native';
import Animated, { css } from 'react-native-reanimated';

export default function PhysicalButton() {
  const [pressed, setPressed] = useState(false);

  return (
    <Pressable onPressIn={() => setPressed(true)} onPressOut={() => setPressed(false)}>
      <Animated.View style={[styles.button, pressed ? styles.animationDown : styles.animationUp]}>

piaskowyk

import React, { useState } from 'react';
import { Pressable, Text } from 'react-native';
import Animated, { css } from 'react-native-reanimated';

export default function OutlineButton() {
  const [pressed, setPressed] = useState(false);

  const animation1 = {
    animationName: css.keyframes({
      '0%': {

piaskowyk

import React, { useState } from 'react';
import { Pressable, Text } from 'react-native';
import Animated, { css } from 'react-native-reanimated';

export default function ParticleButton() {
  const [pressed, setPressed] = useState(false);
  const [showParticles, setShowParticles] = useState(false);

  return (
    <Pressable 

piaskowyk

This isn't a regression - it's the design of a new shared values.

You can think of the shared value as a shared memory that can be accessed by
many threads simultaneously. It requires control by a mutex to prevent volatile
memory access and potential application crashes.

In the previous approach, we maintained an additional copy of each shared value.
This copy was used to read them from JS thread, while the original was intended
for use on the UI thread. Reading shared values from the JS thread could occur
without blocking any threads, but it forced us to create a copy on each shared

piaskowyk

import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
  runOnUI,
  withRepeat,
  useFrameCallback,
  makeMutable
} from 'react-native-reanimated';
import { View, Button } from 'react-native';

piaskowyk

import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
  runOnUI,
  makeMutable,
  runOnJS,
} from 'react-native-reanimated';
import { View, Button } from 'react-native';
import React from 'react';