BVLinearGradient problem on expo web

[NicolasBorlet]

PROBLEM DESCRIPTION I have a problem with BVLLinearGradient in my project. After installing all the necessary dependencies, the project works fine on mobile, but on the web the charts are not displayed, and a warning message appears in the console:

`WARNING in ./node_modules/react-native-linear-gradient/common.js:7:15 export 'requireNativeComponent' (imported as 'requireNativeComponent') was not found in 'react-native-web/dist/index' (possible exports: AccessibilityInfo, ActivityIndicator, Alert, Animated, AppRegistry, AppState, Appearance, BackHandler, Button, CheckBox, Clipboard, DeviceEventEmitter, Dimensions, Easing, FlatList, I18nManager, Image, ImageBackground, InteractionManager, Keyboard, KeyboardAvoidingView, LayoutAnimation, Linking, LogBox, Modal, NativeEventEmitter, NativeModules, PanResponder, Picker, PixelRatio, Platform, Pressable, ProgressBar, RefreshControl, SafeAreaView, ScrollView, SectionList, Share, StatusBar, StyleSheet, Switch, Text, TextInput, Touchable, TouchableHighlight, TouchableNativeFeedback, TouchableOpacity, TouchableWithoutFeedback, UIManager, Vibration, View, VirtualizedList, YellowBox, findNodeHandle, processColor, render, unmountComponentAtNode, unstable_createElement, useColorScheme, useLocaleContext, useWindowDimensions) 5 | 6 | / $FlowFixMe / 7 | export default requireNativeComponent('BVLinearGradient'); | ^ 8 | 9 | export type Point = $ReadOnly<{| x: number, y: number |}>; 10 |

web compiled with 1 warning`

PROJECT CONFIGURATION My project is very simple, I used the typescript expo template and added what I needed. This problem occurs with or without the template.

Here is my package.json :

{
  "name": "my-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/webpack-config": "^19.0.0",
    "expo": "~49.0.15",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.6",
    "react-native-chart-kit": "^6.12.0",
    "react-native-gifted-charts": "^1.3.12",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-svg": "13.9.0",
    "react-native-web": "~0.19.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.14",
    "typescript": "^5.1.3"
  },
  "private": true
}

Here is the main file :

import { StyleSheet, View } from "react-native";
import { BarChart } from "react-native-gifted-charts";

export default function App() {
  const barData = [{ value: 15 }, { value: 30 }, { value: 26 }, { value: 40 }];

  return (
    <View style={styles.container}>
      <BarChart data={barData} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

I've already looked at the issues on the git but none of the proposed solutions work.

I hope to find a solution, this library is what I'm looking for.

[kholusoft]

I am also not able to use these charts in expo-web

[YahyaBagia]

Apart from Expo-Web, does it work fine with ExpoGo? (i.e. on Android and iOS mobile apps)?

[hkellou-vitalcare]

I believe the library doesn't support web apps as stated here https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/blob/master/README.md