TypeError: null is not an object (evaluating 'RNCColorPicker.showColorPicker')

[rajan-keypress]

I get this error.. I also try react-native link to link this library , but still not work I get This error

[yasir-lcs]

same issue

[syropian]

+1

[BurningFenix]

Guys, anybody found a solution? I love this library but it doesn't work on Android, running into this exact same problem

[yasir-lcs]

same issue

Hello guys. I have resolved this issue by writing this code. you can just copy & paste my code

ColorPicker.swift (in xcode)

import Foundation
import UIKit
import SwiftUI
import React

@objc(ColorPicker)
@available(iOS 14.0, *)
class ColorPicker : UIViewController, UIColorPickerViewControllerDelegate {
  @objc static func requiresMainQueueSetup() -> Bool {
        return false
  }

  var supportsAlpha:Bool = false
  var initialColor:UIColor = UIColor(ciColor: .black)
  var callback: RCTResponseSenderBlock!

  // Reference to use main thread
  @objc func open(_ options: NSDictionary, callback:@escaping RCTResponseSenderBlock) -> Void {
    DispatchQueue.main.async {
      self._open(options: options, callback: callback)
    }
  }

  func _open(options: NSDictionary, callback: @escaping RCTResponseSenderBlock) -> Void {
    self.callback = callback

    let picker = UIColorPickerViewController()
    picker.delegate = self
    picker.supportsAlpha = true
    picker.selectedColor = self.initialColor
    if let root = RCTPresentedViewController() {
        root.present(picker, animated: true, completion: nil)
    }
  }

  func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
    let colorString = hexStringFromColor(color: viewController.selectedColor)
    self.initialColor = viewController.selectedColor
    self.callback([colorString])
  }

  func hexStringFromColor(color: UIColor) -> String {
          let rgba = color.cgColor.components
          let r: CGFloat = rgba?[0] ?? 0.0
          let g: CGFloat = rgba?[1] ?? 0.0
          let b: CGFloat = rgba?[2] ?? 0.0
          let a: CGFloat = rgba?[3] ?? 0.0

          let hexString = String(format: "#%02lX%02lX%02lX%02lX", lroundf(Float(r * 255)), lroundf(Float(g * 255)), lroundf(Float(b * 255)), lroundf(Float(a * 255)))
          return hexString
       }
}

RCTColorPicker.m (in xcode)

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(ColorPicker, NSObject)
RCT_EXTERN_METHOD(open:(NSDictionary *)options callback:(RCTResponseSenderBlock*)callback)
@end

Make a file in React Native for NativeModule NativeColorPicker.js

import { NativeModules } from 'react-native';
const { ColorPicker } = NativeModules;
export default ColorPicker;

Usage in React Native

import NativeColorPicker from './NativeColorPicker'
NativeColorPicker.open({
    initialColor: 'black' //you can remove this param
 }, selectedColor => {
     console.log(selectedColor)
})

It is perfectly working. Happy Coding !! :)

[Yassdrk]

import Foundation import UIKit import SwiftUI import React

@objc(ColorPicker) @available(iOS 14.0, *) class ColorPicker : UIViewController, UIColorPickerViewControllerDelegate { @objc static func requiresMainQueueSetup() -> Bool { return false }

var supportsAlpha:Bool = false var initialColor:UIColor = UIColor(ciColor: .black) var callback: RCTResponseSenderBlock!

// Reference to use main thread @objc func open(_ options: NSDictionary, callback:@escaping RCTResponseSenderBlock) -> Void { DispatchQueue.main.async { self._open(options: options, callback: callback) } }

func _open(options: NSDictionary, callback: @escaping RCTResponseSenderBlock) -> Void { self.callback = callback

let picker = UIColorPickerViewController()
picker.delegate = self
picker.supportsAlpha = true
picker.selectedColor = self.initialColor
if let root = RCTPresentedViewController() {
    root.present(picker, animated: true, completion: nil)
}

}

func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) { let colorString = hexStringFromColor(color: viewController.selectedColor) self.initialColor = viewController.selectedColor self.callback([colorString]) }

