Giter Site home page Giter Site logo

callstack / react-native-builder-bob Goto Github PK

View Code? Open in Web Editor NEW
2.6K 18.0 176.0 6.08 MB

๐Ÿ‘ทโ€โ™‚๏ธ Simple set of CLIs to scaffold and build React Native libraries for different targets

Home Page: https://callstack.github.io/react-native-builder-bob/

JavaScript 96.88% TypeScript 1.91% Ruby 0.06% Kotlin 0.35% Java 0.45% Objective-C 0.09% CMake 0.01% C++ 0.01% Objective-C++ 0.19% C 0.01% Swift 0.04% Batchfile 0.01%
react-native template hacktoberfest

react-native-builder-bob's Introduction

Bob

create-react-native-library react-native-builder-bob MIT License

๐Ÿ‘ทโ€โ™‚๏ธ Set of CLIs to scaffold and build React Native libraries for different targets.

Documentation

Documentation is available at https://callstack.github.io/react-native-builder-bob/.

Development workflow

This project uses a monorepo using yarn. To setup the project, run yarn in the root directory to install the required dependencies.

yarn

While developing, you can run watch mode to automatically rebuild the changes:

yarn watch

To test the CLI locally, you can point to the appropriate executable:

../bob/packages/create-react-native-library/bin/create-react-native-library

Before sending a pull request, make sure your code passes TypeScript and ESLint. Run the following to verify:

yarn typecheck
yarn lint

To fix formatting errors, run the following:

yarn lint --fix

The documentation for the project is under docs directory. To run the documentation locally, run the following:

yarn docs dev

Acknowledgments

Thanks to the authors of these libraries for inspiration:

Alternatives

There are other similar tools to scaffold React Native libraries. The difference is that the generated project with create-react-native-library is very opinionated and configured with additional tools.

LICENSE

MIT

react-native-builder-bob's People

Contributors

atlj avatar dcangulo avatar dependabot[bot] avatar dsonet avatar dulmandakh avatar dylancom avatar friederbluemle avatar gorhom avatar jamesgeorge007 avatar krizzu avatar kudo avatar kyawthura-gg avatar mateosilguero avatar mateww avatar matt-oakes avatar merrywhether avatar mrousavy avatar napcoder avatar olive007 avatar oscb avatar osdnk avatar patys avatar radko93 avatar safaiyeh avatar samijaber avatar satya164 avatar sunbreak avatar szymonrybczak avatar trozee avatar turker0 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-native-builder-bob's Issues

How to disregard 'web' modules in expo

react-router-dom for web, react-navigation for non web

Hi all,

I am using this awesome lib to create my next gen lib :)
Currently I have tried to selectively import only based on Platform.OS but it doesn't seem to work. How can I assure expo that my library doesn't need react-router-dom instead of installing it in my expo project to make my RN component work?

export const ComponentToBeConsumed = Platform.OS === 'web' ? ComponentToBeConsumedWeb : ComponentToBeConsumedRN;

ComponentToBeConsumedWeb imports react-router-dom while ComponentToBeConsumedRB doesn't.

Thank you for this amazing lib =)

Change the default ESLint config for common template to include "root": true

Feature request

If this flag is not set, ESLint will automatically look for eslint config files in the directory of the file to be linted, and in successive parent directories all the way up to the root directory of the filesystem (reference). So if using your new package e.g. as a git submodule, the package's config can conflict with the parent project's config, causing ESLint to fail.

Why it is needed

The above mentioned issue happened when running yarn lint for my new package, that was included as a git submodule for my main project. I can't think of any primary use cases where you would want the eslint config of this package to search for configs in parent directories, at least it shouldn't be the default behaviour IMO.

Possible implementation

Add the "root": true flag to the default ESLint config in the package.json for the common template.

Code sample

anfriis@3a91f5f

Adding an external dependency on the module - Android

Hi
I want my react native module to import a SDK as a dependency.
In iOS it's already working, but i have little experience with android.

Im my react native module buidle.gradle i added the following repo inside the repositories object.

maven {
    url "s3://repo.pagesuite.com/android/"
    credentials(AwsCredentials) {
      accessKey = ""
      secretKey = ""
    }
 }

On the same file i added the following import to the dependencies object.

implementation "repo.android.pagesuite.com:psReaderSdkForClients:0.48"

After this, i compile the project and i see the dependencies on the external libraries and i actually can use the SDK.

The problem is, when i compile the example project it throws a dependency error:

Could not find repo.android.pagesuite.com:psReaderSdkForClients:0.48.

Searched in the following locations:
  - file:/Users/user/.m2/repository/repo/android/pagesuite/com/psReaderSdkForClients/0.48/psReaderSdkForClients-0.48.pom
  - file:/Users/user/Documents/PageSuite/project/react-native-pagesuite/example/node_modules/react-native/android/repo/android/pagesuite/com/psReaderSdkForClients/0.48/psReaderSdkForClients-0.48.pom
  - file:/Users/user/Documents/PageSuite/project/react-native-pagesuite/example/node_modules/jsc-android/dist/repo/android/pagesuite/com/psReaderSdkForClients/0.48/psReaderSdkForClients-0.48.pom
  - https://dl.google.com/dl/android/maven2/repo/android/pagesuite/com/psReaderSdkForClients/0.48/psReaderSdkForClients-0.48.pom
  - https://jcenter.bintray.com/repo/android/pagesuite/com/psReaderSdkForClients/0.48/psReaderSdkForClients-0.48.pom
  - https://www.jitpack.io/repo/android/pagesuite/com/psReaderSdkForClients/0.48/psReaderSdkForClients-0.48.pom
Required by:
    project :app > project :reactnativepagesuite

The dependency appears on the external libraries too. What am i missing?

Quick question: eslint + bob

Quick question: eslint + bob

First off, I love this library; it's saved me countless babel headaches. I have one quick question:

Is there a common eslint file / config to use with bob?

When I try to npm publish, I often get TypeScript errors for an unused import, etc. It would be useful to have these same errors pop up in my linter as I develop, but for some reason they don't. I'm not sure if that's a problem on my end or not, but these are my linter / VSCode details in case that helps:

.estlintrc

