How to convert a text URL to an image from Firebase Storage in React Native?

Question

I am building an app in Expo, where I would like to have a ListItem list consisting of both images and text, and they should come from a combination of Database + Storage. I have managed to connect my Firebase Database to my app and I can retrieve the text from the db (see code below), but I fail to connect the URL from the database to the storage.

So far, I can print the URL (the gs://...) from the database as Text, but I can't convert that URL into an image that should come from Storage.

I have also tried following info from this link , but I destroyed the entire code, so I backed up. Can anyone help me to convert the URL link into an image from Storage?

My database looks like this:

The code for retrieving the text from the database is here:

 'use strict'; import React from 'react'; import { ListView, StyleSheet, Text, View, TouchableHighlight, AlertIOS, } from 'react-native'; import { Constants } from 'expo'; import firebase from 'firebase'; // 4.10.1 const StatusBar = require('../Firebase/StatusBar'); const ActionButton = require('../Firebase/ActionButton'); const ListItem = require('../Firebase/ListItem'); const styles = require('../Firebase/styles.js') // Initialize Firebase const firebaseConfig = { apiKey: "AIzxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", authDomain: "checkup-7b62e.firebaseapp.com", databaseURL: "https://checkup-7b62e.firebaseio.com", projectId: "checkup-7b62e", storageBucket: "checkup-7b62e.appspot.com", messagingSenderId: "00000000000" }; const firebaseApp = firebase.initializeApp(firebaseConfig); export default class FirebaseReactNativeSample extends React.Component { constructor(props) { super(props); this.state = { dataSource: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }) }; this.itemsRef = this.getRef().child('items'); } getRef() { return firebaseApp.database().ref(); } listenForItems(itemsRef) { itemsRef.on('value', (snap) => { // get children as an array var items = []; snap.forEach((child) => { items.push({ title: child.val().title, subtitle: child.val().subtitle, data: child.val().data, luna: child.val().luna, ora: child.val().ora, minutele: child.val().minutele, url: child.val().url, _key: child.key }); }); this.setState({ dataSource: this.state.dataSource.cloneWithRows(items) }); }); } componentDidMount() { this.listenForItems(this.itemsRef); } render() { return ( < View style = { styles.container } > < StatusBar title = "Events" / > < ListView dataSource = { this.state.dataSource } renderRow = { this._renderItem.bind(this) } enableEmptySections = { true } style = { styles.listview } /> < ActionButton onPress = { this._addItem.bind(this) } title = "Add" / > < /View> ) } _addItem() { AlertIOS.prompt( 'Add New Item', null, [{ text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel' }, { text: 'Add', onPress: (text) => { this.itemsRef.push({ title: text }) } }, ], 'plain-text' ); } _renderItem(item) { const onPress = () => { AlertIOS.alert( 'Complete', null, [{ text: 'Complete', onPress: (text) => this.itemsRef.child(item._key).remove() }, { text: 'Cancel', onPress: (text) => console.log('Cancelled') } ] ); }; return ( < ListItem item = { item } onPress = { onPress } /> ); } } //AppRegistry.registerComponent('FirebaseReactNativeSample', () => FirebaseReactNativeSample); 

And the ListView.js file is here:

 import React, { Component } from 'react'; import ReactNative from 'react-native'; const styles = require('./styles.js') const { View, TouchableHighlight, Text, Image } = ReactNative; export default class ListItem extends Component { render() { return ( //<TouchableHighlight onPress={this.props.onPress}> < View style = { styles.li_row } > < View style = { styles.li_column } > < Text style = { { fontWeight: 'bold', fontWeight: 'bold', textAlign: 'center', fontSize: 40 } } > { this.props.item.data } < /Text> < Text style = { styles.liText } > { this.props.item.luna } < /Text> < Text style = { styles.liText } > -- -- -- -- -- -- < /Text> < View style = { styles.li_row } > < Text style = { styles.liText } > { this.props.item.ora } < /Text> < Text style = { styles.liText } >: < /Text> < Text style = { styles.liText } > { this.props.item.minutele } < /Text> < /View> < Text style = { styles.liText } > { this.props.item.url } < /Text> < /View> < View style = { styles.li_column } > < Text style = { styles.liText } > { this.props.item.title } < /Text> < Text style = { styles.liText } > { this.props.item.subtitle } < /Text> < /View> < /View> //</TouchableHighlight> ); } } module.exports = ListItem; 

I have tried to add the URL directly into an uri:

 < Image source = { { uri: this.props.url } } style = { { height: 200 } } /> 

But I get:

Cannot add a child that doesn't have a YogaNode.

So I assume that I need to include firebase.storage() somewhere in the code, but I don't know where.