Calendar widget Native app

2
Hi all!  We are looking to go Native with our app, which is very exciting but also quite challenging. In our app we need some kind of calendar, but unfortunately, no such widget is available for native (yet). https://github.com/wix/react-native-calendars seems very useful and exactly what we need, anyone who perhaps has already implemented this? Or has an idea how to (like maybe how to use the steps for building a pluggable widget, except it's for this calendar rather than the TextBox example ;))? Thanks in advance!  Sophie  
asked
3 answers
2

Hi Sophie,

You should watch this session by Danny Roest, the product manager for mobile. In the second part (minute 10), he does a hands-on demo on building a pluggable widget from a similar react component.
https://www.mendixworld.com/session/getting-started-with-react-native/

 

answered
0

I managed to get the Timeline widget working following Danny Roest's demo, using that exact same widget

However, that widget unfortunately does not meet our requirements, as we really need a calendar widget. 

When I make a widget and use the widget that I mentioned above (https://github.com/wix/react-native-calendars), I'm not quite sure which piece of code I could best use as an example.

 

Anyway, when I run npm start with just the following in my .jsx file (as I don't really have an example code): 
 

import { Component, createElement } from "react";

import {CalendarNewComponent, CalendarList, Agenda} from 'react-native-calendars';

export class CalendarNew extends Component {
    render() {
        return <CalendarNewComponent />;
    }
}

I get the following errors: 

 

ERROR in ./node_modules/react-native-calendars/src/img/down.png 1:0
    Module parse failed: Unexpected character '�' (1:0)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    (Source code omitted for this binary file)
     @ ./node_modules/react-native-calendars/src/expandableCalendar/calendarProvider.js 1:2213-2239
     @ ./node_modules/react-native-calendars/src/index.js
     @ ./src/CalendarNew.jsx

    ERROR in ./node_modules/react-native-calendars/src/img/up.png 1:0
    Module parse failed: Unexpected character '�' (1:0)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    (Source code omitted for this binary file)
     @ ./node_modules/react-native-calendars/src/expandableCalendar/calendarProvider.js 1:2251-2275
     @ ./node_modules/react-native-calendars/src/index.js
     @ ./src/CalendarNew.jsx

    ERROR in ./node_modules/react-native-calendars/src/calendar/img/next.png 1:0
    Module parse failed: Unexpected character '�' (1:0)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    (Source code omitted for this binary file)
     @ ./node_modules/react-native-calendars/src/expandableCalendar/index.js 1:17603-17638
     @ ./node_modules/react-native-calendars/src/index.js
     @ ./src/CalendarNew.jsx

    ERROR in ./node_modules/react-native-calendars/src/calendar/img/previous.png 1:0
    Module parse failed: Unexpected character '�' (1:0)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    (Source code omitted for this binary file)
     @ ./node_modules/react-native-calendars/src/expandableCalendar/index.js 1:17541-17580
     @ ./node_modules/react-native-calendars/src/index.js
     @ ./src/CalendarNew.jsx

 

Seems to be a parsing error. Deleting the image files (you know, trying never hurts ;)) results in new errors. Anyone has any ideas?

answered
0

You can resolve this issue by updating native webpack file. 

File Name: node_modules\@mendix\pluggable-widgets-tools\configs\webpack.native.config.js

Add the below lines of code,

{ test: /\.png$/, loader: "url-loader?limit=100000" }

{ test: /\.jpg$/, loader: "file-loader" }

Reference: https://padhmanaban.com/mendix-native-module-parse-failed-unexpected-character/

 

answered