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 (..);
Related
I'm trying out the react-schedule-selector and using their sample code on android
https://github.com/bibekg/react-schedule-selector
import React, { useState } from 'react';
import ScheduleSelector from 'react-schedule-selector'
class App extends React.Component {
state = { schedule : [] }
handleChange = newSchedule => {
this.setState({ schedule: newSchedule })
}
render() {
return (
<ScheduleSelector
selection={this.state.schedule}
numDays={5}
minTime={8}
maxTime={22}
hourlyChunks={2}
onChange={this.handleChange}
/>
)
}
}
Got an error when trying to run it on android emulator but it works on the web browser:
App.js (1220:889)
undefined is not an object (evaluating 'r.default.h2.withConfig')
(Device)
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.
What is reactTag parameter in AccessibilityInfo.setAccessibilityFocus(reactTag) method? React native documentation don't provide any information about this parameter:
Set accessibility focus to a React component. On Android, this is equivalent
to UIManager.sendAccessibilityEvent(reactTag,
UIManager.AccessibilityEventTypes.typeViewFocused);.
I don't have any background of Objective-C and Java. A little example will be more appreciated. Thank !!!
reactTag is simply a number that is used by react to identify view objects in your application. It is the result of findNodeHandle function, which takes a view reference as parameter.
Here's a simple example on how you can use it:
import React, {Component} from 'react'
import {
...
findNodeHandle,
...
} from 'react-native';
class Sample extends React.Component {
constructor(props) {
super(props)
this.viewRef = null;
}
...
componentDidMount() {
if (this.viewRef) {
const reactTag = findNodeHandle(this.viewRef);
AccessibilityInfo.setAccessibilityFocus(reactTag);
}
}
render() {
return (
<View ref={el => { this.viewRef = el }}>
...
</View>
)
}
}
This basic postMessage example works for IOS but does not work for Android.
The React Native app on Android fails to receives the post message send from the js code (const simple) injected into the WebView.
import React, {Component} from 'react';
import {
WebView
} from 'react-native';
export default class App extends Component<{}> {
render() {
const simple = function() { window.postMessage('my message from Webview to RN');}
const postMessageCode = '(' + String(simple) + ')();';
return (
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
injectedJavaScript={postMessageCode}
onMessage={this.onWebViewMessage}
/>
);
}
onWebViewMessage(event) {
alert(event);
}
}
This has been tested with:
react-native-cli: 2.0.1
react-native: 0.50.4
On:
- Android emulator version 26.0.0-3833124, Android 7.1.1, API 25
- Android native device ONE E1005 (One plusX), Android version 6.0.1, API 23
Who has been able to get postMessage working (WebView --> RN) on an Android device / emulator or thinks they know how to?
I experienced the same issue. There seems to be a delay in the Android browser on React Native attaching listeners to postMessage. See https://github.com/facebook/react-native/issues/11594
I use this little helper on my web pages to get around it:
var message = 'some message string';
window.parent.postMessage(message,"*");
function whenRNPostMessageReady(cb) {
if (postMessage.length === 1) cb();
else setTimeout(function() { whenRNPostMessageReady(cb) }, 100);
}
whenRNPostMessageReady(function() {
//react native accepts strings only
window.parent.postMessage(JSON.stringify(message),"*");
});
Use WebView ref postMessage instead.
import React, {Component} from 'react';
import {
WebView
} from 'react-native';
export default class App extends Component<{}> {
sendMessage = () => {
this.webViewRef.postMessage('my message from Webview to RN');
}
render() {
return (
<WebView
source={{uri: 'theURL'}}
ref={(ref) => { this.webViewRef = ref }}
onMessage={this.onWebViewMessage}
/>
);
}
onWebViewMessage(event) {
alert(event);
}
}
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>
);
}
}