From 76b38a91b26712d8a0d5a109d2152e1be3ae2422 Mon Sep 17 00:00:00 2001 From: Anupriya Verma <54227869+anupriya13@users.noreply.github.com> Date: Fri, 18 Apr 2025 13:44:34 +0530 Subject: [PATCH 01/12] Add Image Component Props under API --- docs/image-component-windows.md | 551 ++++++++++++++++++ website/sidebars.json | 1 + .../version-0.79/getting-started.md | 135 +++++ .../version-0.79/image-component-windows.md | 551 ++++++++++++++++++ .../version-0.79/rnm-getting-started.md | 51 ++ .../version-0.79-sidebars.json | 91 +++ website/versions.json | 1 + 7 files changed, 1381 insertions(+) create mode 100644 docs/image-component-windows.md create mode 100644 website/versioned_docs/version-0.79/getting-started.md create mode 100644 website/versioned_docs/version-0.79/image-component-windows.md create mode 100644 website/versioned_docs/version-0.79/rnm-getting-started.md create mode 100644 website/versioned_sidebars/version-0.79-sidebars.json diff --git a/docs/image-component-windows.md b/docs/image-component-windows.md new file mode 100644 index 000000000..328fbd52b --- /dev/null +++ b/docs/image-component-windows.md @@ -0,0 +1,551 @@ +--- +id: version-0.79-image-component +title: Image +original_id: image-component +sidebar_label: Image +--- + +A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. + +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! + +## Examples + +```SnackPlayer name=Image%20Example +import React from 'react'; +import {Image, StyleSheet} from 'react-native'; +import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + tinyLogo: { + width: 50, + height: 50, + }, + logo: { + width: 66, + height: 58, + }, +}); + +const DisplayAnImage = () => ( + + + + + + + +); + +export default DisplayAnImage; +``` + +You can also add `style` to an image: + +```SnackPlayer name=Styled%20Image%20Example +import React from 'react'; +import {Image, StyleSheet} from 'react-native'; +import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + stretch: { + width: 50, + height: 200, + resizeMode: 'stretch', + }, +}); + +const DisplayAnImageWithStyle = () => ( + + + + + +); + +export default DisplayAnImageWithStyle; +``` +--- + +# Reference + +## Props + +### [View Props](view.md#props) + +Inherits [View Props](view#props). + +--- + +### `accessible` + +When true, indicates the image is an accessibility element. + +| Type | Default | +| ---- | ------- | +| bool | `false` | + +--- + +### `accessibilityLabel` + +The text that's read by the screen reader when the user interacts with the image. + +| Type | +| ------ | +| string | + +--- + +### `alt` + +A string that defines an alternative text description of the image, which will be read by the screen reader when the user interacts with it. Using this will automatically mark this element as accessible. + +| Type | +| ------ | +| string | + +--- + +### `blurRadius` + +blurRadius: the blur radius of the blur filter added to the image. + +| Type | +| ------ | +| number | + + +--- + +### `capInsets` + +When the image is resized, the corners of the size specified by `capInsets` will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. +| Type | +| ------------ | +| [Rect](rect) | + +--- + +### `crossOrigin` + +A string of a keyword specifying the CORS mode to use when fetching the image resource. It works similar to crossorigin attribute in HTML. + +- `anonymous`: No exchange of user credentials in the image request. +- `use-credentials`: Sets `Access-Control-Allow-Credentials` header value to `true` in the image request. + +| Type | Default | +| ---------------------------------------- | ------------- | +| enum(`'anonymous'`, `'use-credentials'`) | `'anonymous'` | + +--- + +### `defaultSource` + +A static image to display while loading the image source. + +| Type | +| -------------------------------- | +| [ImageSource](image-component#imagesource) | + + +--- + +### `height` + +Height of the image component. + +| Type | +| ------ | +| number | + +--- + +### `loadingIndicatorSource` + +Similarly to `source`, this property represents the resource used to render the loading indicator for the image. The loading indicator is displayed until image is ready to be displayed, typically after the image is downloaded. + +| Type | +| ----------------------------------------------------- | +| [ImageSource](image-component#imagesource) (`uri` only), number | + +--- + +### `onError` + +Invoked on load error. + +| Type | +| ----------------------------------- | +| (`{nativeEvent: {error} }`) => void | + +--- + +### `onLayout` + +Invoked on mount and on layout changes. + +| Type | +| ------------------------------------------------------- | +| `md ({nativeEvent: [LayoutEvent](layoutevent)} => void` | + +--- + +### `onLoad` + +Invoked when load completes successfully. + +**Example:** `onLoad={({nativeEvent: {source: {width, height}}}) => setImageRealSize({width, height})}` + +| Type | +| ------------------------------------------------------------------- | +| `md ({nativeEvent: [ImageLoadEvent](image#imageloadevent)} => void` | + +--- + +### `onLoadEnd` + +Invoked when load either succeeds or fails. + +| Type | +| ---------- | +| () => void | + +--- + +### `onLoadStart` + +Invoked on load start. + +**Example:** `onLoadStart={() => this.setState({loading: true})}` + +| Type | +| ---------- | +| () => void | + +--- + +### `onProgress` + +Invoked on download progress. + +| Type | +| ------------------------------------------- | +| (`{nativeEvent: {loaded, total} }`) => void | + +--- + +### `referrerPolicy` + +A string indicating which referrer to use when fetching the resource. Sets the value for `Referrer-Policy` header in the image request. Works similar to `referrerpolicy` attribute in HTML. + +| Type | Default | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | +| enum(`'no-referrer'`, `'no-referrer-when-downgrade'`, `'origin'`, `'origin-when-cross-origin'`, `'same-origin'`, `'strict-origin'`, `'strict-origin-when-cross-origin'`, `'unsafe-url'`) | `'strict-origin-when-cross-origin'` | + +--- + +### `resizeMethod` + +The mechanism that should be used to resize the image when the image's dimensions differ from the image view's dimensions. Defaults to `auto`. + +- `auto`: Use heuristics to pick between `resize` and `scale`. + +- `resize`: A software operation which changes the encoded image in memory before it gets decoded. This should be used instead of `scale` when the image is much larger than the view. + +- `scale`: The image gets drawn downscaled or upscaled. Compared to `resize`, `scale` is faster (usually hardware accelerated) and produces higher quality images. This should be used if the image is smaller than the view. It should also be used if the image is slightly bigger than the view. + +- `none`: No sampling is performed and the image is displayed in its full resolution. + +More details about `resize` and `scale` can be found at https://frescolib.org/docs/resizing. + +| Type | Default | +| ----------------------------------------------- | -------- | +| enum(`'auto'`, `'resize'`, `'scale'`, `'none'`) | `'auto'` | + +--- + +### `resizeMode` + +Determines how to resize the image when the frame doesn't match the raw image dimensions. Defaults to `cover`. + +- `cover`: Scale the image uniformly (maintain the image's aspect ratio) so that + + - both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding) + - at least one dimension of the scaled image will be equal to the corresponding dimension of the view (minus padding) + +- `contain`: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). + +- `stretch`: Scale width and height independently, This may change the aspect ratio of the src. + +- `repeat`: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio, unless it is larger than the view, in which case it will be scaled down uniformly so that it is contained in the view. + +- `center`: Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view. + +| Type | Default | +| ----------------------------------------------------------------- | --------- | +| enum(`'cover'`, `'contain'`, `'stretch'`, `'repeat'`, `'center'`) | `'cover'` | + +--- + +### `source` + +The image source (either a remote URL or a local file resource). + +| Type | +| -------------------------------- | +| [ImageSource](image-component#imagesource) | + +--- + +### `src` + +A string representing the remote URL of the image. This prop has precedence over `source` prop. + +**Example:** `src={'https://reactnative.dev/img/tiny_logo.png'}` + +| Type | +| ------ | +| string | + +--- + +### `srcSet` + +A string representing comma separated list of possible candidate image source. Each image source contains a URL of an image and a pixel density descriptor. If no descriptor is specified, it defaults to descriptor of `1x`. + +If `srcSet` does not contain a `1x` descriptor, the value in `src` is used as image source with `1x` descriptor (if provided). + +This prop has precedence over both the `src` and `source` props. + +**Example:** `srcSet={'https://reactnative.dev/img/tiny_logo.png 1x, https://reactnative.dev/img/header_logo.svg 2x'}` + +| Type | +| ------ | +| string | + +--- + +### `style` + +| Type | +| ---------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Image Style Props](image-style-props#props), [Layout Props](layout-props#props), [Shadow Props](shadow-props#props), [Transforms](transforms#props) | + +--- + +### `testID` + +A unique identifier for this element to be used in UI Automation testing scripts. + +| Type | +| ------ | +| string | + +--- + +### `tintColor` + +Changes the color of all non-transparent pixels to the `tintColor`. + +| Type | +| ------------------ | +| [color](colors.md) | + +--- + +### `width` + +Width of the image component. + +| Type | +| ------ | +| number | + +## Methods + +### `abortPrefetch()` + +```tsx +static abortPrefetch(requestId: number); +``` + +Abort prefetch request. + +**Parameters:** + +| Name | Type | Description | +| ---------------------------------------------------------- | ------ | --------------------------------------- | +| requestId
Required
| number | Request id as returned by `prefetch()`. | + +--- + +### `getSize()` + +```tsx +static getSize(uri: string): Promise<{width: number, height: number}>; +``` + +Retrieve the width and height (in pixels) of an image prior to displaying it. This method can fail if the image cannot be found, or fails to download. + +In order to retrieve the image dimensions, the image may first need to be loaded or downloaded, after which it will be cached. This means that in principle you could use this method to preload images, however it is not optimized for that purpose, and may in future be implemented in a way that does not fully load/download the image data. A proper, supported way to preload images will be provided as a separate API. + +**Parameters:** + +|
Name
| Type | Description | +| ---------------------------------------------------- | ------ | -------------------------- | +| uri
Required
| string | The location of the image. | + +--- + +### `getSizeWithHeaders()` + +```tsx +static getSizeWithHeaders( + uri: string, + headers: {[index: string]: string} +): Promise<{width: number, height: number}>; +``` + +Retrieve the width and height (in pixels) of an image prior to displaying it with the ability to provide the headers for the request. This method can fail if the image cannot be found, or fails to download. It also does not work for static image resources. + +In order to retrieve the image dimensions, the image may first need to be loaded or downloaded, after which it will be cached. This means that in principle you could use this method to preload images, however it is not optimized for that purpose, and may in future be implemented in a way that does not fully load/download the image data. A proper, supported way to preload images will be provided as a separate API. + +**Parameters:** + +|
Name
| Type | Description | +| -------------------------------------------------------- | ------ | ---------------------------- | +| uri
Required
| string | The location of the image. | +| headers
Required
| object | The headers for the request. | + +--- + +### `prefetch()` + +```tsx +await Image.prefetch(url); +``` + +Prefetches a remote image for later use by downloading it to the disk cache. Returns a promise which resolves to a boolean. + +**Parameters:** + +| Name | Type | Description | +| ---------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------------ | +| url
Required
| string | The remote location of the image. | +| callback | function | The function that will be called with the `requestId`. | + +--- + +### `queryCache()` + +```tsx +static queryCache( + urls: string[], +): Promise>; +``` + +Perform cache interrogation. Returns a promise which resolves to a mapping from URL to cache status, such as "disk", "memory" or "disk/memory". If a requested URL is not in the mapping, it means it's not in the cache. + +**Parameters:** + +| Name | Type | Description | +| ----------------------------------------------------- | ----- | ------------------------------------------ | +| urls
Required
| array | List of image URLs to check the cache for. | + +--- + +### `resolveAssetSource()` + +```tsx +static resolveAssetSource(source: ImageSourcePropType): { + height: number; + width: number; + scale: number; + uri: string; +}; +``` + +Resolves an asset reference into an object which has the properties `uri`, `scale`, `width`, and `height`. + +**Parameters:** + +|
Name
| Type | Description | +| ------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------- | +| source
Required
| [ImageSource](image-component#imagesource), number | A number (opaque type returned by `require('./foo.png')`) or an ImageSource. | + +## Type Definitions + +### ImageLoadEvent + +Object returned in the `onLoad` callback. + +| Type | +| ------ | +| object | + +**Properties:** + +| Name | Type | Description | +| ------ | ------ | ----------------------------------- | +| source | object | The [source object](#source-object) | + +#### Source Object + +**Properties:** + +| Name | Type | Description | +| ------ | ------ | ------------------------------------------------------------ | +| width | number | The width of loaded image. | +| height | number | The height of loaded image. | +| uri | string | A string representing the resource identifier for the image. | + +### ImageSource + +| Type | +| -------------------------------- | +| object, array of objects, number | + +**Properties (if passing as object or array of objects):** + +|
Name
| Type | Description | +| -------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| uri | string | A string representing the resource identifier for the image, which could be an http address, a local file path, or the name of a static image resource. | +| width | number | Can be specified if known at build time, in which case the value will be used to set the default `` component dimension. | +| height | number | Can be specified if known at build time, in which case the value will be used to set the default `` component dimension. | +| scale | number | Used to indicate the scale factor of the image. Defaults to `1.0` if unspecified, meaning that one image pixel equates to one display point / DIP. | | +| method | string | The HTTP Method to use. Defaults to `'GET'` if not specified. | +| headers | object | An object representing the HTTP headers to send along with the request for a remote image. | +| body | string | The HTTP body to send with the request. This must be a valid UTF-8 string, and will be sent exactly as specified, with no additional encoding (e.g. URL-escaping or base64) applied. | | + +**If passing a number:** + +- `number` - opaque type returned by something like `require('./image.jpg')`. + +## Examples + +Examples can be found in the [React Native Doc]https://reactnative.dev/docs/image) \ No newline at end of file diff --git a/website/sidebars.json b/website/sidebars.json index 644a8f558..1895d01d3 100644 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -57,6 +57,7 @@ }, "apis": { "Components (Windows)": [ + "image-component", "flyout-component", "glyph-component", "popup-component", diff --git a/website/versioned_docs/version-0.79/getting-started.md b/website/versioned_docs/version-0.79/getting-started.md new file mode 100644 index 000000000..c74c5e45d --- /dev/null +++ b/website/versioned_docs/version-0.79/getting-started.md @@ -0,0 +1,135 @@ +--- +id: version-0.79-getting-started +title: Get Started with Windows +original_id: getting-started +--- + +This guide will help you get started on setting up your very first React Native for Windows app. + +Make sure you have installed all of the [development dependencies](rnw-dependencies.md). + +For information around how to set up React Native, see the [React Native Getting Started Guide](https://reactnative.dev/docs/getting-started). + +> **Interested in migrating to [React Native's New Architecture](https://reactnative.dev/architecture/landing-page)?** New Architecture support in React Native for Windows is now available to preview in 0.76. Note there are several key changes, so if you’d like to be an early adopter, check out the information in the [New Architecture Guide](new-architecture.md). + +## Create a new React Native project + +Remember to call `@react-native-community/cli init` from the place you want your project directory to live. + + + + + + + + + + +```bat +npx --yes @react-native-community/cli@next init --version "nightly" +``` + +### Navigate into this newly created directory + +React Native will have created your project in a new sub-directory, which you must enter before continuing. + +```bat +cd +``` + +### Add React Native Windows to your project's dependencies + + + + + + + + + + +```bat +yarn add react-native-windows@canary +``` + + + +```bat +npm install --save react-native-windows@canary +``` + + + +### Initialize the React Native Windows native code and projects + +Lastly, initialize the React Native for Windows application with the [init-windows command](init-windows-cli.md): + +```bat +npx react-native init-windows --overwrite +``` + +> **Note:** RNW templates contain a customized `metro.config.js` file, which is meant to merge cleanly into the default config provided by the standard React Native project template. If you are starting a new app, overwriting `metro.config.js` should have no impact. However, if you are adding Windows to an existing app with an already modified `metro.config.js` file, please make sure to back up and re-apply your modifications after adding RNW. + +## Running a React Native Windows App + +> Make sure a browser is launched and running before running a React Native Windows app. +> Also ensure your system meets all the [requirements](rnw-dependencies.md) to build a Windows app as well. + +- Without Using Visual Studio + + In your React Native Windows project directory, run the [run-windows command](run-windows-cli.md): + + ```bat + npx react-native run-windows + ``` + + A new Command Prompt window will open with the React packager as well as your React Native for Windows app. This step may take a while during first run since it involves building the entire project and all dependencies. You can now start developing! :tada: + +- Using Visual Studio + + - From the root of the project directory, run the [autolink-windows command](autolink-windows-cli.md), which will automatically link your app's dependencies: + ```bat + npx react-native autolink-windows + ``` + - Open the solution file in the application folder in Visual Studio (e.g., `AwesomeProject/windows/AwesomeProject.sln` if you used `AwesomeProject` as ``) + - Select the `Debug` configuration and the `x64` platform from the combo box controls to the left of the `Run` button and underneath the `Team` and `Tools` menu item. + - Run `yarn start` (or `npm start`) from your project directory, and wait for the React Native packager to report success. + - Click the `Run` button to the right of the platform combo box control in VS, or select the `Debug`->`Start without Debugging` menu item. You now see your new app and Chrome should have loaded `http://localhost:8081/debugger-ui/` in a new tab. Press `F12` or `Ctrl+Shift+I` in Chrome to open its Developer Tools. :tada: + +- With VS Code + - Open your applications folder in VS Code. + - Install the [React Native Tools](https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native) plugin for VS Code. + - Create a new file in the applications root directory, `.vscode/launch.json` and paste the following configuration: + ```json + { + "version": "0.2.0", + "configurations": [ + { + "name": "Debug Windows", + "cwd": "${workspaceFolder}", + "type": "reactnative", + "request": "launch", + "platform": "windows" + } + ] + } + ``` + - Press `F5` or navigate to the debug menu (alternatively press `Ctrl+Shift+D`) and in the Debug drop-down select "Debug Windows" and press the green arrow to run the application. + +## Authoring Native Modules + +See [Native Modules and React Native Windows](native-modules.md). + +## Building a standalone React Native Windows App + +Follow these steps to build a version of your app that you can install or publish to the store. This version will package your bundle and assets into the APPX package so you don't need to run Metro. + +- Open the solution in Visual Studio +- Select the Release configuration from the Configuration Manager drop-down. +- Build the solution. You can now launch without first launching Metro. +- If you want to build an APPX package to share or publish, use the **Project** > **Publish** > **Create App Packages...** option. + +> The Debug configuration uses the Web Debugger by default, which means the application's JavaScript code runs in Chrome.
+> If you're getting different runtime behavior between the Release and Debug configurations, consider disabling the `UseWebDebugger` setting in [`App.cpp`](https://github.com/microsoft/react-native-windows/blob/6b415659aa017dbc41e3f28e817fb768a8e80435/vnext/template/cpp-app/src/App.cpp#L30) or [`App.xaml.cs`](https://github.com/microsoft/react-native-windows/blob/6b415659aa017dbc41e3f28e817fb768a8e80435/vnext/template/cs-app/src/App.xaml.cs#L20) to get the same behavior in the Debug configuration. + +See also this article for additional details: https://techcommunity.microsoft.com/t5/windows-dev-appconsult/getting-started-with-react-native-for-windows/ba-p/912093# diff --git a/website/versioned_docs/version-0.79/image-component-windows.md b/website/versioned_docs/version-0.79/image-component-windows.md new file mode 100644 index 000000000..328fbd52b --- /dev/null +++ b/website/versioned_docs/version-0.79/image-component-windows.md @@ -0,0 +1,551 @@ +--- +id: version-0.79-image-component +title: Image +original_id: image-component +sidebar_label: Image +--- + +A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. + +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! + +## Examples + +```SnackPlayer name=Image%20Example +import React from 'react'; +import {Image, StyleSheet} from 'react-native'; +import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + tinyLogo: { + width: 50, + height: 50, + }, + logo: { + width: 66, + height: 58, + }, +}); + +const DisplayAnImage = () => ( + + + + + + + +); + +export default DisplayAnImage; +``` + +You can also add `style` to an image: + +```SnackPlayer name=Styled%20Image%20Example +import React from 'react'; +import {Image, StyleSheet} from 'react-native'; +import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + stretch: { + width: 50, + height: 200, + resizeMode: 'stretch', + }, +}); + +const DisplayAnImageWithStyle = () => ( + + + + + +); + +export default DisplayAnImageWithStyle; +``` +--- + +# Reference + +## Props + +### [View Props](view.md#props) + +Inherits [View Props](view#props). + +--- + +### `accessible` + +When true, indicates the image is an accessibility element. + +| Type | Default | +| ---- | ------- | +| bool | `false` | + +--- + +### `accessibilityLabel` + +The text that's read by the screen reader when the user interacts with the image. + +| Type | +| ------ | +| string | + +--- + +### `alt` + +A string that defines an alternative text description of the image, which will be read by the screen reader when the user interacts with it. Using this will automatically mark this element as accessible. + +| Type | +| ------ | +| string | + +--- + +### `blurRadius` + +blurRadius: the blur radius of the blur filter added to the image. + +| Type | +| ------ | +| number | + + +--- + +### `capInsets` + +When the image is resized, the corners of the size specified by `capInsets` will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. +| Type | +| ------------ | +| [Rect](rect) | + +--- + +### `crossOrigin` + +A string of a keyword specifying the CORS mode to use when fetching the image resource. It works similar to crossorigin attribute in HTML. + +- `anonymous`: No exchange of user credentials in the image request. +- `use-credentials`: Sets `Access-Control-Allow-Credentials` header value to `true` in the image request. + +| Type | Default | +| ---------------------------------------- | ------------- | +| enum(`'anonymous'`, `'use-credentials'`) | `'anonymous'` | + +--- + +### `defaultSource` + +A static image to display while loading the image source. + +| Type | +| -------------------------------- | +| [ImageSource](image-component#imagesource) | + + +--- + +### `height` + +Height of the image component. + +| Type | +| ------ | +| number | + +--- + +### `loadingIndicatorSource` + +Similarly to `source`, this property represents the resource used to render the loading indicator for the image. The loading indicator is displayed until image is ready to be displayed, typically after the image is downloaded. + +| Type | +| ----------------------------------------------------- | +| [ImageSource](image-component#imagesource) (`uri` only), number | + +--- + +### `onError` + +Invoked on load error. + +| Type | +| ----------------------------------- | +| (`{nativeEvent: {error} }`) => void | + +--- + +### `onLayout` + +Invoked on mount and on layout changes. + +| Type | +| ------------------------------------------------------- | +| `md ({nativeEvent: [LayoutEvent](layoutevent)} => void` | + +--- + +### `onLoad` + +Invoked when load completes successfully. + +**Example:** `onLoad={({nativeEvent: {source: {width, height}}}) => setImageRealSize({width, height})}` + +| Type | +| ------------------------------------------------------------------- | +| `md ({nativeEvent: [ImageLoadEvent](image#imageloadevent)} => void` | + +--- + +### `onLoadEnd` + +Invoked when load either succeeds or fails. + +| Type | +| ---------- | +| () => void | + +--- + +### `onLoadStart` + +Invoked on load start. + +**Example:** `onLoadStart={() => this.setState({loading: true})}` + +| Type | +| ---------- | +| () => void | + +--- + +### `onProgress` + +Invoked on download progress. + +| Type | +| ------------------------------------------- | +| (`{nativeEvent: {loaded, total} }`) => void | + +--- + +### `referrerPolicy` + +A string indicating which referrer to use when fetching the resource. Sets the value for `Referrer-Policy` header in the image request. Works similar to `referrerpolicy` attribute in HTML. + +| Type | Default | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | +| enum(`'no-referrer'`, `'no-referrer-when-downgrade'`, `'origin'`, `'origin-when-cross-origin'`, `'same-origin'`, `'strict-origin'`, `'strict-origin-when-cross-origin'`, `'unsafe-url'`) | `'strict-origin-when-cross-origin'` | + +--- + +### `resizeMethod` + +The mechanism that should be used to resize the image when the image's dimensions differ from the image view's dimensions. Defaults to `auto`. + +- `auto`: Use heuristics to pick between `resize` and `scale`. + +- `resize`: A software operation which changes the encoded image in memory before it gets decoded. This should be used instead of `scale` when the image is much larger than the view. + +- `scale`: The image gets drawn downscaled or upscaled. Compared to `resize`, `scale` is faster (usually hardware accelerated) and produces higher quality images. This should be used if the image is smaller than the view. It should also be used if the image is slightly bigger than the view. + +- `none`: No sampling is performed and the image is displayed in its full resolution. + +More details about `resize` and `scale` can be found at https://frescolib.org/docs/resizing. + +| Type | Default | +| ----------------------------------------------- | -------- | +| enum(`'auto'`, `'resize'`, `'scale'`, `'none'`) | `'auto'` | + +--- + +### `resizeMode` + +Determines how to resize the image when the frame doesn't match the raw image dimensions. Defaults to `cover`. + +- `cover`: Scale the image uniformly (maintain the image's aspect ratio) so that + + - both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding) + - at least one dimension of the scaled image will be equal to the corresponding dimension of the view (minus padding) + +- `contain`: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). + +- `stretch`: Scale width and height independently, This may change the aspect ratio of the src. + +- `repeat`: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio, unless it is larger than the view, in which case it will be scaled down uniformly so that it is contained in the view. + +- `center`: Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view. + +| Type | Default | +| ----------------------------------------------------------------- | --------- | +| enum(`'cover'`, `'contain'`, `'stretch'`, `'repeat'`, `'center'`) | `'cover'` | + +--- + +### `source` + +The image source (either a remote URL or a local file resource). + +| Type | +| -------------------------------- | +| [ImageSource](image-component#imagesource) | + +--- + +### `src` + +A string representing the remote URL of the image. This prop has precedence over `source` prop. + +**Example:** `src={'https://reactnative.dev/img/tiny_logo.png'}` + +| Type | +| ------ | +| string | + +--- + +### `srcSet` + +A string representing comma separated list of possible candidate image source. Each image source contains a URL of an image and a pixel density descriptor. If no descriptor is specified, it defaults to descriptor of `1x`. + +If `srcSet` does not contain a `1x` descriptor, the value in `src` is used as image source with `1x` descriptor (if provided). + +This prop has precedence over both the `src` and `source` props. + +**Example:** `srcSet={'https://reactnative.dev/img/tiny_logo.png 1x, https://reactnative.dev/img/header_logo.svg 2x'}` + +| Type | +| ------ | +| string | + +--- + +### `style` + +| Type | +| ---------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Image Style Props](image-style-props#props), [Layout Props](layout-props#props), [Shadow Props](shadow-props#props), [Transforms](transforms#props) | + +--- + +### `testID` + +A unique identifier for this element to be used in UI Automation testing scripts. + +| Type | +| ------ | +| string | + +--- + +### `tintColor` + +Changes the color of all non-transparent pixels to the `tintColor`. + +| Type | +| ------------------ | +| [color](colors.md) | + +--- + +### `width` + +Width of the image component. + +| Type | +| ------ | +| number | + +## Methods + +### `abortPrefetch()` + +```tsx +static abortPrefetch(requestId: number); +``` + +Abort prefetch request. + +**Parameters:** + +| Name | Type | Description | +| ---------------------------------------------------------- | ------ | --------------------------------------- | +| requestId
Required
| number | Request id as returned by `prefetch()`. | + +--- + +### `getSize()` + +```tsx +static getSize(uri: string): Promise<{width: number, height: number}>; +``` + +Retrieve the width and height (in pixels) of an image prior to displaying it. This method can fail if the image cannot be found, or fails to download. + +In order to retrieve the image dimensions, the image may first need to be loaded or downloaded, after which it will be cached. This means that in principle you could use this method to preload images, however it is not optimized for that purpose, and may in future be implemented in a way that does not fully load/download the image data. A proper, supported way to preload images will be provided as a separate API. + +**Parameters:** + +|
Name
| Type | Description | +| ---------------------------------------------------- | ------ | -------------------------- | +| uri
Required
| string | The location of the image. | + +--- + +### `getSizeWithHeaders()` + +```tsx +static getSizeWithHeaders( + uri: string, + headers: {[index: string]: string} +): Promise<{width: number, height: number}>; +``` + +Retrieve the width and height (in pixels) of an image prior to displaying it with the ability to provide the headers for the request. This method can fail if the image cannot be found, or fails to download. It also does not work for static image resources. + +In order to retrieve the image dimensions, the image may first need to be loaded or downloaded, after which it will be cached. This means that in principle you could use this method to preload images, however it is not optimized for that purpose, and may in future be implemented in a way that does not fully load/download the image data. A proper, supported way to preload images will be provided as a separate API. + +**Parameters:** + +|
Name
| Type | Description | +| -------------------------------------------------------- | ------ | ---------------------------- | +| uri
Required
| string | The location of the image. | +| headers
Required
| object | The headers for the request. | + +--- + +### `prefetch()` + +```tsx +await Image.prefetch(url); +``` + +Prefetches a remote image for later use by downloading it to the disk cache. Returns a promise which resolves to a boolean. + +**Parameters:** + +| Name | Type | Description | +| ---------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------------ | +| url
Required
| string | The remote location of the image. | +| callback | function | The function that will be called with the `requestId`. | + +--- + +### `queryCache()` + +```tsx +static queryCache( + urls: string[], +): Promise>; +``` + +Perform cache interrogation. Returns a promise which resolves to a mapping from URL to cache status, such as "disk", "memory" or "disk/memory". If a requested URL is not in the mapping, it means it's not in the cache. + +**Parameters:** + +| Name | Type | Description | +| ----------------------------------------------------- | ----- | ------------------------------------------ | +| urls
Required
| array | List of image URLs to check the cache for. | + +--- + +### `resolveAssetSource()` + +```tsx +static resolveAssetSource(source: ImageSourcePropType): { + height: number; + width: number; + scale: number; + uri: string; +}; +``` + +Resolves an asset reference into an object which has the properties `uri`, `scale`, `width`, and `height`. + +**Parameters:** + +|
Name
| Type | Description | +| ------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------- | +| source
Required
| [ImageSource](image-component#imagesource), number | A number (opaque type returned by `require('./foo.png')`) or an ImageSource. | + +## Type Definitions + +### ImageLoadEvent + +Object returned in the `onLoad` callback. + +| Type | +| ------ | +| object | + +**Properties:** + +| Name | Type | Description | +| ------ | ------ | ----------------------------------- | +| source | object | The [source object](#source-object) | + +#### Source Object + +**Properties:** + +| Name | Type | Description | +| ------ | ------ | ------------------------------------------------------------ | +| width | number | The width of loaded image. | +| height | number | The height of loaded image. | +| uri | string | A string representing the resource identifier for the image. | + +### ImageSource + +| Type | +| -------------------------------- | +| object, array of objects, number | + +**Properties (if passing as object or array of objects):** + +|
Name
| Type | Description | +| -------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| uri | string | A string representing the resource identifier for the image, which could be an http address, a local file path, or the name of a static image resource. | +| width | number | Can be specified if known at build time, in which case the value will be used to set the default `` component dimension. | +| height | number | Can be specified if known at build time, in which case the value will be used to set the default `` component dimension. | +| scale | number | Used to indicate the scale factor of the image. Defaults to `1.0` if unspecified, meaning that one image pixel equates to one display point / DIP. | | +| method | string | The HTTP Method to use. Defaults to `'GET'` if not specified. | +| headers | object | An object representing the HTTP headers to send along with the request for a remote image. | +| body | string | The HTTP body to send with the request. This must be a valid UTF-8 string, and will be sent exactly as specified, with no additional encoding (e.g. URL-escaping or base64) applied. | | + +**If passing a number:** + +- `number` - opaque type returned by something like `require('./image.jpg')`. + +## Examples + +Examples can be found in the [React Native Doc]https://reactnative.dev/docs/image) \ No newline at end of file diff --git a/website/versioned_docs/version-0.79/rnm-getting-started.md b/website/versioned_docs/version-0.79/rnm-getting-started.md new file mode 100644 index 000000000..d0cf75560 --- /dev/null +++ b/website/versioned_docs/version-0.79/rnm-getting-started.md @@ -0,0 +1,51 @@ +--- +id: version-0.79-rnm-getting-started +title: Get Started with macOS +original_id: rnm-getting-started +--- + +This guide will help you get started on setting up your very first React Native for macOS app. + +>** Latest stable version available for React Native for macOS is 0.76** + +For information around how to set up: +- React Native for iOS and Android: See [React Native Getting Started Guide](https://reactnative.dev/docs/getting-started) +- React Native for Windows: See [React Native for Windows Getting Started Guide](https://microsoft.github.io/react-native-windows/docs/getting-started) + +## Install React Native for macOS + +Remember to call `@react-native-community/cli init` from the place you want your project directory to live. Be sure to use the same minor version between React Native and React Native macOS. We'll use `^0.76.0` + +``` +npx @react-native-community/cli init --version 0.76 +``` + +### Navigate into this newly created directory + +Once your project has been initialized, React Native will have created a new sub directory where all your generated files live. + +``` +cd +``` + +### Install the macOS extension + +Install the React Native for macOS packages. + +``` +npx react-native-macos-init +``` + +## Running a React Native macOS App + +- **Without using Xcode**: + In your React Native macOS project directory, run: + + ``` + npx react-native run-macos + ``` + +- **Using Xcode**: + Open `macos\test.xcworkspace` in Xcode or run `xed -b macos`; `yarn start`. Hit the Run button. + +A new Command Prompt window will open with the React packager as well as a `react-native-macos` app. This step may take a while during first run since it involves building the entire project and all dependencies. You can now start developing! 🎉 diff --git a/website/versioned_sidebars/version-0.79-sidebars.json b/website/versioned_sidebars/version-0.79-sidebars.json new file mode 100644 index 000000000..f20b192d4 --- /dev/null +++ b/website/versioned_sidebars/version-0.79-sidebars.json @@ -0,0 +1,91 @@ +{ + "version-0.79-docs": { + "The Basics (Windows)": [ + "version-0.79-getting-started", + "version-0.79-rnw-dependencies", + "version-0.79-react-native-windows-cli", + "version-0.79-parity-status", + "version-0.79-config", + "version-0.79-windowsbrush-and-theme", + "version-0.79-releases", + "version-0.79-platform", + "version-0.79-upgrade-app", + "version-0.79-setup-ci", + "version-0.79-app-publishing" + ], + "CLI Commands (Windows)": [ + "version-0.79-autolink-windows-cli", + "version-0.79-codegen-windows-cli", + "version-0.79-init-windows-cli", + "version-0.79-run-windows-cli" + ], + "Native Modules (Windows)": [ + "version-0.79-native-modules", + "version-0.79-view-managers", + "version-0.79-native-modules-setup", + "version-0.79-native-modules-vs-turbo-modules", + "version-0.79-native-modules-using", + "version-0.79-native-modules-autolinking", + "version-0.79-native-modules-advanced", + "version-0.79-supported-community-modules" + ], + "Native Development (Windows)": [ + "version-0.79-native-code", + "version-0.79-native-code-language-choice", + "version-0.79-native-modules-marshalling-data", + "version-0.79-native-modules-async", + "version-0.79-native-modules-jsvalue", + "version-0.79-native-modules-csharp-codegen", + "version-0.79-win10-vm", + "version-0.79-customizing-sdk-versions", + "version-0.79-managing-cpp-deps" + ], + "The Basics (MacOS)": [ + "version-0.79-rnm-getting-started", + "version-0.79-rnm-dependencies" + ], + "Troubleshooting": [ + "version-0.79-debugging-javascript", + "version-0.79-native-modules-troubleshooting", + "version-0.79-metro-config-out-tree-platforms" + ], + "Experimental": [ + "version-0.79-new-architecture", + "version-0.79-hermes", + "version-0.79-NuGet" + ] + }, + "version-0.79-apis": { + "Components (Windows)": [ + "version-0.79-image-component", + "version-0.79-flyout-component", + "version-0.79-glyph-component", + "version-0.79-popup-component", + "version-0.79-textinput-component" + ], + "JavaScript API (Windows)": [ + "version-0.79-apptheme-api", + "version-0.79-ikeyboardprops-api", + "version-0.79-iviewwindowsprops-api" + ], + "Native API (Windows)": [ + "version-0.79-native-api/IJSValueReader", + "version-0.79-native-api/IJSValueWriter", + "version-0.79-native-api/IReactContext", + "version-0.79-native-api/IReactDispatcher", + "version-0.79-native-api/IReactModuleBuilder", + "version-0.79-native-api/IReactNonAbiValue", + "version-0.79-native-api/IReactPackageBuilder", + "version-0.79-native-api/IReactPackageProvider", + "version-0.79-native-api/IReactPropertyBag", + "version-0.79-native-api/IRedBoxHandler", + "version-0.79-native-api/IViewManager", + "version-0.79-native-api/ReactApplication", + "version-0.79-native-api/ReactInstanceSettings", + "version-0.79-native-api/ReactNativeHost", + "version-0.79-native-api/XamlUIService", + "version-0.79-native-api/Native-API-Reference", + "version-0.79-coreapp" + ] + } +} diff --git a/website/versions.json b/website/versions.json index 3d9bb2217..d5e7157ee 100644 --- a/website/versions.json +++ b/website/versions.json @@ -1,4 +1,5 @@ [ + "0.79", "0.78", "0.77", "0.76", From 1904128fe71913fda27cba8765b1b2cd55e94d6e Mon Sep 17 00:00:00 2001 From: Anupriya Verma <54227869+anupriya13@users.noreply.github.com> Date: Fri, 18 Apr 2025 14:25:59 +0530 Subject: [PATCH 02/12] Update .spelling --- .spelling | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/.spelling b/.spelling index f5259e501..663b95a77 100644 --- a/.spelling +++ b/.spelling @@ -118,4 +118,24 @@ WinAppSDK WinRT WinUI WinUI3 -Xcode \ No newline at end of file +Xcode +uri +blurRadius +resized +resizable +ImageSource +resize +crossorigin +src +downscaled +upscaled +preload +Prefetches +prefetch +urls +url +ImageLoadEvent +http +UTF-8 +base64 +requestId \ No newline at end of file From b661cc97f1c08ec6b115ce6cace0ba793e17cbf5 Mon Sep 17 00:00:00 2001 From: Anupriya Verma <54227869+anupriya13@users.noreply.github.com> Date: Fri, 18 Apr 2025 14:29:17 +0530 Subject: [PATCH 03/12] Update .unbroken_exclusions --- website/.unbroken_exclusions | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/website/.unbroken_exclusions b/website/.unbroken_exclusions index c514b2983..cb1b43e2b 100644 --- a/website/.unbroken_exclusions +++ b/website/.unbroken_exclusions @@ -31,6 +31,13 @@ File not found native-api/ReactNativeHost-api-windows.md while parsing versioned File not found IViewManagerCreateWithProperties while parsing versioned_docs/version-0.76/view-managers.md #fix-unbroken.js auto-generated do not edit this line or below +File not found getting-started.md while parsing versioned_docs/version-0.79/getting-started.md +File not found new-architecture.md while parsing versioned_docs/version-0.79/getting-started.md +File not found autolink-windows-cli.md while parsing versioned_docs/version-0.79/getting-started.md +File not found init-windows-cli.md while parsing versioned_docs/version-0.79/getting-started.md +File not found run-windows-cli.md while parsing versioned_docs/version-0.79/getting-started.md +File not found native-modules.md while parsing versioned_docs/version-0.79/getting-started.md +File not found rnw-dependencies.md while parsing versioned_docs/version-0.79/getting-started.md File not found getting-started.md while parsing versioned_docs/version-0.78/getting-started.md File not found new-architecture.md while parsing versioned_docs/version-0.78/getting-started.md File not found autolink-windows-cli.md while parsing versioned_docs/version-0.78/getting-started.md From 6e92d5066fb575673c46f12937a917208fc5aea9 Mon Sep 17 00:00:00 2001 From: Anupriya Verma <54227869+anupriya13@users.noreply.github.com> Date: Fri, 18 Apr 2025 14:34:07 +0530 Subject: [PATCH 04/12] Update .unbroken_exclusions --- website/.unbroken_exclusions | 1 + 1 file changed, 1 insertion(+) diff --git a/website/.unbroken_exclusions b/website/.unbroken_exclusions index cb1b43e2b..62389e13c 100644 --- a/website/.unbroken_exclusions +++ b/website/.unbroken_exclusions @@ -17,6 +17,7 @@ !versioned_docs/version-0.76/native-api/*-api-windows*.md !versioned_docs/version-0.77/native-api/*-api-windows*.md !versioned_docs/version-0.78/native-api/*-api-windows*.md +!versioned_docs/version-0.79/native-api/*-api-windows*.md # See Issue 410 File not found IReactContext while parsing versioned_docs/version-0.64/native-modules-advanced.md From 8157eba6f990ebcc35bedae166d7f368e6d4f3db Mon Sep 17 00:00:00 2001 From: Anupriya Verma <54227869+anupriya13@users.noreply.github.com> Date: Fri, 18 Apr 2025 14:49:30 +0530 Subject: [PATCH 05/12] fix references --- docs/image-component-windows.md | 21 +++++++++---------- .../version-0.79/image-component-windows.md | 21 +++++++++---------- 2 files changed, 20 insertions(+), 22 deletions(-) diff --git a/docs/image-component-windows.md b/docs/image-component-windows.md index 328fbd52b..8a4827d95 100644 --- a/docs/image-component-windows.md +++ b/docs/image-component-windows.md @@ -95,9 +95,9 @@ export default DisplayAnImageWithStyle; ## Props -### [View Props](view.md#props) +### View Props -Inherits [View Props](view#props). +Inherits [View Props](https://reactnative.dev/docs/view#props). --- @@ -147,7 +147,7 @@ blurRadius: the blur radius of the blur filter added to the image. When the image is resized, the corners of the size specified by `capInsets` will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. | Type | | ------------ | -| [Rect](rect) | +| [Rect]() | --- @@ -170,7 +170,7 @@ A static image to display while loading the image source. | Type | | -------------------------------- | -| [ImageSource](image-component#imagesource) | +| [ImageSource](#imagesource) | --- @@ -191,7 +191,7 @@ Similarly to `source`, this property represents the resource used to render the | Type | | ----------------------------------------------------- | -| [ImageSource](image-component#imagesource) (`uri` only), number | +| [ImageSource](#imagesource) (`uri` only), number | --- @@ -318,8 +318,7 @@ The image source (either a remote URL or a local file resource). | Type | | -------------------------------- | -| [ImageSource](image-component#imagesource) | - +| [ImageSource](#imagesource) | --- ### `src` @@ -354,7 +353,7 @@ This prop has precedence over both the `src` and `source` props. | Type | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Image Style Props](image-style-props#props), [Layout Props](layout-props#props), [Shadow Props](shadow-props#props), [Transforms](transforms#props) | +| [Image Style Props](), [Layout Props](), [Shadow Props](), [Transforms]() | --- @@ -374,7 +373,7 @@ Changes the color of all non-transparent pixels to the `tintColor`. | Type | | ------------------ | -| [color](colors.md) | +| [color]() | --- @@ -496,7 +495,7 @@ Resolves an asset reference into an object which has the properties `uri`, `scal |
Name
| Type | Description | | ------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------- | -| source
Required
| [ImageSource](image-component#imagesource), number | A number (opaque type returned by `require('./foo.png')`) or an ImageSource. | +| source
Required
| [ImageSource](#imagesource), number | A number (opaque type returned by `require('./foo.png')`) or an ImageSource. | ## Type Definitions @@ -512,7 +511,7 @@ Object returned in the `onLoad` callback. | Name | Type | Description | | ------ | ------ | ----------------------------------- | -| source | object | The [source object](#source-object) | +| source | object | The [source object](#imagesource) | #### Source Object diff --git a/website/versioned_docs/version-0.79/image-component-windows.md b/website/versioned_docs/version-0.79/image-component-windows.md index 328fbd52b..8a4827d95 100644 --- a/website/versioned_docs/version-0.79/image-component-windows.md +++ b/website/versioned_docs/version-0.79/image-component-windows.md @@ -95,9 +95,9 @@ export default DisplayAnImageWithStyle; ## Props -### [View Props](view.md#props) +### View Props -Inherits [View Props](view#props). +Inherits [View Props](https://reactnative.dev/docs/view#props). --- @@ -147,7 +147,7 @@ blurRadius: the blur radius of the blur filter added to the image. When the image is resized, the corners of the size specified by `capInsets` will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. | Type | | ------------ | -| [Rect](rect) | +| [Rect]() | --- @@ -170,7 +170,7 @@ A static image to display while loading the image source. | Type | | -------------------------------- | -| [ImageSource](image-component#imagesource) | +| [ImageSource](#imagesource) | --- @@ -191,7 +191,7 @@ Similarly to `source`, this property represents the resource used to render the | Type | | ----------------------------------------------------- | -| [ImageSource](image-component#imagesource) (`uri` only), number | +| [ImageSource](#imagesource) (`uri` only), number | --- @@ -318,8 +318,7 @@ The image source (either a remote URL or a local file resource). | Type | | -------------------------------- | -| [ImageSource](image-component#imagesource) | - +| [ImageSource](#imagesource) | --- ### `src` @@ -354,7 +353,7 @@ This prop has precedence over both the `src` and `source` props. | Type | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Image Style Props](image-style-props#props), [Layout Props](layout-props#props), [Shadow Props](shadow-props#props), [Transforms](transforms#props) | +| [Image Style Props](), [Layout Props](), [Shadow Props](), [Transforms]() | --- @@ -374,7 +373,7 @@ Changes the color of all non-transparent pixels to the `tintColor`. | Type | | ------------------ | -| [color](colors.md) | +| [color]() | --- @@ -496,7 +495,7 @@ Resolves an asset reference into an object which has the properties `uri`, `scal |
Name
| Type | Description | | ------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------- | -| source
Required
| [ImageSource](image-component#imagesource), number | A number (opaque type returned by `require('./foo.png')`) or an ImageSource. | +| source
Required
| [ImageSource](#imagesource), number | A number (opaque type returned by `require('./foo.png')`) or an ImageSource. | ## Type Definitions @@ -512,7 +511,7 @@ Object returned in the `onLoad` callback. | Name | Type | Description | | ------ | ------ | ----------------------------------- | -| source | object | The [source object](#source-object) | +| source | object | The [source object](#imagesource) | #### Source Object From dd476423b7301eea696d0640b3fc17de98ae816d Mon Sep 17 00:00:00 2001 From: Anupriya Verma <54227869+anupriya13@users.noreply.github.com> Date: Fri, 18 Apr 2025 21:28:38 +0530 Subject: [PATCH 06/12] separate fabric and paper components --- website/sidebars.json | 6 ++++-- website/versioned_sidebars/version-0.79-sidebars.json | 6 ++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/website/sidebars.json b/website/sidebars.json index 1895d01d3..9a4e09791 100644 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -56,8 +56,10 @@ ] }, "apis": { - "Components (Windows)": [ - "image-component", + "Components (Windows - New) Fabric": [ + "image-component" + ], + "Components (Windows) Paper": [ "flyout-component", "glyph-component", "popup-component", diff --git a/website/versioned_sidebars/version-0.79-sidebars.json b/website/versioned_sidebars/version-0.79-sidebars.json index f20b192d4..a011a289a 100644 --- a/website/versioned_sidebars/version-0.79-sidebars.json +++ b/website/versioned_sidebars/version-0.79-sidebars.json @@ -56,8 +56,10 @@ ] }, "version-0.79-apis": { - "Components (Windows)": [ - "version-0.79-image-component", + "Components (Windows - New) Fabric": [ + "version-0.79-image-component" + ], + "Components (Windows) Paper": [ "version-0.79-flyout-component", "version-0.79-glyph-component", "version-0.79-popup-component", From 6a74c4637aeb3f0c62c4e570704f9192586db205 Mon Sep 17 00:00:00 2001 From: Anupriya Verma <54227869+anupriya13@users.noreply.github.com> Date: Sat, 19 Apr 2025 12:39:54 +0530 Subject: [PATCH 07/12] Add new docs and remove 0.79 versioned docs --- docs/activityindicator.md | 77 ++ docs/button.md | 188 ++++ docs/components-and-apis.md | 160 ++++ docs/flatlist.md | 855 ++++++++++++++++++ docs/image-component-windows.md | 2 +- docs/modal.md | 176 ++++ docs/refreshcontrol.md | 87 ++ docs/scrollview.md | 514 +++++++++++ docs/switch.md | 106 +++ docs/text.md | 693 ++++++++++++++ docs/textinput.md | 784 ++++++++++++++++ docs/touchablehighlight.md | 139 +++ docs/view-style-props.md | 443 +++++++++ docs/view.md | 495 ++++++++++ website/sidebars.json | 18 +- .../version-0.79/getting-started.md | 135 --- .../version-0.79/image-component-windows.md | 550 ----------- .../version-0.79/rnm-getting-started.md | 51 -- .../version-0.79-sidebars.json | 93 -- website/versions.json | 1 - 20 files changed, 4733 insertions(+), 834 deletions(-) create mode 100644 docs/activityindicator.md create mode 100644 docs/button.md create mode 100644 docs/components-and-apis.md create mode 100644 docs/flatlist.md create mode 100644 docs/modal.md create mode 100644 docs/refreshcontrol.md create mode 100644 docs/scrollview.md create mode 100644 docs/switch.md create mode 100644 docs/text.md create mode 100644 docs/textinput.md create mode 100644 docs/touchablehighlight.md create mode 100644 docs/view-style-props.md create mode 100644 docs/view.md delete mode 100644 website/versioned_docs/version-0.79/getting-started.md delete mode 100644 website/versioned_docs/version-0.79/image-component-windows.md delete mode 100644 website/versioned_docs/version-0.79/rnm-getting-started.md delete mode 100644 website/versioned_sidebars/version-0.79-sidebars.json diff --git a/docs/activityindicator.md b/docs/activityindicator.md new file mode 100644 index 000000000..1d56c4426 --- /dev/null +++ b/docs/activityindicator.md @@ -0,0 +1,77 @@ +--- +id: activityindicator +title: ActivityIndicator +--- + +Displays a circular loading indicator. + +## Example + +```SnackPlayer name=ActivityIndicator%20Example +import React from 'react'; +import {ActivityIndicator, StyleSheet} from 'react-native'; +import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; + +const App = () => ( + + + + + + + + +); + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + }, + horizontal: { + flexDirection: 'row', + justifyContent: 'space-around', + padding: 10, + }, +}); + +export default App; +``` + +# Reference + +## Props + +### [View Props](view#props) + +Inherits [View Props](view#props). + +--- + +### `animating` + +Whether to show the indicator (`true`) or hide it (`false`). + +| Type | Default | +| ---- | ------- | +| bool | `true` | + +--- + +### `color` + +The foreground color of the spinner. + +| Type | Default | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [color](colors) | `null` (system accent default color) | + +--- + +### `size` + +Size of the indicator. + +| Type | Default | +| ------------------------------------------------------------------------------ | --------- | +| enum(`'small'`, `'large'`)
number | `'small'` | diff --git a/docs/button.md b/docs/button.md new file mode 100644 index 000000000..3d86e528f --- /dev/null +++ b/docs/button.md @@ -0,0 +1,188 @@ +--- +id: button +title: Button +--- + +A basic button component that should render nicely on any platform. Supports a minimal level of customization. + +```tsx +