React Native Nested/Thread Comments with line indicators, collapse views with Reanimated 2 and draw lines with react-native-svg

Overview
## React Native Nested Comments With Line Indicators

### Uses reanimated 2 to collapse comments via [`reanimated-collapsible-helpers`](https://github.com/Trancever/reanimated-collapsible-helpers), [`react-native-svg`](https://github.com/react-native-svg/react-native-svg) for the line drawing and FlatList. 

---
#### Notice 1:
Code and typings are rough and maybe ugly, for sure it can be improved. It's just an MVP to get it working. If you have suggestions or improvements feel free to Pull Request.

#### Notice 2:

`CollapsibleView` was inspired by [Eliav2/react-native-collapsible-view](https://github.com/Eliav2/react-native-collapsible-view)

#### Notice 3:

`reanimated-collabsiple-headers` is patched to support some extra props, changes are in patches folder

---
Supports 2 level of nesting like major social apps.

#### Battle tested with hundreds of comments with 0 lag.


The struggle to built it was real...

Demo:

https://user-images.githubusercontent.com/717975/160124970-0d256d37-5f8f-40b0-a89d-8e78394354de.mov

You might also like...
A simple command line notebook for programmers
A simple command line notebook for programmers

Dnote is a simple command line notebook for programmers. It keeps you focused by providing a way of effortlessly capturing and retrieving information

The game wordle made with ReactJS, without writing a line of CSS
The game wordle made with ReactJS, without writing a line of CSS

I made Wordle XD Hello everyone 👋 , I am glad to see you here I know it ain't much but this is the game wordle (popular in twitter recently!) I made

React Icons Viewer - allows you to search through the react-icons and it allows you to download the icon as png/svg

React Icons Viewer - allows you to search through the react-icons and it allows you to download the icon as png/svg

TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.
TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

Using this component, you can easily use any number of svg files in your project just with one component.

Dynamic-svg-icons-component Using this component, you can easily use any number of svg files in your project just with one component. Usage/Examples i

A calculator app built with React.js using React Hooks and Routers. The app contains 3 pages with basic styling. Calculator operations, as well as React components, were tested with Jest and React Testing Library.
A calculator app built with React.js using React Hooks and Routers. The app contains 3 pages with basic styling. Calculator operations, as well as React components, were tested with Jest and React Testing Library.

Raect Calculator A calculator app built with React.js using React Hooks and Routers. App contains 3 pages with basic styling. Calculator operations, a

Personal blog and portfolio with a basic comment system created with react, php and mysql, hosted on github pages and backend hosted on heroku and clever cloud for free!
Personal blog and portfolio with a basic comment system created with react, php and mysql, hosted on github pages and backend hosted on heroku and clever cloud for free!

Personal blog and portfolio with a basic comment system created with react, php and mysql, hosted on github pages and backend hosted on heroku and clever cloud for free!

👻 A SnapChat clone built with React, Redux and Typescript. Styled with SASS. Tested with Cypress, Jest and Enzyme. Linted with Eslint and formatted with Prettier!
👻 A SnapChat clone built with React, Redux and Typescript. Styled with SASS. Tested with Cypress, Jest and Enzyme. Linted with Eslint and formatted with Prettier!

👻 SnapChat Clone [LIVE APP] [Live App] • [Video Demo] ⚡️ Breakdown Built with React Only functional components using hooks Folder structure: Flat - n

This is a front-end of an application that will help organize and manage the bookstore. It is so fast, dynamic and responsive to actions and it is built with React & Redux.

Bookstore This is a front-end of an application that will help organize and manage bookstore. It is so fast, dynamic and responsive to actions and it

Owner
Efstathios Ntonas
Efstathios Ntonas
A centralized system for displaying and stylizing focus indicators anywhere on a webpage.

Focus Rings A centralized system for displaying and stylizing focus indicators anywhere on a webpage. Motivation When working on creating a complete k

Discord 1.1k Dec 29, 2022
A Collabration Web-App using Express, React and Socket.io where Mutiple People can Join a Private room and Chat, Draw Among themselves. This project was selected as one of the best project at Tinkerhub Hacknight

A Collabration Web-App using Express, React and Socket.io where Mutiple People can Join a Private room and Chat, Draw Among themselves. This project was selected as one of the best project at Tinkerhub Hacknight

NzM 13 Dec 15, 2022
Symbol Recognizer - a simple tool that allow draw one digit or caracter and send to an AI try to predict what you drew!

Symbol Recognizer It's a simple tool that allow draw one digit or caracter and send to an AI try to predict what you drew! See it working: https://rea

Lucas Del Puerto Garcia 4 Oct 11, 2022
Challenge of Interactive comments section from Frontend Mentor

InteractiveComment-Challenge Challenge of Interactive comments section from Frontend Mentor Base setup - language and tools Frontend - Next.js react r

Erika 4 Jul 11, 2022
Nested accordion Components for React.js

?? React headless accordion React-headless-accordion is a set of simple components ready to be inserted into your project. These unstyled components a

Lewhe Onesine 11 Dec 16, 2022
This is a Codespaces React template that leverages a Code Tour to guide beginners through writing their first lines of React.

Learn React with Codespaces ?? Welcome to your first Codespace running a popular UI framework called React! We've got everything fired up and running

GitHub 20 Feb 28, 2023
Implement Mini-React in 400 lines of code, a minimal model with asynchronous interruptible updates.

Mini-React Implement Mini-React in 400 lines of code, a minimal model with asynchronous interruptible updates. Demos A simple running screenshot: Intr

Zachary Lee 58 Jan 5, 2023
Signs for Trucks is an online store to buy pre-designed vinyls with custom lines of letters

Signs for Trucks is an online store to buy custom vinyl designs for trucks. This repo contains the fronted app developed using Next Js for a better React js experience

J.D. 7 Dec 5, 2022
A high performance image viewer in react-native used by react-native-reanimated.

react-native-reanimated-viewer A high performance image viewer in react-native used by react-native-reanimated. Install npm install react-native-reani

刘力瑞 28 Feb 28, 2023
Vercel 40k Jan 7, 2023