CODEWITHSUNDEEP
react-nativereact-native-web
se22as
se22as

Reputation: 2382

Failing to alias react-native-linear-gradient to react-native-web-linear-gradient for react native web app

I have a react-native app with a single screen containing a LinearGradient which I am trying to get working as a web app.

When I run the application I have the following error.

./node_modules/react-native-linear-gradient/common.js
C:/myapp/node_modules/react-native-linear-gradient/common.js:6
  3 | import type { ElementProps } from 'react';
  4 | import { requireNativeComponent, View } from 'react-native';
  5 | 
> 6 | export default requireNativeComponent('BVLinearGradient');
  7 | 
  8 | export type Point = $Exact<{x: number, y: number}>;
  9 | type LinearGradientProps = {

Without the LinearGradient components the app runs perfectly OK. I believe the issue is that that "react-native-linear-gradient" will not work in a Web App.

Note: my version of react-native-web is "0.13.14"

App.js

import React from 'react';
import LinearGradient from 'react-native-linear-gradient';
import { StyleSheet, Text } from 'react-native';

const styles = StyleSheet.create({
  drawer: {
    flex: 1,
  },
});

const GRADIENT_COLORS = ['blue', 'white', 'black'];

export default class App extends React.Component {
  
  render() {
    
    return (
      <LinearGradient
        colors={GRADIENT_COLORS}
        style={styles.drawer}
      >
        <Text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum 
          erat in elit eleifend posuere. Cras interdum sagittis sem non consectetur. 
          Quisque nec faucibus odio. Phasellus ac ante felis. Nulla facilisis risus nulla, 
          eget interdum augue pellentesque id. Phasellus pellentesque augue eget porta 
          fringilla. Vivamus rhoncus scelerisque libero sit amet ullamcorper. Vestibulum 
          sit amet est ultrices, tristique risus vitae, aliquet ligula. Ut bibendum dignissim 
          tincidunt. In et tortor ullamcorper, dapibus arcu a, pellentesque velit. Praesent 
          ornare metus dapibus, tincidunt nulla in, maximus nisl. Ut molestie aliquam mi, 
          ac molestie purus sagittis eget. Aliquam sit amet lacus quis risus convallis semper.
        </Text>
      </LinearGradient>
    );
  }
}

I saw that there is a polyfill for LinearLayout, i.e. "react-native-web-linear-gradient". Therefore it is my understanding I simply install that package and alias the original LinearLayout to this one.

I have installed the following

My "config-overrides.js" is :

const {addWebpackAlias} = require('customize-cra');

module.exports = function override(config, env) {
  config.module.rules.push(
    {
      test: /\.js$/,
      exclude: /node_modules\/(?!()\/).*/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
          plugins: ['@babel/plugin-proposal-class-properties'],
        },
      },
    },
  );

  addWebpackAlias({
    'react-native-linear-gradient': 'react-native-web-linear-gradient',
  });

  return config;
};

Here I am aliasing 'react-native-linear-gradient' to 'react-native-web-linear-gradient'. My understanding is that all imports like

import LinearGradient from 'react-native-linear-gradient';

will be converted into

import LinearGradient from 'react-native-web-linear-gradient';

by webpack when building the web app.

However I am still getting the same error, like its not using the alias.

What do I have wrong.

Upvotes: 2

Views: 1592

Answers (1)

tuan.tran
tuan.tran

Reputation: 1881

addWebpackAlias is not imported into the config, you should use the build-in override of custom-cra and refer to its api for webpack config

/* config-overrides.js */
const {
  override,
  addWebpackAlias,
  addBabelPlugins,
  addBabelPresets,
  babelExclude,
  path,
} = require('customize-cra');

module.exports = override(
  babelExclude([path.resolve("node_modules")]),
  ...addBabelPlugins('@babel/plugin-proposal-class-properties'),
  ...addBabelPresets('@babel/preset-env', '@babel/preset-react'),
  addWebpackAlias({
    'react-native-linear-gradient': 'react-native-web-linear-gradient',
  }),
);

Edit: you can use babelExclude to exclude folder you don't want to transpile

Upvotes: 2

Related Questions