React Native Expo: Why isn't/can't my image can't be found and isn't loading?

Question

I'm building a React Native App with expo and I have an image I want to display on my login screen that should cover the whole image but for some reason it's not loading and I have a blank screen. My terminal says "Could not find image file:///Users/BlahBlah/Library/Developer/CoreSimulator/Devices/3FE078A1-2C0A-4308-B256-BFBF1B246A85/data/Containers/Bundle/Application/08978CAA-74FC-476D-939C-9CBDF1E4B9D9/Exponent-2.13.0.app/./assets/Images/TemplatePic.jpg - node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:104:55 in - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:414:4 in __invokeCallback - ... 4 more stack frames from framework internals"

LoginScreen

import React from 'react';
import { View, Image, Dimensions, SafeAreaView, StyleSheet, Text } from 'react-native';
import { AppLoading } from 'expo';
import { Asset } from 'expo-asset';
import { Tab, Tabs, Header } from 'native-base';
import { commonStyles } from './styles/styles';
import SignInScreen from './SignInScreen';
import SignUp from './SignUp';

const { width, height } = Dimensions.get('window');
class LoginScreen extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isReady: false
    };
  }

render() {
  return (
      <View style={styles.background}>
        <View style={StyleSheet.absoluteFill}>
        <Image
          source={('../assets/Image/TemplatePic.jpg')}
          style={{ flex: 1, height: null, width: null }}
        />
        </View>
      </View>
  );
}
}

const styles = StyleSheet.create({
  background: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    justifyContent: 'center',
    alignItems: 'center',
  }
});

export default LoginScreen;

App.js

import React from 'react';
import { View, Image, Dimensions, SafeAreaView, StyleSheet, Text } from 'react-native';
import { AppLoading } from 'expo';
import { Asset } from 'expo-asset';
import * as firebase from 'firebase';
import { firebaseConfig } from './config.js';
import { Provider, connect } from 'react-redux';
import RootStack from './RootStack';
import LoginScreen from './App/screens/LoginScreen';
import configureStore from './App/reducers/configureStore';

firebase.initializeApp(firebaseConfig);
// create store from redux
const store = configureStore();

function cacheImages(images) {
  return images.map(image => {
    if (typeof image === 'string') {
      return Image.prefetch(image);
    }
      return Asset.fromModule(image).downloadAsync();
  });
}
const { width, height } = Dimensions.get('window');

export default class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          isReady: false
        };
      }

      async _loadAssetsAsync() {
        const imageAssets = cacheImages([
          ('./assets/Images/TemplatePic.jpg'),
        ]);

        await Promise.all([...imageAssets]);
      }

    render() {
      //If the state is not ready then display the apploading oterwise display the app
      if (!this.state.isReady) {
          return (
            <AppLoading
              startAsync={this._loadAssetsAsync}
              onFinish={() => this.setState({ isReady: true })}
              onError={console.warn}
            />
          );
        }
      return (
        <View style={styles.background}>
          <LoginScreen />
        </View>
      );
    }
    }

    const styles = StyleSheet.create({
      background: {
        flex: 1,
        backgroundColor: '#FFFFFF',
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 16
      },
      textStyle: {
      }
    });

Answer 1

Try this:

<Image
  source={require('../assets/Image/TemplatePic.jpg')}
  style={{ flex: 1 }}
  resizeMode="cover"
/>