App.tsx

import React from 'react';
import {Button, SafeAreaView, Text} from 'react-native';
import {Image} from 'expo-image';
import Animated from 'react-native-reanimated';

const AnimatedImage = Animated.createAnimatedComponent(Image);

const SQUARE_POST_HEIGHT = 200;
const SQUARE_POST_WIDTH = 200;
const thumbnail_url =
  'https://i.natgeofe.com/n/4cebbf38-5df4-4ed0-864a-4ebeb64d33a4/NationalGeographic_1468962_4x3.jpg';
const sharedTransitionTag = 'yollo';
const thumbnailServerSize = {width: 200, height: 200};

function App() {
  const [show, setShow] = React.useState(false);
  return (
    <SafeAreaView>
      <Text>Hello</Text>
      <Button
        title="Toggle"
        onPress={() => {
          setShow(!show);
        }}
      />
      {show && (
        <AnimatedImage
          style={{width: 200, height: 200}}
          sharedTransitionTag={sharedTransitionTag}
          placeholderContentFit="cover"
          pointerEvents="none"
          position="absolute"
          top={0}
          left={0}
          right={0}
          bottom={0}
          overflow="hidden"
          width={SQUARE_POST_WIDTH}
          height={SQUARE_POST_HEIGHT}
          priority="low"
          transition={150}
          backgroundColor="postImageBackground"
          cachePolicy="memory-disk"
          recyclingKey={thumbnail_url}
          contentFit="cover"
          contentPosition="center"
          source={{
            uri: thumbnail_url,
            width: thumbnailServerSize.width,
            height: thumbnailServerSize.height,
          }}
        />
      )}
    </SafeAreaView>
  );
}

export default App;