I using 'worklet'; and runOnUI() and then get the error below.
Because I use 'worklet'; I added import 'react-native-reanimated'
Because I also use runOnUI I added import {runOnUI} from 'react-native-animated'
Error:
ERROR TypeError: global.__reanimatedWorkletInit is not a function. (In 'global.__reanimatedWorkletInit(_f)', 'global.__reanimatedWorkletInit' is undefined)
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
Short answer:
Besides runOnUI also import and use something else from react-native-reanimated, for example also add useSharedValue:
import { useSharedValue, runOnUI } from 'react-native-reanimated';
and use the shared value:
const sharedVal = useSharedValue(0);
Now the error will go away.
Long answer (how I got to the solution):
At first I got the error (global.__reanimatedWorkletInit is not a function.) when trying to create a widget:
import React from 'react';
import { Text } from 'react-native';
const Example = () => {
const someWorklet = () => {
'worklet';
console.log("Hey I'm running on the UI thread");
};
return (<Text>Example</Text>);
};
export default Example;
Adding import 'react-native-reanimated'; helped me to get rid of the error.
Then I wanted to run someWorklet. So I added a runOnJS (runOnUI got me the same results) call. My component now returned:
<View>
<Text>Worklet: {runOnUI(someWorklet)()}</Text>
</View>
and I imported it via import { runOnUI } from 'react-native-reanimated';.
Now the same error was back.
Only after I also imported and called useSharedValue everything worked as expected. This is my component code which didn't throw the error anymore:
import React from 'react';
import { View, Text } from 'react-native';
import { useSharedValue, runOnJS } from 'react-native-reanimated';
const Example = () => {
const someWorklet = () => {
'worklet';
console.log("Hey I'm running on the UI thread");
return 'World';
};
const sharedVal = useSharedValue(0);
return (
<View>
<Text>Hello, {runOnJS(someWorklet)()}</Text>
</View>
);
};
export default Example;
Just add these two lines in App.tsx and index.js
1)import "react-native-reanimated"
2)global.__reanimatedWorkletInit = () => {}
Related
I am working in an existing expo project (expo version 42.0.1 ) and I am unable to get this package working. It says in the package readme that it doesn't work with Expo, because it uses native code. But the readme is from a year ago and I thought Expo sdk42 allows you to use native modules now when you build your own custom client?
Does anyone know what I need to do to get this package working?
https://github.com/KjellConnelly/react-native-shared-group-preferences
Here's what i tried so far...
I added to my project with yarn add react-native-shared-group-preferences
And in App.js :
import 'expo-dev-client';
import React from 'react';
import { styles } from './src/components/CommonStyles';
import { useState } from 'react';
import { View, TextInput, Text } from 'react-native';
import SharedGroupPreferences from 'react-native-shared-group-preferences';
export default function App() {
const [inputText, setInputText] = useState('');
const widgetData = {
displayText: inputText,
};
const appGroupIdentifier = 'group.com.myproject.newwidget';
const handleSubmit = async () => {
try {
console.log('handleSubmit' + widgetData + appGroupIdentifier);
await SharedGroupPreferences.setItem(
'savedData', // this is a key to pull from later in Swift
widgetData,
appGroupIdentifier
);
} catch (error) {
console.log({ error });
}
};
return (
...
)
when I run the project with expo start and i to open iphone simulator,
I get this error: null is not an object (evaluating 'RNReactNativeSharedGroupPreferences.setItem')"
What am I doing wrong? Any help very much appreciated. Thanks
The package at node_modules\crypto-js\core.js attempted to import the Node standard library module crypto. It failed because the native React runtime does not include the Node standard library. Read more at https://docs.expo.io/workflow/using-libraries/#using-third-party-libraries
Getting this error when running npm start
for expo instead of crypto you can use expo-crypto
you can install it as below
expo install expo-crypto
in your codes
import React, { useEffect } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import * as Crypto from 'expo-crypto';
export default function App() {
useEffect(() => {
(async () => {
const digest = await Crypto.digestStringAsync(
Crypto.CryptoDigestAlgorithm.SHA256,
'Github stars are neat'
);
console.log('Digest: ', digest);
/* Some crypto operation... */
})();
}, []);
...
as from exp documentation
I'm trying to integrate emotion into my electron app but having some troubles and can't seem to find any talk of it. The boilerplate I'm using is electron-react-boilerplate. Everything seems to be working during the development build, but as soon as I build for production I get this error:
Any guidance or help would be great! I've seen there are some advanced options with emotion theming that I might need to use such as CacheProvider but not sure how to use them with electron....
Thanks!
Figured it out. In app/index.tsx you need to set the container the scripts will be injected into manually using CacheProvider and createCache, since the actual ReactDOM.render happens inside a document event listener. Full index.tsx file here:
import 'styles/index.css'
import createCache from '#emotion/cache'
import { CacheProvider } from '#emotion/core'
import React, { Fragment } from 'react'
import { render } from 'react-dom'
import { AppContainer as ReactHotAppContainer } from 'react-hot-loader'
import Root from './containers/Root'
import { configureStore } from './store/configureStore'
const AppContainer = process.env.PLAIN_HMR ? Fragment : ReactHotAppContainer
const { store, persistor } = configureStore()
document.addEventListener('DOMContentLoaded', async () => {
const myCache = createCache({
container: document.head,
})
// Render
return render(
<CacheProvider value={myCache}>
<AppContainer>
<Root store={store} persistor={persistor} />
</AppContainer>
</CacheProvider>,
document.getElementById('root')
)
})
I am getting an error at Constants in const{manifest}=Expo.Constants and showing me an error as undefined is not an object. I am not able to get it. Can anyone help me in removing that error.
I am trying to make a connection between API running on my computer and when I am debugging on my phone. it should connect regardless of what the IP address is.
import moment from 'moment';
import Expo from 'expo';
const{ manifest} = Expo.Constants;
const api = manifest.packagerOpts.dev
? manifest.debuggerHost.split(':').shift().concat(':3000')
: 'productionurl.com'
const url ='http://localhost:3000';
export function getEvents(){
return fetch(url)
.then(response => response.json())
.then(events => events.map( e =>({...e})));
}
export function formatDateTime(dateString){
const parsed = moment(new Date(dateString));
if(!parsed.isValid()){
return dateString;
}
return parsed.format('H A on DD MMM YYYY');
}
export function formatDate(dateString){
const parsed = moment(new Date(dateString));
if(!parsed.isValid()){
return dateString;
}
return parsed.format('DD MMM YYYY');
}
export function getCountdownParts(eventDate){
const duration = moment.duration(moment(new Date(eventDate)).diff(new Date()));
return{
days:parseInt(duration.as('days')),
};
}
Expected events to be displayed on my emulator from db.json file but
I am getting error as Undefined.
The following works for me:
Instead of
import Expo from 'expo';
and (for example):
const { version } = Expo.Constants.manifest;
Which gave the above error,
I wrote:
import Constants from 'expo-constants';
and:
const { version } = Constants.manifest;
I had the same issue with the error:
undefine is not an object (evaluating _expoLocation.default.reverseGeocodeAsync)
I solved it with an import change.
Before:
import Location from "expo-location";
After:
import * as Location from "expo-location";
you can try this code.
import { Constants as Manifest } from 'expo';
Read how to use it for a detailed description.
I want to load AppRegistry component due to AsyncStorage
this is the code in index.js:
import { AppRegistry } from 'react-native';
import { AsyncStorage } from 'react-native';
import index from './src/pages/LoginPage';
import HomeScreenRouter from './src/pages/CategoriesPage/index';
let page;
AsyncStorage.getItem("#token").then((value) => {
const token = value;
if(value === null) {
page = index;
} else {
page = HomeScreenRouter;
}
})
.then(res => {
});
AppRegistry.registerComponent('fatima2', () => page );
but I have an error that the app . doesn't found the AppRegistry component,
what should i do to solve this problem?
Corret usage of AsyncStorge is like that:
AsyncStorage.getItem('item', (err,result) => {
//Do your logic here
})
i dont know the main problem is this but, your usage may cause some issues.
Register a StactNavigator
in your AppRegistry. Add a new dummy page with empty view at the top of the navigator. So, when the app is opened the "DummyPage" will be displayed. At this stage, the StackNavigator will contain three pages i.e "DummyPage", "Index" and "HomeScreenRouter". Then read the value from Async Storage and on it's callback Reset your navigation stack
.
Then your StackNavigator will contain either "Index" or "HomeScreenRouter" screen.