I have an Image component which I am using to load an image into a header for my application. I can create a border for where the image is supposed to be but am unable to get the image to properly load. Here is the code where I am loading the image from

```
import React from 'react';
import { SafeAreaView, View, Text, StyleSheet, Button, Image } from 'react-native';

class BackButton extends React.Component {

    render() {
        return (
            <Image source={require('./assets/images/arrow.png')} style={styles.image} />
        );
    }
}

var styles = StyleSheet.create({
    image: {
      width: '24px',
      height: '24px',
      borderWidth: 1
    }
  });

export default BackButton;

```

And here is where this component is being called

```
import { SafeAreaView, View, Text, StyleSheet } from 'react-native';
import AppText from './assets/text/AppText'
import AppTextHeader from './assets/text/AppTextHeader'
import BackButton from './BackButton'

const Header = ({ onBack, title }) => (
  <SafeAreaView style={styles.headerContainer}>
    <View style={styles.header}>
      <View style={styles.headerLeft}>
        <BackButton/>  
      </View>    
      <View style={styles.headerCenter}>
        <AppTextHeader>
          {title}
        </AppTextHeader>
        {/* <Text accessibilityRole="heading" aria-level="3" style={styles.title}>{title}</Text> */}
      </View>
      <View style={styles.headerRight}/>
    </View>
  </SafeAreaView>
);

const styles = StyleSheet.create({
  header: {
    alignItems: 'center',
    flexDirection: 'row',
    minHeight: 76
  },
  headerCenter: {
    flex: 1,
    order: 2
  },
  headerLeft: {
    order: 1,
    width: 54,
    alignItems: 'center',
    justifyContent: 'center'
  },
  headerRight: {
    order: 3,
    width: 54
  },
});

export default Header;

```

What could be causing the image to fail to load?