You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: CONTRIBUTING.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -23,9 +23,9 @@ The [example app](/apps/example/) demonstrates usage of the library. You need to
23
23
24
24
It is configured to use the local version of the library, so any changes you make to the library's source code will be reflected in the example app. Changes to the library's JavaScript code will be reflected in the example app without a rebuild, but native code changes will require a rebuild of the example app.
25
25
26
-
If you want to use Android Studio or Xcode to edit the native code, you can open the `apps/example/android` or `apps/example/ios` directories respectively in those editors. To edit the Objective-C or Swift files, open `apps/example/ios/EnrichedTextInputExample.xcworkspace` in Xcode and find the source files at `Pods > Development Pods > ReactNativeEnriched`.
26
+
If you want to use Android Studio or Xcode to edit the native code, you can open the `apps/example/android` or `apps/example/ios` directories respectively in those editors. To edit the Objective-C or Swift files, open `apps/example/ios/EnrichedTextInputExample.xcworkspace` in Xcode and find the source files at `Pods > Development Pods > ReactNativeEnrichedHtml`.
27
27
28
-
To edit the Java or Kotlin files, open `apps/example/android` in Android studio and find the source files at `react-native-enriched` under `Android`.
28
+
To edit the Java or Kotlin files, open `apps/example/android` in Android studio and find the source files at `react-native-enriched-html` under `Android`.
29
29
30
30
You can use various commands from the root directory to work with the project.
Copy file name to clipboardExpand all lines: README.md
+27-28Lines changed: 27 additions & 28 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,27 +1,27 @@
1
-
<imgsrc="https://github.com/user-attachments/assets/c8ba03bc-4ea8-48f4-9566-02ebac0c19d3"alt="react-native-enriched by Software Mansion"width="100%">
1
+
<imgsrc="https://github.com/user-attachments/assets/c8ba03bc-4ea8-48f4-9566-02ebac0c19d3"alt="react-native-enriched-html by Software Mansion"width="100%">
`react-native-enriched` is a powerful React Native library that exposes a rich text editor component:
9
+
`react-native-enriched-html` is a powerful React Native rich text solution:
10
10
11
-
- ⚡ Fully native text input component
12
-
- 🕹️ Synchronous text styling
13
-
- 🔍 Live styling detection and HTML parsing
14
-
- 🎨 Customizable styles
15
-
- 📱 Mobile platforms support
16
-
- 🏛 Supports only the New Architecture
11
+
⚡ Fully native input and display components (Supports New Architecture only)
12
+
💻 HTML-based parsing with live, synchronous text styling
13
+
🎨 Fully customizable styles for seamless UI integration
14
+
🌐 Solid mobile support with an experimental Web implementation
17
15
18
-
`EnrichedTextInput`, the rich text editor component is an uncontrolled input. This means that it doesn't use any state or props to store its value, but instead directly interacts with the underlying platform-specific components. Thanks to this, the component is really performant and simple to use while offering complex and advanced features no other solution has.
16
+
`EnrichedTextInput`, the rich text input component is an uncontrolled input. This means that it doesn't use any state or props to store its value, but instead directly interacts with the underlying platform-specific components. Thanks to this, the component is really performant and simple to use while offering complex and advanced features no other solution has.
`EnrichedText` is the display component designed to work seamlessly with `EnrichedTextInput`. It flawlessly renders any HTML generated by the input, while a shared, customizable styling API guarantees perfect 1:1 visual consistency between editing and displaying.
Since 2012 [Software Mansion](https://swmansion.com) is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues.
@@ -46,9 +46,8 @@ We can help you build your next dream product –
46
46
47
47
## Prerequisites
48
48
49
-
-`react-native-enriched` currently supports only Android and iOS platforms
49
+
-`react-native-enriched-html` currently supports Android and iOS, Web implementation is still experimental.
50
50
- It works only with [the React Native New Architecture (Fabric)](https://reactnative.dev/architecture/landing-page) and supports following React Native releases: `0.81`, `0.82`, `0.83`, `0.84` and `0.85`.
51
-
- If you would like to use `react-native-enriched` in React Native `0.79` or `0.80` use `react-native-enriched 0.4.x`.
52
51
53
52
## Installation
54
53
@@ -57,14 +56,14 @@ We can help you build your next dream product –
57
56
#### 1. Install the library
58
57
59
58
```sh
60
-
yarn add react-native-enriched
59
+
yarn add react-native-enriched-html
61
60
```
62
61
63
62
> [!TIP]
64
63
> To try the latest features before they land in a stable release, install the nightly build:
65
64
>
66
65
> ```sh
67
-
> yarn add react-native-enriched@nightly
66
+
> yarn add react-native-enriched-html@nightly
68
67
>```
69
68
>
70
69
> Nightly versions are published to npm automatically and may contain breaking changes.
@@ -82,7 +81,7 @@ cd ios && bundler install && bundler exec pod install
82
81
#### 1. Install the library
83
82
84
83
```sh
85
-
npx expo install react-native-enriched
84
+
npx expo install react-native-enriched-html
86
85
```
87
86
88
87
#### 2. Run prebuild
@@ -101,11 +100,11 @@ npx expo prebuild
101
100
Here's a simple example of an input that lets you toggle bold on its text and shows whether bold is currently active via the button color.
`react-native-enriched` uses both standard and custom HTML tags in its output and accepts them as input.
159
+
`react-native-enriched-html` uses both standard and custom HTML tags in its output and accepts them as input.
161
160
162
161
Not all styles can be combined freely. There are two kinds of restrictions:
163
162
@@ -235,7 +234,7 @@ The links are here, just like in any other editor, a piece of text with a URL at
235
234
236
235
### Automatic links detection
237
236
238
-
`react-native-enriched` automatically detects words that appear to be some URLs and makes them links.
237
+
`react-native-enriched-html` automatically detects words that appear to be some URLs and makes them links.
239
238
You can customize this behavior by providing your own regular expression via [linkRegex](docs/INPUT_API_REFERENCE.md#linkregex) prop.
240
239
241
240
### Applying links manually
@@ -262,7 +261,7 @@ There are two ways in which a mention can be started; either by typing one of th
262
261
263
262
### Mention related events
264
263
265
-
`react-native-enriched` emits 3 different events that help handling mentions' editing:
264
+
`react-native-enriched-html` emits 3 different events that help handling mentions' editing:
266
265
267
266
-[onStartMention](docs/INPUT_API_REFERENCE.md#onstartmention) is emitted whenever mention is started in one of the ways from the [previous section](#starting-a-mention) or the user has come back (moved selection) to some unfinished mention they have started. It can be used for opening proper tools you use in the app to edit a mention (e.g. a list for choosing from users or channels that the mention will affect).
268
267
-[onChangeMention](docs/INPUT_API_REFERENCE.md#onchangemention) is emitted whenever user put or removed some characters after a mention indicator. This way you can react to active mention editing by, for example, filtering users in your displayed list based on the typed text.
@@ -286,7 +285,7 @@ You can find some examples in the [usage section](#usage) or in the example app.
286
285
287
286
## Other Events
288
287
289
-
`react-native-enriched` emits a few more events that may be of use:
288
+
`react-native-enriched-html` emits a few more events that may be of use:
@@ -323,18 +322,18 @@ You can extend the native text editing menu with custom items using the [context
323
322
324
323
## Customizing \<EnrichedTextInput /> styles
325
324
326
-
`react-native-enriched` allows customizing styles of the `<EnrichedTextInput />` component. See [htmlStyle](docs/INPUT_API_REFERENCE.md#htmlstyle) prop.
325
+
`react-native-enriched-html` allows customizing styles of the `<EnrichedTextInput />` component. See [htmlStyle](docs/INPUT_API_REFERENCE.md#htmlstyle) prop.
327
326
328
327
## EnrichedText component
329
328
330
-
`react-native-enriched` provides an `EnrichedText` component that renders the HTML output of `EnrichedTextInput` with all supported styles, interactive links, and mentions.
329
+
`react-native-enriched-html` provides an `EnrichedText` component that renders the HTML output of `EnrichedTextInput` with all supported styles, interactive links, and mentions.
Copy file name to clipboardExpand all lines: apps/example-web/README.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
-
# React Native Enriched Web Example
1
+
# React Native Enriched Html Web Example
2
2
3
-
This is a [**Vite**](https://vite.dev) + [**React**](https://react.dev) web example for the React Native Enriched text input component, bootstrapped with Vite's React template.
3
+
This is a [**Vite**](https://vite.dev) + [**React**](https://react.dev) web example for the React Native Enriched Html text input component, bootstrapped with Vite's React template.
0 commit comments