demchenkoalex/react-native-module-template

A starter for the React Native library written in TypeScript, with linked example project and optional native code in Swift and Kotlin.

react-native-module-template's Issues

Error: Invalid Hook Call

Here is what I did

1. Clone project
2. Rename steps
3. yarn (root of react-native-module-template)
4. cd example
5. yarn && yarn android

Got this this Error "Invalid Hook Call".

Note:

1. I added nothing in either Example project or main module.
2. I tried it with & without "js-only" option. Got same result in both cases.
3. If I comment out Counter import error disappears.

Let me know if anyone faced this issue.

Thanks in advance

React Navigation error within the library

I am trying to create a StackNavigator instance inside the library index.tsx to test out the navigation capabilities. I am getting the below error. Has anyone got this working within a library?

Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager.

Dependencies
"dependencies": {
"@react-native-community/masked-view": "^0.1.11",
"@react-navigation/native": "^6.0.8",
"@react-navigation/native-stack": "^6.5.0",
"react-native-gesture-handler": "^2.3.2",
"react-native-reanimated": "^2.4.1",
"react-native-safe-area-context": "^4.1.3",
"react-native-screens": "^3.13.1"
}

Question: How to add custom styles into the library?

We are using Stripe in our library and they require to add a library in the gradle file and modify the styles file to use the Material components.

But we don't want our final users to do this work in their end.
We have done this in the library side, but it looks the app is not picking them up and it's showing the following error.

Is there something else we need to do/link in order to prevent this error?

Thanks!

Renaming module template causes module to return as null in JS (Android)

Steps to produce the problem:

1. git cloned repository
2. 'yarn' on root lib dir to install needed packages for module
3. run node rename.js
4. cd into example and run command 'yarn' to install any packages needed for example app
5. run yarn start to metro bundler
6. compile with 'react-native run-android'

These steps will run the module fine and will show module on console log but after doing the steps below it will not show as null in console log:
7) Modified in Android 'getName' function to return "CustomModule" instead of "RNModuleTemplateModule"
8) Change in index.js of module
From:export default NativeModules.RNModuleTemplateModule
To:export default NativeModules.CustomModule
9) Clean project with ./gradlew clean
10) Recompile again with "react-native run-android"

Result: module returning as null in console log

I even tried to change the module class name and file in Android but same problem occurs.

I want to add custom fonts to the module

I want to add custom fonts to the module, so how to?

How to use library that requires native setup?

Hi, I successfully setup the library it works great. but i wanted to use react-native-reanimated 2 in my own library. I added it into peer dependency. But I cannot setup its configuration for native side as its documentation tell us to do. So the reanimated code in the root src folder index.tsx gives me the error. Can someone help how to setup reanimated configuration to run in the library side code?

Adding new library made with this template to another project

Hi, I used your template and made a custom library (Thanks for your work!). The library itself also utilizes c code from a static library (.a file).

I am currently ONLY trying on iOS. All worked fine in the example app. However, now that I am trying to add this custom made library to my app using "npm install g+https:{PATH_URL}" to my remote. It adds fine and I can confirm that it indeed is in my node_module. When I try to build the app that uses this custom library, it is complaining "undefined symbol " to my c function that I am calling.

I checked your README for set up, as well as how example app is manually linked. I attempted 1. just use npm install to add the library, it returns error for undefined symbol. Then I tried to 2. manually link it as the example app README specified, it still returns the same error.

Again, it works perfect in the example app which was manually linked per your doc. But there seems to be issue linking when I try to use it in another app. I can provide more information if you'd like but I was just wondering if this is something that you have experience with and if you could please guide me in the right direction?

Thanks again

How to upgrade?

Assets folder is not included

I have the following folder structure:

src
   api
   assets
   components
   containers
   ...etc

All the folders and files are being included in the library except the assets and its files.
I made no changes to the default package.json, it is like this:

  "files": [
    "android",
    "ios",
    "lib",
    "myproject.podspec",
    "!android/build",
    "!.DS_Store",
    "!.gradle",
    "!.idea",
    "!build",
    "!gradle",
    "!*.iml",
    "!gradlew",
    "!gradlew.bat",
    "!local.properties",
    "!project.xcworkspace",
    "!xcshareddata",
    "!xcuserdata"
  ],

