From fc0275e1f550e59618aa621d72e726f49d4de347 Mon Sep 17 00:00:00 2001 From: Simek Date: Sun, 31 Aug 2025 14:51:57 +0200 Subject: [PATCH 1/2] convert quote blocks to admonitions, cleanup removed APIs pages --- docs/accessibilityinfo.md | 8 +- docs/actionsheetios.md | 4 +- docs/alertios.md | 190 +---------- docs/animated.md | 4 +- docs/appearance.md | 30 +- docs/appregistry.md | 4 +- docs/asyncstorage.md | 363 +--------------------- docs/backhandler.md | 4 +- docs/checkbox.md | 113 +------ docs/clipboard.md | 109 +------ docs/datepickerandroid.md | 75 +---- docs/datepickerios.md | 162 +--------- docs/dimensions.md | 14 +- docs/dynamiccolorios.md | 8 +- docs/get-started-without-a-framework.md | 4 +- docs/image.md | 16 +- docs/imagepickerios.md | 79 +---- docs/keyboard.md | 4 +- docs/keyboardavoidingview.md | 4 +- docs/layout-props.md | 4 +- docs/modal.md | 8 +- docs/optimizing-flatlist-configuration.md | 14 +- docs/platformcolor.md | 8 +- docs/pressable.md | 8 +- docs/progressbarandroid.md | 4 +- docs/pushnotificationios.md | 4 +- docs/refreshcontrol.md | 4 +- docs/safeareaview.md | 6 +- docs/scrollview.md | 4 +- docs/sectionlist.md | 4 +- docs/segmentedcontrolios.md | 122 +------- docs/set-up-your-environment.md | 8 +- docs/settings.md | 4 +- docs/statusbarios.md | 4 +- docs/stylesheet.md | 4 +- docs/text.md | 4 +- docs/textinput.md | 4 +- docs/timepickerandroid.md | 71 +---- docs/toastandroid.md | 4 +- docs/touchablehighlight.md | 4 +- docs/touchablenativefeedback.md | 4 +- docs/touchableopacity.md | 4 +- docs/touchablewithoutfeedback.md | 8 +- docs/transforms.md | 4 +- docs/vibration.md | 8 +- docs/virtualizedlist.md | 8 +- 46 files changed, 210 insertions(+), 1318 deletions(-) diff --git a/docs/accessibilityinfo.md b/docs/accessibilityinfo.md index 3d77f80884f..81e2c119ade 100644 --- a/docs/accessibilityinfo.md +++ b/docs/accessibilityinfo.md @@ -158,7 +158,9 @@ static isAccessibilityServiceEnabled(): Promise; Check whether any accessibility service is enabled. This includes TalkBack but also any third-party accessibility app that may be installed. To only check whether TalkBack is enabled, use [isScreenReaderEnabled](#isscreenreaderenabled). Returns a promise which resolves to a boolean. The result is `true` when some accessibility services is enabled and `false` otherwise. -> **Note**: Please use [isScreenReaderEnabled](#isscreenreaderenabled) if you only want to check the status of TalkBack. +:::note +Please use [`isScreenReaderEnabled`](#isscreenreaderenabled) if you only want to check the status of TalkBack. +::: --- @@ -242,4 +244,6 @@ Set accessibility focus to a React component. On Android, this calls `UIManager.sendAccessibilityEvent` method with passed `reactTag` and `UIManager.AccessibilityEventTypes.typeViewFocused` arguments. -> **Note**: Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`. +:::note +Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`. +::: diff --git a/docs/actionsheetios.md b/docs/actionsheetios.md index d24bc299921..99a2b3e185c 100644 --- a/docs/actionsheetios.md +++ b/docs/actionsheetios.md @@ -132,7 +132,9 @@ Display the iOS share sheet. The `options` object should contain one or both of - `subject` (string) - a subject for the message - `excludedActivityTypes` (array) - the activities to exclude from the ActionSheet -> **Note:** If `url` points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc. If `url` points to a remote file or address it must conform to URL format as described in [RFC 2396](https://www.ietf.org/rfc/rfc2396.txt). For example, a web URL without a proper protocol (HTTP/HTTPS) will not be shared. +:::note +If `url` points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc. If `url` points to a remote file or address it must conform to URL format as described in [RFC 2396](https://www.ietf.org/rfc/rfc2396.txt). For example, a web URL without a proper protocol (HTTP/HTTPS) will not be shared. +::: The 'failureCallback' function takes one parameter, an error object. The only property defined on this object is an optional `stack` property of type `string`. diff --git a/docs/alertios.md b/docs/alertios.md index 5fe745e86ec..64d298d5e0a 100644 --- a/docs/alertios.md +++ b/docs/alertios.md @@ -1,190 +1,8 @@ --- id: alertios -title: '🚧 AlertIOS' +title: '❌ AlertIOS' --- -> **Removed.** Use [`Alert`](alert) instead. - -`AlertIOS` provides functionality to create an iOS alert dialog with a message or create a prompt for user input. - -Creating an iOS alert: - -```jsx -AlertIOS.alert( - 'Sync Complete', - 'All your data are belong to us.', -); -``` - -Creating an iOS prompt: - -```jsx -AlertIOS.prompt('Enter a value', null, text => - console.log('You entered ' + text), -); -``` - -We recommend using the [`Alert.alert`](alert) method for cross-platform support if you don't need to create iOS-only prompts. - ---- - -# Reference - -## Methods - -### `alert()` - -```jsx -static alert(title: string, [message]: string, [callbackOrButtons]: ?(() => void), ButtonsArray, [type]: AlertType): [object Object] -``` - -Create and display a popup alert. - -**Parameters:** - -| Name | Type | Required | Description | -| ----------------- | --------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| title | string | Yes | The dialog's title. Passing null or '' will hide the title. | -| message | string | No | An optional message that appears below the dialog's title. | -| callbackOrButtons | ?(() => void),[ButtonsArray](alertios#buttonsarray) | No | This optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called when the user taps 'OK'. If passed an array of button configurations, each button should include a `text` key, as well as optional `onPress` and `style` keys. `style` should be one of 'default', 'cancel' or 'destructive'. | -| type | [AlertType](alertios#alerttype) | No | Deprecated, do not use. | - -Example with custom buttons: - -```jsx -AlertIOS.alert( - 'Update available', - 'Keep your app up to date to enjoy the latest features', - [ - { - text: 'Cancel', - onPress: () => console.log('Cancel Pressed'), - style: 'cancel', - }, - { - text: 'Install', - onPress: () => console.log('Install Pressed'), - }, - ], -); -``` - ---- - -### `prompt()` - -```jsx -static prompt(title: string, [message]: string, [callbackOrButtons]: ?((text: string) => void), ButtonsArray, [type]: AlertType, [defaultValue]: string, [keyboardType]: string): [object Object] -``` - -Create and display a prompt to enter some text. - -**Parameters:** - -| Name | Type | Required | Description | -| ----------------- | --------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| title | string | Yes | The dialog's title. | -| message | string | No | An optional message that appears above the text input. | -| callbackOrButtons | ?((text: string) => void),[ButtonsArray](alertios#buttonsarray) | No | This optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called with the prompt's value when the user taps 'OK'. If passed an array of button configurations, each button should include a `text` key, as well as optional `onPress` and `style` keys (see example). `style` should be one of 'default', 'cancel' or 'destructive'. | -| type | [AlertType](alertios#alerttype) | No | This configures the text input. One of 'plain-text', 'secure-text' or 'login-password'. | -| defaultValue | string | No | The default text in text input. | -| keyboardType | string | No | The keyboard type of first text field(if exists). One of 'default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter' or 'web-search'. | - -Example with custom buttons: - -```jsx -AlertIOS.prompt( - 'Enter password', - 'Enter your password to claim your $1.5B in lottery winnings', - [ - { - text: 'Cancel', - onPress: () => console.log('Cancel Pressed'), - style: 'cancel', - }, - { - text: 'OK', - onPress: password => - console.log('OK Pressed, password: ' + password), - }, - ], - 'secure-text', -); -``` - -, - -Example with the default button and a custom callback: - -```jsx -AlertIOS.prompt( - 'Update username', - null, - text => console.log('Your username is ' + text), - null, - 'default', -); -``` - -## Type Definitions - -### AlertType - -An Alert button type - -| Type | -| ----- | -| $Enum | - -**Constants:** - -| Value | Description | -| -------------- | ---------------------------- | -| default | Default alert with no inputs | -| plain-text | Plain text input alert | -| secure-text | Secure text input alert | -| login-password | Login and password alert | - ---- - -### AlertButtonStyle - -An Alert button style - -| Type | -| ----- | -| $Enum | - -**Constants:** - -| Value | Description | -| ----------- | ------------------------ | -| default | Default button style | -| cancel | Cancel button style | -| destructive | Destructive button style | - ---- - -### ButtonsArray - -Array or buttons - -| Type | -| ----- | -| Array | - -**Properties:** - -| Name | Type | Description | -| --------- | --------------------------------------------- | ------------------------------------- | -| [text] | string | Button label | -| [onPress] | function | Callback function when button pressed | -| [style] | [AlertButtonStyle](alertios#alertbuttonstyle) | Button style | - -**Constants:** - -| Value | Description | -| ------- | ------------------------------------- | -| text | Button label | -| onPress | Callback function when button pressed | -| style | Button style | +:::danger Removed from React Native +Use [`Alert`](alert) instead. +::: diff --git a/docs/animated.md b/docs/animated.md index e20ad3ee247..1c33b102442 100644 --- a/docs/animated.md +++ b/docs/animated.md @@ -7,7 +7,9 @@ The `Animated` library is designed to make animations fluid, powerful, and painl The core workflow for creating an animation is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates via animations using `Animated.timing()`. -> Don't modify the animated value directly. You can use the [`useRef` Hook](https://react.dev/reference/react/useRef) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. +:::note +Don't modify the animated value directly. You can use the [`useRef` Hook](https://react.dev/reference/react/useRef) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. +::: ## Example diff --git a/docs/appearance.md b/docs/appearance.md index 32f32367a74..0afefd65e15 100644 --- a/docs/appearance.md +++ b/docs/appearance.md @@ -17,19 +17,27 @@ The `Appearance` module exposes information about the user's appearance preferen -> The `Appearance` API is inspired by the [Media Queries draft](https://drafts.csswg.org/mediaqueries-5/) from the W3C. The color scheme preference is modeled after the [`prefers-color-scheme` CSS media feature](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). +:::info +The `Appearance` API is inspired by the [Media Queries draft](https://drafts.csswg.org/mediaqueries-5/) from the W3C. The color scheme preference is modeled after the [`prefers-color-scheme` CSS media feature](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). +::: -> The color scheme preference will map to the user's Light or [Dark theme](https://developer.android.com/guide/topics/ui/look-and-feel/darktheme) preference on Android 10 (API level 29) devices and higher. +:::info +The color scheme preference will map to the user's Light or [Dark theme](https://developer.android.com/guide/topics/ui/look-and-feel/darktheme) preference on Android 10 (API level 29) devices and higher. +::: -> The color scheme preference will map to the user's Light or [Dark Mode](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/) preference on iOS 13 devices and higher. +:::info +The color scheme preference will map to the user's Light or [Dark Mode](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/) preference on iOS 13 devices and higher. +::: -> Note: When taking a screenshot, by default, the color scheme may flicker between light and dark mode. It happens because the iOS takes snapshots on both color schemes and updating the user interface with color scheme is asynchronous. +:::note +When taking a screenshot, by default, the color scheme may flicker between light and dark mode. It happens because the iOS takes snapshots on both color schemes and updating the user interface with color scheme is asynchronous. +::: @@ -63,13 +71,15 @@ Indicates the current user preferred color scheme. The value may be updated late Supported color schemes: -- `light`: The user prefers a light color theme. -- `dark`: The user prefers a dark color theme. -- null: The user has not indicated a preferred color theme. +- `'light'`: The user prefers a light color theme. +- `'dark'`: The user prefers a dark color theme. +- `null`: The user has not indicated a preferred color theme. See also: `useColorScheme` hook. -> Note: `getColorScheme()` will always return `light` when debugging with Chrome. +::note +`getColorScheme()` will always return `light` when debugging with Chrome. +::: --- @@ -87,7 +97,9 @@ Supported color schemes: - `dark`: Apply dark user interface style. - null: Follow the system's interface style. -> Note: The change will not affect the system's selected interface style or any style set in other applications. +:::note +The change will not affect the system's selected interface style or any style set in other applications. +::: --- diff --git a/docs/appregistry.md b/docs/appregistry.md index fc0b4157857..62ba81a928a 100644 --- a/docs/appregistry.md +++ b/docs/appregistry.md @@ -312,7 +312,9 @@ Application configuration for the `registerConfig` method. | run | function | | section | boolean | -> **Note:** Every config is expected to set either `component` or `run` function. +:::note +Every config is expected to set either `component` or `run` function. +::: ### Registry diff --git a/docs/asyncstorage.md b/docs/asyncstorage.md index 8fa79f07ba8..0084b1bb629 100644 --- a/docs/asyncstorage.md +++ b/docs/asyncstorage.md @@ -3,363 +3,6 @@ id: asyncstorage title: '🚧 AsyncStorage' --- -> **Removed.** Use one of the [community packages](https://reactnative.directory/?search=storage) instead. - -`AsyncStorage` is an unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage. - -It is recommended that you use an abstraction on top of `AsyncStorage` instead of `AsyncStorage` directly for anything more than light usage since it operates globally. - -On iOS, `AsyncStorage` is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android, `AsyncStorage` will use either [RocksDB](https://rocksdb.org/) or SQLite based on what is available. - -The `AsyncStorage` JavaScript code is a facade that provides a clear JavaScript API, real `Error` objects, and non-multi functions. Each method in the API returns a `Promise` object. - -Importing the `AsyncStorage` library: - -```jsx -import {AsyncStorage} from 'react-native'; -``` - -Persisting data: - -```jsx -_storeData = async () => { - try { - await AsyncStorage.setItem( - '@MySuperStore:key', - 'I like to save it.', - ); - } catch (error) { - // Error saving data - } -}; -``` - -Fetching data: - -```jsx -_retrieveData = async () => { - try { - const value = await AsyncStorage.getItem('TASKS'); - if (value !== null) { - // We have data!! - console.log(value); - } - } catch (error) { - // Error retrieving data - } -}; -``` - ---- - -# Reference - -## Methods - -### `getItem()` - -```jsx -static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void) -``` - -Fetches an item for a `key` and invokes a callback upon completion. Returns a `Promise` object. - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | ------------------------------------------- | -------- | ----------------------------------------------------------------- | -| key | string | Yes | Key of the item to fetch. | -| callback | `?(error: ?Error, result: ?string) => void` | No | Function that will be called with a result if found or any error. | - ---- - -### `setItem()` - -```jsx -static setItem(key: string, value: string, [callback]: ?(error: ?Error) => void) -``` - -Sets the value for a `key` and invokes a callback upon completion. Returns a `Promise` object. - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | -------------------------- | -------- | -------------------------------------------- | -| key | string | Yes | Key of the item to set. | -| value | string | Yes | Value to set for the `key`. | -| callback | `?(error: ?Error) => void` | No | Function that will be called with any error. | - ---- - -### `removeItem()` - -```jsx -static removeItem(key: string, [callback]: ?(error: ?Error) => void) -``` - -Removes an item for a `key` and invokes a callback upon completion. Returns a `Promise` object. - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | -------------------------- | -------- | -------------------------------------------- | -| key | string | Yes | Key of the item to remove. | -| callback | `?(error: ?Error) => void` | No | Function that will be called with any error. | - ---- - -### `mergeItem()` - -```jsx -static mergeItem(key: string, value: string, [callback]: ?(error: ?Error) => void) -``` - -Merges an existing `key` value with an input value, assuming both values are stringified JSON. Returns a `Promise` object. - -**NOTE:** This is not supported by all native implementations. - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | -------------------------- | -------- | -------------------------------------------- | -| key | string | Yes | Key of the item to modify. | -| value | string | Yes | New value to merge for the `key`. | -| callback | `?(error: ?Error) => void` | No | Function that will be called with any error. | - -Example: - -```jsx -let UID123_object = { - name: 'Chris', - age: 30, - traits: {hair: 'brown', eyes: 'brown'}, -}; -// You only need to define what will be added or updated -let UID123_delta = { - age: 31, - traits: {eyes: 'blue', shoe_size: 10}, -}; - -AsyncStorage.setItem( - 'UID123', - JSON.stringify(UID123_object), - () => { - AsyncStorage.mergeItem( - 'UID123', - JSON.stringify(UID123_delta), - () => { - AsyncStorage.getItem('UID123', (err, result) => { - console.log(result); - }); - }, - ); - }, -); - -// Console log result: -// => {'name':'Chris','age':31,'traits': -// {'shoe_size':10,'hair':'brown','eyes':'blue'}} -``` - ---- - -### `clear()` - -```jsx -static clear([callback]: ?(error: ?Error) => void) -``` - -Erases _all_ `AsyncStorage` for all clients, libraries, etc. You probably don't want to call this; use `removeItem` or `multiRemove` to clear only your app's keys. Returns a `Promise` object. - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | -------------------------- | -------- | -------------------------------------------- | -| callback | `?(error: ?Error) => void` | No | Function that will be called with any error. | - ---- - -### `getAllKeys()` - -```jsx -static getAllKeys([callback]: ?(error: ?Error, keys: ?Array) => void) -``` - -Gets _all_ keys known to your app; for all callers, libraries, etc. Returns a `Promise` object. - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | ------------------------------------------------ | -------- | --------------------------------------------------------------- | -| callback | `?(error: ?Error, keys: ?Array) => void` | No | Function that will be called with all keys found and any error. | - ---- - -### `flushGetRequests()` - -```jsx -static flushGetRequests(): [object Object] -``` - -Flushes any pending requests using a single batch call to get the data. - ---- - -### `multiGet()` - -```jsx -static multiGet(keys: Array, [callback]: ?(errors: ?Array, result: ?Array>) => void) -``` - -This allows you to batch the fetching of items given an array of `key` inputs. Your callback will be invoked with an array of corresponding key-value pairs found: - -``` -multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']]) -``` - -The method returns a `Promise` object. - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | ----------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------- | -| keys | `Array` | Yes | Array of key for the items to get. | -| callback | `?(errors: ?Array, result: ?Array>) => void` | No | Function that will be called with a key-value array of the results, plus an array of any key-specific errors found. | - -Example: - -```jsx -AsyncStorage.getAllKeys((err, keys) => { - AsyncStorage.multiGet(keys, (err, stores) => { - stores.map((result, i, store) => { - // get at each store's key/value so you can work with it - let key = store[i][0]; - let value = store[i][1]; - }); - }); -}); -``` - ---- - -### `multiSet()` - -```jsx -static multiSet(keyValuePairs: Array>, [callback]: ?(errors: ?Array) => void) -``` - -Use this as a batch operation for storing multiple key-value pairs. When the operation completes you'll get a single callback with any errors: - -``` -multiSet([['k1', 'val1'], ['k2', 'val2']], cb); -``` - -The method returns a `Promise` object. - -**Parameters:** - -| Name | Type | Required | Description | -| ------------- | ---------------------------------- | -------- | ---------------------------------------------------------------------------- | -| keyValuePairs | `Array>` | Yes | Array of key-value array for the items to set. | -| callback | `?(errors: ?Array) => void` | No | Function that will be called with an array of any key-specific errors found. | - ---- - -### `multiRemove()` - -```jsx -static multiRemove(keys: Array, [callback]: ?(errors: ?Array) => void) -``` - -Call this to batch the deletion of all keys in the `keys` array. Returns a `Promise` object. - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | ---------------------------------- | -------- | ----------------------------------------------------------------------- | -| keys | `Array` | Yes | Array of key for the items to delete. | -| callback | `?(errors: ?Array) => void` | No | Function that will be called an array of any key-specific errors found. | - -Example: - -```jsx -let keys = ['k1', 'k2']; -AsyncStorage.multiRemove(keys, err => { - // keys k1 & k2 removed, if they existed - // do most stuff after removal (if you want) -}); -``` - ---- - -### `multiMerge()` - -```jsx -static multiMerge(keyValuePairs: Array>, [callback]: ?(errors: ?Array) => void) -``` - -Batch operation to merge in existing and new values for a given set of keys. This assumes that the values are stringified JSON. Returns a `Promise` object. - -**NOTE**: This is not supported by all native implementations. - -**Parameters:** - -| Name | Type | Required | Description | -| ------------- | ---------------------------------- | -------- | ---------------------------------------------------------------------------- | -| keyValuePairs | `Array>` | Yes | Array of key-value array for the items to merge. | -| callback | `?(errors: ?Array) => void` | No | Function that will be called with an array of any key-specific errors found. | - -Example: - -```jsx -// first user, initial values -let UID234_object = { - name: 'Chris', - age: 30, - traits: {hair: 'brown', eyes: 'brown'}, -}; - -// first user, delta values -let UID234_delta = { - age: 31, - traits: {eyes: 'blue', shoe_size: 10}, -}; - -// second user, initial values -let UID345_object = { - name: 'Marge', - age: 25, - traits: {hair: 'blonde', eyes: 'blue'}, -}; - -// second user, delta values -let UID345_delta = { - age: 26, - traits: {eyes: 'green', shoe_size: 6}, -}; - -let multi_set_pairs = [ - ['UID234', JSON.stringify(UID234_object)], - ['UID345', JSON.stringify(UID345_object)], -]; -let multi_merge_pairs = [ - ['UID234', JSON.stringify(UID234_delta)], - ['UID345', JSON.stringify(UID345_delta)], -]; - -AsyncStorage.multiSet(multi_set_pairs, err => { - AsyncStorage.multiMerge(multi_merge_pairs, err => { - AsyncStorage.multiGet(['UID234', 'UID345'], (err, stores) => { - stores.map((result, i, store) => { - let key = store[i][0]; - let val = store[i][1]; - console.log(key, val); - }); - }); - }); -}); - -// Console log results: -// => UID234 {"name":"Chris","age":31,"traits":{"shoe_size":10,"hair":"brown","eyes":"blue"}} -// => UID345 {"name":"Marge","age":26,"traits":{"shoe_size":6,"hair":"blonde","eyes":"green"}} -``` +:::danger Removed from React Native +Use one of the [community packages](https://reactnative.directory/?search=storage) instead. +::: diff --git a/docs/backhandler.md b/docs/backhandler.md index 66f0a212faa..c3c7c937541 100644 --- a/docs/backhandler.md +++ b/docs/backhandler.md @@ -10,7 +10,9 @@ The event subscriptions are called in reverse order (i.e. the last registered su - **If one subscription returns true,** then subscriptions registered earlier will not be called. - **If no subscription returns true or none are registered,** it programmatically invokes the default back button functionality to exit the app. -> **Warning for modal users:** If your app shows an opened `Modal`, `BackHandler` will not publish any events ([see `Modal` docs](modal#onrequestclose)). +:::warning Warning for modal users +If your app shows an opened `Modal`, `BackHandler` will not publish any events ([see `Modal` docs](modal#onrequestclose)). +::: ## Pattern diff --git a/docs/checkbox.md b/docs/checkbox.md index f9558d0f48d..0a85111a8ae 100644 --- a/docs/checkbox.md +++ b/docs/checkbox.md @@ -1,113 +1,8 @@ --- id: checkbox -title: '🚧 CheckBox' +title: '❌ CheckBox' --- -> **Removed.** Use one of the [community packages](https://reactnative.directory/?search=checkbox) instead. - -Renders a boolean input (Android only). - -This is a controlled component that requires an `onValueChange` callback that updates the `value` prop in order for the component to reflect user actions. If the `value` prop is not updated, the component will continue to render the supplied `value` prop instead of the expected result of any user actions. - -## Example - -```SnackPlayer name=CheckBox%20Component%20Example&supportedPlatforms=android,web&ext=js -import React, {useState} from 'react'; -import {CheckBox, Text, StyleSheet, View} from 'react-native'; - -const App = () => { - const [isSelected, setSelection] = useState(false); - - return ( - - - - Do you like React Native? - - Is CheckBox selected: {isSelected ? 'πŸ‘' : 'πŸ‘Ž'} - - ); -}; - -const styles = StyleSheet.create({ - container: { - flex: 1, - alignItems: 'center', - justifyContent: 'center', - }, - checkboxContainer: { - flexDirection: 'row', - marginBottom: 20, - }, - checkbox: { - alignSelf: 'center', - }, - label: { - margin: 8, - }, -}); - -export default App; -``` - ---- - -# Reference - -## Props - -Inherits [View Props](view#props). - ---- - -### `disabled` - -If true the user won't be able to toggle the checkbox. Default value is `false`. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onChange` - -Used in case the props change removes the component. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onValueChange` - -Invoked with the new value when the value changes. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `value` - -The value of the checkbox. If true the checkbox will be turned on. Default value is `false`. - -| Type | Required | -| ---- | -------- | -| bool | No | +:::danger Removed from React Native +Use one of the [community packages](https://reactnative.directory/?search=checkbox) instead. +::: diff --git a/docs/clipboard.md b/docs/clipboard.md index 8e180de64e3..2e67bf9ba5a 100644 --- a/docs/clipboard.md +++ b/docs/clipboard.md @@ -1,109 +1,8 @@ --- id: clipboard -title: '🚧 Clipboard' +title: '❌ Clipboard' --- -> **Removed.** Use one of the [community packages](https://reactnative.directory/?search=clipboard) instead. - -`Clipboard` gives you an interface for setting and getting content from Clipboard on both Android and iOS - ---- - -## Example - -```SnackPlayer name=Clipboard%20API%20Example&supportedPlatforms=ios,android -import React, {useState} from 'react'; -import { - View, - Text, - TouchableOpacity, - Clipboard, - StyleSheet, -} from 'react-native'; - -const App = () => { - const [copiedText, setCopiedText] = useState(''); - - const copyToClipboard = () => { - Clipboard.setString('hello world'); - }; - - const fetchCopiedText = async () => { - const text = await Clipboard.getString(); - setCopiedText(text); - }; - - return ( - - - copyToClipboard()}> - Click here to copy to Clipboard - - fetchCopiedText()}> - View copied text - - - {copiedText} - - - ); -}; - -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, - copiedText: { - marginTop: 10, - color: 'red', - }, -}); - -export default App; -``` - -# Reference - -## Methods - -### `getString()` - -```jsx -static getString() -``` - -Get content of string type, this method returns a `Promise`, so you can use following code to get clipboard content - -```jsx -async _getContent() { - const content = await Clipboard.getString(); -} -``` - ---- - -### `setString()` - -```jsx -static setString(content) -``` - -Set content of string type. You can use following code to set clipboard content - -```jsx -_setContent() { - Clipboard.setString('hello world'); -} -``` - -**Parameters:** - -| Name | Type | Required | Description | -| ------- | ------ | -------- | ----------------------------------------- | -| content | string | Yes | The content to be stored in the clipboard | - -_Notice_ - -Be careful when you're trying to copy to clipboard any data except `string` and `number`, some data need additional stringification. For example, if you will try to copy array - Android will raise an exception, but iOS will not. +:::danger Removed from React Native +Use one of the [community packages](https://reactnative.directory/?search=clipboard) instead. +::: diff --git a/docs/datepickerandroid.md b/docs/datepickerandroid.md index 77d213f6eb2..d837b48b957 100644 --- a/docs/datepickerandroid.md +++ b/docs/datepickerandroid.md @@ -1,75 +1,8 @@ --- id: datepickerandroid -title: '🚧 DatePickerAndroid' +title: '❌ DatePickerAndroid' --- -> **Removed.** Use one of the [community packages](https://reactnative.directory/?search=datepicker) instead. - -Opens the standard Android date picker dialog. - -### Example - -```jsx -try { - const {action, year, month, day} = await DatePickerAndroid.open( - { - // Use `new Date()` for current date. - // May 25 2020. Month 0 is January. - date: new Date(2020, 4, 25), - }, - ); - if (action !== DatePickerAndroid.dismissedAction) { - // Selected year, month (0-11), day - } -} catch ({code, message}) { - console.warn('Cannot open date picker', message); -} -``` - ---- - -# Reference - -## Methods - -### `open()` - -```jsx -static open(options) -``` - -Opens the standard Android date picker dialog. - -The available keys for the `options` object are: - -- `date` (`Date` object or timestamp in milliseconds) - date to show by default -- `minDate` (`Date` or timestamp in milliseconds) - minimum date that can be selected -- `maxDate` (`Date` object or timestamp in milliseconds) - maximum date that can be selected -- `mode` (`enum('calendar', 'spinner', 'default')`) - To set the date-picker mode to calendar/spinner/default - - 'calendar': Show a date picker in calendar mode. - - 'spinner': Show a date picker in spinner mode. - - 'default': Show a default native date picker(spinner/calendar) based on android versions. - -Returns a Promise which will be invoked an object containing `action`, `year`, `month` (0-11), `day` if the user picked a date. If the user dismissed the dialog, the Promise will still be resolved with action being `DatePickerAndroid.dismissedAction` and all the other keys being undefined. **Always** check whether the `action` is equal to `DatePickerAndroid.dateSetAction` before reading the values. - -Note the native date picker dialog has some UI glitches on Android 4 and lower when using the `minDate` and `maxDate` options. - ---- - -### `dateSetAction()` - -```jsx -static dateSetAction() -``` - -A date has been selected. - ---- - -### `dismissedAction()` - -```jsx -static dismissedAction() -``` - -The dialog has been dismissed. +:::danger Removed from React Native +Use one of the [community packages](https://reactnative.directory/?search=datepicker) instead. +::: diff --git a/docs/datepickerios.md b/docs/datepickerios.md index 4b9c9840c24..0e536ffa686 100644 --- a/docs/datepickerios.md +++ b/docs/datepickerios.md @@ -1,162 +1,8 @@ --- id: datepickerios -title: '🚧 DatePickerIOS' +title: '❌ DatePickerIOS' --- -> **Removed.** Use one of the [community packages](https://reactnative.directory/?search=datepicker) instead. - -Use `DatePickerIOS` to render a date/time picker (selector) on iOS. This is a controlled component, so you must hook in to the `onDateChange` callback and update the `date` prop in order for the component to update, otherwise the user's change will be reverted immediately to reflect `props.date` as the source of truth. - -### Example - -```SnackPlayer name=DatePickerIOS&supportedPlatforms=ios&disableLinting=true -import React, {useState} from 'react'; -import {DatePickerIOS, View, StyleSheet} from 'react-native'; - -const App = () => { - const [chosenDate, setChosenDate] = useState(new Date()); - - return ( - - - - ); -}; - -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center', - }, -}); - -export default App; -``` - ---- - -# Reference - -## Props - -Inherits [View Props](view.md#props). - -### `date` - -The currently selected date. - -| Type | Required | -| ---- | -------- | -| Date | Yes | - ---- - -### `onChange` - -Date change handler. - -This is called when the user changes the date or time in the UI. The first and only argument is an Event. For getting the date the picker was changed to, use onDateChange instead. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDateChange` - -Date change handler. - -This is called when the user changes the date or time in the UI. The first and only argument is a Date object representing the new date and time. - -| Type | Required | -| -------- | -------- | -| function | Yes | - ---- - -### `maximumDate` - -Maximum date. - -Restricts the range of possible date/time values. - -| Type | Required | -| ---- | -------- | -| Date | No | - -Example with `maximumDate` set to December 31, 2017: - -
- ---- - -### `minimumDate` - -Minimum date. - -Restricts the range of possible date/time values. - -| Type | Required | -| ---- | -------- | -| Date | No | - -See [`maximumDate`](#maximumdate) for an example image. - ---- - -### `minuteInterval` - -The interval at which minutes can be selected. - -| Type | Required | -| ------------------------------------------ | -------- | -| enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30) | No | - -Example with `minuteInterval` set to `10`: - -
- ---- - -### `mode` - -The date picker mode. - -| Type | Required | -| --------------------------------------------- | -------- | -| enum('date', 'time', 'datetime', 'countdown') | No | - -Example with `mode` set to `date`, `time`, and `datetime`: ![](/docs/assets/DatePickerIOS/mode.png) - ---- - -### `locale` - -The locale for the date picker. Value needs to be a [Locale ID](https://developer.apple.com/library/content/documentation/MacOSX/Conceptual/BPInternational/LanguageandLocaleIDs/LanguageandLocaleIDs.html). - -| Type | Required | -| ------ | -------- | -| String | No | - ---- - -### `timeZoneOffsetInMinutes` - -Timezone offset in minutes. - -By default, the date picker will use the device's timezone. With this parameter, it is possible to force a certain timezone offset. For instance, to show times in Pacific Standard Time, pass -7 \* 60. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `initialDate` - -Provides an initial value that will change when the user starts selecting a date. It is useful for use-cases where you do not want to deal with listening to events and updating the date prop to keep the controlled state in sync. The controlled state has known bugs which causes it to go out of sync with native. The initialDate prop is intended to allow you to have native be source of truth. - -| Type | Required | -| ---- | -------- | -| Date | No | +:::danger Removed from React Native +Use one of the [community packages](https://reactnative.directory/?search=datepicker) instead. +::: diff --git a/docs/dimensions.md b/docs/dimensions.md index cf329d65f01..9ebb8561739 100644 --- a/docs/dimensions.md +++ b/docs/dimensions.md @@ -3,7 +3,9 @@ id: dimensions title: Dimensions --- -> [`useWindowDimensions`](usewindowdimensions) is the preferred API for React components. Unlike `Dimensions`, it updates as the window's dimensions update. This works nicely with the React paradigm. +:::info +[`useWindowDimensions`](usewindowdimensions) is the preferred API for React components. Unlike `Dimensions`, it updates as the window's dimensions update. This works nicely with the React paradigm. +::: ```tsx import {Dimensions} from 'react-native'; @@ -16,7 +18,9 @@ const windowWidth = Dimensions.get('window').width; const windowHeight = Dimensions.get('window').height; ``` -> Although dimensions are available immediately, they may change (e.g due to device rotation, foldable devices etc) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a `StyleSheet`). +:::note +Although dimensions are available immediately, they may change (e.g due to device rotation, foldable devices etc) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a `StyleSheet`). +::: If you are targeting foldable devices or devices which can change the screen size or app window size, you can use the event listener available in the Dimensions module as shown in the below example. @@ -119,9 +123,9 @@ Example: `const {height, width} = Dimensions.get('window');` | ------------------------------------------------------------------ | ------ | --------------------------------------------------------------------------------- | | dim
Required
| string | Name of dimension as defined when calling `set`. Returns value for the dimension. | -> For Android the `window` dimension will exclude the size used by the `status bar` (if not translucent) and `bottom navigation bar` - ---- +:::note +For Android the `window` dimension will be reduced by the size of status bar (if not translucent) and bottom navigation bar. +::: ## Type Definitions diff --git a/docs/dynamiccolorios.md b/docs/dynamiccolorios.md index d42afdb13e9..08b024d15f6 100644 --- a/docs/dynamiccolorios.md +++ b/docs/dynamiccolorios.md @@ -26,12 +26,16 @@ At runtime, the system will choose which of the colors to display depending on t -> If you’re familiar with `@media (prefers-color-scheme: dark)` in CSS, this is similar! Only instead of defining all the colors in a media query, you define which color to use under what circumstances right there where you're using it. Neat! +:::info +If you’re familiar with `@media (prefers-color-scheme: dark)` in CSS, this is similar! Only instead of defining all the colors in a media query, you define which color to use under what circumstances right there where you're using it. Neat! +::: -> The `DynamicColorIOS` function is similar to the iOS native methods [`UIColor colorWithDynamicProvider:`](https://developer.apple.com/documentation/uikit/uicolor/3238040-colorwithdynamicprovider) +:::info +The `DynamicColorIOS` function is similar to the iOS native methods [`UIColor colorWithDynamicProvider:`](https://developer.apple.com/documentation/uikit/uicolor/3238040-colorwithdynamicprovider). +::: diff --git a/docs/get-started-without-a-framework.md b/docs/get-started-without-a-framework.md index 450fe5e0cb6..57f807bc828 100644 --- a/docs/get-started-without-a-framework.md +++ b/docs/get-started-without-a-framework.md @@ -99,7 +99,9 @@ If everything is set up correctly, you should see your new app running in your A This is one way to run your app - you can also run it directly from within Android Studio. -> If you can't get this to work, see the [Troubleshooting](troubleshooting.md) page. +::tip +If you can't get this to work, see the [Troubleshooting](troubleshooting.md) page. +:: ### Step 4: Modifying your app diff --git a/docs/image.md b/docs/image.md index a3f6fb86bf7..7e34738b09a 100644 --- a/docs/image.md +++ b/docs/image.md @@ -7,7 +7,9 @@ A React component for displaying different types of images, including network im This example shows fetching and displaying an image from local storage as well as one from network and even from data provided in the `'data:'` uri scheme. -> Note that for network and data images, you will need to manually specify the dimensions of your image! +:::note +For network and data images, you will need to manually specify the dimensions of your image! +::: ## Examples @@ -111,7 +113,9 @@ dependencies { } ``` -> Note: the version listed above may not be updated in time. Please check [`packages/react-native/gradle/libs.versions.toml`](https://github.com/facebook/react-native/blob/main/packages/react-native/gradle/libs.versions.toml) in the main repo to see which fresco version is being used in a specific tagged version. +:::note +The version listed above may not be updated in time. Please check [`packages/react-native/gradle/libs.versions.toml`](https://github.com/facebook/react-native/blob/main/packages/react-native/gradle/libs.versions.toml) in the main repo to see which fresco version is being used in a specific tagged version. +::: --- @@ -163,7 +167,9 @@ blurRadius: the blur radius of the blur filter added to the image. | ------ | | number | -> Tip: On IOS, you will need to increase `blurRadius` by more than `5`. +:::tip +On IOS, you will need to increase `blurRadius` by more than `5`. +::: --- @@ -198,7 +204,9 @@ A static image to display while loading the image source. | -------------------------------- | | [ImageSource](image#imagesource) | -> **Note:** On Android, the default source prop is ignored on debug builds. +:::note +On Android, the default source prop is ignored on debug builds. +::: --- diff --git a/docs/imagepickerios.md b/docs/imagepickerios.md index 1fd3f7c96f3..d4749216253 100644 --- a/docs/imagepickerios.md +++ b/docs/imagepickerios.md @@ -1,79 +1,8 @@ --- id: imagepickerios -title: '🚧 ImagePickerIOS' +title: '❌ ImagePickerIOS' --- -> **Removed.** Use one of the [community packages](https://reactnative.directory/?search=image+picker) instead. - ---- - -# Reference - -## Methods - -### `canRecordVideos()` - -```jsx -static canRecordVideos(callback) -``` - ---- - -### `canUseCamera()` - -```jsx -static canUseCamera(callback) -``` - ---- - -### `openCameraDialog()` - -```jsx -static openCameraDialog(config, successCallback, cancelCallback) -``` - -**Parameters:** - -| Name | Type | Required | Description | -| --------------- | -------- | -------- | ----------- | -| config | object | No | See below. | -| successCallback | function | No | See below. | -| cancelCallback | function | No | See below. | - -`config` is an object containing: - -- `videoMode` : An optional boolean value that defaults to false. - -`successCallback` is an optional callback function that's invoked when the select dialog is opened successfully. It will include the following data: - -- `[string, number, number]` - -`cancelCallback` is an optional callback function that's invoked when the camera dialog is canceled. - ---- - -### `openSelectDialog()` - -```jsx -static openSelectDialog(config, successCallback, cancelCallback) -``` - -**Parameters:** - -| Name | Type | Required | Description | -| --------------- | -------- | -------- | ----------- | -| config | object | No | See below. | -| successCallback | function | No | See below. | -| cancelCallback | function | No | See below. | - -`config` is an object containing: - -- `showImages` : An optional boolean value that defaults to false. -- `showVideos`: An optional boolean value that defaults to false. - -`successCallback` is an optional callback function that's invoked when the select dialog is opened successfully. It will include the following data: - -- `[string, number, number]` - -`cancelCallback` is an optional callback function that's invoked when the select dialog is canceled. +:::danger Removed from React Native +Use one of the [community packages](https://reactnative.directory/?search=image+picker) instead. +::: diff --git a/docs/keyboard.md b/docs/keyboard.md index f09f30b85aa..8560ce4999d 100644 --- a/docs/keyboard.md +++ b/docs/keyboard.md @@ -101,7 +101,9 @@ This can be any of the following: - `keyboardWillChangeFrame` - `keyboardDidChangeFrame` -> Note that only `keyboardDidShow` and `keyboardDidHide` events are available on Android. The events will not be fired when using Android 10 and under if your activity has `android:windowSoftInputMode` set to `adjustNothing`. +:::note +Only `keyboardDidShow` and `keyboardDidHide` events are available on Android. The events will not be fired when using Android 10 or below if your activity has `android:windowSoftInputMode` set to `adjustResize` or `adjustNothing`. +::: --- diff --git a/docs/keyboardavoidingview.md b/docs/keyboardavoidingview.md index b77375008f8..55cce32cf54 100644 --- a/docs/keyboardavoidingview.md +++ b/docs/keyboardavoidingview.md @@ -83,7 +83,9 @@ Inherits [View Props](view.md#props). Specify how to react to the presence of the keyboard. -> Android and iOS both interact with this prop differently. On both iOS and Android, setting `behavior` is recommended. +:::note +Android and iOS both interact with this prop differently. On both iOS and Android, setting `behavior` is recommended. +::: | Type | | ------------------------------------------- | diff --git a/docs/layout-props.md b/docs/layout-props.md index 114ff5da96a..e19336f59a6 100644 --- a/docs/layout-props.md +++ b/docs/layout-props.md @@ -5,7 +5,9 @@ title: Layout Props import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; -> More detailed examples about those properties can be found on the [Layout with Flexbox](flexbox) page. +:::info +More detailed examples about those properties can be found on the [Layout with Flexbox](flexbox) page. +::: ### Example diff --git a/docs/modal.md b/docs/modal.md index 9c2f677810e..66e1727be29 100644 --- a/docs/modal.md +++ b/docs/modal.md @@ -106,7 +106,9 @@ Inherits [View Props](view.md#props). ### `animated` -> **Deprecated.** Use the [`animationType`](modal.md#animationtype) prop instead. +:::warning Deprecated +Use the [`animationType`](modal.md#animationtype) prop instead. +::: --- @@ -239,7 +241,9 @@ The `statusBarTranslucent` prop determines whether your modal should go under th The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations. On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field. -> When using `presentationStyle` of `pageSheet` or `formSheet`, this property will be ignored by iOS. +:::note +When using `presentationStyle` of `pageSheet` or `formSheet`, this property will be ignored on iOS. +::: | Type | Default | | -------------------------------------------------------------------------------------------------------------- | -------------- | diff --git a/docs/optimizing-flatlist-configuration.md b/docs/optimizing-flatlist-configuration.md index b7f2bb734d2..69cf15cc0fb 100644 --- a/docs/optimizing-flatlist-configuration.md +++ b/docs/optimizing-flatlist-configuration.md @@ -21,7 +21,7 @@ title: Optimizing Flatlist Configuration Here are a list of props that can help to improve `FlatList` performance: -### removeClippedSubviews +### `removeClippedSubviews` | Type | Default | | ------- | ------- | @@ -33,7 +33,7 @@ If `true`, views that are outside of the viewport are detached from the native v **Cons:** Be aware that this implementation can have bugs, such as missing content (mainly observed on iOS), especially if you are doing complex things with transforms and/or absolute positioning. Also note this does not save significant memory because the views are not deallocated, only detached. -### maxToRenderPerBatch +### `maxToRenderPerBatch` | Type | Default | | ------ | ------- | @@ -45,7 +45,7 @@ It is a `VirtualizedList` prop that can be passed through `FlatList`. This contr **Cons:** More items per batch means longer periods of JavaScript execution potentially blocking other event processing, like presses, hurting responsiveness. -### updateCellsBatchingPeriod +### `updateCellsBatchingPeriod` | Type | Default | | ------ | ------- | @@ -69,7 +69,7 @@ The initial amount of items to render. **Cons:** Setting a low `initialNumToRender` may cause blank areas, especially if it's too small to cover the viewport on initial render. -### windowSize +### `windowSize` | Type | Default | | ------ | ------- | @@ -121,19 +121,19 @@ In this example, we have determined that MyListItem should be re-rendered only w You can use the community packages (such as [react-native-fast-image](https://github.com/DylanVann/react-native-fast-image) from [@DylanVann](https://github.com/DylanVann)) for more performant images. Every image in your list is a `new Image()` instance. The faster it reaches the `loaded` hook, the faster your JavaScript thread will be free again. -### Use getItemLayout +### Use `getItemLayout` If all your list item components have the same height (or width, for a horizontal list), providing the [getItemLayout](flatlist#getitemlayout) prop removes the need for your `FlatList` to manage async layout calculations. This is a very desirable optimization technique. If your components have dynamic size and you really need performance, consider asking your design team if they may think of a redesign in order to perform better. -### Use keyExtractor or key +### Use `keyExtractor` or `key` You can set the [`keyExtractor`](flatlist#keyextractor) to your `FlatList` component. This prop is used for caching and as the React `key` to track item re-ordering. You can also use a `key` prop in your item component. -### Avoid anonymous function on renderItem +### Avoid anonymous function on `renderItem` For functional components, move the `renderItem` function outside of the returned JSX. Also, ensure that it is wrapped in a `useCallback` hook to prevent it from being recreated each render. diff --git a/docs/platformcolor.md b/docs/platformcolor.md index d087f3327d8..17371f76c26 100644 --- a/docs/platformcolor.md +++ b/docs/platformcolor.md @@ -36,7 +36,9 @@ For a full list of the types of system colors supported, see: -> If you’re familiar with design systems, another way of thinking about this is that `PlatformColor` lets you tap into the local design system's color tokens so your app can blend right in! +:::info +If you’re familiar with design systems, another way of thinking about this is that `PlatformColor` lets you tap into the local design system's color tokens so your app can blend right in! +::: @@ -84,4 +86,6 @@ export default App; The string value provided to the `PlatformColor` function must match the string as it exists on the native platform where the app is running. In order to avoid runtime errors, the function should be wrapped in a platform check, either through a `Platform.OS === 'platform'` or a `Platform.select()`, as shown on the example above. -> **Note:** You can find a complete example that demonstrates proper, intended use of `PlatformColor` in [PlatformColorExample.js](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js). +:::note +You can find a complete example that demonstrates proper, intended use of `PlatformColor` in [PlatformColorExample.js](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js). +::: diff --git a/docs/pressable.md b/docs/pressable.md index 08ac6f44307..590c77db974 100644 --- a/docs/pressable.md +++ b/docs/pressable.md @@ -29,7 +29,9 @@ Fingers are not the most precise instruments, and it is common for users to acci `PressRect` allows presses to move beyond the element and its `HitRect` while maintaining activation and being eligible for a "press"β€”think of sliding your finger slowly away from a button you're pressing down on. -> The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views. +:::note +The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views. +:::
Diagram of HitRect and PressRect and how they work. @@ -38,7 +40,9 @@ Fingers are not the most precise instruments, and it is common for users to acci
-> `Pressable` uses React Native's `Pressability` API. For more information around the state machine flow of Pressability and how it works, check out the implementation for [Pressability](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Pressability/Pressability.js#L350). +:::info +`Pressable` uses React Native's `Pressability` API. For more information around the state machine flow of Pressability and how it works, check out the implementation for [Pressability](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Pressability/Pressability.js#L350). +::: ## Example diff --git a/docs/progressbarandroid.md b/docs/progressbarandroid.md index ba5ee781a2a..1ce565336c6 100644 --- a/docs/progressbarandroid.md +++ b/docs/progressbarandroid.md @@ -3,7 +3,9 @@ id: progressbarandroid title: '🚧 ProgressBarAndroid' --- -> **Deprecated.** Use one of the [community packages](https://reactnative.directory/?search=progressbar) instead. +:::warning Deprecated +Use one of the [community packages](https://reactnative.directory/?search=progressbar) instead. +::: Android-only React component used to indicate that the app is loading or there is some activity in the app. diff --git a/docs/pushnotificationios.md b/docs/pushnotificationios.md index 5b3bedff114..bebca84ee24 100644 --- a/docs/pushnotificationios.md +++ b/docs/pushnotificationios.md @@ -3,7 +3,9 @@ id: pushnotificationios title: '🚧 PushNotificationIOS' --- -> **Deprecated.** Use the [community package](https://github.com/react-native-push-notification/ios) instead. +:::warning Deprecated +Use one of the [community packages](https://reactnative.directory/?search=notification) instead. +:::

Projects with Native Code Only

diff --git a/docs/refreshcontrol.md b/docs/refreshcontrol.md index e7f8fea5e83..7f7faab6744 100644 --- a/docs/refreshcontrol.md +++ b/docs/refreshcontrol.md @@ -52,7 +52,9 @@ const styles = StyleSheet.create({ export default App; ``` -> Note: `refreshing` is a controlled prop, this is why it needs to be set to `true` in the `onRefresh` function otherwise the refresh indicator will stop immediately. +:::note +`refreshing` is a controlled prop, this is why it needs to be set to `true` in the `onRefresh` function otherwise the refresh indicator will stop immediately. +::: --- diff --git a/docs/safeareaview.md b/docs/safeareaview.md index c93bf08b733..cb1db9fdeb0 100644 --- a/docs/safeareaview.md +++ b/docs/safeareaview.md @@ -1,9 +1,11 @@ --- id: safeareaview -title: SafeAreaView +title: '🚧 SafeAreaView' --- -> **Deprecated.** Use [react-native-safe-area-context](https://github.com/AppAndFlow/react-native-safe-area-context) instead. +:::warning Deprecated +Use [react-native-safe-area-context](https://github.com/AppAndFlow/react-native-safe-area-context) instead. +::: The purpose of `SafeAreaView` is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later. diff --git a/docs/scrollview.md b/docs/scrollview.md index 6ffdf71e986..1605e7df037 100644 --- a/docs/scrollview.md +++ b/docs/scrollview.md @@ -754,7 +754,9 @@ Scrolls to a given x, y offset, either immediately, with a smooth animation. `scrollTo({x: 0, y: 0, animated: true})` -> Note: The weird function signature is due to the fact that, for historical reasons, the function also accepts separate arguments as an alternative to the options object. This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED. +:::note +The weird function signature is due to the fact that, for historical reasons, the function also accepts separate arguments as an alternative to the options object. This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED. +::: --- diff --git a/docs/sectionlist.md b/docs/sectionlist.md index 9fe404005dd..6c7d8892691 100644 --- a/docs/sectionlist.md +++ b/docs/sectionlist.md @@ -249,7 +249,9 @@ Set this true while waiting for new data from a refresh. ### `removeClippedSubviews` -> Note: may have bugs (missing content) in some circumstances - use at your own risk. +:::warning +Using this property may lead to bugs (missing content) in some circumstances - use at your own risk. +::: This may improve scroll performance for large lists. diff --git a/docs/segmentedcontrolios.md b/docs/segmentedcontrolios.md index eb7ec3a49d3..aad358069ef 100644 --- a/docs/segmentedcontrolios.md +++ b/docs/segmentedcontrolios.md @@ -3,124 +3,8 @@ id: segmentedcontrolios title: '🚧 SegmentedControlIOS' --- -> **Removed from React Native.** Use one of the [community packages](https://reactnative.directory/?search=segmentedcontrol) instead. - -Uses `SegmentedControlIOS` to render a UISegmentedControl iOS. - -#### Programmatically changing selected index - -The selected index can be changed on the fly by assigning the selectedIndex prop to a state variable, then changing that variable. Note that the state variable would need to be updated as the user selects a value and changes the index, as shown in the example below. - -## Example - -```SnackPlayer name=SegmentedControlIOS%20Example&supportedPlatforms=ios&ext=js -import React, {useState} from 'react'; -import {SegmentedControlIOS, StyleSheet, Text, View} from 'react-native'; - -const App = () => { - const [index, setIndex] = useState(0); - return ( - - { - setIndex(event.nativeEvent.selectedSegmentIndex); - }} - /> - Selected index: {index} - - ); -}; - -const styles = StyleSheet.create({ - container: { - flex: 1, - padding: 24, - justifyContent: 'center', - }, - text: { - marginTop: 24, - }, -}); - -export default App; -``` +:::danger Removed from React Native +Use one of the [community packages](https://reactnative.directory/?search=segmentedcontrol) instead. +::: --- - -# Reference - -## Props - -Inherits [View Props](view.md#props). - -### `enabled` - -If false the user won't be able to interact with the control. Default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `momentary` - -If true, then selecting a segment won't persist visually. The `onValueChange` callback will still work as expected. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onChange` - -Callback that is called when the user taps a segment; passes the event as an argument - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onValueChange` - -Callback that is called when the user taps a segment; passes the segment's value as an argument - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `selectedIndex` - -The index in `props.values` of the segment to be (pre)selected. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `tintColor` - -> **Note:** `tintColor` is not supported on the iOS 13+. - -Accent color of the control. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `values` - -The labels for the control's segment buttons, in order. - -| Type | Required | -| --------------- | -------- | -| array of string | No | diff --git a/docs/set-up-your-environment.md b/docs/set-up-your-environment.md index 589ab38be14..de82c388d81 100644 --- a/docs/set-up-your-environment.md +++ b/docs/set-up-your-environment.md @@ -71,7 +71,9 @@ If you have constraints that prevent you from using a Framework, or you'd like t ## Unsupported -> A Mac is required to build projects with native code for iOS. You can use [Expo Go](https://expo.dev/go) from [Expo](environment-setup#start-a-new-react-native-project-with-expo) to develop your app on your iOS device. +:::info +A Mac is required to build projects with native code for iOS. You can use [Expo Go](https://expo.dev/go) from [Expo](environment-setup#start-a-new-react-native-project-with-expo) to develop your app on your iOS device. +::: @@ -95,7 +97,9 @@ If you have constraints that prevent you from using a Framework, or you'd like t ## Unsupported -> A Mac is required to build projects with native code for iOS. You can use [Expo Go](https://expo.dev/go) from [Expo](environment-setup#start-a-new-react-native-project-with-expo) to develop your app on your iOS device. +:::info +A Mac is required to build projects with native code for iOS. You can use [Expo Go](https://expo.dev/go) from [Expo](environment-setup#start-a-new-react-native-project-with-expo) to develop your app on your iOS device. +::: diff --git a/docs/settings.md b/docs/settings.md index 9eb5b19accd..01c0533d813 100644 --- a/docs/settings.md +++ b/docs/settings.md @@ -98,4 +98,6 @@ static watchKeys(keys: string | array, callback: () => void): number; Subscribe to be notified when the value for any of the keys specified by the `keys` parameter has been changed in `NSUserDefaults`. Returns a `watchId` number that may be used with `clearWatch()` to unsubscribe. -> **Note:** `watchKeys()` by design ignores internal `set()` calls and fires callback only on changes preformed outside of React Native code. +:::note +`watchKeys()` by design ignores internal `set()` calls and fires callback only on changes preformed outside of React Native code. +::: diff --git a/docs/statusbarios.md b/docs/statusbarios.md index 5139d8715a4..38ae93a274e 100644 --- a/docs/statusbarios.md +++ b/docs/statusbarios.md @@ -3,6 +3,8 @@ id: statusbarios title: '🚧 StatusBarIOS' --- -> **Deleted.** Use [`StatusBar`](statusbar.md) for mutating the status bar. +:::danger Removed from React Native +Use [`StatusBar`](statusbar.md) for mutating the status bar. +::: --- diff --git a/docs/stylesheet.md b/docs/stylesheet.md index d160a22edc6..62f32c8f805 100644 --- a/docs/stylesheet.md +++ b/docs/stylesheet.md @@ -174,7 +174,9 @@ export default App; ### `setStyleAttributePreprocessor()` -> **WARNING: EXPERIMENTAL.** Breaking changes will probably happen a lot and will not be reliably announced. The whole thing might be deleted, who knows? Use at your own risk. +:::warning Experimental +Breaking changes will probably happen a lot and will not be reliably announced. The whole thing might be deleted, who knows? Use at your own risk. +::: ```tsx static setStyleAttributePreprocessor( diff --git a/docs/text.md b/docs/text.md index a81b9f0b495..b6a0202e2e9 100644 --- a/docs/text.md +++ b/docs/text.md @@ -430,7 +430,9 @@ This can be one of the following values: - `tail` - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..." - `clip` - Lines are not drawn past the edge of the text container. -> On Android, when `numberOfLines` is set to a value higher than `1`, only `tail` value will work correctly. +:::note +On Android, when `numberOfLines` is set to a value higher than `1`, only `tail` value will work correctly. +::: | Type | Default | | ---------------------------------------------- | ------- | diff --git a/docs/textinput.md b/docs/textinput.md index 97dfad51faf..56c8e9924a0 100644 --- a/docs/textinput.md +++ b/docs/textinput.md @@ -238,7 +238,9 @@ If `true`, focuses the input. The default value is `false`. ### `blurOnSubmit` -> **Deprecated.** Note that `submitBehavior` now takes the place of `blurOnSubmit` and will override any behavior defined by `blurOnSubmit`. See [submitBehavior](textinput#submitbehavior) +:::warning Deprecated +Note that `submitBehavior` now takes the place of `blurOnSubmit` and will override any behavior defined by `blurOnSubmit`. See [submitBehavior](textinput#submitbehavior). +::: If `true`, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting `blurOnSubmit` to `true` means that pressing return will blur the field and trigger the `onSubmitEditing` event instead of inserting a newline into the field. diff --git a/docs/timepickerandroid.md b/docs/timepickerandroid.md index c39d3da6ac1..29bf4573cef 100644 --- a/docs/timepickerandroid.md +++ b/docs/timepickerandroid.md @@ -1,71 +1,8 @@ --- id: timepickerandroid -title: '🚧 TimePickerAndroid' +title: '❌ TimePickerAndroid' --- -> **Removed.** Use one of the [community packages](https://reactnative.directory/?search=timepicker) instead. - -Opens the standard Android time picker dialog. - -### Example - -```jsx -try { - const {action, hour, minute} = await TimePickerAndroid.open({ - hour: 14, - minute: 0, - is24Hour: false, // Will display '2 PM' - }); - if (action !== TimePickerAndroid.dismissedAction) { - // Selected hour (0-23), minute (0-59) - } -} catch ({code, message}) { - console.warn('Cannot open time picker', message); -} -``` - ---- - -# Reference - -## Methods - -### `open()` - -```jsx -static open(options) -``` - -Opens the standard Android time picker dialog. - -The available keys for the `options` object are: - -- `hour` (0-23) - the hour to show, defaults to the current time -- `minute` (0-59) - the minute to show, defaults to the current time -- `is24Hour` (boolean) - If `true`, the picker uses the 24-hour format. If `false`, the picker shows an AM/PM chooser. If undefined, the default for the current locale is used. -- `mode` (`enum('clock', 'spinner', 'default')`) - set the time picker mode - - 'clock': Show a time picker in clock mode. - - 'spinner': Show a time picker in spinner mode. - - 'default': Show a default time picker based on Android versions. - -Returns a Promise which will be invoked an object containing `action`, `hour` (0-23), `minute` (0-59) if the user picked a time. If the user dismissed the dialog, the Promise will still be resolved with action being `TimePickerAndroid.dismissedAction` and all the other keys being undefined. **Always** check whether the `action` before reading the values. - ---- - -### `timeSetAction()` - -```jsx -static timeSetAction() -``` - -A time has been selected. - ---- - -### `dismissedAction()` - -```jsx -static dismissedAction() -``` - -The dialog has been dismissed. +:::danger Removed from React Native +Use one of the [community packages](https://reactnative.directory/?search=timepicker) instead. +::: diff --git a/docs/toastandroid.md b/docs/toastandroid.md index 9ca5e906d71..0d7a569235d 100644 --- a/docs/toastandroid.md +++ b/docs/toastandroid.md @@ -12,7 +12,9 @@ You can alternatively use `showWithGravity(message, duration, gravity)` to speci The `showWithGravityAndOffset(message, duration, gravity, xOffset, yOffset)` method adds the ability to specify an offset with in pixels. -> Starting with Android 11 (API level 30), setting the gravity has no effect on text toasts. Read about the changes [here](https://developer.android.com/about/versions/11/behavior-changes-11#text-toast-api-changes). +:::note +Starting with Android 11 (API level 30), setting the gravity has no effect on text toasts. Read about the changes [here](https://developer.android.com/about/versions/11/behavior-changes-11#text-toast-api-changes). +::: ```SnackPlayer name=Toast%20Android%20API%20Example&supportedPlatforms=android import React from 'react'; diff --git a/docs/touchablehighlight.md b/docs/touchablehighlight.md index b5427ecbd2b..cd6313e66fe 100644 --- a/docs/touchablehighlight.md +++ b/docs/touchablehighlight.md @@ -3,7 +3,9 @@ id: touchablehighlight title: TouchableHighlight --- -> If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API. +:::tip +If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API. +::: A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view. diff --git a/docs/touchablenativefeedback.md b/docs/touchablenativefeedback.md index 4cb291a607b..a7465b9f2ed 100644 --- a/docs/touchablenativefeedback.md +++ b/docs/touchablenativefeedback.md @@ -3,7 +3,9 @@ id: touchablenativefeedback title: TouchableNativeFeedback --- -> If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API. +:::tip +If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API. +::: A wrapper for making views respond properly to touches (Android only). On Android this component uses native state drawable to display touch feedback. diff --git a/docs/touchableopacity.md b/docs/touchableopacity.md index 90bd4693681..025f38aa4c9 100644 --- a/docs/touchableopacity.md +++ b/docs/touchableopacity.md @@ -3,7 +3,9 @@ id: touchableopacity title: TouchableOpacity --- -> If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API. +:::tip +If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API. +::: A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it. diff --git a/docs/touchablewithoutfeedback.md b/docs/touchablewithoutfeedback.md index 40fdf10fc58..ac991fa2b6c 100644 --- a/docs/touchablewithoutfeedback.md +++ b/docs/touchablewithoutfeedback.md @@ -3,7 +3,9 @@ id: touchablewithoutfeedback title: TouchableWithoutFeedback --- -> If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API. +:::tip +If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API. +::: Do not use unless you have a very good reason. All elements that respond to press should have a visual feedback when touched. @@ -404,7 +406,9 @@ If true, disable all interactions for this component. This defines how far your touch can start away from the button. This is added to `pressRetentionOffset` when moving off of the button. -> The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views. +:::note +The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views. +::: | Type | | ---------------------- | diff --git a/docs/transforms.md b/docs/transforms.md index a88c207ad7a..e4c682a4db9 100644 --- a/docs/transforms.md +++ b/docs/transforms.md @@ -203,7 +203,9 @@ The skew transformations require a string so that the transform may be expressed ### `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY` -> **Deprecated.** Use the [`transform`](transforms#transform) prop instead. +:::warning Deprecated +Use the [`transform`](transforms#transform) prop instead. +::: ## Transform Origin diff --git a/docs/vibration.md b/docs/vibration.md index 1105767002c..44a0af2db43 100644 --- a/docs/vibration.md +++ b/docs/vibration.md @@ -103,9 +103,13 @@ const styles = StyleSheet.create({ export default App; ``` -> Android apps should request the `android.permission.VIBRATE` permission by adding `` to `AndroidManifest.xml`. +:::info +Android apps should request the `android.permission.VIBRATE` permission by adding `` to `AndroidManifest.xml`. +::: -> The Vibration API is implemented as a `AudioServicesPlaySystemSound(kSystemSoundID_Vibrate)` call on iOS. +:::note +The Vibration API is implemented as a `AudioServicesPlaySystemSound(kSystemSoundID_Vibrate)` call on iOS. +::: --- diff --git a/docs/virtualizedlist.md b/docs/virtualizedlist.md index 1bf19aa1806..7744a40e945 100644 --- a/docs/virtualizedlist.md +++ b/docs/virtualizedlist.md @@ -300,7 +300,9 @@ Styling for internal View for `ListHeaderComponent`. ### `disableVirtualization` -> **Deprecated.** Virtualization provides significant performance and memory optimizations, but fully unmounts react instances that are outside of the render window. You should only need to disable this for debugging purposes. +:::warning Deprecated +Virtualization provides significant performance and memory optimizations, but fully unmounts react instances that are outside of the render window. You should only need to disable this for debugging purposes. +::: | Type | | ------- | @@ -521,7 +523,9 @@ Set this true while waiting for new data from a refresh. This may improve scroll performance for large lists. -> Note: May have bugs (missing content) in some circumstances - use at your own risk. +:::warning +Using this property may lead to bugs (missing content) in some circumstances - use at your own risk. +::: | Type | | ------- | From 469905f4915a3f92618f197e260c3d98a03aced4 Mon Sep 17 00:00:00 2001 From: Simek Date: Sun, 31 Aug 2025 19:31:26 +0200 Subject: [PATCH 2/2] replace "deprecated" with "removed" emojis --- docs/asyncstorage.md | 2 +- docs/segmentedcontrolios.md | 2 +- docs/statusbarios.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/asyncstorage.md b/docs/asyncstorage.md index 0084b1bb629..dfe35feaa3d 100644 --- a/docs/asyncstorage.md +++ b/docs/asyncstorage.md @@ -1,6 +1,6 @@ --- id: asyncstorage -title: '🚧 AsyncStorage' +title: '❌ AsyncStorage' --- :::danger Removed from React Native diff --git a/docs/segmentedcontrolios.md b/docs/segmentedcontrolios.md index aad358069ef..bab15ae9ba1 100644 --- a/docs/segmentedcontrolios.md +++ b/docs/segmentedcontrolios.md @@ -1,6 +1,6 @@ --- id: segmentedcontrolios -title: '🚧 SegmentedControlIOS' +title: '❌ SegmentedControlIOS' --- :::danger Removed from React Native diff --git a/docs/statusbarios.md b/docs/statusbarios.md index 38ae93a274e..67ae7994778 100644 --- a/docs/statusbarios.md +++ b/docs/statusbarios.md @@ -1,6 +1,6 @@ --- id: statusbarios -title: '🚧 StatusBarIOS' +title: '❌ StatusBarIOS' --- :::danger Removed from React Native