7e4e398 · rowtype-yoga/purescript-yoga-react-native

git.iko.soy/rowtype-yoga/purescript-yoga-react-native

on main help sign in

7e4e398Mark7 months ago

src/Yoga/React/Native/Reanimated.js+14

compare with main

unifiedsplit

@@ -32,6 +32,20 @@ export const useSharedValueImpl = (initial) => () => useSharedValue(initial);

32export const useAnimatedStyleImpl = (updater) => () =>

33 useAnimatedStyle(updater);

35+// useAnimatedStyle that interpolates a single shared value into style properties.

36+// styleMap is an array of { prop, inputRange, outputRange, extrapolation }.

37+// This keeps the .value read inside the worklet so Reanimated can track it.

38+export const useInterpolatedStyleImpl = (sv) => (styleMap) => () =>

39+ useAnimatedStyle(() => {

40+ "worklet";

41+ const style = {};

42+ for (let i = 0; i < styleMap.length; i++) {

43+ const { prop, inputRange, outputRange, extrapolation } = styleMap[i];

44+ style[prop] = interpolate(sv.value, inputRange, outputRange, extrapolation);

45+ }

46+ return style;

47+ });

48+

35// Read shared value

49// Read shared value

36export const readSharedValue = (sv) => () => sv.value;

50export const readSharedValue = (sv) => () => sv.value;

src/Yoga/React/Native/Reanimated.purs+18

@@ -55,6 +55,8 @@ module Yoga.React.Native.Reanimated

55 , fadeInDuration

56 , fadeOutDuration

57 , readValue

58+ , StyleInterp

59+ , useInterpolatedStyle

58 ) where

60 ) where

60import Prelude

62import Prelude

@@ -103,6 +105,22 @@ foreign import useAnimatedStyleImpl :: (Unit -> Style) -> Effect Style

103useAnimatedStyle :: (Unit -> Style) -> Hook UseAnimatedStyle Style

105useAnimatedStyle :: (Unit -> Style) -> Hook UseAnimatedStyle Style

104useAnimatedStyle updater = unsafeHook (useAnimatedStyleImpl updater)

106useAnimatedStyle updater = unsafeHook (useAnimatedStyleImpl updater)

105

107

108+-- | Style interpolation config for useInterpolatedStyle.

109+-- | Each entry maps a CSS property name to an interpolation range.

110+type StyleInterp =

111+ { prop :: String

112+ , inputRange :: Array Number

113+ , outputRange :: Array Number

114+ , extrapolation :: ExtrapolationType

115+ }

116+

117+foreign import useInterpolatedStyleImpl :: SharedValue Number -> Array StyleInterp -> Effect Style

118+

119+-- | Hook that interpolates a shared value into style properties inside a worklet.

120+-- | Use this instead of useAnimatedStyle when you need .value reads to be tracked.

121+useInterpolatedStyle :: SharedValue Number -> Array StyleInterp -> Hook UseAnimatedStyle Style

122+useInterpolatedStyle sv styleMap = unsafeHook (useInterpolatedStyleImpl sv styleMap)

123+

106-- Shared value operations

124-- Shared value operations

107

125

108foreign import readSharedValue :: forall a. SharedValue a -> Effect a

126foreign import readSharedValue :: forall a. SharedValue a -> Effect a