Comments (8)
I've put some documentation and snacks here. It's still in-progress 😅
https://geekyants.github.io/react-native-aria/docs/challenges
Changed the approach after a suggestion from necolas on necolas/react-native-web#1862.
This looks much cleaner IMO and doesn't depend upon rn-web's unstable recipe APIs.
The main branch has the updated code - https://github.com/GeekyAnts/react-native-aria
- Menu/useOverlayPosition won't work in snack as it has a dependency on rn-web v14 and expo sdk 40 is on v13.
from react-spectrum.
The architecture is designed to support using the lowest layer, react-stately, cross platform. react-aria specifically is web only since it relies heavily on browser APIs. Electron should work since it's essentially just Chrome. We don't have anything around React Native yet, but we'd be interested in working with the community on building out the higher layers on top of react-stately.
from react-spectrum.
@devongovett since stately
can be reused between web and native, to have spectrum
support native maybe we can:
- create some
atomic
components for web and native (View
/Text
) that would renderdiv
on web andView
on native andspan
on web andText
onnative
and we can reuse them in thespectrum components
, (Maybe we might need to normalize some api's between web and native, so extrapolating composition from thoseatomic
components we can compose into bigger components that will work both web and native. - move
platform
specific styling outside of the component - unified web/native theming solution would be required, i guess moving
postcss
vars tojavascript
to share with native, and just parsing thecss
@ build time to replace with the variables from js incss
would be a solution, or go with some other opensource theming solution that works both web and native, i guess (styled-components
andemotion
both work cross platform ?)
i guess a basic example checking progress-bar
component if we replace all divs
and span
with View
and Text
and move styling outside we could share a lot of the code between web and native.
from react-spectrum.
There are few react component libraries that work on native and web platforms, for example: https://github.com/callstack/react-native-paper https://github.com/react-native-elements/react-native-elements
Most straightforward way to develop application that can be compiled to web and native is to use https://github.com/expo/expo , but you can also use lerna and/or yarn workspaces to share npm modules with native or web project.
from react-spectrum.
Congrats on these awesome libraries!
Great to hear that React Native is being considered.
Has any thought been given on how this might be implemented when creating an universal app? Meaning creating 1 codebase for Native and web using react-native-web?
Is there any roadmap or task list where I might start contributing?
from react-spectrum.
We haven't thought too much about it so far, and I don't believe anyone on the team has much experience with react native. Would love to hear some suggestions from anyone about how it should work.
I think in general we were thinking that several versions of a component could be implemented for different platforms using the same API. We have the @react-types
packages, which define the TypeScript API definitions for each component which should ensure compatibility. And of course the stately layer could be shared as well. Would be cool to see something like @react-aria
as a middle layer for React Native as well, using react native props for accessibility and behavior instead of DOM props. Then multiple design systems could be built on top of that similar to the way we can on the web.
If you have thoughts about this or how to go about implementing it please let us know!
from react-spectrum.
I've been putting some thought into this.
It seems that really, we just need to implement a react-native version of the @react-spectrum
package. This since @react-stately
should work natively, @react-aria
is browser specific and I don't think we need to implement anything specific for native (I could be wrong on this one) and simply pass on the ARIA props to RN.
At first glance, implementing this react-spectrum for react-native would require redoing the CSS in a CSS-in-JS library or RN's StyleSheet. Not a problem but would prefer a way to share code between web and native.
This is my initial brain dump.
I am thinking of creating a test project to see how I can implement at least 1 component, to get ideas of possible problems. Possibly implement Button.native.tsx which would use implement react-typed.
Should I be able to carve out the time for this, I'll post my findings back here.
Any thoughts?
from react-spectrum.
@razvanip Sharing some of my findings.
I tried using react-aria with react-native-web as View/Text gets rendered to divs on react-native-web.
Issue I faced using react-aria with react-native-web.
Spreading props from react-aria hooks doesn't always work on View/Pressable/Touchable components.
Reasons:
- View doesn't pass role and tabIndex to the rendered div element. https://github.com/necolas/react-native-web/blob/6739ab95cfdfc1bcb6ffc6989a1afb6ab373521e/packages/react-native-web/src/exports/View/index.js#L26
- Pressable/Touchable don't pass keyDown handler to the rendered div. necolas/react-native-web#1862
Regarding your suggestion, yes, we can create some atomic components, which is what I did using https://necolas.github.io/react-native-web/docs/?path=/docs/guides-unstable-uses--page
But as you can see from the name, it uses an internal API.
You can take a look at some of the implementations below.
https://github.com/GeekyAnts/react-native-aria/tree/experimental-overal/example/src/components
We're still experimenting as we're planning to add support for windows/macOS components but that would require writing Native components instead of using hooks. We are still finalizing an approach. I'll share it here once we do.
from react-spectrum.
Related Issues (20)
- Issues with useTreeData hook HOT 1
- Incompatible with chunking, large initial bundle sizes HOT 3
- react-aria focus management causes conflicts with other libraries HOT 5
- [tailwindcss-react-aria-components] breaks Tailwind's arbitrary group selectors (group-[...]) HOT 1
- onPress/onButton triggers click event on other element if layout changes based on onPress handler on touch devices HOT 1
- react-aria/useComboBox Error when typing HOT 1
- @react-stately/data : Cannot read properties of undefined (reading 'index') at useListState.ts HOT 1
- Published @react-types broken for Menu component HOT 4
- Kinda typo in useDragAndDrop.tsx HOT 1
- `<Switch />` does not trigger focus events when focused HOT 1
- Month displayed in DatePicker and DateRangePicker has the placeholder text still taking space when valorized HOT 2
- ko-KR: Unable to set AM/PM in DatePicker
- stopPropagation not preventing event propagation to parent element using usePress HOT 1
- Checkbox mouse click does not clear invalid state HOT 2
- Disable entire ListBox without needing to set disabledKeys HOT 1
- Documentation of "useTextField" from React-Aria is not up to date HOT 2
- Grouped Combobox items using Section and Header are announced incorrectly by screen readers (VoiceOver) HOT 1
- Inconsistent Calendar Display in Date Picker: UX Issue with Month Navigation. HOT 3
- useSwitch hidden input always in checked state HOT 1
- DateInput splits up two digit numbers HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-spectrum.