React Native Hook in Class converting function to class variable undefined

Question

We are attempting to convert a react native function into a class so we can include state management that will work with Firebase real time database. We just realized you cannot use a Hook in a class so would appreciate some guidance as to the alternative that suites the situation the best. The app is a simple camera that allows you to record and post videos.

Here is the original code (works) snippet in a function. const type is decalred and uses hook useEffect. We need an alternative that works in a class.

export function App({ navigation }) {
  const [hasPermission, setHasPermission] = useState(null);
  const [cameraRef, setCameraRef] = useState(null)
  const [recording, setRecording] = useState(false)

  //type uses hooks declared HERE
  const [type, setType] = useState(Camera.Constants.Type.back); useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();

Here is what we're working on:

export class App extends Component {

  state = {
    hasPermission: null,
    cameraRef: null,
    recording: false,
    type: Camera.Constants.Type.back //can not find variable type HERE
  };

  componentDidMount() {

    async () => {
      status = await Camera.requestPermissionsAsync();
      setHasPermission(status === 'granted');

    }, []; if (hasPermission === null) {
      return <View />;
    }
    if (hasPermission === false) {
      return <Text>No access to camera</Text>;
    }

  }

Any help you be appreciated, thank you.

Answer 1

try this

export class App extends Component {

 state = {
      hasPermission: null,
      cameraRef: null,
      recording: false,
      type: Camera.Constants.Type.back //can not find variable type HERE
 };

 async componentDidMount() {

      status = await Camera.requestPermissionsAsync();
      this.setState({
           hasPermission: 'granted'
      });

      if (this.state.hasPermission === null) {
           return <View />;
      }
      if (this.state.hasPermission === false) {
           return <Text>No access to camera</Text>;
      }

 }

}