{
	"extends": ["rallycoding", "plugin:@typescript-eslint/recommended"],
	"parser": "@typescript-eslint/parser",
	"plugins": ["import", "@typescript-eslint"],
	"rules": {
		"arrow-body-style": 0,
		"react/require-extension": "off",
		"semi": "off",
		"@typescript-eslint/rule-name": "error"
	},
	"env": {
		"browser": true
	}
}

I'm using ESLint for VSCode. Thank you!

Is there support for import aliases?

Question

Is there support for import aliases?

For example in some files I have

import {SomeEnum} from "@/enums";
// ...

My ts config supports aliases, however bob doesn't resolve these in the final built version of my library.
I tried adding a babel config, this didn't work either. Is this currently supported?

Android build fails

Bug report

I chose Javascript Modules for native library

yarn example android
yarn run v1.22.4
$ yarn --cwd example android
$ react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 958 file(s) to forward-jetify. Using 12 workers...
info JS server already running.
info Installing the app...

> Task :app:compileDebugJavaWithJavac FAILED

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.0.1/userguide/command_line_interface.html#sec:command_line_warnings
14 actionable tasks: 14 executed
/Users/rahshett/localshiva/react-native-toqoo/example/android/app/src/main/java/com/example/noqooreactnativetoqoo/MainApplication.java:14: error: package com.noqooreactnativetoqoo does not exist
import com.noqooreactnativetoqoo.ReactNativeToqooPackage;
                                ^
/Users/rahshett/localshiva/react-native-toqoo/example/android/app/src/main/java/com/example/noqooreactnativetoqoo/MainApplication.java:31: error: cannot find symbol
          packages.add(new ReactNativeToqooPackage());
                           ^
  symbol: class ReactNativeToqooPackage
Note: /Users/rahshett/localshiva/react-native-toqoo/example/android/app/src/debug/java/com/example/noqooreactnativetoqoo/ReactNativeFlipper.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
2 errors

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 13s

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081
/Users/rahshett/localshiva/react-native-toqoo/example/android/app/src/main/java/com/example/noqooreactnativetoqoo/MainApplication.java:14: error: package com.noqooreactnativetoqoo does not exist
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Summary

After creating a new project and bootstrapping, I cannot install the android app on my phone.

Environment info

react-native info output:

System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 306.37 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.18.1 - ~/.nvm/versions/node/v12.18.1/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v12.18.1/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v12.18.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/lib/ruby/gems/2.5.0/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 26, 27, 28
      Build Tools: 28.0.3, 29.0.2
      System Images: android-26 | Intel x86 Atom_64, android-26 | Google APIs Intel x86 Atom, android-27 | Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6514223
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_191 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0
    react-native: 0.62.2 => 0.62.2
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

  1. npx @react-native-community/bob create react-native-noqoo
  2. I name the package: @noqoo/react-native-noqoo as I wanted to add my organization name
  3. I answer all the questions
  4. yarn bootstrap
  5. yarn example ios. Works perfectly fine on iOS
  6. yarn example android. The build crashes and I get the error I have added above

Describe what you expected to happen

I expected the app to install on my Android emulator. I can see that a package is missing from the errors, but since I am not a native android developer, I am unsure how to fix it.

Even if the issue is fixed, not sure how can I fix it in the existing project which has been published on npm.

Add template for React Native Windows plugins

Feature request

It would be nice to have a plugin template for React Native Windows. Perhaps someone from Microsoft (@stmoy?) might be able to help out?

Why it is needed

Adding a template for RN Windows will help potential contributors follow a "best-practice" way of adding support for Windows to their desired plugins

Possible implementation

Windows projects use Visual Studio solution files (*.sln). The following repositories have Windows support:

Code sample

Adding Packages to Library and using them in Base Application

Question :

We are currently using the mapbox-gl, for a component. We are customizing the component as required and export our component in index. For the example App for make it work, we have added the mapbox-gl package in example project too. Is it required to add the mapbox-gl package in the Application where we install our library ,since the mapbox-gl is mentioned in the library dependencies ? This should be automatically installed while we installed the library right ?

Better name for iOS example

image
How about calling it "ProjectNameExample.xcworkplace"?
image
I can imagine having two "example" is recent projects :c

.babelrc config files should be merged with top-level config

Bug report

Summary

.babelrc files are not merged with compiled configurations. Technically, there is no such thing as a top-level config, since the configuration is generated by the compile function. But to match closely the semantics of babel v7, I believe it would be best to merge the configuration. See File Relative Configuration:

File-relative configurations are also merged over top of project-wide config values, making them potentially useful for specific overrides.

Note: I can provide a reproduction if required.

file names error by creating module on Windows

Bug report

Summary

I'm using Windows to create a native module but some files have incorrect names.

Environment info

react-native info output:

  System:
    OS: Windows 10 10.0.18363
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
    Memory: 6.62 GB / 11.88 GB
  Binaries:
    Node: 12.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files\nodejs\yarn.CMD
    npm: 6.12.0 - C:\Program Files\nodejs\npm.CMD
  SDKs:
    Android SDK:
      API Levels: 23, 27, 28, 29
      Build Tools: 25.0.0, 25.0.1, 27.0.3, 28.0.3, 29.0.2
      System Images: android-R | Google Play Intel x86 Atom
  IDEs:
    Android Studio: Version  4.0.0.0 AI-193.6911.18.40.6514223
  npmPackages:
    react: ~16.9.0 => 16.9.0
    react-native: ~0.61.5 => 0.61.5

Library version: 0.14.5

Steps to reproduce

  1. npx @react-native-community/bob create rn-test-module
  2. cd rn-test-module
  3. yarn bootstrap

Describe what you expected to happen:

  1. Create the project
  2. All the name of files matching with library name

Reproducible sample code

image

`yarn bootstrap` fails on `yarn --cwd example` on new project

Bug report

Summary

On a brand-new project, following the instructions from theReact Native docs, the yarn bootstrap command fails.

Environment info

react-native info output:

