In the process of teaching myself React-Native. Building a mock-up of a retail iOS site which draws its data from Firebase and have hit a snag trying to incorporate Navigator. My app flows from 'index.ios.js > MainLayout > Routing > HomeIndex'. Here are said components:
MainLayout.js
import React, { Component } from 'react';
import { Text } from 'react-native';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon } from 'native-base';
import Routing from './Routing';
import HomeIndex from '../pages/HomeIndex';
class MainLayout extends Component {
render() {
return (
<Container>
<Header>
<Left>
<Button transparent>
</Button>
</Left>
<Body>
<Title>RetailSite</Title>
</Body>
<Right />
</Header>
<Content>
<Routing />
</Content>
<Footer>
<FooterTab>
<Button full>
<Text>Footer</Text>
</Button>
</FooterTab>
</Footer>
</Container>
);
}
}
export default MainLayout;
Routing.js
import React, { Component } from 'react';
import { Navigator, View } from 'react-native';
import HomeIndex from '../pages/HomeIndex';
import ShowPage from '../pages/ShowPage';
class Routing extends Component {
renderScene(route, navigator) {
if (route.name === 'home') {
return <HomeIndex navigator={navigator} />
} else if (route.name === 'show') {
return <ShowPage navigator={navigator} />
}
}
render() {
return (
<Navigator
initialRoute={{ name: 'home' }}
renderScene={this.renderScene.bind(this)}
/>
);
}
}
export default Routing;
HomeIndex.js
import React, { Component } from 'react';
import { RNRSData } from '../../config/FirebaseConstants';
import { StyleSheet, Text, View, TouchableHighlight, Image, Navigator } from 'react-native';
import styles from '../../../styles.js';
class HomeIndex extends Component {
constructor(props){
super(props);
this.state = {
allProducts: [],
}
}
componentDidMount() {
let _this = this;
let products = {};
RNRSData.ref('products/').once('value', function(data) {
data.forEach(function(productNode) {
let name = productNode.val().name;
let cost = productNode.val().cost;
let image = productNode.val().image;
let idNumber = productNode.key;
products[name] = {name: name, cost: cost, image: image, id: idNumber}
})
}).then(function(product) {
console.log(product)
let keys = Object.keys(products).sort();
let sortedHash = {};
let sortedArray = [];
for (let i = 0; i < keys.length; i++) {
let key = keys[i];
sortedArray.push(sortedHash[key] = products[key]);
}
_this.setState({allProducts: sortedArray}, function afterProductSet() {
});
})
}
render () {
let allProducts = this.state.allProducts;
console.log(allProducts);
return (
<View>
<Text style={styles.homeHeader}>New Arrivals</Text>
<View style={styles.homeIndexContainer}>
{allProducts.map(function(object) {
return (
<View style={styles.liContainer} key={object.id}>
<Image source={{uri: object.image}} style={styles.liImage}>
<Text style={styles.liTextName}>{object.name}</Text>
<Text style={styles.liTextCost}>${object.cost}</Text>
</Image>
</View>
)
})}
</View>
</View>
)
}
}
export default HomeIndex;
As it stands, my simulator renders the header and footer and hits the console.log in the HomeIndex and displays the correct data in said console.log. But it's not displaying the data it's pulling from Firebase within my simulator.
If I switch out <Routing /> for <HomeIndex /> within MainLayout.js it correctly displays the index in the simulator, which is leading me to suspect it may be something I'm botching within Routing.js. Or if the Navigator is somehow throwing off my componentDidMount method. Any help would be appreciated.
