I'm trying the new state management library from facebook recoil, I tried the Getting started example on a reactjs project and it worked perfectly. After that I tried recoil on a react-native project but I got an error:
Here's the code I've tried:
App.js
import React from 'react';
import {RecoilRoot} from 'recoil';
import RecoilTest from './RecoilTest';
const App = () => {
return (
<RecoilRoot>
<RecoilTest />
</RecoilRoot>
);
};
export default App;
RecoilTest.js
import React from 'react';
import {useRecoilState} from 'recoil';
import {View, Text} from 'react-native';
import {textState} from './Atoms';
const RecoilTest = () => {
const [text, setText] = useRecoilState(textState);
return (
<View>
<Text>{text}</Text>
</View>
);
};
export default RecoilTest;
Atoms.js
import {atom} from 'recoil';
export const textState = atom({
key: 'textState',
default: 'initial value',
});
Recoil don't has a fully support to react native yet
Towards release
See here
Hi everyone! FYI we've published a "nightly build" branch for testing purposes. If you want to try out recoil with react native before we release next version, try install the nightly branch with the "install git branch" feature of npm/yarn:
npm install https://github.com/facebookexperimental/Recoil.git#nightly
Or
yarn add https://github.com/facebookexperimental/Recoil.git#nightly
It is supported in nightly build. If you want to try before it is released with next version, you can install it doing:
yarn add https://github.com/facebookexperimental/Recoil.git#nightly
The update can be followed in this PR
Update:
RN support is now there in Recoil.js as Experimental.
https://github.com/facebookexperimental/Recoil/releases/tag/0.1.1
Try using 'useRecoilValue' instead in your RecoilTest.js file
const [text, setText] = useRecoilValue(textState);
Related
I'm trying to use an npm package called hover-effect inside a functional component, but I'm constantly bumping into some issues. I have used similar packages in create-react-app before but I'm new to next.js. See below how the package should be used:
import React, { useEffect, useRef } from "react";
import HoverEffect from "hover-effect";
export default Card(){
const container = useRef();
useEffect(() => {
console.log(container.current);
new HoverEffect({
parent: container.current,
intensity: 0.3,
image1: "https://picsum.photos/420/620",
image2: "https://picsum.photos/420/620",
displacementImage:
"https://raw.githubusercontent.com/robin-dela/hover-effect/master/images/fluid.jpg",
});
}, [container]);
return(
<>
<div
className="outer-image"
ref={container}
id="imgContainer"
style={{ height: 500, width: 400 }}
>
</div>
</>
)
First of all, I tried to import it like any other npm module, but I get the issue
SyntaxError: Cannot use import statement outside a module
I have tried to import the package dynamically using next/dynamic in this way:
const HoverEffect = dynamic(() => import('hover-effect')), {ssr: false});
But when I try to use 'new' syntax I get the error 'HoverEffect' is not a constructor.
I even tried adding next js transpile module as
next.config.js:
const withTM = require("next-transpile-modules")([
"gsap",
"hover-effect",
]);
module.exports = withTM();
Anyone aware of any solution would be a lifesaver
I just tried to import it in my localhost. This solution is working fine
const withTM = require("next-transpile-modules")([
"gsap",
"hover-effect",
]);
module.exports = withTM();
You also need to make sure that your import is like this
import HoverEffect from "hover-effect";
I have set up deep linking in my project with react-navigation. It is successfully working in android. But in ios, it is opening the app successfully but does not route to the correct location.
this is how I code it with react-navigation.
import 'react-native-gesture-handler';
import * as React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import {Linking} from 'react-native';
import AppStackNavigator from '_navigations/AppStackNavigator';
import I18n from 'i18n-js';
export default function App() {
const linking = {
prefixes: ['https://mydomain/meeting','myapp://meeting'],
config: {
screens: {
login: 'login/:data',
},
},
};
return (
<NavigationContainer linking={linking} >
<AppStackNavigator />
</NavigationContainer>
);
}
As this one is not working then I tried it with getInitialState using use linking hook. Then the initial state was always undefined. I do not have any idea to fix this. I tried almost all the examples I was able to find to fix this issue. But I was unable to do so. If someone can help me to fix this it is really really grateful. Thank you.
react-navigation:"^5.2.16",
react:"16.11.0"
react-native:"0.62.2"
ios:14.2
xcode: 12
I am trying to implement a function into my app, so the User can sign PDFs. I found on CodeSandbox an example for a Signature Pad and i tried to insert it into my project but i get 2 errors called:
Property 'getTrimmedCanvas' does not exist on type '{}'.ts(2339)
Property 'clear' does not exist on type '{}'.ts(2339)
Codesource Signature Pad example
Codepart with the Errors
import Popup from "reactjs-popup";
import SignaturePad from "react-signature-canvas";
import { useState, useRef } from "react";
import React from "react";
function Button() {
const sigCanvas = useRef({});
const [imageURL, setImageURL] = useState(null);
const clear = () => sigCanvas.current.clear();
const save = () =>setImageURL(sigCanvas.current.getTrimmedCanvas().toDataURL("image/png"));
return (
//for more Code use the Link: Codesource Signature Pad example
);
}
export default Button;
I have installed this two libraries:
npm install --save reactjs-popup
npm install --save react-signature-canvas
Any idea how to fix them?
Thanks in adance
I resolve this problem add a type in the useRef:
const sigCanvas = useRef<any>();
Very simple you are using .tsx file which is causing the issue. Just change the file type from tsx to .js or .jsx it will work fine :)
I've just used react-signature-canvas and this works for me
On package.json
"#types/react-signature-canvas": "^1.0.2",
"react-signature-canvas": "^1.0.6",
On component
import React, { useRef } from 'react';
import SignatureCanvas from 'react-signature-canvas';
const signaturePadRef: React.MutableRefObject<SignatureCanvas> = useRef(null);
return (
<SignatureCanvas
ref={(ref) => {
signaturePadRef.current = ref;
}}
/>
);
I am creating a react component package.
I am exporting the components in a index.js file which is compiled to a index.min.js file once i build it using rollup.
But the problem is once i install the package and tried to import, vs code is not showing me the named imports as in import {A} from 'a-package'
What's i am missing?
EDIT
import React from 'react'
import a from './components/A'
import b from './components/B'
export const A = (props) => return (<a {...props} />)
export const B = (props) => return (<b {...props} />)
I solved the issue,
the issue was, since i was using rollup as a package and using the output format as umd rather than cjs
Now when i changed the format the problem is solved
I create project.
react-native init test
Then:
yarn add firebase
After react-native init process I have index.js in root directory. Its contents:
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('test', () => App);
Importing firebase in there is absolutely working case.
import { AppRegistry } from 'react-native';
import App from './App';
import firebase from 'firebase';
AppRegistry.registerComponent('test', () => App);
But when I try to import firebase in App.js,
import React from 'react';
import { Text, View } from 'react-native';
import firebase from 'firebase'; // Anywhere in this file
class App extends React.Component {
constructor(props) {
super(props);
const config = {
// data from firebase portal
};
firebase.initializeApp(config);
}
render() {
return (
<View>
<Text>
Hello.
</Text>
</View>
);
}
}
export default App;
I get an error:
Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.
throwOnInvalidObjectType...
This problem exists only in Android simulator. In iOS simulator everything is ok.
Android Studio - the latest version.
React native - the latest version.
Firebase - the latest version.
How to fix that?
In firebase version ^5.3.1
Importing firebase:
import firebase from '#firebase/app'
Work for me!
Try to install the version 5.0.2. Use this command as administrator:
npm install --save firebase#5.0.2
As far as i see, the current version (5.0.4) is buggy!