0

I've got some questions regarding React Native Web. I haven't really wrapped my head around how it works so I'm hoping to get some answers.

  • Exactly, what happens when we "alias" the React Native to Web?
  • When working with Expo, why isn't some packages available? For example, the LinearGradient get's an error saying it can't be found.
  • I want to use Netlify Identity Widget, but that renders in HTML. How do I use that with React Native Web?

So in general, how do I develop in React Native Web? I need to know how to port npm packages so I can work with them.

Super thankful for any advice!

AlfredOdling
  • 393
  • 2
  • 5
  • 19

1 Answers1

1

Exactly, what happens when we "alias" the React Native to Web?

It means the library react-native-web will convert the react-native components into HTML/CSS tags.

Here an example:

<View> <Text style={{color: 'red'}}>I'm an awesome text</Text> </View>

Will become into when rendered on browser:

<div> <span style="color: red">I'm an awesome text</span> </div>

When working with Expo, why isn't some packages available? For example, the LinearGradient get's an error saying it can't be found.

Expo offers a very simple way to start developing React Native apps. But it's a closed box where you cannot add community native packages, only the native packages that comes with Expo. There is an exception, the js-only packages, like: https://github.com/crazycodeboy/react-native-check-box

For the native packages, you need to link them in the native side of your app and compile it. To achieve this I suggest you to start in the native development, you can found the path here: https://facebook.github.io/react-native/docs/getting-started#the-react-native-cli

I want to use Netlify Identity Widget, but that renders in HTML. How do I use that with React Native Web?

You can use any package/widget/library that renders HTML, because you will run it on browsers. You can start using it just typing yarn add netlify-identity-widget or npm install netlify-identity-widget --save into your react-native-web root folder.

Hope I helped!

Eduardo Ramos
  • 496
  • 4
  • 12