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/facebook-live-clone-with-react-native-and-zegocloud-livestream-uikit

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/live-streaming-kit-rn/overview
Quickstart
https://www.zegocloud.com/docs/uikit/live-streaming-kit-rn/quick-start/quick-start
Co-hosting
https://www.zegocloud.com/docs/uikit/live-streaming-kit-rn/quick-start/quick-start-(with-cohosting)

React Native SVG
https://github.com/software-mansion/react-native-svg/tree/main

React Native SVG Transformer
https://www.npmjs.com/package/react-native-svg-transformer
Figma design containing few Facebook mobile app components
https://www.figma.com/design/wXkNOLjFPYE1vrm9Si6IPc/Facebook-New-Updated-Logo%2C-Reactioins%2C-Iconography-%26-Font-(Community)?node-id=0-1&t=GGgvkG5aNsNFgAMH-0

React-native-context-menu-view (not later used)
https://www.npmjs.com/package/react-native-context-menu-view

React Native Paper
https://callstack.github.io/react-native-paper/
Menu Item
https://callstack.github.io/react-native-paper/docs/components/Menu/MenuItem/

React Native Vision Camera
https://react-native-vision-camera.com/docs/guides

React Native Reanimated
Getting started
https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started
Quick example
https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/your-first-animation/

Gorhom Bottom Sheet
https://ui.gorhom.dev/components/bottom-sheet/usage

React Navigation
Getting started
https://reactnavigation.org/docs/getting-started
Stack Navigator
https://reactnavigation.org/docs/stack-navigator/#installation
Bottom Tabs
https://reactnavigation.org/docs/bottom-tab-navigator

Redux-toolkit
Introduction
https://redux-toolkit.js.org/introduction/getting-started
Typescript setup
https://redux-toolkit.js.org/tutorials/typescript


React Native Context Menu (not later used)
https://github.com/brnho/react-native-context-menu

#zegocloud #livestreamingsdk #streamingservice #flutterstreaming #reactnative

Тэги:

#live_streaming #live_stream #streaming_service #live_streaming_sdk #flutter_live_streaming #ZEGOCLOUD_Livestreaming_UIKit

Скачать видео