license import React from 'react' ; import { Animated , ViewProps , } from 'react-native' ; import { getIconAnimation , IconAnimation , IconAnimationRegistry , } from './iconAnimation' ; import { IconRegistryService , RegisteredIcon , } from './service/iconRegistry.service' ; import { AnimationConfig } from '../animation' ; type WrappedElementProps = any ; export type IconProps < T = WrappedElementProps > = T & { name : string ; pack ? : string ; animation ? : keyof IconAnimationRegistry | null ; animationConfig ? : AnimationConfig ; } ; export type IconElement < T = WrappedElementProps > = React . ReactElement < IconProps < T > > ; extends React . Component method method property property property property property overview-example overview-example overview-example overview-example export class Icon < T > extends React . Component < IconProps < T > > { static defaultProps : Partial < IconProps > = { animation : 'zoom' , } ; private readonly animation : IconAnimation | null ; constructor ( props ) { super ( props ) ; this . animation = getIconAnimation ( props . animation , props . animationConfig ) ; } public componentWillUnmount ( ) { this . animation ?. release ( ) ; } public startAnimation = ( callback ? ) : void => { this . animation ?. start ( callback ) ; } ; public stopAnimation = ( ) : void => { this . animation ?. stop ( ) ; } ; public render ( ) { const { name , pack , animation , animationConfig , ... iconProps } = this . props ; const registeredIcon = IconRegistryService . getIcon ( name , pack ) ; const iconElement = registeredIcon . icon . toReactElement ( iconProps as T ) ; if ( ! this . animation ) { return iconElement ; } return ( < Animated . View { ... this . animation . toProps ( ) } > { iconElement } < /Animated.View>); } }