Help creating first custom component

Hi all,

I’m trying to create a custom component for react-native-football-lineup (I have no js experience so bare with me :slight_smile:) and I’m running into some issues with dependencies. What I’ve got so far is on GitHub here and when I try and run build.ps1 I’m getting the error below:

ERROR in ./node_modules/react-native-football-lineup/FootballField.js 15:6
Module parse failed: Unexpected token (15:6)
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
| render() {
| return (
> <View style={styles.container}>
| <ImageBackground
| source={require(’./images/footballfield.png’)}
@ ./components/UDSoccerLineup.jsx 20:0-57 157:33-46
@ ./components/index.js

So, from what I can tell it needs View imported from react-native. So I run npm install react-native --save and add import { View } from 'react-native'; into UDSoccerLineup.jsx but then when I run build.ps1 I get tons of errors, first one being:

ERROR in ./node_modules/react-native/Libraries/react-native/react-native-implementation.js
Module not found: Error: Can’t resolve ‘…/Components/AccessibilityInfo/AccessibilityInfo’ in ‘C:\Users\jdenton\Documents\GitHub\ud-soccer-lineup\src\node_modules\react-native\Libraries\react-native’
@ ./node_modules/react-native/Libraries/react-native/react-native-implementation.js 20:11-71
@ ./components/UDSoccerLineup.jsx
@ ./components/index.js

So looking at the error it says it can’t resolve node_modules\react-native\Libraries\Components\AccessibilityInfo\AccessibilityInfo which makes sense as that folder doesn’t exist but the folder node_modules\react-native\Libraries\Components\AccessibilityInfo does exist so I’m not sure why it adds an extra directory on the end.

Does anyone know where I’m going wrong?

I don’t think that react native components won’t work in React. You’d likely have to find a similar component developed for react.

React Native uses native components rather than web components. See this:

Ah OK. I didn’t realise react native was a separate thing. From a quick google search maybe I can utilise react-native-web… I’ll have a play around and see how I get on. Otherwise maybe I can have a go at converting the package to a react package (assuming that’s possible and it’s not too difficult :stuck_out_tongue:).

Thanks for the insight Adam.

So, been playing around and I’ve kinda got react-native-web working.

I’ve installed react-native-web, react-dom and babel-plugin-module-resolver and then aliased react-native to react-native-web in the webpack config and .babelrc file and if you checkout the test-data branch on my GitHub repo then I can compile OK using that test jsx file which makes use of react-native components.

However, if I try and uncomment the line importing the react-native-football-lineup package then it fails again with the same error about needing an appropriate loader so it looks like the alias works within my jsx file but not for imported packages maybe?

Anyone have any clues on which direction to go next?

so sorry man, i really need to get my eyes tested…first off congratulations for attempting to build a custom component, sorry i recommended a react native component for your football lineup…I personally would recommend trying to build something like the kawaii images I did for my first project…just to prove you got all the steps correct…the only components I have built have been REACT components not react native components…the kawaii thing I found was here https://react-kawaii.now.sh/ if you build that fine then guess its the fact is react native that you having issues.

@psDevUK no need to apologise it’s been a fun journey and I’m actually pretty invested in getting this React Native component working now :smile:

So, current status is that I have it half working. First, I had to change the regex for the babel-loader webpack rule so it didn’t exclude the React Native package. Then apparently Babel 7 doesn’t transpile node_modules with .babelrc so I had to rename that file to babel.config.json and that allowed the package to compile OK! After that I just needed an extra line in the build script to copy over the png files and when I test it in UD it all displays OK except it’s not displaying any of the png images (like the pitch background):

I added png to the regex for the file-loader rule in the webpack config but that doesn’t appear to have been enough to get them displayed unfortunately. I’ll keep trying but if anyone has any ideas then let me know :slightly_smiling_face:

2 Likes