oktaysenkan / monicon

Universal Icon Library
https://monicon-docs.vercel.app
247 stars 9 forks source link

This is not an issue but an inquiry. Do you support animating the icon. In the case of <View />, we use Iconify? #19

Closed jbarasa closed 1 month ago

jbarasa commented 4 months ago

example from Reanimated 3

import React, { useRef } from 'react';
import { StyleSheet, View, Button, ViewProps } from 'react-native';
import Animated, { useSharedValue, withSpring } from 'react-native-reanimated';

const MyView = React.forwardRef(
  (props: ViewProps, ref: React.LegacyRef<View>) => {
    // some additional logic
    return <View ref={ref} {...props} />;
  }
);

// highlight-next-line
const MyAnimatedView = Animated.createAnimatedComponent(MyView);

export default function App() {
  const ref = useRef<View | null>(null);
  const width = useSharedValue(100);

  const handlePress = () => {
    width.value = withSpring(width.value + 50);
  };

  return (
    <View style={styles.container}>
      <MyAnimatedView style={{ ...styles.box, width }} />
      <Button onPress={handlePress} title="Click me" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
  box: {
    height: 100,
    backgroundColor: '#b58df1',
    borderRadius: 20,
    marginVertical: 64,
  },
});
oktaysenkan commented 1 month ago

You can create your custom Icon component with version 2.0.0