Press enter or click to view image in full size

Member-only story

React Native

React Native Development

Mobile App Development

Software Development

Software Engineering

9 React Native Techniques I Wish I Had Learned Earlier

Jayant Kumar

8 min read

·

4 days ago

--

Listen

Share

Not a Medium Member? “Read For Free”

1. Easing.elastic

Easing.elastic makes an animation go a little past its end, then wobble back, like a rubber band. It's great for things that pop onto the screen.

Code:

const bounciness = [0.5, 1, 2, 4] as const;

export function EasingElasticDemo() {
  const theme = useTheme();
  const scale = useRef(new Animated.Value(1)).current;
  const [amount, setAmount] = useState<(typeof bounciness)[number]>(2);

  const play = (value: number) => {
    scale.setValue(0);
    Animated.timing(scale, {
      toValue: 1,
      duration: 1000,
      easing: Easing.elastic(value),
      useNativeDriver: true,
    }).start();
  };

  return (
    <View style={styles.stack}>
      <View style={styles.elasticStage}>
        <Animated.View
          style={[
            styles.elasticBox,
            { backgroundColor: theme.tint, transform: [{ scale }] },
          ]}
        />
      </View>
      <Chips
        options={bounciness}
        value={amount}
        onChange={next => {
          setAmount(next);
          play(next);
        }}
      />…