how to solve this error You may need an appropriate loader to handle this file type

Partial fix >>

Steps:

1-npm install babel babel-cli --save-dev on the library

2-I add "transpile": "babel src/index.js --out-file src/index-transpiled.js" in package.json scripts

3-yarn transpile

4-I moved the ES5 file to my code and it worked

Update - Full Fix

I included my src folder and the libraries to babel too

// Process JS with Babel.
          {
            test: /\.(js|jsx|mjs)$/,
            include: [
              /src\/*/,
              /node_modules\/react-native-/,
            ],
            loader: require.resolve('babel-loader'),
            options: {
              babelrc: false,
              presets: [require.resolve('babel-preset-react-native')],
              cacheDirectory: true
            }
          },

I think this is because of ES7 feature. Do you have stage-0 installed & added to your .babelrc or webpack.config.js file?

Here how you can do it:

npm i --save-dev babel-preset-stage-0 And then you should include it into webpack.config.js file like below:

loader: "babel-loader", // or just "babel"
query: {
  presets: [ <other presets>, 'stage-0']
}

Or add it to .babelrc file:

{
  "presets": ["stage-0"]
}

UPDATE

As I said earlier the issue belongs to ES7 feature. Seems like webpack can not resolve static keyword within react-native-web-linear-gradient module. So what I did to fix this issue:

1. I copied the source code from react-native-web-linear-gradient into my own component called LinearGradient. I didn't change anything within it.
2. I installed stage-0 and added it to .babelrc as i described above.
3. Later instead of using react-native-web-linear-gradient i use my LinearGradient component.

As a result i got gradient on my page. git project link.

Hope it will help!

This is how webpack can be configured to load assets, such as images (pngs, svgs, jpgs and so on):

1. npm install --save-dev file-loader
2. Add this in the webpack.config.js, under the module.exports.rules:

{
  test: /\.(png|svg|jpg|gif)$/,
  use: ["file-loader"]
}

Now, when you import MyImage from './my-image.png', that image will be processed and added to your output directory and the MyImage variable will contain the final url of that image after processing.