I need a Wheel styled picker ( which is available for iOS as the default Picker ) on Android and iOS. I'm using expo and hence I cannot use any native packages available out there.
Is it possible to use pure javascript package with react native?
I tried this library but getting an error:
cannot find self
while importing.
Is it really possible to use a library like this or is there anything I'm missing??
Sorry, but no, you cannot use react components written for the web in react-native. Those libraries use HTML for their markup and CSS for the styling. React-Native uses none of those, so it will obviously not know how to display them.
So I guess that the only option is to search for some library written for react-native (Like the one already suggested) or build one yourself.
Have a look at this library: react-native-picker
This library is a Wheel styled picker alternative for your issue.
Install it with:
npm install react-native-picker --save
And use it like this:
import Picker from 'react-native-picker';
<Picker
style={{
height: 300
}}
showDuration={300}
showMask={true}
pickerData={[1,2,3,4]}
selectedValue={3}
/>
No. becuase react-native ui work different than web
Related
I am trying to create an npm package. That package contains components related to react-native (View, Text, Stylesheet, etc ).
I would like to reuse the same package for my React JS (web) application.
I am stuck in the state where I am not getting any clue from the internet which gives me details about what are the changes I need to make in my react-native package so that I can use it in a web project as well.
I have tried using react-native-web npm. but it didn't work. Whenever I consume the package, am getting the error shown below
Did anyone try this way? Is there any good tutorial or approach to follow?
You can't use components written in react-native for web.
React libraries use HTML and CSS, so obviously they will not now how to display native components like View and Text.
I'm a ReactJS developer, and I'm learning React Native for an upcoming project.
With ReactJS, there is a great boilerplate which is widely used by ReactJS developer: https://www.reactboilerplate.com/ (There are also many other great boilerplate).
However, after researching for a day, I haven't figured something similar to React Native. Please, can someone suggest to me a boilerplate for React Native?. Is there a standard project structure out there?
Actually there is not much difference from ReactJs. It really depends on navigation library you are choosing. The best options are:
React Navigation (JS based navigation library)
React Native Navigation (Native navigation library)
I suggest seeing example projects of both libraries.
You should try:
https://github.com/react-community/create-react-native-app
Also read documentation about React Navigation.
You can use the react native Ignite CLI Github which seems to be very similar, it's probably one of the most advanced Boilerplates for React Native and can be difficult to understand, thus when starting with React Native I would advise you to use none at all or just use your React structure
I recommend using the Handidev boilerplate since it only consists of the minimum library that every react-native project uses. And it has been used in many projects. This boilerplate consists of :
latest react-native version
react-navigation and its dependencies
redux-toolkit ( state management)
react-native vector icons ( for icons)
You can check it out here:
javascript version: https://www.npmjs.com/package/#handidev/react-native-boilerplate
npx react-native init MyApp --template #handidev/react-native-boilerplate
TypeScript version: https://www.npmjs.com/package/#handidev/react-native-typescript-boilerplate
npx react-native init MyAppName --template #handidev/react-native-typescript-boilerplate
I want to create a component library, so i can keep track of what i have, easier. Something similar to what Storybook is doing.
I'm using react-native with expo. I have tried runing storybook and it did not worked, after long tries to make it work, found out that storybook is not compatible with expo.
You can check docz, afaik they have react-native support.
I've created a project using create-react-app. I have switched my JavaScript language version to React JSX in Preferences | Languages & Frameworks | JavaScript.
But I still have unresolved variable warning and unresolved function warning.
The simplest way to achieve correct code completion while developing any (not only react) app is to add support for required type scrip libraries via IDE itself. Assuming you using JetBrains IDE for web dev (may be not WebStorm but IntelliJ IDEA):
go to Settings (Ctrl + Alt + S) -> Languages & Frameworks
expand JavaScript
pick Libraries, you'll see something like this
click Download...
search for any libraries you need (you can just start typing lib name in libs list), then click Download and Install
when using react, I suggest to add: react; react-dom; react-native (if you interested in mobile dev)
click Apply when you done
commonly you don't need to restart IDE, changes will apply immediately.
Happy coding!
To enhance code completion we recommend that you add a TypeScript
definition file for React with npm install --save #types/react
ref: blog.jetbrains
On WebStorm, open Preferences, Expand the Languages & Frameworks, then expand JavaScript, click on Libraries. Click the Add button and add react to list of libraries.
Restart WebStorm.
Or
You do this:
You can add a TypeScript definition for React with npm install --save #types/react
Also, for reference, according to https://youtrack.jetbrains.com/issue/WEB-24780#comment=27-2681125 it is possible to solve it entirely within IntelliJ instead of running the npm command manually.
You can search for all the packages you need for the autocompletion.
I'm trying to implement a search form, in my react-native app. For it, I need something like react-select or select-2, both tools are made for web systems and I don't know if is a good idea to use it for a react-native app.
I already tried to install and use it in react-native but this does not appear to work.
You can't use select2 or react-select with react-native, because it's DOM based and so, it will work only in navigator, not in react-native
The closest react-native equivalent I've found is react-native-multiple-select, you can find it on github at https://github.com/toystars/react-native-multiple-select or install it with
npm i react-native-multiple-select
Probably the closest to what you want that comes bundled with React Native is http://facebook.github.io/react-native/docs/picker.html
The Picker component will give you a tumbler thing on iOS and a dropdown on Android
Alternatively maybe this 3rd party component is closer to what you want: https://github.com/bulenttastan/react-native-list-popover
From How to use React native select box