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

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

| Props | Type | Default | Description | | -------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------- | -------------------------------------- | | selectableDays | String Array | ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'] | | containerStyle | Object | null | | initialWeekDays | String Array | [] | For multiple days selection | | bubbleStyle | Object | {justifyContent: 'center', alignItems: 'center', borderRadius:75, padding: 10, margin: 5,backgroundColor: 'gray'} | | bubbleTextStyle | Object | {color: 'white'} | | bubblesInitialColor | String | 'blue' | | bubblesSelectedColor | String | 'red' | | onChange | Function | null | It will return index of clicked bubble | | size | Number | 20 |