create-rn-starter-kit/template/src/modules/core/combined-auth/components/PillCarousell/styles.ts

Interactive CLI for creating modular React Native apps with Expo

import { StyleSheet } from 'react-native';

export const pillCarouselStyles = StyleSheet.create({
  topNav: {
    paddingHorizontal: 16,
    paddingVertical: 8,
  },
  textLayer: {
    position: 'absolute',
    top: 0,
    width: 100,
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 1,
  },
  greyText: {
    fontSize: 14,
    color: '#666',
    fontWeight: '500',
  },
  pillMask: {
    position: 'absolute',
    top: 0,
    width: 100,
    height: 50,
    overflow: 'hidden', // This creates the pill-shaped mask
    borderRadius: 25,
    zIndex: 2,
  },
  movingGreenBackground: {
    position: 'absolute',
    top: 6,
    width: 100,
    height: 38,
    backgroundColor: '#00D4AA',
    // borderRadius: 19,
    overflow: 'hidden', // This masks the white text
  },
  whiteTextOffset: {
    position: 'absolute',
    top: 0,
    width: 100,
    height: 38,
    alignItems: 'center',
    justifyContent: 'center',
  },
  whiteText: {
    fontSize: 14,
    color: 'white',
    fontWeight: '500',
  },
  whiteTextInside: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: 100,
    height: 38,
    alignItems: 'center',
    justifyContent: 'center',
  },
  touchTarget: {
    position: 'absolute',
    top: 0,
    width: 100,
    height: 50,
    backgroundColor: 'transparent',
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 25,
    zIndex: 4,
  },
  pillScrollView: {
    height: 50,
  },
  pillContainer: {
    position: 'relative',
    height: 50,
  },
});