react-native info
info Fetching system and libraries information...
System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Memory: 761.96 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.12.0 - ~/.nodebrew/current/bin/node
    Yarn: 1.22.10 - ~/.nodebrew/current/bin/yarn
    npm: 6.14.8 - ~/.nodebrew/current/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.0, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0
    Android SDK:
      API Levels: 23, 25, 26, 28
      Build Tools: 22.0.1, 23.0.1, 23.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 28.0.3, 29.0.2
      System Images: android-23 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-26 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom
      Android NDK: 20.0.5594570
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 12.0.1/12A7300 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_262 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: 0.63.3 => 0.63.3
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 0.16.2

Steps to reproduce

  1. npx @react-native-community/bob create react-native-awesome-module (using all defaults, adding a description, choosing Kotlin & Objective-C)
  2. cd react-native-awesome-module/
  3. yarn bootstrap
  4. This error appears:
$ yarn bootstrap
yarn run v1.22.10
$ yarn example && yarn && yarn pods
$ yarn --cwd example
error An unexpected error occurred: "Cannot create property 'email' on string '{\"username\":\"dahjelle\",\"email\":\"REDACTED\"}'".
info If you think this is a bug, please open a bug report with the information provided in "/Users/dahjelle/Downloads/mobile-test/react-native-awesome-module/example/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Describe what you expected to happen:

  1. No error.

Reproducible sample code

See steps above.


Is there something I'm obviously doing wrong?

Example slug broken inside example app in app.json

Bug report

  • I'm using the latest version of Bob

Hi!

This project is awesome! One thing I've noticed is that when generating a new project name like : @draftbit/modules the example app slug is also: @draftbit/modules which throws an error when running yarn start.

I'm not sure if this is just a me problem, but perhaps its worth stripping the @ and / in slug for generating app.json

Steps to reproduce:

  • generate a new project and call it @draftbit/whatever or any namespaced module
  • cd example && yarn && yarn start

Expectation

No error message

Thank you

โœ– Errors found when building definition files. error TS5023: Unknown compiler option 'emitdeclarationonly'.

> bob build

โ„น Building target commonjs
โ„น Cleaning up previous build
โ„น Compiling 7 files in src with babel
โœ“ Wrote files to lib/commonjs
โ„น Building target module
โ„น Cleaning up previous build
โ„น Compiling 7 files in src with babel
โœ“ Wrote files to lib/module
โ„น Building target typescript
โ„น Cleaning up previous build
โ„น Generating type definitions with tsc
โœ– Errors found when building definition files.
error TS5023: Unknown compiler option 'emitdeclarationonly'.

bob build

build files for publishing

Options:
  --help     Show help                                                 [boolean]
  --version  Show version number                                       [boolean]

