How to integrate recoil library with react-native?

Question

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',
});

For such a young library you should post an issue on their github. — Dennis Vash, May 18 '20 at 14:04

score 3 · Answer 1 · answered May 30 '20 at 11:03

3

Recoil don't has a fully support to react native yet

answered May 30 '20 at 11:03

hackemate

520
4
12

1

do they have full support now Feb 2022? – ubaidh khatlani Feb 12 '22 at 21:12

Black · Answer 2 · 2020-10-11T19:11:39.813

2

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

edited Oct 11 '20 at 19:11

answered Jun 21 '20 at 21:18

Black

9,541
3
54
54

any devtools available for RN yet? – devsourav Dec 15 '20 at 15:50

score 2 · Answer 3 · answered Oct 11 '20 at 11:54

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

score 2 · Answer 4 · answered Nov 11 '20 at 08:36

2

Update: RN support is now there in Recoil.js as Experimental.

https://github.com/facebookexperimental/Recoil/releases/tag/0.1.1

answered Nov 11 '20 at 08:36

Yogesh Agrawal

971
10
9

score -2 · Answer 5 · answered May 27 '20 at 07:00

-2

Try using 'useRecoilValue' instead in your RecoilTest.js file

const [text, setText] = useRecoilValue(textState);

answered May 27 '20 at 07:00

divsoup

1

useRecoilValue provides only state value, not setText – kkangil May 27 '20 at 08:58
This is wrong. `useRecoilValue` cannot be destructured and is a read-only value – rantao Feb 24 '21 at 23:25

How to integrate recoil library with react-native?

5 Answers5