Soras UI

<Button
  title="Testing"
  onPress={/* your onpress action */}
/>

<Calendar
  width={300}
  height={200}
  dateRangeValue={/* get the date range */}
  onPressDate={/* get the date */}
  getDatesRange={/* true to get the date range, false to get date */}
/>

<Carousel
  data={/* carousel data */}
  duration={/* duration in ms */}
  overflow="hidden"
  width={300}
  activeDotColor={/* active dot color */}
  inactiveDotColor={'grey'}
/>

<CheckBox
  title="/* your checkbox name */"
  value={/* set your checkbox value here */}
  onPress={/* get the check box value here */}
  icon={( /* set customize icon here */)} 
/>

const data = [{ color: string, value: number, percentage: number}]
const font = useFont(require('./Roboto-Bold.ttf'), 20);

if (!font) return null;

return (
  <DonutChart
        gap={0.07}
        radius={80}
        strokeWidth={20}
        outerStrokeWidth={30}
        font={font}
        data={data}
        outerStrokColor={'black'}
        totalValueSymbol="Rp" /* symbol that will apply infront the total value */
        totalValueColor={'white'}
      />
)

<DropDown
  title="Select option"
  options={[
    { label: 'Option 1', value: 'option1' },
    { label: 'Option 2', value: 'option2' },
    { label: 'Option 3', value: 'option3' },
  ]}
  onSelect={(set) => setSelectedDropDown(set)}
/>

<DropDown
  mode="calendar"
  onSelect={(set) => setSelectedDropDownCalendar(set)}
  title="Select date"
/>

<DynamicScrollView directionMode={{ direction: /* select the direction row/column */}}>
  /* put your components here */
</DynamicScrollView>

<ExpandableView
  title={'Expand this component'}
  renderItem={
  <View>
    <Typograph>{'Expanded'}</Typograph>
  </View>}
/>

import { GestureHandlerRootView } from 'react-native-gesture-handler';
<GestureHandlerRootView style={{ flex: 1 }}>
  // Your code
</GestureHandlerRootView>

<Modal
  type="center"
  isPopUp={// value of modal visibility}
  onPressClose={// set close modal visibility}
  title="Test"
>
  // Your code
</Modal>

<Modal
  type="bottom"
  isPopUp={// value of modal visibility}
  onPressClose={// set close modal visibility}
  title="Test"
>
  // Your code
</Modal>

<RadioButton
  data={/* put your array of data here */}
  onPress={/* get your radio button response */}
  selectedId={/* select unique id for the radio button */}
  directionMode={{ direction: /* select the direction row/column } */}
  icon={(/* set customize icon here) */}
/>

Input mode:
<Rating onChange={/* set data */} />
Display mode:
<Rating value={/* value */} disable={true} />

<SkeletonLoader width={300} />
<CircleSkeletonLoader width={100} />
<CardSkeletonLoader width={100} />

const { trigger, setSnackBarType, setSnackBarTitle } = useTrigger();
  return (
     <Button
        title={/* button title */}
        onPress={() => {
          setSnackBarType(/* set snackbar type) */;
          setSnackBarTitle(/* set snackbar type) */;
          trigger(); /* trigger the snackbar */
        }}
      />
  )

  Put this in your App(): 
  <TriggerProvider>
    /* your code */
    <SnackBar delay={5000} animatedHeight={80} />
  </TriggerProvider
    

<Switch
  value={/* boolean value of switch */}
  onPress={/* get value at here */}
/>

<TextInputField
  title="/* your text input title */"
  onTextChange={/* get value at here */}
  placeHolder="/* your text input place holder */"
  value={/* input value here */}
/>

<TextInputSingleBox
  onChange={(set) => setCode(set)}
  type="string"
  length={5}
  customTextinputStyles={{ fontSize: Metrics[16] }}
/>

Put this in your App(): 
import {useTheme} from 'soras-ui'; /* import the package */
return(
  <ThemeProvider>
    /* your code */
  </ThemeProvider>
)

conts yourApp = () => {
  const { theme, toggleTheme, toggleSystemTheme } = useTheme();
  return (
    <Switch
      value={/* value of the switch */}
      onPress={/* get value here  */}
      disabled={/* set if the switch disable */}
    />
  )
}

Put this in your App(): 
import { VibrationProvider } from '../../src/theme/vibrationManagement';
return (
  <VibrationProvider>
  // Your code
  </VibrationProvider>
)

conts yourApp = () => {
  const { toggleVibration, setVibrationDuration, isVibrationEnabled, vibrationDuration, } = useVibration();

  return (
    <View>
      <RadioButton
        directionMode={{ direction: 'row' }}
        data={[
          { id: '1', title: '50ms', value: '50' },
          { id: '2', title: '100ms', value: '100' },
        ]}
        onPress={(set) => setVibrationDuration(Number(set.value))}
      />
      <Switch value={isVibrationEnabled} onPress={() => toggleVibration()} />
    </View>
  )
}