자바개발하다 리액트공부를 하고 있는데요 위 사진과 같이 가로 스크롤을해서 제일 왼쪽에 있는 컴포넌트의 크기를 크게 하려고 하는데 방법을 도저히 모르겠습니다.

import React, {Component, useState} from 'react';
import {View, Text, SafeAreaView, ScrollView, FlatList,StyleSheet} from 'react-native';

const ItemList = () => {
    const [data,setData] = useState(
        [1,2,3,4,5,6,7,8,9,10]
    )
    return (
        <SafeAreaView>
            <FlatList
                data={data}
                renderItem={renderItem}
                keyExtractor={(item)=>item.toString()}
                horizontal={true}
            >
            </FlatList>
        </SafeAreaView>
    );
}

const renderItem = ({item,index}) => {
    return (
        <View style={styles.viewStyle}>
            <Text style={{fontSize:90}}>{item} </Text>
        </View>
    )
}
const styles= StyleSheet.create({
    viewStyle  :{
        width:150,
        height:150,
        backgroundColor : 'gray',
        margin: 5,
        justifyContent : 'center',
        alignItems : 'center',
    },
    viewStyleSelect  :{
        width:150,
        height:250,
        backgroundColor : 'gray',
        margin: 5,
        justifyContent : 'center',
        alignItems : 'center',
    }
})
export default ItemList;

코드는 이렇구요 간단하게 스크롤 맨 왼쪽에있는거의 css를 viewStyleSelect 으로 바꿔주고 나머지는 viewStyle 로 해주면 되겠다 생각하는데 걸리는게 너무 많네요 고수분들 도움 부탁 드립니다.ㅠ