0.0.6 • Published 2 years ago

react-native-select-week-day v0.0.6

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

react-native-select-week-day

This react native package returns index of clicked week day bubble. For example if you click on 'sun' it will return '0' and vice versa. you can use this package for week day picker in your code.

Installation

Native Cli: npm install react-native-select-week-day

Expo: expo install react-native-select-week-day

Demo

Week Selector demo

Sample code

import { SelectWeekDay } from "react-native-select-week-day";
export default function App() {
  return (
    <SelectWeekDay
      selectableDays={["sun", "mon", "sat", "thu"]}
      containerStyle={{
        justifyContent: "center",
        alignItems: "center",
        marginVertical: 60,
      }}
      bubblesInitialColor={"green"}
      bubblesSelectedColor={"red"}
      size={50}
      onChange={(day) => alert(day)}
    />
  );
}

Use

import { SelectMultipleWeekDays } from "react-native-select-week-day";

if you want to select multiple days

Properties

PropsTypeDefaultDescription
selectableDaysString Array'Sun','Mon','Tue','Wed','Thu','Fri','Sat'
containerStyleObjectnull
initialWeekDaysString Array[]For multiple days selection
bubbleStyleObject{justifyContent: 'center', alignItems: 'center', borderRadius:75, padding: 10, margin: 5,backgroundColor: 'gray'}
bubbleTextStyleObject{color: 'white'}
bubblesInitialColorString'blue'
bubblesSelectedColorString'red'
onChangeFunctionnullIt will return index of clicked bubble
sizeNumber20