How can I add the missing assets folder?
Thanks!

Error building example app

I download the template, I ran npm install both in the project's root folder but also in the examplefolder and tried to build the example app right away, without changing anything, but the app doesn't run.

I keep getting the error below:

Error: Unable to resolve module `./index` from ``: 

None of these files exist:
  * index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
  * index/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)

Counter not showing

I cloned the repo, didn't rename or unlink native modules, basically using default settings and did yarn in both root and example directory. I changed main in root's package.json to src/index.tsx. Then I run yarn android in example folder but my app is just blank white screen. Nothing showing up in console either.

There is no Fash Refresh when editing App.tsx in example and index.tsx in root's src.

Did I miss a step?

Suggestion for Seeing Changes immediately

Hello!

regarding: https://github.com/demchenkoalex/react-native-module-template#how-to-see-my-changes-immediately-in-the-example

It seems like it works to have:

  "main": "lib/index.js",
  "react-native": "src/index.tsx",

(shamelessly stolen from react-navigation 😆)

How to publish to GitHub or private GitHub repo ?

Hello thanks for this got it working but there are cases where i want the package to be private and exist only on GitHub and token must be provided to install it, i am not sure how to do so here, thanks.

Error finding the headers

Hello.

I have git cloned your repo made the packages installation and opened the ios project in Xcode.
I am getting an error that the ReactBridgeFile was not found. Could you please tell me what I am doing wrong?
Greate appreciate your help.

Unable to resolve module ./index

I'm having trouble in testing the lib in example app.
Steps I made to build the project:
root folder: yarn
example folder: yarn
example folder: npx pod-install
example folder: yarn ios

This is the error shown in simulator:

<title>Error</title>

Error: Unable to resolve module ./index from path_to_project/Work/react-native-cookie-parser/.: 

None of these files exist:
  * index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
  * index/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
    at ModuleResolver.resolveDependency (path_to_project/Work/react-native-cookie-parser/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:107:15)
    at DependencyGraph.resolveDependency (path_to_project/Work/react-native-cookie-parser/node_modules/metro/src/node-haste/DependencyGraph.js:288:43)
    at path_to_project/Work/react-native-cookie-parser/node_modules/metro/src/lib/transformHelpers.js:129:24
    at Server._resolveRelativePath (path_to_project/Work/react-native-cookie-parser/node_modules/metro/src/Server.js:1072:12)
    at async Server.requestProcessor [as _processBundleRequest] (path_to_project/Work/react-native-cookie-parser/node_modules/metro/src/Server.js:428:37)
    at async Server._processRequest (path_to_project/Work/react-native-cookie-parser/node_modules/metro/src/Server.js:380:9)

RCTFatal
__28-[RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
main
start_sim
0x0

How to add custom fonts

Hello, I want to ask how to add custom fonts, I already create react-native.config.js and add this line

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./src/assets/fonts/'],
}

but when I run npx react-native link I got error

error Linking assets failed.
TypeError: Cannot read properties of null (reading 'files')

Is there any solution for this? Thanks in advance

How can i add placeholder images?

I want to use loading placeholder images for image cards.

Fresh setup yields Xcode 12.4 build error: "ld: library not found for -lRNModuleTemplateModule"

Fresh setup yields Xcode 12.4 build error.

After cloning the repo and performing the js-only setup, trying to clean and build the /example app in Xcode 12.4 yields the following build error. Here is the full transcript. Any idea how to fix?

Showing All Errors Only

Build target example of project example with configuration Debug

