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!
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!
Related
https://developers.google.com/fonts/docs/material_symbols
I was following this developer guide and there is instructions for iOS and android apps but none for react native. I was wondering if there's any npm packages that can render material symbols for react. Only way i know is to download the svgs and serve from an assets folder.
You can use react-native-vector-icons to import your font and icoMoon to define the name of each icon.
See the documentation here: React Native Vector Icons - Custom Fonts
I am fairly new to React Native and I am trying to implement a map that can be used in Web, Android and iOS.
The resources I have found online, are for implementing Android and iOS with react-native-maps or just in Web with react-native-web-maps. Is there an easy way to incorporate all of them in React Native?
I am also using the Expo CLI to run the server. I have not run npm run eject to create the OS-specific files as I am trying to make the code as cross-platform as possible.
I don't know if any package works straight away for all environments but you can conditionally render map component for mobile and for web.
I have used these following packages in mobile and web versions of Expo app, they work pretty similarly and are easy to use and implement:
-mobile: #react-navigation/native
-web: #react-google-maps/api
is there any wat to show in app navigation in react native
I found this https://medium.com/alameda-dev/installing-react-native-mapbox-navigation-in-ios-e35d43c5987a but what is solution for android?
If I understand your question correctly then the best way to create navigation in react native is use dedicated library: https://reactnavigation.org/
You can use this package and the documentation it is a Turn by turn navigation https://reactnativeexample.com/smart-mapbox-turn-by-turn-routing-based-on-real-time-traffic-for-react-native/
Bro this library is Perfectly fine for Both platform
https://github.com/homeeondemand/react-native-mapbox-navigation#readme
or you can install from my repo e.g
npm install #homee/react-native-mapbox-navigation#https://github.com/mirzahayat/react-native-mapbox-navigation.git
or
yarn add #homee/react-native-mapbox-navigation#https://github.com/mirzahayat/react-native-mapbox-navigation.git
for further guidance you can follow the library
I am trying to find a dropdown related react-native package. I couldnt able to find any, which is compatible with both IOS and android devices.
So planning to use nativebase.io reactNative package.
Is it okay to use or do I face any problem?
Yes, You can use NativeBase with the expo.
Expo has its own Picker component you can use that as well which works on both platforms, Nativebase Picker is also dependent on this core module of react-native, So its recommended to use this one instead of installing a new UI lib only for Picker.
https://docs.expo.io/versions/latest/react-native/picker/
If Expo (create-react-native-app) is pure JavaScript, can I use other node modules in my Expo app?
in Expo, you can use any client based Javascript module, that you find in npm or that you created yourself.
But you can't use any kind of modules that has native parts in it. (Packages that you need to link to your react native projects can't be used) Although, Expo has its own SDK for your native needs.
The package you are talking about (mqtt.js) is a nodejs module, which can't be used with react native or in your case with Expo.
Just a guess, if you are trying to have a browser in your react native or Expo project, react native has a builtin in-app browser you might want to check out; https://facebook.github.io/react-native/docs/webview.html