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')
)
})
Related
I'm trying to keep a live state of either the user is signed-in or not, so I can either show him or not, specific elements in the components. Using this code it's supposed to console.log(0) and then console.log(1), but it actually throws an error Cannot read properties of undefined.
./addons/Signed.js:
import { useState, createContext } from "react";
export const SignedContext = createContext();
export default function SignedProvider(props) {
const [SignedIn, setSignedIn] = useState(0);
return (
<SignedContext.Provider value={{ SignedIn, setSignedIn }}>
{props.children}
</SignedContext.Provider>
);
}
./screens/Profile.js:
import { useContext } from "react";
import SignedContext from "../addons/Signed";
...
const ProfileScreen = () => {
const { SignedIn, setSignedIn } = useContext(SignedContext);
console.log(SignedIn);
setSignedIn(1);
console.log(SignedIn);
...
}
...
You are using a named export for SignedContext but using a default import in Profile. Thus, you must use curly braces for your import. The following should change your issue.
import { SignedContext } from ".../addons/Signed"
Edit: If ProfileScreen is not a child of SignedContext.Provider, then this will not work. The general workflow is documented here. Hence, if ProfileScreen is not a child of the Provider, the context won't be available to it.
The ususal way to do this, is to define the context provider as a top level element in your app, if you want the context to be available at a global level in your application.
function App = () => {
const [signedIn, setSignedIn] = useState(0)
const contextValue = React.useMemo(() => ({signedIn, setSignedIn}), [singedIn])
// your application structure must be wrapped inside here.
// as an example I have only used ProfileScreen.
// Usually this is your root stack.
return (
<SignedContext.Provider value ={contextValue}>
<ProfileScreen />
</SignedContext.Provider>
)
}
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
I am using facebook ads. I wanted to put native ad to my react native expo app, but i got error. When i put simple banner all is ok. It gives me this error:
Uncaught Error: java.lang.String cannot be cast to java.lang.Double
I tried to import like this:
import * as FacebookAds from 'expo-ads-facebook';
but it gave me this error:
Unable to resolve "#unimodules/core" from "node_modules/expo-ads-facebook/build/withNativeAd.js"
What am i doing wrong?
// pageScreen.js
import React from 'react';
import { FacebookAds } from 'expo'
import AdScreenFacebook from './AdScreenFacebook'
class AdScreen extends React.Component {
render () {
return (
<AdScreenFacebook adsManager={adsManager} adChoicePosition="topLeft" expandable={false} />
);
}
}
// AdScreenFacebook.js
import React from 'react';
import { FacebookAds } from 'expo'
const { AdIconView, AdMediaView } = FacebookAds;
const adsManager = new FacebookAds.NativeAdsManager("2272791379702600_2272795453035526", "1");
class AdScreenFacebook extends React.Component {
render () {
return (
<View>
<AdMediaView />
<AdTriggerView>
<Text>{this.props.nativeAd.bodyText}</Text>
</AdTriggerView>
</View>
);
}
}
export default FacebookAds.withNativeAd(AdScreenFacebook);
export default createStackNavigator(
{
Main: {
screen: AdScreen,
},
AdScreenFacebook: {
screen: AdScreenFacebook,
}
},
{
initialRouteName: 'Main',
}
);
Remove the quotation marks from the number 1 in the NativeAdsManager function. You are currently passing that function the number 1 as a string instead of as a number.
// AdScreenFacebook.js
const adsManager = new FacebookAds.NativeAdsManager("2272791379702600_2272795453035526", 1);
With SDK 33, we’re deprecating imports of most modules from the expo package. This means that in a future release, you won’t be able to write, for example, import { FacebookAds } from 'expo';. Rather, you’ll need to install the individual packages for each module you use and import from them instead.
You can use the new expo install command to install modules; this command is a wrapper around npm install/yarn add that automatically installs a module version compatible with your SDK version. For example, for the FacebookAds module, you would run expo install expo-ads-facebook and then use import * as FacebookAds from 'expo-ads-facebook';. This change paves the way for tree-shaking and smaller JavaScript bundles. It also makes moving between the managed and bare workflows simpler.
If you want to use a Expo module such as a question, install it and set it up.
For managed apps, you'll need to run expo install expo-ads-facebook. To use it in a bare React Native app, follow its installation instructions.
Usage
import * as FacebookAds from 'expo-ads-facebook';
const { AdTriggerView, AdMediaView } = FacebookAds;
class AdComponent extends React.Component {
render() {
return (
<View>
<AdMediaView />
<AdTriggerView>
<Text>{this.props.nativeAd.bodyText}</Text>
</AdTriggerView>
</View>
);
}
}
export default FacebookAds.withNativeAd(AdComponent);
I want to add UPI payment in my App and currently using expo tool to create the app but now I got stuck as there is unable to find any direct implementation by using js only and require me to eject from expo. If there is any way by which I can implement the UPI without exiting from expo as it expo makes things really easy.
I have tried to implement the simple code provided in the docs for react-native-upi-payment but it is not moving ahead and require me to move through android manifest which is not inside the expo project.
import React from 'react'
import RNUpiPayment from 'react-native-upi-payment'
import { View, StyleSheet, Container } from 'react-native'
import { Input, Button } from 'react-native-elements'
import { Constants } from 'expo'
export default class PaymentScreen extends React.Component {
static navigationOptions = {
header: null
}
goToBhimUPI = () => {
RNUpiPayment.initializePayment({
vpa: 'someupi#ybl', // or can be john#ybl or mobileNo#upi
payeeName: 'Name',
amount: '1',
transactionRef: 'some-random-id'
}, this.successCallback, this.failureCallback);
}
failureCallback = (data) =>{
console.log(data)
}
successCallback = (data) => {
console.log(data)
}
render() {
return(
<Button
containerStyle = {styles.button}
type = 'clear'
title = 'Bhim UPI'
onPress = {this.goToBhimUPI}
/>
)
}
}
I expect this module to take me to the UPI payment gateway and return to the place from where it is called. Currently this is giving me error:(undefined is not an object(evaluating 'UpiModule.intializePayment'))
you can do this using react-native-upi-payment for all types of upi available or else phonepesdk for only phonepe integration
I have a React Native, React hybrid app. For React Native i am using react-native-elements.
My app is run using Expo and was built out with the react-native init. I am getting the Material Icons (missing) RSD;
Through much searching, i have found the #expo/vector-icons but it doesn't seem to work. My App.js looks like this;
import React from 'react'
import { Font, AppLoading } from 'expo'
import { MaterialIcons } from '#expo/vector-icons'
import HybridApp from './src/App'
export default class NativeApp extends React.Component {
constructor() {
super()
this.state = {
fontsAreLoaded: false
}
}
async componentWillMount() {
await Font.loadAsync(MaterialIcons.font)
this.setState({ fontsAreLoaded: true })
}
render() {
const { fontsAreLoaded } = this.state
return !fontsAreLoaded ? <AppLoading /> : <HybridApp />
}
}
As you can see, i am waiting for the font to load... all to no avail.
After hours wracking my brain on this, the answer was there in front of me the whole time.
Presumably, React Native Elements refers to Material icons as Material Icons, not MaterialIcons.
This means that the default import from #expo/vector-icons does not work as their reference to Material icons is different.
The solution is to manually select Material icons from expo, replacing this line;
await Font.loadAsync(MaterialIcons.font)
with
await Font.loadAsync({
'Material Icons': require('#expo/vector-icons/fonts/MaterialIcons.ttf')
})
I hope this saves someone some time in the future.
The icons are actually fonts and must first be loaded. It seems they are autoloaded sometimes and others times are not.
So to ensure they are loaded, do this:
import FontAwesome from './node_modules/#expo/vector-icons/fonts/FontAwesome.ttf';
import MaterialIcons from './node_modules/#expo/vector-icons/fonts/MaterialIcons.ttf';
...
async componentWillMount() {
try {
await Font.loadAsync({
FontAwesome,
MaterialIcons
});
this.setState({ fontLoaded: true });
} catch (error) {
console.log('error loading icon fonts', error);
}
}
...
render() {
if (!this.state.fontLoaded) {
return <AppLoading />;
}
Then when you reference the type, it must be the same type that the component you are using is expecting.
For example, react native elements expects these types: material-community, font-awesome, octicon, ionicon, foundation, evilicon, simple-line-icon, zocial, or entypo
See complete answer here:
http://javascriptrambling.blogspot.com/2018/03/expo-icon-fonts-with-react-native-and.html
This question is old, but what worked for me and quite straightforward is
import { Ionicons } from "#expo/vector-icons";
await Font.loadAsync({...Ionicons.font, ...other imports })
Check if you have any dependency warnings when you run the app. I had an expo-font version warning, when I fixed it this error went away.
Some dependencies are incompatible with the installed expo package version:
- expo-font - expected version range: ~8.4.0 - actual version installed: ^9.1.0