Error: Failed to build definition files.
    at build (/Users/gaodeng/Documents/work/moonfmlib/node_modules/@react-native-community/bob/lib/targets/typescript.js:46:11)
    at <anonymous>
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] prepare: `bob build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] prepare script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/gaodeng/.npm/_logs/2019-04-20T00_22_55_222Z-debug.log

Is it possible to have the cli watch for files changes and rebuild?

Question

Is it possible to create a configuration that allows bob to run the $ bob build when the src files change?

I know a lot of cli's have a watch command specifically but it doesn't seem that bob has one.

This would be super helpful because I'm running bob with yarn workspaces and it would allow for the package to rebuild without me manually having to re-run the prepare script whenever a change is saved.

React/RCTViewManager.h file not found

Question

The iOS project doesn't have any references to React Native. When I try to build it, I get the following error:

'React/RCTBridgeModule.h' file not found

How can I build the iOS project (note the library, not the example)?
It becomes really difficult to code on it, without being able to build it in Xcode.

Error TS2403:

My builds just recently started failling, and from what I can see its after React-Native-Image-Picker calls bob build.. Curious if anyone has seen this issue or has any suggestions..

npm ERR! prepareGitDep > [email protected] prepare /Users/andrewroyce/.npm/_cacache/tmp/git-clone-5c2ee5f6
npm ERR! prepareGitDep > bob build
npm ERR! prepareGitDep 
npm ERR! prepareGitDep โ„น Building target commonjs
npm ERR! prepareGitDep โ„น Cleaning up previous build at lib/commonjs
npm ERR! prepareGitDep โ„น Compiling 4 files in src with babel
npm ERR! prepareGitDep โœ“ Wrote files to lib/commonjs
npm ERR! prepareGitDep โ„น Building target module
npm ERR! prepareGitDep โ„น Cleaning up previous build at lib/module
npm ERR! prepareGitDep โ„น Compiling 4 files in src with babel
npm ERR! prepareGitDep โœ“ Wrote files to lib/module
npm ERR! prepareGitDep โ„น Building target typescript
npm ERR! prepareGitDep โ„น Cleaning up previous build at lib/typescript
npm ERR! prepareGitDep โ„น Generating type definitions with tsc
npm ERR! prepareGitDep โœ– Errors found when building definition files:
npm ERR! prepareGitDep node_modules/@types/react-native/index.d.ts:9391:9 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'require' must be of type 'Require', but here has type 'NodeRequire'.
npm ERR! prepareGitDep 
npm ERR! prepareGitDep 9391     var require: NodeRequire;
npm ERR! prepareGitDep              ~~~~~~~
npm ERR! prepareGitDep 
npm ERR! prepareGitDep   node_modules/@types/node/globals.d.ts:167:13
npm ERR! prepareGitDep     167 declare var require: NodeJS.Require;
npm ERR! prepareGitDep                     ~~~~~~~
npm ERR! prepareGitDep     'require' was also declared here.
npm ERR! prepareGitDep 
npm ERR! prepareGitDep 
npm ERR! prepareGitDep Found 1 error.
npm ERR! prepareGitDep 
npm ERR! prepareGitDep 
npm ERR! prepareGitDep 
npm ERR! prepareGitDep 2> npm WARN install Usage of the `--dev` option is deprecated. Use `--only=dev` instead.
npm ERR! prepareGitDep npm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm ERR! prepareGitDep npm WARN deprecated [email protected]: core-js@<2.6.8 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2.
npm ERR! prepareGitDep npm WARN deprecated [email protected]: use String.prototype.padStart()
npm ERR! prepareGitDep clang: warning: using sysroot for 'iPhoneSimulator' but targeting 'MacOSX' [-Wincompatible-sysroot]
npm ERR! prepareGitDep clang: warning: using sysroot for 'iPhoneSimulator' but targeting 'MacOSX' [-Wincompatible-sysroot]
npm ERR! prepareGitDep In file included from ../fsevents.cc:72:
npm ERR! prepareGitDep ../src/thread.cc:36:25: error: unknown type name 'ConstFSEventStreamRef'
npm ERR! prepareGitDep void HandleStreamEvents(ConstFSEventStreamRef stream, void *ctx, size_t numEvents, void *eventPaths, const FSEventStreamEventFlags eventFlags[], const FSEventStreamEventId eventIds[]) {
npm ERR! prepareGitDep                         ^
npm ERR! prepareGitDep ../src/thread.cc:36:108: error: unknown type name 'FSEventStreamEventFlags'
npm ERR! prepareGitDep void HandleStreamEvents(ConstFSEventStreamRef stream, void *ctx, size_t numEvents, void *eventPaths, const FSEventStreamEventFlags eventFlags[], const FSEventStreamEventId eventIds[]) {
npm ERR! prepareGitDep                                                                                                            ^
npm ERR! prepareGitDep ../src/thread.cc:36:152: error: unknown type name 'FSEventStreamEventId'
npm ERR! prepareGitDep void HandleStreamEvents(ConstFSEventStreamRef stream, void *ctx, size_t numEvents, void *eventPaths, const FSEventStreamEventFlags eventFlags[], const FSEventStreamEventId eventIds[]) {
npm ERR! prepareGitDep                                                                                                                                                        ^
npm ERR! prepareGitDep ../src/thread.cc:54:3: error: unknown type name 'FSEventStreamContext'
npm ERR! prepareGitDep   FSEventStreamContext context = { 0, ctx, NULL, NULL, NULL };
npm ERR! prepareGitDep   ^
npm ERR! prepareGitDep ../src/thread.cc:56:3: error: unknown type name 'FSEventStreamRef'
npm ERR! prepareGitDep   FSEventStreamRef stream = FSEventStreamCreate(NULL, &HandleStreamEvents, &context, fse->paths, kFSEventStreamEventIdSinceNow, (CFAbsoluteTime) 0.1, kFSEventStreamCreateFlagNone | kFSEventStreamCreateFlagWatchRoot | kFSEventStreamCreateFlagFileEvents | kFSEventStreamCreateFlagUseCFTypes);
npm ERR! prepareGitDep   ^
npm ERR! prepareGitDep ../src/thread.cc:56:98: error: use of undeclared identifier 'kFSEventStreamEventIdSinceNow'
npm ERR! prepareGitDep   FSEventStreamRef stream = FSEventStreamCreate(NULL, &HandleStreamEvents, &context, fse->paths, kFSEventStreamEventIdSinceNow, (CFAbsoluteTime) 0.1, kFSEventStreamCreateFlagNone | kFSEventStreamCreateFlagWatchRoot | kFSEventStreamCreateFlagFileEvents | kFSEventStreamCreateFlagUseCFTypes);
npm ERR! prepareGitDep                                                                                                  ^
npm ERR! prepareGitDep 6 errors generated.
npm ERR! prepareGitDep make: *** [Release/obj.target/fse/fsevents.o] Error 1
npm ERR! prepareGitDep gyp ERR! build error 
npm ERR! prepareGitDep gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! prepareGitDep gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:262:23)
npm ERR! prepareGitDep gyp ERR! stack     at ChildProcess.emit (events.js:189:13)
npm ERR! prepareGitDep gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)
npm ERR! prepareGitDep gyp ERR! System Darwin 17.7.0
npm ERR! prepareGitDep gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
npm ERR! prepareGitDep gyp ERR! cwd /Users/andrewroyce/.npm/_cacache/tmp/git-clone-5c2ee5f6/node_modules/fsevents
npm ERR! prepareGitDep gyp ERR! node -v v10.15.3
npm ERR! prepareGitDep gyp ERR! node-gyp -v v3.8.0
npm ERR! prepareGitDep gyp ERR! not ok 
npm ERR! prepareGitDep bob build
npm ERR! prepareGitDep 
npm ERR! prepareGitDep build files for publishing
npm ERR! prepareGitDep 
npm ERR! prepareGitDep Options:
npm ERR! prepareGitDep   --help     Show help                                                 [boolean]
npm ERR! prepareGitDep   --version  Show version number                                       [boolean]
npm ERR! prepareGitDep 
npm ERR! prepareGitDep Error: Failed to build definition files.
npm ERR! prepareGitDep     at build (/Users/andrewroyce/.npm/_cacache/tmp/git-clone-5c2ee5f6/node_modules/@react-native-community/bob/lib/targets/typescript.js:77:11)
npm ERR! prepareGitDep npm ERR! code ELIFECYCLE
npm ERR! prepareGitDep npm ERR! errno 1
npm ERR! prepareGitDep npm ERR! [email protected] prepare: `bob build`
npm ERR! prepareGitDep npm ERR! Exit status 1
npm ERR! prepareGitDep npm ERR! 
npm ERR! prepareGitDep npm ERR! Failed at the [email protected] prepare script.
npm ERR! prepareGitDep npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! prepareGitDep 
npm ERR! prepareGitDep npm ERR! A complete log of this run can be found in:
npm ERR! prepareGitDep npm ERR!     /Users/andrewroyce/.npm/_logs/2019-12-23T22_03_41_453Z-debug.log
npm ERR! prepareGitDep 

Podspec not published to npm if the package name contains hyphens

Bug

The files array generated by package.json removes any hyphens from the name of the generated podspec, and thus won't publish the podspec when publishing a package whose name includes hyphens to npm.

For a project named react-native-safe-popover, the package.json's files array comes out as:

  "files": [
    "src",
    "lib",
    "android",
    "ios",
    "reactnativesafepopover.podspec"
  ],

The podspec, meanwhile, is named react-native-safe-popover.podspec.

Environment info

react-native info output:

System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 785.12 MB / 16.00 GB
    Shell: 4.4.23 - /usr/local/bin/bash
  Binaries:
    Node: 13.4.0 - /usr/local/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.0
      System Images: android-28 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: ~16.9.0 => 16.9.0 
    react-native: ~0.61.5 => 0.61.5

Library version: 0.10.0

Steps To Reproduce

npx @react-native-community/bob create react-native-safe-popover
cd react-native-safe-popover
yarn bootstrap

Describe what you expected to happen:

Either of these two:

  1. The podspec should be called react-native-safe-popover.podspec AND the files array in package.json should include react-native-safe-popover.podspec.
  2. The podspec should be called reactnativesafepopover.podspec AND the files array in package.json should include reactnativesafepopover.podspec.

Option 1 would be preferable, as it preserves the package name.

Reproducible sample code

See "Steps To Reproduce".

bob build fails when path contains space character

Bug

PATH_TO_LIB is a path that contains a space character (e.g. New folder).

PS PATH_TO_LIB\react-native-svg> npm run bob

> [email protected] bob PATH_TO_LIB\react-native-svg
> bob build

โ„น Building target commonjs
โ„น Cleaning up previous build at lib\commonjs
โ„น Compiling 53 files in src with babel
โœ“ Wrote files to lib\commonjs
โ„น Building target module
โ„น Cleaning up previous build at lib\module
โ„น Compiling 53 files in src with babel
โœ“ Wrote files to lib\module
โ„น Building target typescript
โ„น Cleaning up previous build at lib\typescript
โ„น Generating type definitions with tsc
'C:\Users\USER\Desktop\New' is not recognized as an internal or external command,
operable program or batch file.
โœ– Errors found when building definition files:

bob.js build

build files for publishing

Options:
  --help     Show help                                                 [boolean]
  --version  Show version number                                       [boolean]

Error: Failed to build definition files.
    at build (PATH_TO_LIB\react-native-svg\node_modules\@react-native-community\bob\lib\targets\typescript.js:82:11)
    at async Object.handler (PATH_TO_LIB\react-native-svg\node_modules\@react-native-community\bob\lib\cli.js:299:9)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] bob: `bob build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] bob script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\USER\AppData\Roaming\npm-cache\_logs\2019-12-10T14_18_14_970Z-debug.log

