Twice in my career I’ve heard this: “Oh, you know React? React Native for Web shouldn’t be hard for you then.” The first time I heard it, I wasn’t able to work on the project for reasons I’ve spoken about in another blog post. A few years later, I would hear that same statement again but as a Front-End Engineer I still didn’t have any real experience with React Native at all. So I dived into this React Native for Web project hoping it would be fairly similar.
I’m here to tell you, this is NOT TRUE.
Disclaimer: As of the time of this writing, I’ve only had 2 months of React Native for Web experience but I can definitely speak on my dev experience with this tool.
I would like to talk about this topic through the lens of 2 assumptions I’ve made throughout the course of working on this project and how those assumptions got me into trouble.
Assumption #1: Getting variables from the URL will be easy
So a popular way of getting information from an external source is passing that information into the URL, pulling the data from it and then leveraging it in your app. This will usually take the form of yourapp.com/page?data-needed=DaData!! In the project I’m working on, this was the solution we decided to go with to have a user pass important data to our application and I was tasked to implement this feature. In JavaScript running in the browser, you’d use window.location.search to get the information you’d need. Using React, if you’re using React Router, there’s a hook called useSearchParams that you can use (which I literally learned of right now). In React Native, it wasn’t quite as simple for me…
The solution I ended up using was getting the initial URL using getInitialURL from the expo-linking package and then using Regex to pull out the variable I want out. The key issue here is that the implementation I used required that I get the variable from the initial URL that you use to access the app. If for whatever reason, you wanted to pass information into the URL later on in the app, my implementation won’t solve that problem for you. There are two other solutions that I know for this problem. The first solution is to pass the variable around using navigator in React Native which doesn’t help me because my variable came from an external source. Another solution was using another function to get the URL (again, the name escapes me) which didn’t work when I tried to use it and so I settled with the initial URL solution.
Something I also wanted to note as I’m talking about this is as I’ve been working with React Native for Web, as you navigate through the application, the URL never changes. I’m sure that has something to do with how navigator works under the hood but it’s very strange to me as a Front-End Engineer.
Assumption #2 You have access to all of CSS
Another time working on this project, we needed to implement a simple animation for the app and I was charged with working on this feature. I’ve not worked with a lot of animations so I decided that I’d experiment with CSS animations so that I get the right look and feel and then I’d just import it into the application. Easy peasy right? So I decided to jump into a Codesandbox to experiment with the animation without potentially breaking something in the app by accident. In setting up the Codesandbox, I absentmindedly selected React as the environment and off I went. Took me about two hours of learning CSS animations but I finally came up with something that I liked. Ended the day pretty happy with myself and I just prepared to do some simple conversion and some testing the next day.
A quick note was that our application used Styled Components which I wasn’t too familiar with and what I thought was going to be the main pain point of the conversion. So I poked around on Google and tried implementing the animations I had spent time working on the day before. I made sure to ask about Styled Components and how animations specifically worked there. Then I came across this article and specifically this line:
"Keyframes are not supported by react-native. Use the ReactNative.Animated API."
So, I started Googling ReactNative.Animated API and went down that rabbit hole. I couldn’t really figure out how ReactNative.Animated worked and futilely tried to just cram my animation into the Styled Component. After a couple of hours, I ended up having to reach out to my coworker and asked if they had implemented React Native animations before and thankfully they had. They pointed me to the Animatable package and while it did eventually solve the problem, the implementation was not something I was (and still am not) happy with.
Conclusion
So first of all, this is not an exhaustive list of the differences between React and React Native for Web. These are the specific problems I had that really taught me, quite painfully I might add, that React and React Native for Web are very different and you leverage them differently. As a Front-End Engineer, there are tools that you’ll be used to having access to that you simply won’t have in React Native for Web because the underlining ecosystems are different. Yes you’re creating something that is meant to be viewed in a browser but your dev experience will be very different from writing React apps.
So when you’re choosing a front-end technology for your next project and someone asks “why not use React Native for Web. It’s just like React right?”, I hope this article can help you say “No, no it’s not.”
Top comments (0)