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)
Related
I have an issue regarding navigating after getting the URL from either the Linking event handler or getInitialUrl.
I get the correct URL from Deep Linking, no issues there. The issue is i can't access navigate in App.js
TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')
I guess I don't have access to the navigation functions inside App.js. Any suggestion to how to solve this? I do think that I am setting the handler and retrieving it from the wrong place.
import React, { Component} from "react";
import {store} from "./store/Store";
import { Provider } from "react-redux";
import * as Font from 'expo-font';
import * as Localization from "expo-localization";
import i18n from "i18n-js";
import NavigationContainer from "./navigation/NavigationContainer";
import { SupportedLocals } from "./styles/index";
import { Linking } from "react-native";
import { refreshToken } from "./api_client/authService";
import { split } from "lodash";
i18n.locale = Localization.locale;
i18n.SupportedLocals = SupportedLocals;
i18n.fallbacks = true;
export default class App extends Component {
state = {
fontsLoaded: false,
};
constructor(props) {
super(props);
this.state = {
fontLoaded: false
};
}
async loadFonts() {
await Font.loadAsync({
RubikRegular: require("./assets/fonts/Rubik-Regular.ttf"),
RubikMedium: require("./assets/fonts/Rubik-Medium.ttf"),
RubikBold: require("./assets/fonts/Rubik-Bold.ttf"),
});
this.setState({ fontsLoaded: true });
}
componentDidMount() {
this.loadFonts();
const url = Linking.getInitialURL()
.then((url) => {
if (url) {
console.log('fired get initial url')
this.handleDeepLink({url})
}
}).catch((err) => console.error('An error occurred ', err))
Linking.addEventListener('url', this.handleDeepLink)
}
componentWillUnmount(){
Linking.removeEventListener('url', this.handleDeepLink);
}
handleDeepLink(e) {
if(e){
console.log(e)
let splitter = e.url.split("?token=")
let token = splitter[1].split("&")
let tokenSend = token[0];
console.log(tokenSend)
this.props.navigation.navigate("InvitationInfo", {token: tokenSend})
}
}
render(){
if (this.state.fontsLoaded) {
return (
<Provider store={store}>
<NavigationContainer/>
</Provider>
);
} else {
return null;
}
}
}
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>
)
}
}
I could not find JAVA files to do the configurations for android and gives the error 'undefined is not an object' (evaluating RCTWEBVIEW BRIDGEManager.NavigationType) when I try to execute the following in the project that expo XDE created
my code is as follows
import React from 'react';
import { StyleSheet, Text, View, WebView } from 'react-native';
import WebViewBridge from 'react-native-webview-bridge';
export default class testWebBridge extends Component {
constructor(props) {
super(props)
this.handleMessage = this.handleMessage.bind(this) // <----- add this line
}
handleMessage(e) {
console.log("[native] receive a msg" + e.nativeEvent.data);
if (this.webview) {
this.webview.postMessage("[native] received the message");
}
}
render() {
return (
<WebView
javaScriptEnabled
ref={webview => { this.webview = webview; }}
source={{uri: 'https://www.customapps.co.nz/home'}}
onMessage={this.handleMessage}
style={{marginTop: 40}}
/>
);
}
}
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 am going through the react-native tutorials on lynda.com, "React-Native: Building Mobile Apps". The difference lies in the fact that I am using WebStorm to develop JavaScript based apps. I've created the files according to the tutorial:
appContainer.js:
import React, { Component } from "react";
import { Drawer, View } from "react-native";
import { Navigator } from "react-native";
export default class AppContainer extends Component {
constructor(props){
super(props);
this.state = {
store: {},
toggled: false,
theme: null
}
}
toggleDrawer(){
this.state.toggled ? this._drawer.close() : this._drawer.open();
}
openDrawer(){
this.setState({toggled: true});
}
closeDrawer(){
this.setState({toggled: false});
}
renderScene(route, navigator){
switch(route){
default: {
return null
}
}
}
configureScene(route, routeStack){
return Navigator.SceneConfigs.PushFromRight;
}
render(){
return (
<Drawer
ref={(ref) => this._drawer = ref}
type="displace"
content={<View style={{backgroundColor: "#000", height: 1000}}
/>}
onClose={this.closeDrawer.bind(this)}
onOpen={this.openDrawer.bind(this)}
openDrawerOffset={0.2}
>
<Navigator
ref={(ref) => this._navigator = ref}
configureScene={this.configureScene.bind(this)}
renderScene={this.renderScene.bind(this)}
/>
</Drawer>
);
}
}
index.ios.js:
import React, { Component } from 'react';
import {
AppRegistry
} from 'react-native';
import AppContainer from "./app/appContainer";
export default class dinder extends Component {
render() {
return (
<AppContainer/>
);
}
}
AppRegistry.registerComponent('dinder', () => dinder);
Run/Debug Configuration screen:
However, when I run the app by selecting run 'ios' from the run drop down windows, I am receiving the following error in the emulator window:
Can someone please explain how I can fix this issue within the confines of the code presented for the tutorial that I pasted?
In React-Nav 0.44.3 the Navigator has been deprecated: https://github.com/facebook/react-native/releases/tag/v0.44.3, so is not really a webstorm's configuration's issue.
To fix this, you can follow this Github issue, install the react-native-deprecated-custom-components package through npm or yarn.
And then in your appContainer.js, replace your
import { Navigator } from "react-native";
with
import NavigationExperimental from 'react-native-deprecated-custom-components';
And change all your Navigator call to NavigationExperimenal.Navigator