Environment info

React native info output:

  "peerDependencies": {
    "react": "*",
    "react-native": ">=0.50.0"
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.7.0",
    "@react-native-community/eslint-config": "^0.0.5",
    "@semantic-release/changelog": "^3.0.4",
    "@semantic-release/git": "^7.0.16",
    "@types/css-tree": "^1.0.1",
    "@types/react": "^16.9.11",
    "@types/react-native": "^0.60.21",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^24.9.0",
    "eslint": "^6.5.1",
    "eslint-plugin-flowtype": "^4.3.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-react": "^7.16.0",
    "flow-bin": "^0.109.0",
    "flow-typed": "^2.6.2",
    "flowgen": "^1.10.0",
    "jest": "^24.9.0",
    "pegjs": "^0.10.0",
    "prettier": "^1.18.2",
    "react": "^16.11.0",
    "react-native": "^0.61.2",
    "react-test-renderer": "^16.11.0",
    "semantic-release": "^15.13.27",
    "semantic-release-cli": "^5.2.1",
    "typescript": "^3.7.1-rc"
  },

Library version: 0.7.0

Steps To Reproduce

  1. navigate to project directory and run npm install
  2. run bob build
    ...

Describe what you expected to happen:

The bob build command successfully finish its execution

Reproducible sample code

How can I use another package with my react-native component module

Hi,

For a couple of days, I am struggling with this problem.

My plan is creating a component module that opens webview (comunity/react-native-webview) inside a modal.

  • I created a library using bob and selected "javascript module with native example".
  • Then I installed react-native-webview and used it.
import React from 'react';
import { View, Modal } from 'react-native';
import WebView from 'react-native-webview';

const App: React.FC<{}> = () => {
  return (
    <Modal>
      <View style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      }}>
        <WebView source={{ uri: 'https://github.com'}} />
      </View>
    </Modal>
  )
};

export default App;

in index.js

import React from 'react';
import App from './App';

export default {
  multiply(a: number, b: number) {
    return Promise.resolve(a * b);
  },
  widget() {
    return <App />;
  }
};
  • I did bob build

  • And in the example project, I reinstalled my module and use it.

import * as React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import RnWidget from 'rn-widget';

