rescript-reanimated example

selectable.res

open ReactNative

let styles = {
  open Style

  StyleSheet.create({
    "container": viewStyle(
      ~alignItems=#center,
      ~justifyContent=#center,
      ~borderRadius=4.0,
      ~position=#relative,
      ~backgroundColor="transparent",
      (),
    ),
    "presser": viewStyle(~flex=1.0, ()),
    "backer": viewStyle(
      ~position=#absolute,
      ~top=0.0->dp,
      ~left=0.0->dp,
      ~right=0.0->dp,
      ~bottom=0.0->dp,
      ~borderRadius=4.0,
      (),
    ),
    "textContainer": viewStyle(
      ~paddingVertical=5.0->dp,
      ~paddingHorizontal=10.0->dp,
      (),
      ~backgroundColor="transparent",
    ),
  })
}

@genType("Selectable") @react.component
let make = (~title, ~selected, ~color, ~onPress) => {
  let scale = ResAnimated.useSharedValue(0.0)

  React.useEffect1(() => {
    open ResAnimated
    switch selected {
    | true =>
      scale.value = withSpring(
        ~toValue=1.0,
        ~userConfig=Spring.makeConfig(
          ~damping=15.0,
          ~mass=1.0,
          ~stiffness=250.0,
          ~overshootClamping=false,
          ~restSpeedThreshold=0.001,
          ~restDisplacementThreshold=0.001,
          (),
        ),
        (),
      )
    | false =>
      scale.value = withTiming(
        ~toValue=0.0,
        ~userConfig=Some(#Duration({Timing.duration: 250.0})),
        (),
      )
    }
    None
  }, [selected])

  let animatedStyle = {
    ResAnimated.useAnimatedStyle(() =>
      Style.style(~transform=[Style.scale(~scale=scale.value)], ~opacity=scale.value, ())
    )
  }

  <View style={styles["container"]}>
    <ResAnimated.View
      style={
        open Style
        array([styles["backer"], viewStyle(~backgroundColor=color, ()), animatedStyle])
      }
    />
    <Pressable style={_ => styles["presser"]} onPress={_ => onPress(!selected)}>
      {_ => <>
        <View style={styles["textContainer"]}> <Text> {title->React.string} </Text> </View>
      </>}
    </Pressable>
  </View>
}