Social Sector organizations are slowly moving towards using more technology to create large scale impact. React Native’s significance for the social sector in this regard has been ever increasing. With a mobile application, people working in remote areas can manage all operations smoothly. Building a mobile application in react native can help NGOs to scale up, achieve operational efficiency, and subsequently become a leader in their domain. Its integration with Laravel can further enable greater coherence and coordination between different stakeholders. Through this talk, I will use the case of one NGO who completely digitalized their work with our help and share
How React Native helped social sector organizations scale up their impact
How the integration of Laravel and React Native helped them achieve operational excellence
How some key challenges specific to the NGOs were solved in React Native using different open source libraries.

Working in network poor areas is the reality of most social sector organisations. They have to travel to remote areas, interact with beneficiaries and field staff and coordinate with them on a regular basis. Social sector organisations face several challenges related to creating a large impact with limited funds. Recently, at ColoredCow, we took on the challenge to completely digitalise a social sector organisation. This organisation plants trees all over the world and at the same time, provides a means of livelihood to farmers on whose land the trees are being planted.

They were doing good work but had the deep desire to scale up their impact and run operations in a hassle free way. We decided to do it through digital technology where the mobile application became a core component of their product.

In the subsequent paragraphs, I will tell you the core challenges that the organisation faced and how we used different open source libraries in React Native and Laravel to solve them.

Challenge 1: Collecting information of the trees being planted and the farmers in rural areas with no network connectivity.
Earlier, collecting information on trees and farmers was being done on pen and paper which led to a lot of mistakes. By building a mobile application, they could now collect all kinds of data, avoid silly mistakes, rectify mistakes, send data effortlessly to the team and conduct surveys on the go. The mobile app had to work in areas with network problems too. So we provided offline support. We used React-Redux and React-Persists libraries to provide support. Also, I feel that it’s far easier to implement offline support in react native instead of the native mobile applications.

Challenge 2: Coordinating the activities of the field team spread across different geographies and the admin/core team.
Through a seamless integration between react native and laravel, we took the oauth route (by using laravel passport ), the information collected on the mobile app synced with the webapp. We were able to use react native’s networking library effectively to achieve that. We used the native functions instead of putting an extra layer. It look some extra time but it gave us full control on firing the events and navigation actions. We were able to fire all the navigations from our redux actions itself.

Challenge 3: Bulk data management
The NGO plants trees for a week repeatedly and then uploads the information collected on phone to the server. So in one go, there are often thousands of trees being uploaded on the server. To manage these bulk images offline and uploading them on the server in one go is a bit complex. Because the network connection is not that good, we need to be prepared for every exception where we could lose data. We added react native fs library to chuckchucked the files in multiple directories and then started the transition and rollback in case something went wrong for that small transition. This helped us to manage exceptions.

Challenge 4: Camera customisation and filters specific to the needs of the organisation
The NGO uses the camera to collect image data of trees. These camera controllers are somewhat like Snapchat. We integrated react native camera with some of our native code (like custom capture sound and custom flash management) and we were good to go. We were able to place the watermarks and other information of the NGO on the planted tree image.

Challenge 5: Optimising battery performance
Since most people are using the mobile app to capture images of trees continuously in areas where network connectivity and electricity is poor, battery optimization was required. We added redux persists to get a lot of reusable content and reduced the screen rerendering occurrences, added GPS coordinates with dynamic refresh duration, stressed on receiving data and callbacks exclusively via props, hosted our images on AWS S3 buckets (helps in caching the images more securely) and added appropriate expiration time.