# npm-module-test-thangtmc73
**This module is only used to help me know how to make a RN module and publish it on npm**
## Sử dụng
**RedText**

Example

```
// require from the module
import {RedText} from 'react-native-npm-module-test-thangtmc73'

...
// JSX
<RedText>Text</Text>
```
Phần text truyền vào RedText sẽ tô màu đỏ.

**showToast()**

Example
```
// require from the module
import RNNpmModuleTestThangtmc73 from 'react-native-npm-module-test-thangtmc73'

...
// JS

RNNpmModuleTestThangtmc73.showToast('Message', 5);
```
### Cài đặt
**Android**

- Trong file ```android/setting.gradle``` trong thư mục project ứng dụng RN, thêm vào các dòng sau để include project thư viện:
```
include ':npm-module-test-thangtmc73'
project(':npm-module-test-thangtmc73').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-npm-module-test-thangtmc73/android')
```
- Trong file ```android/app/build.gradle``` trong thư mục project ứng dụng RN, thêm vào dòng sau vào phần ```dependencies```:
```
dependencies {
    ...
    compile project(':npm-module-test-thangtmc73')
}
```
- Trong file ```MainApplication.java```, thêm ```RNNpmModuleTestThangtmc73Package``` vào phương thức ```getPackages()```:
```
@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new RNNpmModuleTestThangtmc73Package()
    );
}
```
### Cấu trúc
**Android**
- Bên trong file ```build.gradle``` sẽ có dòng:
```
apply plugin: 'com.android.library'
```
Dòng này đánh dấu đây là project thư viện Android, khi có project khác dùng project này chúng sẽ compile project coi nó như một thư viện, nó khác biệt với project ứng dụng Android thông thường như sau:
```
apply plugin: 'com.android.application'
```
- Bên trong file ```RNNpmModuleTestThangtmc73Module.java```, class ```RNNpmModuleTestThangtmc73Module``` kế thừa lớp ```ReactContextBaseJavaModule``` sẽ hiện thực các phương thức hỗ trợ bên Javascript. Phương thức ```getName()``` nhằm trả về một chuỗi tên class mà NativeModule sẽ đại diện bên Javascript. Các phương thức Java hiện thực các yêu cầu để Javascript có thể tương tác được cần được đánh dấu với ```@ReactMethod```
```
@ReactMethod
public void showToast(String message, int duration) {
    Toast.makeText(getReactApplicationContext(), message, duration).show();
}
```
- Bên trong file ```RNNpmModuleTestThangtmc73Package.java```, ta cần đánh dấu để module chúng ta tạo ra có thể sử dụng từ Javascript có thể gọi đến các thành phần Android.
```
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    return Arrays.<NativeModule>asList(new RNNpmModuleTestThangtmc73Module(reactContext));
}
```
**iOS**

### Publish
**Yêu cầu Package.json**
- Trường name phải là tên độc nhất, không trùng với các tên thư viện đã có.
- Phải có trường version để xác định phiên bản.

**Đăng hoặc cập nhật thư viện**
- cd vào thư mục chứa project thư viện
```
npm publish
```
### Tham khảo
https://medium.com/gbox-crew-blog/making-libraries-for-react-native-14a8f5006697

https://facebook.github.io/react-native/docs/native-modules-android.html