CODEWITHSUNDEEP
javascriptandroidreact-nativereact-navigation
user8749566
user8749566

Reputation:

Need to specify screen react native tabnavigator

Problem I made a very basic app using React Native, and now I want to have multiple tabs. When I tried to add a feed and comments tab, I get an error saying:

Uncaught Error: Route 'Feed' should declare a screen.
For example:

import MyScreen from './MyScreen'
...
Feed: {
Screen: MyScreen,
}

I don't know why I am getting this error, since the first class I call is the 'App' screen, which is what I named the screen. I would love some help getting this tab error fixed. Thank you!

Code

import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TextInput, ScrollView, TouchableHighlight, Button, FlatList } from 'react-native';
import { Font } from 'expo';
import * as firebase from 'firebase';
import { TabNavigator } from 'react-navigation';

const firebaseConfig = {
  apiKey: "API-key",
  authDomain: "candidtwo.firebaseapp.com",
  databaseURL: "https://candidtwo.firebaseio.com",
  storageBucket: "candidtwo.appspot.com",
};

const MyApp = TabNavigator({
  Feed: {
    screen: App,
  },
  CommentScreen: {
    screen: Comments,
  },
}, {
  tabBarPosition: 'top',
  animationEnabled: true,
  tabBarOptions: {
    activeTintColor: '#fe8200',
  },
});


const firebaseApp = firebase.initializeApp(firebaseConfig);

var fontLoaded = false;
var ref = firebase.database().ref('posts');
var brightColor = ['#ffffff'];
var darkColor = ['#D3D3D3'];
var animalNames = ['WittyRhino','FriendlyRhino'];
var newPostRef = ref.push();

var postWidth = 360;

class App extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Home',
  };
//App Code
}

class Comments extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Notifications',
  };
render() {
    return (
      <Button
        onPress={() => this.props.navigation.navigate('App')}
        title="Go to notifications"
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 8,
    backgroundColor: '#e8e8e8',
    alignItems: 'center'
  },
  button: {
    flex: 1,
    backgroundColor: '#e8e8e8',
    alignItems: 'center'
  },
});

Upvotes: 0

Views: 47

Answers (1)

Prasun
Prasun

Reputation: 5023

Define App and Comments components before

const MyApp = TabNavigator(...)

Hope this will help.

Upvotes: 1

Related Questions