Slider.tsx

import React from 'react';
import styled, {css} from 'styled-components/native';
import {Slider as DefaultSlider, SliderProps} from 'react-native-elements';
import {useTheme, px2ddp} from '@animavita/theme';

const StyledSlider = styled(DefaultSlider)``;

const Slider: React.FC<SliderProps> = ({...props}) => {
  const theme = useTheme();

  return (
    <StyledSlider
      minimumTrackTintColor={theme.styledTheme.greenLight}
      maximumTrackTintColor={theme.styledTheme.greyLighter}
      thumbTintColor={theme.styledTheme.greenLight}
      thumbStyle={css`      
        width: ${px2ddp(7)},
        height: ${px2ddp(7)},
        border-color: ${theme.styledTheme.white},
        border-width: ${px2ddp(3)}   
      `}
      trackStyle={{
        height: px2ddp(2.5),
        borderRadius: px2ddp(2),
      }}
      {...props}
    />
  );
};

export default Slider;