EXAMPLE: slider

package.json

@@ -108,6 +108,7 @@
     "@motify/skeleton": "^0.18.0",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/netinfo": "11.4.1",
+    "@react-native-community/slider": "^4.5.5",
     "@react-native-google-signin/google-signin": "^13.1.0",
     "@react-navigation/bottom-tabs": "^7.2.0",
     "@react-navigation/native": "^7.0.14",

src/components/molecules/Field/Field.tsx

@@ -5,13 +5,15 @@ import { FieldCheckboxGroup } from './FieldCheckboxGroup'
 import { FieldInput } from './FieldInput'
 import { FieldRadioGroup } from './FieldRadioGroup'
 import { FieldSelect } from './FieldSelect'
+import { FieldSlider } from './FieldSlider'
 
 type FieldComposition = React.FC<PropsWithChildren> & {
   Input: typeof FieldInput
   CheckboxGroup: typeof FieldCheckboxGroup
   Checkbox: typeof FieldCheckbox
   RadioGroup: typeof FieldRadioGroup
   Select: typeof FieldSelect
+  Slider: typeof FieldSlider
 }
 
 const Field: FieldComposition = ({ children }) => {
@@ -23,6 +25,7 @@ Field.CheckboxGroup = FieldCheckboxGroup
 Field.Checkbox = FieldCheckbox
 Field.RadioGroup = FieldRadioGroup
 Field.Select = FieldSelect
+Field.Slider = FieldSlider
 
 export { Field }
 export * from './types'

src/components/molecules/Field/FieldSlider.tsx

@@ -0,0 +1,38 @@
+import { useMemo } from 'react'
+
+import type { FieldSliderProps } from './types'
+
+import { FormErrorMessage, FormLabel, Box, Slider } from '@/design-system/components'
+import { getLayoutProps } from '@/design-system/utils/getLayoutProps'
+
+export const FieldSlider = ({
+  errorMessage,
+  isInvalid,
+  isRequired,
+  label,
+  labelStyle,
+  testID,
+  onChangeValue,
+  value,
+  ...props
+}: FieldSliderProps) => {
+  const { layoutProps, restProps: sliderProps } = useMemo(() => getLayoutProps(props), [props])
+
+  return (
+    <Box width="100%" gap={1} mb={2} {...layoutProps}>
+      <FormLabel
+        {...{ isRequired, label, labelStyle }}
+        label={`${label}: ${value ? Math.round(value * 10) / 10 : 0}`}
+        testID={testID + ':label'}
+      />
+
+      <Slider
+        {...sliderProps}
+        value={value}
+        onChangeValue={onChangeValue}
+        testID={testID + ':input'}
+      />
+      <FormErrorMessage {...{ errorMessage }} testId={testID + ':error_message'} />
+    </Box>
+  )
+}

src/components/molecules/Field/types.ts

@@ -7,6 +7,7 @@ import {
   SelectProps,
   StyledProps,
   TouchableRef,
+  SliderProps,
 } from '@/design-system'
 
 // -----------------------
@@ -92,3 +93,13 @@ export type FieldCheckboxProps = FormLabelProps &
   CheckboxProps & {
     errorMessage?: string
   }
+
+// -----------------------
+// ----- SLIDER ------
+// -----------------------
+
+export type FieldSliderProps = FormLabelProps &
+  SliderProps & {
+    errorMessage?: string
+    onChangeValue: (value: number) => void
+  }

src/components/organisms/ControlledField/ControlledField.tsx

@@ -5,13 +5,15 @@ import { ControlledCheckboxGroup } from './ControlledCheckboxGroup'
 import { ControlledInput } from './ControlledInput'
 import { ControlledRadioGroup } from './ControlledRadioGroup'
 import { ControlledSelect } from './ControlledSelect'
+import { ControlledSlider } from './ControlledSlider'
 
 type ControlledFieldComposition = React.FC<PropsWithChildren> & {
   Input: typeof ControlledInput
   CheckboxGroup: typeof ControlledCheckboxGroup
   RadioGroup: typeof ControlledRadioGroup
   Checkbox: typeof ControlledCheckbox
   Select: typeof ControlledSelect
+  Slider: typeof ControlledSlider
 }
 
 const ControlledField: ControlledFieldComposition = ({ children }) => {
@@ -23,6 +25,7 @@ ControlledField.CheckboxGroup = ControlledCheckboxGroup
 ControlledField.Checkbox = ControlledCheckbox
 ControlledField.RadioGroup = ControlledRadioGroup
 ControlledField.Select = ControlledSelect
+ControlledField.Slider = ControlledSlider
 
 export { ControlledField }
 export * from './types'

src/components/organisms/ControlledField/ControlledSlider.tsx

@@ -0,0 +1,43 @@
+import { useCallback } from 'react'
+import { Controller, ControllerProps, FieldValues, get } from 'react-hook-form'
+
+import type { ControlledSliderProps } from './types'
+import { Field } from '../../molecules'
+
+export const ControlledSlider = <TFieldValues extends FieldValues = FieldValues>({
+  control,
+  name,
+  errors,
+  rules,
+  children,
+  ...props
+}: ControlledSliderProps<TFieldValues>) => {
+  const errorMessage = get(errors, name)?.message
+
+  const renderSlider = useCallback(
+    ({
+      field: { onChange, name, value, ref: _ref, ...fieldProps },
+    }: Parameters<ControllerProps['render']>[0]) => {
+      return (
+        <Field.Slider
+          {...props}
+          {...fieldProps}
+          value={value}
+          errorMessage={errorMessage}
+          onChangeValue={onChange}
+        />
+      )
+    },
+    [errorMessage, props]
+  )
+
+  return (
+    <Controller
+      name={name}
+      // @ts-expect-error: For some reason, the type of render is not being inferred correctly
+      control={control}
+      rules={rules}
+      render={renderSlider}
+    />
+  )
+}

src/components/organisms/ControlledField/types.ts

@@ -6,6 +6,7 @@ import {
   FieldRadioGroupProps,
   FieldSelectProps,
   FieldCheckboxProps,
+  FieldSliderProps,
 } from '@/components/molecules'
 
 // -----------------------
@@ -68,3 +69,13 @@ export type ControlledCheckboxProps<TFieldValues extends FieldValues = FieldValu
   'onChange' | 'isChecked'
 > &
   ControlledFieldProps<TFieldValues>
+
+// -----------------------
+// ----- SLIDER ------
+// -----------------------
+
+export type ControlledSliderProps<TFieldValues extends FieldValues = FieldValues> = Omit<
+  FieldSliderProps,
+  'onChangeValue' | 'value'
+> &
+  ControlledFieldProps<TFieldValues>

src/design-system/components/Slider.tsx

@@ -0,0 +1,25 @@
+import RNSlider from '@react-native-community/slider'
+
+import { Box } from './Box'
+import { SliderProps } from './types'
+
+export const Slider = ({
+  style,
+  isDisabled,
+  isInvalid,
+  value,
+  onChangeValue,
+  ...props
+}: SliderProps) => {
+  return (
+    <Box flex={1}>
+      <RNSlider
+        value={value}
+        onSlidingComplete={onChangeValue}
+        disabled={isDisabled}
+        style={style}
+        {...props}
+      />
+    </Box>
+  )
+}

src/design-system/components/index.ts

@@ -8,6 +8,7 @@ export * from './Column'
 export * from './GradientBox'
 export * from './Row'
 export * from './Spacer'
+export * from './Slider'
 export * from './Text'
 export * from './Touchables'
 export * from './ScrollView'

src/design-system/components/types.ts

@@ -269,3 +269,22 @@ export type CheckboxProps = TouchableProps & {
   size?: 'sm' | 'md'
   pb?: SizingValue
 }
+
+// -----------------------
+// ----- SLIDER ------
+// -----------------------
+
+export type SliderRef = { focus: () => void; blur: () => void }
+
+export type SliderProps = BoxProps & {
+  // Logic
+  onChangeValue: (newValue: number) => void
+  value?: number
+
+  // UI
+  isDisabled?: boolean
+  isInvalid?: boolean
+  minimumValue?: number
+  maximumValue?: number
+  step?: number
+}

src/hooks/forms/useTestForm.ts

@@ -10,6 +10,7 @@ const defaultValues: TestFormValues = {
   email: '',
   city: '',
   phone: '',
+  points: 0,
   postalCode: '',
   sex: '',
   music: [],
@@ -69,6 +70,7 @@ export const useTestForm = () => {
     try {
       setIsSubmitting(true)
       setError('')
+      alert('selected points: ' + data.points)
       console.log(data)
     } catch (e) {
       console.log(e)

src/i18n/translations/en.json

@@ -312,6 +312,7 @@
     "middle": "Middle",
     "name_placeholder": "Name",
     "phone_placeholder": "Phone number",
+    "points": "Points",
     "postalCode_placeholder": "Postal code",
     "postsecondary": "Postsecondary",
     "primary": "Primary",

src/i18n/translations/pl.json

@@ -311,6 +311,7 @@
     "middle": "Gimnazjalne",
     "name_placeholder": "Imie",
     "phone_placeholder": "Telefon",
+    "points": "Punkty",
     "postalCode_placeholder": "Kod pocztowy",
     "postsecondary": "Wyższe",
     "primary": "Podstawowe",

src/screens/TestFormScreen.tsx

@@ -192,13 +192,23 @@
         name="interests"
         rules={VALIDATION.interests}
       />
+      <ControlledField.Slider
+        {...{ control, errors }}
+        isRequired
+        minimumValue={0}
+        maximumValue={20}
+        step={0.5}
+        label={t('test_form.points')}
+        mt={2}
+        name="points"
+      />
       <Text fontWeight="bold" py={2}>
         {t('test_form.additional_comment')}
       </Text>
       <Controller
         {...{ control }}
         name="comment"
         render={({ field }) => (
           <TextArea
             placeholder={t('test_form.comment')}
             value={field.value}

src/types/testForm.ts

@@ -3,6 +3,7 @@ export type TestFormValues = {
   surname: string
   email: string
   phone: string
+  points: number
   postalCode: string
   city: string
   sex: string

yarn.lock

@@ -1250,6 +1250,7 @@ __metadata:
     "@motify/skeleton": "npm:^0.18.0"
     "@react-native-async-storage/async-storage": "npm:1.23.1"
     "@react-native-community/netinfo": "npm:11.4.1"
+    "@react-native-community/slider": "npm:^4.5.5"
     "@react-native-google-signin/google-signin": "npm:^13.1.0"
     "@react-navigation/bottom-tabs": "npm:^7.2.0"
     "@react-navigation/native": "npm:^7.0.14"
@@ -3137,6 +3138,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-native-community/slider@npm:^4.5.5":
+  version: 4.5.5
+  resolution: "@react-native-community/slider@npm:4.5.5"
+  checksum: 10/8c49f7e0b7d7c37b91c936805106e88ee31011dc210d5c237c07e35d330870536b560b48e6212195fffc2e2706b16c31715b6cebbb2cc33127702bff9850f134
+  languageName: node
+  linkType: hard
+
 "@react-native-google-signin/google-signin@npm:^13.1.0":
   version: 13.1.0
   resolution: "@react-native-google-signin/google-signin@npm:13.1.0"