func hexStringFromColor(color: UIColor) -> String { let rgba = color.cgColor.components let r: CGFloat = rgba?[0] ?? 0.0 let g: CGFloat = rgba?[1] ?? 0.0 let b: CGFloat = rgba?[2] ?? 0.0 let a: CGFloat = rgba?[3] ?? 0.0

      let hexString = String(format: "#%02lX%02lX%02lX%02lX", lroundf(Float(r * 255)), lroundf(Float(g * 255)), lroundf(Float(b * 255)), lroundf(Float(a * 255)))
      return hexString
   }

}

Hey,

It doesn't work :( I dont find the file : RCTColorPicker.m

[yasir-lcs]

import Foundation import UIKit import SwiftUI import React @objc(ColorPicker) @available(iOS 14.0, *) class ColorPicker : UIViewController, UIColorPickerViewControllerDelegate { @objc static func requiresMainQueueSetup() -> Bool { return false } var supportsAlpha:Bool = false var initialColor:UIColor = UIColor(ciColor: .black) var callback: RCTResponseSenderBlock! // Reference to use main thread @objc func open(_ options: NSDictionary, callback:@escaping RCTResponseSenderBlock) -> Void { DispatchQueue.main.async { self._open(options: options, callback: callback) } } func _open(options: NSDictionary, callback: @escaping RCTResponseSenderBlock) -> Void { self.callback = callback

let picker = UIColorPickerViewController()
picker.delegate = self
picker.supportsAlpha = true
picker.selectedColor = self.initialColor
if let root = RCTPresentedViewController() {
    root.present(picker, animated: true, completion: nil)
}

} func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) { let colorString = hexStringFromColor(color: viewController.selectedColor) self.initialColor = viewController.selectedColor self.callback([colorString]) } func hexStringFromColor(color: UIColor) -> String { let rgba = color.cgColor.components let r: CGFloat = rgba?[0] ?? 0.0 let g: CGFloat = rgba?[1] ?? 0.0 let b: CGFloat = rgba?[2] ?? 0.0 let a: CGFloat = rgba?[3] ?? 0.0

      let hexString = String(format: "#%02lX%02lX%02lX%02lX", lroundf(Float(r * 255)), lroundf(Float(g * 255)), lroundf(Float(b * 255)), lroundf(Float(a * 255)))
      return hexString
   }

}

Hey,

It doesn't work :( I dont find the file : RCTColorPicker.m

Create a file named RCTColorPicker.m and Paste the below code in it.

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(ColorPicker, NSObject)
RCT_EXTERN_METHOD(open:(RCTResponseSenderBlock*)callback)
@end

[Yassdrk]

import <Foundation/Foundation.h>

import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(ColorPicker, NSObject) RCT_EXTERN_METHOD(open:(RCTResponseSenderBlock*)callback) @end

Thank for your fast answer. But still the same error TypeError: null is not an object (evaluating '_NativeColorPicker.default.open') Maybe i need to rebuild something ? honestly it's the first time i edit a package ahah

[yasir-lcs]

import <Foundation/Foundation.h>

import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(ColorPicker, NSObject) RCT_EXTERN_METHOD(open:(RCTResponseSenderBlock*)callback) @EnD

Thank for your fast answer. But still the same error TypeError: null is not an object (evaluating '_NativeColorPicker.default.open') Maybe i need to rebuild something ? honestly it's the first time i edit a package ahah

Oh, did you follow the complete instructions of my previous thread. I have mentioned all the code of Xcode and implementation in react native as well.

[Yassdrk]

(evaluating '_NativeColorPicker.default.open')

Yes, but i'm using Expo, maybe it's the problem ?

[yasir-lcs]

I think we cannot add the native modules in the expo.

[david98]

Hi everyone! I really wanted to try this library but could not make it work so I took a look at the Expo Modules API and came up with this: https://github.com/one-am-it/expo-ios-color-picker

It should achieve the same purpose, but it's specifically made for Expo.

It's kind of our first attempt at a native module, so any contribution is welcome :)