declaring const in class component react-native

Issue

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",
  }
});

Solution

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

Example:

From your code you can convert you component from class based to function based like this:

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 useState and useEffect hooks from react
import React, { Component, useState, useEffect } 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";

// convert class main to function main
export default function main () {
  // initialize network_status state here with useState
  const [network_status, set_network_status] = useState("");

  const store = useStore();
  
  // use useEffect to run Check_Internet when the component mounts
  useEffect(() => {
    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) {
        // set state with set_network_status
        set_network_status("online");
      }
      else {
        // set state with set_network_status
        set_network_status("offline");
      }
    });
  }

  // remove render and return raw jsx
  if (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={Check_Internet}
        />
        </Provider>
      </TailwindProvider>
    )
  }
}
const styles = StyleSheet.create({
  txt: {
    fontSize: 20,
    fontWeight: "bold",
  }
});

You can read more on useState and useEffect from the official react docs website

USEFUL LINKS

• useState: link to useState documentation
• useEffect: link to useEffect documentation
• function and class components: link to documentation on function and components

Answered By – Rilla

Answer Checked By – Mildred Charles (FlutterFixes Admin)