source.uri is null coming from aws on react native - node.js

Question

I'm sourcing the image on aws and when I run the code through i get warning error that source.uri is null and the image wont display. Im getting the image from the server cause i can see the image in the debugger but it wont display in the code.
This is my action file src/actions/item.js
import { HOST } from '../constants';
import { normalizeItems, normalizeItem } from '../utils';
export const SET_ITEMS = 'SET_ITEMS';
export function setItems(items) {
return {
type: SET_ITEMS,
items
}
}
export function getItems() {
return (dispatch, getState) => {
return fetch(`${HOST}/api/v1/items`)
.then(response => response.json())
.then(json => {
console.log("getItems", json);
if (json.is_success) {
dispatch(setItems(normalizeItems(json.items)));
} else {
alert(json.error);
}
})
.catch(e => alert(e));
}
}
This the image of the debugger shows the i have the image there
This is my reducers file src/reducers/item.js
import { SET_ITEMS,SET_ITEM } from '../actions/item';
const initialState = {
items: [],
};
export default function(state = initialState, action) {
if (action.type === SET_ITEMS) {
return {
...state,
items: action.items
}
}
This file where i render my code src/components/MainScreen/ExploreTab.js
class ExploreTab extends Component {
componentWillMount() {
this.props.getItems();
}
onPress(item) {
this.props.navigate({ routeName: "Item", params: { item: item } });
}
render() {
const { items, filter } = this.props;
return (
<FlatList
style={styles.container}
data = { items }
renderItem={({item}) =>
<TouchableOpacity onPress={() => this.onPress(item)} style={styles.item}>
<Image style={styles.image} source = {{uri: item.image}} />
<Text style = {styles.title}>{`$${item.price} ${item.instant ? '🎉 ' : ''}${item.title}`}</Text>
<Text>{`${item.itemCategory} - ${item.itemCondition} `}</Text>
</TouchableOpacity>
}
keyExtractor={(item, index) => item.id}
/>
);
}
}
const mapStateToProps = state => ({
items: state.item.items
});
const mapDispatchToProps = dispatch => ({
navigate: (route) => dispatch(navigate(route)),
getItems: () => dispatch(getItems()),
});
if I change this line
<Image style={styles.image} source = {{uri: item.image}} />
to this I will see the image
<Image style={styles.image} source = {{uri: 'https://s3.us-east-2.amazonaws.com/borroup/photos/images/1/medium/Screen_Shot_2018-03-22_at_10.48.28_PM.png'}} />

Answer 1

In the src/utils/index.js
I had setup as
import { HOST } from '../constants';
export function normalizeItems(items) {
return items.map(item => {
return{
id: item.id || '',
title: item.item_name ||'',
image: `${HOST}${item.image}` ||'',
itemCategory: item.item_category ||'',
itemCondition: item.item_condition ||'',
price: item.price ||'',
instant: item.instant ||'',
}
})
}
so i had to change
image: `${HOST}${item.image}` ||'',
to this and worked for me
image: `${item.image}` ||'',