/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    img: "img",
    p: "p",
    pre: "pre",
    code: "code",
    span: "span"
  }, _provideComponents(), props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.img, {
      src: "/notes/content_animation/cover.mp4",
      alt: ""
    }), "\n", _jsx(_components.p, {
      children: "Библиотека react-native-reanimated позволяет добавить анимированное появление или исчезновение элемента:"
    }), "\n", _jsx(_components.pre, {
      children: _jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [_jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " ", _jsx(_components.span, {
          className: "hljs-title class_",
          children: "Animated"
        }), ", { ", _jsx(_components.span, {
          className: "hljs-title class_",
          children: "FadeIn"
        }), ", ", _jsx(_components.span, {
          className: "hljs-title class_",
          children: "FadeOut"
        }), " } ", _jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", _jsx(_components.span, {
          className: "hljs-string",
          children: "'react-native-reanimated'"
        }), "\n\n", _jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "Badge"
        }), " = (", _jsx(_components.span, {
          className: "hljs-params",
          children: "{ count }"
        }), ") => (\n\t", _jsxs(_components.span, {
          className: "xml",
          children: [_jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", _jsx(_components.span, {
              className: "hljs-name",
              children: "Animated.Text"
            }), "\n\t\t", _jsx(_components.span, {
              className: "hljs-attr",
              children: "entering"
            }), "=", _jsx(_components.span, {
              className: "hljs-string",
              children: "{FadeIn}"
            }), "\n\t\t", _jsx(_components.span, {
              className: "hljs-attr",
              children: "exiting"
            }), "=", _jsx(_components.span, {
              className: "hljs-string",
              children: "{FadeOut}"
            }), "\n\t>"]
          }), "\n\t\t{count}\n\t", _jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", _jsx(_components.span, {
              className: "hljs-name",
              children: "Animated.Text"
            }), ">"]
          })]
        }), "\n);\n"]
      })
    }), "\n", _jsxs(_components.p, {
      children: ["В таком варианте анимация сработает только при первом появлении компонента на экране и при изменении ", _jsx(_components.code, {
        children: "count"
      }), " никакой анимации не будет, потому что компонент, при изменении этого свойства, не пропадает с экрана."]
    }), "\n", _jsx(_components.p, {
      children: "Можно накрутить кастомную анимацию которая запускается при изменении свойства, но тогда это будет выглядеть намного сложнее и парой строчек кода тут дело не обойдется."
    }), "\n", _jsxs(_components.p, {
      children: ["Предлагаю вспомнить про свойство ", _jsx(_components.code, {
        children: "key"
      }), " которое есть у каждого элемента в React. Обычно оно используется для отображения массива элементов. Но если вспомнить как это свойство работает, то оно сильно упростит нашу задачу."]
    }), "\n", _jsxs(_components.p, {
      children: ["Свойство ", _jsx(_components.code, {
        children: "key"
      }), " позволяет React'у связывать виртуальное дерево с реальным. Пока ", _jsx(_components.code, {
        children: "key"
      }), " не меняется, между рендерами React только обновляет свойства компонента. Но как только ", _jsx(_components.code, {
        children: "key"
      }), " изменится, компонент удаляется из дерева и добавляется новый с новым ключом — то что надо для запуска анимации."]
    }), "\n", _jsx(_components.pre, {
      children: _jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [_jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " ", _jsx(_components.span, {
          className: "hljs-title class_",
          children: "Animated"
        }), ", { ", _jsx(_components.span, {
          className: "hljs-title class_",
          children: "FadeInDown"
        }), ", ", _jsx(_components.span, {
          className: "hljs-title class_",
          children: "FadeOutUp"
        }), " } ", _jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", _jsx(_components.span, {
          className: "hljs-string",
          children: "'react-native-reanimated'"
        }), "\n\n", _jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "Badge"
        }), " = (", _jsx(_components.span, {
          className: "hljs-params",
          children: "{ count }"
        }), ") => (\n\t", _jsxs(_components.span, {
          className: "xml",
          children: [_jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", _jsx(_components.span, {
              className: "hljs-name",
              children: "Animated.Text"
            }), "\n\t\t", _jsx(_components.span, {
              className: "hljs-attr",
              children: "key"
            }), "=", _jsx(_components.span, {
              className: "hljs-string",
              children: "{count}"
            }), "\n\t\t", _jsx(_components.span, {
              className: "hljs-attr",
              children: "entering"
            }), "=", _jsx(_components.span, {
              className: "hljs-string",
              children: "{FadeInDown}"
            }), "\n\t\t", _jsx(_components.span, {
              className: "hljs-attr",
              children: "exiting"
            }), "=", _jsx(_components.span, {
              className: "hljs-string",
              children: "{FadeOutUp}"
            }), "\n\t>"]
          }), "\n\t\t{count}\n\t", _jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", _jsx(_components.span, {
              className: "hljs-name",
              children: "Animated.Text"
            }), ">"]
          })]
        }), "\n)\n"]
      })
    }), "\n", _jsx(_components.p, {
      children: "Такой способ применим не только к тексту. Можно, например, очень приятно поменять иконку на кнопке."
    }), "\n", _jsx(_components.img, {
      src: "/notes/content_animation/icon_transition.mp4",
      alt: ""
    }), "\n", _jsx(_components.pre, {
      children: _jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [_jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { ", _jsx(_components.span, {
          className: "hljs-title class_",
          children: "Pressable"
        }), " } ", _jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", _jsx(_components.span, {
          className: "hljs-string",
          children: "'react-native'"
        }), "\n", _jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " ", _jsx(_components.span, {
          className: "hljs-title class_",
          children: "Animated"
        }), ", { ", _jsx(_components.span, {
          className: "hljs-title class_",
          children: "ZoomIn"
        }), ", ", _jsx(_components.span, {
          className: "hljs-title class_",
          children: "ZoomOut"
        }), " } ", _jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", _jsx(_components.span, {
          className: "hljs-string",
          children: "'react-native-reanimated'"
        }), "\n", _jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { ", _jsx(_components.span, {
          className: "hljs-title class_",
          children: "Icon"
        }), " } ", _jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", _jsx(_components.span, {
          className: "hljs-string",
          children: "'~/components/Icon'"
        }), "\n\n", _jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "Button"
        }), " = (", _jsx(_components.span, {
          className: "hljs-params",
          children: "{ icon }"
        }), ") => (\n\t", _jsxs(_components.span, {
          className: "xml",
          children: [_jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", _jsx(_components.span, {
              className: "hljs-name",
              children: "Pressable"
            }), ">"]
          }), "\n\t\t", _jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", _jsx(_components.span, {
              className: "hljs-name",
              children: "Animated.View"
            }), "\n\t\t\t", _jsx(_components.span, {
              className: "hljs-attr",
              children: "key"
            }), "=", _jsx(_components.span, {
              className: "hljs-string",
              children: "{icon}"
            }), "\n\t\t\t", _jsx(_components.span, {
              className: "hljs-attr",
              children: "entering"
            }), "=", _jsx(_components.span, {
              className: "hljs-string",
              children: "{ZoomIn}"
            }), "\n\t\t\t", _jsx(_components.span, {
              className: "hljs-attr",
              children: "exiting"
            }), "=", _jsx(_components.span, {
              className: "hljs-string",
              children: "{ZoomOut}"
            }), "\n\t\t>"]
          }), "\n\t\t\t", _jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", _jsx(_components.span, {
              className: "hljs-name",
              children: "Icon"
            }), " ", _jsx(_components.span, {
              className: "hljs-attr",
              children: "name"
            }), "=", _jsx(_components.span, {
              className: "hljs-string",
              children: "{icon}"
            }), " />"]
          }), "\n\t\t", _jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", _jsx(_components.span, {
              className: "hljs-name",
              children: "Animated.View"
            }), ">"]
          }), "\n\t", _jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", _jsx(_components.span, {
              className: "hljs-name",
              children: "Pressable"
            }), ">"]
          })]
        }), "\n)\n"]
      })
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};
