Facebook Live Clone With React Native, ZEGOCLOUD Livestream UIKit and Reanimated
Get 10000 free mins with UIKits: https://bit.ly/3AgHEp8
Take advantage of ZEGOCLOUD: https://bit.ly/46zz5lI
100% customized live streaming SDK: https://bit.ly/46yzSU0
How to build React Native live streaming app: https://bit.ly/3LVz69L
In this tutorial I showed how to Clone Facebook livestream with React Native, ZEGOCLOUD livestream UIKit, Reanimated, Redux-Toolkit, and PanResponder
Please don't forget to like and subscribe, it motivates me :)
If you have any question about anything, or if something is not working please let me know in the comment section
In the tutorial you will learn about how to
create custom bottom sheet with Reanimated and PanResponder
Integrate ZEGOCLOUD UIKit in React Native to quickly bootstrap a livestream feature in your react native mobile applications
create a custom vertical-sliding native stack page
setup and use redux-toolkit in react native...and many more things
Time
00:00:00 - 00:07:35 - Demo
00:07:35 - 00:18:51 - introduction and ZEGOCLOUD livestream app setup
00:18:51 - 00:19:46 - installation of dependencies
00:19:46 - 00:28:14 - Configuration
00:28:14 - 00:37:52 - Setup Redux toolkit and providers
00:37:52 - 01:35:36 - App initialisation (running pod install), launching the app in iOS emulator, and router and bottom tabs setup
01:35:36 - 00:04:44:29 - Home tab design, live stream screen design, and custom bottom sheet implementation with Reanimated and PanResponder
00:04:44:29 - End - integrating, configuring and testing livestream with ZEGOCLOUD UIKit
Links
React Native homepage
https://reactnative.dev/
The lesson files on my github repository
https://github.com/paulosabayomi/face...
ZEGOCLOUD
signup for an account through the homepage
https://www.zegocloud.com/
ZEGOCLOUD livestream UIKit documentation for react native
https://www.zegocloud.com/docs/uikit/...
Quickstart
https://www.zegocloud.com/docs/uikit/...
Co-hosting
https://www.zegocloud.com/docs/uikit/...)
React Native SVG
https://github.com/software-mansion/r...
React Native SVG Transformer
https://www.npmjs.com/package/react-n...
Figma design containing few Facebook mobile app components
https://www.figma.com/design/wXkNOLjF...
React-native-context-menu-view (not later used)
https://www.npmjs.com/package/react-n...
React Native Paper
https://callstack.github.io/react-nat...
Menu Item
https://callstack.github.io/react-nat...
React Native Vision Camera
https://react-native-vision-camera.co...
React Native Reanimated
Getting started
https://docs.swmansion.com/react-nati...
Quick example
https://docs.swmansion.com/react-nati...
Gorhom Bottom Sheet
https://ui.gorhom.dev/components/bott...
React Navigation
Getting started
https://reactnavigation.org/docs/gett...
Stack Navigator
https://reactnavigation.org/docs/stac...
Bottom Tabs
https://reactnavigation.org/docs/bott...
Redux-toolkit
Introduction
https://redux-toolkit.js.org/introduc...
Typescript setup
https://redux-toolkit.js.org/tutorial...
React Native Context Menu (not later used)
https://github.com/brnho/react-native...
#zegocloud #livestreamingsdk #streamingservice #flutterstreaming #reactnative
