I'm making some cross-platform components for mobile web and app. For that use, I'd like to set a core that works as a view, and two implementations, one for web and another for app. In app side code, with React Native, I can use ScrollView component to make effects when scrolled, by using ref, onSCroll, onScrollBeginDrag, etc., that are only in ScrollView of ReactNative. Is there any modules, strategies or whatever I can use ScrollView in React for the use in web browser?
you can use react-slick library it is provides lots of features.
Related
ReactXP is pretty new, nothing much about it out there.
AFAIK
Both ReactXP and React Native can build native mobile apps (iOS, Android).
ReactXP is something build on top of ReactJS/React Native.
Looks like the purpose of React Native and ReactXP are same -- building cross platform mobile apps.
Is it ReactXP just more Microsoft friendly?
The authors of React use the phrase “learn once, write anywhere”.
With React and React Native, your web app can share most its logic with your iOS and Android apps
Problem: the view layer needs to be implemented separately for each platform.
ReactXP(Solution): a thin cross-platform layer which can share your view definitions, styles and animations across multiple target platforms.
More: In general, it exposes APIs, components, props, styles and animation parameters that are implemented in a consistent way across React JS (HTML) and React Native for iOS and Android. A few platform-specific props and style attributes have been exposed, but we have tried to keep these to a minimum.
Source/Reference: https://microsoft.github.io/reactxp/
ReactXP is built using React and React Native, and the lifecycle methods remain the same across both platforms. The main difference between React Native is that ReactXP works out of the box with not only iOS and Android, but also on the web and on WindowsOS!
Is it possible to use all the reactjs components in react native app?If no,what is the best way to switch between react js and react native?
If an app is done using react js is it necessary(Compulsory) to use redux in that?
There are two main points:
1.The base UI components in React (DOM) and React Native are different.
2.The ‘React’ objects in React and React Native are different (React Native removes the DOM-specific stuff adds a lot of native-specific code).
please check this link for more details:
https://medium.com/#aakashns/sharing-components-between-react-and-react-native-f6ce3713658a#.oa4my8p36
I avoid these types of quests because React JS UI components built for the web have different semantics than React JS UI components built for React Native.
React Native doesn't have <div/> or <img/> or a DOM for that matter.
React Native uses React JS components that bind to native views, and things like CSS are so very different than that from the Web.
The only way you'd be able to use a React JS UI component in a React Native app is by making it 100% of the height and width of an embedded webview. It's possible (i've done it for testing purposes), but not ideal.
Is it possible to use all the reactjs components in react native app?
React Native uses other types of components which aren't related to HTML, but to iOS and Android views. Even the styling is slightly different.
If no,what is the best way to switch between react js and react native?
You can still reuse other parts of your code. If you use redux, for example, you should keep using almost the same code.
If an app is done using react js is it necessary(Compulsory) to use redux in that?
No, redux is just an implementation of the flux architecture. There are others, but redux is the most popular one.
If your component contains pure js logic, then yes. React js is meant for Web, where we make use of web semantic. React native extends mobile native UI components.
can we combine IONIC for User interface and react native for device communication? I like to use IONIC styles for my app instead of writing my own.
No not really. The closest thing that could be implemented would be to use a React Native WebView and render ionic css styling in the WebView, but it would be pretty complex for not a lot of payoff.
A lot of the built in styling that Ionic comes with is iOS and Android specific, matching the iOS and Android native apis and components. React Native also does this out of the box, so many components (Picker, DatePicker, AlertIOS, ProgressBarAndroid, TabBariOS, etc...) will already have platform specific styling similar to Ionic. The Ionic button styling, cards, etc can be custom built in React Native thought without a ton of effort.
There are lots of React components available. How do I know which ones are usable on React Native platform (IOS and Android)?
Web React components use DOM elements to display (ex. div, h1, table, etc) but these are not supported by React Native. You'll need to find libraries/components made specifically for React Native.
I doubt there are components that supports both, thus it should be fairly easy to figure out if it's made for React Native or not. As of now, if the creator does not specifically say that they made for React Native, it probably does not work on React Native.
Whether the same REACT codebase can be shared across mobile web and mobile app?
Unfortunately, you cannot. React Native uses a bunch of pre-built components that are really just native iOS components wrapped in Javascript. For example, you could use <div> or <span> in React but in React Native you'd have to use <Text>, images can only be displayed in <Image> components, etc. There are also stricter limitations on what styles, data, or nested components each React Native component can have.
On a side note, trying to do this goes against the React philosphy -> 'Learn once, write anywhere'. You can try taking a look at Ionic if you're interested in something that ports easily over to mobile apps.