Can't find variable: React in React native app

I keep getting the following error: ReferenceError: Can't find variable: React [![enter image description here][1]][1] The package.json, app.js and scan.js have been added below. The same code was found to be working before, and now after i rebuild it now, it seems to fail.

I have tried rebuilding npm start --cache-reset

package.json

{
  "name": "wifi-fingerprint",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "build": "cd android && ./gradlew clean installDebug"
  },
  "dependencies": {
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-paper": "^3.6.0",
    "react-native-vector-icons": "^6.6.0",
    "react-native-wifi-lib": "file:react-native-wifi-lib"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/runtime": "^7.8.4",
    "@react-native-community/eslint-config": "^0.0.7",
    "babel-jest": "^25.1.0",
    "eslint": "^6.8.0",
    "jest": "^25.1.0",
    "metro-react-native-babel-preset": "^0.58.0",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

app.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React from 'react';
import {SafeAreaView} from 'react-native';

import ScanPage from './src/screens/scan/scan';

const App = () => {
  return (
    <>
      <SafeAreaView>
        <ScanPage />
      </SafeAreaView>
    </>
  );
};

export default App;

scan.js

import React from 'react';
import {
  Text,
  StyleSheet,
  TouchableOpacity,
  Image,
  View,
  SafeAreaView,
} from 'react-native';
import fingerprintAPI from '../../../api/fingerprintAPI';
import testData from '../../../testData';
import ListWifiScreen from './ListWifiScreen';

class ScanPage extends React.Component {
  state = {
    searching: false,
    wifiFound: [],
  };

  getInferedList = async () => {};

  handleGetLocationNames = async () => {
    await this.setState(prevState => ({
      ...prevState,
      searching: true,
    }));
    let response = await fingerprintAPI.getInferedInfo(testData.inferOn);
    console.log(JSON.stringify(response));
    debugger;
    await this.setState(prevState => ({
      ...prevState,
      wifiFound: response.guesses,
    }));
    await this.setState(prevState => ({
      ...prevState,
      searching: false,
    }));
  };

  render() {
    return (
      <SafeAreaView
        style={styles.container}
        contentContainerStyle={styles.contentContainer}>
        <View style={styles.welcomeContainer}>
          <Text style={styles.text}>Hi, Kunal</Text>
          {/* Touchable opacity buttons have a fade effect by default on press */}
          <TouchableOpacity onPress={this.handleGetLocationNames}>
            <Image
              source={
                this.state.searching
                  ? require('../../../assets/wifi-trans-forever.gif')
                  : require('../../../assets/wifi.png')
              }
              style={styles.welcomeImage}
            />
            {this.state.searching && <Text>Searching..</Text>}
          </TouchableOpacity>
          <ListWifiScreen wifiFound={this.state.wifiFound} />
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  text: {
    fontSize: 40,
  },
  welcomeContainer: {
    alignItems: 'center',
    marginTop: 10,
    marginBottom: 20,
  },
  welcomeImage: {
    width:  100,
    height: 100,
    resizeMode: 'stretch',
  },
});

export default ScanPage;

  [1]: https://i.sstatic.net/eB4wJ.png