Add icons from `@expo/vector-icons`

[FrontFelix]

It would be beneficial to incorporate icons utilizing the @expo/vector-icons package, as opposed to utilizing PNG format icons. This would provide a number of advantages, including increased scalability and improved performance. Additionally, using vector icons allows for more flexibility in terms of customization, as they can be easily resized and modified without losing quality. Furthermore, by utilizing a package like @expo/vector-icons, we would have access to a wide range of pre-designed icons, reducing the need to create new icons from scratch. Overall, incorporating vector icons through the @expo/vector-icons package would greatly enhance the functionality and visual appeal of the project.

[Aryk]

The simple way to accomplish is to build interfaces for the different components so that one can always overwrite it...

In other words instead of hard coding , it should be a "renderIcon" function or component that gets passed the props...

This wouldallow expo/vector-icons or anything else like this to work

[Aryk]

A wrote a custom switch based on reanimated v2 that allows for icons (or anything inside):

https://gist.github.com/Aryk/380dffa6464603ec7b1e0c3598edff65

Example:

import {CustomSwitch} from "src/main/components/CustomSwitch";

const UserSearchModeSwitchToggle = ({
  style,
  width,
  trackColorOff,
  trackColorOn,
  animatedValue,
}: ICustomSwitchToggle) => {
  const switchOffStyle = useAnimatedStyle(
    () => ({
      opacity: Math.max(1 - animatedValue.value * 2, 0),
    }),
    [],
  );

  const switchOnStyle = useAnimatedStyle(
    () => ({
      opacity: Math.min(animatedValue.value * 2, 1),
    }),
    [],
  );

  const {baseStyles} = useTheme();
  return <Animated.View style={style}>
    <Animated.View style={[baseStyles.row, StyleSheet.absoluteFill, baseStyles.centerContent, switchOffStyle]}>
      <PersonIcon style={{fontSize: width * 0.62, color: trackColorOff}} />
    </Animated.View>
    <Animated.View style={[baseStyles.row, StyleSheet.absoluteFill, baseStyles.centerContent, switchOnStyle]}>
      <HashtagIcon style={{fontSize: width * 0.65, paddingLeft: width * 0.08, color: trackColorOn}} />
    </Animated.View>
  </Animated.View>
};

const UserSearchModeSwitch = observer(
  () => <CustomSwitch
    ToggleComponent={UserSearchModeSwitchToggle}
    height={30}
    borderWidth={0}
    padding={0}
    value={value}
    containerStyle={{marginTop: 5}}
    onValueChange={
      (userSearchIsGrouped: boolean) => {

      }
    }
  />
);