<DatePicker
    style={styles.DatePickerJz}
    label="Birth Date"
    mode="date"
    leftIconMode="inset"
    type="underline"
    date={birthDate}
    onDateChange={birthDate => setBirthDate(birthDate)}
    error={true}
/>

TypeError: null is not an object (evaluating 'date.getMonth')

This error is located at:
    in DatePicker (created by Context.Consumer)
    in ThemedComponent (created by withTheme(DatePicker))
    in withTheme(DatePicker) (at BabyDetailsScreen.js:201)
    in RCTView (at View.js:34)
    in View (at BabyDetailsScreen.js:108)
    in RCTView (at View.js:34)
    in View (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at BabyDetailsScreen.js:103)
    in RCTView (at View.js:34)
    in View (at ScreenContainer.tsx:62)
    in RCTView (at View.js:34)
    in View (at SafeAreaView.js:41)
    in ForwardRef(SafeAreaView) (at ScreenContainer.tsx:53)
    in ScreenContainer (created by Context.Consumer)
    in ThemedComponent (created by withTheme(ScreenContainer))
    in withTheme(ScreenContainer) (at BabyDetailsScreen.js:83)
    in BabyDetailsScreen (created by Context.Consumer)
    in ThemedComponent (created by withTheme(BabyDetailsScreen))
    in withTheme(BabyDetailsScreen) (at SceneView.tsx:122)

const [birthDate, setBirthDate] = React.useState(new Date().toISOString());
   :
// make certain to not overwrite birthDate with invalid ISO // date string in useEffect() data fetches from DB
   :
    <DatePicker
        style={styles.DatePickerJz}
        label="Birth Date"
        mode="date"
        leftIconMode="inset"
        type="underline"
        date={new Date(birthDate)}
        onDateChange={newBirthDate => setBirthDate(newBirthDate)}
        error={!isEmpty(birthDate)}
    />

Here is what we are building:




Create a Book Profile screen

• ScrollView
• ImageBackground
• Fetch
• View
• Image
• Text
• Container
• FAB

Add a scrolling view

• Open the workspace in the Draftbit Builder, then open the app you are building.
• Add a new Blank screen using the plus icon button in the left panel and call it Book Profile.
• The contents of this screen are going to be wrapped inside a scrollable view. Add ScrollView from the Layout component.
• Add a background image using the ImageBackground Media component and change Source type to static for it from the Configs tab of the Properties panel on the right side to choose a custom background image.




On the ImageBackground component set the following padding properties from the Style tab:

• top: 34
• bottom: 34
• left: 32
• right: 32





• Then, add a View as the child of the ImageBackground component. Set the Align property on the View to center and set the height to 100%.
• Add Fetch component as a child to this View. It will be responsible for fetching the data once we enable the navigation from the API endpoint.
• Inside the Fetch, add another View that will act as a container for the content to be displayed on the Book Profile screen.




After this step, here is how the Layout of the screen will look like:




Add an image component to display the book cover

• Start by adding a View component as a child to the last View created in the previous step. This new View component will be displayed, the book cover image, the book's title, and the author's name.
• In the Styles tab in the Properties panel, under Flex Items set the value of Align property to center. Then, add a padding-top and padding-bottom of 34.
• Inside this View, add a Container component with margin-bottom of 24, width of 120 and height of 190, and set the value of Overflow to hidden. In the Configs tab, set the value of Elevation property to 3.
• Add an Image component as the child to the Container with a width of 120 and height of 190.





• Adjacent to Container, add another View component that will contain Text components to display the title and the author's name.
• For this View, in the Styles tab, under Flex Items set the value of Align property to center, and set padding-top and padding-bottom to 24.
• Add two Text components to this View as children.
• The first Text component will display the title of the book. In the Styles tab, set the Font Size to 28, set Color to Custom, and set the margin-bottom to 8.
• For the second Text component, set the font set Color to Strong.




We do not have any data to display. Let's add that first in the next section.

Passing data from one screen to another

• Book of the day section
• Trending list
• New Books list

• Select the Touchable in the Layout Tree.
• Go to the Interactions tab of the Properties Panel and click the '+' icon next to the 'Action' section.
• Select the Navigation action, then in the Basics section, select the Destination screen to navigate, in this case, Books Profile.
• In the Pass Data section, click the '+' icon, add id as the key and select the ID from the API endpoint, which is of format: Endpoint Name/id (fetch data).





• Go to the Fetch component, go to the Data tab in the Properties panel.
• In the Setup section, select the Service name that is the REST API service. Then, select the Endpoint, which is to fetch a single book item.
• In the Configuration section, at the URL Structure, select the id (navigation) as the value for ID key.





• To display the data on the Image component, go to the Data tab in the Properties Panel, change the Source Type to Data, and select the image_url variable. Image component supports three type source types:
  • Static used to display an image from a static asset.
  • Remote URL (default option) used to display an image from a URL. Data used to map the image's source to the key in API endpoint such as image_url in the current example.
• Next, add a variable to display the title of a book from the API endpoint. Text component supports static text and dynamic values using {{varName}} format. For the Book Profile, select the {{getBookOfTheDayTitle}} to display the title.
• For the author's name, set it to variable By {{getBookOfTheDayAuthors}}. The prefix "By" remains static and is followed by the author's name from the API endpoint, which is dynamic.





Add the description section

• Start by adding a View component adjacent to the View that wraps the image, title, and author's name.
• In Styles tab, set the padding-top and padding-bottom values to 24. In the Size section, set width to 100%.
• Add two Text components inside it.
• For the first Text component, set the font size to 20 and a margin-bottom of 8 in the Styles tab. In the Data tab, set a static text value of About this book in the Input Text section. This component acts as the header of the section for a book's description.
• For the second Text component, in the Data tab, set the value of the variable {{getBookOfTheDayDescription}}.





Add the quotes section

• Add a View component adjacent to the two previous View components. In the Styles tab, set margin-top to 34, margin-bottom to 64, and padding-top and padding-bottom to 24.
• Add a Container inside it. In the Styles tab, set padding-top and padding-bottom to 18, padding-left and padding-right to 4, and a margin-bottom to 34. In the same tab, set its Color to Background from the drop-down menu. Remove any default value for height property. In the Configs tab, set the value of the Elevation property to 3.
• Add a Text inside the Container. In the Styles tab, set its Align property value to center, set margin-top and margin-bottom to 6 and set the font-size to 22 . In the Data tab, set the value of the variable to {{getBookOfTheDayQuote1}}.
• The next two Contains are going to have the same styles properties. The Text component wrapped inside each of the components will differ in the dynamic value for quotes. These values are such as {{getBookOfTheDayQuote2}} and {{getBookOfTheDayQuote2}}.
• Instead of creating these two Containers on your own and then go through the whole process, you can save the first Container component and its contents as a Custom Block by clicking the "..." icon on the component and then click the Save Custom Block. Add a name for the Custom Block and then click Save.
• To add a Custom Block, click the "+" icon on the parent View component, go to Saved block components, and select the component name you just saved.





Add a FAB button

• FAB Mini
• FAB Fixed
• FAB Outline
• FAB extended

• Adjacent to the ScrollView component, add a FAB Fixed.
• In the Styles tab, select the value for Position to be absolute. Also, set the value for left, right, and bottom properties to 32.
• In the Config tab, change the value of the Label to "Buy this book".
• In the Interactions tab, add an action by clicking the '+' icon next to the 'Action' section. Select the "Open Site in Browser" from the menu.
• Add a mock URL for the Destination property such that when a user taps this button, it will open a link in the webview.

Here is the final output:




Further reading

• Types of actions available in Draftbit