React Native - Debugging Errors - reactjs

I've just started to learn React-(Native) and I'm not feeling comfortable to debug errors. Mostly all of them doesn't point to any line from my code and this makes really hard to find solutions.
For example:
In this case, how could I find from what of my lines this exception was called?
Also, if you know how to solve this problem heres the code:
index.js
import {
StackNavigator,
} from 'react-navigation';
import LoginScreen from './loginView'
import HomeScreen from './homeView'
export default screens = StackNavigator({
Home: { screen: HomeScreen },
Login: { screen: LoginScreen },
});
loginView
import {StackNavigator,} from 'react-navigation';
import LoginScreen from './loginView'
import HomeScreen from './homeView'
export default screens = StackNavigator({Home: { screen: HomeScreen },Login: { screen: LoginScreen },});
homeView
(paste not working)
https://pastebin.com/YsnVkinQ
index.android.js
import React, { Component } from 'react';
import screens from './app/index';
import {AppRegistry,StyleSheet,Text,View} from 'react-native';
AppRegistry.registerComponent('estudo1', () => screens);

Related

Do I have to pass component into stack navigator?

I am doing a simple chat React Native (0.59) app for practicing purpose. But App.js constantly threw Null is not an object error. Then I commented out all components and just leave a createStackNavigator and createAppContainer. Here is the App.js:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow
* #lint-ignore-every XPLATJSCOPYRIGHT1
*/
import codePush from "react-native-code-push";
import Chat from './src/components/Chat';
import Event from './src/components/Event';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
//create the navigator
const navigator = createStackNavigator({
//Event: { screen: Event },
//Chat: { screen: Chat },
});
//export it as the root component
export default createAppContainer(navigator);
There still is an error of
Requiring module "App.js", which threw an exception: TypeError: Properties can only be defined on Objects`
What is missing here?
Here is the index.js
/**
* #format
* #lint-ignore-every XPLATJSCOPYRIGHT1
*/
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);

React Native - Unable to get TabNavigator to Work

I installed react-navigation and got a Switch Navigator to work, but I am unable to get a Tab Navigator to work. When I compile, I get this error:
Warning: isMounted(...) is deprecated in plain JavaScript React
classes. Instead, make sure to clean up subscriptions and pending
requests in componentWillUnmount to prevent memory leaks.
Then when I dismiss the error, I get a blank screen. My compiler doesn't detect any syntax errors.
import React, { Component } from "react";
import { View, StyleSheet } from "react-native";
import { MainFeed, Login, Camera, Profile } from "./components/screens";
import { SwitchNavigator, TabNavigator } from "react-navigation";
const Tabs = TabNavigator({
feed: MainFeed,
camera: Camera,
profile: Profile
});
const MainStack = SwitchNavigator({
login: Login,
main: Tabs
});
class InstaClone extends Component {
render(){
return <MainStack/>;
}
}
export default InstaClone;

React Native - Tab Navigator with componentWillMount

How can I call a componentWillMount method in this class?
import React, {Component} from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TextInput,
Button
} from 'react-native';
import {TabNavigator} from 'react-navigation';
import Friends from './src/Friends'
import Moms from './src/Moms'
const Navigation = TabNavigator({
Tab1:{
screen:Friends
},
Tab2: {
screen: Moms
}
})
export default Navigation;
What I am trying to do is call resetAction to reset all the navigation state. However, I do not want to implement it for each tab(Friends and Moms) separately but just call it once in my TabNavigator class( for example in componentWillMount).
P.S. I do not want to use redux.
You can call your reset action before the declaration of your TabNavigator, no need for componentWillMount.
You can check the current routeName, if its within the tab navigator initial route trigger the reset action

referencing constants and variables across separate class files

My App.js file was getting very large, so I decided to move out all my classes to their own separate file, and this is what remains in my App.js
import React from 'react';
import {
AppRegistry,
Text,
View,
Button,
Image
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import { TabNavigator } from 'react-navigation';
//screen imports
import RecentChatScreen from './RecentChatScreen';
import AllContactsScreen from './AllContactsScreen';
import ChatScreen from './ChatScreen';
import HomeScreen from './HomeScreen';
import InfoScreen from './InfoScreen';
const MainScreenNavigator = TabNavigator({
Home: { screen: HomeScreen },
Recent: { screen: RecentChatsScreen },
All: { screen: AllContactsScreen },
});
const NavTest = StackNavigator({
Home: { screen: MainScreenNavigator },
Chat: { screen: ChatScreen },
Info: { screen: InfoScreen }
});
I think that looks fine.
However in some of the class files, I need to reference those other screens in button events, like this:
onPress={ () => navigate('Home')}
This worked fine before when everything was in App.js, but how would I reference these screens(Home, Chat, Info, Recent, All) now in the their separate files when the definitions are in App.js?
Thanks!
You can export them in App.js:
// App.js
// ...
export {
MainScreenNavigator,
NavTest,
}
And then import them from it:
import {MainScreenNavigator, NavTest} from './path/to/App.js';
If your intent is just to navigate to the different screens, and not use any properties defined within a particular screens class, then you would not need to import anything. When you define the StackNavigator and lets say you are passing in that value into the AppRegistry as the entry point of the application. In your case, it could be something like this:
AppRegistry.registerComponent('NavTest', () => NavTest)
Now within any of the screens, the navigatation object is passed in as a prop. You can then use that to navigate to any of the defined screens. The initial setup of the StackNavigator is essentially a mapping from a routeName to a react component (a class). So when you want to navigate to a particular class, all you need is the name of the route not the class or component it represents, the navigator already has all that. This name would be the key passed into the StackNavigator for a particular screen. In your example, the routeNames are Home, Chat and Info. So just doing something like this would work:
const { navigate } = this.props.navigation;
return (
<View>
<Text>Navigate Test</Text>
<Button onPress={() => navigate('Chat')} title="Go to chat"/>
</View>
);

React Router Redux go action is shown in the LogMonitor but doesn't change the path on browser

I'm using react-redux-starter-kit on one of my views I just want to redirects users is somethig is not set My components is fairly simple
// MyComponentWithRedirect.js
import React, {Component, PropTypes} from 'react'
import {connect} from 'react-redux'
import {go} from 'react-router-redux'
class MyComponentWithRedirect extends Component {
static propTypes = {
userInfo: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired
}
componentDidMount() {
if (this.props.userInfo.firstTime) {
this.props.dispatch(go('/welcome'))
}
}
}
const mapStateToProps = (state) => ({userInfo: state.userInfo})
export default connect(mapStateToProps)(MyComponentWithRedirect)
I can see the LOCATION_CHANGE action triggered but doesn't show the destination view
I've found I missed the setup of syncHistoryWithStore after that it's works like a charm using the react-router API
import { browserHistory } from 'react-router'
...
browserHistory.push('/welcome')
I dont need dispatch any more for change the location

Resources