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/
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?
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/