Quick Intro to Storybook with React Native

// picker.stories.js import { action } from "@storybook/addon-actions"; import { storiesOf } from "@storybook/react-native"; import React from "react"; import { CalendarPicker } from "../../../components/CalendarPicker"; import CenterView from "../CenterView"; storiesOf("Pickers", module) .addDecorator((getStory) => <CenterView>{getStory()}</CenterView>) .add("basic calendar", () => ( <CalendarPicker onCancelDate={action("onCancelDate")} onSaveDate={action("onSaveDate")} /> )); 

// components/CalendarPicker.js import React, { useState } from "react"; import { Text, View, Button, StyleSheet, TouchableOpacity } from "react-native"; import { Agenda, Calendar, LocaleConfig } from "react-native-calendars"; LocaleConfig.locales["en"] = { formatAccessibilityLabel: "dddd d 'of' MMMM 'of' yyyy", monthNames: [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ], monthNamesShort: [ "jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec", ], dayNames: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", ], dayNamesShort: ["S", "M", "T", "W", "T", "F", "S"], // numbers: ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'] // number localization example }; LocaleConfig.defaultLocale = "en"; export function CalendarPicker({ onSaveDate, onCancelDate }) { const [selectedDate, setSelectedDate] = useState(null); return ( <View style={styles.container}> <Calendar style={{ marginBottom: 10, width: "100%", }} // Initially visible month. Default = Date() // current={"2012-03-01"} // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined // minDate={"2012-05-10"} // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined // maxDate={"2012-05-30"} // Handler which gets executed on day press. Default = undefined onDayPress={(day) => { console.log("selected day", day); setSelectedDate(day); }} // Handler which gets executed on day long press. Default = undefined onDayLongPress={(day) => { console.log("selected day", day); }} // Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting // monthFormat={"yyyy MM"} // Handler which gets executed when visible month changes in calendar. Default = undefined onMonthChange={(month) => { console.log("month changed", month); }} // Hide month navigation arrows. Default = false // hideArrows={true} // Replace default arrows with custom ones (direction can be 'left' or 'right') // renderArrow={(direction) => <Arrow />} // Do not show days of other months in month page. Default = false hideExtraDays={true} // If hideArrows = false and hideExtraDays = false do not switch month when tapping on greyed out // day from another month that is visible in calendar page. Default = false disableMonthChange={false} // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday firstDay={1} // Hide day names. Default = false // hideDayNames={true} // Show week numbers to the left. Default = false showWeekNumbers={false} // Handler which gets executed when press arrow icon left. It receive a callback can go back month onPressArrowLeft={(subtractMonth) => subtractMonth()} // Handler which gets executed when press arrow icon right. It receive a callback can go next month onPressArrowRight={(addMonth) => addMonth()} // Disable left arrow. Default = false disableArrowLeft={false} // Disable right arrow. Default = false disableArrowRight={false} // Disable all touch events for disabled days. can be override with disableTouchEvent in markedDates disableAllTouchEventsForDisabledDays={true} // Replace default month and year title with custom one. the function receive a date as parameter // renderHeader={(date) => { // /*Return JSX*/ // }} // Enable the option to swipe between months. Default = false enableSwipeMonths={true} /> <View style={{ backgroundColor: "grey", alignItems: "center", paddingHorizontal: 20, paddingVertical: 12, borderRadius: 8, }} > <View> <Text style={{ fontSize: "large", fontWeight: "bold", color: "white" }} > SELECTED DATE </Text> </View> <View> <Text style={{ fontSize: "large", fontWeight: "bold", color: "white" }} > {selectedDate?.dateString} </Text> </View> </View> <View style={{ flexDirection: "row", justifyContent: "space-evenly", paddingHorizontal: 12, }} > <TouchableOpacity onPress={() => pickDocument()} style={{ backgroundColor: "green", padding: 8, margin: 12, alignItems: "center", width: "45%", borderRadius: 8, }} > <Text style={{ color: "white", fontWeight: "bold", textTransform: "uppercase", textAlign: "center", }} onPress={() => onSaveDate(selectedDate)} > SAVE SELECTED DATE </Text> </TouchableOpacity> <TouchableOpacity onPress={() => onCancelDate(null)} style={{ backgroundColor: "red", padding: 8, margin: 12, alignItems: "center", width: "45%", borderRadius: 8, alignContent: "center", justifyContent: "center", }} > <Text style={{ color: "white", fontWeight: "bold", textTransform: "uppercase", }} > CANCEL </Text> </TouchableOpacity> </View> </View> ); } const styles = StyleSheet.create({ container: { backgroundColor: "#fff", alignItems: "center", justifyContent: "center", // borderColor: "grey", // borderWidth: 1, }, }); 

// storybook/stories/index.js import "./Button/Button.stories"; import "./Welcome/Welcome.stories"; import "./Picker/Picker.stories"; //<== NEW