Added Slider component

example/app/components/Slider.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import { SafeAreaView } from 'react-native';
+import { Slider, Text } from 'react-native-ficus-ui';
+import ExampleSection from '@/src/ExampleSection';
+
+const SliderComponent = () => {
+  const [value, setValue] = useState(0.2);
+
+  return (
+    <SafeAreaView>
+      <Text mx="xl" fontSize="4xl">
+        Slider
+      </Text>
+      <ExampleSection name="Slider">
+        <Slider />
+        <Slider colorScheme="green" defaultValue={0.2} />
+        <Slider colorScheme="red" defaultValue={0.3} />
+        <Slider colorScheme="orange" defaultValue={0.5} />
+        <Slider colorScheme="pink" filledTrackColor="pink.100" />
+      </ExampleSection>
+
+      <ExampleSection name="Slider value">
+        <Text>Slider value : {Math.round(value * 100) / 100}</Text>
+        <Slider colorScheme="teal" value={value} onValueChange={setValue} />
+      </ExampleSection>
+
+      <ExampleSection name="Slider custom step">
+        <Slider colorScheme="orange" step={0.2} />
+      </ExampleSection>
+    </SafeAreaView>
+  );
+};
+
+export default SliderComponent;

example/app/items.ts

@@ -28,6 +28,7 @@ import ScrollBoxComponent from './components/ScrollBox';
 import BadgeComponent from './components/Badge';
 import AvatarComponent from './components/Avatar';
 import PinInputComponent from './components/PinInput';
+import SliderComponent from './components/Slider';
 
 type ExampleComponentType = {
   onScreenName: string;
@@ -161,4 +162,9 @@ export const components: ExampleComponentType[] = [
     onScreenName: 'Modal',
     component: ModalComponent,
   },
+  {
+    navigationPath: 'Slider',
+    onScreenName: 'Slider',
+    component: SliderComponent,
+  },
 ];

example/package.json

@@ -51,6 +51,7 @@
     "@shopify/flash-list": "1.5.0",
     "color": "4.2.3",
     "deepmerge": "4.2.2",
+    "@react-native-community/slider": "4.5.4",
     "react-native-animatable": "1.3.3",
     "react-native-modal": "13.0.1",
     "react-native-toast-message": "2.1.6",

package.json

@@ -50,6 +50,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
+    "@react-native-community/slider": "4.5.4",
     "@shopify/flash-list": "1.5.0",
     "color": "4.2.3",
     "deepmerge": "4.2.2",

src/components/index.ts

@@ -68,3 +68,5 @@ export { RadioProps, RadioGroupProps } from './radio/radio.type';
 export { RadioGroup } from './radio/group.component';
 export { Modal } from './modal/modal.component';
 export { ModalProps } from './modal/modal.type';
+export { Slider } from './slider/slider.component';
+export { SliderProps } from './slider/slider.type';

src/components/slider/slider.component.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import RNSlider from '@react-native-community/slider';
+
+import { getStyle } from './slider.style';
+import type { SliderProps } from './slider.type';
+import { useTheme } from '../../theme/theme.hook';
+import { useDefaultProps } from '../../utilities/useDefaultProps';
+import { handleResponsiveProps } from '../../types';
+import { getThemeColor } from '../../theme/theme.service';
+
+const Slider: React.FunctionComponent<SliderProps> = (incomingProps) => {
+  const { theme, windowWidth } = useTheme();
+  const props = useDefaultProps(
+    'Slider',
+    handleResponsiveProps(incomingProps, theme, windowWidth),
+    {
+      flexDirection: 'column',
+      flexWrap: 'nowrap',
+      min: 0,
+      max: 1,
+      filledTrackColor: 'gray.200',
+      colorScheme: 'blue',
+    }
+  );
+
+  const {
+    bg,
+    h,
+    w,
+    m,
+    mt,
+    mr,
+    mb,
+    ml,
+    ms,
+    p,
+    pr,
+    pt,
+    pb,
+    pl,
+    minH,
+    minW,
+    maxW,
+    maxH,
+    position,
+    style,
+    flexDirection,
+    direction,
+    children,
+    bgImg,
+    bgMode,
+    alignItems,
+    align,
+    justifyContent,
+    justify,
+    flexWrap,
+    wrap,
+    flexGrow,
+    grow,
+    flexBasis,
+    basis,
+    flexShrink,
+    shrink,
+    opacity,
+    top,
+    left,
+    right,
+    bottom,
+    zIndex,
+    min,
+    max,
+    colorScheme,
+    filledTrackColor,
+    defaultValue,
+    ...rest
+  } = props;
+  const computedStyle = getStyle(theme, props);
+
+  return (
+    <RNSlider
+      minimumValue={min}
+      maximumValue={max}
+      value={defaultValue}
+      minimumTrackTintColor={getThemeColor(theme.colors, `${colorScheme}.500`)}
+      maximumTrackTintColor={getThemeColor(theme.colors, filledTrackColor)}
+      style={computedStyle.slider}
+      {...rest}
+    />
+  );
+};
+
+export { Slider };