export default function App() {
  const [result, setResult] = React.useState();

  React.useEffect(() => {
    RnWidget.multiply(3, 7).then(setResult);
  }, []);

  return (
    <View style={styles.container}>
      <Text>Result: {result}</Text>
      {RnWidget.widget()}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
  • executed run ios and the output is

image

if I don't use webview its okay, I can display everything in react-native; but if I use another package I am getting this issue

bob build typescript target fails silently if no tsconfig.json is present

Following the Readme directions, if you perform a yarn bob init on a new project and specify typescript as a target but do not establish a tsconfig.json, your subsequent yarn bob build will claim to write type definitions to the specified directory but actually write nothing.

$ cat package.json
[...]
  "@react-native-community/bob": {
    "source": "src",
    "output": "lib",
    "targets": [
      "commonjs",
      "module",
      "typescript"
    ]
  }
}

$ yarn bob build
yarn run v1.21.1
$ /XXXXX/bob build
โ„น Building target commonjs
โ„น Cleaning up previous build at lib/commonjs
โ„น Compiling 15 files in src with babel
โœ“ Wrote files to lib/commonjs
โ„น Building target module
โ„น Cleaning up previous build at lib/module
โ„น Compiling 15 files in src with babel
โœ“ Wrote files to lib/module
โ„น Building target typescript
โ„น Cleaning up previous build at lib/typescript
โ„น Generating type definitions with tsc
โœ“ Wrote definition files to lib/typescript
โœจ  Done in 4.20s.

$ ls -1 lib/
commonjs
module

$ ls lib/typescript
ls: cannot access 'lib/typescript': No such file or directory

Furthermore, if you use a tsconfig.json with comments and trailing commas, like those generated by tsc --init, the yarn bob build will fail to parse it and crash out. It seems bob requires strict JSON for the tsconfig. (For more on the topic of tsc's lenient JSON parsing, see this thread.)

What is the best way to generate flow-type definitions for TypeScript projects?

This is a question/discussion/feature request around flow type definitions.
Currently when you write your project using TypeScript, it doesn't seem possible to generate flow-type definitions from that source using Bob. This is an inconvenience, as many app-projects use flow and the maintainer of the lib ideally doesn't want to maintain separate flow type definitions when writing the lib TypeScript.

My question here is, is the above assumption correct, and how do other lib maintainers deal with supporting flow-types?

Any insights are appreciated.

cheers, Hein

automated-testing with jasmine / detox

Feature Request

automated-testing with jasmine / detox

Why it is needed

expo project has 2 apps they use for automated e2e testing, for native changes they use bare-expo and for javascript changes they use test-suite

ive been working on getting this up and running for react-native-camera
react-native-camera/react-native-camera#2760

is there any interest in adding something like this to the bob template?

Possible implementation

im working on an implementation here

Code sample

i imagine it could something like

import TestSuite from "react-native-test-suite"

...somewhere in the example app
<TestSuite tests={tests} />
...

with a test being written like

const Photos: TestMaker = ({render}) => (tester: Tester) => {
  const {describe, it, expect} = tester;
  const renderCamera = makeRenderCamera(render);

  describe('getAvailablePictureSizes', () => {
    it('should resolve to an array of strings', async () => {
      const camera = await renderCamera();
      const ratios = await camera.getAvailablePictureSizes();

      expect(ratios).toBeInstanceOf(Array);
      expect(ratios.length).toBeGreaterThan(0);
    });
  });
}

and a single detox test that waits for the test suite to complete, then assert that status === "PASSED" or something like that

Error on bob aar build

Question

Hello,
My goal is to build an aar using bob. After I've executed create script:
npx @react-native-community/bob create react-native-awesome-module
I have added aar to targets in package.json:

"@react-native-community/bob": {
    "source": "src",
    "output": "lib",
    "targets": [
      ["aar", { "reverseJetify": true }],
      "commonjs",
      "module",
      "typescript"
    ]
  }

The error I get is as follows:

D:\react-native-awesome-module>bob build
โ„น Building target aar
โ„น Cleaning up previous build at lib\aar
โ„น Assembling Android project in android with gradle
bob.js build

build files for publishing

Options:
  --help     Show help                                                 [boolean]
  --version  Show version number                                       [boolean]

Error: The gradlew script doesn't seem to present in android. Make sure you have added it by running gradle wrapper in that directory.
    at androidAssemble (D:\react-native-awesome-module\node_modules\@react-native-community\bob\lib\utils\androidAssemble.js:35:11)
    at async build (D:\react-native-awesome-module\node_modules\@react-native-community\bob\lib\targets\aar.js:44:3)
    at async Object.handler (D:\react-native-awesome-module\node_modules\@react-native-community\bob\lib\cli.js:320:9)

Both gradlew and gradlew.bat files do present in android directory.
image

Should I add some extra configuration to build an aar or I have missed something in docs?

Thanks in advance!

Yarn install failing on step "Generating type definitions with tsc"

Bug

Hi! Our react native project has begun throwing typescript errors from within the bob builds during yarn install.

Studying our last successful build log we see it used tsc version 3.7.5 and our failing builds are using tsc version 3.8.2.

Is there a way to pin the version of tsc used by bob?

We have tried listing typescript as a devDependency in our package.json but the log output shows its continuing to use 3.8.2.

Any advice here would be greatly appreciated!

...
[3/4] ๐Ÿ”—  Linking dependencies...
[4/4] ๐Ÿ”จ  Building fresh packages...
success Saved lockfile.
$ bob build
โ„น Building target commonjs
โ„น Cleaning up previous build at lib/commonjs
โ„น Compiling 10 files in src with babel
โœ“ Wrote files to lib/commonjs
โ„น Building target module
โ„น Cleaning up previous build at lib/module
โ„น Compiling 10 files in src with babel
โœ“ Wrote files to lib/module
โ„น Building target typescript
โ„น Cleaning up previous build at lib/typescript
โ„น Generating type definitions with tsc
โœ– Errors found when building definition files.
Version 3.8.2
Syntax:   tsc [options] [file...]

Examples: tsc hello.ts
          tsc --outFile file.js file.ts
          tsc @args.txt
          tsc --build tsconfig.json

[... trimming out the rest of the tsc man file ...]

Error: Failed to build definition files.
    at build (/Users/ciuser/Library/Caches/Yarn/v6/.tmp/ea51ffe15838536cf328cbec1d27f294.3131f0e74df9ee1ee28c4fcebd18b055b4fac308.prepare/node_modules/@react-native-community/bob/lib/targets/typescript.js:63:11)

Environment info

React native info output:

info Fetching system and libraries information...
System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
    Memory: 3.62 GB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.3 - /usr/local/opt/node@10/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/opt/node@10/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 23, 24, 25, 26, 27, 28, 29
      Build Tools: 23.0.1, 25.0.0, 25.0.1, 26.0.1, 26.0.2, 27.0.0, 27.0.3, 28.0.2, 28.0.3, 29.0.2
      System Images: android-24 | Google Play Intel x86 Atom, android-25 | Google Play Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.4 => 0.61.4 
  npmGlobalPackages:
    create-react-native-app: 1.0.0
    react-native-cli: 2.0.1

Library version: x.x.x

Steps To Reproduce

  1. yarn install
  2. bob build error reported
    ...

Describe what you expected to happen:

  1. successful yarn install

Reproducible sample code

Can I use CocoaPods while using Swift to build native module?

Question

Just as the title says, if my swift code is using other third-party pods, and I initialized Podfile with command pods init.Then the compiler told me that it couldn't find React/RCTBridgeModule.h. So I have to add all of these react-native pods into Podfile, and now it looks like this below:

Podfile

Uncomment the next line to define a global platform for your project

platform :ios, '10.0'

source 'https://github.com/CocoaPods/Specs.git'

target 'MyNavtiveModule' do

Comment the next line if you don't want to use dynamic frameworks

use_frameworks!

Pods for JikeSdk

pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"
pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
pod 'React', :path => '../node_modules/react-native/'
pod 'React-Core', :path => '../node_modules/react-native/'
pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'

pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
pod 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon"
pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"
pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

some 3rd party pod here

end

I think this could not be the best practice. What can I do to improve my Podfile?

Using swift to build native modules

Question

I'm trying to use swift files on the library.

I created a swift file in order to get xcode to create a bridge file for me, it didn't happen. So i created a bridge file MyClass-Bridging-Header.h with only:

#import "React/RCTBridgeModule.h"

Then, i added the name of the file here:
SWIFT_OBJC_BRIDGING_HEADER = MyClass-Bridging-Header.h

On the swift file i added the following code:

@objc(MyClass)

class MyClass: NSObject {
    @objc
    override static func requiresMainQueueSetup() -> Bool {
        return false
    }
    @objc func testFn() {
        print("This is a test function")
    }
}

Then i deleted the .h file automatically created by the lib. And in the -m file i deleted everything inside and added this:

#import "React/RCTBridgeModule.h"
@interface RCT_EXTERN_MODULE(MyClass, NSObject)
@end

After this i confirmed that the example project has a bridging header for swift files.

Then i tried to compile the example project and an error appears:

Undefined symbols for architecture x86_64:
  "_OBJC_CLASS_$_MyClass", referenced from:
      objc-class-ref in libreact-native-swift-test.a(MyClass.o)
      __OBJC_$_CATEGORY_MyClass_$_RCTExternModule in libreact-native-swift-test.a(MyClass.o)
ld: symbol(s) not found for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

It is possible to have native modules using swift?

can I specify a tsconfig.json file to build, not the default one in root directory?

Feature request

Why it is needed

in my project tsconfig.json file, I set noEmit: true, but when build library, I have to set noEmit: false to generate type definition files.
bob build cannot accept any parameters in command or specify a tsconfig.json file.

Possible implementation

bob build --file tsconfig.build.json
or
bod build --noEmit false --emitDeclarationOnly true

Code sample

Example project mismatch React-native version from the Bridge

Package.JSON of the library genereted.

  "devDependencies": {
    "react": "~16.9.0",
    "react-native": "~0.61.5",
  },

Package.JSON from the example project.

  "dependencies": {
    "react": "16.11.0",
    "react-native": "0.62.0"
  },

Because of this, the example project doesn't run.

image

Add template for React Native macOS plugins

Feature request

It would be nice to have a plugin template for React Native macOS. Perhaps someone from Microsoft (@stmoy?) might be able to help out?

Why it is needed

Adding a template for RN macOS will help potential contributors follow a "best-practice" way of adding support for macOS to their desired plugins.

Possible implementation

macOS projects are similar to iOS projects, in that they both use Xcode (*.pbxproj). The following repositories have macOS support:

Code sample

Usage for a native library

Question

Can we create native modules with Bob?

I'm trying to write a library that needs some native code but I dont feel really confortable creating all of the native stuff in a scalable way.

Thanks for you help

Swift - AppDelegate.h file not found

Bug report

Summary

When importing the App delegate from the swift bridge it will output the following error:
'AppDelegate.h' file not found

Environment info

react-native info output:

System:
    OS: macOS 10.15.5
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 542.04 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.4.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5900203
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Java: 12.0.1 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.0 => 0.62.0 
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 0.15.1

Steps to reproduce

  1. Add #import "AppDelegate.h" on the bridging-header.h

Describe what you expected to happen:

  1. Expect to use App Delegate without AppDelegate.h file not found, for example:
    let ap = UIApplication.shared.delegate as? AppDelegate

Add build watch mode

Feature request

I'd love to be able to run bob build --watch, and for it to rebuild every time there is a change.

Why it is needed

I'm using bob in a monorepo, and I have multiple example apps (next, expo, gatsby) that need to update when I make changes. Currently I need to run bob build each time.

Possible implementation

I'm not sure how other repos do this, but whenever there is a file saved, it could run bob build.

Code sample

- bob build
+ bob build --watch

How to include assets in package?

Question

Hi There,

I have a question regarding this to using this cli that, how can i include any assets for my component package?

eg. images, fonts, json files etc..

as for in the code i have defined absolute path to resolve the images and json files also i have the gradle file and podspec file to include fonts in parent application.

My package is written in typescript.

How can i include all of these assets in my final package?

Problems Importing My New Bob-created Module

Question

I've created a vanilla bob app and added a react native component to it. Eventually, this module will be a private package used in multiple in-house React Native projects. The package being created here will be a react native component library.

It loads perfectly in the Expo example app in the newly created module. Once I try to use it in my application--npm install as local directory--it works in the browser Expo spins up, but the Android build is broken and Jest spits out this error:

Invariant Violation: __fbBatchedBridgeConfig is not set, cannot invoke native modules

This error seems to happen because of using different versions of React. Its a really frustrating error, because the answers and solutions vary and none of them solve this issue. React and React Native are both set as peer dependencies in package.json of the bob module. I am also using the same versions of these packages in the bob module dev dependencies as well as my app's dependencies:

    "react": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",

How is it that a module with these peer dependencies has a conflict with different versions of React? I've attempted to use babel-plugin-module-resolver, and while that causes another slew of issues, I'm not sure why that is even needed; the example Expo app works and is even using different versions of react and react native; I am using other bob created apps from React Native Community without needing anything special to make them work.

Build is fails for android when I add a native .aar file in android project

Question

Hello,

I am trying to build a library which need to add .aar file. This .aar file is there with me locally. When I import a module and try to build from android studio it builds successfully with no errors. But when i try to run yarn example android my build get failed and example app does not gets installed.

The error form terminal are :

yarn run v1.22.4
$ yarn --cwd example android
$ react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 958 file(s) to forward-jetify. Using 8 workers...
info Starting JS server...
info Installing the app...

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.0.1/userguide/command_line_interface.html#sec:command_line_warnings

FAILURE: Build failed with an exception.

* Where:
Build file 'C:\...\react-native-awesome-module\android\build.gradle' line: 130

* What went wrong:
A problem occurred evaluating project ':reactnativeawesomemodule'.
> Project with path ':consistyaepslibrary-release' could not be found in project ':reactnativeawesomemodule'.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 12s

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

My build.gradle is as below :

buildscript {
  // Buildscript is evaluated before everything else so we can't use getExtOrDefault
  def kotlin_version = rootProject.ext.has('kotlinVersion') ? rootProject.ext.get('kotlinVersion') : project.properties['ConsistyAeps_kotlinVersion']

  repositories {
    google()
    jcenter()
  }

  dependencies {
    classpath 'com.android.tools.build:gradle:3.2.1'
    // noinspection DifferentKotlinGradleVersion
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
  }
}

apply plugin: 'com.android.library'
apply plugin: 'kotlin-android'

def getExtOrDefault(name) {
  return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties['ConsistyAeps_' + name]
}

def getExtOrIntegerDefault(name) {
  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties['ConsistyAeps_' + name]).toInteger()
}

android {
  compileSdkVersion getExtOrIntegerDefault('compileSdkVersion')
  buildToolsVersion getExtOrDefault('buildToolsVersion')
  defaultConfig {
    minSdkVersion 19
    targetSdkVersion getExtOrIntegerDefault('targetSdkVersion')
    versionCode 1
    versionName "1.0"
  }

  buildTypes {
    release {
      minifyEnabled false
      proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
    }
  }
  lintOptions {
    disable 'GradleCompatible'
  }
  compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
  }
}

