I am having problems running my app, specifically on Android at the moment. When I run react-native run-android and start the app (with or without running react-native start beforehand) I get the following error: Undefined is not an object (evaluating 'root._'). I am then unable to launch the debugger because this gives me a timeout whilst connecting to remote debugger error.
My loading process for the application is as follows:
index.js:
import { AppRegistry } from 'react-native'
import setup from './src/setup'
AppRegistry.registerComponent('appname', setup)
setup.js:
import React, { Component } from 'react'
import { View } from 'react-native'
import { Provider } from 'react-redux'
import { AsyncStorage } from 'react-native'
import { persistStore } from 'redux-persist';
import configureStore from './store/configureStore'
import Spinner from './components/common/Spinner'
import App from './App'
import styles from './styles/setup'
export class Root extends Component {
constructor() {
super()
this.state = {
loaded: false,
// store: configureStore(this.onStoreLoaded.bind(this))
}
}
onStoreLoaded() {
this.setState({
loaded: true,
})
}
render() {
return (
<View style={styles.wrapper}>
<Spinner/>
</View>
)
}
}
export default function setup() {
return Root
}
I have commented out the store loading for now because this seems to have become apparent since adding redux but the configure store looks as follows:
import {applyMiddleware, createStore, compose} from 'redux'
import {persistStore, autoRehydrate} from 'redux-persist';
import { AsyncStorage } from 'react-native'
import thunk from 'redux-thunk'
import reducers from '../reducers'
const middlewares = [
thunk
]
const store = createStore(
reducers,
undefined,
compose(
applyMiddleware(...middlewares),
autoRehydrate()
)
)
export default function(callback) {
persistStore(store, {
blacklist: [],
storage: AsyncStorage
}, callback)
return store
}
I am using react-native 0.53.0 with the redux version being 3.7.2 and react-redux 5.0.6. I have tried re bundling the code as follows:
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
I have also tried: adb reverse tcp:8081 tcp:8081
I have also updated my build tools and gradle etc in Android studio and everything syncs fine.
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)
The problem is, I seem to have all the code in place, the app runs, but firebase.analytics() returns null. analytics().getAppInstanceId returns an object with 0 and null values.
We’re using RNfirebase 13.1.0, the latest package available, Yarn tells me. (Although when I got to rnfirebase.io there seems to be a 15.0.0 release.)
We’ve correctly created a firebase project and installed the json file downloaded from the project, into the Android Studio project. We’ve correctly modified the gradle files in the Android Studio project.
Everything runs, but no connection, responses return null objects and we cannot log events.
This is our index.js:
import { AppRegistry } from "react-native";
import React, { useState, useEffect, useContext, createContext } from "react";
import App from "./App";
import { name as appName } from "./app.json";
import { Provider as PaperProvider } from "react-native-paper";
import { Provider as StoreProvider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { ModalsProvider } from "react-native-nested-modals";
import { firebase } from "#react-native-firebase/analytics";
import analytics from "#react-native-firebase/analytics";
import configurePersistentStore from "./src/redux/store/configurePersistentStore";
const { store, persistor } = configurePersistentStore();
export const AnalyticsContext = createContext();
function RNRedux() {
const [collections, setCollections] = useState();
const [instance, setInstance] = useState();
const [enabled, setEnabled] = useState();
async function upAnalytics() {
setInstance(await analytics().getAppInstanceId());
console.log("#005 instance id", instance);
}
useEffect(() => {
upAnalytics();
}, []);
return (
<StoreProvider store={store}>
<PersistGate loading={null} persistor={persistor}>
<PaperProvider>
<ModalsProvider>
<AnalyticsContext.Provider value={{collections: collections, instance: instance}}>
<App />
</AnalyticsContext.Provider>
</ModalsProvider>
</PaperProvider>
</PersistGate>
</StoreProvider>
);
}
AppRegistry.registerComponent(appName, () => RNRedux);
this is where we enable logging in app.tsx (and examine the context variables passed in the Provider) :
useEffect(() => {
console.log("#002 collections", collections)
console.log("#003 instance ", instance)
// we have verified that the instance returned by analytics
// exists at this point, but all it's object properties are null or zero.
analytics().setAnalyticsCollectionEnabled(true)
}, [])
and this is how we log an event in a working component (response is always null and event is not logged.)
function setUpAnalytics() {
console.log("#012 setup analytics")
analytics()
.logEvent("calculatorView", {
id: 20000002,
event: "calculator page",
description: "whatever",
})
.then((response) => console.log("#011 response is ", response))
.catch((err) => console.log(err))
}
useEffect(() => {
setUpAnalytics();
}, []);
in app build.gradle:
implementation platform('com.google.firebase:firebase-bom:29.0.0')
implementation 'com.google.firebase:firebase-analytics:13.1.0'
in project build.gradle:
buildscript {
ext {
buildToolsVersion = "30.0.0"
minSdkVersion = 21
compileSdkVersion = 30
targetSdkVersion = 30
ndkVersion = "20.1.5948944"
}
repositories {
google()
jcenter()
}
dependencies {
classpath("com.android.tools.build:gradle:4.0.1")
classpath 'com.google.gms:google-services:4.3.10'
}
MainActivity.java:
package com.xxxx
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen;
import android.os.Bundle;
public class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript. This is used to schedule
* rendering of the component.
*/
#Override
protected String getMainComponentName() {
return "xxxxxxx";
}
#Override
protected void onCreate(Bundle savedInstanceState) {
//SplashScreen.show(this);
super.onCreate(null);
}
}
in the manifest:
<uses-permission android:name="android.permission.INTERNET" />
google-services.json is located correctly in the Android project.
(tried to include a pic but SO wouldn't let me upload it, was told it was 'forbidden').
this is our console.log from terminal (I've eliminated some of the testing in the code example to make it clearer, but the 'thisID' is the object returned by getAppInstanceID)
LOG #008 thisthing [object Object]
LOG show thisID {"_h": 0, "_i": 0, "_j": null, "_k": null}
LOG #002 collections undefined
LOG #003 instance undefined
LOG #007 error [TypeError: undefined is not a function]
LOG #005 instance id undefined
this question is not duplicate for firebase.database is not function.
I installed firebase and import as follow
import React, { Component } from 'react'
import { View } from 'react-native'
import Card from '../components/card'
import firebase from 'firebase/compat/app'
import database from 'firebase/compat/database'
export default class Home extends Component {
state = {
profileIndex: 0,
profiles: [],
}
UNSAFE_componentWillMount() {
firebase.database().ref().child('Users').once('value', (snap) => {
let profiles = []
snap.forEach((profile) => {
const {name, bio, birthday, id} = profile.val()
profiles.push({name, bio, birthday, id})
})
this.setState({profiles})
})
}
when not import this
import database from 'firebase/compat/database'
show error as
firebase.daatabase is not function
but when import this
import database from 'firebase/compat/database'
error is gone and work but actually database is not using in code
I want to know the solution for this
How can use this method
firebase.database()
what need to import in react native
thanks
https://rnfirebase.io/database/usage
Installation
#react-native-firebase/app
#react-native-firebase/database
pod install
cd ios/ && pod install && cd ..
import database from '#react-native-firebase/database';
In my react-native project I'd like to generate barcode from given value. I found react-native-barcode-builder but I don't know how to use this library in android correctly. I've already install by npm install --save react-native-barcode-builder but when I want to import library in project I have following error:
undefined is not an object (evaluating 'undefined.hex')
I think I should link this library by react-native link but it doesn't change anything. Every sample is for Xcode, but I developing on Windows in WebStorm. Can anyone tell me how to correctly use this library?
This is my code:
import React, {Component} from 'react';
import {connect} from 'react-redux';
import Barcode from 'react-native-barcode-builder'
import Dimensions from 'Dimensions';
import {
StyleSheet,
View,
Image
} from 'react-native';
const DEVICE_WIDTH = Dimensions.get('window').width;
const DEVICE_HEIGHT = Dimensions.get('window').height;
class CardDetailsScreen extends Component {
render() {
return (
<View style={styles.container}>
<Image source={this.props.imageSource} style={styles.image}/>
<Barcode value="Hello world" format="EAN-13"/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
image: {
width: DEVICE_WIDTH,
height: 250,
}
});
const mapStateToProps = (state) => {
return {
card: state.card
};
};
const mapDispatchToProps = (dispatch) => {
return {
getCardData() {
console.log('test');
}
}
};
export default connect(mapStateToProps, mapDispatchToProps)(CardDetailsScreen);
Here you've got the answer: https://devhub.io/repos/wonsikin-react-native-barcode-builder
Before use react-native-barcode-builder run: npm install react-native-svg --save && react-native link react-native-svg and it should works.
If you want to test a library that creates EAN13 natively you may try react-native-barcode-creator:
npm install react-native-barcode-creator && cd ios && pod install
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>
);
}
}