Ld /Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/example.app/example normal (in target 'example' from project 'example')
    cd /Users/dougsheridan/Projects/bsw/bsw-react-native-ui/example/ios
    /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/clang -target x86_64-apple-ios10.0-simulator -isysroot /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator14.4.sdk -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/CocoaAsyncSocket -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/DoubleConversion -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/FBReactNativeSpec -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/Flipper -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/Flipper-DoubleConversion -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/Flipper-Folly -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/Flipper-Glog -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/Flipper-PeerTalk -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/Flipper-RSocket -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/FlipperKit -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/RCT-Folly -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/RCTTypeSafety -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/React-Core -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/React-CoreModules -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/React-RCTAnimation -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/React-RCTBlob -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/React-RCTImage -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/React-RCTLinking -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/React-RCTNetwork -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/React-RCTSettings -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/React-RCTText -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/React-RCTVibration -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/React-cxxreact -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/React-jsi -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/React-jsiexecutor -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/React-jsinspector -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/React-perflogger -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/ReactCommon -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/Yoga -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/YogaKit -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/glog -L/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/libevent -F/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator -F/Users/dougsheridan/Projects/bsw/bsw-react-native-ui/example/ios/Pods/OpenSSL-Universal/Frameworks -F/Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/XCFrameworkIntermediates/OpenSSL -filelist /Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Intermediates.noindex/example.build/Debug-iphonesimulator/example.build/Objects-normal/x86_64/example.LinkFileList -Xlinker -rpath -Xlinker /usr/lib/swift -Xlinker -rpath -Xlinker /usr/lib/swift -Xlinker -rpath -Xlinker @executable_path/Frameworks -dead_strip -Xlinker -object_path_lto -Xlinker /Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Intermediates.noindex/example.build/Debug-iphonesimulator/example.build/Objects-normal/x86_64/example_lto.o -Xlinker -export_dynamic -Xlinker -no_deduplicate -Xlinker -objc_abi_version -Xlinker 2 -fobjc-link-runtime -L/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/lib/swift/iphonesimulator -L/usr/lib/swift -Xlinker -add_ast_path -Xlinker /Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Intermediates.noindex/example.build/Debug-iphonesimulator/example.build/Objects-normal/x86_64/example.swiftmodule -ObjC -lCocoaAsyncSocket -lDoubleConversion -lFBReactNativeSpec -lFlipper -lFlipper-DoubleConversion -lFlipper-Folly -lFlipper-Glog -lFlipper-PeerTalk -lFlipper-RSocket -lFlipperKit -lRCT-Folly -lRCTTypeSafety -lReact-Core -lReact-CoreModules -lReact-RCTAnimation -lReact-RCTBlob -lReact-RCTImage -lReact-RCTLinking -lReact-RCTNetwork -lReact-RCTSettings -lReact-RCTText -lReact-RCTVibration -lReact-cxxreact -lReact-jsi -lReact-jsiexecutor -lReact-jsinspector -lReact-perflogger -lReactCommon -lYoga -lYogaKit -lglog -llibevent -lstdc++ -framework AudioToolbox -framework CFNetwork -framework JavaScriptCore -framework MobileCoreServices -framework OpenSSL -framework Security -framework UIKit -ObjC -lc++ -Xlinker -sectcreate -Xlinker __TEXT -Xlinker __entitlements -Xlinker /Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Intermediates.noindex/example.build/Debug-iphonesimulator/example.build/example.app-Simulated.xcent -lRNModuleTemplateModule -lPods-example -Xlinker -no_adhoc_codesign -Xlinker -dependency_info -Xlinker /Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Intermediates.noindex/example.build/Debug-iphonesimulator/example.build/Objects-normal/x86_64/example_dependency_info.dat -o /Users/dougsheridan/Library/Developer/Xcode/DerivedData/example-dfkvhbnkjkksbmfiqgplxpttbdck/Build/Products/Debug-iphonesimulator/example.app/example

ld: library not found for -lRNModuleTemplateModule
clang: error: linker command failed with exit code 1 (use -v to see invocation)



Build failed    4/19/21, 8:50 AM    74.1 seconds

[!] No podspec found for `@package` in `../node_modules/@package/needed_package`

Hello everything was working well between multiple created packages but after installing it into main existing project and i tried doing pod install in ios directory, i got that error even though there is needed_package.podspec inside node_modules/@package/needed_package

Note: all this packages i am creating are from private organization repositories.
Need help in going further, thanks.

How to upgrade?

Hello!

I created a module using this script, at that time it was pointing to react-native: 0.66.3, and iOS 11. I want to update it so we can use iOS 13 and a newer ReactNative version. How can I accomplish this?

Thank you in advanced!