5

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?

Hyun Kim
  • 89
  • 1
  • 6

3 Answers3

3

You need to do something like this:

import React from 'react';
import { SafeAreaView, View, Text, StyleSheet, Button, Image } from 'react-native';
import imgSrc from './arrow.png';

class BackButton extends React.Component {
  
    render() {
        return (
            <Image source={{ uri: imgSrc } style={styles.image} />
        );
    }
}

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

export default BackButton;
Ali
  • 846
  • 1
  • 13
  • 28
1

This was fixed by using import rather than require

import imgSrc from './arrow.png';

rather than

const imgSrc = require('./arrow.png');
Hyun Kim
  • 89
  • 1
  • 6
  • 1
    This results in a build error: `Type 'string' is not assignable to type 'ImageSourcePropType'` – Jay Koutavas Jan 17 '21 at 17:21
  • Can you show your solution? Your project at github.com/nimbusdin/stackreactnative shows the problem, not how you solved it. – Jay Koutavas Jan 17 '21 at 17:23
  • 1
    `import React from 'react'; import { SafeAreaView, View, Text, StyleSheet, Button, Image } from 'react-native'; import backButton from './../assets/images/arrow.png' class BackButton extends React.Component { render() { return ( ); } } var styles = { image: { width: '24px', height: '24px', } }; export default BackButton;` – Hyun Kim Jan 18 '21 at 18:31
  • @HyunKim is this documented anywhere? If so, can you share the link? – nickfla1 Aug 02 '21 at 09:04
1

If you use Expo, delete .expo & run again. It worked for me.

thaitd96
  • 11
  • 1