Tabs Component in React Native, complete with Typescript Typings

Tabs.tsx

import React, { ReactNode, useEffect, useState } from 'react';
import { View } from 'react-native';

interface TabsProps {
	tabIndex: number;
	children: ReactNode[];
}

export const Tabs: React.FC<TabsProps> = ({ tabIndex, children }) => {
	const [activeTab, setActiveTab] = useState(0);

	useEffect(() => {
		setActiveTab(tabIndex);
	}, [tabIndex]);

	return (
		<View>
			{React.Children.map(children, (child, index) =>
				index === activeTab ? child : null,
			)}
		</View>
	);
};

interface TabProps {
	children: ReactNode;
}

export const Tab: React.FC<TabProps> = ({ children }) => {
	return <View>{children}</View>;
};