@uiw/react-native/lib/Tabs/TabsItem.js

UIW for React Native

import React, { useCallback, useMemo } from 'react';
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
import Icon from '../Icon';

function TabsItem(props) {
  const style = useCallback(() => {
    const {
      style = {}
    } = props;
    const titleBoxStyle = {
      width: style.width ?? 100
    };
    const titleStyle = {
      fontSize: style.titleSize ?? 20,
      color: style.titleColor ?? '#fff',
      fontWeight: style.titleFontWeight ?? '600'
    };
    const iconBoxStyle = {
      width: style.width ?? 100
    };
    const iconStyle = {
      color: style.iconColor ?? '#fff',
      size: style.iconSize ?? 24
    };
    const borderColor = {
      width: style.borderWidth ?? 40,
      borderBottomWidth: style.borderHeight ?? 4,
      borderBottomColor: style.borderColor ?? '#fff',
      bottom: -(style.borderBottom ?? 20)
    };
    return {
      titleBoxStyle,
      titleStyle,
      iconBoxStyle,
      iconStyle,
      borderColor
    };
  }, [props.style]);
  const IconDom = useMemo(() => {
    const isIconDom = () => {
      if (typeof props.icon === 'string') {
        return <Icon name={props.icon} color={style().iconStyle.color} size={style().iconStyle.size} />;
      } else {
        return <React.Fragment>{props.icon}</React.Fragment>;
      }
    };

    if (props.icon) {
      return <View style={[styles.iconBox, { ...style().iconBoxStyle
      }]}>{isIconDom()}</View>;
    } else return null;
  }, [props.icon, props.style]);
  const BorderDom = useMemo(() => {
    if (props.border) {
      return <View style={styles.bottomView}>
          <View style={[styles.bottom, { ...style().borderColor
        }]} />
        </View>;
    } else return null;
  }, [props.border]);
  return <View style={styles.TabsItemContainer}>
      <TouchableOpacity onPress={() => {
      props.onPress && props.onPress(props.title);
    }}>
        {IconDom}
        <View style={[styles.titleBox, { ...style().titleBoxStyle
      }]}>
          <Text style={[styles.title, { ...style().titleStyle
        }]}>{props.title}</Text>
        </View>
        {BorderDom}
      </TouchableOpacity>
    </View>;
}

TabsItem.prototype.isclxItem = {};
const styles = StyleSheet.create({
  TabsItemContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  iconBox: {
    flexDirection: 'row',
    justifyContent: 'center'
  },
  titleBox: {
    paddingTop: 10
  },
  title: {
    textAlign: 'center'
  },
  bottomView: {
    flexDirection: 'row',
    justifyContent: 'center'
  },
  bottom: {
    position: 'absolute',
    borderStyle: 'solid'
  }
});
export default TabsItem;