react-native-material-elements/src/components/SegmentedControl/SegmentedControl.styles.ts

React native material elements is a sophisticated UI library crafted to enhance your React Native development workflow. Designed for simplicity and elegance, nex-ui provides a rich collection of components and utilities to effortlessly create polished mob

import { StyleSheet, ViewStyle } from 'react-native';
import { GenerateSegmentContainerStyle } from './SegmentedControlContainer';

export const styles = StyleSheet.create({
  container: {
    width: '100%',
    borderRadius: 8,
    height: 38,
    display: 'flex',
    flexDirection: 'row',
    position: 'relative',
    padding: 3,
  },
  segmentContainer: {
    flexDirection: 'row',
    flex: 1,
    position: 'relative',
  },
  item: {
    flex: 1,
  },
  baseButton: {
    flex: 1,
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 10,
  },
  animatedSegmentContainer: {
    position: 'absolute',
    zIndex: 1,
    borderRadius: 6,
    height: '100%',
    elevation: 5,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.2,
    shadowRadius: 1,
  },
  itemValueContainer: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  iconContainer: {
    marginHorizontal: 8,
  },
});

export const generateSegmentContainerStyle = ({ themeColors }: GenerateSegmentContainerStyle): ViewStyle => ({
  backgroundColor: themeColors.gray[300],
});