TrekSoft

const onFooterContainerChange = useCallback(
  node => {
    if (node !== null) {
      setFooterContainerElement(node);

      if (mutationObserver) {
        mutationObserver.observe(node, {
          childList: true,
          characterData: true,
          attributes: true,

TrekSoft

const [mutationObserver, setMutationObserver] = 
	useState<MutationObserver>(null);

useEffect(() => {
  let delayedMutationEffect;

  function handleMutations(mutations: MutationRecord[]) {
    setLastMutation(mutations[mutations.length - 1]);
    delayedMutationEffect = setTimeout(() => setLastMutation(null), maxAnimationLength);
  }

TrekSoft

const [windowHeight, setWindowHeight] = React.useState(window.innerHeight);

useEffect(() => {
  function handleResize() {
    setWindowHeight(window.innerHeight);
  }

  window.addEventListener('resize', handleResize);

  return () => {

TrekSoft

const onScroll = useCallback(
  (e: SyntheticEvent) => {
    const target = e.target as HTMLDivElement;
    if (target.scrollTop > 0) {
      setFloatHeader(true);
    } else {
      setFloatHeader(false);
    }

    setScrollTop(target.scrollTop);

TrekSoft

const footerBottomPadding = 24;

const floatFooter = useMemo(() => { 
  if (scrollingElement && footerContainerElement) {
    const {
      clientHeight: parentHeight,
      offsetTop: parentOffsetTop,
    } = scrollingElement;

    const {

TrekSoft

const [footerContainerElement, setFooterContainerElement] = 
	useState<HTMLElement>(null);

const onFooterContainerChange = useCallback(
  node => {
    if (node !== null) {
      setFooterContainerElement(node)
    }
  },
  [setFooterContainerElement]

TrekSoft

.footer--floating {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  padding: 12px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.15);
  z-index: 99;

TrekSoft

{/* Floating copy */}
<div
  className="footer--floating"
  style={{ visibility: shouldFloatFooter ? 'visible' : 'hidden' }}
>
  {renderFooter(shouldFloatFooter)}
</div>

{/* In flow copy */}
<div

TrekSoft

const renderFooter = useCallback(
    (isActive: Boolean) => {
      return (
        <div data-testid={isActive ? 'footer-container-id' : ''}>
          <Button
            disabled={!isActive || normalButtonDisableCondition}
            dataTestId={isActive ? 'footer-button-id' : null}
          >
            Footer Action Text
          </Button>

TrekSoft

Auth Web UI Sign In Documentation

1. Setup a new Android Studio app project

2. Run amplify init on it

3. Follow the Automated CLI Setup instructions - below is an expanded version of what options to choose when running the amplify add auth command referred to in that documentation:

Do you want to use the default authentication and security configuration? Default configuration with Social Provider (Federation)