<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"><path d="M17 8V5a1 1 0 0 0-1-1H6a2 2 0 0 0 0 4h12a1 1 0 0 1 1 1v3m0 4v3a1 1 0 0 1-1 1H6a2 2 0 0 1-2-2V6"/><path d="M20 12v4h-4a2 2 0 0 1 0-4z"/></g></svg>

export const renderIcon = (props: RuntimeProps) => {
  const svg = prepareSvgIcon(props);

  if (!props.iconData || !svg || !svg.body) {
    return null;
  }

  if (props.strokeWidth !== undefined) {
    svg.body = svg.body.replace(
      /stroke-width="[^"]*"/g,
      `stroke-width="${props.strokeWidth}"`
    );
  }

  if (Platform.OS === 'web') {
    return renderWebIcon(svg, props);
  }

  return renderNativeIcon(svg, props);
};

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,
  },
});

Error: Iconify: You need to install a Babel plugin before using this library. You can continue by adding the following to your babel.config.js

This error is located at:
    in Iconify (at Avatar.tsx:15)
    in RCTView (at View.js:116)
    in View (at Avatar.tsx:14)
    in Avatar (at Profile.tsx:10)
    in RCTView (at View.js:116)
    in View (at createAnimatedComponent.js:54)
    in Unknown (at TouchableOpacity.js:256)
    in TouchableOpacity (at TouchableOpacity.js:323)
    in TouchableOpacity (at ImagePicker.tsx:30)
    in ImagePicker (at Profile.tsx:10)
    in RCTView (at View.js:116)
    in View (at Profile.tsx:9)
    in RCTSafeAreaView (at Profile.tsx:8)
    in Profile (at profile.tsx:4)
    in ProfilePage (at useScreens.js:112)
    in Unknown (at useScreens.js:116)
    in Suspense (at useScreens.js:115)
    in Route (at useScreens.js:131)
    in Route(profile) (at SceneView.tsx:132)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:124)
    in SceneView (at useDescriptors.tsx:218)
    in QualifiedSlot (at Navigator.js:103)
    in PreventRemoveProvider (at useNavigationBuilder.tsx:718)
    in NavigationContent (at useComponent.tsx:35)
    in Unknown (at Navigator.js:72)
    in QualifiedNavigator (at Navigator.js:52)
    in Navigator (at Navigator.js:102)
    in Slot (at _layout.tsx:18)
    in AppLayout (at useScreens.js:112)
    in Unknown (at useScreens.js:116)
    in Suspense (at useScreens.js:115)
    in Route (at useScreens.js:131)
    in Route((app)) (at SceneView.tsx:132)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:124)
    in SceneView (at useDescriptors.tsx:218)
    in QualifiedSlot (at Navigator.js:103)
    in PreventRemoveProvider (at useNavigationBuilder.tsx:718)
    in NavigationContent (at useComponent.tsx:35)
    in Unknown (at Navigator.js:72)
    in QualifiedNavigator (at Navigator.js:52)
    in Navigator (at Navigator.js:102)
    in Slot (at _layout.tsx:8)
    in AuthContextProvider (at _layout.tsx:7)
    in RootLayout (at useScreens.js:112)
    in Unknown (at useScreens.js:116)
    in Suspense (at useScreens.js:115)
    in Route (at useScreens.js:131)
    in Route() (at ExpoRoot.js:90)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:92)
    in SafeAreaProvider (at ExpoRoot.js:55)
    in wrapper (at ExpoRoot.js:89)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:430)
    in BaseNavigationContainer (at NavigationContainer.native.js:105)
    in ThemeProvider (at NavigationContainer.native.js:104)
    in NavigationContainerInner (at ExpoRoot.js:86)
    in ContextNavigator (at ExpoRoot.js:64)
    in ExpoRoot (at qualified-entry.js:20)
    in App (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay (at withDevTools.ios.js:25)
    in withDevTools(ErrorOverlay) (at renderApplication.js:57)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:127)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:155)
    in AppContainer (at renderApplication.js:50)
    in main(RootComponent) (at renderApplication.js:67), js engine: hermes

Invariant Violation: Tried to register two views with the same name RNSVGRect, js engine: hermes

Uncaught Error
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Iconify`.

 "expo": "~50.0.13",
 "expo-dev-client": "^3.3.10",
 "react": "18.2.0",
 "react-native": "0.73.5",
 "react-native-iconify": "^1.0.0",

 module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
    'react-native-reanimated/plugin',
    'react-native-iconify/plugin'
    ]
  };
};