Connecting two buttons with a line in react native - react-native

I want to join two points with a line for a quiz I'm doing. I'm really new to react native and I don't really understand how to use the PanResponder (that's what I think I should use in order to get the result I expect).
I attach here the image of what I want to do as follows.
I appreciate any help!

Here is one way to do it, with a bit of creativity it can be automated
https://snack.expo.io/#rynek/hazardous-crackers

Related

How to make a family tree app using React Native?

For school, I have to make my first app with React Native. It's a family tree app; my teacher said it's the best choice to make that with all View-elements, even the lines between family members. But I think that won't ever be possible to calculate all distances perfectly.
Isn't there any other way to make this kind of app?
I think you are right and you need to take something like https://github.com/software-mansion/react-native-svg
With SVG you can draw shapes and arrows to connect your tree items.
For React exists a beautiful library called https://reactflow.dev. Unfortunately, it is a Web-only solution, but you can check how they render trees and repeat it in RN.
Also, read this article about storing tree data in JS https://medium.com/#iampika/javascript-trees-b8f3b4261c3a it should be helpful.

rendering different screen based on input by the user React Native

Hello fellow programmers, i wanted to ask how can i achieve different screen rendering based on input by the user. I have done it in one way but i want to know is there any better way to do?
Attached is the link to snack on expo. You can run it and see the code of how i have done it.
If there are better alternates, please let me know.
Thankyou.
please dont mark the question as duplicate before going throught it.
For better choice you can using react-navigation https://reactnavigation.org/docs/auth-flow/ This package work in Expo
The example you posted looks mostly like something I would use conditional rendering techniques for like the && syntax
See here for more guidance:
https://reactjs.org/docs/conditional-rendering.html
If your pages are dramatically different though (not just options flipping on and off) then I would recommend react navigation as giri commented.

React native Flat list optimization

I am trying to build a contact list in react native. I don't do all the possible optimization that are mentioned in the following mentioned places.
React native flat list optimization
8 ways to optimize React native FlatList performance
how-to-optimize-your-react-native-flatlist
How did I optimize my React Native FlatList?
flatlist-performance-tips
react-native-optimized-flatlist
I have tried all these one by one. by flat list is too much smooth now. but the only problem is that it takes some time to load initially. I want it like the contact book how has no loading. her ei ma attaching video link how it is behaving.
my own flat list source code
Video
** anyone who can help me to resolve this. I am tired of this and now this becomes a headache for me. help will be really appreciated. ia m trying on this for one month but invain.**
Take a look at the docs specifically about the attributes maxToRenderPerBatch,updateCellsBatchingPeriod and removeClippedSubviews. In your case, it's rendering 50 items per batch of render, the updateCellsBatchingPeriod maybe is making the list update itself longer than expected and maybe if you set the prop removeClippedSubviews to true the list is going to stay fluid as you want.

React native tree select component

I tried to find tree view select in react native, But, I couldn't find any. I also tried to generate my own, but it will take more time to develop and need to fix many things that I can't do right now.
Can anybody provide inputs on which library or component use for tree multi-select inputs?
Thank you in advance.

Running Text as Breaking News animation in React-Native?

I'm new in React-Native Animation.
I want to create Running Text like Running Text in Breaking News.
Appreciate for any help.
I don't know whether you want to create the animation on your own or just use existing components. If you just need the animation, try importing components like react-native-marquee or react-native-marquee-label.
If you want to understand how it's done and want to implement it yourself, just have a look at the source codes of those projects, e. g. this one.