React Native、グッドボタンのサイズが右側だけに広がる

Question

いいねボタンをReactNativeのAnimatedで実装しているのだが、下の画像の通り（わかりにくいかもしれません。）、アイコンのサイズを大きくしても、右にしか広がらず、いいねボタンを押したときに不自然？に右だけ広がるの直したいので、右方向だけでなく、両方にサイズが大きくなる方法？教えていただきたい。

import React, {useState, useRef, useEffect} from 'react';
import {
  View,
  Image,
  Pressable,
  StyleSheet,
  FlatList,
  Animated,
  Alert,
} from 'react-native';
import Icon2 from 'react-native-vector-icons/AntDesign';
import ReactNativeHaptic from 'react-native-haptic';
import ReadMore from '@fawazahmed/react-native-read-more';

const AnimatedIcon = Animated.createAnimatedComponent(Icon2);

const Main = props => {
  const [liked, setLiked] = useState(false);
  const [data, setData] = useState();
  const [loading, setLoading] = useState(true);

  // .currentに値を保持し、それを後で書き換えることでアニメーションになる。
  const animatedValue = useRef(new Animated.Value(0)).current;

  // 0 ~ 150 のフレーム間での「色」の設定
  const interPolateColor = animatedValue.interpolate({
    inputRange: [0, 150],
    outputRange: ['#262626', '#ed4956'],
  });
  const animatedIconStyle = {
    color: interPolateColor,
  };

  // 0 ~ 150 のフレーム間での大きさの設定
  const interPolateSize = animatedValue.interpolate({
    inputRange: [0, 50, 100, 150],
    outputRange: [28, 38, 93, 28],
  });
  const animatedIconSize = {
    fontSize: interPolateSize,
  };

  const loadData = () => {
    fetch('http://127.0.0.1:8000/api/articles/', {
      method:'GET',
    })
    .then(resp => resp.json())
    .then(res => {
      setData(res);
      setLoading(false);
    })
    .catch(error => Alert.alert('error', error));
  };

  useEffect(() => {
    loadData();
  }, []);

  const _onPress = () => {
    if (liked === false) {
    ReactNativeHaptic.generate('selection');
    // 第一引数に変化させたい要素？、第2引数にどのように変化させるのかを書く
    Animated.timing(animatedValue, {
      toValue: 150,
      duration: 200,
    }).start();
    setLiked((isLiked) => !isLiked);
    } else {
      Animated.timing(animatedValue, {
        toValue: 0,
        duration: 200,
      }).start();
      setLiked((isLiked) => !isLiked);
    }
  };

  return (
    <View style={styles.main}>
      <FlatList
        onRefresh={() => loadData()}
        refreshing={loading}
        data={data}
        numColumns={1}
        renderItem={({item}) => (
          <View style={styles.contaier}>
            <Image
              style={styles.image}
              source={{
                uri: item.picture,
              }}
            />
            <View style={styles.heart}>
              <Pressable
                onPress={_onPress}>
                <Animated.Text style={animatedIconStyle}>
                  <AnimatedIcon
                    style={animatedIconSize}
                    name={ liked ? 'heart' : 'hearto'}
                  />
                </Animated.Text>
              </Pressable>
            </View>
            <View
              style={styles.maintext}
            >
              <ReadMore
                numberOfLines={3}
                seeMoreStyle={{color: '#8e8e8e'}}
                seeLessStyle={{color: '#8e8e8e'}}
                seeMoreText={'more'}
              >
                {item.description}
              </ReadMore>
            </View>
          </View>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  main: {
    flex: 1,
    width: '100%',
    backgroundColor: 'white',
  },
  contaier: {
    alignItems: 'center',
  },
  image: {
    width: '100%',
    aspectRatio: 1,
  },
  heart: {
    paddingTop: '2%',
    paddingBottom: '2%',
    flexDirection: 'row',
    alignItems: 'center',
    width: '90%',
    borderWidth: 1,
  },
  maintext: {
    width: '90%',
    paddingBottom: '10%',
  },
});

export default Main;