Changing width of a component dynamically in React Native

Currently I have a component that takes in my mock data from store. I am able to render each page with dynamic data with the help of my mockdata that is stored in store folder:

mockData.ts:

{name: 'Triggerfish',imageSrc: require('../resource/images/ClownTriggerfish.png'),scientificName: 'Balistidae',diet: 'Carnivores',maxSize: '20-100cm',family: [  require('../resource/images/ClownTriggerfish.png'),  require('../resource/images/RedtoothTriggertish.png'),  require('../resource/images/OrangeLineTriggerfish.png'),  require('../resource/images/PicassoTriggerfish.png'),] },  {    name: 'Pufferfish',    imageSrc: require('../resource/images/DogFacePuffer.png'),    scientificName: 'Arothron',    diet: 'Carnivores',    maxSize: '10-120cm',    family: [      require('../resource/images/DogFacePuffer.png'),      require('../resource/images/GuineafowlPuffer.png'),      require('../resource/images/StarryPuffer.png'),    ]  },

I then have a separate component called BottomImages.js where I am loading the image data from the mockdata.ts. Here I manually set my column number.:

const ITEM_WIDTH = Dimensions.get('window').width / 1.2;const BottomImages: React.FC<FamilyCarouselProps> = ({ family }) => { const columns = 3;  const [activeItemIndex, setActiveItemIndex] = useState()return(<FlatList      numColumns={columns}      data={family}      renderItem={({ item }) => {        return (<ListItem            itemWidth={(ITEM_WIDTH - (10 * 3)) / 3}            image={item.image}            itemIndex={item.id}            activeItemIndex={activeItemIndex}            onChangeActiveItemIndex={(index)=>{              setActiveItemIndex(index)            }}          />        );      }}    />);}

And my ListItem component which shows the images is below:

const ListItem: React.FC = (props) => {const [background, setBackground] = useState(true);  return(<TouchableWithoutFeedback onPress={() => setBackground(current => !current)} ><Animated.View    style={{      margin: 5,    }}><View onClick={() => setBackground(current => !current)}     style={{borderWidth: background? 0:0,        borderColor: '#000',}}><Image      style={{        width: props.itemWidth,        resizeMode: "contain",        height: 200,      }}      source={props.image}></Image></View></Animated.View></TouchableWithoutFeedback>);}

So now the problem is that for fishes with 3 images in my family array has a good layout where it all fits in one row, but for fishes that have more than 3, the view gets messed up and they move to the next row:

I want it so that the column number changes along with the number of images that are there in the array, for example if my Triggerfish family array has 4 images, then it should change the column number to 4.