How can I cut an image into several pieces ? (REACT NATIVE) - react-native

I wanna make a puzzle and I need to cut an image. I use expo workflow. Is there any library for cut or divide an image?

You can have a look at these packages
https://github.com/guhungry/react-native-photo-manipulator/blob/master/README.md#crop-and-resize
https://github.com/callstack/react-native-image-editor
https://www.npmjs.com/package/#mtourj/react-native-image-crop

Related

Gradient slider in React Native?

Is it possible to implement slider with static gradient track in React Native using any 3rd party library or what-soever?
Illustrative image from Google:
Right now I'm using sldier from #react-native-community/slider, but it doesn't seem to support gradient slider track? I can customize minimumTrackTintColor and maximumTrackTintColor, but I would like to have static gradient track independent of the indicator position. I have looked into other 3rd party slider libraries as well, but encountered the same problem.
So, is there any way in any library to achieve this in React Native?
I dont think any package upfront gives this functionality, but you can always use linear-gradient. this library, make a view with. gradient like that, and on top of that, by using position:'relative' make a cursor and slide it by using rn-draggable . You will need to work out on that, but you can create a new functionality , and maybe publish it so that it can be used by others in future.
Hopeit helps.feel free for doubts
Inspired from what #Gaurav_Roy answered above, in the end, I achieved what I wanted with react-native-gesture-responder . I positioned my custom gradient slider track and slider dot as images and used createResponder from the library to capture user interactions with the slider dot. Then calculated the distance between dot position and track edges to get the value.

Image size changing from Expo to App Store

When running my application in Expo all images look fine and lovely, it's just when I deploy to the app store suddenly my images are huge.
I made sure that I follow Expo's standard on image spec as written here;
https://docs.expo.io/versions/latest/react-native/images/
Even weirder is the images look fine on iPhone X but the size is off on iPhone 7 (but on that same iPhone 7 in Expo everything looks ok). So just wondering if anyone has experienced any issues going from Expo to App Store with images and if they did how did they solve them?
Note: I am yet to deploy to Google play so haven't been able to see the effects there yet.
All input greatly appreciated
Just try to use WIDTH and HEIGHT from Dimensions
And then set width to your image by multiplication of WIDTH on some coefficient.

Does it matter if the app has always the highest density images

Im building multiple apps in React-native and I know that there its possible to put in multiple images that have a different density. React-native selects them automatically in the tag. I know for native Android and iOS they do the same.
I get it if you want to have some changes for lower density devices. Maybe a other design of a icon or something like that. But what if you have the 3x and then resize it to a 2x and 1x. Then you have the same image but with a smaller file.
Now my question is does it really matter to add the 2x and 1x if I already have the 3x? I don't see any performance of quality issues with that.
I guess (but not sure) it can give a RAM issues with large amount of images shows simultaneously.
Plus a famous android developer says that Android has an issue with downscale big images.

Splash Screen for Android in React Native

I've followed this.
https://android.jlelse.eu/change-splash-screen-in-react-native-android-app-d3f99ac1ebd1#.5k7trorbf
But this is just creating a specific size for all dimensions. What should i do for other dimensions? I've already generated all the dimensions images and have put them in drawable-xxxx folders. But still specific dimension for all dimensions.
I've got success by using <nine-patch> instead of <layer-list> and the images with .9. We've to generate splash from online generators which generate images to be compatible to nine patch. This will stretch the image according to dimensions.

Generate QR Code with a bigger background view

I want to generate some QR Code with a bigger background view, does somebody know is there an open source project can directly generate this image or can add background view to my completed QR code. Thanks a lot!
Libraries generate a matrix, not an image. Some do make JPEGs, but I don't think you can specifiy the size of the background.
The border you're talking about is the quietzone, it should be 4 modules wide. Denso Wave used to indicate that in its website but I can't find much more that this: https://www.denso-wave.com/en/adcd/QRdeCODE/product.html. Yet, the specifications are clear about it.
You could use a library such as ZXing or QrCode.net and make the image yourself.
You can find many more information on this QR Code White Book.