How to use the @shoutem/animation.connectAnimation function in @shoutem/animation

this.setStatusBarStyle(backgroundColor);
    // Key must be set to render new screen NavigationBar
    return (
      
        {this.renderStatusBar()}
        
      
    );
  }
}

const AnimatedNavigationBar = connectAnimation(composeChildren(NavigationBar));
const StyledNavigationBar = connectStyle('shoutem.ui.NavigationBar')(AnimatedNavigationBar);

export {
  StyledNavigationBar as NavigationBar,
};

} = this.props;

    return (
      
    );
  }
}

const AnimatedVideo = connectAnimation(Video);
const StyledVideo = connectStyle('shoutem.ui.Video')(AnimatedVideo);

export {
  StyledVideo as Video,
};

...props,
      ..._.pick(props.style, RNLinearGradientPropsKeys),
    };

    return (
      
        {props.children}
      
    );
  }
}

const AnimatedLinearGradient = connectAnimation(LinearGradient);
const StyledLinearGradient = connectStyle('shoutem.ui.LinearGradient')(AnimatedLinearGradient);

export {
  StyledLinearGradient as LinearGradient,
};

placeholder={placeholder}
          style={style.input}
          value={value}
        />
        {value && (
           onChangeText('')}
            style={style}
          />
        )}
      
    );
  }
}

const AnimatedSearchField = connectAnimation(SearchField);
const StyledSearchField = connectStyle('shoutem.ui.SearchField')(AnimatedSearchField);

export {
  StyledSearchField as SearchField,
};

import { connectStyle } from '@shoutem/theme';
import { connectAnimation } from '@shoutem/animation';

class Text extends PureComponent {
  render() {
    return (
      
    );
  }
}

Text.propTypes = {
  ...RNText.propTypes,
};

const AnimatedText = connectAnimation(Text);
const StyledText = connectStyle('shoutem.ui.Text')(AnimatedText);
const Heading = connectStyle('shoutem.ui.Heading')(AnimatedText);
const Title = connectStyle('shoutem.ui.Title')(AnimatedText);
const Subtitle = connectStyle('shoutem.ui.Subtitle')(AnimatedText);
const Caption = connectStyle('shoutem.ui.Caption')(AnimatedText);

export {
  StyledText as Text,
  Heading,
  Title,
  Subtitle,
  Caption,
};

import { View } from 'react-native';

import { connectStyle } from '@shoutem/theme';
import { connectAnimation } from '@shoutem/animation';

const AnimatedCard = connectAnimation(View);
const Card = connectStyle('shoutem.ui.Card')(AnimatedCard);

export {
  Card,
};

if (!currentRow || (result.currentRowSize + elementSpan > columns)) {
      currentRow = [];
      result.currentRowSize = 0;
      result.rows.push(currentRow);
    }

    result.currentRowSize += elementSpan;
    currentRow.push(element);
    return result;
  }, { currentRowSize: 0, rows: [] });

  return groupedData.rows;
};

const AnimatedGridRow = connectAnimation(GridRow);
const StyledGridRow = connectStyle('shoutem.ui.GridRow')(AnimatedGridRow);

export {
  StyledGridRow as GridRow,
};

{...this.createNavigationHeaderProps(style)}
        />
      
    );
  }
}

const mapPropsToStyleNames = (styleNames, props) => {
  if (props.inline) {
    return [...styleNames, 'inline'];
  }

  return styleNames;
};

const AnimatedNavigationBarView = connectAnimation(composeChildren(NavigationBarView), undefined, {
  createAnimatedComponent: false,
});
/**
 * @see {@link NavigationBarStyleName}
 * NavigationBarView style name is related to NavigationBar style name, it must be the same name.
 */
const StyledNavigationBarView =
  connectStyle(NavigationBarStyleName, undefined, mapPropsToStyleNames)(AnimatedNavigationBarView);

export {
  StyledNavigationBarView as NavigationBarView,
};

<button style="{style.button}">
          
        </button>
      
    );
  }
}

const AnimatedNumberInput = connectAnimation(NumberInput);
const StyledNumberInput = connectStyle('shoutem.ui.NumberInput')(AnimatedNumberInput);

export {
  StyledNumberInput as NumberInput,
};

return (
      
        {gradient}
        {this.props.children}
      
    );
  }
}

View.propTypes = {
  ...ViewPropTypes,
  style: PropTypes.object,
};

const AnimatedView = connectAnimation(View);
const StyledView = connectStyle('shoutem.ui.View')(AnimatedView);

export {
  StyledView as View,
};