Is there a way to use this to create an UI library?

[johhansantana]

I'm trying to create an UI library for our project separated from our original source code. I tried using this and I installed the example javascript init project that the cli creates and imported the multiply function and it works but as soon as I modify the original file to add a react-native View or Text component and try to import that in my project it gives me errors like

Cannot read property 'useContext' of null

or

Cannot read property 'useState' of null

this is my modified file that I try to import:

import React from 'react';
import { Text, View } from 'react-native';

export function multiply(a: number, b: number): Promise<number> {
  return Promise.resolve(a * b);
}

const TestLibrary = () => {
  return (
    <View>
      <Text>hey</Text>
    </View>
  );
};

export { TestLibrary };

as soon as I import TestLibrary it gives me the errors.

note that the command I used to scaffold the project was
npx create-react-native-library@latest awesome-library

and the project consuming the library is a react-native project without expo

[satya164]

That means you have multiple instances of React. Did you follow the development workflow as documented in the project?

[johhansantana]

I think I was having the wrong idea on how to go into creating react native components for a library. I got it to work by simply having an empty npm init project and just creating the components with the react-native components and use peerDependencies for react and react-native and regular dependencies for third party libraries that the components use.

I got the idea when I saw that the npx create-react-native-library@latest awesome-library command created an example folder with a complete react native app there instead of creating it in the root folder where the components of the library are.

Correct me if I'm missing something or you recommend something else, this is all new to me.

[satya164]

Well, it does. But without more details or repro, it is hard to say what went wrong.