VGamezz19 / react-native-sketch-draw

🔵React Native (v0.53) 🎨Component for touch based drawing supporting iOS and Android.
MIT License
34 stars 9 forks source link

Width and Height not always honored #8

Open cristianoccazinsp opened 5 years ago

cristianoccazinsp commented 5 years ago

Environment

React Native Environment Info: System: OS: macOS 10.14.5 CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz Memory: 20.55 MB / 8.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 10.15.3 - /usr/local/bin/node npm: 6.9.0 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2 Android SDK: API Levels: 23, 25, 26, 27, 28 Build Tools: 25.0.2, 26.0.3, 27.0.3, 28.0.1, 28.0.3 System Images: android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64 IDEs: Android Studio: 3.1 AI-173.4819257 Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild npmPackages: react: 16.8.6 => 16.8.6 react-native: ^0.59.8 => 0.59.8 npmGlobalPackages: create-react-native-app: 2.0.2 react-native-cli: 2.0.1

On IOS, trying to render a canvas with a given width and height (less than screen size). I can't still figure out why sometimes it would render outside of the bounds I have given.

Good render:

Screen Shot 2019-05-23 at 00 47 33

Bad render, nothing changed, just reopened the modal that renders the canvas:

Screen Shot 2019-05-23 at 00 48 36

Happens totally randomly.

VGamezz19 commented 5 years ago

Hello! I really sorry for that, but this package is deprecated for the RN Version you are using. I don't have enough time to update, but up to you if you want to be a collaborator. Sorry!

cristianoccazinsp commented 5 years ago

Sorry to hear that! Such a good and simple library, couldn't find better alternatives. I will take a look, but if this is related to Objective-C, there's not much I can do.

cristianoccazinsp commented 5 years ago

I've gone through the native code and can't really find a reason for this to happen so randomly. Any thoughts?

cristianoccazinsp commented 5 years ago

The XIB file auto sizing seems to be the culprit. If it is set to not auto expand, it will render just fine, but it will obviously not take the size required from its parent view, so that wouldn't work.

Any specific reason to use that XIB file instead of a regular view like https://github.com/RepairShopr/react-native-signature-capture does?

cristianoccazinsp commented 5 years ago

After hours of testing, couldn't really find out why the XIB file view would expand beyond its parent component (and the whole screen). However, from the JavaScript side the issue was having the sketch component inside 2 View components (to achieve some styling). In order for the issue to not happen, I had to ensure that the sketch view component only has 1 parent View, and also had to render the sketch component with a delay if I'm using it within a modal component.