How can I make an interactive drawing app in React Native? - react-native

how can I easily create an app like this in React Native?
As you can see on the gif I need to draw rectangles on the grid. Are there any libraries or maybe even paid commercials solutions for creating apps with advanced drawing like this shown on the gif?

Have you seen this library? You might need to flicker something to meet your exact requirement
https://github.com/jgrancher/react-native-sketch
https://github.com/terrylinla/react-native-sketch-canvas

Related

React Native Is responsive?

First and most important: I am by no means a developer. We hired an agency to develop an APP for us, and i was given by a developed solution that i am not convinced if it is the best solution, So i would like to ask you guysfor advice.
Unfortunatelly i cannot put pictures nor links to code for the app, but i will do my best to explain myself:
The problems i encountered are mainly two:
All items appear to have fixed sizes applyed to them: When testing the app on different devices, the size of the elements is not responsive at all. In fact on small devices (Moto G5) There are elements that fall behind the bottom navigation bar making them unaccessible.
Lot of stuff fall below that said bottom navigation bar.
My question is the following:
Is react native responsive?
In web development there is a lot of flexibility when it comes to responsiveness with CSS and JS. Is React native any different? or there is a way to prepare the layout so it fits most of the common sizes without losing acces to interactions?
Hope i explained myself correctly. and again, sorry for not asking a technical specific question.
React Native is designed to be responsive, but it requires a different approach compared to web development. In web development, you can use CSS and JavaScript to make your website responsive, but in React Native, you use a different set of tools.
We have many ways to make the app responsive with the device's large screen and small screen.
Use the Dimensions API: React Native provides the Dimensions API, which allows you to get the dimensions of the screen at runtime. You can use this information to adjust the layout of your app based on the size of the screen.
Use third-party libraries ex: react-native-size-matters, react-native-responsive-screen, ...
Use Flexbox: React Native uses Flexbox for layout, just like web development. Flexbox is a powerful tool for creating responsive layouts that adapt to different screen sizes. You can use the flex property to adjust the size and position of elements on the screen.
In terms of your specific issue with elements falling behind the bottom navigation bar, it's likely that the layout is not taking the height of the navigation bar into account. You can use the Dimensions API to get the height of the navigation bar and adjust the layout accordingly.

can i make an autocliker app with Xamarin or React Native?

I want to make an autoclicker app that can also take screenshots and recognize the location of a specific image (of course it will run over another app). can i do it with either xamarin or react native? if yes i would really appreciate it if you suggest me some tutorials or code examples.

Is a "drag-multi-select" type of selection on multiple Views possible in React Native?

Summary:
Tried the Gesture Responder system here, but I can't seem to figure out how to select the element currently under the user's touch. After tons of experiementing, it seems that this is not possible. (?)
Where I'm stuck at: Many Views in a grid-style layout that should support drag-multi-select
What I want to achieve: Something similar to when2meet
Current using React Native with Expo

React Native funnel chart

Is there any React native package to create funnel chart like in this?
or how to implement this chart on our own in react-native?
When it comes to drawing lines, shapes, gradients, etc, you have about two decent options in the react-native space.
The first one is React Native Art, the second one is react-native-svg. There are some charting libraries available as well, but when you want full customisation and styling/design options, the best way probably is to stay as close to the drawing api's as possible.
The funnel-graph-js project you mention uses browser SVG to draw the funnel chart, so I guess you can probably copy and adjust some code to achieve a similar result using react-native-svg.

programmatical screen touch with react-native

My goal is to program a game assistant - app that runs on the background and does the following:
1) takes screenshot programmatically https://aboutreact.com/take-screenshot-programmatically/
2) analyzes some pixels of it
3) creates programmatical screen touches based on the screenshot
But I am not sure whether it is possible to use react native for creating screen touches. Any ideas? It appears to be possible in java, at least:
How to programmatically trigger the touch event in android?
Thank you!
It is possible to handle screen touches in react native using panResponder. You can more about it here:
https://facebook.github.io/react-native/docs/linking-libraries-ios
Also react-native have animated view that could be coupled by panResponder and I think it is applicable for you because you want to develop a game. You can read about react-native animations here:
https://facebook.github.io/react-native/docs/animations
Beside all of this if your game have many motions and is dependent to screen touches react-native maybe is not a good choice. Because react-native performance in such applications would be low. So I recommend be careful about the tech that you want to use.