Skip to content

First Commit #51

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2022 Alex Demchenko
Copyright (c) 2022 Ayush Khade

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
142 changes: 0 additions & 142 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,142 +0,0 @@
# React Native Module Template

A starter for the React Native library written in TypeScript, with linked example project and optional native code written in Swift and Kotlin. This project aims to support the latest React Native versions and keep best practices in mind.

Are you looking for the project template? Check [react-native-better-template](https://github.com/demchenkoalex/react-native-better-template).

## Alternatives

[react-native-builder-bob](https://github.com/callstack/react-native-builder-bob)

[create-react-native-module](https://github.com/brodybits/create-react-native-module)

### Why this template?

First of all, it has TypeScript set up and ready. Also, if you will use a native code, this template uses Swift and Kotlin, which is much better than Objective-C and Java.

The example project is linked in a way so that you can work on your library and see the results of your work immediately. If you use native code you can see linked libraries in the example project opened in Xcode or Android Studio and can modify the code directly from there, just remember to rebuild the example to see the changes. When you change TypeScript code you need to compile it first (using `yarn` command, it has `prepare` hook set up) since with npm you are supplying `lib` folder with JavaScript and type definitions, but there is an [option](#how-to-see-my-changes-immediately-in-the-example) to point example to the `src` folder instead, so that when you modify your library you see changes immediately in the example thanks to [Fast Refresh](https://facebook.github.io/react-native/docs/fast-refresh).

## Usage

Clone this repo, rename the `react-native-module-template` folder to your library name, navigate to that folder and run

```
node rename.js
```

or if you want to **remove native code**

```
node rename.js js-only
```

This will invoke rename script, which removes all references to the template and makes some cleanup.

⚠️⚠️⚠️ This script is not made to be bulletproof, some assumptions are made:

- The script will ask for different information (such as library name, author name, author email etc.) and there might be instructions in the parenthesis, please follow them or something will likely **fail**.
- Use `kebab-case` for the library name, _preferably_ with `react-native` prefix (e.g. `react-native-blue-button`, blue-button, button).
- Use `PascalCase` for the library short name (in case you will have native code, with `js-only` argument script will not ask for this), it is used in native projects (RNModuleTemplate.xcodeproj, RNModuleTemplatePackage.kt etc.). If you prefixed your library name with `react-native` use prefix `RN` for the short name (e.g. `RNBlueButton`, BlueButton, Button).
- Library homepage is used only in `package.json`, if you are not sure, you can press enter to skip this step and modify this field later. Library git url is used only in `.podspec` file, same as above (note that this file will be removed if you pass `js-only` argument).
- Please don't use any special characters in author name since it is a part of Android package name, (e.g. `com.alexdemchenko.reactnativemoduletemplate`) and used in Kotlin and other files. Android package name is generated from author name (with removed spaces and lowercased) and library name (with removed dashes).

Don't forget to remove the rename script, do `yarn` to install dependencies in root and example folders, and, if you kept native code, do `pod install` in `example/ios`.

If you didn't use `js-only` you are good to go. If you did, you need to unlink native code from the example

### iOS

Open Xcode, in the project navigator find `Libraries` folder, reveal contents using the small arrow and hit `DELETE` on `RNModuleTemplate.xcodeproj`. Alternatively, open `example/ios/example.xcodeproj/project.pbxproj`, search for the `Template` (there should be a number of `libRNModuleTemplate.a` and `RNModuleTemplate.xcodeproj` files) and remove all references to them. Please remove whole lines if it among files with other names or whole sections if it is the only item. Groups, like `Library` or `Products`, must stay, just remove the template from appropriate children field.

### Android

In `example/android/settings.gradle` remove

```gradle
include ':react-native-module-template'
project(':react-native-module-template').projectDir = new File(rootProject.projectDir, '../../android')
```

In `example/android/app/build.gradle` remove

```gradle
implementation project(':react-native-module-template')
```

In `example/android/app/src/main/java/com/example/MainApplication.kt` remove

```kotlin
import com.alexdemchenko.reactnativemoduletemplate.RNModuleTemplatePackage

packages.add(RNModuleTemplatePackage())
```

## How example project is linked

The native part is manually linked (you can see changes for Android right above), for iOS check [official docs](https://facebook.github.io/react-native/docs/linking-libraries-ios#manual-linking), but **Header Search Paths** are pointing to the `ios` folder, `$(SRCROOT)/../../ios`, not node_modules.

JavaScript part is using Metro Bundler configuration, see [this article](https://callstack.com/blog/adding-an-example-app-to-your-react-native-library/) for more details and final configuration [here](example/metro.config.js).

In the example's [tsconfig.json](example/tsconfig.json) custom path is specified, so you can import your code the same way end user will do.

```json
"paths": {
"react-native-module-template": ["../src"]
},
```

### How to see my changes immediately in the example

In the library's `package.json` change

```json
"main": "lib/index.js",
```

to

```json
"main": "src/index.tsx", // or `index.ts` if you don't have JSX there
```

restart the bundler if you have it running

```
yarn start
```

⚠️⚠️⚠️ Don't forget to change this back before making a release, since with npm you supply `lib` folder, not `src`. Let me know if there is a way to do this automatically.

## Release

Create an npm account [here](https://www.npmjs.com/signup) if you don't have one. Then do

```
npm login
```

and

```
npm publish
```

ℹ️ If you want to see what files will be included in your package before release run `npm pack`

ℹ️ If you have native code in your library most of the time you will need `.kt`, `.h`/`.m`, `.swift` files, `project.pbxproj`, `AndroidManifest.xml` and `build.gradle` aside from TypeScript code and default stuff, so keep an eye on what you are publishing, some configuration/build folders or files might sneak in. Most of them (if not all) are ignored in [package.json](package.json).

## FAQ

### VSCode ESLint plugin does not lint example project

By default, ESLint is configured separately for the library's source code and the example. It uses two `.eslintignore` files, the first one for the library, among others it ignores `/example` folder, and the second one for the example project. Since `/example` folder is ignored in one of these files, the plugin does not lint anything in it, see this [issue](https://github.com/microsoft/vscode-eslint/issues/111). To fix that, go to the VSCode settings and set

```json
"eslint.workingDirectories": [
"./example"
]
```

## License

[MIT](LICENSE)
2 changes: 1 addition & 1 deletion android/src/main/AndroidManifest.xml
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.alexdemchenko.reactnativemoduletemplate"></manifest>
package="com.ayushkhade.reactnativetooltipprogressbar"></manifest>
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
package com.alexdemchenko.reactnativemoduletemplate
package com.ayushkhade.reactnativetooltipprogressbar

import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule

class RNModuleTemplateModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
class RNProgressBarModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {

override fun getName() = "RNModuleTemplateModule"
override fun getName() = "RNProgressBarModule"

override fun getConstants(): MutableMap<String, Any> {
return hashMapOf("count" to 1)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
package com.alexdemchenko.reactnativemoduletemplate
package com.ayushkhade.reactnativetooltipprogressbar

import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ViewManager

class RNModuleTemplatePackage : ReactPackage {
class RNProgressBarPackage : ReactPackage {

override fun createViewManagers(reactContext: ReactApplicationContext):
MutableList<ViewManager<*, *>> {
Expand All @@ -14,6 +14,6 @@ class RNModuleTemplatePackage : ReactPackage {

override fun createNativeModules(reactContext: ReactApplicationContext):
MutableList<NativeModule> {
return mutableListOf(RNModuleTemplateModule(reactContext))
return mutableListOf(RNProgressBarModule(reactContext))
}
}
2 changes: 1 addition & 1 deletion example/android/app/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ android {
}

dependencies {
implementation project(':react-native-module-template')
implementation project(':react-native-tooltip-progress-bar')
implementation fileTree(dir: 'libs', include: ['*.jar'])
//noinspection GradleDynamicVersion
implementation 'com.facebook.react:react-native:+' // From node_modules
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ package com.example

import android.app.Application
import android.content.Context
import com.alexdemchenko.reactnativemoduletemplate.RNModuleTemplatePackage
import com.ayushkhade.reactnativetooltipprogressbar.RNProgressBarPackage
import com.facebook.react.*
import com.facebook.soloader.SoLoader
import java.lang.reflect.InvocationTargetException
Expand All @@ -18,7 +18,7 @@ class MainApplication : Application(), ReactApplication {
val packages = PackageList(this).packages
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(MyReactNativePackage());
packages.add(RNModuleTemplatePackage())
packages.add(RNProgressBarPackage())
return packages
}

Expand Down
4 changes: 2 additions & 2 deletions example/android/settings.gradle
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
rootProject.name = 'example'
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)

include ':react-native-module-template'
project(':react-native-module-template').projectDir = new File(rootProject.projectDir, '../../android')
include ':react-native-tooltip-progress-bar'
project(':react-native-tooltip-progress-bar').projectDir = new File(rootProject.projectDir, '../../android')

include ':app'
20 changes: 10 additions & 10 deletions example/ios/example.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,16 @@
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
FAA6DE282607FC1C0044CA6D /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = FAA6DE272607FC1C0044CA6D /* AppDelegate.swift */; };
FAB9070E279B4A83008B1D17 /* libRNModuleTemplateModule.a in Frameworks */ = {isa = PBXBuildFile; fileRef = FAB9070D279B4A6B008B1D17 /* libRNModuleTemplateModule.a */; };
FAB9070E279B4A83008B1D17 /* libRNProgressBarModule.a in Frameworks */ = {isa = PBXBuildFile; fileRef = FAB9070D279B4A6B008B1D17 /* libRNProgressBarModule.a */; };
/* End PBXBuildFile section */

/* Begin PBXContainerItemProxy section */
FAB9070C279B4A6B008B1D17 /* PBXContainerItemProxy */ = {
isa = PBXContainerItemProxy;
containerPortal = FAB90708279B4A6B008B1D17 /* RNModuleTemplateModule.xcodeproj */;
containerPortal = FAB90708279B4A6B008B1D17 /* RNProgressBarModule.xcodeproj */;
proxyType = 2;
remoteGlobalIDString = FA0EFF60236CC8FB00069FA8;
remoteInfo = RNModuleTemplateModule;
remoteInfo = RNProgressBarModule;
};
/* End PBXContainerItemProxy section */

Expand All @@ -35,15 +35,15 @@
F9197C6B9DA65F8C6AC6D250 /* Pods-example.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-example.release.xcconfig"; path = "Target Support Files/Pods-example/Pods-example.release.xcconfig"; sourceTree = "<group>"; };
FAA6DE272607FC1C0044CA6D /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = AppDelegate.swift; path = example/AppDelegate.swift; sourceTree = "<group>"; };
FAA6DE2A2607FC480044CA6D /* example-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; name = "example-Bridging-Header.h"; path = "example/example-Bridging-Header.h"; sourceTree = "<group>"; };
FAB90708279B4A6B008B1D17 /* RNModuleTemplateModule.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RNModuleTemplateModule.xcodeproj; path = ../../ios/RNModuleTemplateModule.xcodeproj; sourceTree = "<group>"; };
FAB90708279B4A6B008B1D17 /* RNProgressBarModule.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RNProgressBarModule.xcodeproj; path = ../../ios/RNProgressBarModule.xcodeproj; sourceTree = "<group>"; };
/* End PBXFileReference section */

/* Begin PBXFrameworksBuildPhase section */
13B07F8C1A680F5B00A75B9A /* Frameworks */ = {
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
FAB9070E279B4A83008B1D17 /* libRNModuleTemplateModule.a in Frameworks */,
FAB9070E279B4A83008B1D17 /* libRNProgressBarModule.a in Frameworks */,
0264ED890D079BB9A99DCA28 /* libPods-example.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
Expand Down Expand Up @@ -75,7 +75,7 @@
832341AE1AAA6A7D00B99B32 /* Libraries */ = {
isa = PBXGroup;
children = (
FAB90708279B4A6B008B1D17 /* RNModuleTemplateModule.xcodeproj */,
FAB90708279B4A6B008B1D17 /* RNProgressBarModule.xcodeproj */,
);
name = Libraries;
sourceTree = "<group>";
Expand Down Expand Up @@ -114,7 +114,7 @@
FAB90709279B4A6B008B1D17 /* Products */ = {
isa = PBXGroup;
children = (
FAB9070D279B4A6B008B1D17 /* libRNModuleTemplateModule.a */,
FAB9070D279B4A6B008B1D17 /* libRNProgressBarModule.a */,
);
name = Products;
sourceTree = "<group>";
Expand Down Expand Up @@ -171,7 +171,7 @@
projectReferences = (
{
ProductGroup = FAB90709279B4A6B008B1D17 /* Products */;
ProjectRef = FAB90708279B4A6B008B1D17 /* RNModuleTemplateModule.xcodeproj */;
ProjectRef = FAB90708279B4A6B008B1D17 /* RNProgressBarModule.xcodeproj */;
},
);
projectRoot = "";
Expand All @@ -182,10 +182,10 @@
/* End PBXProject section */

/* Begin PBXReferenceProxy section */
FAB9070D279B4A6B008B1D17 /* libRNModuleTemplateModule.a */ = {
FAB9070D279B4A6B008B1D17 /* libRNProgressBarModule.a */ = {
isa = PBXReferenceProxy;
fileType = archive.ar;
path = libRNModuleTemplateModule.a;
path = libRNProgressBarModule.a;
remoteRef = FAB9070C279B4A6B008B1D17 /* PBXContainerItemProxy */;
sourceTree = BUILT_PRODUCTS_DIR;
};
Expand Down
4 changes: 2 additions & 2 deletions example/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React, { useEffect } from 'react'
import RNModuleTemplateModule, { Counter } from 'react-native-module-template'
import RNProgressBarModule, { Counter } from 'react-native-tooltip-progress-bar'

const App = () => {
useEffect(() => {
console.log(RNModuleTemplateModule)
console.log(RNProgressBarModule)
})

return <Counter />
Expand Down
2 changes: 1 addition & 1 deletion example/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"module": "CommonJS",
"noEmit": true,
"paths": {
"react-native-module-template": ["../src"]
"react-native-tooltip-progress-bar": ["../src"]
},
"skipLibCheck": true,
"strict": true,
Expand Down
11 changes: 0 additions & 11 deletions ios/RNModuleTemplateModule.m

This file was deleted.

11 changes: 11 additions & 0 deletions ios/RNProgressBarModule.m
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
//
// RNProgressBarModule.m
// RNProgressBarModule
//
// Copyright © 2022 Ayush Khade. All rights reserved.
//

#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(RNProgressBarModule, NSObject)
@end
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
//
// RNModuleTemplateModule.swift
// RNModuleTemplateModule
// RNProgressBarModule.swift
// RNProgressBarModule
//
// Copyright © 2022 Alex Demchenko. All rights reserved.
// Copyright © 2022 Ayush Khade. All rights reserved.
//

import Foundation

@objc(RNModuleTemplateModule)
class RNModuleTemplateModule: NSObject {
@objc(RNProgressBarModule)
class RNProgressBarModule: NSObject {
@objc
func constantsToExport() -> [AnyHashable : Any]! {
return ["count": 1]
Expand Down
Loading