How to make stories UI like Instagram and WhatsApp in React-Native
In this tutorial, we will learn how to make stories of famous applications like WhatsApp and Instagram following each and every part by steps.
This post is all about implementing the multi-language translation and text to speech in your cool new react-native application. In this post, you will learn
- How to implement
react-native-snap-carouselin our app. - How to use class and functional components for stories UI in the react-native app.
Before you start, first you would need a React-Native app to start with, hence you can follow how to create a react-native app for beginners and start after that from here.
Complete source code of this tutorial is available here — InstaWhatsAppStories.
What is React-Native
React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. In other words: web developers can now write mobile applications that look and feel truly “native,” all from the comfort of a JavaScript library that we already know and love. Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.
Similar to React for the Web, React Native applications are written using a mixture of JavaScript and XML-Esque markup, known as JSX. Then, under the hood, the React Native “bridge” invokes the native rendering APIs in Objective-C (for iOS) or Java (for Android). Thus, your application will render using real mobile UI components, not web views, and will look and feel like any other mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location.
React Native currently supports both iOS and Android and has the potential to expand to future platforms as well. In this tutorial, we’ll cover translation and text to speech implementation. The vast majority of the code we write will be cross-platform. And yes: you can use React Native to build production-ready mobile applications! Some anecdota: Facebook, Palantir, and TaskRabbit are already using it in production for user-facing applications.
The fact that React Native actually renders using its host platform’s standard rendering APIs enables it to stand out from most existing methods of cross-platform application development, like Cordova or Ionic.
Existing methods of writing mobile applications using combinations of JavaScript, HTML, and CSS typically render using web views. While this approach can work, it also comes with drawbacks, especially around performance. Additionally, they do not usually have access to the host platform’s set of native UI elements. When these frameworks do try to mimic native UI elements, the results usually “feel” just a little off; reverse-engineering all the fine details of things like animations takes an enormous amount of effort, and they can quickly become out of date.
Why stories on Instagram and Whatsapp?
Instagram and WhatsApp Stories is a feature within the Instagram app and WhatsApp where users can capture and post related images and video content in a slideshow format. Stories can be modified with the typical features of the popular social media app.
This awesome feature is for sharing our live and unforgettable moments with friends and families. With this, we can add multiple pictures and videos to our storyline.
In this tutorial, we will create a very eye-catching UI for Instagram status and stories with Instagram home page and Whtsapp Status details and status page UI.
Now we are aware of our implementations and the basic idea of our need. Hence we will achieve the above target by following it step by step.
STEP 1: Prepare local JSON files
We are preparing local JSON files in our app because of repeat cards or stories for Instagram and WhatsApp.We will create these JSON files in App\Components\StoriesData.js. the folder.
A basic view of our JSON file is:-
STEP 2: Implement libraries
We’ll start by adding a carousel module to our React Native project called react-native-snap-carausal: so that we cal slide images or videos in WhatsApp or Instagram status.
yarn add react-native-snap-carausalHere, we are working on react-native version 0.60.5. Hence we don’t need to link any package externally as in the latest versions above 0.60 react-native provides auto-linking functionality.
Add Interactive UI for Instagram and WhatsApp status
Now you are ready to use the react-native-snap-carousal function provided by the React-Native react-native-snap-carausal package and get the result. Before this let us make a beautiful view to access its functions by clicking on stories and status.
1:-Instagram
For Instagram, I have divided my UI into different components as this is the advantage in react-native for reusability. I have divided my instagram components in these different components: —
=> InstaView.js
=> InstaContainer.js
=> InstaStyles.js
Here InstaView has two components as the CardStories component which consists of more components like StoriesComponent , CardContainer, and CarausalComponent. You can Check in the below-given gist.
The Result for the above code is:
After clicking on the stories we enable a modal where we are showing status slides and its result is damn hot. Slides changes on tapping the screen.
Complete source code of this tutorial is available here — InstaWhatsAppStories.
2:-WhatsApp Status
For Whatsapp, I have divided my UI into different components too as this is the advantage in react-native for reusability. I have divided my Whatsapp components into these different components: —
- WhatsView.js
- WhatsContainer.js
- WhatsStyles.js
The complete code for WhatsApp status UI is in the below gist.
The Result for the above code is:
In the above gists i have implemented some logics for slides changes on tap. We can tap to the next slide and we can tap for the previous slide.
goToNextSlide = (val) => {
console.log(val);
setTimeout(() => this._slider1Ref.snapToNext(), 250)
}goToPrevSlide = (val) => {
console.log(val);
setTimeout(() => this._slider1Ref.snapToPrev(), 250)
}
Some other methods that we can implement for carousal actions are as:-
Available methods for Carousel
MethodDescriptionstartAutoplay (instantly = false)Start the autoplay programmaticallystopAutoplay ()Stop the autoplay programmaticallysnapToItem (index, animated = true, fireCallback = true)Snap to an item programmaticallysnapToNext (animated = true, fireCallback = true)Snap to next item programmaticallysnapToPrev (animated = true, fireCallback = true)Snap to the previous item programmaticallytriggerRenderingHack (offset)Call this when needed to work around a random FlatList bug that keeps content hidden until the carousel is scrolled (see #238). Note that the offset parameter is not required and will default to either 1 or -1 depending on the current scroll position.
For more information, you can check out this react-native-snap-carousel.
Here in the tutorial, successfully implemented the react-native-snap-carousel for slides and got the perfect result. You can follow all the steps and achieve this very easily or you can clone my repo on Github for both the implementations here and enjoy 😎 😎 😎 🕺 🕺 🕺..…
Conclusion
In this post, we learned how to implemented the react-native-snap-carousel for slides and made complete Instagram home and stories UI along With WhatsApp status and Status Slides in React-Native applications. Since the package is amazingly light and has great documentation, it is the developers’ first choice when it comes to creating stories UI app.
Complete source code of this tutorial is available here — InstaWhatsAppStories.
Next Steps
Now that you have learned the implementation of Instagram and WhatsApp stories UI in React-Native, you can also try
- Twitter login in Ionic React Capacitor App
- How To integrate into React Native — Image picker| Integrate Firebase
- React Native V/s Ionic V/s Flutter
- Firebase Push notifications in React Native Apps
- How to use Geolocation, Geocoding and Reverse Geocoding in React Native Apps
If you need a base to start your next React Native app, you can make your next awesome app using React Native Full App
