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
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 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
Two questions.
I currently have a react web app, using higher order components, and redux to manage state. I am using react version 15.6.1.
I am now looking to create a react-native project. Since I am planning to integrate the react-native and the react codebase into the same repo, I am trying to figure out the best way to do this, specifically regarding the version of react.
The latest version of react-native (0.53rc0) has a peer dependency on react 16.2.0.
The react app breaks when I tried to upgrade to react v16 and I don't have time to do those fixes at this stage, so I am stuck with react 15.6.1 for a while longer. Does this mean I have to use an older version of react-native (looks like 0.42 supports react v15), or is there some other way in which I can use the latest version of react for react-native only, while keeping it in the same repo.
To clarify - the reason I want to keep it in the same repo, is because I already have higher order components, so in theory I just have to write the react-native components which will to my understanding then be called by the higher order component when running in the mobile app.
If anyone has or knows of examples of repos on github where this has been done (combined react and react-native project), that would be great so that I can get an idea of what such a project would look like once done.