repositories {
  mavenCentral()
  jcenter()
  google()

  def found = false
  def defaultDir = null
  def androidSourcesName = 'React Native sources'

  if (rootProject.ext.has('reactNativeAndroidRoot')) {
    defaultDir = rootProject.ext.get('reactNativeAndroidRoot')
  } else {
    defaultDir = new File(
      projectDir,
      '/../../../node_modules/react-native/android'
    )
  }

  if (defaultDir.exists()) {
    maven {
      url defaultDir.toString()
      name androidSourcesName
    }

    logger.info(":${project.name}:reactNativeAndroidRoot ${defaultDir.canonicalPath}")
    found = true
  } else {
    def parentDir = rootProject.projectDir

    1.upto(5, {
      if (found) return true
      parentDir = parentDir.parentFile

      def androidSourcesDir = new File(
        parentDir,
        'node_modules/react-native'
      )

      def androidPrebuiltBinaryDir = new File(
        parentDir,
        'node_modules/react-native/android'
      )

      if (androidPrebuiltBinaryDir.exists()) {
        maven {
          url androidPrebuiltBinaryDir.toString()
          name androidSourcesName
        }

        logger.info(":${project.name}:reactNativeAndroidRoot ${androidPrebuiltBinaryDir.canonicalPath}")
        found = true
      } else if (androidSourcesDir.exists()) {
        maven {
          url androidSourcesDir.toString()
          name androidSourcesName
        }

        logger.info(":${project.name}:reactNativeAndroidRoot ${androidSourcesDir.canonicalPath}")
        found = true
      }
    })
  }

  if (!found) {
    throw new GradleException(
      "${project.name}: unable to locate React Native android sources. " +
        "Ensure you have you installed React Native as a dependency in your project and try again."
    )
  }
}

