Could you introduce your app in a few sentences?
Moonwalk is a simple way to stay up to date with upcoming space launches and news. The App can notify you before every rocket launch, make you learn about the mission, or let you browse a selection of relevant news articles about space.
This App is a personal project that I made on my free time because of my interest in space and JavaScript development. It is designed to be a great tool for anyone who would like to stay up to date with space events in general. It is available on the App Store, and an Android version is planned to be released in the future.
How did you transition to React Native?
Coming from a JavaScript background and having good experience with React, the transition to React Native happened fairly quickly. I started learning by trying to build small test apps, because I think that the best way to learn is to practice. I had the opportunity to use React Native at my work where I learned a lot from my colleagues. If you are trying to learn, don’t hesitate to ask for help to an experienced developer, either in real life or online. The community is always willing to help.
I learned a lot from the official React Native documentation and always come back to it when I’m developing. The documentation is very nice and well-explained, especially for beginners. This is where I would recommend anyone who would like to get started with React Native to go.
Most of the React-compatible JavaScript libraries work in React-Native, so it’s easy to feel at home when developing with React Native. I was able to keep the same code editor, use the ES6 syntax, and much more while building for a completely different target.
Have your tried other cross platform technologies before using React Native?
Unfortunately not.
What has your experience been working with React Native in terms of app performance, have you noticed any impacts?
While working with React Native, you have to keep in my mind that the user will most likely not run your app on the same device you’re testing your App on. This means that you always have to think about lower-end phones or tablets while adding your next super-duper-amazing animation or your next ginormous ScrollView with a thousand high resolution images in it.
One of the most common ways to to increase performance in your app is to limit the number of items you’re rendering. If you are using the widely-used ScrollView component in your app, it can lead to poor performance since every item in the view is rendered at once, whether it is on the screen or not. React Native provides a FlatList component, which can render items lazily instead of rendering every item in the view at once.
One other common way to keep your App running smoothly would be setting the useNativeDriver: true on your RN animations, to avoid going through the Bridge (the only way between the JS thread and the Native thread) on every frame. This solution is well explained among other performance tips and solutions in the performance section of the RN documentation. If your app is running slow, this is the place to go.
In a previous app I worked on, we had to disable or reduce the number of some animations and effects (like blurs and fancy shadows) for the lower-end devices. Without making those adjustments, some cheap Android phones weren’t running the app at a constant 60 frames per seconds.
Which tools, libraries and frameworks are part of your development process with React Native?
When building an App with React Native, you probably want a good navigation system. My two libraries of choice for handling Navigation would be React-Native-Navigation and React-Navigation. Both are very good and relatively easy to use. For Moonwalk, I used React-Navigation because of the ease of use and the ability to easily customize any part of the navigation across the app. If you’re looking for performance, I’d recommend using React-Native-Navigation, as it uses native elements to display your screens and to handle navigation (though the installation requires you to link the native library code to your app).
For state management, I used to work with Redux a lot, although happy with it, I started using MobX a while ago and found the library quite a lot simpler to use, even though you don’t feel as “in-control” as with Redux. It really is a matter of preference. Moonwalk uses MobX under the hood.
For debugging, I would recommend the amazing Reactotron, it is a great tool to keep track of your app’s actions, API calls and more. I also use React-Native-Debugger, which offers a standalone solution for debugging your RN app. It also includes the Redux Devtools out of the box, so if you’re using Redux, you’ll love this debugging tool to inspect your state changes, send an action or take a look at your state.
As for styling, I always loved the way styled-components works. This CSS-in-JS library allows you write plain CSS for your React components, and works for both React and React Native. This is my library of choice when it comes to styling for any app built with React.
What resources have you used to learn React Native? Books, tutorials, courses etc. Anything you can recommend?
Since we have such a great open-source community, I like to have a look around at what everyone else is making. The React-Native-Apps repo is an awesome showcase of open-source apps to learn from, and it is growing every day. If you built an open-source app with React Native, you should send a PR !
I had the chance to attend the React Native EU conference in Poland, where I learned a lot and had the opportunity to talk to other developers from around the world. I would strongly recommend anyone to go to any React-Native conference if they can.
If you’re looking to take your first steps into React-Native, I suggest trying the great Expo’s Snack tool, where you can try React-Native without installing anything on your computer.
I would also recommend the Reactiflux Community Discord server. They have dedicated channels for React-Native among other where you can talk or ask about other front-end tools or libraries. If you are a beginner, it is a great place to get help. If you already are an experienced developer, I found that a great way to challenge your skills and to learn is to help other developers.
Anything else you would like to mention?
Moonwalk is open-source, and anyone is free to contribute to the project. The source code is hosted on GitHub . If you want to know more or ask me a question, feel free to reach me on Twitter.