src/components/slider/slider.style.tsx

@@ -0,0 +1,53 @@
+import { StyleSheet } from 'react-native';
+
+import {
+  createPositionStyle,
+  createSpacingStyles,
+  getThemeColor,
+} from '../../theme/theme.service';
+import type { SliderProps } from './slider.type';
+import type { ThemeType } from '../../theme/type';
+
+/**
+ * computed style
+ *
+ * @param theme
+ * @param props
+ */
+export const getStyle = (theme: ThemeType, props: SliderProps) => {
+  const computedStyle: any = {};
+
+  computedStyle.slider = {
+    flexDirection: props.direction ? props.direction : props.flexDirection,
+    flexWrap: props.wrap ? props.wrap : props.flexWrap,
+    alignItems: props.align ? props.align : props.alignItems,
+    justifyContent: props.justify ? props.justify : props.justifyContent,
+    flexBasis: props.basis ? props.basis : props.flexBasis,
+    flexGrow: props.grow ? props.grow : props.flexGrow,
+    flexShrink: props.shrink ? props.shrink : props.flexShrink,
+    height: props.h,
+    width: props.w,
+    minWidth: props.minW,
+    minHeight: props.minH,
+    alignSelf: props.alignSelf,
+    maxWidth: props.maxW,
+    maxHeight: props.maxH,
+    opacity: props.opacity,
+    zIndex: props.zIndex,
+    backgroundColor: getThemeColor(theme.colors, props.bg as string),
+    flex: props.flex,
+    ...createPositionStyle(props),
+    ...createSpacingStyles(props, theme.spacing),
+  };
+
+  // merging custom style props to computed style
+  if (props.style) {
+    computedStyle.slider = {
+      ...computedStyle.slider,
+      // @ts-ignore
+      ...props.style,
+    };
+  }
+
+  return StyleSheet.create(computedStyle);
+};

src/components/slider/slider.type.tsx

@@ -0,0 +1,31 @@
+import type { ViewProps as RNViewProps } from 'react-native';
+import type { SliderProps as RNSliderProps } from '@react-native-community/slider';
+
+import type {
+  SpacingPropsType,
+  DimensionPropsType,
+  BackgroundPropsType,
+  FlexPropsType,
+  PositionPropsType,
+  ZIndexPropsType,
+  OpacityPropsType,
+  VariantPropsType,
+} from '../../types';
+
+export interface SliderProps
+  extends RNViewProps,
+    RNSliderProps,
+    SpacingPropsType,
+    DimensionPropsType,
+    BackgroundPropsType,
+    FlexPropsType,
+    PositionPropsType,
+    ZIndexPropsType,
+    OpacityPropsType,
+    VariantPropsType {
+  min?: number;
+  max?: number;
+  defaultValue?: number;
+  filledTrackColor?: string;
+  colorScheme?: string;
+}

src/theme/type.ts

@@ -31,8 +31,9 @@ import type { ModalProps } from 'components/modal/modal.type';
 import { ToastProps } from 'react-native-toast-message';
 import type { DividerProps } from 'components/divider/divider.type';
 import { BadgeProps } from 'components/badge/badge.type';
-import { AvatarProps } from 'components';
+import { SliderProps } from 'components/slider/slider.type';
 import {
+  AvatarProps,
   AvatarBadgeProps,
   AvatarGroupProps,
 } from 'components/avatar/avatar.type';
@@ -89,6 +90,7 @@ export interface ThemeType {
     RadioGroup?: VariantType<RadioGroupProps>;
     Modal?: VariantType<ModalProps>;
     Divider?: VariantType<DividerProps>;
+    Slider?: VariantType<SliderProps>;
   };
 
   fontFamily?: {