def kotlin_version = getExtOrDefault('kotlinVersion')

dependencies {
  // noinspection GradleDynamicVersion
  api 'com.facebook.react:react-native:+'
  implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"

  implementation fileTree(include: ['*.aar'], dir: 'libs')
  implementation project(path: ':consistyaepslibrary-release')
  implementation project(path: ':aepslib')
}

My settings.gradle is as below :

include ':consistyaepslibrary-release'
include ':aepslib'

Can you please help me to get out of this?

Thanks in advance!

Alternative for `prepare` script to work around https://github.com/yarnpkg/yarn/issues/7212

Is there an alternative to where bob build can run that does not involve using the prepare script?

There is a known issue with yarn that causes a second yarn process to spin up when a git package contains a prepare script. This makes it difficult to contribute to open source for any package which has such a script.

If there is an alternative to when and where the bob build script should run, that would be ideal.

How can I create javascript modules (no native dependency) using React Native CLI rather than Expo?

Question

I am using the below-listed dependencies:

    "@react-native-community/async-storage": "*",
    "react": "*",
    "react-native": "*",
    "react-native-extended-stylesheet": "*",
    "react-native-fast-image": "*",
    "react-native-localization": "*",
    "react-native-safe-area-context": "*",
    "react-native-vector-icons": "*"

to export reusable components. It is very similar to react-native-paper. I just want to install the package and start using it rather than running npx pod-install.

The problem with choosing Javascript modules with native example is, it uses Expo. I do not want to use expo. Instead, I want to use React Native CLI for examples so that I can integrate react-native-vector-icons

This package is brilliant and I have already built a package by choosing the option Kotlin and Swift which offers exactly what I need, but I had to run npx pod-install in my actual project to connect my npm package which seems pointless for exporting non-native modules. For example, let's say I created react-native-components and installed in my project like so npm install react-native-components. Then, I had to run npx pod-install. But, I am sure it happened because I chose Native module with Kotlin and swift.

How can I create component, render the components in an example react-native cli application by linking the package and connect the packages with the native dependencies such as react-native-vector-icons directly in the example project?

Any help is appreciated.

Is it possible to support multiple source folders?

Feature Request

It would be great if the configuration could support multiple source folders

I have a lerna monorepo from this i build a react native component and a react web component that i use on an internal NPM repository.

As part of this lerna monorepo i have a shared logic folder that all API requests and typescript models etc so the folder structure is like so

Packages
-> shared
-> native
-> web

The web project is fine because i build with webpack and it is able to resolve and bundle the imports from shared.

But using bob i cannot import and the components from shared because it doesn't automatically bundle these files

Something like this being able to add multiple source folders?

"@react-native-community/bob": { "source": ["src", "../shared/src"], "output": "lib", "targets": [ "commonjs", "module", "typescript" ] },
Thanks very much for your time

Build module (Add storybook)

Question

I there! I created a module with the following command:
npx @react-native-community/bob create react-native-awesome-module

I want to create a lib/module of components and i need to have storybook on it.
But i need to execute the lib in order to use storybook, but the lib isn't executable.

It is possible to make the lib able to run in order to use Storybook or other available libs?

babel config file issue

.babelrc file work correctly. babel.config.js file not work.

"targets": [
  ["commonjs", { "babelrc": true }],
  ["module", { "babelrc": true }],
]

Java instead of Kotlin

Hi, is it possible that I use java instead of kotlin on Android side? If possible how can I do it?

Thanks in advance

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.