Android. Error: Text strings must be rendered within a <Text> component

[xdien]

Hi I am having problems with Chart Guage on android. I run this code and it works fine in web browser.

import * as React from 'react';
import {Chart} from 'react-google-charts';

export default class GaugeChartController extends React.Component {

  render() {
    return (
      <Chart
        width={250}
        height={120}
        chartType="Gauge"
        loader={<div>Loading Chart</div>}
        data={[
          ['Label', "value"],
          ['Oil', 35],
          ['Water', 36],
        ]}
        options={{
          redFrom: 110,
          redTo: 130,
          yellowFrom: 100,
          yellowTo: 110,
          minorTicks: 5,
          max: 130,
          min: 30
        }}
      />
    );
  }
}

But when I try it on android, I get this error

Error: Text strings must be rendered within a <Text> component.

This error is located at:
    in div (at LoRuouController.tsx:18)
    in ContextProvider (created by Chart)
    in Chart (at LoRuouController.tsx:14)
    in LoRuouController (at SceneView.tsx:130)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:123)
    in EnsureSingleNavigator (at SceneView.tsx:122)
    in SceneView (at useDescriptors.tsx:181)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:245)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:244)
    in RCTView (at View.js:34)
    in View (at CardSheet.tsx:33)
    in ForwardRef(CardSheet) (at Card.tsx:573)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
    in PanGestureHandler (at GestureHandlerNative.tsx:13)
    in PanGestureHandler (at Card.tsx:549)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
    in RCTView (at View.js:34)
    in View (at Card.tsx:538)
    in Card (at CardContainer.tsx:206)
    in CardContainer (at CardStack.tsx:619)
    in RNSScreen (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at src/index.native.tsx:147)
    in Screen (at Screens.tsx:74)
    in MaybeScreen (at CardStack.tsx:612)
    in RNSScreenContainer (at src/index.native.tsx:186)
    in ScreenContainer (at Screens.tsx:50)
    in MaybeScreenContainer (at CardStack.tsx:494)
    in CardStack (at StackView.tsx:462)
    in KeyboardManager (at StackView.tsx:458)
    in SafeAreaProviderCompat (at StackView.tsx:455)
    in RCTView (at View.js:34)
    in View (at GestureHandlerRootView.android.tsx:21)
    in GestureHandlerRootView (at StackView.tsx:454)
    in StackView (at createStackNavigator.tsx:87)
    in StackNavigator (at BottomTabNavigator.tsx:124)
    in LoRuouNavigator (at SceneView.tsx:130)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:123)
    in EnsureSingleNavigator (at SceneView.tsx:122)
    in SceneView (at useDescriptors.tsx:181)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:245)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:244)
    in RCTView (at View.js:34)
    in View (at CardSheet.tsx:33)
    in ForwardRef(CardSheet) (at Card.tsx:573)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
    in PanGestureHandler (at GestureHandlerNative.tsx:13)
    in PanGestureHandler (at Card.tsx:549)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
    in RCTView (at View.js:34)
    in View (at Card.tsx:538)
    in Card (at CardContainer.tsx:206)
    in CardContainer (at CardStack.tsx:619)
    in RNSScreen (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at src/index.native.tsx:147)
    in Screen (at Screens.tsx:74)
    in MaybeScreen (at CardStack.tsx:612)
    in RNSScreenContainer (at src/index.native.tsx:186)
    in ScreenContainer (at Screens.tsx:50)
    in MaybeScreenContainer (at CardStack.tsx:494)
    in CardStack (at StackView.tsx:462)
    in KeyboardManager (at StackView.tsx:458)
    in SafeAreaProviderCompat (at StackView.tsx:455)
    in RCTView (at View.js:34)
    in View (at GestureHandlerRootView.android.tsx:21)
    in GestureHandlerRootView (at StackView.tsx:454)
    in StackView (at createStackNavigator.tsx:87)
    in StackNavigator (at BottomTabNavigator.tsx:63)
    in TabOneNavigator (at SceneView.tsx:130)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:123)
    in EnsureSingleNavigator (at SceneView.tsx:122)
    in SceneView (at useDescriptors.tsx:181)
    in RCTView (at View.js:34)
    in View (at BottomTabView.tsx:55)
    in SceneContent (at BottomTabView.tsx:172)
    in RNSScreen (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at src/index.native.tsx:147)
    in Screen (at ResourceSavingScene.tsx:28)
    in ResourceSavingScene (at BottomTabView.tsx:166)
    in RNSScreenContainer (at src/index.native.tsx:186)
    in ScreenContainer (at BottomTabView.tsx:146)
    in RCTView (at View.js:34)
    in View (at BottomTabView.tsx:145)
    in SafeAreaProviderCompat (at BottomTabView.tsx:144)
    in BottomTabView (at createBottomTabNavigator.tsx:45)
    in BottomTabNavigator (at BottomTabNavigator.tsx:29)
    in BottomTabNavigator (at SceneView.tsx:130)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:123)
    in EnsureSingleNavigator (at SceneView.tsx:122)
    in SceneView (at useDescriptors.tsx:181)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:245)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:244)
    in RCTView (at View.js:34)
    in View (at CardSheet.tsx:33)
    in ForwardRef(CardSheet) (at Card.tsx:573)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
    in PanGestureHandler (at GestureHandlerNative.tsx:13)
    in PanGestureHandler (at Card.tsx:549)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
    in RCTView (at View.js:34)
    in View (at Card.tsx:538)
    in Card (at CardContainer.tsx:206)
    in CardContainer (at CardStack.tsx:619)
    in RNSScreen (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at src/index.native.tsx:147)
    in Screen (at Screens.tsx:74)
    in MaybeScreen (at CardStack.tsx:612)
    in RNSScreenContainer (at src/index.native.tsx:186)
    in ScreenContainer (at Screens.tsx:50)
    in MaybeScreenContainer (at CardStack.tsx:494)
    in CardStack (at StackView.tsx:462)
    in KeyboardManager (at StackView.tsx:458)
    in SafeAreaProviderCompat (at StackView.tsx:455)
    in GestureHandlerRootView (at GestureHandlerRootView.android.tsx:26)
    in GestureHandlerRootView (at StackView.tsx:454)
    in StackView (at createStackNavigator.tsx:87)
    in StackNavigator (at navigation/index.tsx:34)
    in RootNavigator (at navigation/index.tsx:23)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:411)
    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
    in ThemeProvider (at NavigationContainer.tsx:90)
    in ForwardRef(NavigationContainer) (at navigation/index.tsx:20)
    in Navigation (at App.tsx:63)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
    in SafeAreaProvider (at App.tsx:61)
    in SSRProvider (at NativeBaseProvider.tsx:93)
    in ToastProvider (at NativeBaseProvider.tsx:91)
    in PortalProvider (at NativeBaseProvider.tsx:90)
    in HybridProvider (at NativeBaseProvider.tsx:86)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
    in SafeAreaProvider (at NativeBaseProvider.tsx:81)
    in NativeBaseConfigProviderProvider (at NativeBaseProvider.tsx:76)
    in ThemeProvider (at NativeBaseProvider.tsx:75)
    in NativeBaseProvider (at App.tsx:60)
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0

Info

• expo 42.0
• npm@8.3.0
• node v16.13.0
• react-google-charts: "^3.0.15"

[DierAkramov]

Did you solve this issue?

[xdien]

this problem is because the library running is reactjs not react native. problem is not resolved.

[Arantiryo]

react-google-charts is indeed not supposed to be used with React Native. You might want to look at other solutions.

[xdien]

yes i found another workaround for react native. The problem may be closed.

[dustinmoore]

@xdien would you be willing to share your workaround? I'm also looking for a way to use Google Charts in react native.

[xdien]

@xdien would you be willing to share your workaround? I'm also looking for a way to use Google Charts in react native.

My solution is not very good. i use another library for reatjs native, react-native-chart-kit