Add Tabs Component to RN

Author: Ronan-Fernandes

packages/components/__generated__/ActivityLogsFragment.graphql.ts

@@ -0,0 +1,33 @@
+import React, { FC } from 'react'
+
+import { useTheme } from '../../../../providers/native'
+import { Button } from '../../buttons'
+import { Text } from '../../typographies'
+import { View } from '../../views'
+import { createStyles } from './styles'
+import { TabProps } from './types'
+
+const Tabs: FC<TabProps> = ({
+  onChange = () => {},
+  currentValue,
+  value,
+  label,
+  selectedColor = 'high',
+  unselectedColor = 'low',
+}) => {
+  const isSelected = value === currentValue
+  const theme = useTheme()
+  const styles = createStyles(theme, isSelected)
+
+  return (
+    <View style={styles.baseTabContainer}>
+      <Button mode="text" onPress={() => onChange(value)}>
+        <Text variant="subtitle2" color={isSelected ? selectedColor : unselectedColor}>
+          {label}
+        </Text>
+      </Button>
+    </View>
+  )
+}
+
+export default Tabs

packages/design-system/components/native/tabs/Tab/index.tsx

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native'
+
+import { Theme } from '../../../../styles/native'
+
+export const createStyles = (theme: Theme, isSelected: boolean) =>
+  StyleSheet.create({
+    baseTabContainer: {
+      borderBottomColor: theme.colors.object.high,
+      borderBottomWidth: isSelected ? 2 : 0,
+    },
+  })

packages/design-system/components/native/tabs/Tab/styles.ts

@@ -0,0 +1,10 @@
+import { ObjectToken } from '../../../../styles/native'
+
+export interface TabProps {
+  onChange?: (value: string) => void
+  currentValue?: string
+  value: string
+  label: string
+  selectedColor?: keyof ObjectToken
+  unselectedColor?: keyof ObjectToken
+}

packages/design-system/components/native/tabs/Tab/types.ts

@@ -0,0 +1,31 @@
+import React, { FC } from 'react'
+
+import { useTheme } from '../../../../providers/native'
+import { View } from '../../views'
+import { TabProps } from '../Tab/types'
+import { createStyles } from './styles'
+import { TabsProps } from './types'
+
+const Tabs: FC<TabsProps> = ({ onChange, value, children, style, ...props }) => {
+  const theme = useTheme()
+  const styles = createStyles(theme)
+
+  const renderChildren = () =>
+    React.Children.map(children, (child) => {
+      if (React.isValidElement(child)) {
+        return React.cloneElement(child as React.ReactElement<TabProps>, {
+          onChange,
+          currentValue: value,
+        })
+      }
+      return null
+    })
+
+  return (
+    <View style={[styles.baseTabsContainer, style]} {...props}>
+      {renderChildren()}
+    </View>
+  )
+}
+
+export default Tabs

packages/design-system/components/native/tabs/Tabs/index.tsx

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native'
+
+import { Theme } from '../../../../styles/native'
+
+export const createStyles = (theme: Theme) =>
+  StyleSheet.create({
+    baseTabsContainer: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      alignItems: 'center',
+      gap: 24,
+      borderBottomColor: theme.colors.surface.disabled,
+      borderBottomWidth: 1,
+    },
+  })

packages/design-system/components/native/tabs/Tabs/styles.ts

@@ -0,0 +1,8 @@
+import { ViewProps } from '../../views'
+import { TabProps } from '../Tab/types'
+
+export interface TabsProps extends ViewProps {
+  onChange: (value: string) => void
+  value: string
+  children: React.ReactElement<TabProps>[]
+}

packages/design-system/components/native/tabs/Tabs/types.ts

@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs'
+export type * from './Tabs/types'
+export { default as Tab } from './Tab'
+export type * from './Tab/types'