I was given the task of deciding how to build nearly identical screens from React web in React Native. One major problem with RNW was that our screens existed in web to begin with and RNW works the other way around.
We seriously considered RNW but I think we made the right decision not using it. It's an amazing accomplishment and runs great apps like MLSoccer but for our app it was a hard ask to lead with mobile. For us, we still have mobile developers and RN is only a fraction of the mobile product. So the 1:1 thing is complicated as I know is the case with many places that use RN.
Instead we built a cross platform shared component library that compiles to 2 npm modules, web and mobile. All our styles are in emotion.js or glamorous-native, imports switch on extensions .native.tsx or .tsx and in the end a lot of components we build end up working in both because all our root components work on both!
My main focus is JavaScript specialising in frontend UI with React. I like to explore different frameworks and technologies in my spare time. Learning languages (programming and real life) is a blast.
Location
London
Education
Bachelor of Design Innovation in Media Design, Victoria University of Wellington
Sounds like you came up with a great solution to solve the challenges you were facing. It makes sense that it would have been too much effort to go from web to React Native Web.
Does the component library differ much between the two platforms or are is it designed to look visually identical?
Between web and iOS they are almost visually the same and that was our intent. As for Android, we don't share any components there yet. I would imagine the few differences could be handled easily with RN Platform.
I forgot to mention that a lot of people don't consider how dropdowns as they work in the web don't offer the best mobile experience. Having a shared component library with the option to define different components for web and native that use different UI libraries was invaluable. For example, we really wanted to use react-select for web and built something custom for native using the same props interface.
My main focus is JavaScript specialising in frontend UI with React. I like to explore different frameworks and technologies in my spare time. Learning languages (programming and real life) is a blast.
Location
London
Education
Bachelor of Design Innovation in Media Design, Victoria University of Wellington
That’s a great point. Different paradigms exist for different platforms. I think drop downs are a component which can vary a lot depending on platform, mouse or touch, etc.
I think I whenever there is a shared code platform there needs to be a way to target specific platforms or features. iOS, Android and web have very different ideas of what a stop down should look like and how it should behave - to deliver the same experience to every platform could be very out of place.
The ability to target different platforms is a part of Expo for web, (it's added in the expo/webpack-config). You can use a .web.js extension to target web just like .ios, .android, .native target their own respective platforms.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I was given the task of deciding how to build nearly identical screens from React web in React Native. One major problem with RNW was that our screens existed in web to begin with and RNW works the other way around.
We seriously considered RNW but I think we made the right decision not using it. It's an amazing accomplishment and runs great apps like MLSoccer but for our app it was a hard ask to lead with mobile. For us, we still have mobile developers and RN is only a fraction of the mobile product. So the 1:1 thing is complicated as I know is the case with many places that use RN.
Instead we built a cross platform shared component library that compiles to 2 npm modules, web and mobile. All our styles are in emotion.js or glamorous-native, imports switch on extensions .native.tsx or .tsx and in the end a lot of components we build end up working in both because all our root components work on both!
Sounds like you came up with a great solution to solve the challenges you were facing. It makes sense that it would have been too much effort to go from web to React Native Web.
Does the component library differ much between the two platforms or are is it designed to look visually identical?
Between web and iOS they are almost visually the same and that was our intent. As for Android, we don't share any components there yet. I would imagine the few differences could be handled easily with RN Platform.
I forgot to mention that a lot of people don't consider how dropdowns as they work in the web don't offer the best mobile experience. Having a shared component library with the option to define different components for web and native that use different UI libraries was invaluable. For example, we really wanted to use react-select for web and built something custom for native using the same props interface.
That’s a great point. Different paradigms exist for different platforms. I think drop downs are a component which can vary a lot depending on platform, mouse or touch, etc.
I think I whenever there is a shared code platform there needs to be a way to target specific platforms or features. iOS, Android and web have very different ideas of what a stop down should look like and how it should behave - to deliver the same experience to every platform could be very out of place.
The ability to target different platforms is a part of Expo for web, (it's added in the
expo/webpack-config). You can use a.web.jsextension to target web just like.ios, .android, .nativetarget their own respective platforms.