I am new to react native and having issues importing basic component into the index.android.js file. I could not find what was wrong and also couldn't find posts on this specific issue. Please help what is wrong.
Error says: Unexpected Token near CounterComponent.android.js line 7. Marked it with **.
import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';
export default class Counter extends Component {
render() {
return{
**<View>**
<Text>Counter component</Text>
</View>
};
}
}
Imported the file using command below in the index.android.js
import Counter from './app/components/CounterComponent'
Try replacing your { for ( after the return, something like this:
import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';
export default class Counter extends Component {
render() {
return (
<View>
<Text>Counter component</Text>
</View>
);
}
}
Related
Please Help!!!
I Copy pasted code from https://www.npmjs.com/package/react-native-wheel-color-picker
In my App.js file but its not running
I installed on 3 library mentioned but it didn't work
Please help me to fix this code or I need a code of similar Colour wheel
(There is module Colour wheel similar to Colourpicker but it also didn't work for me)
import { Component } from 'react'
import { View, Text } from 'react-native'
import ColorPicker from 'react-native-wheel-color-picker'
class App extends Component {
render() {
return (
<View style={[]}>
<ColorPicker
ref={r => { this.picker = r }}
color={this.state.currentColor}
swatchesOnly={this.state.swatchesOnly}
onColorChange={this.onColorChange}
onColorChangeComplete={this.onColorChangeComplete}
thumbSize={40}
sliderSize={40}
noSnap={true}
row={false}
swatchesLast={this.state.swatchesLast}
swatches={this.state.swatchesEnabled}
discrete={this.state.disc}
/>
<SomeButton onPress={() => this.picker.revert()} />
</View>
)
}
}
export default App
Error I am getting
The error says null is not an object (evaluating 'this.state.currentColor')
The color prop on the ColorPicker component expects an object and is given null. This is because there is no state set. Using a class based component you can set the state in the constructor. This gets rid of the error. If you want you can define you "start" color in the state currentColor: "#cc7"
import { Component } from "react";
import { View } from "react-native";
import ColorPicker from "react-native-wheel-color-picker";
class App extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<View style={[]}>
<ColorPicker
ref={(r) => {
this.picker = r;
}}
color={this.state.currentColor}
swatchesOnly={this.state.swatchesOnly}
onColorChange={this.onColorChange}
onColorChangeComplete={this.onColorChangeComplete}
thumbSize={40}
sliderSize={40}
noSnap={true}
row={false}
swatchesLast={this.state.swatchesLast}
swatches={this.state.swatchesEnabled}
discrete={this.state.disc}
/>
// SomeButton
</View>
);
}
}
export default App;
PS: the SomeButton component will also throw an error since it is not defined.
App.js:
import React, { Component } from 'react';
import {View,Text} from 'react-native';
import { createDrawerNavigator } from 'react-navigation-drawer';
import {createAppContainer} from 'react-navigation';
import Epics from './screens/tmp';
import Pager from './screens/Pager';
const DrawerNavigator = createDrawerNavigator({
Home: {screen: Epics},
Page: {screen: Pager}
},{initialRouteName: 'Home'});
const Stack = createAppContainer(DrawerNavigator);
export default class App extends Component {
render() {
return <Stack />;
}
}
Trying to invoke fetch API everytime a user lands on screen using navigation addListner event
componentDidMount() {
this.loadFeed(); // fetch API
const { navigation } = this.props;
this.focus = navigation.addListener('willFocus', () => {
this.loadFeed(); // fetch API
});
}
React Navigation version from package.json:
"react-navigation": "^4.2.2"
"react-navigation-drawer": "^2.4.2"
Is there a better way to detect an active screen on app and invoke the fetch API? Or fix for the given error below?
Type Error: undefined is not an object (evaluating 'navigation.addListner'):
Error when the app launches
Update
I am trying to replicate following example in snack: https://snack.expo.io/HkrP8YPIf
What am I doing wrong? (I am new to React Native, please help me understand)
Try using the NavigationEvents component shipped with react-navigation 4.x. Just nest it anywhere inside your screen's render method.
Example:
import React from 'react';
import { View } from 'react-native';
import { NavigationEvents } from 'react-navigation';
const MyScreen = () => (
<View>
<NavigationEvents
onWillFocus={() => console.log('Screen will be in focus')}
onDidFocus={() => console.log('Screen is in focus')}
onWillBlur={() => console.log('Screen will blur')}
onDidBlur={() => console.log('Screen blurred')}
/>
{/*
other code
*/}
</View>
);
export default MyScreen;
This just means that navigation doesn't exist. So it looks like the component is supposed to receive it via props and isn't. That's all I can tell from this code.
Check your props keys, agree with James. Have one suggestion here, since you're expecting a props, you should handle this common error whether key exist or not(if else)
I am trying to implement stacknavigation using react-navigation. When I am creating a stacknavigation const and calling in my default screen it is giving me this error.
Route 'Main' should declare a screen. For example:
import MyScreen from './MyScreen';
...
Home: {
screen: MyScreen,
}
My StackNavigation code is here
import React from 'react';
import {View, Text } from 'react-native';
import Register from './Register';
import Main from './Main';
import { StackNavigator } from 'react-navigation';
const ScreenList = StackNavigator({
Main: {
screen: Main,
},
Register: {
screen: Register,
},
});
export default ScreenList;
And this is the main and default screen
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { Card, Button, CardSection } from '../components/common/Index';
import Login from '../components/Login';
import ScreenList from './ScreenList';
export default class Main extends Component {
render() {
return (
<View>
<Button>Register</Button>
</View>
);
}
}
This is an issue with react-native-navigation not yet being compatible with React 0.52.0
More information on this issue can be found on this specific issue tracked on Github.
Edit: a quick fix I just implemented to unblock myself while the project contributors figure out a solid solution was to add the missing interface (ReactInstanceDevCommandsHandler.java) directly into my react-native-navigation project.
I'm learning React Native, in my example I'm getting the next error:
Unexpected token (10:6) at Hello.js
The code of my class Hello is:
import React from 'react';
import {
View,
Text,
} from 'react-native';
export default class Hello extends React.Component {
render() {
return {
<View>
<Text>Hola desde Hello.js</Text>
</View>
}
}
}
The Line 10 is < View > so I have no idea what's wrong with my code.
Thanks.
return uses parenthesis, so return (..);
I got this error when i am implementing third party library as https://github.com/ayoubdev/react-native-android-kit what this error indicates?
'use strict';
import React, {Component} from 'react';
import{
Platform,
StyleSheet,
Text,
View,
Image,
Navigator,
ToolbarAndroid,
ScrollView
}from 'react-native';
import EventList from './javra-event-list';
import AndroidToolBar from './javra-android-toolbar';
import JResource from '../../javra-resource';
import ScrollableTabView, {DefaultTabBar,ScrollableTabBar} from 'react-native-scrollable-tab-view';
import CustomTab1 from './javra-custom-tabbar';
import {TabLayoutAndroid, TabAndroid} from "react-native-android-kit";
export default class Home extends Component{
constructor(props){
super(props);
this.eventThumnailHandler = this.eventThumnailHandler.bind(this);
this.movies = [{id:1,title:'Event 2016'},{id:2,title:'Event 2015'},{id:3,title:'Event 2014'},{id:4,title:'Event 2013'},
{id:5,title:'Event 2016'},{id:6,title:'Event 2015'},{id:7,title:'Event 2014'},{id:8,title:'Event 2013'}
];
}
static childContextTypes = {
eventThumnailHandler: React.PropTypes.func.isRequired,
};
getChildContext() {
return {
eventThumnailHandler: (item) => (this.eventThumnailHandler(item)),
};
}
static contextTypes = {
openDrawer: React.PropTypes.func.isRequired,
};
_openDrawer(){
this.context.openDrawer();
}
eventThumnailHandler(item: Object){
console.log('*/*/*/*///*/*/: ' + item.title);
this.props.navigator.push(
{id: 'NewView' , index:1}
)
}
render(){
var toolbarActions = [{title:'Next',show:'always'}];
return(
<View style={{flex:1}}>
<TabLayoutAndroid style={{height:60}} backgroundColor='#009688' indicatorTabColor='#ffc400'
indicatorTabHeight={2} scrollable={false} center={false}>
<TabAndroid text='Tab1' textSize={16} textColor="white" selectedTextColor='#ffc400'
icon='ic_home_black_24dp' iconPosition='left'>
<Text>I'm the first Tab content!</Text>
</TabAndroid>
<TabAndroid text='Tab2' textSize={16} textColor='white' selectedTextColor='#ffc400'
icon='ic_important_devices_black_24dp' iconPosition='left'>
<Text>I'm the second Tab content!</Text>
</TabAndroid>
</TabLayoutAndroid>
</View>
);
}
}
i have implemented tablayout as provided by the link above mentioned. what could be the error in my file.please suggest me.
import React, { Component, PropTypes } from 'react';
import {
StyleSheet,
Text,
TouchableOpacity,
View
} from 'react-native';
Including PropTypes next to component helped me
like this :
import PropTypes from 'prop-types';
注：reactVersion：0.51
try running
npm outdated
and update the third-party modules that are not at the current version.
I had to do the same after upgrading React Native and uninstall and re-install some modules.
node-modules->react-native-prompt->propmt.js
old : import React, { Component,PropTypes } from 'react';
new:------
import PropTypes from "prop-types"
import React, { Component, } from 'react';