tuantvk

Tạo một thư viện UI cho React Native

Bài viết này tôi sẽ hướng dẫn nhanh để tạo một thư viện UI cho React Native.

Tạo thư viện:

npx create-react-native-library@latest react-native-ui

Thay đổi react-native-ui bằng tên thư viện của bạn, kết quả sẽ như sau:

npx create-react-native-library@latest react-native-ui
Need to install the following packages:
  create-react-native-library@0.35.0
Ok to proceed? (y) y
✔ What is the name of the npm package? … react-native-ui
✔ What is the description for the package? … UI
✔ What is the name of package author? … tuantvk
✔ What is the email address for the package author? … tuanhanhphuc123@gmail.com
✔ What is the URL for the package author? … https://github.com/tuantvk
✔ What is the URL for the repository? … https://github.com/tuantvk/react-native-ui
✔ What type of library do you want to develop? › Turbo module with backward compat
✔ Which languages do you want to use? › C++ for Android & iOS
✔ Project created successfully at react-native-ui!

Get started with the project:

  $ yarn

Run the example app on iOS:

  $ yarn example ios

Run the example app on Android:

  $ yarn example android

See CONTRIBUTING.md for more details. Good luck!

Lưu ý: ở các bước điền thông tin, bạn có thể tuỳ chọn loại của thư viện là gì (What type of library do you want to develop?), ở đây tôi chọn Turbo module with backward compat và C++ for Android & iOS.

Sau khi xong thì di chuyển vào folder thư viện và cài đặt các package khác.

cd react-native-ui && yarn install

Trong trường hợp bị báo lỗi: 

yarn install
Usage Error: The nearest package directory (/react-native-ui) doesn't seem to be part of the project declared in ABC.

- If ABC isn't intended to be a project, remove any yarn.lock and/or package.json file there.
- If ABC is intended to be a project, it might be that you forgot to list /react-native-ui in its workspace configuration.
- Finally, if ABC is fine and you intend /react-native-ui to be treated as a completely separate project (not even a workspace), create an empty yarn.lock file in it.

$ yarn install [--json] [--immutable] [--immutable-cache] [--check-cache] [--inline-builds] [--mode #0]

Bạn tạo 1 file trống yarn.lock từ thư mục gốc (root) và cài đặt lại các package.

touch yarn.lock && yarn install

Trong ví dụ này, thư viện của tôi có sử dụng thêm các thư viện khác, cụ thể ở đây là react-native-reanimated, tôi cần thêm thư viện này vô dự án của mình.

yarn add react-native-reanimated --peer --exact
yarn add -D react-native-reanimated
cd example && yarn add react-native-reanimated

Tại sao thư viện react-native-reanimated lại phải thêm ở 3 chỗ như vậy? Tham khảo ở đây: How do I add a react-native library containing native code as a dependency in my library?

Add Reanimated’s babel plugin

  module.exports = {
    plugins: [
      ...
      'react-native-reanimated/plugin',
    ],
  };

Phần config react-native-reanimated/plugin tôi thêm ở 2 file:

  1. Đầu tiên là file root/babel.config.js
  2. Tiếp theo là file root/example/babel.config.js

Đoạn code ví dụ cho thư viện của tôi như sau:

// root/src/index.tsx
import React from 'react';
import { Button, View } from 'react-native';
import Animated, { useSharedValue, withSpring } from 'react-native-reanimated';

export default function UI() {
  const width = useSharedValue(100);

  const handlePress = () => {
    width.value = withSpring(width.value + 50);
  };

  return (
    <View>
      <Animated.View
        style={{
          width,
          height: 100,
          backgroundColor: 'violet',
        }}
      />
      <Button onPress={handlePress} title="Click me" />
    </View>
  );
}

Và phần sử dụng như sau:

// root/example/src/App.tsx
import React from 'react'
import { View, Text } from 'react-native'
import UI from 'react-native-ui'

const App = () => {
  return (
    <View>
      <Text>App</Text>
      <UI />
    </View>
  )
}

export default App

Để chạy example trên ios tôi chạy thêm:

cd example && bundle install && npx pod-install

Sau đó từ thư mục gốc dự án chạy thử ví dụ:

yarn example ios

Như vậy là đã hoàn tất phần cài đặt và code cho thư viện.

Để publish thư viện lên npm vui lòng đọc thêm ở đây: Creating and publishing scoped public packages

Vì mọi thứ có sẵn ở trên mạng rồi nên tôi khi trích dẫn quá nhiều thứ ở đây! Xin cảm ơn!

In