create-rn-starter-kit/template/src/components/PillCarousell/styles.ts

Interactive CLI for creating modular React Native apps with Expo

// template/src/components/PillCarousell/styles.ts
import { StyleSheet } from 'react-native';
import { ProcessedTheme } from 'theme/tokenProcessor';

export const pillCarouselStyles = (theme: ProcessedTheme) =>
  StyleSheet.create({
    topNav: {
      paddingHorizontal: 16,
      paddingTop: 8,
      paddingBottom: 16,
    },
    textLayer: {
      position: 'absolute',
      top: 0,
      width: 120,
      height: 32,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#f0f0f0',
      borderRadius: 12,
      borderWidth: 1,
      borderColor: '#e0e0e0',
      zIndex: 1,
    },
    greyText: {
      fontSize: 14,
      color: '#666',
      fontWeight: '500',
      textAlign: 'center',
    },
    pillMask: {
      position: 'absolute',
      top: 0,
      width: 120,
      height: 32,
      overflow: 'hidden',
      borderRadius: 12,
      zIndex: 2,
    },
    movingGreenBackground: {
      position: 'absolute',
      top: 0,
      width: 120,
      height: 32,
      backgroundColor: '#000000',
      borderRadius: 12,
      overflow: 'hidden',
    },
    whiteTextOffset: {
      position: 'absolute',
      top: 0,
      width: 120,
      height: 32,
      alignItems: 'center',
      justifyContent: 'center',
    },
    whiteText: {
      fontSize: 14,
      color: 'white',
      fontWeight: '500',
      textAlign: 'center',
    },
    whiteTextInside: {
      position: 'absolute',
      top: 0,
      left: 0,
      width: 120,
      height: 32,
      alignItems: 'center',
      justifyContent: 'center',
    },
    touchTarget: {
      position: 'absolute',
      top: 0,
      width: 120,
      height: 32,
      backgroundColor: 'transparent',
      borderWidth: 0,
      borderRadius: 12,
      zIndex: 3,
    },
    pillScrollView: {
      height: 32,
    },
    pillContainer: {
      position: 'relative',
      height: 32,
    },
  });