im new to use RactNative.
so i want to build web app using RN and use ExpoPixi to build signature.
When i try to import the ExpoPixi, it return error Unhandled Rejection (TypeError): Illegal invocation on Chrome.
this is my component
import React, { useRef } from 'react';
import ExpoPixi from 'expo-pixi';
export const Registration: React.FC<Props> = (props, { text }) => {
let signRef = useRef(null);
return(
<ExpoPixi.Signature
ref={signRef}
strokeWidth={3}
strokeAlpha={0.5}
/>
)
}
is that error related to webpack?
what should i do?
Related
Can I use hooks inside a function? For example I have implemented the following code:
import React, { useState, useEffect, Component} from 'react';
export default class App extends Component {
checkdata_db(){
const [booblenavalue,setboolenavalue]=useState(false);
useEffect(() => {
setboolenavalue(true)
}, [])
console.log(booblenavalue);
}
render(){
}
}
This code doesn't work. It throws the following error:
Invalid hooks call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app"
How can i run hooks inside checkdata_db method?
Hey #Elly as #yousoumar said , you cant use hooks in classes , it can be only done with functional comp:
You can convert it to like this :
Also you cant use useEffect,useState inside any conditional statements like if,else etc.
So you need to add useEffect outside any functions etc
import React, { useState, useEffect, Component} from 'react';
const App = () => {
const [booblenavalue,setboolenavalue]=useState(false);
useEffect(() => {
setboolenavalue(true)
}, [])
const checkdata_db = () => {
console.log(booblenavalue);
}
return <View />
}
Hope it helps feel free for doubts
I am currently trying to learn how testing works and how to do it with mocha on react native.
This is a test from a tutorial I found:
import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { Text } from 'react-native';
import { expect } from 'chai';
import App from './App';
Enzyme.configure({ adapter: new Adapter() });
describe('<App>', () => {
let wrapper;
beforeEach(() => {
wrapper = shallow(<App />);
});
it('renders default Text', () => {
expect(wrapper.find(Text)).to.have.lengthOf(3);
});
});
My problem is that whenever I run the test I get his back:
import React from 'react';
^^^^^^
SyntaxError: Cannot use import statement outside a module
When I change the import statements to require, I then get this error:
wrapper = shallow(<App />);
^
SyntaxError: Unexpected token '<'
I don't really understand how I can make mocha work on react native... or could someone recommend some resources please?
I am trying to figure put how to use Redux-Persist. I have the following code in my index.js:
import { AppRegistry, View } from "react-native";
import React from "react";
import App from "./App";
import { name as appName } from "./app.json";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import storeConfig from "./app/config/store";
const AppRedux = () => (
<Provider store={storeConfig.store}>
<PersistGate presistor={storeConfig.persistor} loading={null}>
<App />
</PersistGate>
</Provider>
);
AppRegistry.registerComponent(appName, () => AppRedux);
When I run it I get the following message:
Unhandled JS Exception: TypeError: Cannot read property 'subscribe' of undefined
BUT, When i comment out PersistGate I have no problems and my store gets rehydrated.
The reason I am trying to keep PersistGate is to have splash screen while rehydrating. Any suggestions on how to solve this problem?
P.S. This is what I have in store file:
export default () => {
const pReducer = persistReducer(persistConfig, reducers);
const store = createStore(pReducer, {}, applyMiddleware(logger));
const persistor = persistStore(store);
return { store, persistor };
};
Issue Description
Trying to push a new screen with
Navigation.push(this, {
component: {
name: 'awesome-places.AuthScreen' }})
And getting an error Exepction in HostFunction <unknown>
Error Screenshot
Steps to Reproduce / Code Snippets / Screenshots
Create RN app, install required modules (redux, react-redux, react-native-navigation, react-vector-icons) and run code on Android device.
Add relevant code, App.js and component that causes the error. I tried running Navigation.push with this.props.componentId but when I press the button there is no response
App.js
import { Navigation } from 'react-native-navigation';
import { Provider } from 'react-redux';
import AuthScreen from './src/screens/Auth/Auth';
import SharePlaceScreen from './src/screens/SharePlace/SharePlace';
import FindPlaceScreen from './src/screens/FindPlace/FindPlace';
import PlaceDetailScreen from './src/screens/PlaceDetail/PlaceDetail';
import configureStore from './src/store/configureStore';
const store = configureStore();
// Register Screens
Navigation.registerComponentWithRedux("awesome-places.AuthScreen", () => AuthScreen, Provider, store);
Navigation.registerComponentWithRedux("awesome-places.SharePlaceScreen", () => SharePlaceScreen, Provider, store);
Navigation.registerComponentWithRedux("awesome-places.FindPlaceScreen", () => FindPlaceScreen, Provider, store);
Navigation.registerComponent("awesome-places.PlaceDetailScreen", () => PlaceDetailScreen);
// Start an App
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
component: {
name: 'awesome-places.AuthScreen'
}
}
});
});
FindPlace.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { connect } from 'react-redux';
import { Navigation } from 'react-native-navigation';
import PlaceList from '../../components/PlaceList/PlaceList';
class FindPlaceScreen extends Component {
Navigation.push(this, {
component: {
name: 'awesome-places.AuthScreen',
}
})
}
render () {
return(
<View>
<PlaceList places={this.props.places} onItemSelected={this.itemSelectedHandler} />
</View>
);
}
}
const mapStateToProps = state => {
return {
places: state.places.places
}
}
export default connect(mapStateToProps)(FindPlaceScreen);
Environment
React Native Navigation version: 2.17.0
React Native version: 0.59.4
Platform(s) (iOS, Android, or both?): Android
Device info (Simulator/Device? OS version? Debug/Release?): Android 7.1.2, Debug
I noticed you're pushing the screen with this instead of an explicit componentId.
When calling Navigation.push, the first argument needs to be a componentId. See the docs for reference.
Also, this might not be a problem, but registerComponentWithRedux is deprecated and you should register the screen with the new api
I get a problem with Expo and react-native. When I try to loadAsync font from assets folder I get this error:
[Unhandled Promise rejection: Error: Font not found /data/data/host.exp.exponent/cache/ExperienceData/.../ExponentAsset-5868d2d7f28da04ee373451e87d682f8.ttf]
My code in App.js
import React, { Component } from "react";
import { configureStore } from "./store.js";
import { Provider } from "react-redux";
import { AppLoading, Font } from 'expo';
import MainWrapper from './components/mainWrapper'
const store = configureStore();
export default class App extends Component {
state = {
appReady: false
}
loadAssets = async () => {
await Font.loadAsync({
'Arial': require('./assets/fonts/Arial.ttf')
});
this.setState({appReady: true});
}
componentDidMount() {
this.loadAssets()
}
render() {
return (
<Provider store={store}>
{this.state.appReady ?
<MainWrapper />
:
<AppLoading />
}
</Provider>
);
}
}
and I use
"expo": {
"sdkVersion": "21.0.0"
}
Most of my App.js I took from Expo example with some changes. Do you have any ideas how can I resolve this error?
It was broken .ttf file. I downloaded correct file of font from another source and my problem has been resolved. But what about FontAwesome I will explore this.