I'm trying to making network error screen, in case lost network I want to show a screen with message about network issue,

before adding some extra lines of code constructor() and Check_Internet() function my code was working well. I'm accessing const store but there is a

TransformError SyntaxError: : unexpected token at line -> const store = useStore();

don't know somehow,I'm not able to figure it out whats going on there.

maybe I'm trying to add const in class thats why its appearing

App.js

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { TailwindProvider } from "tailwindcss-react-native";
import { Provider } from "react-redux";
import React, { Component } from 'react'

import Routes from "./routes";
import { useStore } from "./store";

import Lottie from 'lottie-react-native';
import NetInfo from '@react-native-community/netinfo';
import ButtonCstm from "./custom-components/Button";


export default class main extends Component {

  const store = useStore();

  constructor() {
    super();
    this.state = {
      network_status: "",
    }
    this.Check_Internet();

  }

  Check_Internet = async () => {
    await NetInfo.fetch().then(state => {
      console.log("Connection type", state.type);
      console.log("Is Connected", state.isConnected);

      if (state.isConnected == true) {
        this.setState({
          network_status: "online"
        })
      }
      else {
        this.setState({
          network_status: "offline"
        })
      }

    });
  }

  render() {
    if (this.state.network_status == "online") {
      return (
        <TailwindProvider>
          <Provider
            store={store}
          >
            <Routes />
            <StatusBar style="auto" />
            <Text> hey you are online</Text>
          </Provider>
        </TailwindProvider>
      )
    }
    else {
      return (
        <TailwindProvider>
          <Provider store={store} >
            <Routes />
            <StatusBar style="auto" />
            <Lottie style={{ marginBottom: 50, }} source={require('../../assets/animation/no-internet1.json')} autoPlay loop />
            <Text style={styles.txt}> hey you are Offline please check your internet</Text>
            <ButtonCstm
            stylebtn={{
              height: 50,
              width: 200,
              backgroundColor: "rgba(90, 154, 230, 1)",
              borderRadius: 10,
              position: "absolute",
              bottom: 80,

            }}
            title={"Try Again"}
            stylebtntitle={{
              color: colors.black,
              fontWeight: "normal",
              fontSize: 20,
              marginTop: 12,
              textAlign: "center",
              fontFamily: "OpenSans",
            }}
            onPress={this.Check_Internet}
          />
          </Provider>
        </TailwindProvider>
      )
    }
  }
}
const styles = StyleSheet.create({
  txt: {
    fontSize: 20,
    fontWeight: "bold",
  }
});

CodePudding user response：

Convert your component from a class based component to a function based component to use hooks

Currently you can't use Hooks inside a class components Read More on the official react docs

CodePudding user response：

Class components cannot use React hooks. Best solution is to convert your component from class to functional.

There may be another solution to achieve the same result in a class component but if you wish to use hooks, it must be a functional component.