react native hooks can only be called inside body of a function component

i am new to react i need help with the usestate need it to change style to display none saving
the text in state then show use it in the inline css the code is below

import React, { useState, Component, useEffect } from 'react';
import { StyleSheet, Text, View, Alert, Image} from "react-native";
import MashButton from "./src/CustomButton";
import Mashcalculator from "./src/calculator";
import { Textfit } from "react-textfit";
import NetInfo from "@react-native-community/netinfo";


const runstartfunc = (res) =>{
  if (res == 'Connected'){
      createTwoButtonAlert('continue');
  }else{
      createTwoButtonAlert('text');
  }
}


const unsubscribe = NetInfo.addEventListener(state => {
     if(state.isConnected == true){
        runstartfunc('Connected');
     }else{
        runstartfunc('Not Connected');
     }
});


const App = () => (  
  const [hidelogo, setHide] = useState("display:none;");

  useEffect(() => { 
  // Update the document title using the browser API
  unsubscribe();
}),

  <View style={styles.container}>
     <Image id="logo" style={styles.tinyLogo} source={require("./assets/logo.png")} />
     <Text id="logo-text" style={[styles.logotext, {hidelogo}]}>Show Bookie</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingLeft: 5,
    paddingRight: 5,
    backgroundColor: "#2e0739",
    alignItems:"center",
    justifyContent: "center",
  },
  logotext: {
    fontSize: 25,
    color: '#12cfed',
    fontWeight: "bold",
  },
  tinyLogo: {
    marginBottom: 10,
    width: 80,
    height: 80,
  },
  title: {
    marginTop: 16,
    paddingVertical: 8,
    borderWidth: 4,
    borderColor: "#20232a",
    borderRadius: 6,
    backgroundColor: "#61dafb",
    color: "#20232a",
    textAlign: "center",
    fontSize: 30,
    fontWeight: "bold",
    marginBottom: 15,
 }
 });

export default App;

When Ever i run the above code i get this error

ERROR Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

i don’t know what could be wrong i will really appreciate if you guys can help me figure this out

>Solution :

import React, { useState, Component, useEffect } from 'react';
import { StyleSheet, Text, View, Alert, Image} from "react-native";
import MashButton from "./src/CustomButton";
import Mashcalculator from "./src/calculator";
import { Textfit } from "react-textfit";
import NetInfo from "@react-native-community/netinfo";


const runstartfunc = (res) =>{
  if (res == 'Connected'){
      createTwoButtonAlert('continue');
  }else{
      createTwoButtonAlert('text');
  }
}


const unsubscribe = NetInfo.addEventListener(state => {
     if(state.isConnected == true){
        runstartfunc('Connected');
     }else{
        runstartfunc('Not Connected');
     }
});


const App = () => {

const [hidelogo, setHide] = useState("display:none;");

  useEffect(() => { 
  // Update the document title using the browser API
  unsubscribe();
})
   return( <View style={styles.container}>
     <Image id="logo" style={styles.tinyLogo} source={require("./assets/logo.png")} />
     <Text id="logo-text" style={[styles.logotext, {hidelogo}]}>Show Bookie</Text>
  </View>
)
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingLeft: 5,
    paddingRight: 5,
    backgroundColor: "#2e0739",
    alignItems:"center",
    justifyContent: "center",
  },
  logotext: {
    fontSize: 25,
    color: '#12cfed',
    fontWeight: "bold",
  },
  tinyLogo: {
    marginBottom: 10,
    width: 80,
    height: 80,
  },
  title: {
    marginTop: 16,
    paddingVertical: 8,
    borderWidth: 4,
    borderColor: "#20232a",
    borderRadius: 6,
    backgroundColor: "#61dafb",
    color: "#20232a",
    textAlign: "center",
    fontSize: 30,
    fontWeight: "bold",
    marginBottom: 15,
 }
 });

export default App;