What am I doing wrong with my code here I'm so lost - react-native

Question

I'm trying to input my firestore into the form and put all my user data so I can pass information as
profile.name
profile.email
profile.location
profile.avatar
so what am I doing wrong here to keep on receiving this error?
Error
This is my mock screen
import Fire from '../utilities/Fire';
super(props);
this.state = {
user: {}
}
const user = this.props.uid || Fire.shared.uid
this.unsubscribe = Fire.shared.firestore
.collection("users")
.doc(user)
.onSnapshot(doc => {
this.setState({ user: doc.data() });
});
this.unsubscribe();
unsubscribe = null;
const profile = {
username: this.state.user.name,
location: this.state.user.location,
email: this.state.user.email,
avatar: this.state.user.avatar ? { uri: this.state.user.avatar } : require("../assets/avatar.png"),
notifications: true,
};
export { profile };
This is my Settings Page
import React, { Component } from "react";
import { Image, StyleSheet, ScrollView, TextInput } from "react-native";
import { Divider, Button, Block, Text, Switch } from "../components";
import { theme, mock } from "../constants";
class Settings extends Component {
state = {
notifications: true,
editing: null,
profile: {}
};
componentDidMount() {
this.setState({ profile: this.props.profile });
}
handleEdit(name, text) {
const { profile } = this.state;
profile[name] = text;
this.setState({ profile });
}
toggleEdit(name) {
const { editing } = this.state;
this.setState({ editing: !editing ? name : null });
}
renderEdit(name) {
const { profile, editing } = this.state;
if (editing === name) {
return (
<TextInput
defaultValue={profile[name]}
onChangeText={text => this.handleEdit([name], text)}
/>
);
}
return <Text bold>{profile[name]}</Text>;
}
render() {
const { profile, editing } = this.state;
return (
<Block>
<Block flex={false} row center space="between" style={styles.header}>
<Text h1 bold>
Settings
</Text>
<Button>
<Image source={profile.avatar} style={styles.avatar} />
</Button>
</Block>
<ScrollView showsVerticalScrollIndicator={false}>
<Block style={styles.inputs}>
<Block row space="between" margin={[10, 0]} style={styles.inputRow}>
<Block>
<Text gray2 style={{ marginBottom: 10 }}>
Username
</Text>
{this.renderEdit("username")}
</Block>
<Text
medium
secondary
onPress={() => this.toggleEdit("username")}
>
{editing === "username" ? "Save" : "Edit"}
</Text>
</Block>
<Block row space="between" margin={[10, 0]} style={styles.inputRow}>
<Block>
<Text gray2 style={{ marginBottom: 10 }}>
Location
</Text>
{this.renderEdit("location")}
</Block>
<Text
medium
secondary
onPress={() => this.toggleEdit("location")}
>
{editing === "location" ? "Save" : "Edit"}
</Text>
</Block>
<Block row space="between" margin={[10, 0]} style={styles.inputRow}>
<Block>
<Text gray2 style={{ marginBottom: 10 }}>
E-mail
</Text>
<Text bold>{profile.email}</Text>
</Block>
</Block>
</Block>
<Divider margin={[theme.sizes.base, theme.sizes.base * 2]} />
<Divider />
<Block style={styles.toggles}>
<Block
row
center
space="between"
style={{ marginBottom: theme.sizes.base * 2 }}
>
<Text gray2>Notifications</Text>
<Switch
value={this.state.notifications}
onValueChange={value => this.setState({ notifications: value })}
/>
</Block>
</Block>
</ScrollView>
</Block>
);
}
}
Settings.defaultProps = {
profile: mock.profile
};
export default Settings;
const styles = StyleSheet.create({
header: {
paddingHorizontal: theme.sizes.base * 2
},
avatar: {
height: theme.sizes.base * 2.2,
width: theme.sizes.base * 2.2
},
inputs: {
marginTop: theme.sizes.base * 0.7,
paddingHorizontal: theme.sizes.base * 2
},
inputRow: {
alignItems: "flex-end"
},
sliders: {
marginTop: theme.sizes.base * 0.7,
paddingHorizontal: theme.sizes.base * 2
},
thumb: {
width: theme.sizes.base,
height: theme.sizes.base,
borderRadius: theme.sizes.base,
borderColor: "white",
borderWidth: 3,
backgroundColor: theme.colors.secondary
},
toggles: {
paddingHorizontal: theme.sizes.base * 2
}
});
Tried to add a class function to fix it but now it's not recognized my profile on my const, tried to change the class name to mock and export both mock and profile but not working any tips?
fixed the first error but now I am getting a second error with my setState

Answer 1

The error is pretty informative.
You can not have super() sitting outside of a class constructor.
Here would be a working example of that:
class YourComponentName extends Component {
constructor( props ) {
super( props )
this.state = {
user: {}
}
}
...
}
export default YourComponentName
More info on super: https://overreacted.io/why-do-we-write-super-props/
While this should resolve the error you're getting, it probably will not resolve your underlying issue. I recommend researching React state machines.

Answer 2

super(props); should be used inside constructor on the class. So just wrap your super and state in the constructor or remove super completely.