With the mobile revolution going around, everyone was anxious to catch-up and build/transform really cool functionalities into mobile apps and Salesforce fraternity was no different! The most likely used approach by Developers was Hybrid Apps then – which is about running the same code regardless of the platform..
But why am I sharing all this? Recently, I had been assigned to develop a mobile app that was meant to perform couple of tasks like –
- Capturing data using a niche interface
- Sending personal messages to other users (using Chatter Connect Apis)
- Checking daily/upcoming activities
And to top it up, it should be capable of running on iOS and Android platforms.
While the business was quite clear on the expectations, we were looking for just the ‘right’ solution / technology / framework to use; and in very less time, React Native came out to be our go-to guy!
What is React Native?
With React Native, you don’t build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that’s indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. With React-native we can write code once and use same code for Each platform (iOS, Android, Web). This the best feature I most liked it “Write once, run everywhere”.
React Native Components :
There are multiple prebuilt components available in React-Native. Though we can’t use any other HTML components or attributes, you may at times miss some well-designed UI components like Inputs, Buttons etc. however,I am pretty sure you won’t be disappointed in using the readily available ones. Here are just few basic ones that I worked upon –
<View> – It is container like divs on the web apps.It is used to wrap other components. View is designed to be nested inside other views and can have 0 to many children of any type.
<ListView> – ListViews are used when you want a scrolling list. This component makes scrolling smooth and it is easy to scroll hundreds of records.
<Image> – We have to use this component instead of HTML <img/> tag for images.
<Button> – It is similar to HTML button element and it has it’s own property and events.
<TextInput> – Similar to HTML input text and in react-native, there are few modified properties which is very useful for building apps.
And you can find many more from the references shared below.
React-Native Styling :
Initially you may find that styling with React-native components is bit painful, but with some practice (and some music) this turns out to be really fun! One thing that I really loved is, if there are any changes in style; the React framework ensures that the changes are re-rendered in real time (state re-rendering).
How to run the code?
So to conclude I can say that – This is just the beginning!
React Native is a great and fast way to build mobile apps. Just like the React on the web, it is becoming a popular mobile framework. I really enjoyed building this React-Native app and hope this article motivates other devs to experiment it out.
- While there is a lot of content documentation available, I’d still suggest you to follow the official documentation – https://facebook.github.io/react-native/
- Getting Started with React Native Development
Senior Technology Associate