diff --git a/docs/_integration-with-existing-apps-objc.md b/docs/_integration-with-existing-apps-objc.md index 220245e9761..f2047c69f3b 100644 --- a/docs/_integration-with-existing-apps-objc.md +++ b/docs/_integration-with-existing-apps-objc.md @@ -39,7 +39,7 @@ Next, make sure you have [installed the yarn package manager](https://yarnpkg.co Install the `react` and `react-native` packages. Open a terminal or command prompt, then navigate to the directory with your `package.json` file and run: - + ```shell @@ -62,7 +62,7 @@ This will print a message similar to the following (scroll up in the yarn output This is OK, it means we also need to install React: - + ```shell @@ -346,7 +346,7 @@ Apple has blocked implicit cleartext HTTP resource loading. So we need to add th To run your app, you need to first start the development server. To do this, run the following command in the root directory of your React Native project: - + ```shell diff --git a/docs/accessibilityinfo.md b/docs/accessibilityinfo.md index 0ba8355104c..371aad58a75 100644 --- a/docs/accessibilityinfo.md +++ b/docs/accessibilityinfo.md @@ -9,7 +9,7 @@ Sometimes it's useful to know whether or not the device has a screen reader that ## Example - + ```SnackPlayer name=AccessibilityInfo%20Function%20Component%20Example&supportedPlatforms=android,ios @@ -76,7 +76,7 @@ export default App; - + ```SnackPlayer name=AccessibilityInfo%20Class%20Component%20Example&supportedPlatforms=android,ios&ext=js diff --git a/docs/activityindicator.md b/docs/activityindicator.md index 6659c0c6a2f..b3db8bd4da0 100644 --- a/docs/activityindicator.md +++ b/docs/activityindicator.md @@ -9,7 +9,7 @@ Displays a circular loading indicator. ## Example - + ```SnackPlayer name=ActivityIndicator%20Function%20Component%20Example diff --git a/docs/alert.md b/docs/alert.md index e90473e384d..561a8098a2a 100644 --- a/docs/alert.md +++ b/docs/alert.md @@ -13,7 +13,7 @@ This is an API that works both on Android and iOS and can show static alerts. Al ## Example - + ```SnackPlayer name=Alert%20Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/docs/animated.md b/docs/animated.md index 128109d6856..b49335c8ddc 100644 --- a/docs/animated.md +++ b/docs/animated.md @@ -9,7 +9,7 @@ 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://reactjs.org/docs/hooks-reference.html#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. @@ -26,7 +26,7 @@ The core workflow for creating an animation is to create an `Animated.Value`, ho The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim` - + ```SnackPlayer name=Animated diff --git a/docs/animations.md b/docs/animations.md index 5218ceae425..f7b2fcfaa04 100644 --- a/docs/animations.md +++ b/docs/animations.md @@ -17,7 +17,7 @@ The [`Animated`](animated) API is designed to concisely express a wide variety o For example, a container view that fades in when it is mounted may look like this: - + ```SnackPlayer ext=js @@ -310,7 +310,7 @@ The following example implements a horizontal scrolling carousel where the scrol #### ScrollView with Animated Event Example - + ```SnackPlayer name=Animated&supportedPlatforms=ios,android @@ -441,7 +441,7 @@ export default App; - + ```SnackPlayer name=Animated&supportedPlatforms=ios,android&ext=js @@ -774,7 +774,7 @@ onPanResponderMove={Animated.event( #### PanResponder with Animated Event Example - + ```SnackPlayer name=Animated diff --git a/docs/appearance.md b/docs/appearance.md index 24149c4ae04..51fe453f6e1 100644 --- a/docs/appearance.md +++ b/docs/appearance.md @@ -13,7 +13,7 @@ The `Appearance` module exposes information about the user's appearance preferen #### Developer notes - + diff --git a/docs/appstate.md b/docs/appstate.md index 8a65cf9e9cf..5baa1cd1a73 100644 --- a/docs/appstate.md +++ b/docs/appstate.md @@ -24,7 +24,7 @@ For more information, see [Apple's documentation](https://developer.apple.com/do To see the current state, you can check `AppState.currentState`, which will be kept up-to-date. However, `currentState` will be null at launch while `AppState` retrieves it over the bridge. - + ```SnackPlayer name=AppState%20Function%20Component%20Example @@ -77,7 +77,7 @@ If you don't want to see the AppState update from `active` to `inactive` on iOS - + ```SnackPlayer name=AppState%20Class%20Component%20Example&ext=js diff --git a/docs/backhandler.md b/docs/backhandler.md index 43ed22af140..cae8cc4ffe2 100644 --- a/docs/backhandler.md +++ b/docs/backhandler.md @@ -45,7 +45,7 @@ BackHandler.addEventListener('hardwareBackPress', function () { The following example implements a scenario where you confirm if the user wants to exit the app: - + ```SnackPlayer name=BackHandler&supportedPlatforms=android @@ -99,7 +99,7 @@ export default App; - + ```SnackPlayer name=BackHandler&supportedPlatforms=android&ext=js diff --git a/docs/building-for-tv.md b/docs/building-for-tv.md index 3b18715bc0d..efaaf4d5576 100644 --- a/docs/building-for-tv.md +++ b/docs/building-for-tv.md @@ -8,7 +8,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications. - + diff --git a/docs/communication-android.md b/docs/communication-android.md index a6f89449c81..2a7aafefbfd 100644 --- a/docs/communication-android.md +++ b/docs/communication-android.md @@ -21,7 +21,7 @@ Properties are the most straightforward way of cross-component communication. So You can pass properties down to the React Native app by providing a custom implementation of `ReactActivityDelegate` in your main activity. This implementation should override `getLaunchOptions` to return a `Bundle` with the desired properties. - + @@ -82,7 +82,7 @@ export default class ImageBrowserApp extends React.Component { `ReactRootView` provides a read-write property `appProperties`. After `appProperties` is set, the React Native app is re-rendered with new properties. The update is only performed when the new updated properties differ from the previous ones. - + diff --git a/docs/custom-webview-android.md b/docs/custom-webview-android.md index bfb8be3c836..5140095872d 100644 --- a/docs/custom-webview-android.md +++ b/docs/custom-webview-android.md @@ -26,7 +26,7 @@ To get started, you'll need to create a subclass of `RNCWebViewManager`, `RNCWeb - `getName` - `addEventEmitters` - + ```java @@ -94,7 +94,7 @@ You'll need to follow the usual steps to [register the module](native-modules-an To add a new property, you'll need to add it to `CustomWebView`, and then expose it in `CustomWebViewManager`. - + ```java @@ -149,7 +149,7 @@ class CustomWebViewManager : RNCWebViewManager() { For events, you'll first need to make create event subclass. - + ```java @@ -198,7 +198,7 @@ You can trigger the event in your web view client. You can hook existing handler You should refer to [RNCWebViewManager.java](https://github.com/react-native-webview/react-native-webview/blob/master/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java) in the React Native WebView codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality. - + ```java @@ -274,7 +274,7 @@ protected class CustomWebViewClient : RNCWebViewClient() { Finally, you'll need to expose the events in `CustomWebViewManager` through `getExportedCustomDirectEventTypeConstants`. Note that currently, the default implementation returns `null`, but this may change in the future. - + ```java diff --git a/docs/datepickerios.md b/docs/datepickerios.md index 0820b586cd2..d236ffc01f6 100644 --- a/docs/datepickerios.md +++ b/docs/datepickerios.md @@ -11,7 +11,7 @@ Use `DatePickerIOS` to render a date/time picker (selector) on iOS. This is a co ### Example - + ```SnackPlayer name=DatePickerIOS&supportedPlatforms=ios diff --git a/docs/debugging.md b/docs/debugging.md index 17bc148534c..273f2173a88 100644 --- a/docs/debugging.md +++ b/docs/debugging.md @@ -90,7 +90,7 @@ You can use [the standalone version of React Developer Tools](https://github.com > Note: Version 4 of `react-devtools` requires `react-native` version 0.62 or higher to work properly. - + ```shell diff --git a/docs/dimensions.md b/docs/dimensions.md index 2eb9556460d..2a4e3ed184e 100644 --- a/docs/dimensions.md +++ b/docs/dimensions.md @@ -24,7 +24,7 @@ If you are targeting foldable devices or devices which can change the screen siz ## Example - + ```SnackPlayer name=Dimensions @@ -86,7 +86,7 @@ export default App; - + ```SnackPlayer name=Dimensions&ext=js diff --git a/docs/direct-manipulation.md b/docs/direct-manipulation.md index fcb0aa7a5da..cd434498260 100644 --- a/docs/direct-manipulation.md +++ b/docs/direct-manipulation.md @@ -63,7 +63,7 @@ If you look at the implementation of `setNativeProps` in [NativeMethodsMixin](ht Composite components are not backed by a native view, so you cannot call `setNativeProps` on them. Consider this example: - + ```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=js @@ -116,7 +116,7 @@ If you run this you will immediately see this error: `Touchable child must eithe Since the `setNativeProps` method exists on any ref to a `View` component, it is enough to forward a ref on your custom component to one of the `` components that it renders. This means that a call to `setNativeProps` on the custom component will have the same effect as if you called `setNativeProps` on the wrapped `View` component itself. - + ```SnackPlayer name=Forwarding%20setNativeProps&ext=js @@ -171,7 +171,7 @@ You may have noticed that we passed all of the props down to the child view usin Another very common use case of `setNativeProps` is to edit the value of the TextInput. The `controlled` prop of TextInput can sometimes drop characters when the `bufferDelay` is low and the user types very quickly. Some developers prefer to skip this prop entirely and instead use `setNativeProps` to directly manipulate the TextInput value when necessary. For example, the following code demonstrates editing the input when you tap a button: - + ```SnackPlayer name=Clear%20text&ext=js @@ -316,7 +316,7 @@ Like `measure()`, but measures the view relative to an ancestor, specified with This method can also be called with a `relativeToNativeNode` handler (instead of reference), but this variant is deprecated. ::: - + ```SnackPlayer name=measureLayout%20example&supportedPlatforms=android,ios&ext=js diff --git a/docs/drawerlayoutandroid.md b/docs/drawerlayoutandroid.md index c8e949ca592..2bc57c62cdc 100644 --- a/docs/drawerlayoutandroid.md +++ b/docs/drawerlayoutandroid.md @@ -9,7 +9,7 @@ React component that wraps the platform `DrawerLayout` (Android only). The Drawe ## Example - + ```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=js diff --git a/docs/dynamiccolorios.md b/docs/dynamiccolorios.md index b7af9f44320..d42afdb13e9 100644 --- a/docs/dynamiccolorios.md +++ b/docs/dynamiccolorios.md @@ -22,7 +22,7 @@ At runtime, the system will choose which of the colors to display depending on t #### Developer notes - + diff --git a/docs/easing.md b/docs/easing.md index e0f30cfa6a0..b701ca5df13 100644 --- a/docs/easing.md +++ b/docs/easing.md @@ -45,7 +45,7 @@ The following helpers are used to modify other easing functions. ## Example - + ```SnackPlayer name=Easing%20Demo&ext=js diff --git a/docs/flatlist.md b/docs/flatlist.md index d1f7d0898a2..44750cd170e 100644 --- a/docs/flatlist.md +++ b/docs/flatlist.md @@ -22,7 +22,7 @@ If you need section support, use [``](sectionlist.md). ## Example - + ```SnackPlayer name=flatlist-simple&ext=js @@ -166,7 +166,7 @@ More complex, selectable example below. - By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes. - `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property. - + ```SnackPlayer name=flatlist-selectable&ext=js diff --git a/docs/flexbox.md b/docs/flexbox.md index c39fc3ae6b5..450642676fa 100644 --- a/docs/flexbox.md +++ b/docs/flexbox.md @@ -65,7 +65,7 @@ export default Flex; You can learn more [here](https://yogalayout.com/docs/flex-direction). - + ```SnackPlayer name=Flex%20Direction&ext=js @@ -282,7 +282,7 @@ Layout [`direction`](layout-props#direction) specifies the direction in which ch - `RTL` Text and children are laid out from right to left. Margin and padding applied to the start of an element are applied on the right side. - + ```SnackPlayer name=Flex%20Direction&ext=js @@ -509,7 +509,7 @@ export default DirectionLayout; You can learn more [here](https://yogalayout.com/docs/justify-content). - + ```SnackPlayer name=Justify%20Content&ext=js @@ -752,7 +752,7 @@ For `stretch` to have an effect, children must not have a fixed dimension along You can learn more [here](https://yogalayout.com/docs/align-items). - + ```SnackPlayer name=Align%20Items&ext=js @@ -985,7 +985,7 @@ export default AlignItemsLayout; [`alignSelf`](layout-props#alignself) has the same options and effect as `alignItems` but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. `alignSelf` overrides any option set by the parent with `alignItems`. - + ```SnackPlayer name=Align%20Self&ext=js @@ -1235,7 +1235,7 @@ export default AlignSelfLayout; You can learn more [here](https://yogalayout.com/docs/align-content). - + ```SnackPlayer name=Align%20Content&ext=js @@ -1476,7 +1476,7 @@ The [`flexWrap`](layout-props#flexwrap) property is set on containers and it con When wrapping lines, `alignContent` can be used to specify how the lines are placed in the container. Learn more [here](https://yogalayout.com/docs/flex-wrap). - + ```SnackPlayer name=Flex%20Wrap&ext=js @@ -1707,7 +1707,7 @@ export default FlexWrapLayout; You can learn more [here](https://yogalayout.com/docs/flex). - + ```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=js @@ -2080,7 +2080,7 @@ export default App; You can use `flexWrap` and `alignContent` alongwith `gap` to add consistent spacing between items. - + ```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=js @@ -2307,7 +2307,7 @@ Both `width` and `height` can take the following values: - `percentage` Defines the width or height in percentage of its parent's width or height, respectively. - + ```SnackPlayer name=Width%20and%20Height&ext=js @@ -2588,7 +2588,7 @@ The `position` type of an element defines how it is positioned within its parent - `absolute` When positioned absolutely, an element doesn't take part in the normal layout flow. It is instead laid out independent of its siblings. The position is determined based on the `top`, `right`, `bottom`, and `left` values. - + ```SnackPlayer name=Absolute%20%26%20Relative%20Layout&ext=js diff --git a/docs/getting-started.md b/docs/getting-started.md index ea3b70a6fcf..8f81855cfd9 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -14,12 +14,12 @@ This page will help you install and build your first React Native app. **If you are already familiar with mobile development**, you may want to use React Native CLI. It requires Xcode or Android Studio to get started. If you already have one of these tools installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them. - + Run the following command to create a new React Native project called "AwesomeProject": - + ```shell @@ -91,12 +91,12 @@ The instructions are a bit different depending on your development operating sys #### Development OS - + #### Target OS - + [//]: # 'macOS, Android' @@ -118,7 +118,7 @@ The instructions are a bit different depending on your development operating sys #### Target OS - + [//]: # 'Windows, Android' @@ -142,7 +142,7 @@ The instructions are a bit different depending on your development operating sys #### Target OS - + [//]: # 'Linux, Android' diff --git a/docs/headless-js-android.md b/docs/headless-js-android.md index ca65d6673ff..26220a3937a 100644 --- a/docs/headless-js-android.md +++ b/docs/headless-js-android.md @@ -33,7 +33,7 @@ You can do anything in your task such as network requests, timers and so on, as Yes, this does still require some native code, but it's pretty thin. You need to extend `HeadlessJsTaskService` and override `getTaskConfig`, e.g.: - + ```java @@ -104,7 +104,7 @@ Now, whenever you [start your service][0], e.g. as a periodic task or in respons Example: - + ```java @@ -140,7 +140,7 @@ By default, the headless JS task will not perform any retries. In order to do so `LinearCountingRetryPolicy` is an implementation of `HeadlessJsRetryPolicy` that allows you to specify a maximum number of retries with a fixed delay between each attempt. If that does not suit your needs then you can implement your own `HeadlessJsRetryPolicy`. These policies can be passed as an extra argument to the `HeadlessJsTaskConfig` constructor, e.g. - + ```java @@ -213,7 +213,7 @@ Following lines shows part of Android manifest file for registering broadcast re Broadcast receiver then handles intent that was broadcasted in onReceive function. This is a great place to check whether your app is on foreground or not. If app is not on foreground we can prepare our intent to be started, with no information or additional information bundled using `putExtra` (keep in mind bundle can handle only parcelable values). In the end service is started and wakelock is acquired. - + ```java diff --git a/docs/image-style-props.md b/docs/image-style-props.md index 916b2dd328c..34a43d8ac00 100644 --- a/docs/image-style-props.md +++ b/docs/image-style-props.md @@ -9,7 +9,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ### Image Resize Mode - + ```SnackPlayer name=Image%20Resize%20Modes%20Function%20Component%20Example @@ -182,7 +182,7 @@ export default DisplayAnImageWithStyle; ### Image Border - + ```SnackPlayer name=Style%20BorderWidth%20and%20BorderColor%20Function%20Component%20Example @@ -265,7 +265,7 @@ export default DisplayAnImageWithStyle; ### Image Border Radius - + ```SnackPlayer name=Style%20Border%20Radius%20Function%20Component%20Example @@ -416,7 +416,7 @@ export default DisplayAnImageWithStyle; ### Image Tint - + ```SnackPlayer name=Style%20tintColor%20Function%20Component diff --git a/docs/image.md b/docs/image.md index da149170a95..316764a236a 100644 --- a/docs/image.md +++ b/docs/image.md @@ -13,7 +13,7 @@ This example shows fetching and displaying an image from local storage as well a ## Examples - + ```SnackPlayer name=Function%20Component%20Example @@ -112,7 +112,7 @@ export default DisplayAnImage; You can also add `style` to an image: - + ```SnackPlayer name=Function%20Component%20Example diff --git a/docs/improvingux.md b/docs/improvingux.md index e36cd05ef68..8d6c4f14859 100644 --- a/docs/improvingux.md +++ b/docs/improvingux.md @@ -17,7 +17,7 @@ Entering text on touch phone is a challenge - small screen, software keyboard. B Check out [`TextInput` docs](textinput.md) for more configuration options. - + ```SnackPlayer name=TextInput%20form%20example&ext=js @@ -212,7 +212,7 @@ export default App; Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the [`KeyboardAvoidingView` component](keyboardavoidingview.md). - + ```SnackPlayer name=KeyboardAvoidingView%20example&ext=js diff --git a/docs/integration-with-android-fragment.md b/docs/integration-with-android-fragment.md index e479982449b..0f476dfa73b 100644 --- a/docs/integration-with-android-fragment.md +++ b/docs/integration-with-android-fragment.md @@ -19,7 +19,7 @@ You will need to implement the `ReactApplication` interface in your main Applica Ensure your main Application class implements ReactApplication: - + ```kotlin @@ -38,7 +38,7 @@ public class MyReactApplication extends Application implements ReactApplication Override the required methods `getUseDeveloperSupport`, `getPackages` and `getReactNativeHost`: - + ```kotlin @@ -96,7 +96,7 @@ public class MyReactApplication extends Application implements ReactApplication If you are using Android Studio, use Alt + Enter to add all missing imports in your class. Alternatively these are the required imports to include manually: - + ```kotlin @@ -165,7 +165,7 @@ Now in your Activity class (e.g. `MainActivity.java` or `MainActivity.kt`) you n Add the button field to the top of your Activity: - + ```kotlin @@ -184,7 +184,7 @@ private Button mButton; Update your Activity's `onCreate` method as follows: - + ```kotlin @@ -241,7 +241,7 @@ If you are using a starter kit for React Native, replace the "HelloWorld" string Add the `getLaunchOptions` method which will allow you to pass props through to your component. This is optional and you can remove `setLaunchOptions` if you don't need to pass any props. - + ```kotlin @@ -267,7 +267,7 @@ private Bundle getLaunchOptions(String message) { Add all missing imports in your Activity class. Be careful to use your package’s BuildConfig and not the one from the facebook package! Alternatively these are the required imports to include manually: - + ```kotlin diff --git a/docs/integration-with-existing-apps.md b/docs/integration-with-existing-apps.md index 52d9380f9c9..237a9d39ce8 100644 --- a/docs/integration-with-existing-apps.md +++ b/docs/integration-with-existing-apps.md @@ -13,7 +13,7 @@ React Native is great when you are starting a new mobile app from scratch. Howev The specific steps are different depending on what platform you're targeting. - + diff --git a/docs/interactionmanager.md b/docs/interactionmanager.md index cab9bd01144..42bd1893b50 100644 --- a/docs/interactionmanager.md +++ b/docs/interactionmanager.md @@ -43,7 +43,7 @@ By default, queued tasks are executed together in a loop in one `setImmediate` b ### Basic - + ```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js @@ -210,7 +210,7 @@ export default App; ### Advanced - + ```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=js diff --git a/docs/intro-react.md b/docs/intro-react.md index b48fca7f140..f2483c4b3a6 100644 --- a/docs/intro-react.md +++ b/docs/intro-react.md @@ -21,7 +21,7 @@ If you want to dig deeper, we encourage you to check out [React’s official doc The rest of this introduction to React uses cats in its examples: friendly, approachable creatures that need names and a cafe to work in. Here is your very first Cat component: - + ```SnackPlayer name=Your%20Cat @@ -145,7 +145,7 @@ export default Cat; Any JavaScript expression will work between curly braces, including function calls like `{getFullName("Rum", "Tum", "Tugger")}`: - + ```SnackPlayer name=Curly%20Braces&ext=js @@ -223,7 +223,7 @@ export default Cat; #### Developer notes - + @@ -273,7 +273,7 @@ You can put as many cats in your cafe as you like. Each `` renders a unique **Props** is short for “properties”. Props let you customize React components. For example, here you pass each `` a different `name` for `Cat` to render: - + ```SnackPlayer name=Multiple%20Props&ext=js @@ -373,12 +373,12 @@ While you can think of props as arguments you use to configure how components re The following example takes place in a cat cafe where two hungry cats are waiting to be fed. Their hunger, which we expect to change over time (unlike their names), is stored as state. To feed the cats, press their buttons—which will update their state. - + You can add state to a component by calling [React’s `useState` Hook](https://reactjs.org/docs/hooks-state.html). A Hook is a kind of function that lets you “hook into” React features. For example, `useState` is a Hook that lets you add state to function components. You can learn more about [other kinds of Hooks in the React documentation.](https://reactjs.org/docs/hooks-intro.html) - + ```SnackPlayer name=State&ext=js @@ -526,7 +526,7 @@ const Cafe = () => { The older class components approach is a little different when it comes to state. - + ```SnackPlayer name=State%20and%20Class%20Components&ext=js diff --git a/docs/introduction.md b/docs/introduction.md index 650ee42325a..531e051abd9 100644 --- a/docs/introduction.md +++ b/docs/introduction.md @@ -59,7 +59,7 @@ With React, you can make components using either classes or functions. Originall [Hooks were introduced in React Native 0.59.](/blog/2019/03/12/releasing-react-native-059), and because Hooks are the future-facing way to write your React components, we wrote this introduction using function component examples. Where useful, we also cover class components under a toggle like so: - + ```SnackPlayer name=Hello%20World%20Function%20Component @@ -116,7 +116,7 @@ You can find more examples of class components in [previous versions of this doc People from many different development backgrounds are learning React Native. You may have experience with a range of technologies, from web to Android to iOS and more. We try to write for developers from all backgrounds. Sometimes we provide explanations specific to one platform or another like so: - + diff --git a/docs/keyboard.md b/docs/keyboard.md index 81e251454f6..17212afec8f 100644 --- a/docs/keyboard.md +++ b/docs/keyboard.md @@ -11,7 +11,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it. - + ```SnackPlayer name=Keyboard%20Function%20Component%20Example&supportedPlatforms=ios,android @@ -69,7 +69,7 @@ export default Example; - + ```SnackPlayer name=Keyboard%20Class%20Component%20Example&supportedPlatforms=ios,android&ext=js diff --git a/docs/layout-props.md b/docs/layout-props.md index 3a01a1781e0..2e1281fc355 100644 --- a/docs/layout-props.md +++ b/docs/layout-props.md @@ -11,7 +11,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con The following example shows how different properties can affect or shape a React Native layout. You can try for example to add or remove squares from the UI while changing the values of the property `flexWrap`. - + ```SnackPlayer name=LayoutProps%20Example&ext=js diff --git a/docs/layoutanimation.md b/docs/layoutanimation.md index 7afa98c7659..a45d30de22f 100644 --- a/docs/layoutanimation.md +++ b/docs/layoutanimation.md @@ -131,7 +131,7 @@ Helper that creates an object (with `create`, `update`, and `delete` fields) to **Example:** - + ```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios @@ -347,7 +347,7 @@ Calls `configureNext()` with `Presets.spring`. **Example:** - + ```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios diff --git a/docs/libraries.md b/docs/libraries.md index abecb19b5a6..fb6897d4521 100644 --- a/docs/libraries.md +++ b/docs/libraries.md @@ -22,7 +22,7 @@ If you have Node.js installed on your computer then you already have the npm CLI To install a library in your project, navigate to your project directory in your terminal and run the installation command. Let's try this with `react-native-webview`: - + ```shell diff --git a/docs/linking.md b/docs/linking.md index fcfc55e951e..0a5fd3b0349 100644 --- a/docs/linking.md +++ b/docs/linking.md @@ -37,7 +37,7 @@ As mentioned in the introduction, there are some URL schemes for core functional If you want to enable deep links in your app, please read the below guide: - + > For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters). @@ -114,7 +114,7 @@ You can handle these events with `Linking.getInitialURL()` - it returns a Promis ### Open Links and Deep Links (Universal Links) - + ```SnackPlayer name=Linking%20Function%20Component%20Example&supportedPlatforms=ios,android&ext=js @@ -220,7 +220,7 @@ export default App; ### Open Custom Settings - + ```SnackPlayer name=Linking%20Function%20Component%20Example&supportedPlatforms=ios,android&ext=js @@ -299,7 +299,7 @@ export default App; ### Get the Deep Link - + ```SnackPlayer name=Linking%20Function%20Component%20Example&supportedPlatforms=ios,android&ext=js @@ -412,7 +412,7 @@ export default App; ### Send Intents (Android) - + ```SnackPlayer name=Linking%20Function%20Component%20Example&supportedPlatforms=android&ext=js diff --git a/docs/modal.md b/docs/modal.md index 46db5921f3f..b7e8ade8f01 100644 --- a/docs/modal.md +++ b/docs/modal.md @@ -9,7 +9,7 @@ The Modal component is a basic way to present content above an enclosing view. ## Example - + ```SnackPlayer name=Modal&supportedPlatforms=android,ios diff --git a/docs/native-components-android.md b/docs/native-components-android.md index 985734cfe14..0d6a49ef860 100644 --- a/docs/native-components-android.md +++ b/docs/native-components-android.md @@ -32,7 +32,7 @@ To send a view: In this example we create view manager class `ReactImageManager` that extends `SimpleViewManager` of type `ReactImageView`. `ReactImageView` is the type of object managed by the manager, this will be the custom native view. Name returned by `getName` is used to reference the native view type from JavaScript. - + ```kotlin @@ -75,7 +75,7 @@ public class ReactImageManager extends SimpleViewManager { Views are created in the `createViewInstance` method, the view should initialize itself in its default state, any properties will be set via a follow up call to `updateView.` - + ```kotlin @@ -106,7 +106,7 @@ Except from `name`, `@ReactProp` annotation may take following optional argument Setter declaration requirements for methods annotated with `@ReactPropGroup` are different than for `@ReactProp`, please refer to the `@ReactPropGroup` annotation class docs for more information about it. **IMPORTANT!** in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" value can be specified using `defaultBoolean`, `defaultFloat`, etc. arguments of `@ReactProp` annotation, for complex types setter will be called with value set to `null`). - + ```kotlin @@ -153,7 +153,7 @@ Setter declaration requirements for methods annotated with `@ReactPropGroup` are The final step is to register the ViewManager to the application, this happens in a similar way to [Native Modules](native-modules-android.md), via the applications package member function `createViewManagers`. - + ```kotlin @@ -201,7 +201,7 @@ The `requireNativeComponent` function takes the name of the native view. Note th So now we know how to expose native view components that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the `getId()` method. - + ```kotlin @@ -241,7 +241,7 @@ class MyCustomView extends View { To map the `topChange` event name to the `onChange` callback prop in JavaScript, register it by overriding the `getExportedCustomBubblingEventTypeConstants` method in your `ViewManager`: - + ```kotlin @@ -317,7 +317,7 @@ In order to integrate existing Native UI elements to your React Native app, you First, let's create a `CustomView` class which extends `FrameLayout` (the content of this view can be any view that you'd like to render) - + ```kotlin title="CustomView.kt" @@ -378,7 +378,7 @@ public class CustomView extends FrameLayout { ### 2. Create a `Fragment` - + ```kotlin title="MyFragment.kt" @@ -490,7 +490,7 @@ public class MyFragment extends Fragment { ### 3. Create the `ViewManager` subclass - + ```kotlin title="MyViewManager.kt" @@ -736,7 +736,7 @@ public class MyViewManager extends ViewGroupManager { ### 4. Register the `ViewManager` - + ```kotlin title="MyPackage.kt" @@ -786,7 +786,7 @@ public class MyPackage implements ReactPackage { ### 5. Register the `Package` - + ```kotlin title="MainApplication.kt" diff --git a/docs/native-modules-android.md b/docs/native-modules-android.md index b684500e9c5..2f1b0989383 100644 --- a/docs/native-modules-android.md +++ b/docs/native-modules-android.md @@ -38,7 +38,7 @@ The first step is to create the (`CalendarModule.java` or `CalendarModule.kt`) J Then add the following content: - + ```java @@ -85,7 +85,7 @@ As you can see, your `CalendarModule` class extends the `ReactContextBaseJavaMod All Java/Kotlin native modules in Android need to implement the `getName()` method. This method returns a string, which represents the name of the native module. The native module can then be accessed in JavaScript using its name. For example, in the below code snippet, `getName()` returns `"CalendarModule"`. - + ```java @@ -119,7 +119,7 @@ Next you will need to add a method to your native module that will create calend Set up a method `createCalendarEvent()` for `CalendarModule` that can be invoked in JS through `CalendarModule.createCalendarEvent()`. For now, the method will take in a name and location as strings. Argument type options will be covered shortly. - + ```java @@ -140,7 +140,7 @@ public void createCalendarEvent(String name, String location) { Add a debug log in the method to confirm it has been invoked when you call it from your application. Below is an example of how you can import and use the [Log](https://developer.android.com/reference/android/util/Log) class from the Android util package: - + ```java @@ -174,7 +174,7 @@ Once you finish implementing the native module and hook it up in JavaScript, you You can pass `isBlockingSynchronousMethod = true` to a native method to mark it as a synchronous method. - + ```java @@ -203,7 +203,7 @@ To add your Native Module to `ReactPackage`, first create a new Java/Kotlin Clas Then add the following content: - + ```java @@ -273,7 +273,7 @@ To register the `CalendarModule` package, you must add `MyAppPackage` to the lis Locate ReactNativeHost’s `getPackages()` method and add your package to the packages list `getPackages()` returns: - + ```java @@ -444,7 +444,7 @@ When a native module method is invoked in JavaScript, React Native converts the For argument types not listed above, you will need to handle the conversion yourself. For example, in Android, `Date` conversion is not supported out of the box. You can handle the conversion to the `Date` type within the native method yourself like so: - + ```java @@ -478,7 +478,7 @@ For argument types not listed above, you will need to handle the conversion your A native module can export constants by implementing the native method `getConstants()`, which is available in JS. Below you will implement `getConstants()` and return a Map that contains a `DEFAULT_EVENT_NAME` constant you can access in JavaScript: - + ```java @@ -518,7 +518,7 @@ Native modules also support a unique kind of argument: a callback. Callbacks are In order to create a native module method with a callback, first import the `Callback` interface, and then add a new parameter to your native module method of type `Callback`. There are a couple of nuances with callback arguments that will soon be lifted with TurboModules. First off, you can only have two callbacks in your function arguments- a successCallback and a failureCallback. In addition, the last argument to a native module method call, if it's a function, is treated as the successCallback, and the second to last argument to a native module method call, if it's a function, is treated as the failure callback. - + ```java @@ -543,7 +543,7 @@ import com.facebook.react.bridge.Callback You can invoke the callback in your Java/Kotlin method, providing whatever data you want to pass to JavaScript. Please note that you can only pass serializable data from native code to JavaScript. If you need to pass back a native object you can use `WriteableMaps`, if you need to use a collection use `WritableArrays`. It is also important to highlight that the callback is not invoked immediately after the native function completes. Below the ID of an event created in an earlier call is passed to the callback. - + ```java @@ -586,7 +586,7 @@ Another important detail to note is that a native module method can only invoke There are two approaches to error handling with callbacks. The first is to follow Node’s convention and treat the first argument passed to the callback as an error object. - + ```java @@ -630,7 +630,7 @@ const onPress = () => { Another option is to use an onSuccess and onFailure callback: - + ```java @@ -678,7 +678,7 @@ Native modules can also fulfill a [Promise](https://developer.mozilla.org/en-US/ Refactoring the above code to use a promise instead of callbacks looks like this: - + ```java @@ -733,7 +733,7 @@ const onSubmit = async () => { The reject method takes different combinations of the following arguments: - + ```java @@ -754,7 +754,7 @@ For more detail, you can find the `Promise.java` interface [here](https://github Java/Kotlin reject call: - + ```java @@ -782,7 +782,7 @@ Error message in React Native App when promise is rejected: Native modules can signal events to JavaScript without being invoked directly. For example, you might want to signal to JavaScript a reminder that a calendar event from the native Android calendar app will occur soon. The easiest way to do this is to use the `RCTDeviceEventEmitter` which can be obtained from the `ReactContext` as in the code snippet below. - + ```java @@ -891,7 +891,7 @@ useEffect(() => { You'll need to listen to `onActivityResult` if you want to get results from an activity you started with `startActivityForResult`. To do this, you must extend `BaseActivityEventListener` or implement `ActivityEventListener`. The former is preferred as it is more resilient to API changes. Then, you need to register the listener in the module's constructor like so: - + ```java @@ -910,7 +910,7 @@ reactContext.addActivityEventListener(mActivityResultListener); Now you can listen to `onActivityResult` by implementing the following method: - + ```java @@ -943,7 +943,7 @@ override fun onActivityResult( Let's implement a basic image picker to demonstrate this. The image picker will expose the method `pickImage` to JavaScript, which will return the path of the image when called. - + ```kotlin @@ -1103,7 +1103,7 @@ class ImagePickerModule(reactContext: ReactApplicationContext) : Listening to the activity's LifeCycle events such as `onResume`, `onPause` etc. is very similar to how `ActivityEventListener` was implemented. The module must implement `LifecycleEventListener`. Then, you need to register a listener in the module's constructor like so: - + ```java @@ -1122,7 +1122,7 @@ reactContext.addLifecycleEventListener(this) Now you can listen to the activity's LifeCycle events by implementing the following methods: - + ```java diff --git a/docs/network.md b/docs/network.md index 73f596e7390..49338a36570 100644 --- a/docs/network.md +++ b/docs/network.md @@ -74,10 +74,10 @@ const getMoviesFromApiAsync = async () => { Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently. - + - + ```SnackPlayer name=Fetch%20Example&ext=js @@ -187,7 +187,7 @@ export default App; - + ```SnackPlayer name=Fetch%20Example&ext=js diff --git a/docs/new-architecture-library-android.md b/docs/new-architecture-library-android.md index f0f702941fb..c02ee40653d 100644 --- a/docs/new-architecture-library-android.md +++ b/docs/new-architecture-library-android.md @@ -57,7 +57,7 @@ Update your native module or component to ensure it **extends the abstract class Following the example set forth in the previous section, your library might import `NativeAwesomeManagerSpec`, implement the relevant native interface and the necessary methods for it: - + diff --git a/docs/new-architecture-library-intro.md b/docs/new-architecture-library-intro.md index b6c12551bf2..6341b2dc6eb 100644 --- a/docs/new-architecture-library-intro.md +++ b/docs/new-architecture-library-intro.md @@ -29,7 +29,7 @@ JavaScript spec files **must** be named `Native.js`, and they expor The following is a basic JavaScript spec template, written using the [Flow](https://flow.org/) and [TypeScript](https://www.typescriptlang.org/) syntax. - @@ -78,7 +78,7 @@ JavaScript spec files **must** be named `NativeComponent.js` ( The following snippet shows a basic JavaScript spec template, written in [Flow](https://flow.org/) as well as [TypeScript](https://www.typescriptlang.org/). - @@ -524,7 +524,7 @@ RCT_EXPORT_METHOD(moveToRegion:(nonnull NSNumber *)reactTag **Android** - + ```kotlin diff --git a/docs/optimizing-flatlist-configuration.md b/docs/optimizing-flatlist-configuration.md index 4383ec5a2b1..df37a9872e8 100644 --- a/docs/optimizing-flatlist-configuration.md +++ b/docs/optimizing-flatlist-configuration.md @@ -127,7 +127,7 @@ For functional components, move the `renderItem` function outside of the returne For class componenents, move the `renderItem` function outside of the render function, so it won't recreate itself each time the render function is called. - + ```tsx diff --git a/docs/panresponder.md b/docs/panresponder.md index 35bea487869..eca587923d2 100644 --- a/docs/panresponder.md +++ b/docs/panresponder.md @@ -80,7 +80,7 @@ const ExampleComponent = () => { `PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen - + ```SnackPlayer name=PanResponder diff --git a/docs/permissionsandroid.md b/docs/permissionsandroid.md index b24af29bf0f..963b1d2a7d1 100644 --- a/docs/permissionsandroid.md +++ b/docs/permissionsandroid.md @@ -20,7 +20,7 @@ If a user has previously turned off a permission that you prompt for, the OS wil ### Example - + ```SnackPlayer name=PermissionsAndroid%20Example&supportedPlatforms=android diff --git a/docs/platformcolor.md b/docs/platformcolor.md index 422e0096c4c..15d7af3fd48 100644 --- a/docs/platformcolor.md +++ b/docs/platformcolor.md @@ -32,7 +32,7 @@ For a full list of the types of system colors supported, see: #### Developer notes - + diff --git a/docs/props.md b/docs/props.md index b562356f507..490eb214632 100644 --- a/docs/props.md +++ b/docs/props.md @@ -29,7 +29,7 @@ Notice the braces surrounding `{pic}` - these embed the variable `pic` into JSX. Your own components can also use `props`. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place by referring to `props` in your `render` function. Here's an example: - + ```SnackPlayer name=Props&ext=js diff --git a/docs/react-18-and-react-native.md b/docs/react-18-and-react-native.md index 45fe706e644..874f3a036b3 100644 --- a/docs/react-18-and-react-native.md +++ b/docs/react-18-and-react-native.md @@ -45,7 +45,7 @@ However, if you do hit any issues, we provide an option to opt-out of the new ro On Android, you will be able to override the `isConcurrentRootEnabled` in your ActivityDelegate (in the `MainActivity` file), and enable/disable Concurrent React. - + diff --git a/docs/running-on-device.md b/docs/running-on-device.md index a14f79b744a..81d63d5f023 100644 --- a/docs/running-on-device.md +++ b/docs/running-on-device.md @@ -12,14 +12,14 @@ It's always a good idea to test your app on an actual device before releasing it If you used `create-expo-app` to set up your project, you can run your app on a device in Expo Go by scanning the QR code that is displayed when you run `npm start`. Refer to the Expo guide for [running your project on your device](https://docs.expo.dev/workflow/run-on-device/) for more information. ::: - + ## Running your app on Android devices #### Development OS - + [//]: # 'macOS, Android' @@ -316,7 +316,7 @@ You have built a great app using React Native, and you are now itching to releas #### Development OS - + [//]: # 'macOS, iOS' diff --git a/docs/sectionlist.md b/docs/sectionlist.md index bc82fc6029e..e6fb7c76355 100644 --- a/docs/sectionlist.md +++ b/docs/sectionlist.md @@ -22,7 +22,7 @@ If you don't need section support and want a simpler interface, use [` ## Example - + ```SnackPlayer name=SectionList%20Example diff --git a/docs/security.md b/docs/security.md index fb900a57aae..632fe2e591f 100644 --- a/docs/security.md +++ b/docs/security.md @@ -34,7 +34,7 @@ If you must have an API key or a secret to access some resource from your app, t #### Developer Notes - + diff --git a/docs/shadow-props.md b/docs/shadow-props.md index 744e6ce744d..1d0547d9144 100644 --- a/docs/shadow-props.md +++ b/docs/shadow-props.md @@ -5,7 +5,7 @@ title: Shadow Props import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; - + ```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=js diff --git a/docs/share.md b/docs/share.md index 443beb7b70f..7ca8f8f8ea9 100644 --- a/docs/share.md +++ b/docs/share.md @@ -7,10 +7,10 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ## Example - + - + ```SnackPlayer name=Function%20Component%20Example&supportedPlatforms=ios,android&ext=js @@ -90,7 +90,7 @@ export default ShareExample; - + ```SnackPlayer name=Class%20Component%20Example&supportedPlatforms=ios,android&ext=js diff --git a/docs/state.md b/docs/state.md index ba3aeaf578e..50f4f530739 100644 --- a/docs/state.md +++ b/docs/state.md @@ -11,7 +11,7 @@ In general, you should initialize `state` in the constructor, and then call `set For example, let's say we want to make text that blinks all the time. The text itself gets set once when the blinking component gets created, so the text itself is a `prop`. The "whether the text is currently on or off" changes over time, so that should be kept in `state`. - + ```SnackPlayer name=State&ext=js diff --git a/docs/statusbar.md b/docs/statusbar.md index 41c2e694bcf..710ba03bdbe 100644 --- a/docs/statusbar.md +++ b/docs/statusbar.md @@ -11,7 +11,7 @@ Component to control the app's status bar. The status bar is the zone, typically It is possible to have multiple `StatusBar` components mounted at the same time. The props will be merged in the order the `StatusBar` components were mounted. - + ```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=js diff --git a/docs/systrace.md b/docs/systrace.md index 7c26191008d..9594ea0ffcf 100644 --- a/docs/systrace.md +++ b/docs/systrace.md @@ -11,7 +11,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con `Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler. - + ```SnackPlayer name=Systrace%20Function%20Component%20Example diff --git a/docs/text-style-props.md b/docs/text-style-props.md index 6364b449152..56a4f44ba37 100644 --- a/docs/text-style-props.md +++ b/docs/text-style-props.md @@ -7,7 +7,7 @@ title: Text Style Props import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; - + ```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=js diff --git a/docs/text.md b/docs/text.md index aace382ad7e..d8440bf6176 100644 --- a/docs/text.md +++ b/docs/text.md @@ -11,7 +11,7 @@ A React component for displaying text. In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines: - + ```SnackPlayer name=Text%20Functional%20Component%20Example diff --git a/docs/the-new-architecture/backward-compatibility-fabric-components.md b/docs/the-new-architecture/backward-compatibility-fabric-components.md index b2e149c22bb..6e1caf05a55 100644 --- a/docs/the-new-architecture/backward-compatibility-fabric-components.md +++ b/docs/the-new-architecture/backward-compatibility-fabric-components.md @@ -304,7 +304,7 @@ my-component The code that should go in the `MyComponentViewManagerImpl.java` and that can be shared between the Native Component and the Fabric Native Component is, for example: - + ```java title="example of MyComponentViewManager.java" @@ -352,7 +352,7 @@ Then, the Native Component and the Fabric Native Component can be updated using For example, for a Native Component: - + ```java title="Native Component using the ViewManagerImpl" @@ -410,7 +410,7 @@ class MyComponentViewManager(var context: ReactApplicationContext) : SimpleViewM And, for a Fabric Native Component: - + ```java title="Fabric Component using the ViewManagerImpl" @@ -499,7 +499,7 @@ import MyComponent from 'your-component/src/index'; Since `codegenNativeComponent` is calling the `requireNativeComponent` under the hood, we need to re-export our component, to avoid registering it multiple times. - diff --git a/docs/the-new-architecture/backward-compatibility-turbomodules.md b/docs/the-new-architecture/backward-compatibility-turbomodules.md index b475308839e..7bfb31c7d52 100644 --- a/docs/the-new-architecture/backward-compatibility-turbomodules.md +++ b/docs/the-new-architecture/backward-compatibility-turbomodules.md @@ -272,7 +272,7 @@ my-module The code that should go in the `MyModuleImpl.java`, and that can be shared by the Legacy Native Module and the Turbo Native Module is, for example: - + ```java title="example of MyModuleImpl.java" @@ -325,7 +325,7 @@ Then, the Legacy Native Module and the Turbo Native Module can be updated with t For example, for a Legacy Native Module: - + ```java title="Native Module using the Impl module" @@ -377,7 +377,7 @@ class MyModule(context: ReactApplicationContext) : ReactContextBaseJavaModule(co And, for a Turbo Native Module: - + ```java title="TurboModule using the Impl module" @@ -441,7 +441,7 @@ import MyModule from 'your-module/src/index'; Since `TurboModuleRegistry.get` taps into the old Native Modules API under the hood, we need to re-export our module, to avoid registering it multiple times. - diff --git a/docs/the-new-architecture/cxx-custom-types.md b/docs/the-new-architecture/cxx-custom-types.md index 96c37ebc5dd..c92f7a0a220 100644 --- a/docs/the-new-architecture/cxx-custom-types.md +++ b/docs/the-new-architecture/cxx-custom-types.md @@ -63,7 +63,7 @@ Omitting either `fromJS` or `toJS` would make you `bridging` header either _read Now you can add the following function to your JavaScript spec: - + ```typescript title="NativeSampleModule.ts" @@ -157,7 +157,7 @@ export type CustomType = { which can be exposed to your C++ Turbo Native Module via - + ```typescript title="NativeSampleModule.ts" diff --git a/docs/the-new-architecture/cxx-cxxturbomodules.md b/docs/the-new-architecture/cxx-cxxturbomodules.md index 20879396848..53aac815844 100644 --- a/docs/the-new-architecture/cxx-cxxturbomodules.md +++ b/docs/the-new-architecture/cxx-cxxturbomodules.md @@ -67,7 +67,7 @@ CxxTurboModulesGuide Create the following spec inside the `tm` folder: - + ```typescript title="NativeSampleModule.ts" diff --git a/docs/the-new-architecture/pillars-codegen.md b/docs/the-new-architecture/pillars-codegen.md index f388088e02f..0bc511b0f81 100644 --- a/docs/the-new-architecture/pillars-codegen.md +++ b/docs/the-new-architecture/pillars-codegen.md @@ -151,7 +151,7 @@ These tasks invoke the `generateCodegenArtifactsFromSchema` on all the the impor Once the Gradle task completes, you can see different structures for a Turbo Native Module or for a Fabric Native Component. The following tab shows how they appear: - + ```sh diff --git a/docs/the-new-architecture/pillars-fabric-components.md b/docs/the-new-architecture/pillars-fabric-components.md index 1192aac5565..be5a13541f3 100644 --- a/docs/the-new-architecture/pillars-fabric-components.md +++ b/docs/the-new-architecture/pillars-fabric-components.md @@ -66,7 +66,7 @@ There are two requirements the file containing this specification must meet: Below are specifications of the `RTNCenteredText` component in both Flow and TypeScript. Create a `RTNCenteredTextNativeComponent` file with the proper extension in the `js` folder. - + ```typescript @@ -283,7 +283,7 @@ Then, you need a class that implements the `ReactPackage` interface. To run the Create an `android/src/main/java/com/rtncenteredtext` folder and, inside that folder, create a `CenteredTextPackage.java` file. - + ```java title="CenteredTextPackage.java" @@ -653,7 +653,7 @@ android ##### CenteredText.java - + ```java title="CenteredText.java" @@ -730,7 +730,7 @@ This class represents the actual view Android is going to represent on screen. I ##### CenteredTextManager.java - + ```java title="CenteredTextManager.java" @@ -833,7 +833,7 @@ It is also responsible for exporting all the constructs required by React Native Finally, open the `CenteredTextPackage.java` file in the `android/src/main/java/com/rtncenteredtext` folder and update it with the following lines - + ```diff title="CenteredTextPackage.java update" @@ -929,7 +929,7 @@ Android configuration requires to enable the **New Architecture**. Finally, you can use the component in your JavaScript application. - + ```typescript title="App.js" diff --git a/docs/the-new-architecture/pillars-turbomodule.md b/docs/the-new-architecture/pillars-turbomodule.md index 1bf3510f364..f415b8fcb95 100644 --- a/docs/the-new-architecture/pillars-turbomodule.md +++ b/docs/the-new-architecture/pillars-turbomodule.md @@ -62,7 +62,7 @@ There are two requirements the file containing this specification must meet: 1. The file **must** be named `Native`, with a `.js` or `.jsx` extension when using Flow, or a `.ts`, or `.tsx` extension when using TypeScript. Codegen will only look for files matching this pattern. 2. The file must export a `TurboModuleRegistrySpec` object. - + ```typescript title="NativeCalculator.js" @@ -269,7 +269,7 @@ Then, you need a class that extends the `TurboReactPackage` interface. To run th Create an `android/src/main/java/com/rtncalculator` folder and, inside that folder, create a `CalculatorPackage.java` file. - + ```java title="CalculatorPackage.java" @@ -528,7 +528,7 @@ android ##### Creating the `CalculatorModule.java` - + ```java title="CalculatorModule.java" @@ -597,7 +597,7 @@ This class implements the module itself, which extends the `NativeCalculatorSpec ##### Updating the `CalculatorPackage.java` - + ```diff title="CalculatorPackage.java" @@ -763,7 +763,7 @@ Now you can use your Turbo Native Module calculator in your app! Here's an example App.js file using the `add` method: - + ```typescript title="App.js" diff --git a/docs/the-new-architecture/use-app-template.md b/docs/the-new-architecture/use-app-template.md index a27dd07d025..bf4c9ed9bbf 100644 --- a/docs/the-new-architecture/use-app-template.md +++ b/docs/the-new-architecture/use-app-template.md @@ -49,7 +49,7 @@ Please [follow the instructions on the React Native website](hermes.md) to enabl #### Target OS - + Navigate to the `ios` directory and run the following: diff --git a/docs/touchablehighlight.md b/docs/touchablehighlight.md index d3697919c6b..e64a3dc6a2d 100644 --- a/docs/touchablehighlight.md +++ b/docs/touchablehighlight.md @@ -32,7 +32,7 @@ function MyComponent(props: MyComponentProps) { ## Example - + ```SnackPlayer name=TouchableHighlight%20Function%20Component%20Example diff --git a/docs/touchableopacity.md b/docs/touchableopacity.md index ed04dc43fe6..3ccd4873212 100644 --- a/docs/touchableopacity.md +++ b/docs/touchableopacity.md @@ -13,7 +13,7 @@ Opacity is controlled by wrapping the children in an `Animated.View`, which is a ## Example - + ```SnackPlayer name=TouchableOpacity%20Function%20Component%20Example diff --git a/docs/transforms.md b/docs/transforms.md index b203e11a5a1..ebc0109890a 100644 --- a/docs/transforms.md +++ b/docs/transforms.md @@ -9,7 +9,7 @@ Transforms are style properties that will help you modify the appearance and pos ## Example - + ```SnackPlayer name=Transforms diff --git a/docs/tutorial.md b/docs/tutorial.md index 626bc349ac2..8d6df090468 100644 --- a/docs/tutorial.md +++ b/docs/tutorial.md @@ -63,7 +63,7 @@ Most components can be customized when they are created, with different paramete Your own components can also use `props`. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Refer to `props.YOUR_PROP_NAME` in your functional components or `this.props.YOUR_PROP_NAME` in your class components. Here's an example: - + ```SnackPlayer name=Hello%20Props&ext=js diff --git a/docs/typescript.md b/docs/typescript.md index f953a18744e..3c791b3ff36 100644 --- a/docs/typescript.md +++ b/docs/typescript.md @@ -21,7 +21,7 @@ npx create-expo-app --template 1. Add TypeScript, types, and ESLint plugins to your project. - + ```shell @@ -166,7 +166,7 @@ To use custom path aliases with TypeScript, you need to set the path aliases to 2. Add [`babel-plugin-module-resolver`][bpmr] as a development package to your project: - + ```shell diff --git a/docs/vibration.md b/docs/vibration.md index 50e94fff4f5..a1919440f55 100644 --- a/docs/vibration.md +++ b/docs/vibration.md @@ -9,7 +9,7 @@ Vibrates the device. ## Example - + ```SnackPlayer name=Vibration&supportedPlatforms=ios,android diff --git a/docs/view.md b/docs/view.md index fbf99b51365..43a1d5b6621 100644 --- a/docs/view.md +++ b/docs/view.md @@ -11,7 +11,7 @@ The most fundamental component for building a UI, `View` is a container that sup This example creates a `View` that wraps two boxes with color and a text component in a row with padding. - + ```SnackPlayer name=View%20Function%20Component%20Example diff --git a/docs/virtualizedlist.md b/docs/virtualizedlist.md index cc070cae3e1..8a81dc0677e 100644 --- a/docs/virtualizedlist.md +++ b/docs/virtualizedlist.md @@ -11,7 +11,7 @@ Virtualization massively improves memory consumption and performance of large li ## Example - + ```SnackPlayer name=VirtualizedListExample&ext=js diff --git a/website/versioned_docs/version-0.60/building-for-tv.md b/website/versioned_docs/version-0.60/building-for-tv.md index b51e44fd6a2..bc50241af3b 100644 --- a/website/versioned_docs/version-0.60/building-for-tv.md +++ b/website/versioned_docs/version-0.60/building-for-tv.md @@ -8,7 +8,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications. - + diff --git a/website/versioned_docs/version-0.60/dimensions.md b/website/versioned_docs/version-0.60/dimensions.md index 0ca1678e764..235045952a6 100644 --- a/website/versioned_docs/version-0.60/dimensions.md +++ b/website/versioned_docs/version-0.60/dimensions.md @@ -22,7 +22,7 @@ If you are targeting foldable devices or devices which can change the screen siz ### Example - + ```SnackPlayer name=Dimensions diff --git a/website/versioned_docs/version-0.60/getting-started.md b/website/versioned_docs/version-0.60/getting-started.md index 366914f7caf..5981cdd0cd7 100644 --- a/website/versioned_docs/version-0.60/getting-started.md +++ b/website/versioned_docs/version-0.60/getting-started.md @@ -14,12 +14,12 @@ This page will help you install and build your first React Native app. **If you are already familiar with mobile development**, you may want to use React Native CLI. It requires Xcode or Android Studio to get started. If you already have one of these tools installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them. - + Assuming that you have [Node 12 LTS](https://nodejs.org/en/download/) or greater installed, you can use npm to install the Expo CLI command line utility: - + ```shell @@ -38,7 +38,7 @@ yarn global add expo-cli Then run the following commands to create a new React Native project called "AwesomeProject": - + ```shell @@ -115,12 +115,12 @@ The instructions are a bit different depending on your development operating sys #### Development OS - + #### Target OS - + [//]: # 'macOS, Android' @@ -142,7 +142,7 @@ The instructions are a bit different depending on your development operating sys #### Target OS - + [//]: # 'Windows, Android' @@ -166,7 +166,7 @@ The instructions are a bit different depending on your development operating sys #### Target OS - + [//]: # 'Linux, Android' diff --git a/website/versioned_docs/version-0.60/integration-with-existing-apps.md b/website/versioned_docs/version-0.60/integration-with-existing-apps.md index 803a6dfe6e3..0d147e07a3a 100644 --- a/website/versioned_docs/version-0.60/integration-with-existing-apps.md +++ b/website/versioned_docs/version-0.60/integration-with-existing-apps.md @@ -12,7 +12,7 @@ React Native is great when you are starting a new mobile app from scratch. Howev The specific steps are different depending on what platform you're targeting. - + diff --git a/website/versioned_docs/version-0.60/intro-react.md b/website/versioned_docs/version-0.60/intro-react.md index cd9c39c044e..4bcc6792bf5 100644 --- a/website/versioned_docs/version-0.60/intro-react.md +++ b/website/versioned_docs/version-0.60/intro-react.md @@ -21,7 +21,7 @@ If you want to dig deeper, we encourage you to check out [React’s official doc The rest of this introduction to React uses cats in its examples: friendly, approachable creatures that need names and a cafe to work in. Here is your very first Cat component: - + ```SnackPlayer name=Your%20Cat @@ -205,7 +205,7 @@ export default Cat; #### Developer notes - + @@ -315,7 +315,7 @@ While you can think of props as arguments you use to configure how components re The following example takes place in a cat cafe where two hungry cats are waiting to be fed. Their hunger, which we expect to change over time (unlike their names), is stored as state. To feed the cats, press their buttons—which will update their state. - + You can add state to a component by calling [React’s `useState` Hook](https://reactjs.org/docs/hooks-state.html). A Hook is a kind of function that lets you “hook into” React features. For example, `useState` is a Hook that lets you add state to function components. You can learn more about [other kinds of Hooks in the React documentation.](https://reactjs.org/docs/hooks-intro.html) diff --git a/website/versioned_docs/version-0.60/introduction.md b/website/versioned_docs/version-0.60/introduction.md index f0ff7baa167..94c7f8e094e 100644 --- a/website/versioned_docs/version-0.60/introduction.md +++ b/website/versioned_docs/version-0.60/introduction.md @@ -56,7 +56,7 @@ With React, you can make components using either classes or functions. Originall [Hooks were introduced in React Native 0.59.](/blog/2019/03/12/releasing-react-native-059), and because Hooks are the future-facing way to write your React components, we wrote this introduction using function component examples. Where useful, we also cover class components under a toggle like so: - + ```SnackPlayer name=Hello%20World%20Function%20Component @@ -111,7 +111,7 @@ You can find more examples of class components in [previous versions of this doc People from many different development backgrounds are learning React Native. You may have experience with a range of technologies, from web to Android to iOS and more. We try to write for developers from all backgrounds. Sometimes we provide explanations specific to one platform or another like so: - + diff --git a/website/versioned_docs/version-0.60/running-on-device.md b/website/versioned_docs/version-0.60/running-on-device.md index 917621abcd4..ddc31d44e5e 100644 --- a/website/versioned_docs/version-0.60/running-on-device.md +++ b/website/versioned_docs/version-0.60/running-on-device.md @@ -10,14 +10,14 @@ It's always a good idea to test your app on an actual device before releasing it If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app—but in order to build and run your app on a device, you will need to eject and install the native code dependencies from the [environment setup guide](/docs/environment-setup). - + ## Running your app on Android devices #### Development OS - + [//]: # 'macOS, Android' @@ -312,7 +312,7 @@ You have built a great app using React Native, and you are now itching to releas #### Development OS - + [//]: # 'macOS, iOS' diff --git a/website/versioned_docs/version-0.61/building-for-tv.md b/website/versioned_docs/version-0.61/building-for-tv.md index b51e44fd6a2..bc50241af3b 100644 --- a/website/versioned_docs/version-0.61/building-for-tv.md +++ b/website/versioned_docs/version-0.61/building-for-tv.md @@ -8,7 +8,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications. - + diff --git a/website/versioned_docs/version-0.61/dimensions.md b/website/versioned_docs/version-0.61/dimensions.md index ceb5e138efd..204b24ccbd6 100644 --- a/website/versioned_docs/version-0.61/dimensions.md +++ b/website/versioned_docs/version-0.61/dimensions.md @@ -24,7 +24,7 @@ If you are targeting foldable devices or devices which can change the screen siz ### Example - + ```SnackPlayer name=Dimensions diff --git a/website/versioned_docs/version-0.61/getting-started.md b/website/versioned_docs/version-0.61/getting-started.md index 366914f7caf..5981cdd0cd7 100644 --- a/website/versioned_docs/version-0.61/getting-started.md +++ b/website/versioned_docs/version-0.61/getting-started.md @@ -14,12 +14,12 @@ This page will help you install and build your first React Native app. **If you are already familiar with mobile development**, you may want to use React Native CLI. It requires Xcode or Android Studio to get started. If you already have one of these tools installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them. - + Assuming that you have [Node 12 LTS](https://nodejs.org/en/download/) or greater installed, you can use npm to install the Expo CLI command line utility: - + ```shell @@ -38,7 +38,7 @@ yarn global add expo-cli Then run the following commands to create a new React Native project called "AwesomeProject": - + ```shell @@ -115,12 +115,12 @@ The instructions are a bit different depending on your development operating sys #### Development OS - + #### Target OS - + [//]: # 'macOS, Android' @@ -142,7 +142,7 @@ The instructions are a bit different depending on your development operating sys #### Target OS - + [//]: # 'Windows, Android' @@ -166,7 +166,7 @@ The instructions are a bit different depending on your development operating sys #### Target OS - + [//]: # 'Linux, Android' diff --git a/website/versioned_docs/version-0.61/integration-with-existing-apps.md b/website/versioned_docs/version-0.61/integration-with-existing-apps.md index 803a6dfe6e3..0d147e07a3a 100644 --- a/website/versioned_docs/version-0.61/integration-with-existing-apps.md +++ b/website/versioned_docs/version-0.61/integration-with-existing-apps.md @@ -12,7 +12,7 @@ React Native is great when you are starting a new mobile app from scratch. Howev The specific steps are different depending on what platform you're targeting. - + diff --git a/website/versioned_docs/version-0.61/intro-react.md b/website/versioned_docs/version-0.61/intro-react.md index cd9c39c044e..4bcc6792bf5 100644 --- a/website/versioned_docs/version-0.61/intro-react.md +++ b/website/versioned_docs/version-0.61/intro-react.md @@ -21,7 +21,7 @@ If you want to dig deeper, we encourage you to check out [React’s official doc The rest of this introduction to React uses cats in its examples: friendly, approachable creatures that need names and a cafe to work in. Here is your very first Cat component: - + ```SnackPlayer name=Your%20Cat @@ -205,7 +205,7 @@ export default Cat; #### Developer notes - + @@ -315,7 +315,7 @@ While you can think of props as arguments you use to configure how components re The following example takes place in a cat cafe where two hungry cats are waiting to be fed. Their hunger, which we expect to change over time (unlike their names), is stored as state. To feed the cats, press their buttons—which will update their state. - + You can add state to a component by calling [React’s `useState` Hook](https://reactjs.org/docs/hooks-state.html). A Hook is a kind of function that lets you “hook into” React features. For example, `useState` is a Hook that lets you add state to function components. You can learn more about [other kinds of Hooks in the React documentation.](https://reactjs.org/docs/hooks-intro.html) diff --git a/website/versioned_docs/version-0.61/introduction.md b/website/versioned_docs/version-0.61/introduction.md index f0ff7baa167..94c7f8e094e 100644 --- a/website/versioned_docs/version-0.61/introduction.md +++ b/website/versioned_docs/version-0.61/introduction.md @@ -56,7 +56,7 @@ With React, you can make components using either classes or functions. Originall [Hooks were introduced in React Native 0.59.](/blog/2019/03/12/releasing-react-native-059), and because Hooks are the future-facing way to write your React components, we wrote this introduction using function component examples. Where useful, we also cover class components under a toggle like so: - + ```SnackPlayer name=Hello%20World%20Function%20Component @@ -111,7 +111,7 @@ You can find more examples of class components in [previous versions of this doc People from many different development backgrounds are learning React Native. You may have experience with a range of technologies, from web to Android to iOS and more. We try to write for developers from all backgrounds. Sometimes we provide explanations specific to one platform or another like so: - + diff --git a/website/versioned_docs/version-0.61/running-on-device.md b/website/versioned_docs/version-0.61/running-on-device.md index 917621abcd4..ddc31d44e5e 100644 --- a/website/versioned_docs/version-0.61/running-on-device.md +++ b/website/versioned_docs/version-0.61/running-on-device.md @@ -10,14 +10,14 @@ It's always a good idea to test your app on an actual device before releasing it If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app—but in order to build and run your app on a device, you will need to eject and install the native code dependencies from the [environment setup guide](/docs/environment-setup). - + ## Running your app on Android devices #### Development OS - + [//]: # 'macOS, Android' @@ -312,7 +312,7 @@ You have built a great app using React Native, and you are now itching to releas #### Development OS - + [//]: # 'macOS, iOS' diff --git a/website/versioned_docs/version-0.62/accessibilityinfo.md b/website/versioned_docs/version-0.62/accessibilityinfo.md index 00e5878fcdc..d0e74a1e045 100644 --- a/website/versioned_docs/version-0.62/accessibilityinfo.md +++ b/website/versioned_docs/version-0.62/accessibilityinfo.md @@ -9,7 +9,7 @@ Sometimes it's useful to know whether or not the device has a screen reader that ## Example - + ```SnackPlayer name=AccessibilityInfo%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.62/activityindicator.md b/website/versioned_docs/version-0.62/activityindicator.md index e04f15b3752..78cf638fc33 100644 --- a/website/versioned_docs/version-0.62/activityindicator.md +++ b/website/versioned_docs/version-0.62/activityindicator.md @@ -9,7 +9,7 @@ Displays a circular loading indicator. ## Example - + ```SnackPlayer name=ActivityIndicator%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.62/alert.md b/website/versioned_docs/version-0.62/alert.md index c36a1088c29..27738afd54c 100644 --- a/website/versioned_docs/version-0.62/alert.md +++ b/website/versioned_docs/version-0.62/alert.md @@ -13,7 +13,7 @@ This is an API that works both on Android and iOS and can show static alerts. To ### Example - + ```SnackPlayer name=Alert%20Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.62/animated.md b/website/versioned_docs/version-0.62/animated.md index 9298bee71b0..e11b5a45036 100644 --- a/website/versioned_docs/version-0.62/animated.md +++ b/website/versioned_docs/version-0.62/animated.md @@ -9,7 +9,7 @@ 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()`. - + @@ -28,7 +28,7 @@ The core workflow for creating an animation is to create an `Animated.Value`, ho The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim` - + ```SnackPlayer name=Animated diff --git a/website/versioned_docs/version-0.62/animations.md b/website/versioned_docs/version-0.62/animations.md index 348e55dee8c..63f1a28d7d3 100644 --- a/website/versioned_docs/version-0.62/animations.md +++ b/website/versioned_docs/version-0.62/animations.md @@ -232,7 +232,7 @@ The following example implements a horizontal scrolling carousel where the scrol #### ScrollView with Animated Event Example - + ```SnackPlayer name=Animated&supportedPlatforms=ios,android @@ -545,7 +545,7 @@ onPanResponderMove={Animated.event( #### PanResponder with Animated Event Example - + ```SnackPlayer name=Animated diff --git a/website/versioned_docs/version-0.62/appearance.md b/website/versioned_docs/version-0.62/appearance.md index b2db786735a..38211882bac 100644 --- a/website/versioned_docs/version-0.62/appearance.md +++ b/website/versioned_docs/version-0.62/appearance.md @@ -13,7 +13,7 @@ The `Appearance` module exposes information about the user's appearance preferen #### Developer notes - + diff --git a/website/versioned_docs/version-0.62/appstate.md b/website/versioned_docs/version-0.62/appstate.md index 75510f245f2..1250572bcaa 100644 --- a/website/versioned_docs/version-0.62/appstate.md +++ b/website/versioned_docs/version-0.62/appstate.md @@ -24,7 +24,7 @@ For more information, see [Apple's documentation](https://developer.apple.com/do To see the current state, you can check `AppState.currentState`, which will be kept up-to-date. However, `currentState` will be null at launch while `AppState` retrieves it over the bridge. - + ```SnackPlayer name=AppState%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.62/backhandler.md b/website/versioned_docs/version-0.62/backhandler.md index 877ad168290..519de07fb37 100644 --- a/website/versioned_docs/version-0.62/backhandler.md +++ b/website/versioned_docs/version-0.62/backhandler.md @@ -45,7 +45,7 @@ BackHandler.addEventListener('hardwareBackPress', function () { The following example implements a scenario where you confirm if the user wants to exit the app: - + ```SnackPlayer name=BackHandler&supportedPlatforms=android @@ -154,7 +154,7 @@ const styles = StyleSheet.create({ Additionally `BackHandler.removeEventListener` can also be used to clear the event listener. Ensure the callback has the reference to the same function used in the `addEventListener` call as shown the following example ﹣ - + ```SnackPlayer name=BackHandler&supportedPlatforms=android diff --git a/website/versioned_docs/version-0.62/building-for-tv.md b/website/versioned_docs/version-0.62/building-for-tv.md index e12cb837ff0..5e689aa97ea 100644 --- a/website/versioned_docs/version-0.62/building-for-tv.md +++ b/website/versioned_docs/version-0.62/building-for-tv.md @@ -8,7 +8,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications. - + diff --git a/website/versioned_docs/version-0.62/datepickerios.md b/website/versioned_docs/version-0.62/datepickerios.md index fa8838586f5..be8a6c7fb43 100644 --- a/website/versioned_docs/version-0.62/datepickerios.md +++ b/website/versioned_docs/version-0.62/datepickerios.md @@ -11,7 +11,7 @@ Use `DatePickerIOS` to render a date/time picker (selector) on iOS. This is a co ### Example - + ```SnackPlayer name=DatePickerIOS&supportedPlatforms=ios diff --git a/website/versioned_docs/version-0.62/dimensions.md b/website/versioned_docs/version-0.62/dimensions.md index d0ef0c80ec4..6f6d0aec4dd 100644 --- a/website/versioned_docs/version-0.62/dimensions.md +++ b/website/versioned_docs/version-0.62/dimensions.md @@ -24,7 +24,7 @@ If you are targeting foldable devices or devices which can change the screen siz ## Example - + ```SnackPlayer name=Dimensions diff --git a/website/versioned_docs/version-0.62/getting-started.md b/website/versioned_docs/version-0.62/getting-started.md index 0e4e6b14706..6a167852881 100644 --- a/website/versioned_docs/version-0.62/getting-started.md +++ b/website/versioned_docs/version-0.62/getting-started.md @@ -14,12 +14,12 @@ This page will help you install and build your first React Native app. **If you are already familiar with mobile development**, you may want to use React Native CLI. It requires Xcode or Android Studio to get started. If you already have one of these tools installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them. - + Assuming that you have [Node 12 LTS](https://nodejs.org/en/download/) or greater installed, you can use npm to install the Expo CLI command line utility: - + ```shell @@ -38,7 +38,7 @@ yarn global add expo-cli Then run the following commands to create a new React Native project called "AwesomeProject": - + ```shell @@ -115,12 +115,12 @@ The instructions are a bit different depending on your development operating sys #### Development OS - + #### Target OS - + [//]: # 'macOS, Android' @@ -142,7 +142,7 @@ The instructions are a bit different depending on your development operating sys #### Target OS - + [//]: # 'Windows, Android' @@ -166,7 +166,7 @@ The instructions are a bit different depending on your development operating sys #### Target OS - + [//]: # 'Linux, Android' diff --git a/website/versioned_docs/version-0.62/image-style-props.md b/website/versioned_docs/version-0.62/image-style-props.md index 27e72d80858..5d1b238cb03 100644 --- a/website/versioned_docs/version-0.62/image-style-props.md +++ b/website/versioned_docs/version-0.62/image-style-props.md @@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ### Examples - + ```SnackPlayer name=Image%20Style%20Props%20Function%20Component%20Example @@ -176,7 +176,7 @@ const styles = StyleSheet.create({ - + ```SnackPlayer name=Style%20Border%20Radius%20Function%20Component%20Example @@ -322,7 +322,7 @@ const styles = StyleSheet.create({ - + ```SnackPlayer name=Style%20BorderWidth%20and%20BorderColor%20Function%20Component%20Example @@ -401,7 +401,7 @@ const styles = StyleSheet.create({ - + ```SnackPlayer name=Style%20tintColor%20Function%20Component diff --git a/website/versioned_docs/version-0.62/image.md b/website/versioned_docs/version-0.62/image.md index fa59218dc48..7e9e11b41d2 100644 --- a/website/versioned_docs/version-0.62/image.md +++ b/website/versioned_docs/version-0.62/image.md @@ -13,7 +13,7 @@ This example shows fetching and displaying an image from local storage as well a ## Examples - + ```SnackPlayer name=Function%20Component%20Example @@ -112,7 +112,7 @@ export default class DisplayAnImage extends Component { You can also add `style` to an image: - + ```SnackPlayer name=Function%20Component%20Example diff --git a/website/versioned_docs/version-0.62/integration-with-existing-apps.md b/website/versioned_docs/version-0.62/integration-with-existing-apps.md index 803a6dfe6e3..0d147e07a3a 100644 --- a/website/versioned_docs/version-0.62/integration-with-existing-apps.md +++ b/website/versioned_docs/version-0.62/integration-with-existing-apps.md @@ -12,7 +12,7 @@ React Native is great when you are starting a new mobile app from scratch. Howev The specific steps are different depending on what platform you're targeting. - + diff --git a/website/versioned_docs/version-0.62/intro-react.md b/website/versioned_docs/version-0.62/intro-react.md index 886d1df3d4a..ddfed34a7a6 100644 --- a/website/versioned_docs/version-0.62/intro-react.md +++ b/website/versioned_docs/version-0.62/intro-react.md @@ -21,7 +21,7 @@ If you want to dig deeper, we encourage you to check out [React’s official doc The rest of this introduction to React uses cats in its examples: friendly, approachable creatures that need names and a cafe to work in. Here is your very first Cat component: - + ```SnackPlayer name=Your%20Cat @@ -191,7 +191,7 @@ export default function Cat() { #### Developer notes - + @@ -295,7 +295,7 @@ While you can think of props as arguments you use to configure how components re The following example takes place in a cat cafe where two hungry cats are waiting to be fed. Their hunger, which we expect to change over time (unlike their names), is stored as state. To feed the cats, press their buttons—which will update their state. - + You can add state to a component by calling [React’s `useState` Hook](https://reactjs.org/docs/hooks-state.html). A Hook is a kind of function that lets you “hook into” React features. For example, `useState` is a Hook that lets you add state to function components. You can learn more about [other kinds of Hooks in the React documentation.](https://reactjs.org/docs/hooks-intro.html) diff --git a/website/versioned_docs/version-0.62/introduction.md b/website/versioned_docs/version-0.62/introduction.md index 7be531acfe3..ddd7972410b 100644 --- a/website/versioned_docs/version-0.62/introduction.md +++ b/website/versioned_docs/version-0.62/introduction.md @@ -54,7 +54,7 @@ With React, you can make components using either classes or functions. Originall [Hooks were introduced in React Native 0.59.](/blog/2019/03/12/releasing-react-native-059), and because Hooks are the future-facing way to write your React components, we wrote this introduction using function component examples. Where useful, we also cover class components under a toggle like so: - + ```SnackPlayer name=Hello%20World%20Function%20Component @@ -106,7 +106,7 @@ You can find more examples of class components in [previous versions of this doc People from many different development backgrounds are learning React Native. You may have experience with a range of technologies, from web to Android to iOS and more. We try to write for developers from all backgrounds. Sometimes we provide explanations specific to one platform or another like so: - + diff --git a/website/versioned_docs/version-0.62/keyboard.md b/website/versioned_docs/version-0.62/keyboard.md index c17951912a9..f37cb461266 100644 --- a/website/versioned_docs/version-0.62/keyboard.md +++ b/website/versioned_docs/version-0.62/keyboard.md @@ -11,7 +11,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it. - + ```SnackPlayer name=Keyboard%20Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.62/layoutanimation.md b/website/versioned_docs/version-0.62/layoutanimation.md index 068675475e6..575f764487e 100644 --- a/website/versioned_docs/version-0.62/layoutanimation.md +++ b/website/versioned_docs/version-0.62/layoutanimation.md @@ -120,7 +120,7 @@ Helper that creates an object (with `create`, `update`, and `delete` fields) to Example usage: - + ```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios @@ -334,7 +334,7 @@ Calls `configureNext()` with `Presets.spring`. Example usage: - + ```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.62/linking.md b/website/versioned_docs/version-0.62/linking.md index d75427d1e93..0b8e3d7a831 100644 --- a/website/versioned_docs/version-0.62/linking.md +++ b/website/versioned_docs/version-0.62/linking.md @@ -37,7 +37,7 @@ As mentioned in the introduction, there are some URL schemes for core functional If you want to enable deep links in your app, please the below guide: - + > For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters). diff --git a/website/versioned_docs/version-0.62/modal.md b/website/versioned_docs/version-0.62/modal.md index 934f251eca5..c98ff362e71 100644 --- a/website/versioned_docs/version-0.62/modal.md +++ b/website/versioned_docs/version-0.62/modal.md @@ -9,7 +9,7 @@ The Modal component is a basic way to present content above an enclosing view. ## Example - + ```SnackPlayer name=Modal&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.62/network.md b/website/versioned_docs/version-0.62/network.md index c10e7f04de5..ffe38ce24db 100644 --- a/website/versioned_docs/version-0.62/network.md +++ b/website/versioned_docs/version-0.62/network.md @@ -74,7 +74,7 @@ async function getMoviesFromApiAsync() { Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently. - + ```SnackPlayer name=Fetch%20Example diff --git a/website/versioned_docs/version-0.62/panresponder.md b/website/versioned_docs/version-0.62/panresponder.md index 1ced82d609d..d02d101578d 100644 --- a/website/versioned_docs/version-0.62/panresponder.md +++ b/website/versioned_docs/version-0.62/panresponder.md @@ -91,7 +91,7 @@ const ExampleComponent = () => { `PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen - + ```SnackPlayer name=PanResponder diff --git a/website/versioned_docs/version-0.62/permissionsandroid.md b/website/versioned_docs/version-0.62/permissionsandroid.md index ade64415fcb..9937bb3a779 100644 --- a/website/versioned_docs/version-0.62/permissionsandroid.md +++ b/website/versioned_docs/version-0.62/permissionsandroid.md @@ -20,7 +20,7 @@ If a user has previously turned off a permission that you prompt for, the OS wil ### Example - + ```SnackPlayer name=PermissionsAndroid%20Example&supportedPlatforms=android diff --git a/website/versioned_docs/version-0.62/running-on-device.md b/website/versioned_docs/version-0.62/running-on-device.md index 491d935a33e..6c1222262b6 100644 --- a/website/versioned_docs/version-0.62/running-on-device.md +++ b/website/versioned_docs/version-0.62/running-on-device.md @@ -10,14 +10,14 @@ It's always a good idea to test your app on an actual device before releasing it If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app—but in order to build and run your app on a device, you will need to eject and install the native code dependencies from the [environment setup guide](environment-setup). - + ## Running your app on Android devices #### Development OS - + [//]: # 'macOS, Android' @@ -312,7 +312,7 @@ You have built a great app using React Native, and you are now itching to releas #### Development OS - + [//]: # 'macOS, iOS' diff --git a/website/versioned_docs/version-0.62/sectionlist.md b/website/versioned_docs/version-0.62/sectionlist.md index edb1bb44fe5..b4fc64b6de8 100644 --- a/website/versioned_docs/version-0.62/sectionlist.md +++ b/website/versioned_docs/version-0.62/sectionlist.md @@ -22,7 +22,7 @@ If you don't need section support and want a simpler interface, use [` ## Example - + ```SnackPlayer name=SectionList%20Example diff --git a/website/versioned_docs/version-0.62/security.md b/website/versioned_docs/version-0.62/security.md index 2a35c913326..13980d7bd45 100644 --- a/website/versioned_docs/version-0.62/security.md +++ b/website/versioned_docs/version-0.62/security.md @@ -32,7 +32,7 @@ If you must have an API key or a secret to access some resource from your app, t #### Developer Notes - + diff --git a/website/versioned_docs/version-0.62/share.md b/website/versioned_docs/version-0.62/share.md index db0d6f00f7b..25c6998813a 100644 --- a/website/versioned_docs/version-0.62/share.md +++ b/website/versioned_docs/version-0.62/share.md @@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ## Example - + ```SnackPlayer name=Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.62/systrace.md b/website/versioned_docs/version-0.62/systrace.md index 727b4066382..f8a0c17ea87 100644 --- a/website/versioned_docs/version-0.62/systrace.md +++ b/website/versioned_docs/version-0.62/systrace.md @@ -11,7 +11,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con `Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler. - + ```SnackPlayer name=Systrace%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.62/text.md b/website/versioned_docs/version-0.62/text.md index 8b2b5b8695c..48109488ce3 100644 --- a/website/versioned_docs/version-0.62/text.md +++ b/website/versioned_docs/version-0.62/text.md @@ -11,7 +11,7 @@ A React component for displaying text. In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines: - + ```SnackPlayer name=Text%20Functional%20Component%20Example diff --git a/website/versioned_docs/version-0.62/touchablehighlight.md b/website/versioned_docs/version-0.62/touchablehighlight.md index 4be2b4ff692..00277472b8f 100644 --- a/website/versioned_docs/version-0.62/touchablehighlight.md +++ b/website/versioned_docs/version-0.62/touchablehighlight.md @@ -30,7 +30,7 @@ function MyComponent(props) { ## Example - + ```SnackPlayer name=TouchableHighlight%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.62/touchableopacity.md b/website/versioned_docs/version-0.62/touchableopacity.md index e08bc95f28b..5d678c54357 100644 --- a/website/versioned_docs/version-0.62/touchableopacity.md +++ b/website/versioned_docs/version-0.62/touchableopacity.md @@ -11,7 +11,7 @@ Opacity is controlled by wrapping the children in an `Animated.View`, which is a ## Example - + ```SnackPlayer name=TouchableOpacity%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.62/transforms.md b/website/versioned_docs/version-0.62/transforms.md index 15dceff34b1..6c19a6a1a67 100644 --- a/website/versioned_docs/version-0.62/transforms.md +++ b/website/versioned_docs/version-0.62/transforms.md @@ -9,7 +9,7 @@ Transforms are style properties that will help you modify the appearance and pos ## Example - + ```SnackPlayer name=Transforms diff --git a/website/versioned_docs/version-0.62/vibration.md b/website/versioned_docs/version-0.62/vibration.md index 9482053dba8..b985fc5e117 100644 --- a/website/versioned_docs/version-0.62/vibration.md +++ b/website/versioned_docs/version-0.62/vibration.md @@ -9,7 +9,7 @@ Vibrates the device. ## Example - + ```SnackPlayer name=Vibration&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.62/view.md b/website/versioned_docs/version-0.62/view.md index cafa3fb8ff5..47d3c3d5c41 100644 --- a/website/versioned_docs/version-0.62/view.md +++ b/website/versioned_docs/version-0.62/view.md @@ -11,7 +11,7 @@ The most fundamental component for building a UI, `View` is a container that sup This example creates a `View` that wraps two boxes with color and a text component in a row with padding. - + ```SnackPlayer name=View%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.63/accessibilityinfo.md b/website/versioned_docs/version-0.63/accessibilityinfo.md index 8983b7e8b89..99128b993e9 100644 --- a/website/versioned_docs/version-0.63/accessibilityinfo.md +++ b/website/versioned_docs/version-0.63/accessibilityinfo.md @@ -9,7 +9,7 @@ Sometimes it's useful to know whether or not the device has a screen reader that ## Example - + ```SnackPlayer name=AccessibilityInfo%20Function%20Component%20Example&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.63/activityindicator.md b/website/versioned_docs/version-0.63/activityindicator.md index c9c4aacb4d3..e0a068463f4 100644 --- a/website/versioned_docs/version-0.63/activityindicator.md +++ b/website/versioned_docs/version-0.63/activityindicator.md @@ -9,7 +9,7 @@ Displays a circular loading indicator. ## Example - + ```SnackPlayer name=ActivityIndicator%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.63/alert.md b/website/versioned_docs/version-0.63/alert.md index aa56429fb27..cd124a42cf0 100644 --- a/website/versioned_docs/version-0.63/alert.md +++ b/website/versioned_docs/version-0.63/alert.md @@ -13,7 +13,7 @@ This is an API that works both on Android and iOS and can show static alerts. To ### Example - + ```SnackPlayer name=Alert%20Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.63/animated.md b/website/versioned_docs/version-0.63/animated.md index 34445fe5d8c..1f285166209 100644 --- a/website/versioned_docs/version-0.63/animated.md +++ b/website/versioned_docs/version-0.63/animated.md @@ -9,7 +9,7 @@ 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()`. - + @@ -28,7 +28,7 @@ The core workflow for creating an animation is to create an `Animated.Value`, ho The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim` - + ```SnackPlayer name=Animated diff --git a/website/versioned_docs/version-0.63/animations.md b/website/versioned_docs/version-0.63/animations.md index 7328fada4e9..112f2a61299 100644 --- a/website/versioned_docs/version-0.63/animations.md +++ b/website/versioned_docs/version-0.63/animations.md @@ -232,7 +232,7 @@ The following example implements a horizontal scrolling carousel where the scrol #### ScrollView with Animated Event Example - + ```SnackPlayer name=Animated&supportedPlatforms=ios,android @@ -533,7 +533,7 @@ onPanResponderMove={Animated.event( #### PanResponder with Animated Event Example - + ```SnackPlayer name=Animated diff --git a/website/versioned_docs/version-0.63/appearance.md b/website/versioned_docs/version-0.63/appearance.md index 4013c49f0e9..a3f352e84a2 100644 --- a/website/versioned_docs/version-0.63/appearance.md +++ b/website/versioned_docs/version-0.63/appearance.md @@ -13,7 +13,7 @@ import {Appearance} from 'react-native'; The `Appearance` module exposes information about the user's appearance preferences, such as their preferred color scheme (light or dark). - + diff --git a/website/versioned_docs/version-0.63/appstate.md b/website/versioned_docs/version-0.63/appstate.md index 8adf63bfbb5..4e1808218e4 100644 --- a/website/versioned_docs/version-0.63/appstate.md +++ b/website/versioned_docs/version-0.63/appstate.md @@ -24,7 +24,7 @@ For more information, see [Apple's documentation](https://developer.apple.com/do To see the current state, you can check `AppState.currentState`, which will be kept up-to-date. However, `currentState` will be null at launch while `AppState` retrieves it over the bridge. - + ```SnackPlayer name=AppState%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.63/backhandler.md b/website/versioned_docs/version-0.63/backhandler.md index f86a5730492..3ca42179119 100644 --- a/website/versioned_docs/version-0.63/backhandler.md +++ b/website/versioned_docs/version-0.63/backhandler.md @@ -45,7 +45,7 @@ BackHandler.addEventListener('hardwareBackPress', function () { The following example implements a scenario where you confirm if the user wants to exit the app: - + ```SnackPlayer name=BackHandler&supportedPlatforms=android @@ -158,7 +158,7 @@ export default App; Additionally `BackHandler.removeEventListener` can also be used to clear the event listener. Ensure the callback has the reference to the same function used in the `addEventListener` call as shown the following example ﹣ - + ```SnackPlayer name=BackHandler&supportedPlatforms=android diff --git a/website/versioned_docs/version-0.63/building-for-tv.md b/website/versioned_docs/version-0.63/building-for-tv.md index b51e44fd6a2..bc50241af3b 100644 --- a/website/versioned_docs/version-0.63/building-for-tv.md +++ b/website/versioned_docs/version-0.63/building-for-tv.md @@ -8,7 +8,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications. - + diff --git a/website/versioned_docs/version-0.63/datepickerios.md b/website/versioned_docs/version-0.63/datepickerios.md index d57c8135b26..87c21eb593f 100644 --- a/website/versioned_docs/version-0.63/datepickerios.md +++ b/website/versioned_docs/version-0.63/datepickerios.md @@ -11,7 +11,7 @@ Use `DatePickerIOS` to render a date/time picker (selector) on iOS. This is a co ### Example - + ```SnackPlayer name=DatePickerIOS&supportedPlatforms=ios diff --git a/website/versioned_docs/version-0.63/dimensions.md b/website/versioned_docs/version-0.63/dimensions.md index ab126e95bae..5b9fb0dd698 100644 --- a/website/versioned_docs/version-0.63/dimensions.md +++ b/website/versioned_docs/version-0.63/dimensions.md @@ -24,7 +24,7 @@ If you are targeting foldable devices or devices which can change the screen siz ## Example - + ```SnackPlayer name=Dimensions diff --git a/website/versioned_docs/version-0.63/dynamiccolorios.md b/website/versioned_docs/version-0.63/dynamiccolorios.md index 38ea15ecfbc..9a21b61d828 100644 --- a/website/versioned_docs/version-0.63/dynamiccolorios.md +++ b/website/versioned_docs/version-0.63/dynamiccolorios.md @@ -19,7 +19,7 @@ At runtime, the system will choose which of the two colors to display depending #### Developer notes - + diff --git a/website/versioned_docs/version-0.63/getting-started.md b/website/versioned_docs/version-0.63/getting-started.md index 0e4e6b14706..6a167852881 100644 --- a/website/versioned_docs/version-0.63/getting-started.md +++ b/website/versioned_docs/version-0.63/getting-started.md @@ -14,12 +14,12 @@ This page will help you install and build your first React Native app. **If you are already familiar with mobile development**, you may want to use React Native CLI. It requires Xcode or Android Studio to get started. If you already have one of these tools installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them. - + Assuming that you have [Node 12 LTS](https://nodejs.org/en/download/) or greater installed, you can use npm to install the Expo CLI command line utility: - + ```shell @@ -38,7 +38,7 @@ yarn global add expo-cli Then run the following commands to create a new React Native project called "AwesomeProject": - + ```shell @@ -115,12 +115,12 @@ The instructions are a bit different depending on your development operating sys #### Development OS - + #### Target OS - + [//]: # 'macOS, Android' @@ -142,7 +142,7 @@ The instructions are a bit different depending on your development operating sys #### Target OS - + [//]: # 'Windows, Android' @@ -166,7 +166,7 @@ The instructions are a bit different depending on your development operating sys #### Target OS - + [//]: # 'Linux, Android' diff --git a/website/versioned_docs/version-0.63/image-style-props.md b/website/versioned_docs/version-0.63/image-style-props.md index 21ea987e16c..7570b742db3 100644 --- a/website/versioned_docs/version-0.63/image-style-props.md +++ b/website/versioned_docs/version-0.63/image-style-props.md @@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ### Examples - + ```SnackPlayer name=Image%20Style%20Props%20Function%20Component%20Example @@ -178,7 +178,7 @@ export default DisplayAnImageWithStyle; - + ```SnackPlayer name=Style%20Border%20Radius%20Function%20Component%20Example @@ -327,7 +327,7 @@ export default DisplayAnImageWithStyle; - + ```SnackPlayer name=Style%20BorderWidth%20and%20BorderColor%20Function%20Component%20Example @@ -410,7 +410,7 @@ export default DisplayAnImageWithStyle; - + ```SnackPlayer name=Style%20tintColor%20Function%20Component diff --git a/website/versioned_docs/version-0.63/image.md b/website/versioned_docs/version-0.63/image.md index 24e674b3f0d..0c520f924bb 100644 --- a/website/versioned_docs/version-0.63/image.md +++ b/website/versioned_docs/version-0.63/image.md @@ -13,7 +13,7 @@ This example shows fetching and displaying an image from local storage as well a ## Examples - + ```SnackPlayer name=Function%20Component%20Example @@ -113,7 +113,7 @@ export default DisplayAnImage; You can also add `style` to an image: - + ```SnackPlayer name=Function%20Component%20Example diff --git a/website/versioned_docs/version-0.63/integration-with-existing-apps.md b/website/versioned_docs/version-0.63/integration-with-existing-apps.md index 803a6dfe6e3..0d147e07a3a 100644 --- a/website/versioned_docs/version-0.63/integration-with-existing-apps.md +++ b/website/versioned_docs/version-0.63/integration-with-existing-apps.md @@ -12,7 +12,7 @@ React Native is great when you are starting a new mobile app from scratch. Howev The specific steps are different depending on what platform you're targeting. - + diff --git a/website/versioned_docs/version-0.63/intro-react.md b/website/versioned_docs/version-0.63/intro-react.md index ca43aafac24..3d170c10487 100644 --- a/website/versioned_docs/version-0.63/intro-react.md +++ b/website/versioned_docs/version-0.63/intro-react.md @@ -21,7 +21,7 @@ If you want to dig deeper, we encourage you to check out [React’s official doc The rest of this introduction to React uses cats in its examples: friendly, approachable creatures that need names and a cafe to work in. Here is your very first Cat component: - + ```SnackPlayer name=Your%20Cat @@ -205,7 +205,7 @@ const Cat = () => { export default Cat; ``` - + @@ -315,7 +315,7 @@ While you can think of props as arguments you use to configure how components re The following example takes place in a cat cafe where two hungry cats are waiting to be fed. Their hunger, which we expect to change over time (unlike their names), is stored as state. To feed the cats, press their buttons—which will update their state. - + You can add state to a component by calling [React’s `useState` Hook](https://reactjs.org/docs/hooks-state.html). A Hook is a kind of function that lets you “hook into” React features. For example, `useState` is a Hook that lets you add state to function components. You can learn more about [other kinds of Hooks in the React documentation.](https://reactjs.org/docs/hooks-intro.html) diff --git a/website/versioned_docs/version-0.63/introduction.md b/website/versioned_docs/version-0.63/introduction.md index 97bfae03de1..57b07b7f9a1 100644 --- a/website/versioned_docs/version-0.63/introduction.md +++ b/website/versioned_docs/version-0.63/introduction.md @@ -56,7 +56,7 @@ With React, you can make components using either classes or functions. Originall [Hooks were introduced in React Native 0.59.](/blog/2019/03/12/releasing-react-native-059), and because Hooks are the future-facing way to write your React components, we wrote this introduction using function component examples. Where useful, we also cover class components under a toggle like so: - + ```SnackPlayer name=Hello%20World%20Function%20Component @@ -111,7 +111,7 @@ You can find more examples of class components in [previous versions of this doc People from many different development backgrounds are learning React Native. You may have experience with a range of technologies, from web to Android to iOS and more. We try to write for developers from all backgrounds. Sometimes we provide explanations specific to one platform or another like so: - + diff --git a/website/versioned_docs/version-0.63/keyboard.md b/website/versioned_docs/version-0.63/keyboard.md index c17951912a9..f37cb461266 100644 --- a/website/versioned_docs/version-0.63/keyboard.md +++ b/website/versioned_docs/version-0.63/keyboard.md @@ -11,7 +11,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it. - + ```SnackPlayer name=Keyboard%20Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.63/layoutanimation.md b/website/versioned_docs/version-0.63/layoutanimation.md index 1cc64700e46..e7a26f24887 100644 --- a/website/versioned_docs/version-0.63/layoutanimation.md +++ b/website/versioned_docs/version-0.63/layoutanimation.md @@ -119,7 +119,7 @@ Helper that creates an object (with `create`, `update`, and `delete` fields) to Example usage: - + ```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios @@ -337,7 +337,7 @@ Calls `configureNext()` with `Presets.spring`. Example usage: - + ```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.63/linking.md b/website/versioned_docs/version-0.63/linking.md index 2b82c8626bb..1fd86e5f09a 100644 --- a/website/versioned_docs/version-0.63/linking.md +++ b/website/versioned_docs/version-0.63/linking.md @@ -37,7 +37,7 @@ As mentioned in the introduction, there are some URL schemes for core functional If you want to enable deep links in your app, please read the below guide: - + > For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters). diff --git a/website/versioned_docs/version-0.63/modal.md b/website/versioned_docs/version-0.63/modal.md index ac7104f8be8..7c38bc701a9 100644 --- a/website/versioned_docs/version-0.63/modal.md +++ b/website/versioned_docs/version-0.63/modal.md @@ -9,7 +9,7 @@ The Modal component is a basic way to present content above an enclosing view. ## Example - + ```SnackPlayer name=Modal&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.63/network.md b/website/versioned_docs/version-0.63/network.md index 72fe4313669..5fb6745144c 100644 --- a/website/versioned_docs/version-0.63/network.md +++ b/website/versioned_docs/version-0.63/network.md @@ -74,7 +74,7 @@ const getMoviesFromApiAsync = async () => { Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently. - + ```SnackPlayer name=Fetch%20Example diff --git a/website/versioned_docs/version-0.63/panresponder.md b/website/versioned_docs/version-0.63/panresponder.md index d3a86651b3b..1fa46576d4f 100644 --- a/website/versioned_docs/version-0.63/panresponder.md +++ b/website/versioned_docs/version-0.63/panresponder.md @@ -80,7 +80,7 @@ const ExampleComponent = () => { `PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen - + ```SnackPlayer name=PanResponder diff --git a/website/versioned_docs/version-0.63/permissionsandroid.md b/website/versioned_docs/version-0.63/permissionsandroid.md index d13c7f267bf..d40aa15bff0 100644 --- a/website/versioned_docs/version-0.63/permissionsandroid.md +++ b/website/versioned_docs/version-0.63/permissionsandroid.md @@ -20,7 +20,7 @@ If a user has previously turned off a permission that you prompt for, the OS wil ### Example - + ```SnackPlayer name=PermissionsAndroid%20Example&supportedPlatforms=android diff --git a/website/versioned_docs/version-0.63/platformcolor.md b/website/versioned_docs/version-0.63/platformcolor.md index d0fae1a6c27..271e73ee5a0 100644 --- a/website/versioned_docs/version-0.63/platformcolor.md +++ b/website/versioned_docs/version-0.63/platformcolor.md @@ -32,7 +32,7 @@ For a full list of the types of system colors supported, see: #### Developer notes - + diff --git a/website/versioned_docs/version-0.63/running-on-device.md b/website/versioned_docs/version-0.63/running-on-device.md index 94a7671e790..a480c3e98ed 100644 --- a/website/versioned_docs/version-0.63/running-on-device.md +++ b/website/versioned_docs/version-0.63/running-on-device.md @@ -10,14 +10,14 @@ It's always a good idea to test your app on an actual device before releasing it If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app—but in order to build and run your app on a device, you will need to eject and install the native code dependencies from the [environment setup guide](environment-setup). - + ## Running your app on Android devices #### Development OS - + [//]: # 'macOS, Android' @@ -312,7 +312,7 @@ You have built a great app using React Native, and you are now itching to releas #### Development OS - + [//]: # 'macOS, iOS' diff --git a/website/versioned_docs/version-0.63/sectionlist.md b/website/versioned_docs/version-0.63/sectionlist.md index 9767476f2d2..1aa17af51b3 100644 --- a/website/versioned_docs/version-0.63/sectionlist.md +++ b/website/versioned_docs/version-0.63/sectionlist.md @@ -22,7 +22,7 @@ If you don't need section support and want a simpler interface, use [` ## Example - + ```SnackPlayer name=SectionList%20Example diff --git a/website/versioned_docs/version-0.63/security.md b/website/versioned_docs/version-0.63/security.md index 83f2e09593a..a9625202a91 100644 --- a/website/versioned_docs/version-0.63/security.md +++ b/website/versioned_docs/version-0.63/security.md @@ -34,7 +34,7 @@ If you must have an API key or a secret to access some resource from your app, t #### Developer Notes - + diff --git a/website/versioned_docs/version-0.63/share.md b/website/versioned_docs/version-0.63/share.md index d0cee7e6d7f..b59405d4600 100644 --- a/website/versioned_docs/version-0.63/share.md +++ b/website/versioned_docs/version-0.63/share.md @@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ## Example - + ```SnackPlayer name=Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.63/systrace.md b/website/versioned_docs/version-0.63/systrace.md index f775766dd6a..69a60038715 100644 --- a/website/versioned_docs/version-0.63/systrace.md +++ b/website/versioned_docs/version-0.63/systrace.md @@ -11,7 +11,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con `Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler. - + ```SnackPlayer name=Systrace%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.63/text.md b/website/versioned_docs/version-0.63/text.md index dc271ede15d..70458be7c02 100644 --- a/website/versioned_docs/version-0.63/text.md +++ b/website/versioned_docs/version-0.63/text.md @@ -11,7 +11,7 @@ A React component for displaying text. In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines: - + ```SnackPlayer name=Text%20Functional%20Component%20Example diff --git a/website/versioned_docs/version-0.63/touchablehighlight.md b/website/versioned_docs/version-0.63/touchablehighlight.md index 7cab63f6220..e33cabdbd2e 100644 --- a/website/versioned_docs/version-0.63/touchablehighlight.md +++ b/website/versioned_docs/version-0.63/touchablehighlight.md @@ -32,7 +32,7 @@ function MyComponent(props) { ## Example - + ```SnackPlayer name=TouchableHighlight%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.63/touchableopacity.md b/website/versioned_docs/version-0.63/touchableopacity.md index 6c99a6dbc8f..06ea8935f2c 100644 --- a/website/versioned_docs/version-0.63/touchableopacity.md +++ b/website/versioned_docs/version-0.63/touchableopacity.md @@ -13,7 +13,7 @@ Opacity is controlled by wrapping the children in an `Animated.View`, which is a ## Example - + ```SnackPlayer name=TouchableOpacity%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.63/transforms.md b/website/versioned_docs/version-0.63/transforms.md index 42bb8f02ac1..22da7098d18 100644 --- a/website/versioned_docs/version-0.63/transforms.md +++ b/website/versioned_docs/version-0.63/transforms.md @@ -9,7 +9,7 @@ Transforms are style properties that will help you modify the appearance and pos ## Example - + ```SnackPlayer name=Transforms diff --git a/website/versioned_docs/version-0.63/typescript.md b/website/versioned_docs/version-0.63/typescript.md index 4c794d8820a..f2daba6733b 100644 --- a/website/versioned_docs/version-0.63/typescript.md +++ b/website/versioned_docs/version-0.63/typescript.md @@ -25,7 +25,7 @@ npx react-native init MyApp --template react-native-template-typescript You can use [Expo][expo] which has two TypeScript templates: - + ```shell @@ -46,7 +46,7 @@ expo init MyTSProject Or you could use [Ignite][ignite], which also has a TypeScript template: - + ```shell @@ -69,7 +69,7 @@ ignite new MyTSProject 1. Add TypeScript and the types for React Native and Jest to your project. - + ```shell @@ -242,7 +242,7 @@ To use custom path aliases with TypeScript, you need to set the path aliases to 2. Add [`babel-plugin-module-resolver`][bpmr] as a development package to your project: - + ```shell diff --git a/website/versioned_docs/version-0.63/vibration.md b/website/versioned_docs/version-0.63/vibration.md index 79248325f0d..556f07b769c 100644 --- a/website/versioned_docs/version-0.63/vibration.md +++ b/website/versioned_docs/version-0.63/vibration.md @@ -9,7 +9,7 @@ Vibrates the device. ## Example - + ```SnackPlayer name=Vibration&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.63/view.md b/website/versioned_docs/version-0.63/view.md index 4d7a1a4690c..828a7b16d4c 100644 --- a/website/versioned_docs/version-0.63/view.md +++ b/website/versioned_docs/version-0.63/view.md @@ -11,7 +11,7 @@ The most fundamental component for building a UI, `View` is a container that sup This example creates a `View` that wraps two boxes with color and a text component in a row with padding. - + ```SnackPlayer name=View%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.64/_integration-with-existing-apps-objc.md b/website/versioned_docs/version-0.64/_integration-with-existing-apps-objc.md index 1f0ae63c2c1..34cc9417fad 100644 --- a/website/versioned_docs/version-0.64/_integration-with-existing-apps-objc.md +++ b/website/versioned_docs/version-0.64/_integration-with-existing-apps-objc.md @@ -39,7 +39,7 @@ Next, make sure you have [installed the yarn package manager](https://yarnpkg.co Install the `react` and `react-native` packages. Open a terminal or command prompt, then navigate to the directory with your `package.json` file and run: - + ```shell @@ -62,7 +62,7 @@ This will print a message similar to the following (scroll up in the yarn output This is OK, it means we also need to install React: - + ```shell @@ -346,7 +346,7 @@ Apple has blocked implicit cleartext HTTP resource loading. So we need to add th To run your app, you need to first start the development server. To do this, run the following command in the root directory of your React Native project: - + ```shell diff --git a/website/versioned_docs/version-0.64/accessibilityinfo.md b/website/versioned_docs/version-0.64/accessibilityinfo.md index 51302d28ee3..e2f1648e383 100644 --- a/website/versioned_docs/version-0.64/accessibilityinfo.md +++ b/website/versioned_docs/version-0.64/accessibilityinfo.md @@ -9,7 +9,7 @@ Sometimes it's useful to know whether or not the device has a screen reader that ## Example - + ```SnackPlayer name=AccessibilityInfo%20Function%20Component%20Example&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.64/activityindicator.md b/website/versioned_docs/version-0.64/activityindicator.md index 33e05f8d587..e3a6300d149 100644 --- a/website/versioned_docs/version-0.64/activityindicator.md +++ b/website/versioned_docs/version-0.64/activityindicator.md @@ -9,7 +9,7 @@ Displays a circular loading indicator. ## Example - + ```SnackPlayer name=ActivityIndicator%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.64/alert.md b/website/versioned_docs/version-0.64/alert.md index 619d486b479..7b3ddb52409 100644 --- a/website/versioned_docs/version-0.64/alert.md +++ b/website/versioned_docs/version-0.64/alert.md @@ -13,7 +13,7 @@ This is an API that works both on Android and iOS and can show static alerts. Al ## Example - + ```SnackPlayer name=Alert%20Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.64/animated.md b/website/versioned_docs/version-0.64/animated.md index e805df991eb..006278d3601 100644 --- a/website/versioned_docs/version-0.64/animated.md +++ b/website/versioned_docs/version-0.64/animated.md @@ -9,7 +9,7 @@ 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://reactjs.org/docs/hooks-reference.html#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. @@ -26,7 +26,7 @@ The core workflow for creating an animation is to create an `Animated.Value`, ho The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim` - + ```SnackPlayer name=Animated diff --git a/website/versioned_docs/version-0.64/animations.md b/website/versioned_docs/version-0.64/animations.md index 39014363a8b..0bfa4b1463d 100644 --- a/website/versioned_docs/version-0.64/animations.md +++ b/website/versioned_docs/version-0.64/animations.md @@ -232,7 +232,7 @@ The following example implements a horizontal scrolling carousel where the scrol #### ScrollView with Animated Event Example - + ```SnackPlayer name=Animated&supportedPlatforms=ios,android @@ -533,7 +533,7 @@ onPanResponderMove={Animated.event( #### PanResponder with Animated Event Example - + ```SnackPlayer name=Animated diff --git a/website/versioned_docs/version-0.64/appearance.md b/website/versioned_docs/version-0.64/appearance.md index 408eca8abde..1abef766b55 100644 --- a/website/versioned_docs/version-0.64/appearance.md +++ b/website/versioned_docs/version-0.64/appearance.md @@ -13,7 +13,7 @@ The `Appearance` module exposes information about the user's appearance preferen #### Developer notes - + diff --git a/website/versioned_docs/version-0.64/appstate.md b/website/versioned_docs/version-0.64/appstate.md index cbdc9295993..e4fd755bbcb 100644 --- a/website/versioned_docs/version-0.64/appstate.md +++ b/website/versioned_docs/version-0.64/appstate.md @@ -24,7 +24,7 @@ For more information, see [Apple's documentation](https://developer.apple.com/do To see the current state, you can check `AppState.currentState`, which will be kept up-to-date. However, `currentState` will be null at launch while `AppState` retrieves it over the bridge. - + ```SnackPlayer name=AppState%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.64/backhandler.md b/website/versioned_docs/version-0.64/backhandler.md index f86a5730492..3ca42179119 100644 --- a/website/versioned_docs/version-0.64/backhandler.md +++ b/website/versioned_docs/version-0.64/backhandler.md @@ -45,7 +45,7 @@ BackHandler.addEventListener('hardwareBackPress', function () { The following example implements a scenario where you confirm if the user wants to exit the app: - + ```SnackPlayer name=BackHandler&supportedPlatforms=android @@ -158,7 +158,7 @@ export default App; Additionally `BackHandler.removeEventListener` can also be used to clear the event listener. Ensure the callback has the reference to the same function used in the `addEventListener` call as shown the following example ﹣ - + ```SnackPlayer name=BackHandler&supportedPlatforms=android diff --git a/website/versioned_docs/version-0.64/building-for-tv.md b/website/versioned_docs/version-0.64/building-for-tv.md index 1a66d4a7c04..e9b6cf8eadd 100644 --- a/website/versioned_docs/version-0.64/building-for-tv.md +++ b/website/versioned_docs/version-0.64/building-for-tv.md @@ -8,7 +8,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications. - + diff --git a/website/versioned_docs/version-0.64/datepickerios.md b/website/versioned_docs/version-0.64/datepickerios.md index b20f41ccba4..cb67cbb99cd 100644 --- a/website/versioned_docs/version-0.64/datepickerios.md +++ b/website/versioned_docs/version-0.64/datepickerios.md @@ -11,7 +11,7 @@ Use `DatePickerIOS` to render a date/time picker (selector) on iOS. This is a co ### Example - + ```SnackPlayer name=DatePickerIOS&supportedPlatforms=ios diff --git a/website/versioned_docs/version-0.64/debugging.md b/website/versioned_docs/version-0.64/debugging.md index 2a9b6d0a427..8c5f1e10621 100644 --- a/website/versioned_docs/version-0.64/debugging.md +++ b/website/versioned_docs/version-0.64/debugging.md @@ -89,7 +89,7 @@ You can use [the standalone version of React Developer Tools](https://github.com > Note: Version 4 of `react-devtools` requires `react-native` version 0.62 or higher to work properly. - + ```shell diff --git a/website/versioned_docs/version-0.64/dimensions.md b/website/versioned_docs/version-0.64/dimensions.md index eff7b42fdec..47027e3654f 100644 --- a/website/versioned_docs/version-0.64/dimensions.md +++ b/website/versioned_docs/version-0.64/dimensions.md @@ -24,7 +24,7 @@ If you are targeting foldable devices or devices which can change the screen siz ## Example - + ```SnackPlayer name=Dimensions diff --git a/website/versioned_docs/version-0.64/dynamiccolorios.md b/website/versioned_docs/version-0.64/dynamiccolorios.md index 38ea15ecfbc..9a21b61d828 100644 --- a/website/versioned_docs/version-0.64/dynamiccolorios.md +++ b/website/versioned_docs/version-0.64/dynamiccolorios.md @@ -19,7 +19,7 @@ At runtime, the system will choose which of the two colors to display depending #### Developer notes - + diff --git a/website/versioned_docs/version-0.64/getting-started.md b/website/versioned_docs/version-0.64/getting-started.md index eff7332b5eb..64c40af9b38 100644 --- a/website/versioned_docs/version-0.64/getting-started.md +++ b/website/versioned_docs/version-0.64/getting-started.md @@ -14,12 +14,12 @@ This page will help you install and build your first React Native app. **If you are already familiar with mobile development**, you may want to use React Native CLI. It requires Xcode or Android Studio to get started. If you already have one of these tools installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them. - + Assuming that you have [Node 12 LTS](https://nodejs.org/en/download/) or greater installed, you can use npm to install the Expo CLI command line utility: - + ```shell @@ -38,7 +38,7 @@ yarn global add expo-cli Then run the following commands to create a new React Native project called "AwesomeProject": - + ```shell @@ -115,12 +115,12 @@ The instructions are a bit different depending on your development operating sys #### Development OS - + #### Target OS - + [//]: # 'macOS, Android' @@ -142,7 +142,7 @@ The instructions are a bit different depending on your development operating sys #### Target OS - + [//]: # 'Windows, Android' @@ -166,7 +166,7 @@ The instructions are a bit different depending on your development operating sys #### Target OS - + [//]: # 'Linux, Android' diff --git a/website/versioned_docs/version-0.64/image-style-props.md b/website/versioned_docs/version-0.64/image-style-props.md index cae5d3a29ee..41212e7b14a 100644 --- a/website/versioned_docs/version-0.64/image-style-props.md +++ b/website/versioned_docs/version-0.64/image-style-props.md @@ -9,7 +9,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ### Image Resize Mode - + ```SnackPlayer name=Image%20Resize%20Modes%20Function%20Component%20Example @@ -182,7 +182,7 @@ export default DisplayAnImageWithStyle; ### Image Border - + ```SnackPlayer name=Style%20BorderWidth%20and%20BorderColor%20Function%20Component%20Example @@ -265,7 +265,7 @@ export default DisplayAnImageWithStyle; ### Image Border Radius - + ```SnackPlayer name=Style%20Border%20Radius%20Function%20Component%20Example @@ -416,7 +416,7 @@ export default DisplayAnImageWithStyle; ### Image Tint - + ```SnackPlayer name=Style%20tintColor%20Function%20Component diff --git a/website/versioned_docs/version-0.64/image.md b/website/versioned_docs/version-0.64/image.md index e39e8dc3c34..b0dd66cdb7b 100644 --- a/website/versioned_docs/version-0.64/image.md +++ b/website/versioned_docs/version-0.64/image.md @@ -13,7 +13,7 @@ This example shows fetching and displaying an image from local storage as well a ## Examples - + ```SnackPlayer name=Function%20Component%20Example @@ -112,7 +112,7 @@ export default DisplayAnImage; You can also add `style` to an image: - + ```SnackPlayer name=Function%20Component%20Example diff --git a/website/versioned_docs/version-0.64/integration-with-existing-apps.md b/website/versioned_docs/version-0.64/integration-with-existing-apps.md index 803a6dfe6e3..0d147e07a3a 100644 --- a/website/versioned_docs/version-0.64/integration-with-existing-apps.md +++ b/website/versioned_docs/version-0.64/integration-with-existing-apps.md @@ -12,7 +12,7 @@ React Native is great when you are starting a new mobile app from scratch. Howev The specific steps are different depending on what platform you're targeting. - + diff --git a/website/versioned_docs/version-0.64/intro-react.md b/website/versioned_docs/version-0.64/intro-react.md index 752e86f5561..e47af496388 100644 --- a/website/versioned_docs/version-0.64/intro-react.md +++ b/website/versioned_docs/version-0.64/intro-react.md @@ -21,7 +21,7 @@ If you want to dig deeper, we encourage you to check out [React’s official doc The rest of this introduction to React uses cats in its examples: friendly, approachable creatures that need names and a cafe to work in. Here is your very first Cat component: - + ```SnackPlayer name=Your%20Cat @@ -205,7 +205,7 @@ export default Cat; #### Developer notes - + @@ -315,7 +315,7 @@ While you can think of props as arguments you use to configure how components re The following example takes place in a cat cafe where two hungry cats are waiting to be fed. Their hunger, which we expect to change over time (unlike their names), is stored as state. To feed the cats, press their buttons—which will update their state. - + You can add state to a component by calling [React’s `useState` Hook](https://reactjs.org/docs/hooks-state.html). A Hook is a kind of function that lets you “hook into” React features. For example, `useState` is a Hook that lets you add state to function components. You can learn more about [other kinds of Hooks in the React documentation.](https://reactjs.org/docs/hooks-intro.html) diff --git a/website/versioned_docs/version-0.64/introduction.md b/website/versioned_docs/version-0.64/introduction.md index f77b91adf9b..1c924ccec0d 100644 --- a/website/versioned_docs/version-0.64/introduction.md +++ b/website/versioned_docs/version-0.64/introduction.md @@ -56,7 +56,7 @@ With React, you can make components using either classes or functions. Originall [Hooks were introduced in React Native 0.59.](/blog/2019/03/12/releasing-react-native-059), and because Hooks are the future-facing way to write your React components, we wrote this introduction using function component examples. Where useful, we also cover class components under a toggle like so: - + ```SnackPlayer name=Hello%20World%20Function%20Component @@ -111,7 +111,7 @@ You can find more examples of class components in [previous versions of this doc People from many different development backgrounds are learning React Native. You may have experience with a range of technologies, from web to Android to iOS and more. We try to write for developers from all backgrounds. Sometimes we provide explanations specific to one platform or another like so: - + diff --git a/website/versioned_docs/version-0.64/keyboard.md b/website/versioned_docs/version-0.64/keyboard.md index 7f006fe6282..420099f73c1 100644 --- a/website/versioned_docs/version-0.64/keyboard.md +++ b/website/versioned_docs/version-0.64/keyboard.md @@ -11,7 +11,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it. - + ```SnackPlayer name=Keyboard%20Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.64/layoutanimation.md b/website/versioned_docs/version-0.64/layoutanimation.md index b0a6014e0af..bf2a819acfc 100644 --- a/website/versioned_docs/version-0.64/layoutanimation.md +++ b/website/versioned_docs/version-0.64/layoutanimation.md @@ -120,7 +120,7 @@ Helper that creates an object (with `create`, `update`, and `delete` fields) to **Example:** - + ```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios @@ -338,7 +338,7 @@ Calls `configureNext()` with `Presets.spring`. **Example:** - + ```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.64/libraries.md b/website/versioned_docs/version-0.64/libraries.md index 03bd6e439aa..de15e95dbd2 100644 --- a/website/versioned_docs/version-0.64/libraries.md +++ b/website/versioned_docs/version-0.64/libraries.md @@ -22,7 +22,7 @@ If you have Node.js installed on your computer then you already have the npm CLI To install a library in your project, navigate to your project directory in your terminal and run the installation command. Let's try this with `react-native-webview`: - + ```shell diff --git a/website/versioned_docs/version-0.64/linking.md b/website/versioned_docs/version-0.64/linking.md index 1168a2f7c40..9c0fc7b621a 100644 --- a/website/versioned_docs/version-0.64/linking.md +++ b/website/versioned_docs/version-0.64/linking.md @@ -37,7 +37,7 @@ As mentioned in the introduction, there are some URL schemes for core functional If you want to enable deep links in your app, please read the below guide: - + > For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters). diff --git a/website/versioned_docs/version-0.64/modal.md b/website/versioned_docs/version-0.64/modal.md index 65f1a09f59c..17f6ae35344 100644 --- a/website/versioned_docs/version-0.64/modal.md +++ b/website/versioned_docs/version-0.64/modal.md @@ -9,7 +9,7 @@ The Modal component is a basic way to present content above an enclosing view. ## Example - + ```SnackPlayer name=Modal&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.64/network.md b/website/versioned_docs/version-0.64/network.md index 3cfea56dda7..2e14de8f77d 100644 --- a/website/versioned_docs/version-0.64/network.md +++ b/website/versioned_docs/version-0.64/network.md @@ -74,7 +74,7 @@ const getMoviesFromApiAsync = async () => { Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently. - + ```SnackPlayer name=Fetch%20Example diff --git a/website/versioned_docs/version-0.64/panresponder.md b/website/versioned_docs/version-0.64/panresponder.md index e075ef77a98..c70a825625e 100644 --- a/website/versioned_docs/version-0.64/panresponder.md +++ b/website/versioned_docs/version-0.64/panresponder.md @@ -80,7 +80,7 @@ const ExampleComponent = () => { `PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen - + ```SnackPlayer name=PanResponder diff --git a/website/versioned_docs/version-0.64/permissionsandroid.md b/website/versioned_docs/version-0.64/permissionsandroid.md index 1d78927c9b3..0723f75586c 100644 --- a/website/versioned_docs/version-0.64/permissionsandroid.md +++ b/website/versioned_docs/version-0.64/permissionsandroid.md @@ -20,7 +20,7 @@ If a user has previously turned off a permission that you prompt for, the OS wil ### Example - + ```SnackPlayer name=PermissionsAndroid%20Example&supportedPlatforms=android diff --git a/website/versioned_docs/version-0.64/platformcolor.md b/website/versioned_docs/version-0.64/platformcolor.md index d5f97d4009b..83e0846fe93 100644 --- a/website/versioned_docs/version-0.64/platformcolor.md +++ b/website/versioned_docs/version-0.64/platformcolor.md @@ -32,7 +32,7 @@ For a full list of the types of system colors supported, see: #### Developer notes - + diff --git a/website/versioned_docs/version-0.64/running-on-device.md b/website/versioned_docs/version-0.64/running-on-device.md index d64d5500ef3..550fe978e87 100644 --- a/website/versioned_docs/version-0.64/running-on-device.md +++ b/website/versioned_docs/version-0.64/running-on-device.md @@ -10,14 +10,14 @@ It's always a good idea to test your app on an actual device before releasing it If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app—but in order to build and run your app on a device, you will need to eject and install the native code dependencies from the [environment setup guide](environment-setup). - + ## Running your app on Android devices #### Development OS - + [//]: # 'macOS, Android' @@ -312,7 +312,7 @@ You have built a great app using React Native, and you are now itching to releas #### Development OS - + [//]: # 'macOS, iOS' diff --git a/website/versioned_docs/version-0.64/sectionlist.md b/website/versioned_docs/version-0.64/sectionlist.md index a57f6ca0843..fe559c4a921 100644 --- a/website/versioned_docs/version-0.64/sectionlist.md +++ b/website/versioned_docs/version-0.64/sectionlist.md @@ -22,7 +22,7 @@ If you don't need section support and want a simpler interface, use [` ## Example - + ```SnackPlayer name=SectionList%20Example diff --git a/website/versioned_docs/version-0.64/security.md b/website/versioned_docs/version-0.64/security.md index 79c7333e42d..78700c67949 100644 --- a/website/versioned_docs/version-0.64/security.md +++ b/website/versioned_docs/version-0.64/security.md @@ -34,7 +34,7 @@ If you must have an API key or a secret to access some resource from your app, t #### Developer Notes - + diff --git a/website/versioned_docs/version-0.64/share.md b/website/versioned_docs/version-0.64/share.md index 0d1a2b38ff2..5a14a74ada2 100644 --- a/website/versioned_docs/version-0.64/share.md +++ b/website/versioned_docs/version-0.64/share.md @@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ## Example - + ```SnackPlayer name=Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.64/systrace.md b/website/versioned_docs/version-0.64/systrace.md index 0a8e33897fe..a2e44ca5d79 100644 --- a/website/versioned_docs/version-0.64/systrace.md +++ b/website/versioned_docs/version-0.64/systrace.md @@ -11,7 +11,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con `Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler. - + ```SnackPlayer name=Systrace%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.64/text.md b/website/versioned_docs/version-0.64/text.md index 1b93badec6a..729681952fe 100644 --- a/website/versioned_docs/version-0.64/text.md +++ b/website/versioned_docs/version-0.64/text.md @@ -11,7 +11,7 @@ A React component for displaying text. In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines: - + ```SnackPlayer name=Text%20Functional%20Component%20Example diff --git a/website/versioned_docs/version-0.64/touchablehighlight.md b/website/versioned_docs/version-0.64/touchablehighlight.md index 644e0fdb5e9..a9cdc29f973 100644 --- a/website/versioned_docs/version-0.64/touchablehighlight.md +++ b/website/versioned_docs/version-0.64/touchablehighlight.md @@ -32,7 +32,7 @@ function MyComponent(props) { ## Example - + ```SnackPlayer name=TouchableHighlight%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.64/touchableopacity.md b/website/versioned_docs/version-0.64/touchableopacity.md index d32454116b3..5e0dbdf5e80 100644 --- a/website/versioned_docs/version-0.64/touchableopacity.md +++ b/website/versioned_docs/version-0.64/touchableopacity.md @@ -13,7 +13,7 @@ Opacity is controlled by wrapping the children in an `Animated.View`, which is a ## Example - + ```SnackPlayer name=TouchableOpacity%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.64/transforms.md b/website/versioned_docs/version-0.64/transforms.md index 42bb8f02ac1..22da7098d18 100644 --- a/website/versioned_docs/version-0.64/transforms.md +++ b/website/versioned_docs/version-0.64/transforms.md @@ -9,7 +9,7 @@ Transforms are style properties that will help you modify the appearance and pos ## Example - + ```SnackPlayer name=Transforms diff --git a/website/versioned_docs/version-0.64/typescript.md b/website/versioned_docs/version-0.64/typescript.md index 2561347a94c..e3a5d51bdfb 100644 --- a/website/versioned_docs/version-0.64/typescript.md +++ b/website/versioned_docs/version-0.64/typescript.md @@ -25,7 +25,7 @@ npx react-native init MyApp --template react-native-template-typescript You can use [Expo][expo] which has two TypeScript templates: - + ```shell @@ -46,7 +46,7 @@ expo init MyTSProject Or you could use [Ignite][ignite], which also has a TypeScript template: - + ```shell @@ -69,7 +69,7 @@ ignite new MyTSProject 1. Add TypeScript and the types for React Native and Jest to your project. - + ```shell @@ -235,7 +235,7 @@ To use custom path aliases with TypeScript, you need to set the path aliases to 2. Add [`babel-plugin-module-resolver`][bpmr] as a development package to your project: - + ```shell diff --git a/website/versioned_docs/version-0.64/vibration.md b/website/versioned_docs/version-0.64/vibration.md index c66b716ee21..8b30b14902f 100644 --- a/website/versioned_docs/version-0.64/vibration.md +++ b/website/versioned_docs/version-0.64/vibration.md @@ -9,7 +9,7 @@ Vibrates the device. ## Example - + ```SnackPlayer name=Vibration&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.64/view.md b/website/versioned_docs/version-0.64/view.md index bb76b460e5e..6eacdb299ab 100644 --- a/website/versioned_docs/version-0.64/view.md +++ b/website/versioned_docs/version-0.64/view.md @@ -11,7 +11,7 @@ The most fundamental component for building a UI, `View` is a container that sup This example creates a `View` that wraps two boxes with color and a text component in a row with padding. - + ```SnackPlayer name=View%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.65/_integration-with-existing-apps-objc.md b/website/versioned_docs/version-0.65/_integration-with-existing-apps-objc.md index 220245e9761..f2047c69f3b 100644 --- a/website/versioned_docs/version-0.65/_integration-with-existing-apps-objc.md +++ b/website/versioned_docs/version-0.65/_integration-with-existing-apps-objc.md @@ -39,7 +39,7 @@ Next, make sure you have [installed the yarn package manager](https://yarnpkg.co Install the `react` and `react-native` packages. Open a terminal or command prompt, then navigate to the directory with your `package.json` file and run: - + ```shell @@ -62,7 +62,7 @@ This will print a message similar to the following (scroll up in the yarn output This is OK, it means we also need to install React: - + ```shell @@ -346,7 +346,7 @@ Apple has blocked implicit cleartext HTTP resource loading. So we need to add th To run your app, you need to first start the development server. To do this, run the following command in the root directory of your React Native project: - + ```shell diff --git a/website/versioned_docs/version-0.65/accessibilityinfo.md b/website/versioned_docs/version-0.65/accessibilityinfo.md index e357530be5c..8fea3408408 100644 --- a/website/versioned_docs/version-0.65/accessibilityinfo.md +++ b/website/versioned_docs/version-0.65/accessibilityinfo.md @@ -9,7 +9,7 @@ Sometimes it's useful to know whether or not the device has a screen reader that ## Example - + ```SnackPlayer name=AccessibilityInfo%20Function%20Component%20Example&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.65/activityindicator.md b/website/versioned_docs/version-0.65/activityindicator.md index 33e05f8d587..e3a6300d149 100644 --- a/website/versioned_docs/version-0.65/activityindicator.md +++ b/website/versioned_docs/version-0.65/activityindicator.md @@ -9,7 +9,7 @@ Displays a circular loading indicator. ## Example - + ```SnackPlayer name=ActivityIndicator%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.65/alert.md b/website/versioned_docs/version-0.65/alert.md index 5dd4507344d..828c292a0bb 100644 --- a/website/versioned_docs/version-0.65/alert.md +++ b/website/versioned_docs/version-0.65/alert.md @@ -13,7 +13,7 @@ This is an API that works both on Android and iOS and can show static alerts. Al ## Example - + ```SnackPlayer name=Alert%20Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.65/animated.md b/website/versioned_docs/version-0.65/animated.md index e805df991eb..006278d3601 100644 --- a/website/versioned_docs/version-0.65/animated.md +++ b/website/versioned_docs/version-0.65/animated.md @@ -9,7 +9,7 @@ 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://reactjs.org/docs/hooks-reference.html#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. @@ -26,7 +26,7 @@ The core workflow for creating an animation is to create an `Animated.Value`, ho The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim` - + ```SnackPlayer name=Animated diff --git a/website/versioned_docs/version-0.65/animations.md b/website/versioned_docs/version-0.65/animations.md index 39014363a8b..0bfa4b1463d 100644 --- a/website/versioned_docs/version-0.65/animations.md +++ b/website/versioned_docs/version-0.65/animations.md @@ -232,7 +232,7 @@ The following example implements a horizontal scrolling carousel where the scrol #### ScrollView with Animated Event Example - + ```SnackPlayer name=Animated&supportedPlatforms=ios,android @@ -533,7 +533,7 @@ onPanResponderMove={Animated.event( #### PanResponder with Animated Event Example - + ```SnackPlayer name=Animated diff --git a/website/versioned_docs/version-0.65/appearance.md b/website/versioned_docs/version-0.65/appearance.md index fc9663a42c3..69f79d7cf18 100644 --- a/website/versioned_docs/version-0.65/appearance.md +++ b/website/versioned_docs/version-0.65/appearance.md @@ -13,7 +13,7 @@ The `Appearance` module exposes information about the user's appearance preferen #### Developer notes - + diff --git a/website/versioned_docs/version-0.65/appstate.md b/website/versioned_docs/version-0.65/appstate.md index ef28eb3ebbf..5dd75b35ab8 100644 --- a/website/versioned_docs/version-0.65/appstate.md +++ b/website/versioned_docs/version-0.65/appstate.md @@ -24,7 +24,7 @@ For more information, see [Apple's documentation](https://developer.apple.com/do To see the current state, you can check `AppState.currentState`, which will be kept up-to-date. However, `currentState` will be null at launch while `AppState` retrieves it over the bridge. - + ```SnackPlayer name=AppState%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.65/backhandler.md b/website/versioned_docs/version-0.65/backhandler.md index f86a5730492..3ca42179119 100644 --- a/website/versioned_docs/version-0.65/backhandler.md +++ b/website/versioned_docs/version-0.65/backhandler.md @@ -45,7 +45,7 @@ BackHandler.addEventListener('hardwareBackPress', function () { The following example implements a scenario where you confirm if the user wants to exit the app: - + ```SnackPlayer name=BackHandler&supportedPlatforms=android @@ -158,7 +158,7 @@ export default App; Additionally `BackHandler.removeEventListener` can also be used to clear the event listener. Ensure the callback has the reference to the same function used in the `addEventListener` call as shown the following example ﹣ - + ```SnackPlayer name=BackHandler&supportedPlatforms=android diff --git a/website/versioned_docs/version-0.65/building-for-tv.md b/website/versioned_docs/version-0.65/building-for-tv.md index 1a66d4a7c04..e9b6cf8eadd 100644 --- a/website/versioned_docs/version-0.65/building-for-tv.md +++ b/website/versioned_docs/version-0.65/building-for-tv.md @@ -8,7 +8,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications. - + diff --git a/website/versioned_docs/version-0.65/datepickerios.md b/website/versioned_docs/version-0.65/datepickerios.md index b20f41ccba4..cb67cbb99cd 100644 --- a/website/versioned_docs/version-0.65/datepickerios.md +++ b/website/versioned_docs/version-0.65/datepickerios.md @@ -11,7 +11,7 @@ Use `DatePickerIOS` to render a date/time picker (selector) on iOS. This is a co ### Example - + ```SnackPlayer name=DatePickerIOS&supportedPlatforms=ios diff --git a/website/versioned_docs/version-0.65/debugging.md b/website/versioned_docs/version-0.65/debugging.md index 2a9b6d0a427..8c5f1e10621 100644 --- a/website/versioned_docs/version-0.65/debugging.md +++ b/website/versioned_docs/version-0.65/debugging.md @@ -89,7 +89,7 @@ You can use [the standalone version of React Developer Tools](https://github.com > Note: Version 4 of `react-devtools` requires `react-native` version 0.62 or higher to work properly. - + ```shell diff --git a/website/versioned_docs/version-0.65/dimensions.md b/website/versioned_docs/version-0.65/dimensions.md index eff7b42fdec..47027e3654f 100644 --- a/website/versioned_docs/version-0.65/dimensions.md +++ b/website/versioned_docs/version-0.65/dimensions.md @@ -24,7 +24,7 @@ If you are targeting foldable devices or devices which can change the screen siz ## Example - + ```SnackPlayer name=Dimensions diff --git a/website/versioned_docs/version-0.65/dynamiccolorios.md b/website/versioned_docs/version-0.65/dynamiccolorios.md index 2cc219ea8c6..610845a24b4 100644 --- a/website/versioned_docs/version-0.65/dynamiccolorios.md +++ b/website/versioned_docs/version-0.65/dynamiccolorios.md @@ -22,7 +22,7 @@ At runtime, the system will choose which of the colors to display depending on t #### Developer notes - + diff --git a/website/versioned_docs/version-0.65/getting-started.md b/website/versioned_docs/version-0.65/getting-started.md index eff7332b5eb..64c40af9b38 100644 --- a/website/versioned_docs/version-0.65/getting-started.md +++ b/website/versioned_docs/version-0.65/getting-started.md @@ -14,12 +14,12 @@ This page will help you install and build your first React Native app. **If you are already familiar with mobile development**, you may want to use React Native CLI. It requires Xcode or Android Studio to get started. If you already have one of these tools installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them. - + Assuming that you have [Node 12 LTS](https://nodejs.org/en/download/) or greater installed, you can use npm to install the Expo CLI command line utility: - + ```shell @@ -38,7 +38,7 @@ yarn global add expo-cli Then run the following commands to create a new React Native project called "AwesomeProject": - + ```shell @@ -115,12 +115,12 @@ The instructions are a bit different depending on your development operating sys #### Development OS - + #### Target OS - + [//]: # 'macOS, Android' @@ -142,7 +142,7 @@ The instructions are a bit different depending on your development operating sys #### Target OS - + [//]: # 'Windows, Android' @@ -166,7 +166,7 @@ The instructions are a bit different depending on your development operating sys #### Target OS - + [//]: # 'Linux, Android' diff --git a/website/versioned_docs/version-0.65/image-style-props.md b/website/versioned_docs/version-0.65/image-style-props.md index cae5d3a29ee..41212e7b14a 100644 --- a/website/versioned_docs/version-0.65/image-style-props.md +++ b/website/versioned_docs/version-0.65/image-style-props.md @@ -9,7 +9,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ### Image Resize Mode - + ```SnackPlayer name=Image%20Resize%20Modes%20Function%20Component%20Example @@ -182,7 +182,7 @@ export default DisplayAnImageWithStyle; ### Image Border - + ```SnackPlayer name=Style%20BorderWidth%20and%20BorderColor%20Function%20Component%20Example @@ -265,7 +265,7 @@ export default DisplayAnImageWithStyle; ### Image Border Radius - + ```SnackPlayer name=Style%20Border%20Radius%20Function%20Component%20Example @@ -416,7 +416,7 @@ export default DisplayAnImageWithStyle; ### Image Tint - + ```SnackPlayer name=Style%20tintColor%20Function%20Component diff --git a/website/versioned_docs/version-0.65/image.md b/website/versioned_docs/version-0.65/image.md index 3043573b33f..d41f2e7f733 100644 --- a/website/versioned_docs/version-0.65/image.md +++ b/website/versioned_docs/version-0.65/image.md @@ -13,7 +13,7 @@ This example shows fetching and displaying an image from local storage as well a ## Examples - + ```SnackPlayer name=Function%20Component%20Example @@ -112,7 +112,7 @@ export default DisplayAnImage; You can also add `style` to an image: - + ```SnackPlayer name=Function%20Component%20Example diff --git a/website/versioned_docs/version-0.65/integration-with-existing-apps.md b/website/versioned_docs/version-0.65/integration-with-existing-apps.md index 803a6dfe6e3..0d147e07a3a 100644 --- a/website/versioned_docs/version-0.65/integration-with-existing-apps.md +++ b/website/versioned_docs/version-0.65/integration-with-existing-apps.md @@ -12,7 +12,7 @@ React Native is great when you are starting a new mobile app from scratch. Howev The specific steps are different depending on what platform you're targeting. - + diff --git a/website/versioned_docs/version-0.65/intro-react.md b/website/versioned_docs/version-0.65/intro-react.md index 50ab870a5aa..66f0b00dac5 100644 --- a/website/versioned_docs/version-0.65/intro-react.md +++ b/website/versioned_docs/version-0.65/intro-react.md @@ -21,7 +21,7 @@ If you want to dig deeper, we encourage you to check out [React’s official doc The rest of this introduction to React uses cats in its examples: friendly, approachable creatures that need names and a cafe to work in. Here is your very first Cat component: - + ```SnackPlayer name=Your%20Cat @@ -205,7 +205,7 @@ export default Cat; #### Developer notes - + @@ -315,7 +315,7 @@ While you can think of props as arguments you use to configure how components re The following example takes place in a cat cafe where two hungry cats are waiting to be fed. Their hunger, which we expect to change over time (unlike their names), is stored as state. To feed the cats, press their buttons—which will update their state. - + You can add state to a component by calling [React’s `useState` Hook](https://reactjs.org/docs/hooks-state.html). A Hook is a kind of function that lets you “hook into” React features. For example, `useState` is a Hook that lets you add state to function components. You can learn more about [other kinds of Hooks in the React documentation.](https://reactjs.org/docs/hooks-intro.html) diff --git a/website/versioned_docs/version-0.65/introduction.md b/website/versioned_docs/version-0.65/introduction.md index f77b91adf9b..1c924ccec0d 100644 --- a/website/versioned_docs/version-0.65/introduction.md +++ b/website/versioned_docs/version-0.65/introduction.md @@ -56,7 +56,7 @@ With React, you can make components using either classes or functions. Originall [Hooks were introduced in React Native 0.59.](/blog/2019/03/12/releasing-react-native-059), and because Hooks are the future-facing way to write your React components, we wrote this introduction using function component examples. Where useful, we also cover class components under a toggle like so: - + ```SnackPlayer name=Hello%20World%20Function%20Component @@ -111,7 +111,7 @@ You can find more examples of class components in [previous versions of this doc People from many different development backgrounds are learning React Native. You may have experience with a range of technologies, from web to Android to iOS and more. We try to write for developers from all backgrounds. Sometimes we provide explanations specific to one platform or another like so: - + diff --git a/website/versioned_docs/version-0.65/keyboard.md b/website/versioned_docs/version-0.65/keyboard.md index caea73c8b4e..08051d5a086 100644 --- a/website/versioned_docs/version-0.65/keyboard.md +++ b/website/versioned_docs/version-0.65/keyboard.md @@ -11,7 +11,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it. - + ```SnackPlayer name=Keyboard%20Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.65/layoutanimation.md b/website/versioned_docs/version-0.65/layoutanimation.md index b0a6014e0af..bf2a819acfc 100644 --- a/website/versioned_docs/version-0.65/layoutanimation.md +++ b/website/versioned_docs/version-0.65/layoutanimation.md @@ -120,7 +120,7 @@ Helper that creates an object (with `create`, `update`, and `delete` fields) to **Example:** - + ```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios @@ -338,7 +338,7 @@ Calls `configureNext()` with `Presets.spring`. **Example:** - + ```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.65/libraries.md b/website/versioned_docs/version-0.65/libraries.md index 03bd6e439aa..de15e95dbd2 100644 --- a/website/versioned_docs/version-0.65/libraries.md +++ b/website/versioned_docs/version-0.65/libraries.md @@ -22,7 +22,7 @@ If you have Node.js installed on your computer then you already have the npm CLI To install a library in your project, navigate to your project directory in your terminal and run the installation command. Let's try this with `react-native-webview`: - + ```shell diff --git a/website/versioned_docs/version-0.65/linking.md b/website/versioned_docs/version-0.65/linking.md index 42c1948cb74..156d307b5bb 100644 --- a/website/versioned_docs/version-0.65/linking.md +++ b/website/versioned_docs/version-0.65/linking.md @@ -37,7 +37,7 @@ As mentioned in the introduction, there are some URL schemes for core functional If you want to enable deep links in your app, please read the below guide: - + > For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters). diff --git a/website/versioned_docs/version-0.65/modal.md b/website/versioned_docs/version-0.65/modal.md index 65f1a09f59c..17f6ae35344 100644 --- a/website/versioned_docs/version-0.65/modal.md +++ b/website/versioned_docs/version-0.65/modal.md @@ -9,7 +9,7 @@ The Modal component is a basic way to present content above an enclosing view. ## Example - + ```SnackPlayer name=Modal&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.65/network.md b/website/versioned_docs/version-0.65/network.md index 0769752baab..a04b945ead1 100644 --- a/website/versioned_docs/version-0.65/network.md +++ b/website/versioned_docs/version-0.65/network.md @@ -74,7 +74,7 @@ const getMoviesFromApiAsync = async () => { Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently. - + ```SnackPlayer name=Fetch%20Example diff --git a/website/versioned_docs/version-0.65/panresponder.md b/website/versioned_docs/version-0.65/panresponder.md index e075ef77a98..c70a825625e 100644 --- a/website/versioned_docs/version-0.65/panresponder.md +++ b/website/versioned_docs/version-0.65/panresponder.md @@ -80,7 +80,7 @@ const ExampleComponent = () => { `PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen - + ```SnackPlayer name=PanResponder diff --git a/website/versioned_docs/version-0.65/permissionsandroid.md b/website/versioned_docs/version-0.65/permissionsandroid.md index 1d78927c9b3..0723f75586c 100644 --- a/website/versioned_docs/version-0.65/permissionsandroid.md +++ b/website/versioned_docs/version-0.65/permissionsandroid.md @@ -20,7 +20,7 @@ If a user has previously turned off a permission that you prompt for, the OS wil ### Example - + ```SnackPlayer name=PermissionsAndroid%20Example&supportedPlatforms=android diff --git a/website/versioned_docs/version-0.65/platformcolor.md b/website/versioned_docs/version-0.65/platformcolor.md index d5f97d4009b..83e0846fe93 100644 --- a/website/versioned_docs/version-0.65/platformcolor.md +++ b/website/versioned_docs/version-0.65/platformcolor.md @@ -32,7 +32,7 @@ For a full list of the types of system colors supported, see: #### Developer notes - + diff --git a/website/versioned_docs/version-0.65/running-on-device.md b/website/versioned_docs/version-0.65/running-on-device.md index d64d5500ef3..550fe978e87 100644 --- a/website/versioned_docs/version-0.65/running-on-device.md +++ b/website/versioned_docs/version-0.65/running-on-device.md @@ -10,14 +10,14 @@ It's always a good idea to test your app on an actual device before releasing it If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app—but in order to build and run your app on a device, you will need to eject and install the native code dependencies from the [environment setup guide](environment-setup). - + ## Running your app on Android devices #### Development OS - + [//]: # 'macOS, Android' @@ -312,7 +312,7 @@ You have built a great app using React Native, and you are now itching to releas #### Development OS - + [//]: # 'macOS, iOS' diff --git a/website/versioned_docs/version-0.65/sectionlist.md b/website/versioned_docs/version-0.65/sectionlist.md index a57f6ca0843..fe559c4a921 100644 --- a/website/versioned_docs/version-0.65/sectionlist.md +++ b/website/versioned_docs/version-0.65/sectionlist.md @@ -22,7 +22,7 @@ If you don't need section support and want a simpler interface, use [` ## Example - + ```SnackPlayer name=SectionList%20Example diff --git a/website/versioned_docs/version-0.65/security.md b/website/versioned_docs/version-0.65/security.md index 79c7333e42d..78700c67949 100644 --- a/website/versioned_docs/version-0.65/security.md +++ b/website/versioned_docs/version-0.65/security.md @@ -34,7 +34,7 @@ If you must have an API key or a secret to access some resource from your app, t #### Developer Notes - + diff --git a/website/versioned_docs/version-0.65/share.md b/website/versioned_docs/version-0.65/share.md index 0d1a2b38ff2..5a14a74ada2 100644 --- a/website/versioned_docs/version-0.65/share.md +++ b/website/versioned_docs/version-0.65/share.md @@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ## Example - + ```SnackPlayer name=Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.65/systrace.md b/website/versioned_docs/version-0.65/systrace.md index 0a8e33897fe..a2e44ca5d79 100644 --- a/website/versioned_docs/version-0.65/systrace.md +++ b/website/versioned_docs/version-0.65/systrace.md @@ -11,7 +11,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con `Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler. - + ```SnackPlayer name=Systrace%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.65/text.md b/website/versioned_docs/version-0.65/text.md index 4ef509deae1..5ac6abe97ba 100644 --- a/website/versioned_docs/version-0.65/text.md +++ b/website/versioned_docs/version-0.65/text.md @@ -11,7 +11,7 @@ A React component for displaying text. In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines: - + ```SnackPlayer name=Text%20Functional%20Component%20Example diff --git a/website/versioned_docs/version-0.65/touchablehighlight.md b/website/versioned_docs/version-0.65/touchablehighlight.md index 644e0fdb5e9..a9cdc29f973 100644 --- a/website/versioned_docs/version-0.65/touchablehighlight.md +++ b/website/versioned_docs/version-0.65/touchablehighlight.md @@ -32,7 +32,7 @@ function MyComponent(props) { ## Example - + ```SnackPlayer name=TouchableHighlight%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.65/touchableopacity.md b/website/versioned_docs/version-0.65/touchableopacity.md index d32454116b3..5e0dbdf5e80 100644 --- a/website/versioned_docs/version-0.65/touchableopacity.md +++ b/website/versioned_docs/version-0.65/touchableopacity.md @@ -13,7 +13,7 @@ Opacity is controlled by wrapping the children in an `Animated.View`, which is a ## Example - + ```SnackPlayer name=TouchableOpacity%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.65/transforms.md b/website/versioned_docs/version-0.65/transforms.md index 42bb8f02ac1..22da7098d18 100644 --- a/website/versioned_docs/version-0.65/transforms.md +++ b/website/versioned_docs/version-0.65/transforms.md @@ -9,7 +9,7 @@ Transforms are style properties that will help you modify the appearance and pos ## Example - + ```SnackPlayer name=Transforms diff --git a/website/versioned_docs/version-0.65/typescript.md b/website/versioned_docs/version-0.65/typescript.md index 2561347a94c..e3a5d51bdfb 100644 --- a/website/versioned_docs/version-0.65/typescript.md +++ b/website/versioned_docs/version-0.65/typescript.md @@ -25,7 +25,7 @@ npx react-native init MyApp --template react-native-template-typescript You can use [Expo][expo] which has two TypeScript templates: - + ```shell @@ -46,7 +46,7 @@ expo init MyTSProject Or you could use [Ignite][ignite], which also has a TypeScript template: - + ```shell @@ -69,7 +69,7 @@ ignite new MyTSProject 1. Add TypeScript and the types for React Native and Jest to your project. - + ```shell @@ -235,7 +235,7 @@ To use custom path aliases with TypeScript, you need to set the path aliases to 2. Add [`babel-plugin-module-resolver`][bpmr] as a development package to your project: - + ```shell diff --git a/website/versioned_docs/version-0.65/vibration.md b/website/versioned_docs/version-0.65/vibration.md index c66b716ee21..8b30b14902f 100644 --- a/website/versioned_docs/version-0.65/vibration.md +++ b/website/versioned_docs/version-0.65/vibration.md @@ -9,7 +9,7 @@ Vibrates the device. ## Example - + ```SnackPlayer name=Vibration&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.65/view.md b/website/versioned_docs/version-0.65/view.md index 56a28ed3650..806fbc81a7c 100644 --- a/website/versioned_docs/version-0.65/view.md +++ b/website/versioned_docs/version-0.65/view.md @@ -11,7 +11,7 @@ The most fundamental component for building a UI, `View` is a container that sup This example creates a `View` that wraps two boxes with color and a text component in a row with padding. - + ```SnackPlayer name=View%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.66/_integration-with-existing-apps-objc.md b/website/versioned_docs/version-0.66/_integration-with-existing-apps-objc.md index 220245e9761..f2047c69f3b 100644 --- a/website/versioned_docs/version-0.66/_integration-with-existing-apps-objc.md +++ b/website/versioned_docs/version-0.66/_integration-with-existing-apps-objc.md @@ -39,7 +39,7 @@ Next, make sure you have [installed the yarn package manager](https://yarnpkg.co Install the `react` and `react-native` packages. Open a terminal or command prompt, then navigate to the directory with your `package.json` file and run: - + ```shell @@ -62,7 +62,7 @@ This will print a message similar to the following (scroll up in the yarn output This is OK, it means we also need to install React: - + ```shell @@ -346,7 +346,7 @@ Apple has blocked implicit cleartext HTTP resource loading. So we need to add th To run your app, you need to first start the development server. To do this, run the following command in the root directory of your React Native project: - + ```shell diff --git a/website/versioned_docs/version-0.66/accessibilityinfo.md b/website/versioned_docs/version-0.66/accessibilityinfo.md index e357530be5c..8fea3408408 100644 --- a/website/versioned_docs/version-0.66/accessibilityinfo.md +++ b/website/versioned_docs/version-0.66/accessibilityinfo.md @@ -9,7 +9,7 @@ Sometimes it's useful to know whether or not the device has a screen reader that ## Example - + ```SnackPlayer name=AccessibilityInfo%20Function%20Component%20Example&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.66/activityindicator.md b/website/versioned_docs/version-0.66/activityindicator.md index 33e05f8d587..e3a6300d149 100644 --- a/website/versioned_docs/version-0.66/activityindicator.md +++ b/website/versioned_docs/version-0.66/activityindicator.md @@ -9,7 +9,7 @@ Displays a circular loading indicator. ## Example - + ```SnackPlayer name=ActivityIndicator%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.66/alert.md b/website/versioned_docs/version-0.66/alert.md index 5dd4507344d..828c292a0bb 100644 --- a/website/versioned_docs/version-0.66/alert.md +++ b/website/versioned_docs/version-0.66/alert.md @@ -13,7 +13,7 @@ This is an API that works both on Android and iOS and can show static alerts. Al ## Example - + ```SnackPlayer name=Alert%20Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.66/animated.md b/website/versioned_docs/version-0.66/animated.md index e805df991eb..006278d3601 100644 --- a/website/versioned_docs/version-0.66/animated.md +++ b/website/versioned_docs/version-0.66/animated.md @@ -9,7 +9,7 @@ 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://reactjs.org/docs/hooks-reference.html#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. @@ -26,7 +26,7 @@ The core workflow for creating an animation is to create an `Animated.Value`, ho The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim` - + ```SnackPlayer name=Animated diff --git a/website/versioned_docs/version-0.66/animations.md b/website/versioned_docs/version-0.66/animations.md index 02349c7f7fc..c20d2c02564 100644 --- a/website/versioned_docs/version-0.66/animations.md +++ b/website/versioned_docs/version-0.66/animations.md @@ -232,7 +232,7 @@ The following example implements a horizontal scrolling carousel where the scrol #### ScrollView with Animated Event Example - + ```SnackPlayer name=Animated&supportedPlatforms=ios,android @@ -531,7 +531,7 @@ onPanResponderMove={Animated.event( #### PanResponder with Animated Event Example - + ```SnackPlayer name=Animated diff --git a/website/versioned_docs/version-0.66/appearance.md b/website/versioned_docs/version-0.66/appearance.md index fc9663a42c3..69f79d7cf18 100644 --- a/website/versioned_docs/version-0.66/appearance.md +++ b/website/versioned_docs/version-0.66/appearance.md @@ -13,7 +13,7 @@ The `Appearance` module exposes information about the user's appearance preferen #### Developer notes - + diff --git a/website/versioned_docs/version-0.66/appstate.md b/website/versioned_docs/version-0.66/appstate.md index da781a68d11..010855f6b94 100644 --- a/website/versioned_docs/version-0.66/appstate.md +++ b/website/versioned_docs/version-0.66/appstate.md @@ -24,7 +24,7 @@ For more information, see [Apple's documentation](https://developer.apple.com/do To see the current state, you can check `AppState.currentState`, which will be kept up-to-date. However, `currentState` will be null at launch while `AppState` retrieves it over the bridge. - + ```SnackPlayer name=AppState%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.66/backhandler.md b/website/versioned_docs/version-0.66/backhandler.md index f86a5730492..3ca42179119 100644 --- a/website/versioned_docs/version-0.66/backhandler.md +++ b/website/versioned_docs/version-0.66/backhandler.md @@ -45,7 +45,7 @@ BackHandler.addEventListener('hardwareBackPress', function () { The following example implements a scenario where you confirm if the user wants to exit the app: - + ```SnackPlayer name=BackHandler&supportedPlatforms=android @@ -158,7 +158,7 @@ export default App; Additionally `BackHandler.removeEventListener` can also be used to clear the event listener. Ensure the callback has the reference to the same function used in the `addEventListener` call as shown the following example ﹣ - + ```SnackPlayer name=BackHandler&supportedPlatforms=android diff --git a/website/versioned_docs/version-0.66/building-for-tv.md b/website/versioned_docs/version-0.66/building-for-tv.md index 1a66d4a7c04..e9b6cf8eadd 100644 --- a/website/versioned_docs/version-0.66/building-for-tv.md +++ b/website/versioned_docs/version-0.66/building-for-tv.md @@ -8,7 +8,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications. - + diff --git a/website/versioned_docs/version-0.66/datepickerios.md b/website/versioned_docs/version-0.66/datepickerios.md index b20f41ccba4..cb67cbb99cd 100644 --- a/website/versioned_docs/version-0.66/datepickerios.md +++ b/website/versioned_docs/version-0.66/datepickerios.md @@ -11,7 +11,7 @@ Use `DatePickerIOS` to render a date/time picker (selector) on iOS. This is a co ### Example - + ```SnackPlayer name=DatePickerIOS&supportedPlatforms=ios diff --git a/website/versioned_docs/version-0.66/debugging.md b/website/versioned_docs/version-0.66/debugging.md index 610d7f72ffd..43576e461ec 100644 --- a/website/versioned_docs/version-0.66/debugging.md +++ b/website/versioned_docs/version-0.66/debugging.md @@ -89,7 +89,7 @@ You can use [the standalone version of React Developer Tools](https://github.com > Note: Version 4 of `react-devtools` requires `react-native` version 0.62 or higher to work properly. - + ```shell diff --git a/website/versioned_docs/version-0.66/dimensions.md b/website/versioned_docs/version-0.66/dimensions.md index eff7b42fdec..47027e3654f 100644 --- a/website/versioned_docs/version-0.66/dimensions.md +++ b/website/versioned_docs/version-0.66/dimensions.md @@ -24,7 +24,7 @@ If you are targeting foldable devices or devices which can change the screen siz ## Example - + ```SnackPlayer name=Dimensions diff --git a/website/versioned_docs/version-0.66/dynamiccolorios.md b/website/versioned_docs/version-0.66/dynamiccolorios.md index 2cc219ea8c6..610845a24b4 100644 --- a/website/versioned_docs/version-0.66/dynamiccolorios.md +++ b/website/versioned_docs/version-0.66/dynamiccolorios.md @@ -22,7 +22,7 @@ At runtime, the system will choose which of the colors to display depending on t #### Developer notes - + diff --git a/website/versioned_docs/version-0.66/getting-started.md b/website/versioned_docs/version-0.66/getting-started.md index eff7332b5eb..64c40af9b38 100644 --- a/website/versioned_docs/version-0.66/getting-started.md +++ b/website/versioned_docs/version-0.66/getting-started.md @@ -14,12 +14,12 @@ This page will help you install and build your first React Native app. **If you are already familiar with mobile development**, you may want to use React Native CLI. It requires Xcode or Android Studio to get started. If you already have one of these tools installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them. - + Assuming that you have [Node 12 LTS](https://nodejs.org/en/download/) or greater installed, you can use npm to install the Expo CLI command line utility: - + ```shell @@ -38,7 +38,7 @@ yarn global add expo-cli Then run the following commands to create a new React Native project called "AwesomeProject": - + ```shell @@ -115,12 +115,12 @@ The instructions are a bit different depending on your development operating sys #### Development OS - + #### Target OS - + [//]: # 'macOS, Android' @@ -142,7 +142,7 @@ The instructions are a bit different depending on your development operating sys #### Target OS - + [//]: # 'Windows, Android' @@ -166,7 +166,7 @@ The instructions are a bit different depending on your development operating sys #### Target OS - + [//]: # 'Linux, Android' diff --git a/website/versioned_docs/version-0.66/image-style-props.md b/website/versioned_docs/version-0.66/image-style-props.md index cae5d3a29ee..41212e7b14a 100644 --- a/website/versioned_docs/version-0.66/image-style-props.md +++ b/website/versioned_docs/version-0.66/image-style-props.md @@ -9,7 +9,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ### Image Resize Mode - + ```SnackPlayer name=Image%20Resize%20Modes%20Function%20Component%20Example @@ -182,7 +182,7 @@ export default DisplayAnImageWithStyle; ### Image Border - + ```SnackPlayer name=Style%20BorderWidth%20and%20BorderColor%20Function%20Component%20Example @@ -265,7 +265,7 @@ export default DisplayAnImageWithStyle; ### Image Border Radius - + ```SnackPlayer name=Style%20Border%20Radius%20Function%20Component%20Example @@ -416,7 +416,7 @@ export default DisplayAnImageWithStyle; ### Image Tint - + ```SnackPlayer name=Style%20tintColor%20Function%20Component diff --git a/website/versioned_docs/version-0.66/image.md b/website/versioned_docs/version-0.66/image.md index e9aef7c6a1a..e18aa231532 100644 --- a/website/versioned_docs/version-0.66/image.md +++ b/website/versioned_docs/version-0.66/image.md @@ -13,7 +13,7 @@ This example shows fetching and displaying an image from local storage as well a ## Examples - + ```SnackPlayer name=Function%20Component%20Example @@ -112,7 +112,7 @@ export default DisplayAnImage; You can also add `style` to an image: - + ```SnackPlayer name=Function%20Component%20Example diff --git a/website/versioned_docs/version-0.66/integration-with-existing-apps.md b/website/versioned_docs/version-0.66/integration-with-existing-apps.md index 803a6dfe6e3..0d147e07a3a 100644 --- a/website/versioned_docs/version-0.66/integration-with-existing-apps.md +++ b/website/versioned_docs/version-0.66/integration-with-existing-apps.md @@ -12,7 +12,7 @@ React Native is great when you are starting a new mobile app from scratch. Howev The specific steps are different depending on what platform you're targeting. - + diff --git a/website/versioned_docs/version-0.66/intro-react.md b/website/versioned_docs/version-0.66/intro-react.md index 50ab870a5aa..66f0b00dac5 100644 --- a/website/versioned_docs/version-0.66/intro-react.md +++ b/website/versioned_docs/version-0.66/intro-react.md @@ -21,7 +21,7 @@ If you want to dig deeper, we encourage you to check out [React’s official doc The rest of this introduction to React uses cats in its examples: friendly, approachable creatures that need names and a cafe to work in. Here is your very first Cat component: - + ```SnackPlayer name=Your%20Cat @@ -205,7 +205,7 @@ export default Cat; #### Developer notes - + @@ -315,7 +315,7 @@ While you can think of props as arguments you use to configure how components re The following example takes place in a cat cafe where two hungry cats are waiting to be fed. Their hunger, which we expect to change over time (unlike their names), is stored as state. To feed the cats, press their buttons—which will update their state. - + You can add state to a component by calling [React’s `useState` Hook](https://reactjs.org/docs/hooks-state.html). A Hook is a kind of function that lets you “hook into” React features. For example, `useState` is a Hook that lets you add state to function components. You can learn more about [other kinds of Hooks in the React documentation.](https://reactjs.org/docs/hooks-intro.html) diff --git a/website/versioned_docs/version-0.66/introduction.md b/website/versioned_docs/version-0.66/introduction.md index f77b91adf9b..1c924ccec0d 100644 --- a/website/versioned_docs/version-0.66/introduction.md +++ b/website/versioned_docs/version-0.66/introduction.md @@ -56,7 +56,7 @@ With React, you can make components using either classes or functions. Originall [Hooks were introduced in React Native 0.59.](/blog/2019/03/12/releasing-react-native-059), and because Hooks are the future-facing way to write your React components, we wrote this introduction using function component examples. Where useful, we also cover class components under a toggle like so: - + ```SnackPlayer name=Hello%20World%20Function%20Component @@ -111,7 +111,7 @@ You can find more examples of class components in [previous versions of this doc People from many different development backgrounds are learning React Native. You may have experience with a range of technologies, from web to Android to iOS and more. We try to write for developers from all backgrounds. Sometimes we provide explanations specific to one platform or another like so: - + diff --git a/website/versioned_docs/version-0.66/keyboard.md b/website/versioned_docs/version-0.66/keyboard.md index caea73c8b4e..08051d5a086 100644 --- a/website/versioned_docs/version-0.66/keyboard.md +++ b/website/versioned_docs/version-0.66/keyboard.md @@ -11,7 +11,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it. - + ```SnackPlayer name=Keyboard%20Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.66/layoutanimation.md b/website/versioned_docs/version-0.66/layoutanimation.md index b0a6014e0af..bf2a819acfc 100644 --- a/website/versioned_docs/version-0.66/layoutanimation.md +++ b/website/versioned_docs/version-0.66/layoutanimation.md @@ -120,7 +120,7 @@ Helper that creates an object (with `create`, `update`, and `delete` fields) to **Example:** - + ```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios @@ -338,7 +338,7 @@ Calls `configureNext()` with `Presets.spring`. **Example:** - + ```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.66/libraries.md b/website/versioned_docs/version-0.66/libraries.md index 03bd6e439aa..de15e95dbd2 100644 --- a/website/versioned_docs/version-0.66/libraries.md +++ b/website/versioned_docs/version-0.66/libraries.md @@ -22,7 +22,7 @@ If you have Node.js installed on your computer then you already have the npm CLI To install a library in your project, navigate to your project directory in your terminal and run the installation command. Let's try this with `react-native-webview`: - + ```shell diff --git a/website/versioned_docs/version-0.66/linking.md b/website/versioned_docs/version-0.66/linking.md index 8c2479c95a9..20d18ba6f20 100644 --- a/website/versioned_docs/version-0.66/linking.md +++ b/website/versioned_docs/version-0.66/linking.md @@ -37,7 +37,7 @@ As mentioned in the introduction, there are some URL schemes for core functional If you want to enable deep links in your app, please read the below guide: - + > For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters). diff --git a/website/versioned_docs/version-0.66/modal.md b/website/versioned_docs/version-0.66/modal.md index c46356eada3..2f91af3b054 100644 --- a/website/versioned_docs/version-0.66/modal.md +++ b/website/versioned_docs/version-0.66/modal.md @@ -9,7 +9,7 @@ The Modal component is a basic way to present content above an enclosing view. ## Example - + ```SnackPlayer name=Modal&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.66/network.md b/website/versioned_docs/version-0.66/network.md index 007662031c7..e2379eafe33 100644 --- a/website/versioned_docs/version-0.66/network.md +++ b/website/versioned_docs/version-0.66/network.md @@ -74,7 +74,7 @@ const getMoviesFromApiAsync = async () => { Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently. - + ```SnackPlayer name=Fetch%20Example diff --git a/website/versioned_docs/version-0.66/panresponder.md b/website/versioned_docs/version-0.66/panresponder.md index e075ef77a98..c70a825625e 100644 --- a/website/versioned_docs/version-0.66/panresponder.md +++ b/website/versioned_docs/version-0.66/panresponder.md @@ -80,7 +80,7 @@ const ExampleComponent = () => { `PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen - + ```SnackPlayer name=PanResponder diff --git a/website/versioned_docs/version-0.66/permissionsandroid.md b/website/versioned_docs/version-0.66/permissionsandroid.md index 4ecc8ea05e9..2542c31b54b 100644 --- a/website/versioned_docs/version-0.66/permissionsandroid.md +++ b/website/versioned_docs/version-0.66/permissionsandroid.md @@ -20,7 +20,7 @@ If a user has previously turned off a permission that you prompt for, the OS wil ### Example - + ```SnackPlayer name=PermissionsAndroid%20Example&supportedPlatforms=android diff --git a/website/versioned_docs/version-0.66/platformcolor.md b/website/versioned_docs/version-0.66/platformcolor.md index d5f97d4009b..83e0846fe93 100644 --- a/website/versioned_docs/version-0.66/platformcolor.md +++ b/website/versioned_docs/version-0.66/platformcolor.md @@ -32,7 +32,7 @@ For a full list of the types of system colors supported, see: #### Developer notes - + diff --git a/website/versioned_docs/version-0.66/running-on-device.md b/website/versioned_docs/version-0.66/running-on-device.md index d64d5500ef3..550fe978e87 100644 --- a/website/versioned_docs/version-0.66/running-on-device.md +++ b/website/versioned_docs/version-0.66/running-on-device.md @@ -10,14 +10,14 @@ It's always a good idea to test your app on an actual device before releasing it If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app—but in order to build and run your app on a device, you will need to eject and install the native code dependencies from the [environment setup guide](environment-setup). - + ## Running your app on Android devices #### Development OS - + [//]: # 'macOS, Android' @@ -312,7 +312,7 @@ You have built a great app using React Native, and you are now itching to releas #### Development OS - + [//]: # 'macOS, iOS' diff --git a/website/versioned_docs/version-0.66/sectionlist.md b/website/versioned_docs/version-0.66/sectionlist.md index a57f6ca0843..fe559c4a921 100644 --- a/website/versioned_docs/version-0.66/sectionlist.md +++ b/website/versioned_docs/version-0.66/sectionlist.md @@ -22,7 +22,7 @@ If you don't need section support and want a simpler interface, use [` ## Example - + ```SnackPlayer name=SectionList%20Example diff --git a/website/versioned_docs/version-0.66/security.md b/website/versioned_docs/version-0.66/security.md index 79c7333e42d..78700c67949 100644 --- a/website/versioned_docs/version-0.66/security.md +++ b/website/versioned_docs/version-0.66/security.md @@ -34,7 +34,7 @@ If you must have an API key or a secret to access some resource from your app, t #### Developer Notes - + diff --git a/website/versioned_docs/version-0.66/share.md b/website/versioned_docs/version-0.66/share.md index 0d1a2b38ff2..5a14a74ada2 100644 --- a/website/versioned_docs/version-0.66/share.md +++ b/website/versioned_docs/version-0.66/share.md @@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ## Example - + ```SnackPlayer name=Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.66/systrace.md b/website/versioned_docs/version-0.66/systrace.md index 0a8e33897fe..a2e44ca5d79 100644 --- a/website/versioned_docs/version-0.66/systrace.md +++ b/website/versioned_docs/version-0.66/systrace.md @@ -11,7 +11,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con `Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler. - + ```SnackPlayer name=Systrace%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.66/text.md b/website/versioned_docs/version-0.66/text.md index 494f962fe99..56e4f63084d 100644 --- a/website/versioned_docs/version-0.66/text.md +++ b/website/versioned_docs/version-0.66/text.md @@ -11,7 +11,7 @@ A React component for displaying text. In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines: - + ```SnackPlayer name=Text%20Functional%20Component%20Example diff --git a/website/versioned_docs/version-0.66/touchablehighlight.md b/website/versioned_docs/version-0.66/touchablehighlight.md index ca9fcca8eda..69c2e95cddd 100644 --- a/website/versioned_docs/version-0.66/touchablehighlight.md +++ b/website/versioned_docs/version-0.66/touchablehighlight.md @@ -32,7 +32,7 @@ function MyComponent(props) { ## Example - + ```SnackPlayer name=TouchableHighlight%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.66/touchableopacity.md b/website/versioned_docs/version-0.66/touchableopacity.md index 28f8e9998aa..a2a14b7341d 100644 --- a/website/versioned_docs/version-0.66/touchableopacity.md +++ b/website/versioned_docs/version-0.66/touchableopacity.md @@ -13,7 +13,7 @@ Opacity is controlled by wrapping the children in an `Animated.View`, which is a ## Example - + ```SnackPlayer name=TouchableOpacity%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.66/transforms.md b/website/versioned_docs/version-0.66/transforms.md index 42bb8f02ac1..22da7098d18 100644 --- a/website/versioned_docs/version-0.66/transforms.md +++ b/website/versioned_docs/version-0.66/transforms.md @@ -9,7 +9,7 @@ Transforms are style properties that will help you modify the appearance and pos ## Example - + ```SnackPlayer name=Transforms diff --git a/website/versioned_docs/version-0.66/typescript.md b/website/versioned_docs/version-0.66/typescript.md index 2561347a94c..e3a5d51bdfb 100644 --- a/website/versioned_docs/version-0.66/typescript.md +++ b/website/versioned_docs/version-0.66/typescript.md @@ -25,7 +25,7 @@ npx react-native init MyApp --template react-native-template-typescript You can use [Expo][expo] which has two TypeScript templates: - + ```shell @@ -46,7 +46,7 @@ expo init MyTSProject Or you could use [Ignite][ignite], which also has a TypeScript template: - + ```shell @@ -69,7 +69,7 @@ ignite new MyTSProject 1. Add TypeScript and the types for React Native and Jest to your project. - + ```shell @@ -235,7 +235,7 @@ To use custom path aliases with TypeScript, you need to set the path aliases to 2. Add [`babel-plugin-module-resolver`][bpmr] as a development package to your project: - + ```shell diff --git a/website/versioned_docs/version-0.66/vibration.md b/website/versioned_docs/version-0.66/vibration.md index c66b716ee21..8b30b14902f 100644 --- a/website/versioned_docs/version-0.66/vibration.md +++ b/website/versioned_docs/version-0.66/vibration.md @@ -9,7 +9,7 @@ Vibrates the device. ## Example - + ```SnackPlayer name=Vibration&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.66/view.md b/website/versioned_docs/version-0.66/view.md index 2a4e418cd90..1093488b925 100644 --- a/website/versioned_docs/version-0.66/view.md +++ b/website/versioned_docs/version-0.66/view.md @@ -11,7 +11,7 @@ The most fundamental component for building a UI, `View` is a container that sup This example creates a `View` that wraps two boxes with color and a text component in a row with padding. - + ```SnackPlayer name=View%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.67/_integration-with-existing-apps-objc.md b/website/versioned_docs/version-0.67/_integration-with-existing-apps-objc.md index 220245e9761..f2047c69f3b 100644 --- a/website/versioned_docs/version-0.67/_integration-with-existing-apps-objc.md +++ b/website/versioned_docs/version-0.67/_integration-with-existing-apps-objc.md @@ -39,7 +39,7 @@ Next, make sure you have [installed the yarn package manager](https://yarnpkg.co Install the `react` and `react-native` packages. Open a terminal or command prompt, then navigate to the directory with your `package.json` file and run: - + ```shell @@ -62,7 +62,7 @@ This will print a message similar to the following (scroll up in the yarn output This is OK, it means we also need to install React: - + ```shell @@ -346,7 +346,7 @@ Apple has blocked implicit cleartext HTTP resource loading. So we need to add th To run your app, you need to first start the development server. To do this, run the following command in the root directory of your React Native project: - + ```shell diff --git a/website/versioned_docs/version-0.67/accessibilityinfo.md b/website/versioned_docs/version-0.67/accessibilityinfo.md index e357530be5c..8fea3408408 100644 --- a/website/versioned_docs/version-0.67/accessibilityinfo.md +++ b/website/versioned_docs/version-0.67/accessibilityinfo.md @@ -9,7 +9,7 @@ Sometimes it's useful to know whether or not the device has a screen reader that ## Example - + ```SnackPlayer name=AccessibilityInfo%20Function%20Component%20Example&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.67/activityindicator.md b/website/versioned_docs/version-0.67/activityindicator.md index 33e05f8d587..e3a6300d149 100644 --- a/website/versioned_docs/version-0.67/activityindicator.md +++ b/website/versioned_docs/version-0.67/activityindicator.md @@ -9,7 +9,7 @@ Displays a circular loading indicator. ## Example - + ```SnackPlayer name=ActivityIndicator%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.67/alert.md b/website/versioned_docs/version-0.67/alert.md index 24dec2eac18..68aeaa58283 100644 --- a/website/versioned_docs/version-0.67/alert.md +++ b/website/versioned_docs/version-0.67/alert.md @@ -13,7 +13,7 @@ This is an API that works both on Android and iOS and can show static alerts. Al ## Example - + ```SnackPlayer name=Alert%20Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.67/animated.md b/website/versioned_docs/version-0.67/animated.md index e805df991eb..006278d3601 100644 --- a/website/versioned_docs/version-0.67/animated.md +++ b/website/versioned_docs/version-0.67/animated.md @@ -9,7 +9,7 @@ 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://reactjs.org/docs/hooks-reference.html#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. @@ -26,7 +26,7 @@ The core workflow for creating an animation is to create an `Animated.Value`, ho The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim` - + ```SnackPlayer name=Animated diff --git a/website/versioned_docs/version-0.67/animations.md b/website/versioned_docs/version-0.67/animations.md index 55165d381a7..52c7df5ad60 100644 --- a/website/versioned_docs/version-0.67/animations.md +++ b/website/versioned_docs/version-0.67/animations.md @@ -232,7 +232,7 @@ The following example implements a horizontal scrolling carousel where the scrol #### ScrollView with Animated Event Example - + ```SnackPlayer name=Animated&supportedPlatforms=ios,android @@ -531,7 +531,7 @@ onPanResponderMove={Animated.event( #### PanResponder with Animated Event Example - + ```SnackPlayer name=Animated diff --git a/website/versioned_docs/version-0.67/appearance.md b/website/versioned_docs/version-0.67/appearance.md index fc9663a42c3..69f79d7cf18 100644 --- a/website/versioned_docs/version-0.67/appearance.md +++ b/website/versioned_docs/version-0.67/appearance.md @@ -13,7 +13,7 @@ The `Appearance` module exposes information about the user's appearance preferen #### Developer notes - + diff --git a/website/versioned_docs/version-0.67/appstate.md b/website/versioned_docs/version-0.67/appstate.md index 9ba3b7d3533..276895f6d3a 100644 --- a/website/versioned_docs/version-0.67/appstate.md +++ b/website/versioned_docs/version-0.67/appstate.md @@ -24,7 +24,7 @@ For more information, see [Apple's documentation](https://developer.apple.com/do To see the current state, you can check `AppState.currentState`, which will be kept up-to-date. However, `currentState` will be null at launch while `AppState` retrieves it over the bridge. - + ```SnackPlayer name=AppState%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.67/backhandler.md b/website/versioned_docs/version-0.67/backhandler.md index f86a5730492..3ca42179119 100644 --- a/website/versioned_docs/version-0.67/backhandler.md +++ b/website/versioned_docs/version-0.67/backhandler.md @@ -45,7 +45,7 @@ BackHandler.addEventListener('hardwareBackPress', function () { The following example implements a scenario where you confirm if the user wants to exit the app: - + ```SnackPlayer name=BackHandler&supportedPlatforms=android @@ -158,7 +158,7 @@ export default App; Additionally `BackHandler.removeEventListener` can also be used to clear the event listener. Ensure the callback has the reference to the same function used in the `addEventListener` call as shown the following example ﹣ - + ```SnackPlayer name=BackHandler&supportedPlatforms=android diff --git a/website/versioned_docs/version-0.67/building-for-tv.md b/website/versioned_docs/version-0.67/building-for-tv.md index 1a66d4a7c04..e9b6cf8eadd 100644 --- a/website/versioned_docs/version-0.67/building-for-tv.md +++ b/website/versioned_docs/version-0.67/building-for-tv.md @@ -8,7 +8,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications. - + diff --git a/website/versioned_docs/version-0.67/datepickerios.md b/website/versioned_docs/version-0.67/datepickerios.md index b20f41ccba4..cb67cbb99cd 100644 --- a/website/versioned_docs/version-0.67/datepickerios.md +++ b/website/versioned_docs/version-0.67/datepickerios.md @@ -11,7 +11,7 @@ Use `DatePickerIOS` to render a date/time picker (selector) on iOS. This is a co ### Example - + ```SnackPlayer name=DatePickerIOS&supportedPlatforms=ios diff --git a/website/versioned_docs/version-0.67/debugging.md b/website/versioned_docs/version-0.67/debugging.md index 610d7f72ffd..43576e461ec 100644 --- a/website/versioned_docs/version-0.67/debugging.md +++ b/website/versioned_docs/version-0.67/debugging.md @@ -89,7 +89,7 @@ You can use [the standalone version of React Developer Tools](https://github.com > Note: Version 4 of `react-devtools` requires `react-native` version 0.62 or higher to work properly. - + ```shell diff --git a/website/versioned_docs/version-0.67/dimensions.md b/website/versioned_docs/version-0.67/dimensions.md index eff7b42fdec..47027e3654f 100644 --- a/website/versioned_docs/version-0.67/dimensions.md +++ b/website/versioned_docs/version-0.67/dimensions.md @@ -24,7 +24,7 @@ If you are targeting foldable devices or devices which can change the screen siz ## Example - + ```SnackPlayer name=Dimensions diff --git a/website/versioned_docs/version-0.67/dynamiccolorios.md b/website/versioned_docs/version-0.67/dynamiccolorios.md index 2cc219ea8c6..610845a24b4 100644 --- a/website/versioned_docs/version-0.67/dynamiccolorios.md +++ b/website/versioned_docs/version-0.67/dynamiccolorios.md @@ -22,7 +22,7 @@ At runtime, the system will choose which of the colors to display depending on t #### Developer notes - + diff --git a/website/versioned_docs/version-0.67/getting-started.md b/website/versioned_docs/version-0.67/getting-started.md index eff7332b5eb..64c40af9b38 100644 --- a/website/versioned_docs/version-0.67/getting-started.md +++ b/website/versioned_docs/version-0.67/getting-started.md @@ -14,12 +14,12 @@ This page will help you install and build your first React Native app. **If you are already familiar with mobile development**, you may want to use React Native CLI. It requires Xcode or Android Studio to get started. If you already have one of these tools installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them. - + Assuming that you have [Node 12 LTS](https://nodejs.org/en/download/) or greater installed, you can use npm to install the Expo CLI command line utility: - + ```shell @@ -38,7 +38,7 @@ yarn global add expo-cli Then run the following commands to create a new React Native project called "AwesomeProject": - + ```shell @@ -115,12 +115,12 @@ The instructions are a bit different depending on your development operating sys #### Development OS - + #### Target OS - + [//]: # 'macOS, Android' @@ -142,7 +142,7 @@ The instructions are a bit different depending on your development operating sys #### Target OS - + [//]: # 'Windows, Android' @@ -166,7 +166,7 @@ The instructions are a bit different depending on your development operating sys #### Target OS - + [//]: # 'Linux, Android' diff --git a/website/versioned_docs/version-0.67/image-style-props.md b/website/versioned_docs/version-0.67/image-style-props.md index cae5d3a29ee..41212e7b14a 100644 --- a/website/versioned_docs/version-0.67/image-style-props.md +++ b/website/versioned_docs/version-0.67/image-style-props.md @@ -9,7 +9,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ### Image Resize Mode - + ```SnackPlayer name=Image%20Resize%20Modes%20Function%20Component%20Example @@ -182,7 +182,7 @@ export default DisplayAnImageWithStyle; ### Image Border - + ```SnackPlayer name=Style%20BorderWidth%20and%20BorderColor%20Function%20Component%20Example @@ -265,7 +265,7 @@ export default DisplayAnImageWithStyle; ### Image Border Radius - + ```SnackPlayer name=Style%20Border%20Radius%20Function%20Component%20Example @@ -416,7 +416,7 @@ export default DisplayAnImageWithStyle; ### Image Tint - + ```SnackPlayer name=Style%20tintColor%20Function%20Component diff --git a/website/versioned_docs/version-0.67/image.md b/website/versioned_docs/version-0.67/image.md index c30ebfc7274..c51631a028f 100644 --- a/website/versioned_docs/version-0.67/image.md +++ b/website/versioned_docs/version-0.67/image.md @@ -13,7 +13,7 @@ This example shows fetching and displaying an image from local storage as well a ## Examples - + ```SnackPlayer name=Function%20Component%20Example @@ -112,7 +112,7 @@ export default DisplayAnImage; You can also add `style` to an image: - + ```SnackPlayer name=Function%20Component%20Example diff --git a/website/versioned_docs/version-0.67/integration-with-android-fragment.md b/website/versioned_docs/version-0.67/integration-with-android-fragment.md index ba3a9241e00..7e17e89808e 100644 --- a/website/versioned_docs/version-0.67/integration-with-android-fragment.md +++ b/website/versioned_docs/version-0.67/integration-with-android-fragment.md @@ -19,7 +19,7 @@ You will need to implement the `ReactApplication` interface in your main Applica Ensure your main Application class implements ReactApplication: - + ```kotlin @@ -38,7 +38,7 @@ public class MyReactApplication extends Application implements ReactApplication Override the required methods `getUseDeveloperSupport`, `getPackages` and `getReactNativeHost`: - + ```kotlin @@ -96,7 +96,7 @@ public class MyReactApplication extends Application implements ReactApplication If you are using Android Studio, use Alt + Enter to add all missing imports in your class. Alternatively these are the required imports to include manually: - + ```kotlin @@ -163,7 +163,7 @@ Now in your Activity class (e.g. `MainActivity.java` or `MainActivity.kt`) you n Add the button field to the top of your Activity: - + ```kotlin @@ -182,7 +182,7 @@ private Button mButton; Update your Activity's `onCreate` method as follows: - + ```kotlin @@ -241,7 +241,7 @@ If you are using a starter kit for React Native, replace the "HelloWorld" string Add the `getLaunchOptions` method which will allow you to pass props through to your component. This is optional and you can remove `setLaunchOptions` if you don't need to pass any props. - + ```kotlin @@ -267,7 +267,7 @@ private Bundle getLaunchOptions(String message) { Add all missing imports in your Activity class. Be careful to use your package’s BuildConfig and not the one from the facebook package! Alternatively these are the required imports to include manually: - + ```kotlin diff --git a/website/versioned_docs/version-0.67/integration-with-existing-apps.md b/website/versioned_docs/version-0.67/integration-with-existing-apps.md index 803a6dfe6e3..0d147e07a3a 100644 --- a/website/versioned_docs/version-0.67/integration-with-existing-apps.md +++ b/website/versioned_docs/version-0.67/integration-with-existing-apps.md @@ -12,7 +12,7 @@ React Native is great when you are starting a new mobile app from scratch. Howev The specific steps are different depending on what platform you're targeting. - + diff --git a/website/versioned_docs/version-0.67/intro-react.md b/website/versioned_docs/version-0.67/intro-react.md index 7733ec65547..2b990cb3d44 100644 --- a/website/versioned_docs/version-0.67/intro-react.md +++ b/website/versioned_docs/version-0.67/intro-react.md @@ -21,7 +21,7 @@ If you want to dig deeper, we encourage you to check out [React’s official doc The rest of this introduction to React uses cats in its examples: friendly, approachable creatures that need names and a cafe to work in. Here is your very first Cat component: - + ```SnackPlayer name=Your%20Cat @@ -205,7 +205,7 @@ export default Cat; #### Developer notes - + @@ -315,7 +315,7 @@ While you can think of props as arguments you use to configure how components re The following example takes place in a cat cafe where two hungry cats are waiting to be fed. Their hunger, which we expect to change over time (unlike their names), is stored as state. To feed the cats, press their buttons—which will update their state. - + You can add state to a component by calling [React’s `useState` Hook](https://reactjs.org/docs/hooks-state.html). A Hook is a kind of function that lets you “hook into” React features. For example, `useState` is a Hook that lets you add state to function components. You can learn more about [other kinds of Hooks in the React documentation.](https://reactjs.org/docs/hooks-intro.html) diff --git a/website/versioned_docs/version-0.67/introduction.md b/website/versioned_docs/version-0.67/introduction.md index f77b91adf9b..1c924ccec0d 100644 --- a/website/versioned_docs/version-0.67/introduction.md +++ b/website/versioned_docs/version-0.67/introduction.md @@ -56,7 +56,7 @@ With React, you can make components using either classes or functions. Originall [Hooks were introduced in React Native 0.59.](/blog/2019/03/12/releasing-react-native-059), and because Hooks are the future-facing way to write your React components, we wrote this introduction using function component examples. Where useful, we also cover class components under a toggle like so: - + ```SnackPlayer name=Hello%20World%20Function%20Component @@ -111,7 +111,7 @@ You can find more examples of class components in [previous versions of this doc People from many different development backgrounds are learning React Native. You may have experience with a range of technologies, from web to Android to iOS and more. We try to write for developers from all backgrounds. Sometimes we provide explanations specific to one platform or another like so: - + diff --git a/website/versioned_docs/version-0.67/keyboard.md b/website/versioned_docs/version-0.67/keyboard.md index caea73c8b4e..08051d5a086 100644 --- a/website/versioned_docs/version-0.67/keyboard.md +++ b/website/versioned_docs/version-0.67/keyboard.md @@ -11,7 +11,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it. - + ```SnackPlayer name=Keyboard%20Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.67/layoutanimation.md b/website/versioned_docs/version-0.67/layoutanimation.md index b0a6014e0af..bf2a819acfc 100644 --- a/website/versioned_docs/version-0.67/layoutanimation.md +++ b/website/versioned_docs/version-0.67/layoutanimation.md @@ -120,7 +120,7 @@ Helper that creates an object (with `create`, `update`, and `delete` fields) to **Example:** - + ```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios @@ -338,7 +338,7 @@ Calls `configureNext()` with `Presets.spring`. **Example:** - + ```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.67/libraries.md b/website/versioned_docs/version-0.67/libraries.md index 03bd6e439aa..de15e95dbd2 100644 --- a/website/versioned_docs/version-0.67/libraries.md +++ b/website/versioned_docs/version-0.67/libraries.md @@ -22,7 +22,7 @@ If you have Node.js installed on your computer then you already have the npm CLI To install a library in your project, navigate to your project directory in your terminal and run the installation command. Let's try this with `react-native-webview`: - + ```shell diff --git a/website/versioned_docs/version-0.67/linking.md b/website/versioned_docs/version-0.67/linking.md index fd117144aa8..5a82e4ffa07 100644 --- a/website/versioned_docs/version-0.67/linking.md +++ b/website/versioned_docs/version-0.67/linking.md @@ -37,7 +37,7 @@ As mentioned in the introduction, there are some URL schemes for core functional If you want to enable deep links in your app, please read the below guide: - + > For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters). diff --git a/website/versioned_docs/version-0.67/modal.md b/website/versioned_docs/version-0.67/modal.md index bc461ae7af9..ebca2c77664 100644 --- a/website/versioned_docs/version-0.67/modal.md +++ b/website/versioned_docs/version-0.67/modal.md @@ -9,7 +9,7 @@ The Modal component is a basic way to present content above an enclosing view. ## Example - + ```SnackPlayer name=Modal&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.67/network.md b/website/versioned_docs/version-0.67/network.md index 007662031c7..e2379eafe33 100644 --- a/website/versioned_docs/version-0.67/network.md +++ b/website/versioned_docs/version-0.67/network.md @@ -74,7 +74,7 @@ const getMoviesFromApiAsync = async () => { Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently. - + ```SnackPlayer name=Fetch%20Example diff --git a/website/versioned_docs/version-0.67/panresponder.md b/website/versioned_docs/version-0.67/panresponder.md index e075ef77a98..c70a825625e 100644 --- a/website/versioned_docs/version-0.67/panresponder.md +++ b/website/versioned_docs/version-0.67/panresponder.md @@ -80,7 +80,7 @@ const ExampleComponent = () => { `PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen - + ```SnackPlayer name=PanResponder diff --git a/website/versioned_docs/version-0.67/permissionsandroid.md b/website/versioned_docs/version-0.67/permissionsandroid.md index 27567263c1c..6e799247c40 100644 --- a/website/versioned_docs/version-0.67/permissionsandroid.md +++ b/website/versioned_docs/version-0.67/permissionsandroid.md @@ -20,7 +20,7 @@ If a user has previously turned off a permission that you prompt for, the OS wil ### Example - + ```SnackPlayer name=PermissionsAndroid%20Example&supportedPlatforms=android diff --git a/website/versioned_docs/version-0.67/platformcolor.md b/website/versioned_docs/version-0.67/platformcolor.md index d5f97d4009b..83e0846fe93 100644 --- a/website/versioned_docs/version-0.67/platformcolor.md +++ b/website/versioned_docs/version-0.67/platformcolor.md @@ -32,7 +32,7 @@ For a full list of the types of system colors supported, see: #### Developer notes - + diff --git a/website/versioned_docs/version-0.67/running-on-device.md b/website/versioned_docs/version-0.67/running-on-device.md index 3982a161091..445711bc6f8 100644 --- a/website/versioned_docs/version-0.67/running-on-device.md +++ b/website/versioned_docs/version-0.67/running-on-device.md @@ -10,14 +10,14 @@ It's always a good idea to test your app on an actual device before releasing it If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app—but in order to build and run your app on a device, you will need to eject and install the native code dependencies from the [environment setup guide](environment-setup). - + ## Running your app on Android devices #### Development OS - + [//]: # 'macOS, Android' @@ -310,7 +310,7 @@ You have built a great app using React Native, and you are now itching to releas #### Development OS - + [//]: # 'macOS, iOS' diff --git a/website/versioned_docs/version-0.67/sectionlist.md b/website/versioned_docs/version-0.67/sectionlist.md index 2469a8c3167..c36017163c3 100644 --- a/website/versioned_docs/version-0.67/sectionlist.md +++ b/website/versioned_docs/version-0.67/sectionlist.md @@ -22,7 +22,7 @@ If you don't need section support and want a simpler interface, use [` ## Example - + ```SnackPlayer name=SectionList%20Example diff --git a/website/versioned_docs/version-0.67/security.md b/website/versioned_docs/version-0.67/security.md index 79c7333e42d..78700c67949 100644 --- a/website/versioned_docs/version-0.67/security.md +++ b/website/versioned_docs/version-0.67/security.md @@ -34,7 +34,7 @@ If you must have an API key or a secret to access some resource from your app, t #### Developer Notes - + diff --git a/website/versioned_docs/version-0.67/share.md b/website/versioned_docs/version-0.67/share.md index 0d1a2b38ff2..5a14a74ada2 100644 --- a/website/versioned_docs/version-0.67/share.md +++ b/website/versioned_docs/version-0.67/share.md @@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ## Example - + ```SnackPlayer name=Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.67/systrace.md b/website/versioned_docs/version-0.67/systrace.md index 0a8e33897fe..a2e44ca5d79 100644 --- a/website/versioned_docs/version-0.67/systrace.md +++ b/website/versioned_docs/version-0.67/systrace.md @@ -11,7 +11,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con `Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler. - + ```SnackPlayer name=Systrace%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.67/text.md b/website/versioned_docs/version-0.67/text.md index 46b9211a0a8..02f6c015743 100644 --- a/website/versioned_docs/version-0.67/text.md +++ b/website/versioned_docs/version-0.67/text.md @@ -11,7 +11,7 @@ A React component for displaying text. In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines: - + ```SnackPlayer name=Text%20Functional%20Component%20Example diff --git a/website/versioned_docs/version-0.67/touchablehighlight.md b/website/versioned_docs/version-0.67/touchablehighlight.md index ca9fcca8eda..69c2e95cddd 100644 --- a/website/versioned_docs/version-0.67/touchablehighlight.md +++ b/website/versioned_docs/version-0.67/touchablehighlight.md @@ -32,7 +32,7 @@ function MyComponent(props) { ## Example - + ```SnackPlayer name=TouchableHighlight%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.67/touchableopacity.md b/website/versioned_docs/version-0.67/touchableopacity.md index 28f8e9998aa..a2a14b7341d 100644 --- a/website/versioned_docs/version-0.67/touchableopacity.md +++ b/website/versioned_docs/version-0.67/touchableopacity.md @@ -13,7 +13,7 @@ Opacity is controlled by wrapping the children in an `Animated.View`, which is a ## Example - + ```SnackPlayer name=TouchableOpacity%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.67/transforms.md b/website/versioned_docs/version-0.67/transforms.md index 42bb8f02ac1..22da7098d18 100644 --- a/website/versioned_docs/version-0.67/transforms.md +++ b/website/versioned_docs/version-0.67/transforms.md @@ -9,7 +9,7 @@ Transforms are style properties that will help you modify the appearance and pos ## Example - + ```SnackPlayer name=Transforms diff --git a/website/versioned_docs/version-0.67/typescript.md b/website/versioned_docs/version-0.67/typescript.md index 2561347a94c..e3a5d51bdfb 100644 --- a/website/versioned_docs/version-0.67/typescript.md +++ b/website/versioned_docs/version-0.67/typescript.md @@ -25,7 +25,7 @@ npx react-native init MyApp --template react-native-template-typescript You can use [Expo][expo] which has two TypeScript templates: - + ```shell @@ -46,7 +46,7 @@ expo init MyTSProject Or you could use [Ignite][ignite], which also has a TypeScript template: - + ```shell @@ -69,7 +69,7 @@ ignite new MyTSProject 1. Add TypeScript and the types for React Native and Jest to your project. - + ```shell @@ -235,7 +235,7 @@ To use custom path aliases with TypeScript, you need to set the path aliases to 2. Add [`babel-plugin-module-resolver`][bpmr] as a development package to your project: - + ```shell diff --git a/website/versioned_docs/version-0.67/vibration.md b/website/versioned_docs/version-0.67/vibration.md index c66b716ee21..8b30b14902f 100644 --- a/website/versioned_docs/version-0.67/vibration.md +++ b/website/versioned_docs/version-0.67/vibration.md @@ -9,7 +9,7 @@ Vibrates the device. ## Example - + ```SnackPlayer name=Vibration&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.67/view.md b/website/versioned_docs/version-0.67/view.md index 2a4e418cd90..1093488b925 100644 --- a/website/versioned_docs/version-0.67/view.md +++ b/website/versioned_docs/version-0.67/view.md @@ -11,7 +11,7 @@ The most fundamental component for building a UI, `View` is a container that sup This example creates a `View` that wraps two boxes with color and a text component in a row with padding. - + ```SnackPlayer name=View%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.68/_integration-with-existing-apps-objc.md b/website/versioned_docs/version-0.68/_integration-with-existing-apps-objc.md index 220245e9761..f2047c69f3b 100644 --- a/website/versioned_docs/version-0.68/_integration-with-existing-apps-objc.md +++ b/website/versioned_docs/version-0.68/_integration-with-existing-apps-objc.md @@ -39,7 +39,7 @@ Next, make sure you have [installed the yarn package manager](https://yarnpkg.co Install the `react` and `react-native` packages. Open a terminal or command prompt, then navigate to the directory with your `package.json` file and run: - + ```shell @@ -62,7 +62,7 @@ This will print a message similar to the following (scroll up in the yarn output This is OK, it means we also need to install React: - + ```shell @@ -346,7 +346,7 @@ Apple has blocked implicit cleartext HTTP resource loading. So we need to add th To run your app, you need to first start the development server. To do this, run the following command in the root directory of your React Native project: - + ```shell diff --git a/website/versioned_docs/version-0.68/accessibilityinfo.md b/website/versioned_docs/version-0.68/accessibilityinfo.md index 9d0d47cc173..4604e9ece46 100644 --- a/website/versioned_docs/version-0.68/accessibilityinfo.md +++ b/website/versioned_docs/version-0.68/accessibilityinfo.md @@ -9,7 +9,7 @@ Sometimes it's useful to know whether or not the device has a screen reader that ## Example - + ```SnackPlayer name=AccessibilityInfo%20Function%20Component%20Example&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.68/activityindicator.md b/website/versioned_docs/version-0.68/activityindicator.md index 33e05f8d587..e3a6300d149 100644 --- a/website/versioned_docs/version-0.68/activityindicator.md +++ b/website/versioned_docs/version-0.68/activityindicator.md @@ -9,7 +9,7 @@ Displays a circular loading indicator. ## Example - + ```SnackPlayer name=ActivityIndicator%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.68/alert.md b/website/versioned_docs/version-0.68/alert.md index 24dec2eac18..68aeaa58283 100644 --- a/website/versioned_docs/version-0.68/alert.md +++ b/website/versioned_docs/version-0.68/alert.md @@ -13,7 +13,7 @@ This is an API that works both on Android and iOS and can show static alerts. Al ## Example - + ```SnackPlayer name=Alert%20Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.68/animated.md b/website/versioned_docs/version-0.68/animated.md index e805df991eb..006278d3601 100644 --- a/website/versioned_docs/version-0.68/animated.md +++ b/website/versioned_docs/version-0.68/animated.md @@ -9,7 +9,7 @@ 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://reactjs.org/docs/hooks-reference.html#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. @@ -26,7 +26,7 @@ The core workflow for creating an animation is to create an `Animated.Value`, ho The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim` - + ```SnackPlayer name=Animated diff --git a/website/versioned_docs/version-0.68/animations.md b/website/versioned_docs/version-0.68/animations.md index 55165d381a7..52c7df5ad60 100644 --- a/website/versioned_docs/version-0.68/animations.md +++ b/website/versioned_docs/version-0.68/animations.md @@ -232,7 +232,7 @@ The following example implements a horizontal scrolling carousel where the scrol #### ScrollView with Animated Event Example - + ```SnackPlayer name=Animated&supportedPlatforms=ios,android @@ -531,7 +531,7 @@ onPanResponderMove={Animated.event( #### PanResponder with Animated Event Example - + ```SnackPlayer name=Animated diff --git a/website/versioned_docs/version-0.68/appearance.md b/website/versioned_docs/version-0.68/appearance.md index fc9663a42c3..69f79d7cf18 100644 --- a/website/versioned_docs/version-0.68/appearance.md +++ b/website/versioned_docs/version-0.68/appearance.md @@ -13,7 +13,7 @@ The `Appearance` module exposes information about the user's appearance preferen #### Developer notes - + diff --git a/website/versioned_docs/version-0.68/appstate.md b/website/versioned_docs/version-0.68/appstate.md index 9ba3b7d3533..276895f6d3a 100644 --- a/website/versioned_docs/version-0.68/appstate.md +++ b/website/versioned_docs/version-0.68/appstate.md @@ -24,7 +24,7 @@ For more information, see [Apple's documentation](https://developer.apple.com/do To see the current state, you can check `AppState.currentState`, which will be kept up-to-date. However, `currentState` will be null at launch while `AppState` retrieves it over the bridge. - + ```SnackPlayer name=AppState%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.68/backhandler.md b/website/versioned_docs/version-0.68/backhandler.md index f86a5730492..3ca42179119 100644 --- a/website/versioned_docs/version-0.68/backhandler.md +++ b/website/versioned_docs/version-0.68/backhandler.md @@ -45,7 +45,7 @@ BackHandler.addEventListener('hardwareBackPress', function () { The following example implements a scenario where you confirm if the user wants to exit the app: - + ```SnackPlayer name=BackHandler&supportedPlatforms=android @@ -158,7 +158,7 @@ export default App; Additionally `BackHandler.removeEventListener` can also be used to clear the event listener. Ensure the callback has the reference to the same function used in the `addEventListener` call as shown the following example ﹣ - + ```SnackPlayer name=BackHandler&supportedPlatforms=android diff --git a/website/versioned_docs/version-0.68/building-for-tv.md b/website/versioned_docs/version-0.68/building-for-tv.md index 1a66d4a7c04..e9b6cf8eadd 100644 --- a/website/versioned_docs/version-0.68/building-for-tv.md +++ b/website/versioned_docs/version-0.68/building-for-tv.md @@ -8,7 +8,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications. - + diff --git a/website/versioned_docs/version-0.68/datepickerios.md b/website/versioned_docs/version-0.68/datepickerios.md index b20f41ccba4..cb67cbb99cd 100644 --- a/website/versioned_docs/version-0.68/datepickerios.md +++ b/website/versioned_docs/version-0.68/datepickerios.md @@ -11,7 +11,7 @@ Use `DatePickerIOS` to render a date/time picker (selector) on iOS. This is a co ### Example - + ```SnackPlayer name=DatePickerIOS&supportedPlatforms=ios diff --git a/website/versioned_docs/version-0.68/debugging.md b/website/versioned_docs/version-0.68/debugging.md index 6e436d2ed79..475b05e48ca 100644 --- a/website/versioned_docs/version-0.68/debugging.md +++ b/website/versioned_docs/version-0.68/debugging.md @@ -89,7 +89,7 @@ You can use [the standalone version of React Developer Tools](https://github.com > Note: Version 4 of `react-devtools` requires `react-native` version 0.62 or higher to work properly. - + ```shell diff --git a/website/versioned_docs/version-0.68/dimensions.md b/website/versioned_docs/version-0.68/dimensions.md index eff7b42fdec..47027e3654f 100644 --- a/website/versioned_docs/version-0.68/dimensions.md +++ b/website/versioned_docs/version-0.68/dimensions.md @@ -24,7 +24,7 @@ If you are targeting foldable devices or devices which can change the screen siz ## Example - + ```SnackPlayer name=Dimensions diff --git a/website/versioned_docs/version-0.68/dynamiccolorios.md b/website/versioned_docs/version-0.68/dynamiccolorios.md index 2cc219ea8c6..610845a24b4 100644 --- a/website/versioned_docs/version-0.68/dynamiccolorios.md +++ b/website/versioned_docs/version-0.68/dynamiccolorios.md @@ -22,7 +22,7 @@ At runtime, the system will choose which of the colors to display depending on t #### Developer notes - + diff --git a/website/versioned_docs/version-0.68/getting-started.md b/website/versioned_docs/version-0.68/getting-started.md index 0d0c19291d7..aa64dc962e1 100644 --- a/website/versioned_docs/version-0.68/getting-started.md +++ b/website/versioned_docs/version-0.68/getting-started.md @@ -14,12 +14,12 @@ This page will help you install and build your first React Native app. **If you are already familiar with mobile development**, you may want to use React Native CLI. It requires Xcode or Android Studio to get started. If you already have one of these tools installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them. - + Assuming that you have [Node 14 LTS](https://nodejs.org/en/download/) or greater installed, you can use npm to install the Expo CLI command line utility: - + ```shell @@ -38,7 +38,7 @@ yarn global add expo-cli Then run the following commands to create a new React Native project called "AwesomeProject": - + ```shell @@ -115,12 +115,12 @@ The instructions are a bit different depending on your development operating sys #### Development OS - + #### Target OS - + [//]: # 'macOS, Android' @@ -142,7 +142,7 @@ The instructions are a bit different depending on your development operating sys #### Target OS - + [//]: # 'Windows, Android' @@ -166,7 +166,7 @@ The instructions are a bit different depending on your development operating sys #### Target OS - + [//]: # 'Linux, Android' diff --git a/website/versioned_docs/version-0.68/headless-js-android.md b/website/versioned_docs/version-0.68/headless-js-android.md index 2ee437879c1..dc12ca3bf4f 100644 --- a/website/versioned_docs/version-0.68/headless-js-android.md +++ b/website/versioned_docs/version-0.68/headless-js-android.md @@ -33,7 +33,7 @@ You can do anything in your task such as network requests, timers and so on, as Yes, this does still require some native code, but it's pretty thin. You need to extend `HeadlessJsTaskService` and override `getTaskConfig`, e.g.: - + ```java @@ -104,7 +104,7 @@ Now, whenever you [start your service][0], e.g. as a periodic task or in respons Example: - + ```java @@ -140,7 +140,7 @@ By default, the headless JS task will not perform any retries. In order to do so `LinearCountingRetryPolicy` is an implementation of `HeadlessJsRetryPolicy` that allows you to specify a maximum number of retries with a fixed delay between each attempt. If that does not suit your needs then you can implement your own `HeadlessJsRetryPolicy`. These policies can be passed as an extra argument to the `HeadlessJsTaskConfig` constructor, e.g. - + ```java @@ -213,7 +213,7 @@ Following lines shows part of Android manifest file for registering broadcast re Broadcast receiver then handles intent that was broadcasted in onReceive function. This is a great place to check whether your app is on foreground or not. If app is not on foreground we can prepare our intent to be started, with no information or additional information bundled using `putExtra` (keep in mind bundle can handle only parcelable values). In the end service is started and wakelock is acquired. - + ```java diff --git a/website/versioned_docs/version-0.68/image-style-props.md b/website/versioned_docs/version-0.68/image-style-props.md index cae5d3a29ee..41212e7b14a 100644 --- a/website/versioned_docs/version-0.68/image-style-props.md +++ b/website/versioned_docs/version-0.68/image-style-props.md @@ -9,7 +9,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ### Image Resize Mode - + ```SnackPlayer name=Image%20Resize%20Modes%20Function%20Component%20Example @@ -182,7 +182,7 @@ export default DisplayAnImageWithStyle; ### Image Border - + ```SnackPlayer name=Style%20BorderWidth%20and%20BorderColor%20Function%20Component%20Example @@ -265,7 +265,7 @@ export default DisplayAnImageWithStyle; ### Image Border Radius - + ```SnackPlayer name=Style%20Border%20Radius%20Function%20Component%20Example @@ -416,7 +416,7 @@ export default DisplayAnImageWithStyle; ### Image Tint - + ```SnackPlayer name=Style%20tintColor%20Function%20Component diff --git a/website/versioned_docs/version-0.68/image.md b/website/versioned_docs/version-0.68/image.md index a15b400c30c..10f3bbac70d 100644 --- a/website/versioned_docs/version-0.68/image.md +++ b/website/versioned_docs/version-0.68/image.md @@ -13,7 +13,7 @@ This example shows fetching and displaying an image from local storage as well a ## Examples - + ```SnackPlayer name=Function%20Component%20Example @@ -112,7 +112,7 @@ export default DisplayAnImage; You can also add `style` to an image: - + ```SnackPlayer name=Function%20Component%20Example diff --git a/website/versioned_docs/version-0.68/integration-with-android-fragment.md b/website/versioned_docs/version-0.68/integration-with-android-fragment.md index 90e49b1cca6..049119dd702 100644 --- a/website/versioned_docs/version-0.68/integration-with-android-fragment.md +++ b/website/versioned_docs/version-0.68/integration-with-android-fragment.md @@ -19,7 +19,7 @@ You will need to implement the `ReactApplication` interface in your main Applica Ensure your main Application class implements ReactApplication: - + ```kotlin @@ -38,7 +38,7 @@ public class MyReactApplication extends Application implements ReactApplication Override the required methods `getUseDeveloperSupport`, `getPackages` and `getReactNativeHost`: - + ```kotlin @@ -96,7 +96,7 @@ public class MyReactApplication extends Application implements ReactApplication If you are using Android Studio, use Alt + Enter to add all missing imports in your class. Alternatively these are the required imports to include manually: - + ```kotlin @@ -163,7 +163,7 @@ Now in your Activity class (e.g. `MainActivity.java` or `MainActivity.kt`) you n Add the button field to the top of your Activity: - + ```kotlin @@ -182,7 +182,7 @@ private Button mButton; Update your Activity's `onCreate` method as follows: - + ```kotlin @@ -239,7 +239,7 @@ If you are using a starter kit for React Native, replace the "HelloWorld" string Add the `getLaunchOptions` method which will allow you to pass props through to your component. This is optional and you can remove `setLaunchOptions` if you don't need to pass any props. - + ```kotlin @@ -265,7 +265,7 @@ private Bundle getLaunchOptions(String message) { Add all missing imports in your Activity class. Be careful to use your package’s BuildConfig and not the one from the facebook package! Alternatively these are the required imports to include manually: - + ```kotlin diff --git a/website/versioned_docs/version-0.68/integration-with-existing-apps.md b/website/versioned_docs/version-0.68/integration-with-existing-apps.md index 803a6dfe6e3..0d147e07a3a 100644 --- a/website/versioned_docs/version-0.68/integration-with-existing-apps.md +++ b/website/versioned_docs/version-0.68/integration-with-existing-apps.md @@ -12,7 +12,7 @@ React Native is great when you are starting a new mobile app from scratch. Howev The specific steps are different depending on what platform you're targeting. - + diff --git a/website/versioned_docs/version-0.68/intro-react.md b/website/versioned_docs/version-0.68/intro-react.md index 7733ec65547..2b990cb3d44 100644 --- a/website/versioned_docs/version-0.68/intro-react.md +++ b/website/versioned_docs/version-0.68/intro-react.md @@ -21,7 +21,7 @@ If you want to dig deeper, we encourage you to check out [React’s official doc The rest of this introduction to React uses cats in its examples: friendly, approachable creatures that need names and a cafe to work in. Here is your very first Cat component: - + ```SnackPlayer name=Your%20Cat @@ -205,7 +205,7 @@ export default Cat; #### Developer notes - + @@ -315,7 +315,7 @@ While you can think of props as arguments you use to configure how components re The following example takes place in a cat cafe where two hungry cats are waiting to be fed. Their hunger, which we expect to change over time (unlike their names), is stored as state. To feed the cats, press their buttons—which will update their state. - + You can add state to a component by calling [React’s `useState` Hook](https://reactjs.org/docs/hooks-state.html). A Hook is a kind of function that lets you “hook into” React features. For example, `useState` is a Hook that lets you add state to function components. You can learn more about [other kinds of Hooks in the React documentation.](https://reactjs.org/docs/hooks-intro.html) diff --git a/website/versioned_docs/version-0.68/introduction.md b/website/versioned_docs/version-0.68/introduction.md index c2f1346b804..f2c76644f10 100644 --- a/website/versioned_docs/version-0.68/introduction.md +++ b/website/versioned_docs/version-0.68/introduction.md @@ -56,7 +56,7 @@ With React, you can make components using either classes or functions. Originall [Hooks were introduced in React Native 0.59.](/blog/2019/03/12/releasing-react-native-059), and because Hooks are the future-facing way to write your React components, we wrote this introduction using function component examples. Where useful, we also cover class components under a toggle like so: - + ```SnackPlayer name=Hello%20World%20Function%20Component @@ -111,7 +111,7 @@ You can find more examples of class components in [previous versions of this doc People from many different development backgrounds are learning React Native. You may have experience with a range of technologies, from web to Android to iOS and more. We try to write for developers from all backgrounds. Sometimes we provide explanations specific to one platform or another like so: - + diff --git a/website/versioned_docs/version-0.68/keyboard.md b/website/versioned_docs/version-0.68/keyboard.md index caea73c8b4e..08051d5a086 100644 --- a/website/versioned_docs/version-0.68/keyboard.md +++ b/website/versioned_docs/version-0.68/keyboard.md @@ -11,7 +11,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it. - + ```SnackPlayer name=Keyboard%20Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.68/layoutanimation.md b/website/versioned_docs/version-0.68/layoutanimation.md index b0a6014e0af..bf2a819acfc 100644 --- a/website/versioned_docs/version-0.68/layoutanimation.md +++ b/website/versioned_docs/version-0.68/layoutanimation.md @@ -120,7 +120,7 @@ Helper that creates an object (with `create`, `update`, and `delete` fields) to **Example:** - + ```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios @@ -338,7 +338,7 @@ Calls `configureNext()` with `Presets.spring`. **Example:** - + ```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.68/libraries.md b/website/versioned_docs/version-0.68/libraries.md index abecb19b5a6..fb6897d4521 100644 --- a/website/versioned_docs/version-0.68/libraries.md +++ b/website/versioned_docs/version-0.68/libraries.md @@ -22,7 +22,7 @@ If you have Node.js installed on your computer then you already have the npm CLI To install a library in your project, navigate to your project directory in your terminal and run the installation command. Let's try this with `react-native-webview`: - + ```shell diff --git a/website/versioned_docs/version-0.68/linking.md b/website/versioned_docs/version-0.68/linking.md index 2e13a952de4..a1f53845771 100644 --- a/website/versioned_docs/version-0.68/linking.md +++ b/website/versioned_docs/version-0.68/linking.md @@ -37,7 +37,7 @@ As mentioned in the introduction, there are some URL schemes for core functional If you want to enable deep links in your app, please read the below guide: - + > For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters). diff --git a/website/versioned_docs/version-0.68/modal.md b/website/versioned_docs/version-0.68/modal.md index bc461ae7af9..ebca2c77664 100644 --- a/website/versioned_docs/version-0.68/modal.md +++ b/website/versioned_docs/version-0.68/modal.md @@ -9,7 +9,7 @@ The Modal component is a basic way to present content above an enclosing view. ## Example - + ```SnackPlayer name=Modal&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.68/native-modules-android.md b/website/versioned_docs/version-0.68/native-modules-android.md index 5eb977ae318..92fa25b9709 100644 --- a/website/versioned_docs/version-0.68/native-modules-android.md +++ b/website/versioned_docs/version-0.68/native-modules-android.md @@ -37,7 +37,7 @@ The first step is to create the (`CalendarModule.java` or `CalendarModule.kt`) J Then add the following content: - + ```java @@ -84,7 +84,7 @@ As you can see, your `CalendarModule` class extends the `ReactContextBaseJavaMod All Java/Kotlin native modules in Android need to implement the `getName()` method. This method returns a string, which represents the name of the native module. The native module can then be accessed in JavaScript using its name. For example, in the below code snippet, `getName()` returns `"CalendarModule"`. - + ```java @@ -118,7 +118,7 @@ Next you will need to add a method to your native module that will create calend Set up a method `createCalendarEvent()` for `CalendarModule` that can be invoked in JS through `CalendarModule.createCalendarEvent()`. For now, the method will take in a name and location as strings. Argument type options will be covered shortly. - + ```java @@ -139,7 +139,7 @@ public void createCalendarEvent(String name, String location) { Add a debug log in the method to confirm it has been invoked when you call it from your application. Below is an example of how you can import and use the [Log](https://developer.android.com/reference/android/util/Log) class from the Android util package: - + ```java @@ -173,7 +173,7 @@ Once you finish implementing the native module and hook it up in JavaScript, you You can pass `isBlockingSynchronousMethod = true` to a native method to mark it as a synchronous method. - + ```java @@ -202,7 +202,7 @@ To add your Native Module to `ReactPackage`, first create a new Java/Kotlin Clas Then add the following content: - + ```java @@ -272,7 +272,7 @@ To register the `CalendarModule` package, you must add `MyAppPackage` to the lis Locate ReactNativeHost’s `getPackages()` method and add your package to the packages list `getPackages()` returns: - + ```java @@ -443,7 +443,7 @@ When a native module method is invoked in JavaScript, React Native converts the For argument types not listed above, you will need to handle the conversion yourself. For example, in Android, `Date` conversion is not supported out of the box. You can handle the conversion to the `Date` type within the native method yourself like so: - + ```java @@ -477,7 +477,7 @@ For argument types not listed above, you will need to handle the conversion your A native module can export constants by implementing the native method `getConstants()`, which is available in JS. Below you will implement `getConstants()` and return a Map that contains a `DEFAULT_EVENT_NAME` constant you can access in JavaScript: - + ```java @@ -517,7 +517,7 @@ Native modules also support a unique kind of argument: a callback. Callbacks are In order to create a native module method with a callback, first import the `Callback` interface, and then add a new parameter to your native module method of type `Callback`. There are a couple of nuances with callback arguments that will soon be lifted with TurboModules. First off, you can only have two callbacks in your function arguments- a successCallback and a failureCallback. In addition, the last argument to a native module method call, if it's a function, is treated as the successCallback, and the second to last argument to a native module method call, if it's a function, is treated as the failure callback. - + ```java @@ -542,7 +542,7 @@ import com.facebook.react.bridge.Callback You can invoke the callback in your Java/Kotlin method, providing whatever data you want to pass to JavaScript. Please note that you can only pass serializable data from native code to JavaScript. If you need to pass back a native object you can use `WriteableMaps`, if you need to use a collection use `WritableArrays`. It is also important to highlight that the callback is not invoked immediately after the native function completes. Below the ID of an event created in an earlier call is passed to the callback. - + ```java @@ -585,7 +585,7 @@ Another important detail to note is that a native module method can only invoke There are two approaches to error handling with callbacks. The first is to follow Node’s convention and treat the first argument passed to the callback as an error object. - + ```java @@ -629,7 +629,7 @@ const onPress = () => { Another option is to use an onSuccess and onFailure callback: - + ```java @@ -677,7 +677,7 @@ Native modules can also fulfill a [Promise](https://developer.mozilla.org/en-US/ Refactoring the above code to use a promise instead of callbacks looks like this: - + ```java @@ -732,7 +732,7 @@ const onSubmit = async () => { The reject method takes different combinations of the following arguments: - + ```java @@ -753,7 +753,7 @@ For more detail, you can find the `Promise.java` interface [here](https://github Java/Kotlin reject call: - + ```java @@ -781,7 +781,7 @@ Error message in React Native App when promise is rejected: Native modules can signal events to JavaScript without being invoked directly. For example, you might want to signal to JavaScript a reminder that a calendar event from the native Android calendar app will occur soon. The easiest way to do this is to use the `RCTDeviceEventEmitter` which can be obtained from the `ReactContext` as in the code snippet below. - + ```java @@ -892,7 +892,7 @@ import { NativeEventEmitter, NativeModules } from 'react-native'; You'll need to listen to `onActivityResult` if you want to get results from an activity you started with `startActivityForResult`. To do this, you must extend `BaseActivityEventListener` or implement `ActivityEventListener`. The former is preferred as it is more resilient to API changes. Then, you need to register the listener in the module's constructor like so: - + ```java @@ -911,7 +911,7 @@ reactContext.addActivityEventListener(mActivityResultListener); Now you can listen to `onActivityResult` by implementing the following method: - + ```java @@ -944,7 +944,7 @@ override fun onActivityResult( Let's implement a basic image picker to demonstrate this. The image picker will expose the method `pickImage` to JavaScript, which will return the path of the image when called. - + ```jsx @@ -1104,7 +1104,7 @@ class ImagePickerModule(reactContext: ReactApplicationContext) : Listening to the activity's LifeCycle events such as `onResume`, `onPause` etc. is very similar to how `ActivityEventListener` was implemented. The module must implement `LifecycleEventListener`. Then, you need to register a listener in the module's constructor like so: - + ```java @@ -1123,7 +1123,7 @@ reactContext.addLifecycleEventListener(this) Now you can listen to the activity's LifeCycle events by implementing the following methods: - + ```java diff --git a/website/versioned_docs/version-0.68/network.md b/website/versioned_docs/version-0.68/network.md index 007662031c7..e2379eafe33 100644 --- a/website/versioned_docs/version-0.68/network.md +++ b/website/versioned_docs/version-0.68/network.md @@ -74,7 +74,7 @@ const getMoviesFromApiAsync = async () => { Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently. - + ```SnackPlayer name=Fetch%20Example diff --git a/website/versioned_docs/version-0.68/optimizing-flatlist-configuration.md b/website/versioned_docs/version-0.68/optimizing-flatlist-configuration.md index becebcc0a3a..44411d4ac3e 100644 --- a/website/versioned_docs/version-0.68/optimizing-flatlist-configuration.md +++ b/website/versioned_docs/version-0.68/optimizing-flatlist-configuration.md @@ -125,7 +125,7 @@ You can also use a `key` prop in your item component. Move out the `renderItem` function to the outside of render function, so it won't recreate itself each time render function called. - + ```jsx diff --git a/website/versioned_docs/version-0.68/panresponder.md b/website/versioned_docs/version-0.68/panresponder.md index e075ef77a98..c70a825625e 100644 --- a/website/versioned_docs/version-0.68/panresponder.md +++ b/website/versioned_docs/version-0.68/panresponder.md @@ -80,7 +80,7 @@ const ExampleComponent = () => { `PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen - + ```SnackPlayer name=PanResponder diff --git a/website/versioned_docs/version-0.68/permissionsandroid.md b/website/versioned_docs/version-0.68/permissionsandroid.md index 000318f6e9e..fa491664ec6 100644 --- a/website/versioned_docs/version-0.68/permissionsandroid.md +++ b/website/versioned_docs/version-0.68/permissionsandroid.md @@ -20,7 +20,7 @@ If a user has previously turned off a permission that you prompt for, the OS wil ### Example - + ```SnackPlayer name=PermissionsAndroid%20Example&supportedPlatforms=android diff --git a/website/versioned_docs/version-0.68/platformcolor.md b/website/versioned_docs/version-0.68/platformcolor.md index d5f97d4009b..83e0846fe93 100644 --- a/website/versioned_docs/version-0.68/platformcolor.md +++ b/website/versioned_docs/version-0.68/platformcolor.md @@ -32,7 +32,7 @@ For a full list of the types of system colors supported, see: #### Developer notes - + diff --git a/website/versioned_docs/version-0.68/running-on-device.md b/website/versioned_docs/version-0.68/running-on-device.md index 3982a161091..445711bc6f8 100644 --- a/website/versioned_docs/version-0.68/running-on-device.md +++ b/website/versioned_docs/version-0.68/running-on-device.md @@ -10,14 +10,14 @@ It's always a good idea to test your app on an actual device before releasing it If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app—but in order to build and run your app on a device, you will need to eject and install the native code dependencies from the [environment setup guide](environment-setup). - + ## Running your app on Android devices #### Development OS - + [//]: # 'macOS, Android' @@ -310,7 +310,7 @@ You have built a great app using React Native, and you are now itching to releas #### Development OS - + [//]: # 'macOS, iOS' diff --git a/website/versioned_docs/version-0.68/sectionlist.md b/website/versioned_docs/version-0.68/sectionlist.md index 2469a8c3167..c36017163c3 100644 --- a/website/versioned_docs/version-0.68/sectionlist.md +++ b/website/versioned_docs/version-0.68/sectionlist.md @@ -22,7 +22,7 @@ If you don't need section support and want a simpler interface, use [` ## Example - + ```SnackPlayer name=SectionList%20Example diff --git a/website/versioned_docs/version-0.68/security.md b/website/versioned_docs/version-0.68/security.md index fb900a57aae..632fe2e591f 100644 --- a/website/versioned_docs/version-0.68/security.md +++ b/website/versioned_docs/version-0.68/security.md @@ -34,7 +34,7 @@ If you must have an API key or a secret to access some resource from your app, t #### Developer Notes - + diff --git a/website/versioned_docs/version-0.68/share.md b/website/versioned_docs/version-0.68/share.md index 0d1a2b38ff2..5a14a74ada2 100644 --- a/website/versioned_docs/version-0.68/share.md +++ b/website/versioned_docs/version-0.68/share.md @@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ## Example - + ```SnackPlayer name=Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.68/systrace.md b/website/versioned_docs/version-0.68/systrace.md index 0a8e33897fe..a2e44ca5d79 100644 --- a/website/versioned_docs/version-0.68/systrace.md +++ b/website/versioned_docs/version-0.68/systrace.md @@ -11,7 +11,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con `Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler. - + ```SnackPlayer name=Systrace%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.68/text.md b/website/versioned_docs/version-0.68/text.md index a0e395e5e34..18fb8d927dc 100644 --- a/website/versioned_docs/version-0.68/text.md +++ b/website/versioned_docs/version-0.68/text.md @@ -11,7 +11,7 @@ A React component for displaying text. In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines: - + ```SnackPlayer name=Text%20Functional%20Component%20Example diff --git a/website/versioned_docs/version-0.68/touchablehighlight.md b/website/versioned_docs/version-0.68/touchablehighlight.md index ca9fcca8eda..69c2e95cddd 100644 --- a/website/versioned_docs/version-0.68/touchablehighlight.md +++ b/website/versioned_docs/version-0.68/touchablehighlight.md @@ -32,7 +32,7 @@ function MyComponent(props) { ## Example - + ```SnackPlayer name=TouchableHighlight%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.68/touchableopacity.md b/website/versioned_docs/version-0.68/touchableopacity.md index 28f8e9998aa..a2a14b7341d 100644 --- a/website/versioned_docs/version-0.68/touchableopacity.md +++ b/website/versioned_docs/version-0.68/touchableopacity.md @@ -13,7 +13,7 @@ Opacity is controlled by wrapping the children in an `Animated.View`, which is a ## Example - + ```SnackPlayer name=TouchableOpacity%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.68/transforms.md b/website/versioned_docs/version-0.68/transforms.md index 42bb8f02ac1..22da7098d18 100644 --- a/website/versioned_docs/version-0.68/transforms.md +++ b/website/versioned_docs/version-0.68/transforms.md @@ -9,7 +9,7 @@ Transforms are style properties that will help you modify the appearance and pos ## Example - + ```SnackPlayer name=Transforms diff --git a/website/versioned_docs/version-0.68/typescript.md b/website/versioned_docs/version-0.68/typescript.md index 7c667c65685..277bc0ed32a 100644 --- a/website/versioned_docs/version-0.68/typescript.md +++ b/website/versioned_docs/version-0.68/typescript.md @@ -32,7 +32,7 @@ Optionally, you can also use the command given below to get started with your te You can use [Expo][expo] which has two TypeScript templates: - + ```shell @@ -53,7 +53,7 @@ expo init MyTSProject Or you could use [Ignite][ignite], which also has a TypeScript template: - + ```shell @@ -76,7 +76,7 @@ ignite new MyTSProject 1. Add TypeScript and the types for React Native and Jest to your project. - + ```shell @@ -242,7 +242,7 @@ To use custom path aliases with TypeScript, you need to set the path aliases to 2. Add [`babel-plugin-module-resolver`][bpmr] as a development package to your project: - + ```shell diff --git a/website/versioned_docs/version-0.68/vibration.md b/website/versioned_docs/version-0.68/vibration.md index c66b716ee21..8b30b14902f 100644 --- a/website/versioned_docs/version-0.68/vibration.md +++ b/website/versioned_docs/version-0.68/vibration.md @@ -9,7 +9,7 @@ Vibrates the device. ## Example - + ```SnackPlayer name=Vibration&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.68/view.md b/website/versioned_docs/version-0.68/view.md index 2a4e418cd90..1093488b925 100644 --- a/website/versioned_docs/version-0.68/view.md +++ b/website/versioned_docs/version-0.68/view.md @@ -11,7 +11,7 @@ The most fundamental component for building a UI, `View` is a container that sup This example creates a `View` that wraps two boxes with color and a text component in a row with padding. - + ```SnackPlayer name=View%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.69/_integration-with-existing-apps-objc.md b/website/versioned_docs/version-0.69/_integration-with-existing-apps-objc.md index 220245e9761..f2047c69f3b 100644 --- a/website/versioned_docs/version-0.69/_integration-with-existing-apps-objc.md +++ b/website/versioned_docs/version-0.69/_integration-with-existing-apps-objc.md @@ -39,7 +39,7 @@ Next, make sure you have [installed the yarn package manager](https://yarnpkg.co Install the `react` and `react-native` packages. Open a terminal or command prompt, then navigate to the directory with your `package.json` file and run: - + ```shell @@ -62,7 +62,7 @@ This will print a message similar to the following (scroll up in the yarn output This is OK, it means we also need to install React: - + ```shell @@ -346,7 +346,7 @@ Apple has blocked implicit cleartext HTTP resource loading. So we need to add th To run your app, you need to first start the development server. To do this, run the following command in the root directory of your React Native project: - + ```shell diff --git a/website/versioned_docs/version-0.69/accessibilityinfo.md b/website/versioned_docs/version-0.69/accessibilityinfo.md index 3d0555520b1..37e02756287 100644 --- a/website/versioned_docs/version-0.69/accessibilityinfo.md +++ b/website/versioned_docs/version-0.69/accessibilityinfo.md @@ -9,7 +9,7 @@ Sometimes it's useful to know whether or not the device has a screen reader that ## Example - + ```SnackPlayer name=AccessibilityInfo%20Function%20Component%20Example&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.69/activityindicator.md b/website/versioned_docs/version-0.69/activityindicator.md index 33e05f8d587..e3a6300d149 100644 --- a/website/versioned_docs/version-0.69/activityindicator.md +++ b/website/versioned_docs/version-0.69/activityindicator.md @@ -9,7 +9,7 @@ Displays a circular loading indicator. ## Example - + ```SnackPlayer name=ActivityIndicator%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.69/alert.md b/website/versioned_docs/version-0.69/alert.md index 24dec2eac18..68aeaa58283 100644 --- a/website/versioned_docs/version-0.69/alert.md +++ b/website/versioned_docs/version-0.69/alert.md @@ -13,7 +13,7 @@ This is an API that works both on Android and iOS and can show static alerts. Al ## Example - + ```SnackPlayer name=Alert%20Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.69/animated.md b/website/versioned_docs/version-0.69/animated.md index e805df991eb..006278d3601 100644 --- a/website/versioned_docs/version-0.69/animated.md +++ b/website/versioned_docs/version-0.69/animated.md @@ -9,7 +9,7 @@ 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://reactjs.org/docs/hooks-reference.html#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. @@ -26,7 +26,7 @@ The core workflow for creating an animation is to create an `Animated.Value`, ho The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim` - + ```SnackPlayer name=Animated diff --git a/website/versioned_docs/version-0.69/animations.md b/website/versioned_docs/version-0.69/animations.md index 55165d381a7..52c7df5ad60 100644 --- a/website/versioned_docs/version-0.69/animations.md +++ b/website/versioned_docs/version-0.69/animations.md @@ -232,7 +232,7 @@ The following example implements a horizontal scrolling carousel where the scrol #### ScrollView with Animated Event Example - + ```SnackPlayer name=Animated&supportedPlatforms=ios,android @@ -531,7 +531,7 @@ onPanResponderMove={Animated.event( #### PanResponder with Animated Event Example - + ```SnackPlayer name=Animated diff --git a/website/versioned_docs/version-0.69/appearance.md b/website/versioned_docs/version-0.69/appearance.md index fc9663a42c3..69f79d7cf18 100644 --- a/website/versioned_docs/version-0.69/appearance.md +++ b/website/versioned_docs/version-0.69/appearance.md @@ -13,7 +13,7 @@ The `Appearance` module exposes information about the user's appearance preferen #### Developer notes - + diff --git a/website/versioned_docs/version-0.69/appstate.md b/website/versioned_docs/version-0.69/appstate.md index 9ba3b7d3533..276895f6d3a 100644 --- a/website/versioned_docs/version-0.69/appstate.md +++ b/website/versioned_docs/version-0.69/appstate.md @@ -24,7 +24,7 @@ For more information, see [Apple's documentation](https://developer.apple.com/do To see the current state, you can check `AppState.currentState`, which will be kept up-to-date. However, `currentState` will be null at launch while `AppState` retrieves it over the bridge. - + ```SnackPlayer name=AppState%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.69/backhandler.md b/website/versioned_docs/version-0.69/backhandler.md index f86a5730492..3ca42179119 100644 --- a/website/versioned_docs/version-0.69/backhandler.md +++ b/website/versioned_docs/version-0.69/backhandler.md @@ -45,7 +45,7 @@ BackHandler.addEventListener('hardwareBackPress', function () { The following example implements a scenario where you confirm if the user wants to exit the app: - + ```SnackPlayer name=BackHandler&supportedPlatforms=android @@ -158,7 +158,7 @@ export default App; Additionally `BackHandler.removeEventListener` can also be used to clear the event listener. Ensure the callback has the reference to the same function used in the `addEventListener` call as shown the following example ﹣ - + ```SnackPlayer name=BackHandler&supportedPlatforms=android diff --git a/website/versioned_docs/version-0.69/building-for-tv.md b/website/versioned_docs/version-0.69/building-for-tv.md index 1a66d4a7c04..e9b6cf8eadd 100644 --- a/website/versioned_docs/version-0.69/building-for-tv.md +++ b/website/versioned_docs/version-0.69/building-for-tv.md @@ -8,7 +8,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications. - + diff --git a/website/versioned_docs/version-0.69/communication-android.md b/website/versioned_docs/version-0.69/communication-android.md index 3e04049a1af..3a63163e3a0 100644 --- a/website/versioned_docs/version-0.69/communication-android.md +++ b/website/versioned_docs/version-0.69/communication-android.md @@ -21,7 +21,7 @@ Properties are the most straightforward way of cross-component communication. So You can pass properties down to the React Native app by providing a custom implementation of `ReactActivityDelegate` in your main activity. This implementation should override `getLaunchOptions` to return a `Bundle` with the desired properties. - + @@ -82,7 +82,7 @@ export default class ImageBrowserApp extends React.Component { `ReactRootView` provides a read-write property `appProperties`. After `appProperties` is set, the React Native app is re-rendered with new properties. The update is only performed when the new updated properties differ from the previous ones. - + diff --git a/website/versioned_docs/version-0.69/custom-webview-android.md b/website/versioned_docs/version-0.69/custom-webview-android.md index ce5a15f111b..6384a1585d1 100644 --- a/website/versioned_docs/version-0.69/custom-webview-android.md +++ b/website/versioned_docs/version-0.69/custom-webview-android.md @@ -26,7 +26,7 @@ To get started, you'll need to create a subclass of `RNCWebViewManager`, `RNCWeb - `getName` - `addEventEmitters` - + ```java @@ -94,7 +94,7 @@ You'll need to follow the usual steps to [register the module](native-modules-an To add a new property, you'll need to add it to `CustomWebView`, and then expose it in `CustomWebViewManager`. - + ```java @@ -149,7 +149,7 @@ class CustomWebViewManager : RNCWebViewManager() { For events, you'll first need to make create event subclass. - + ```java @@ -198,7 +198,7 @@ You can trigger the event in your web view client. You can hook existing handler You should refer to [RNCWebViewManager.java](https://github.com/react-native-webview/react-native-webview/blob/master/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java) in the React Native WebView codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality. - + ```java @@ -274,7 +274,7 @@ protected class CustomWebViewClient : RNCWebViewClient() { Finally, you'll need to expose the events in `CustomWebViewManager` through `getExportedCustomDirectEventTypeConstants`. Note that currently, the default implementation returns `null`, but this may change in the future. - + ```java diff --git a/website/versioned_docs/version-0.69/datepickerios.md b/website/versioned_docs/version-0.69/datepickerios.md index b20f41ccba4..cb67cbb99cd 100644 --- a/website/versioned_docs/version-0.69/datepickerios.md +++ b/website/versioned_docs/version-0.69/datepickerios.md @@ -11,7 +11,7 @@ Use `DatePickerIOS` to render a date/time picker (selector) on iOS. This is a co ### Example - + ```SnackPlayer name=DatePickerIOS&supportedPlatforms=ios diff --git a/website/versioned_docs/version-0.69/debugging.md b/website/versioned_docs/version-0.69/debugging.md index 7286c1e14b1..2aa5ac5eb66 100644 --- a/website/versioned_docs/version-0.69/debugging.md +++ b/website/versioned_docs/version-0.69/debugging.md @@ -89,7 +89,7 @@ You can use [the standalone version of React Developer Tools](https://github.com > Note: Version 4 of `react-devtools` requires `react-native` version 0.62 or higher to work properly. - + ```shell diff --git a/website/versioned_docs/version-0.69/dimensions.md b/website/versioned_docs/version-0.69/dimensions.md index eff7b42fdec..47027e3654f 100644 --- a/website/versioned_docs/version-0.69/dimensions.md +++ b/website/versioned_docs/version-0.69/dimensions.md @@ -24,7 +24,7 @@ If you are targeting foldable devices or devices which can change the screen siz ## Example - + ```SnackPlayer name=Dimensions diff --git a/website/versioned_docs/version-0.69/dynamiccolorios.md b/website/versioned_docs/version-0.69/dynamiccolorios.md index 2cc219ea8c6..610845a24b4 100644 --- a/website/versioned_docs/version-0.69/dynamiccolorios.md +++ b/website/versioned_docs/version-0.69/dynamiccolorios.md @@ -22,7 +22,7 @@ At runtime, the system will choose which of the colors to display depending on t #### Developer notes - + diff --git a/website/versioned_docs/version-0.69/getting-started.md b/website/versioned_docs/version-0.69/getting-started.md index 7146a639dd2..09041eda1bc 100644 --- a/website/versioned_docs/version-0.69/getting-started.md +++ b/website/versioned_docs/version-0.69/getting-started.md @@ -14,12 +14,12 @@ This page will help you install and build your first React Native app. **If you are already familiar with mobile development**, you may want to use React Native CLI. It requires Xcode or Android Studio to get started. If you already have one of these tools installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them. - + Run the following command to create a new React Native project called "AwesomeProject": - + ```shell @@ -91,12 +91,12 @@ The instructions are a bit different depending on your development operating sys #### Development OS - + #### Target OS - + [//]: # 'macOS, Android' @@ -118,7 +118,7 @@ The instructions are a bit different depending on your development operating sys #### Target OS - + [//]: # 'Windows, Android' @@ -142,7 +142,7 @@ The instructions are a bit different depending on your development operating sys #### Target OS - + [//]: # 'Linux, Android' diff --git a/website/versioned_docs/version-0.69/headless-js-android.md b/website/versioned_docs/version-0.69/headless-js-android.md index 2ee437879c1..dc12ca3bf4f 100644 --- a/website/versioned_docs/version-0.69/headless-js-android.md +++ b/website/versioned_docs/version-0.69/headless-js-android.md @@ -33,7 +33,7 @@ You can do anything in your task such as network requests, timers and so on, as Yes, this does still require some native code, but it's pretty thin. You need to extend `HeadlessJsTaskService` and override `getTaskConfig`, e.g.: - + ```java @@ -104,7 +104,7 @@ Now, whenever you [start your service][0], e.g. as a periodic task or in respons Example: - + ```java @@ -140,7 +140,7 @@ By default, the headless JS task will not perform any retries. In order to do so `LinearCountingRetryPolicy` is an implementation of `HeadlessJsRetryPolicy` that allows you to specify a maximum number of retries with a fixed delay between each attempt. If that does not suit your needs then you can implement your own `HeadlessJsRetryPolicy`. These policies can be passed as an extra argument to the `HeadlessJsTaskConfig` constructor, e.g. - + ```java @@ -213,7 +213,7 @@ Following lines shows part of Android manifest file for registering broadcast re Broadcast receiver then handles intent that was broadcasted in onReceive function. This is a great place to check whether your app is on foreground or not. If app is not on foreground we can prepare our intent to be started, with no information or additional information bundled using `putExtra` (keep in mind bundle can handle only parcelable values). In the end service is started and wakelock is acquired. - + ```java diff --git a/website/versioned_docs/version-0.69/image-style-props.md b/website/versioned_docs/version-0.69/image-style-props.md index cae5d3a29ee..41212e7b14a 100644 --- a/website/versioned_docs/version-0.69/image-style-props.md +++ b/website/versioned_docs/version-0.69/image-style-props.md @@ -9,7 +9,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ### Image Resize Mode - + ```SnackPlayer name=Image%20Resize%20Modes%20Function%20Component%20Example @@ -182,7 +182,7 @@ export default DisplayAnImageWithStyle; ### Image Border - + ```SnackPlayer name=Style%20BorderWidth%20and%20BorderColor%20Function%20Component%20Example @@ -265,7 +265,7 @@ export default DisplayAnImageWithStyle; ### Image Border Radius - + ```SnackPlayer name=Style%20Border%20Radius%20Function%20Component%20Example @@ -416,7 +416,7 @@ export default DisplayAnImageWithStyle; ### Image Tint - + ```SnackPlayer name=Style%20tintColor%20Function%20Component diff --git a/website/versioned_docs/version-0.69/image.md b/website/versioned_docs/version-0.69/image.md index a15b400c30c..10f3bbac70d 100644 --- a/website/versioned_docs/version-0.69/image.md +++ b/website/versioned_docs/version-0.69/image.md @@ -13,7 +13,7 @@ This example shows fetching and displaying an image from local storage as well a ## Examples - + ```SnackPlayer name=Function%20Component%20Example @@ -112,7 +112,7 @@ export default DisplayAnImage; You can also add `style` to an image: - + ```SnackPlayer name=Function%20Component%20Example diff --git a/website/versioned_docs/version-0.69/integration-with-android-fragment.md b/website/versioned_docs/version-0.69/integration-with-android-fragment.md index 90e49b1cca6..049119dd702 100644 --- a/website/versioned_docs/version-0.69/integration-with-android-fragment.md +++ b/website/versioned_docs/version-0.69/integration-with-android-fragment.md @@ -19,7 +19,7 @@ You will need to implement the `ReactApplication` interface in your main Applica Ensure your main Application class implements ReactApplication: - + ```kotlin @@ -38,7 +38,7 @@ public class MyReactApplication extends Application implements ReactApplication Override the required methods `getUseDeveloperSupport`, `getPackages` and `getReactNativeHost`: - + ```kotlin @@ -96,7 +96,7 @@ public class MyReactApplication extends Application implements ReactApplication If you are using Android Studio, use Alt + Enter to add all missing imports in your class. Alternatively these are the required imports to include manually: - + ```kotlin @@ -163,7 +163,7 @@ Now in your Activity class (e.g. `MainActivity.java` or `MainActivity.kt`) you n Add the button field to the top of your Activity: - + ```kotlin @@ -182,7 +182,7 @@ private Button mButton; Update your Activity's `onCreate` method as follows: - + ```kotlin @@ -239,7 +239,7 @@ If you are using a starter kit for React Native, replace the "HelloWorld" string Add the `getLaunchOptions` method which will allow you to pass props through to your component. This is optional and you can remove `setLaunchOptions` if you don't need to pass any props. - + ```kotlin @@ -265,7 +265,7 @@ private Bundle getLaunchOptions(String message) { Add all missing imports in your Activity class. Be careful to use your package’s BuildConfig and not the one from the facebook package! Alternatively these are the required imports to include manually: - + ```kotlin diff --git a/website/versioned_docs/version-0.69/integration-with-existing-apps.md b/website/versioned_docs/version-0.69/integration-with-existing-apps.md index 52d9380f9c9..237a9d39ce8 100644 --- a/website/versioned_docs/version-0.69/integration-with-existing-apps.md +++ b/website/versioned_docs/version-0.69/integration-with-existing-apps.md @@ -13,7 +13,7 @@ React Native is great when you are starting a new mobile app from scratch. Howev The specific steps are different depending on what platform you're targeting. - + diff --git a/website/versioned_docs/version-0.69/intro-react.md b/website/versioned_docs/version-0.69/intro-react.md index 7733ec65547..2b990cb3d44 100644 --- a/website/versioned_docs/version-0.69/intro-react.md +++ b/website/versioned_docs/version-0.69/intro-react.md @@ -21,7 +21,7 @@ If you want to dig deeper, we encourage you to check out [React’s official doc The rest of this introduction to React uses cats in its examples: friendly, approachable creatures that need names and a cafe to work in. Here is your very first Cat component: - + ```SnackPlayer name=Your%20Cat @@ -205,7 +205,7 @@ export default Cat; #### Developer notes - + @@ -315,7 +315,7 @@ While you can think of props as arguments you use to configure how components re The following example takes place in a cat cafe where two hungry cats are waiting to be fed. Their hunger, which we expect to change over time (unlike their names), is stored as state. To feed the cats, press their buttons—which will update their state. - + You can add state to a component by calling [React’s `useState` Hook](https://reactjs.org/docs/hooks-state.html). A Hook is a kind of function that lets you “hook into” React features. For example, `useState` is a Hook that lets you add state to function components. You can learn more about [other kinds of Hooks in the React documentation.](https://reactjs.org/docs/hooks-intro.html) diff --git a/website/versioned_docs/version-0.69/introduction.md b/website/versioned_docs/version-0.69/introduction.md index f77b91adf9b..1c924ccec0d 100644 --- a/website/versioned_docs/version-0.69/introduction.md +++ b/website/versioned_docs/version-0.69/introduction.md @@ -56,7 +56,7 @@ With React, you can make components using either classes or functions. Originall [Hooks were introduced in React Native 0.59.](/blog/2019/03/12/releasing-react-native-059), and because Hooks are the future-facing way to write your React components, we wrote this introduction using function component examples. Where useful, we also cover class components under a toggle like so: - + ```SnackPlayer name=Hello%20World%20Function%20Component @@ -111,7 +111,7 @@ You can find more examples of class components in [previous versions of this doc People from many different development backgrounds are learning React Native. You may have experience with a range of technologies, from web to Android to iOS and more. We try to write for developers from all backgrounds. Sometimes we provide explanations specific to one platform or another like so: - + diff --git a/website/versioned_docs/version-0.69/keyboard.md b/website/versioned_docs/version-0.69/keyboard.md index caea73c8b4e..08051d5a086 100644 --- a/website/versioned_docs/version-0.69/keyboard.md +++ b/website/versioned_docs/version-0.69/keyboard.md @@ -11,7 +11,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it. - + ```SnackPlayer name=Keyboard%20Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.69/layoutanimation.md b/website/versioned_docs/version-0.69/layoutanimation.md index b0a6014e0af..bf2a819acfc 100644 --- a/website/versioned_docs/version-0.69/layoutanimation.md +++ b/website/versioned_docs/version-0.69/layoutanimation.md @@ -120,7 +120,7 @@ Helper that creates an object (with `create`, `update`, and `delete` fields) to **Example:** - + ```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios @@ -338,7 +338,7 @@ Calls `configureNext()` with `Presets.spring`. **Example:** - + ```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.69/libraries.md b/website/versioned_docs/version-0.69/libraries.md index abecb19b5a6..fb6897d4521 100644 --- a/website/versioned_docs/version-0.69/libraries.md +++ b/website/versioned_docs/version-0.69/libraries.md @@ -22,7 +22,7 @@ If you have Node.js installed on your computer then you already have the npm CLI To install a library in your project, navigate to your project directory in your terminal and run the installation command. Let's try this with `react-native-webview`: - + ```shell diff --git a/website/versioned_docs/version-0.69/linking.md b/website/versioned_docs/version-0.69/linking.md index 7c182e346c4..e46324ffa5c 100644 --- a/website/versioned_docs/version-0.69/linking.md +++ b/website/versioned_docs/version-0.69/linking.md @@ -37,7 +37,7 @@ As mentioned in the introduction, there are some URL schemes for core functional If you want to enable deep links in your app, please read the below guide: - + > For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters). diff --git a/website/versioned_docs/version-0.69/modal.md b/website/versioned_docs/version-0.69/modal.md index bc461ae7af9..ebca2c77664 100644 --- a/website/versioned_docs/version-0.69/modal.md +++ b/website/versioned_docs/version-0.69/modal.md @@ -9,7 +9,7 @@ The Modal component is a basic way to present content above an enclosing view. ## Example - + ```SnackPlayer name=Modal&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.69/native-components-android.md b/website/versioned_docs/version-0.69/native-components-android.md index 156d4e2d992..9221abc5133 100644 --- a/website/versioned_docs/version-0.69/native-components-android.md +++ b/website/versioned_docs/version-0.69/native-components-android.md @@ -29,7 +29,7 @@ To send a view: In this example we create view manager class `ReactImageManager` that extends `SimpleViewManager` of type `ReactImageView`. `ReactImageView` is the type of object managed by the manager, this will be the custom native view. Name returned by `getName` is used to reference the native view type from JavaScript. - + ```kotlin @@ -72,7 +72,7 @@ public class ReactImageManager extends SimpleViewManager { Views are created in the `createViewInstance` method, the view should initialize itself in its default state, any properties will be set via a follow up call to `updateView.` - + ```kotlin @@ -107,7 +107,7 @@ Setter declaration requirements for methods annotated with `@ReactPropGroup` are - + ```kotlin @@ -154,7 +154,7 @@ Setter declaration requirements for methods annotated with `@ReactPropGroup` are The final step is to register the ViewManager to the application, this happens in a similar way to [Native Modules](native-modules-android.md), via the applications package member function `createViewManagers`. - + ```kotlin @@ -202,7 +202,7 @@ The `requireNativeComponent` function takes the name of the native view. Note th So now we know how to expose native view components that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the `getId()` method. - + ```kotlin @@ -242,7 +242,7 @@ class MyCustomView extends View { To map the `topChange` event name to the `onChange` callback prop in JavaScript, register it by overriding the `getExportedCustomBubblingEventTypeConstants` method in your `ViewManager`: - + ```kotlin @@ -318,7 +318,7 @@ In order to integrate existing Native UI elements to your React Native app, you First, let's create a `CustomView` class which extends `FrameLayout` (the content of this view can be any view that you'd like to render) - + ```kotlin title="CustomView.kt" @@ -379,7 +379,7 @@ public class CustomView extends FrameLayout { ### 2. Create a `Fragment` - + ```kotlin title="MyFragment.kt" @@ -491,7 +491,7 @@ public class MyFragment extends Fragment { ### 3. Create the `ViewManager` subclass - + ```kotlin title="MyViewManager.kt" @@ -737,7 +737,7 @@ public class MyViewManager extends ViewGroupManager { ### 4. Register the `ViewManager` - + ```kotlin title="MyPackage.kt" @@ -787,7 +787,7 @@ public class MyPackage implements ReactPackage { ### 5. Register the `Package` - + ```kotlin title="MainApplication.kt" diff --git a/website/versioned_docs/version-0.69/native-modules-android.md b/website/versioned_docs/version-0.69/native-modules-android.md index 5eb977ae318..92fa25b9709 100644 --- a/website/versioned_docs/version-0.69/native-modules-android.md +++ b/website/versioned_docs/version-0.69/native-modules-android.md @@ -37,7 +37,7 @@ The first step is to create the (`CalendarModule.java` or `CalendarModule.kt`) J Then add the following content: - + ```java @@ -84,7 +84,7 @@ As you can see, your `CalendarModule` class extends the `ReactContextBaseJavaMod All Java/Kotlin native modules in Android need to implement the `getName()` method. This method returns a string, which represents the name of the native module. The native module can then be accessed in JavaScript using its name. For example, in the below code snippet, `getName()` returns `"CalendarModule"`. - + ```java @@ -118,7 +118,7 @@ Next you will need to add a method to your native module that will create calend Set up a method `createCalendarEvent()` for `CalendarModule` that can be invoked in JS through `CalendarModule.createCalendarEvent()`. For now, the method will take in a name and location as strings. Argument type options will be covered shortly. - + ```java @@ -139,7 +139,7 @@ public void createCalendarEvent(String name, String location) { Add a debug log in the method to confirm it has been invoked when you call it from your application. Below is an example of how you can import and use the [Log](https://developer.android.com/reference/android/util/Log) class from the Android util package: - + ```java @@ -173,7 +173,7 @@ Once you finish implementing the native module and hook it up in JavaScript, you You can pass `isBlockingSynchronousMethod = true` to a native method to mark it as a synchronous method. - + ```java @@ -202,7 +202,7 @@ To add your Native Module to `ReactPackage`, first create a new Java/Kotlin Clas Then add the following content: - + ```java @@ -272,7 +272,7 @@ To register the `CalendarModule` package, you must add `MyAppPackage` to the lis Locate ReactNativeHost’s `getPackages()` method and add your package to the packages list `getPackages()` returns: - + ```java @@ -443,7 +443,7 @@ When a native module method is invoked in JavaScript, React Native converts the For argument types not listed above, you will need to handle the conversion yourself. For example, in Android, `Date` conversion is not supported out of the box. You can handle the conversion to the `Date` type within the native method yourself like so: - + ```java @@ -477,7 +477,7 @@ For argument types not listed above, you will need to handle the conversion your A native module can export constants by implementing the native method `getConstants()`, which is available in JS. Below you will implement `getConstants()` and return a Map that contains a `DEFAULT_EVENT_NAME` constant you can access in JavaScript: - + ```java @@ -517,7 +517,7 @@ Native modules also support a unique kind of argument: a callback. Callbacks are In order to create a native module method with a callback, first import the `Callback` interface, and then add a new parameter to your native module method of type `Callback`. There are a couple of nuances with callback arguments that will soon be lifted with TurboModules. First off, you can only have two callbacks in your function arguments- a successCallback and a failureCallback. In addition, the last argument to a native module method call, if it's a function, is treated as the successCallback, and the second to last argument to a native module method call, if it's a function, is treated as the failure callback. - + ```java @@ -542,7 +542,7 @@ import com.facebook.react.bridge.Callback You can invoke the callback in your Java/Kotlin method, providing whatever data you want to pass to JavaScript. Please note that you can only pass serializable data from native code to JavaScript. If you need to pass back a native object you can use `WriteableMaps`, if you need to use a collection use `WritableArrays`. It is also important to highlight that the callback is not invoked immediately after the native function completes. Below the ID of an event created in an earlier call is passed to the callback. - + ```java @@ -585,7 +585,7 @@ Another important detail to note is that a native module method can only invoke There are two approaches to error handling with callbacks. The first is to follow Node’s convention and treat the first argument passed to the callback as an error object. - + ```java @@ -629,7 +629,7 @@ const onPress = () => { Another option is to use an onSuccess and onFailure callback: - + ```java @@ -677,7 +677,7 @@ Native modules can also fulfill a [Promise](https://developer.mozilla.org/en-US/ Refactoring the above code to use a promise instead of callbacks looks like this: - + ```java @@ -732,7 +732,7 @@ const onSubmit = async () => { The reject method takes different combinations of the following arguments: - + ```java @@ -753,7 +753,7 @@ For more detail, you can find the `Promise.java` interface [here](https://github Java/Kotlin reject call: - + ```java @@ -781,7 +781,7 @@ Error message in React Native App when promise is rejected: Native modules can signal events to JavaScript without being invoked directly. For example, you might want to signal to JavaScript a reminder that a calendar event from the native Android calendar app will occur soon. The easiest way to do this is to use the `RCTDeviceEventEmitter` which can be obtained from the `ReactContext` as in the code snippet below. - + ```java @@ -892,7 +892,7 @@ import { NativeEventEmitter, NativeModules } from 'react-native'; You'll need to listen to `onActivityResult` if you want to get results from an activity you started with `startActivityForResult`. To do this, you must extend `BaseActivityEventListener` or implement `ActivityEventListener`. The former is preferred as it is more resilient to API changes. Then, you need to register the listener in the module's constructor like so: - + ```java @@ -911,7 +911,7 @@ reactContext.addActivityEventListener(mActivityResultListener); Now you can listen to `onActivityResult` by implementing the following method: - + ```java @@ -944,7 +944,7 @@ override fun onActivityResult( Let's implement a basic image picker to demonstrate this. The image picker will expose the method `pickImage` to JavaScript, which will return the path of the image when called. - + ```jsx @@ -1104,7 +1104,7 @@ class ImagePickerModule(reactContext: ReactApplicationContext) : Listening to the activity's LifeCycle events such as `onResume`, `onPause` etc. is very similar to how `ActivityEventListener` was implemented. The module must implement `LifecycleEventListener`. Then, you need to register a listener in the module's constructor like so: - + ```java @@ -1123,7 +1123,7 @@ reactContext.addLifecycleEventListener(this) Now you can listen to the activity's LifeCycle events by implementing the following methods: - + ```java diff --git a/website/versioned_docs/version-0.69/network.md b/website/versioned_docs/version-0.69/network.md index 007662031c7..e2379eafe33 100644 --- a/website/versioned_docs/version-0.69/network.md +++ b/website/versioned_docs/version-0.69/network.md @@ -74,7 +74,7 @@ const getMoviesFromApiAsync = async () => { Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently. - + ```SnackPlayer name=Fetch%20Example diff --git a/website/versioned_docs/version-0.69/new-architecture-library-intro.md b/website/versioned_docs/version-0.69/new-architecture-library-intro.md index abb827cd480..adb67024a54 100644 --- a/website/versioned_docs/version-0.69/new-architecture-library-intro.md +++ b/website/versioned_docs/version-0.69/new-architecture-library-intro.md @@ -35,7 +35,7 @@ JavaScript spec files **must** be named `Native.js` (for TypeScript The following snippets show a basic spec template, written in [Flow](https://flow.org/) as well as [TypeScript](https://www.typescriptlang.org/). - + ```ts @@ -80,7 +80,7 @@ JavaScript spec files **must** be named `NativeComponent.js` ( The following snippet shows a basic JavaScript spec template, written in [Flow](https://flow.org/) as well as [TypeScript](https://www.typescriptlang.org/). - + ```ts @@ -574,7 +574,7 @@ RCT_EXPORT_METHOD(moveToRegion:(nonnull NSNumber *)reactTag **Android** - + ```kotlin diff --git a/website/versioned_docs/version-0.69/optimizing-flatlist-configuration.md b/website/versioned_docs/version-0.69/optimizing-flatlist-configuration.md index 716d4d6c447..23f15207f69 100644 --- a/website/versioned_docs/version-0.69/optimizing-flatlist-configuration.md +++ b/website/versioned_docs/version-0.69/optimizing-flatlist-configuration.md @@ -125,7 +125,7 @@ You can also use a `key` prop in your item component. Move out the `renderItem` function to the outside of render function, so it won't recreate itself each time render function called. - + ```jsx diff --git a/website/versioned_docs/version-0.69/panresponder.md b/website/versioned_docs/version-0.69/panresponder.md index e075ef77a98..c70a825625e 100644 --- a/website/versioned_docs/version-0.69/panresponder.md +++ b/website/versioned_docs/version-0.69/panresponder.md @@ -80,7 +80,7 @@ const ExampleComponent = () => { `PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen - + ```SnackPlayer name=PanResponder diff --git a/website/versioned_docs/version-0.69/permissionsandroid.md b/website/versioned_docs/version-0.69/permissionsandroid.md index 7ff278ddccc..a7b3d4e8fd0 100644 --- a/website/versioned_docs/version-0.69/permissionsandroid.md +++ b/website/versioned_docs/version-0.69/permissionsandroid.md @@ -20,7 +20,7 @@ If a user has previously turned off a permission that you prompt for, the OS wil ### Example - + ```SnackPlayer name=PermissionsAndroid%20Example&supportedPlatforms=android diff --git a/website/versioned_docs/version-0.69/platformcolor.md b/website/versioned_docs/version-0.69/platformcolor.md index d5f97d4009b..83e0846fe93 100644 --- a/website/versioned_docs/version-0.69/platformcolor.md +++ b/website/versioned_docs/version-0.69/platformcolor.md @@ -32,7 +32,7 @@ For a full list of the types of system colors supported, see: #### Developer notes - + diff --git a/website/versioned_docs/version-0.69/react-18-and-react-native.md b/website/versioned_docs/version-0.69/react-18-and-react-native.md index 2755ab0b0da..be704909bfa 100644 --- a/website/versioned_docs/version-0.69/react-18-and-react-native.md +++ b/website/versioned_docs/version-0.69/react-18-and-react-native.md @@ -42,7 +42,7 @@ However, if you do hit any issues, we provide an option to opt-out of the new ro On Android, you will be able to override the `isConcurrentRootEnabled` in your ActivityDelegate (in the `MainActivity` file), and enable/disable Concurrent React. - + diff --git a/website/versioned_docs/version-0.69/running-on-device.md b/website/versioned_docs/version-0.69/running-on-device.md index cd9d5a56012..d12e454b34b 100644 --- a/website/versioned_docs/version-0.69/running-on-device.md +++ b/website/versioned_docs/version-0.69/running-on-device.md @@ -12,14 +12,14 @@ It's always a good idea to test your app on an actual device before releasing it If you used `create-expo-app` to set up your project, you can run your app on a device in Expo Go by scanning the QR code that is displayed when you run `npm start`. Refer to the Expo guide for [running your project on your device](https://docs.expo.dev/workflow/run-on-device/) for more information. ::: - + ## Running your app on Android devices #### Development OS - + [//]: # 'macOS, Android' @@ -312,7 +312,7 @@ You have built a great app using React Native, and you are now itching to releas #### Development OS - + [//]: # 'macOS, iOS' diff --git a/website/versioned_docs/version-0.69/sectionlist.md b/website/versioned_docs/version-0.69/sectionlist.md index 2469a8c3167..c36017163c3 100644 --- a/website/versioned_docs/version-0.69/sectionlist.md +++ b/website/versioned_docs/version-0.69/sectionlist.md @@ -22,7 +22,7 @@ If you don't need section support and want a simpler interface, use [` ## Example - + ```SnackPlayer name=SectionList%20Example diff --git a/website/versioned_docs/version-0.69/security.md b/website/versioned_docs/version-0.69/security.md index fb900a57aae..632fe2e591f 100644 --- a/website/versioned_docs/version-0.69/security.md +++ b/website/versioned_docs/version-0.69/security.md @@ -34,7 +34,7 @@ If you must have an API key or a secret to access some resource from your app, t #### Developer Notes - + diff --git a/website/versioned_docs/version-0.69/share.md b/website/versioned_docs/version-0.69/share.md index 0d1a2b38ff2..5a14a74ada2 100644 --- a/website/versioned_docs/version-0.69/share.md +++ b/website/versioned_docs/version-0.69/share.md @@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ## Example - + ```SnackPlayer name=Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.69/systrace.md b/website/versioned_docs/version-0.69/systrace.md index 0a8e33897fe..a2e44ca5d79 100644 --- a/website/versioned_docs/version-0.69/systrace.md +++ b/website/versioned_docs/version-0.69/systrace.md @@ -11,7 +11,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con `Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler. - + ```SnackPlayer name=Systrace%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.69/text.md b/website/versioned_docs/version-0.69/text.md index 1e5401c1b35..b0e4db488d6 100644 --- a/website/versioned_docs/version-0.69/text.md +++ b/website/versioned_docs/version-0.69/text.md @@ -11,7 +11,7 @@ A React component for displaying text. In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines: - + ```SnackPlayer name=Text%20Functional%20Component%20Example diff --git a/website/versioned_docs/version-0.69/touchablehighlight.md b/website/versioned_docs/version-0.69/touchablehighlight.md index ca9fcca8eda..69c2e95cddd 100644 --- a/website/versioned_docs/version-0.69/touchablehighlight.md +++ b/website/versioned_docs/version-0.69/touchablehighlight.md @@ -32,7 +32,7 @@ function MyComponent(props) { ## Example - + ```SnackPlayer name=TouchableHighlight%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.69/touchableopacity.md b/website/versioned_docs/version-0.69/touchableopacity.md index d34d5679ab1..0aee82b6c16 100644 --- a/website/versioned_docs/version-0.69/touchableopacity.md +++ b/website/versioned_docs/version-0.69/touchableopacity.md @@ -13,7 +13,7 @@ Opacity is controlled by wrapping the children in an `Animated.View`, which is a ## Example - + ```SnackPlayer name=TouchableOpacity%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.69/transforms.md b/website/versioned_docs/version-0.69/transforms.md index 42bb8f02ac1..22da7098d18 100644 --- a/website/versioned_docs/version-0.69/transforms.md +++ b/website/versioned_docs/version-0.69/transforms.md @@ -9,7 +9,7 @@ Transforms are style properties that will help you modify the appearance and pos ## Example - + ```SnackPlayer name=Transforms diff --git a/website/versioned_docs/version-0.69/typescript.md b/website/versioned_docs/version-0.69/typescript.md index d860e66a503..3ab3941a22c 100644 --- a/website/versioned_docs/version-0.69/typescript.md +++ b/website/versioned_docs/version-0.69/typescript.md @@ -32,7 +32,7 @@ Optionally, you can also use the command given below to get started with your te You can use [Expo][expo], which maintains TypeScript templates, or will prompt you to automatically install and configure TypeScript when a `.ts` or `.tsx` file is added to your project: - + ```shell @@ -51,7 +51,7 @@ yarn create expo-app --template Or you could use [Ignite][ignite], which also has a TypeScript template: - + ```shell @@ -74,7 +74,7 @@ ignite new MyTSProject 1. Add TypeScript and the types for React Native and Jest to your project. - + ```shell @@ -223,7 +223,7 @@ To use custom path aliases with TypeScript, you need to set the path aliases to 2. Add [`babel-plugin-module-resolver`][bpmr] as a development package to your project: - + ```shell diff --git a/website/versioned_docs/version-0.69/vibration.md b/website/versioned_docs/version-0.69/vibration.md index c66b716ee21..8b30b14902f 100644 --- a/website/versioned_docs/version-0.69/vibration.md +++ b/website/versioned_docs/version-0.69/vibration.md @@ -9,7 +9,7 @@ Vibrates the device. ## Example - + ```SnackPlayer name=Vibration&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.69/view.md b/website/versioned_docs/version-0.69/view.md index 687058cb68f..f9ab982b994 100644 --- a/website/versioned_docs/version-0.69/view.md +++ b/website/versioned_docs/version-0.69/view.md @@ -11,7 +11,7 @@ The most fundamental component for building a UI, `View` is a container that sup This example creates a `View` that wraps two boxes with color and a text component in a row with padding. - + ```SnackPlayer name=View%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.70/_integration-with-existing-apps-objc.md b/website/versioned_docs/version-0.70/_integration-with-existing-apps-objc.md index 220245e9761..f2047c69f3b 100644 --- a/website/versioned_docs/version-0.70/_integration-with-existing-apps-objc.md +++ b/website/versioned_docs/version-0.70/_integration-with-existing-apps-objc.md @@ -39,7 +39,7 @@ Next, make sure you have [installed the yarn package manager](https://yarnpkg.co Install the `react` and `react-native` packages. Open a terminal or command prompt, then navigate to the directory with your `package.json` file and run: - + ```shell @@ -62,7 +62,7 @@ This will print a message similar to the following (scroll up in the yarn output This is OK, it means we also need to install React: - + ```shell @@ -346,7 +346,7 @@ Apple has blocked implicit cleartext HTTP resource loading. So we need to add th To run your app, you need to first start the development server. To do this, run the following command in the root directory of your React Native project: - + ```shell diff --git a/website/versioned_docs/version-0.70/accessibilityinfo.md b/website/versioned_docs/version-0.70/accessibilityinfo.md index 3d0555520b1..37e02756287 100644 --- a/website/versioned_docs/version-0.70/accessibilityinfo.md +++ b/website/versioned_docs/version-0.70/accessibilityinfo.md @@ -9,7 +9,7 @@ Sometimes it's useful to know whether or not the device has a screen reader that ## Example - + ```SnackPlayer name=AccessibilityInfo%20Function%20Component%20Example&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.70/activityindicator.md b/website/versioned_docs/version-0.70/activityindicator.md index 33e05f8d587..e3a6300d149 100644 --- a/website/versioned_docs/version-0.70/activityindicator.md +++ b/website/versioned_docs/version-0.70/activityindicator.md @@ -9,7 +9,7 @@ Displays a circular loading indicator. ## Example - + ```SnackPlayer name=ActivityIndicator%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.70/alert.md b/website/versioned_docs/version-0.70/alert.md index cd332863c3b..26acd574d17 100644 --- a/website/versioned_docs/version-0.70/alert.md +++ b/website/versioned_docs/version-0.70/alert.md @@ -13,7 +13,7 @@ This is an API that works both on Android and iOS and can show static alerts. Al ## Example - + ```SnackPlayer name=Alert%20Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.70/animated.md b/website/versioned_docs/version-0.70/animated.md index e805df991eb..006278d3601 100644 --- a/website/versioned_docs/version-0.70/animated.md +++ b/website/versioned_docs/version-0.70/animated.md @@ -9,7 +9,7 @@ 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://reactjs.org/docs/hooks-reference.html#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. @@ -26,7 +26,7 @@ The core workflow for creating an animation is to create an `Animated.Value`, ho The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim` - + ```SnackPlayer name=Animated diff --git a/website/versioned_docs/version-0.70/animations.md b/website/versioned_docs/version-0.70/animations.md index 55165d381a7..52c7df5ad60 100644 --- a/website/versioned_docs/version-0.70/animations.md +++ b/website/versioned_docs/version-0.70/animations.md @@ -232,7 +232,7 @@ The following example implements a horizontal scrolling carousel where the scrol #### ScrollView with Animated Event Example - + ```SnackPlayer name=Animated&supportedPlatforms=ios,android @@ -531,7 +531,7 @@ onPanResponderMove={Animated.event( #### PanResponder with Animated Event Example - + ```SnackPlayer name=Animated diff --git a/website/versioned_docs/version-0.70/appearance.md b/website/versioned_docs/version-0.70/appearance.md index fc9663a42c3..69f79d7cf18 100644 --- a/website/versioned_docs/version-0.70/appearance.md +++ b/website/versioned_docs/version-0.70/appearance.md @@ -13,7 +13,7 @@ The `Appearance` module exposes information about the user's appearance preferen #### Developer notes - + diff --git a/website/versioned_docs/version-0.70/appstate.md b/website/versioned_docs/version-0.70/appstate.md index 9ba3b7d3533..276895f6d3a 100644 --- a/website/versioned_docs/version-0.70/appstate.md +++ b/website/versioned_docs/version-0.70/appstate.md @@ -24,7 +24,7 @@ For more information, see [Apple's documentation](https://developer.apple.com/do To see the current state, you can check `AppState.currentState`, which will be kept up-to-date. However, `currentState` will be null at launch while `AppState` retrieves it over the bridge. - + ```SnackPlayer name=AppState%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.70/backhandler.md b/website/versioned_docs/version-0.70/backhandler.md index f86a5730492..3ca42179119 100644 --- a/website/versioned_docs/version-0.70/backhandler.md +++ b/website/versioned_docs/version-0.70/backhandler.md @@ -45,7 +45,7 @@ BackHandler.addEventListener('hardwareBackPress', function () { The following example implements a scenario where you confirm if the user wants to exit the app: - + ```SnackPlayer name=BackHandler&supportedPlatforms=android @@ -158,7 +158,7 @@ export default App; Additionally `BackHandler.removeEventListener` can also be used to clear the event listener. Ensure the callback has the reference to the same function used in the `addEventListener` call as shown the following example ﹣ - + ```SnackPlayer name=BackHandler&supportedPlatforms=android diff --git a/website/versioned_docs/version-0.70/building-for-tv.md b/website/versioned_docs/version-0.70/building-for-tv.md index 1a66d4a7c04..e9b6cf8eadd 100644 --- a/website/versioned_docs/version-0.70/building-for-tv.md +++ b/website/versioned_docs/version-0.70/building-for-tv.md @@ -8,7 +8,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications. - + diff --git a/website/versioned_docs/version-0.70/communication-android.md b/website/versioned_docs/version-0.70/communication-android.md index 3e04049a1af..3a63163e3a0 100644 --- a/website/versioned_docs/version-0.70/communication-android.md +++ b/website/versioned_docs/version-0.70/communication-android.md @@ -21,7 +21,7 @@ Properties are the most straightforward way of cross-component communication. So You can pass properties down to the React Native app by providing a custom implementation of `ReactActivityDelegate` in your main activity. This implementation should override `getLaunchOptions` to return a `Bundle` with the desired properties. - + @@ -82,7 +82,7 @@ export default class ImageBrowserApp extends React.Component { `ReactRootView` provides a read-write property `appProperties`. After `appProperties` is set, the React Native app is re-rendered with new properties. The update is only performed when the new updated properties differ from the previous ones. - + diff --git a/website/versioned_docs/version-0.70/custom-webview-android.md b/website/versioned_docs/version-0.70/custom-webview-android.md index ce5a15f111b..6384a1585d1 100644 --- a/website/versioned_docs/version-0.70/custom-webview-android.md +++ b/website/versioned_docs/version-0.70/custom-webview-android.md @@ -26,7 +26,7 @@ To get started, you'll need to create a subclass of `RNCWebViewManager`, `RNCWeb - `getName` - `addEventEmitters` - + ```java @@ -94,7 +94,7 @@ You'll need to follow the usual steps to [register the module](native-modules-an To add a new property, you'll need to add it to `CustomWebView`, and then expose it in `CustomWebViewManager`. - + ```java @@ -149,7 +149,7 @@ class CustomWebViewManager : RNCWebViewManager() { For events, you'll first need to make create event subclass. - + ```java @@ -198,7 +198,7 @@ You can trigger the event in your web view client. You can hook existing handler You should refer to [RNCWebViewManager.java](https://github.com/react-native-webview/react-native-webview/blob/master/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java) in the React Native WebView codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality. - + ```java @@ -274,7 +274,7 @@ protected class CustomWebViewClient : RNCWebViewClient() { Finally, you'll need to expose the events in `CustomWebViewManager` through `getExportedCustomDirectEventTypeConstants`. Note that currently, the default implementation returns `null`, but this may change in the future. - + ```java diff --git a/website/versioned_docs/version-0.70/datepickerios.md b/website/versioned_docs/version-0.70/datepickerios.md index b20f41ccba4..cb67cbb99cd 100644 --- a/website/versioned_docs/version-0.70/datepickerios.md +++ b/website/versioned_docs/version-0.70/datepickerios.md @@ -11,7 +11,7 @@ Use `DatePickerIOS` to render a date/time picker (selector) on iOS. This is a co ### Example - + ```SnackPlayer name=DatePickerIOS&supportedPlatforms=ios diff --git a/website/versioned_docs/version-0.70/debugging.md b/website/versioned_docs/version-0.70/debugging.md index a0b5b5ef8f1..c95228dd1d3 100644 --- a/website/versioned_docs/version-0.70/debugging.md +++ b/website/versioned_docs/version-0.70/debugging.md @@ -90,7 +90,7 @@ You can use [the standalone version of React Developer Tools](https://github.com > Note: Version 4 of `react-devtools` requires `react-native` version 0.62 or higher to work properly. - + ```shell diff --git a/website/versioned_docs/version-0.70/dimensions.md b/website/versioned_docs/version-0.70/dimensions.md index eff7b42fdec..47027e3654f 100644 --- a/website/versioned_docs/version-0.70/dimensions.md +++ b/website/versioned_docs/version-0.70/dimensions.md @@ -24,7 +24,7 @@ If you are targeting foldable devices or devices which can change the screen siz ## Example - + ```SnackPlayer name=Dimensions diff --git a/website/versioned_docs/version-0.70/dynamiccolorios.md b/website/versioned_docs/version-0.70/dynamiccolorios.md index 2cc219ea8c6..610845a24b4 100644 --- a/website/versioned_docs/version-0.70/dynamiccolorios.md +++ b/website/versioned_docs/version-0.70/dynamiccolorios.md @@ -22,7 +22,7 @@ At runtime, the system will choose which of the colors to display depending on t #### Developer notes - + diff --git a/website/versioned_docs/version-0.70/getting-started.md b/website/versioned_docs/version-0.70/getting-started.md index 7146a639dd2..09041eda1bc 100644 --- a/website/versioned_docs/version-0.70/getting-started.md +++ b/website/versioned_docs/version-0.70/getting-started.md @@ -14,12 +14,12 @@ This page will help you install and build your first React Native app. **If you are already familiar with mobile development**, you may want to use React Native CLI. It requires Xcode or Android Studio to get started. If you already have one of these tools installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them. - + Run the following command to create a new React Native project called "AwesomeProject": - + ```shell @@ -91,12 +91,12 @@ The instructions are a bit different depending on your development operating sys #### Development OS - + #### Target OS - + [//]: # 'macOS, Android' @@ -118,7 +118,7 @@ The instructions are a bit different depending on your development operating sys #### Target OS - + [//]: # 'Windows, Android' @@ -142,7 +142,7 @@ The instructions are a bit different depending on your development operating sys #### Target OS - + [//]: # 'Linux, Android' diff --git a/website/versioned_docs/version-0.70/headless-js-android.md b/website/versioned_docs/version-0.70/headless-js-android.md index c0e2f3e22ca..b9ca39150ef 100644 --- a/website/versioned_docs/version-0.70/headless-js-android.md +++ b/website/versioned_docs/version-0.70/headless-js-android.md @@ -33,7 +33,7 @@ You can do anything in your task such as network requests, timers and so on, as Yes, this does still require some native code, but it's pretty thin. You need to extend `HeadlessJsTaskService` and override `getTaskConfig`, e.g.: - + ```java @@ -104,7 +104,7 @@ Now, whenever you [start your service][0], e.g. as a periodic task or in respons Example: - + ```java @@ -140,7 +140,7 @@ By default, the headless JS task will not perform any retries. In order to do so `LinearCountingRetryPolicy` is an implementation of `HeadlessJsRetryPolicy` that allows you to specify a maximum number of retries with a fixed delay between each attempt. If that does not suit your needs then you can implement your own `HeadlessJsRetryPolicy`. These policies can be passed as an extra argument to the `HeadlessJsTaskConfig` constructor, e.g. - + ```java @@ -213,7 +213,7 @@ Following lines shows part of Android manifest file for registering broadcast re Broadcast receiver then handles intent that was broadcasted in onReceive function. This is a great place to check whether your app is on foreground or not. If app is not on foreground we can prepare our intent to be started, with no information or additional information bundled using `putExtra` (keep in mind bundle can handle only parcelable values). In the end service is started and wakelock is acquired. - + ```java diff --git a/website/versioned_docs/version-0.70/image-style-props.md b/website/versioned_docs/version-0.70/image-style-props.md index cae5d3a29ee..41212e7b14a 100644 --- a/website/versioned_docs/version-0.70/image-style-props.md +++ b/website/versioned_docs/version-0.70/image-style-props.md @@ -9,7 +9,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ### Image Resize Mode - + ```SnackPlayer name=Image%20Resize%20Modes%20Function%20Component%20Example @@ -182,7 +182,7 @@ export default DisplayAnImageWithStyle; ### Image Border - + ```SnackPlayer name=Style%20BorderWidth%20and%20BorderColor%20Function%20Component%20Example @@ -265,7 +265,7 @@ export default DisplayAnImageWithStyle; ### Image Border Radius - + ```SnackPlayer name=Style%20Border%20Radius%20Function%20Component%20Example @@ -416,7 +416,7 @@ export default DisplayAnImageWithStyle; ### Image Tint - + ```SnackPlayer name=Style%20tintColor%20Function%20Component diff --git a/website/versioned_docs/version-0.70/image.md b/website/versioned_docs/version-0.70/image.md index a34361b0e1b..1e053b51c7b 100644 --- a/website/versioned_docs/version-0.70/image.md +++ b/website/versioned_docs/version-0.70/image.md @@ -13,7 +13,7 @@ This example shows fetching and displaying an image from local storage as well a ## Examples - + ```SnackPlayer name=Function%20Component%20Example @@ -112,7 +112,7 @@ export default DisplayAnImage; You can also add `style` to an image: - + ```SnackPlayer name=Function%20Component%20Example diff --git a/website/versioned_docs/version-0.70/integration-with-android-fragment.md b/website/versioned_docs/version-0.70/integration-with-android-fragment.md index 90e49b1cca6..049119dd702 100644 --- a/website/versioned_docs/version-0.70/integration-with-android-fragment.md +++ b/website/versioned_docs/version-0.70/integration-with-android-fragment.md @@ -19,7 +19,7 @@ You will need to implement the `ReactApplication` interface in your main Applica Ensure your main Application class implements ReactApplication: - + ```kotlin @@ -38,7 +38,7 @@ public class MyReactApplication extends Application implements ReactApplication Override the required methods `getUseDeveloperSupport`, `getPackages` and `getReactNativeHost`: - + ```kotlin @@ -96,7 +96,7 @@ public class MyReactApplication extends Application implements ReactApplication If you are using Android Studio, use Alt + Enter to add all missing imports in your class. Alternatively these are the required imports to include manually: - + ```kotlin @@ -163,7 +163,7 @@ Now in your Activity class (e.g. `MainActivity.java` or `MainActivity.kt`) you n Add the button field to the top of your Activity: - + ```kotlin @@ -182,7 +182,7 @@ private Button mButton; Update your Activity's `onCreate` method as follows: - + ```kotlin @@ -239,7 +239,7 @@ If you are using a starter kit for React Native, replace the "HelloWorld" string Add the `getLaunchOptions` method which will allow you to pass props through to your component. This is optional and you can remove `setLaunchOptions` if you don't need to pass any props. - + ```kotlin @@ -265,7 +265,7 @@ private Bundle getLaunchOptions(String message) { Add all missing imports in your Activity class. Be careful to use your package’s BuildConfig and not the one from the facebook package! Alternatively these are the required imports to include manually: - + ```kotlin diff --git a/website/versioned_docs/version-0.70/integration-with-existing-apps.md b/website/versioned_docs/version-0.70/integration-with-existing-apps.md index 52d9380f9c9..237a9d39ce8 100644 --- a/website/versioned_docs/version-0.70/integration-with-existing-apps.md +++ b/website/versioned_docs/version-0.70/integration-with-existing-apps.md @@ -13,7 +13,7 @@ React Native is great when you are starting a new mobile app from scratch. Howev The specific steps are different depending on what platform you're targeting. - + diff --git a/website/versioned_docs/version-0.70/intro-react.md b/website/versioned_docs/version-0.70/intro-react.md index 7733ec65547..2b990cb3d44 100644 --- a/website/versioned_docs/version-0.70/intro-react.md +++ b/website/versioned_docs/version-0.70/intro-react.md @@ -21,7 +21,7 @@ If you want to dig deeper, we encourage you to check out [React’s official doc The rest of this introduction to React uses cats in its examples: friendly, approachable creatures that need names and a cafe to work in. Here is your very first Cat component: - + ```SnackPlayer name=Your%20Cat @@ -205,7 +205,7 @@ export default Cat; #### Developer notes - + @@ -315,7 +315,7 @@ While you can think of props as arguments you use to configure how components re The following example takes place in a cat cafe where two hungry cats are waiting to be fed. Their hunger, which we expect to change over time (unlike their names), is stored as state. To feed the cats, press their buttons—which will update their state. - + You can add state to a component by calling [React’s `useState` Hook](https://reactjs.org/docs/hooks-state.html). A Hook is a kind of function that lets you “hook into” React features. For example, `useState` is a Hook that lets you add state to function components. You can learn more about [other kinds of Hooks in the React documentation.](https://reactjs.org/docs/hooks-intro.html) diff --git a/website/versioned_docs/version-0.70/introduction.md b/website/versioned_docs/version-0.70/introduction.md index f77b91adf9b..1c924ccec0d 100644 --- a/website/versioned_docs/version-0.70/introduction.md +++ b/website/versioned_docs/version-0.70/introduction.md @@ -56,7 +56,7 @@ With React, you can make components using either classes or functions. Originall [Hooks were introduced in React Native 0.59.](/blog/2019/03/12/releasing-react-native-059), and because Hooks are the future-facing way to write your React components, we wrote this introduction using function component examples. Where useful, we also cover class components under a toggle like so: - + ```SnackPlayer name=Hello%20World%20Function%20Component @@ -111,7 +111,7 @@ You can find more examples of class components in [previous versions of this doc People from many different development backgrounds are learning React Native. You may have experience with a range of technologies, from web to Android to iOS and more. We try to write for developers from all backgrounds. Sometimes we provide explanations specific to one platform or another like so: - + diff --git a/website/versioned_docs/version-0.70/keyboard.md b/website/versioned_docs/version-0.70/keyboard.md index a34971f06d3..69a1c763cf6 100644 --- a/website/versioned_docs/version-0.70/keyboard.md +++ b/website/versioned_docs/version-0.70/keyboard.md @@ -11,7 +11,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it. - + ```SnackPlayer name=Keyboard%20Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.70/layoutanimation.md b/website/versioned_docs/version-0.70/layoutanimation.md index 10da37ba67d..0d6f4e0b0d9 100644 --- a/website/versioned_docs/version-0.70/layoutanimation.md +++ b/website/versioned_docs/version-0.70/layoutanimation.md @@ -120,7 +120,7 @@ Helper that creates an object (with `create`, `update`, and `delete` fields) to **Example:** - + ```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios @@ -336,7 +336,7 @@ Calls `configureNext()` with `Presets.spring`. **Example:** - + ```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.70/libraries.md b/website/versioned_docs/version-0.70/libraries.md index abecb19b5a6..fb6897d4521 100644 --- a/website/versioned_docs/version-0.70/libraries.md +++ b/website/versioned_docs/version-0.70/libraries.md @@ -22,7 +22,7 @@ If you have Node.js installed on your computer then you already have the npm CLI To install a library in your project, navigate to your project directory in your terminal and run the installation command. Let's try this with `react-native-webview`: - + ```shell diff --git a/website/versioned_docs/version-0.70/linking.md b/website/versioned_docs/version-0.70/linking.md index a37c3d9c15c..1b089210cc9 100644 --- a/website/versioned_docs/version-0.70/linking.md +++ b/website/versioned_docs/version-0.70/linking.md @@ -37,7 +37,7 @@ As mentioned in the introduction, there are some URL schemes for core functional If you want to enable deep links in your app, please read the below guide: - + > For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters). diff --git a/website/versioned_docs/version-0.70/modal.md b/website/versioned_docs/version-0.70/modal.md index bc461ae7af9..ebca2c77664 100644 --- a/website/versioned_docs/version-0.70/modal.md +++ b/website/versioned_docs/version-0.70/modal.md @@ -9,7 +9,7 @@ The Modal component is a basic way to present content above an enclosing view. ## Example - + ```SnackPlayer name=Modal&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.70/native-components-android.md b/website/versioned_docs/version-0.70/native-components-android.md index 1cac4343431..8f271a70ae2 100644 --- a/website/versioned_docs/version-0.70/native-components-android.md +++ b/website/versioned_docs/version-0.70/native-components-android.md @@ -32,7 +32,7 @@ To send a view: In this example we create view manager class `ReactImageManager` that extends `SimpleViewManager` of type `ReactImageView`. `ReactImageView` is the type of object managed by the manager, this will be the custom native view. Name returned by `getName` is used to reference the native view type from JavaScript. - + ```kotlin @@ -75,7 +75,7 @@ public class ReactImageManager extends SimpleViewManager { Views are created in the `createViewInstance` method, the view should initialize itself in its default state, any properties will be set via a follow up call to `updateView.` - + ```kotlin @@ -106,7 +106,7 @@ Except from `name`, `@ReactProp` annotation may take following optional argument Setter declaration requirements for methods annotated with `@ReactPropGroup` are different than for `@ReactProp`, please refer to the `@ReactPropGroup` annotation class docs for more information about it. **IMPORTANT!** in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" value can be specified using `defaultBoolean`, `defaultFloat`, etc. arguments of `@ReactProp` annotation, for complex types setter will be called with value set to `null`). - + ```kotlin @@ -153,7 +153,7 @@ Setter declaration requirements for methods annotated with `@ReactPropGroup` are The final step is to register the ViewManager to the application, this happens in a similar way to [Native Modules](native-modules-android.md), via the applications package member function `createViewManagers`. - + ```kotlin @@ -201,7 +201,7 @@ The `requireNativeComponent` function takes the name of the native view. Note th So now we know how to expose native view components that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the `getId()` method. - + ```kotlin @@ -241,7 +241,7 @@ class MyCustomView extends View { To map the `topChange` event name to the `onChange` callback prop in JavaScript, register it by overriding the `getExportedCustomBubblingEventTypeConstants` method in your `ViewManager`: - + ```kotlin @@ -317,7 +317,7 @@ In order to integrate existing Native UI elements to your React Native app, you First, let's create a `CustomView` class which extends `FrameLayout` (the content of this view can be any view that you'd like to render) - + ```kotlin title="CustomView.kt" @@ -378,7 +378,7 @@ public class CustomView extends FrameLayout { ### 2. Create a `Fragment` - + ```kotlin title="MyFragment.kt" @@ -490,7 +490,7 @@ public class MyFragment extends Fragment { ### 3. Create the `ViewManager` subclass - + ```kotlin title="MyViewManager.kt" @@ -736,7 +736,7 @@ public class MyViewManager extends ViewGroupManager { ### 4. Register the `ViewManager` - + ```kotlin title="MyPackage.kt" @@ -786,7 +786,7 @@ public class MyPackage implements ReactPackage { ### 5. Register the `Package` - + ```kotlin title="MainApplication.kt" diff --git a/website/versioned_docs/version-0.70/native-modules-android.md b/website/versioned_docs/version-0.70/native-modules-android.md index e67ef5f7061..32d478b2595 100644 --- a/website/versioned_docs/version-0.70/native-modules-android.md +++ b/website/versioned_docs/version-0.70/native-modules-android.md @@ -38,7 +38,7 @@ The first step is to create the (`CalendarModule.java` or `CalendarModule.kt`) J Then add the following content: - + ```java @@ -85,7 +85,7 @@ As you can see, your `CalendarModule` class extends the `ReactContextBaseJavaMod All Java/Kotlin native modules in Android need to implement the `getName()` method. This method returns a string, which represents the name of the native module. The native module can then be accessed in JavaScript using its name. For example, in the below code snippet, `getName()` returns `"CalendarModule"`. - + ```java @@ -119,7 +119,7 @@ Next you will need to add a method to your native module that will create calend Set up a method `createCalendarEvent()` for `CalendarModule` that can be invoked in JS through `CalendarModule.createCalendarEvent()`. For now, the method will take in a name and location as strings. Argument type options will be covered shortly. - + ```java @@ -140,7 +140,7 @@ public void createCalendarEvent(String name, String location) { Add a debug log in the method to confirm it has been invoked when you call it from your application. Below is an example of how you can import and use the [Log](https://developer.android.com/reference/android/util/Log) class from the Android util package: - + ```java @@ -174,7 +174,7 @@ Once you finish implementing the native module and hook it up in JavaScript, you You can pass `isBlockingSynchronousMethod = true` to a native method to mark it as a synchronous method. - + ```java @@ -203,7 +203,7 @@ To add your Native Module to `ReactPackage`, first create a new Java/Kotlin Clas Then add the following content: - + ```java @@ -273,7 +273,7 @@ To register the `CalendarModule` package, you must add `MyAppPackage` to the lis Locate ReactNativeHost’s `getPackages()` method and add your package to the packages list `getPackages()` returns: - + ```java @@ -444,7 +444,7 @@ When a native module method is invoked in JavaScript, React Native converts the For argument types not listed above, you will need to handle the conversion yourself. For example, in Android, `Date` conversion is not supported out of the box. You can handle the conversion to the `Date` type within the native method yourself like so: - + ```java @@ -478,7 +478,7 @@ For argument types not listed above, you will need to handle the conversion your A native module can export constants by implementing the native method `getConstants()`, which is available in JS. Below you will implement `getConstants()` and return a Map that contains a `DEFAULT_EVENT_NAME` constant you can access in JavaScript: - + ```java @@ -518,7 +518,7 @@ Native modules also support a unique kind of argument: a callback. Callbacks are In order to create a native module method with a callback, first import the `Callback` interface, and then add a new parameter to your native module method of type `Callback`. There are a couple of nuances with callback arguments that will soon be lifted with TurboModules. First off, you can only have two callbacks in your function arguments- a successCallback and a failureCallback. In addition, the last argument to a native module method call, if it's a function, is treated as the successCallback, and the second to last argument to a native module method call, if it's a function, is treated as the failure callback. - + ```java @@ -543,7 +543,7 @@ import com.facebook.react.bridge.Callback You can invoke the callback in your Java/Kotlin method, providing whatever data you want to pass to JavaScript. Please note that you can only pass serializable data from native code to JavaScript. If you need to pass back a native object you can use `WriteableMaps`, if you need to use a collection use `WritableArrays`. It is also important to highlight that the callback is not invoked immediately after the native function completes. Below the ID of an event created in an earlier call is passed to the callback. - + ```java @@ -586,7 +586,7 @@ Another important detail to note is that a native module method can only invoke There are two approaches to error handling with callbacks. The first is to follow Node’s convention and treat the first argument passed to the callback as an error object. - + ```java @@ -630,7 +630,7 @@ const onPress = () => { Another option is to use an onSuccess and onFailure callback: - + ```java @@ -678,7 +678,7 @@ Native modules can also fulfill a [Promise](https://developer.mozilla.org/en-US/ Refactoring the above code to use a promise instead of callbacks looks like this: - + ```java @@ -733,7 +733,7 @@ const onSubmit = async () => { The reject method takes different combinations of the following arguments: - + ```java @@ -754,7 +754,7 @@ For more detail, you can find the `Promise.java` interface [here](https://github Java/Kotlin reject call: - + ```java @@ -782,7 +782,7 @@ Error message in React Native App when promise is rejected: Native modules can signal events to JavaScript without being invoked directly. For example, you might want to signal to JavaScript a reminder that a calendar event from the native Android calendar app will occur soon. The easiest way to do this is to use the `RCTDeviceEventEmitter` which can be obtained from the `ReactContext` as in the code snippet below. - + ```java @@ -893,7 +893,7 @@ import { NativeEventEmitter, NativeModules } from 'react-native'; You'll need to listen to `onActivityResult` if you want to get results from an activity you started with `startActivityForResult`. To do this, you must extend `BaseActivityEventListener` or implement `ActivityEventListener`. The former is preferred as it is more resilient to API changes. Then, you need to register the listener in the module's constructor like so: - + ```java @@ -912,7 +912,7 @@ reactContext.addActivityEventListener(mActivityResultListener); Now you can listen to `onActivityResult` by implementing the following method: - + ```java @@ -945,7 +945,7 @@ override fun onActivityResult( Let's implement a basic image picker to demonstrate this. The image picker will expose the method `pickImage` to JavaScript, which will return the path of the image when called. - + ```jsx @@ -1105,7 +1105,7 @@ class ImagePickerModule(reactContext: ReactApplicationContext) : Listening to the activity's LifeCycle events such as `onResume`, `onPause` etc. is very similar to how `ActivityEventListener` was implemented. The module must implement `LifecycleEventListener`. Then, you need to register a listener in the module's constructor like so: - + ```java @@ -1124,7 +1124,7 @@ reactContext.addLifecycleEventListener(this) Now you can listen to the activity's LifeCycle events by implementing the following methods: - + ```java diff --git a/website/versioned_docs/version-0.70/network.md b/website/versioned_docs/version-0.70/network.md index 007662031c7..e2379eafe33 100644 --- a/website/versioned_docs/version-0.70/network.md +++ b/website/versioned_docs/version-0.70/network.md @@ -74,7 +74,7 @@ const getMoviesFromApiAsync = async () => { Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently. - + ```SnackPlayer name=Fetch%20Example diff --git a/website/versioned_docs/version-0.70/new-architecture-app-modules-android.md b/website/versioned_docs/version-0.70/new-architecture-app-modules-android.md index 02069ffac51..761188a35a3 100644 --- a/website/versioned_docs/version-0.70/new-architecture-app-modules-android.md +++ b/website/versioned_docs/version-0.70/new-architecture-app-modules-android.md @@ -103,7 +103,7 @@ yarn react-native run-android Now is time to actually use the Turbo Native Module. First, we will need to create a `ReactPackageTurboModuleManagerDelegate` subclass, like the following: - + ```java @@ -201,7 +201,7 @@ Then, you can provide the class you created to your `ReactNativeHost`. You can l Once you located it, you need to add the `getReactPackageTurboModuleManagerDelegateBuilder` method as from the snippet below: - + ```java @@ -261,7 +261,7 @@ class MyApplication : Application(), ReactApplication { Still on the `ReactNativeHost` , we need to extend the the `getPackages()` method to include the newly created Turbo Native Module. Update the method to include the following: - + ```java @@ -534,7 +534,7 @@ JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *) { Now you can finally enable the `Turbo Native Module` support in your Application. To do so, you need to turn on the `useTurboModule` flag inside your Application `onCreate` method. - + ```java diff --git a/website/versioned_docs/version-0.70/new-architecture-library-android.md b/website/versioned_docs/version-0.70/new-architecture-library-android.md index 09f1ee2fb7f..ea35595b75f 100644 --- a/website/versioned_docs/version-0.70/new-architecture-library-android.md +++ b/website/versioned_docs/version-0.70/new-architecture-library-android.md @@ -57,7 +57,7 @@ Update your native module or component to ensure it **extends the abstract class Following the example set forth in the previous section, your library might import `NativeAwesomeManagerSpec`, implement the relevant native interface and the necessary methods for it: - + diff --git a/website/versioned_docs/version-0.70/new-architecture-library-intro.md b/website/versioned_docs/version-0.70/new-architecture-library-intro.md index aca0e584d3d..f208b13e823 100644 --- a/website/versioned_docs/version-0.70/new-architecture-library-intro.md +++ b/website/versioned_docs/version-0.70/new-architecture-library-intro.md @@ -29,7 +29,7 @@ JavaScript spec files **must** be named `Native.js` and they export The following is a basic JavaScript spec template, written using the [Flow](https://flow.org/) syntax as well as [TypeScript](https://www.typescriptlang.org/). - @@ -76,7 +76,7 @@ JavaScript spec files **must** be named `NativeComponent.js` ( The following snippet shows a basic JavaScript spec template, written in [Flow](https://flow.org/) as well as [TypeScript](https://www.typescriptlang.org/). - @@ -632,7 +632,7 @@ RCT_EXPORT_METHOD(moveToRegion:(nonnull NSNumber *)reactTag **Android** - + ```kotlin diff --git a/website/versioned_docs/version-0.70/optimizing-flatlist-configuration.md b/website/versioned_docs/version-0.70/optimizing-flatlist-configuration.md index 716d4d6c447..23f15207f69 100644 --- a/website/versioned_docs/version-0.70/optimizing-flatlist-configuration.md +++ b/website/versioned_docs/version-0.70/optimizing-flatlist-configuration.md @@ -125,7 +125,7 @@ You can also use a `key` prop in your item component. Move out the `renderItem` function to the outside of render function, so it won't recreate itself each time render function called. - + ```jsx diff --git a/website/versioned_docs/version-0.70/panresponder.md b/website/versioned_docs/version-0.70/panresponder.md index e075ef77a98..c70a825625e 100644 --- a/website/versioned_docs/version-0.70/panresponder.md +++ b/website/versioned_docs/version-0.70/panresponder.md @@ -80,7 +80,7 @@ const ExampleComponent = () => { `PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen - + ```SnackPlayer name=PanResponder diff --git a/website/versioned_docs/version-0.70/permissionsandroid.md b/website/versioned_docs/version-0.70/permissionsandroid.md index b032e38dce7..76fab323a6b 100644 --- a/website/versioned_docs/version-0.70/permissionsandroid.md +++ b/website/versioned_docs/version-0.70/permissionsandroid.md @@ -20,7 +20,7 @@ If a user has previously turned off a permission that you prompt for, the OS wil ### Example - + ```SnackPlayer name=PermissionsAndroid%20Example&supportedPlatforms=android diff --git a/website/versioned_docs/version-0.70/platformcolor.md b/website/versioned_docs/version-0.70/platformcolor.md index d5f97d4009b..83e0846fe93 100644 --- a/website/versioned_docs/version-0.70/platformcolor.md +++ b/website/versioned_docs/version-0.70/platformcolor.md @@ -32,7 +32,7 @@ For a full list of the types of system colors supported, see: #### Developer notes - + diff --git a/website/versioned_docs/version-0.70/react-18-and-react-native.md b/website/versioned_docs/version-0.70/react-18-and-react-native.md index bfd04f7c5c0..985560f4ff4 100644 --- a/website/versioned_docs/version-0.70/react-18-and-react-native.md +++ b/website/versioned_docs/version-0.70/react-18-and-react-native.md @@ -45,7 +45,7 @@ However, if you do hit any issues, we provide an option to opt-out of the new ro On Android, you will be able to override the `isConcurrentRootEnabled` in your ActivityDelegate (in the `MainActivity` file), and enable/disable Concurrent React. - + diff --git a/website/versioned_docs/version-0.70/running-on-device.md b/website/versioned_docs/version-0.70/running-on-device.md index dff11dfc45f..9415a0b2240 100644 --- a/website/versioned_docs/version-0.70/running-on-device.md +++ b/website/versioned_docs/version-0.70/running-on-device.md @@ -12,14 +12,14 @@ It's always a good idea to test your app on an actual device before releasing it If you used `create-expo-app` to set up your project, you can run your app on a device in Expo Go by scanning the QR code that is displayed when you run `npm start`. Refer to the Expo guide for [running your project on your device](https://docs.expo.dev/workflow/run-on-device/) for more information. ::: - + ## Running your app on Android devices #### Development OS - + [//]: # 'macOS, Android' @@ -316,7 +316,7 @@ You have built a great app using React Native, and you are now itching to releas #### Development OS - + [//]: # 'macOS, iOS' diff --git a/website/versioned_docs/version-0.70/sectionlist.md b/website/versioned_docs/version-0.70/sectionlist.md index 5b28b31c62d..2b8690b4522 100644 --- a/website/versioned_docs/version-0.70/sectionlist.md +++ b/website/versioned_docs/version-0.70/sectionlist.md @@ -22,7 +22,7 @@ If you don't need section support and want a simpler interface, use [` ## Example - + ```SnackPlayer name=SectionList%20Example diff --git a/website/versioned_docs/version-0.70/security.md b/website/versioned_docs/version-0.70/security.md index fb900a57aae..632fe2e591f 100644 --- a/website/versioned_docs/version-0.70/security.md +++ b/website/versioned_docs/version-0.70/security.md @@ -34,7 +34,7 @@ If you must have an API key or a secret to access some resource from your app, t #### Developer Notes - + diff --git a/website/versioned_docs/version-0.70/share.md b/website/versioned_docs/version-0.70/share.md index 0d1a2b38ff2..5a14a74ada2 100644 --- a/website/versioned_docs/version-0.70/share.md +++ b/website/versioned_docs/version-0.70/share.md @@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ## Example - + ```SnackPlayer name=Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.70/systrace.md b/website/versioned_docs/version-0.70/systrace.md index 0a8e33897fe..a2e44ca5d79 100644 --- a/website/versioned_docs/version-0.70/systrace.md +++ b/website/versioned_docs/version-0.70/systrace.md @@ -11,7 +11,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con `Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler. - + ```SnackPlayer name=Systrace%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.70/text.md b/website/versioned_docs/version-0.70/text.md index 1e5401c1b35..b0e4db488d6 100644 --- a/website/versioned_docs/version-0.70/text.md +++ b/website/versioned_docs/version-0.70/text.md @@ -11,7 +11,7 @@ A React component for displaying text. In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines: - + ```SnackPlayer name=Text%20Functional%20Component%20Example diff --git a/website/versioned_docs/version-0.70/the-new-architecture/backward-compatibility-fabric-components.md b/website/versioned_docs/version-0.70/the-new-architecture/backward-compatibility-fabric-components.md index 82dac6951b3..970d35da44c 100644 --- a/website/versioned_docs/version-0.70/the-new-architecture/backward-compatibility-fabric-components.md +++ b/website/versioned_docs/version-0.70/the-new-architecture/backward-compatibility-fabric-components.md @@ -395,7 +395,7 @@ import MyComponent from 'your-component/src/index'; Since `codegenNativeComponent` is calling the `requireNativeComponent` under the hood, we need to re-export our component, to avoid registering it multiple times. - diff --git a/website/versioned_docs/version-0.70/the-new-architecture/backward-compatibility-turbomodules.md b/website/versioned_docs/version-0.70/the-new-architecture/backward-compatibility-turbomodules.md index 61484fa9e57..65a11d14984 100644 --- a/website/versioned_docs/version-0.70/the-new-architecture/backward-compatibility-turbomodules.md +++ b/website/versioned_docs/version-0.70/the-new-architecture/backward-compatibility-turbomodules.md @@ -355,7 +355,7 @@ import MyModule from 'your-module/src/index'; Since `TurboModuleRegistry.get` taps into the old Native Modules API under the hood, we need to re-export our module, to avoid registering it multiple times. - diff --git a/website/versioned_docs/version-0.70/the-new-architecture/pillars-codegen.md b/website/versioned_docs/version-0.70/the-new-architecture/pillars-codegen.md index 03262058d95..2c9d5eab615 100644 --- a/website/versioned_docs/version-0.70/the-new-architecture/pillars-codegen.md +++ b/website/versioned_docs/version-0.70/the-new-architecture/pillars-codegen.md @@ -151,7 +151,7 @@ This tasks invokes the `generateCodegenArtifactsFromSchema` on all the the impor Once the Gradle task completes, you can see different structures for a Turbo Native Module or for a Fabric Native Component. The following tab shows how they appear: - + ```sh diff --git a/website/versioned_docs/version-0.70/the-new-architecture/pillars-fabric-components.md b/website/versioned_docs/version-0.70/the-new-architecture/pillars-fabric-components.md index 5d2503848db..ca2d654d6af 100644 --- a/website/versioned_docs/version-0.70/the-new-architecture/pillars-fabric-components.md +++ b/website/versioned_docs/version-0.70/the-new-architecture/pillars-fabric-components.md @@ -66,7 +66,7 @@ There are two requirements the file containing this specification must meet: Below are specifications of the `RTNCenteredText` component in both Flow and TypeScript. Create a `RTNCenteredText` file with the proper extension in the `js` folder. - + ```typescript @@ -830,7 +830,7 @@ Android configuration requires to enable the **New Architecture**. Finally, you can use the component in your JavaScript application. - + ```typescript title="App.js" diff --git a/website/versioned_docs/version-0.70/the-new-architecture/pillars-turbomodule.md b/website/versioned_docs/version-0.70/the-new-architecture/pillars-turbomodule.md index 18bdf86a437..7f8d1f845ea 100644 --- a/website/versioned_docs/version-0.70/the-new-architecture/pillars-turbomodule.md +++ b/website/versioned_docs/version-0.70/the-new-architecture/pillars-turbomodule.md @@ -60,7 +60,7 @@ There are two requirements the file containing this specification must meet: 1. The file **must** be named `Native`, with a `.js` or `.jsx` extension when using Flow, or a `.ts`, or `.tsx` extension when using TypeScript. Codegen will only look for files matching this pattern. 2. The file must export a `TurboModuleRegistrySpec` object. - + ```typescript title="NativeCalculator.js" @@ -666,7 +666,7 @@ Now you can use your Turbo Native Module calculator in your app! Here's an example App.js file using the `add` method: - + ```typescript title="App.js" diff --git a/website/versioned_docs/version-0.70/the-new-architecture/use-app-template.md b/website/versioned_docs/version-0.70/the-new-architecture/use-app-template.md index 04fcd9b3091..7c30b8ef9c7 100644 --- a/website/versioned_docs/version-0.70/the-new-architecture/use-app-template.md +++ b/website/versioned_docs/version-0.70/the-new-architecture/use-app-template.md @@ -49,7 +49,7 @@ Please [follow the instructions on the React Native website](hermes.md) in order #### Target OS - + Navigate to the `ios` directory and run the following: diff --git a/website/versioned_docs/version-0.70/touchablehighlight.md b/website/versioned_docs/version-0.70/touchablehighlight.md index ca9fcca8eda..69c2e95cddd 100644 --- a/website/versioned_docs/version-0.70/touchablehighlight.md +++ b/website/versioned_docs/version-0.70/touchablehighlight.md @@ -32,7 +32,7 @@ function MyComponent(props) { ## Example - + ```SnackPlayer name=TouchableHighlight%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.70/touchableopacity.md b/website/versioned_docs/version-0.70/touchableopacity.md index d34d5679ab1..0aee82b6c16 100644 --- a/website/versioned_docs/version-0.70/touchableopacity.md +++ b/website/versioned_docs/version-0.70/touchableopacity.md @@ -13,7 +13,7 @@ Opacity is controlled by wrapping the children in an `Animated.View`, which is a ## Example - + ```SnackPlayer name=TouchableOpacity%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.70/transforms.md b/website/versioned_docs/version-0.70/transforms.md index 42bb8f02ac1..22da7098d18 100644 --- a/website/versioned_docs/version-0.70/transforms.md +++ b/website/versioned_docs/version-0.70/transforms.md @@ -9,7 +9,7 @@ Transforms are style properties that will help you modify the appearance and pos ## Example - + ```SnackPlayer name=Transforms diff --git a/website/versioned_docs/version-0.70/typescript.md b/website/versioned_docs/version-0.70/typescript.md index d860e66a503..3ab3941a22c 100644 --- a/website/versioned_docs/version-0.70/typescript.md +++ b/website/versioned_docs/version-0.70/typescript.md @@ -32,7 +32,7 @@ Optionally, you can also use the command given below to get started with your te You can use [Expo][expo], which maintains TypeScript templates, or will prompt you to automatically install and configure TypeScript when a `.ts` or `.tsx` file is added to your project: - + ```shell @@ -51,7 +51,7 @@ yarn create expo-app --template Or you could use [Ignite][ignite], which also has a TypeScript template: - + ```shell @@ -74,7 +74,7 @@ ignite new MyTSProject 1. Add TypeScript and the types for React Native and Jest to your project. - + ```shell @@ -223,7 +223,7 @@ To use custom path aliases with TypeScript, you need to set the path aliases to 2. Add [`babel-plugin-module-resolver`][bpmr] as a development package to your project: - + ```shell diff --git a/website/versioned_docs/version-0.70/vibration.md b/website/versioned_docs/version-0.70/vibration.md index c66b716ee21..8b30b14902f 100644 --- a/website/versioned_docs/version-0.70/vibration.md +++ b/website/versioned_docs/version-0.70/vibration.md @@ -9,7 +9,7 @@ Vibrates the device. ## Example - + ```SnackPlayer name=Vibration&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.70/view.md b/website/versioned_docs/version-0.70/view.md index 687058cb68f..f9ab982b994 100644 --- a/website/versioned_docs/version-0.70/view.md +++ b/website/versioned_docs/version-0.70/view.md @@ -11,7 +11,7 @@ The most fundamental component for building a UI, `View` is a container that sup This example creates a `View` that wraps two boxes with color and a text component in a row with padding. - + ```SnackPlayer name=View%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.71/_integration-with-existing-apps-objc.md b/website/versioned_docs/version-0.71/_integration-with-existing-apps-objc.md index 220245e9761..f2047c69f3b 100644 --- a/website/versioned_docs/version-0.71/_integration-with-existing-apps-objc.md +++ b/website/versioned_docs/version-0.71/_integration-with-existing-apps-objc.md @@ -39,7 +39,7 @@ Next, make sure you have [installed the yarn package manager](https://yarnpkg.co Install the `react` and `react-native` packages. Open a terminal or command prompt, then navigate to the directory with your `package.json` file and run: - + ```shell @@ -62,7 +62,7 @@ This will print a message similar to the following (scroll up in the yarn output This is OK, it means we also need to install React: - + ```shell @@ -346,7 +346,7 @@ Apple has blocked implicit cleartext HTTP resource loading. So we need to add th To run your app, you need to first start the development server. To do this, run the following command in the root directory of your React Native project: - + ```shell diff --git a/website/versioned_docs/version-0.71/accessibilityinfo.md b/website/versioned_docs/version-0.71/accessibilityinfo.md index 0ba8355104c..371aad58a75 100644 --- a/website/versioned_docs/version-0.71/accessibilityinfo.md +++ b/website/versioned_docs/version-0.71/accessibilityinfo.md @@ -9,7 +9,7 @@ Sometimes it's useful to know whether or not the device has a screen reader that ## Example - + ```SnackPlayer name=AccessibilityInfo%20Function%20Component%20Example&supportedPlatforms=android,ios @@ -76,7 +76,7 @@ export default App; - + ```SnackPlayer name=AccessibilityInfo%20Class%20Component%20Example&supportedPlatforms=android,ios&ext=js diff --git a/website/versioned_docs/version-0.71/activityindicator.md b/website/versioned_docs/version-0.71/activityindicator.md index 6659c0c6a2f..b3db8bd4da0 100644 --- a/website/versioned_docs/version-0.71/activityindicator.md +++ b/website/versioned_docs/version-0.71/activityindicator.md @@ -9,7 +9,7 @@ Displays a circular loading indicator. ## Example - + ```SnackPlayer name=ActivityIndicator%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.71/alert.md b/website/versioned_docs/version-0.71/alert.md index e90473e384d..561a8098a2a 100644 --- a/website/versioned_docs/version-0.71/alert.md +++ b/website/versioned_docs/version-0.71/alert.md @@ -13,7 +13,7 @@ This is an API that works both on Android and iOS and can show static alerts. Al ## Example - + ```SnackPlayer name=Alert%20Function%20Component%20Example&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.71/animated.md b/website/versioned_docs/version-0.71/animated.md index 6c114a18d5d..08c8061d11b 100644 --- a/website/versioned_docs/version-0.71/animated.md +++ b/website/versioned_docs/version-0.71/animated.md @@ -9,7 +9,7 @@ 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://reactjs.org/docs/hooks-reference.html#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. @@ -26,7 +26,7 @@ The core workflow for creating an animation is to create an `Animated.Value`, ho The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim` - + ```SnackPlayer name=Animated diff --git a/website/versioned_docs/version-0.71/animations.md b/website/versioned_docs/version-0.71/animations.md index 5218ceae425..f7b2fcfaa04 100644 --- a/website/versioned_docs/version-0.71/animations.md +++ b/website/versioned_docs/version-0.71/animations.md @@ -17,7 +17,7 @@ The [`Animated`](animated) API is designed to concisely express a wide variety o For example, a container view that fades in when it is mounted may look like this: - + ```SnackPlayer ext=js @@ -310,7 +310,7 @@ The following example implements a horizontal scrolling carousel where the scrol #### ScrollView with Animated Event Example - + ```SnackPlayer name=Animated&supportedPlatforms=ios,android @@ -441,7 +441,7 @@ export default App; - + ```SnackPlayer name=Animated&supportedPlatforms=ios,android&ext=js @@ -774,7 +774,7 @@ onPanResponderMove={Animated.event( #### PanResponder with Animated Event Example - + ```SnackPlayer name=Animated diff --git a/website/versioned_docs/version-0.71/appearance.md b/website/versioned_docs/version-0.71/appearance.md index 0bc4ec8c7e3..28e067a30c2 100644 --- a/website/versioned_docs/version-0.71/appearance.md +++ b/website/versioned_docs/version-0.71/appearance.md @@ -13,7 +13,7 @@ The `Appearance` module exposes information about the user's appearance preferen #### Developer notes - + diff --git a/website/versioned_docs/version-0.71/appstate.md b/website/versioned_docs/version-0.71/appstate.md index 8a65cf9e9cf..5baa1cd1a73 100644 --- a/website/versioned_docs/version-0.71/appstate.md +++ b/website/versioned_docs/version-0.71/appstate.md @@ -24,7 +24,7 @@ For more information, see [Apple's documentation](https://developer.apple.com/do To see the current state, you can check `AppState.currentState`, which will be kept up-to-date. However, `currentState` will be null at launch while `AppState` retrieves it over the bridge. - + ```SnackPlayer name=AppState%20Function%20Component%20Example @@ -77,7 +77,7 @@ If you don't want to see the AppState update from `active` to `inactive` on iOS - + ```SnackPlayer name=AppState%20Class%20Component%20Example&ext=js diff --git a/website/versioned_docs/version-0.71/backhandler.md b/website/versioned_docs/version-0.71/backhandler.md index 43ed22af140..cae8cc4ffe2 100644 --- a/website/versioned_docs/version-0.71/backhandler.md +++ b/website/versioned_docs/version-0.71/backhandler.md @@ -45,7 +45,7 @@ BackHandler.addEventListener('hardwareBackPress', function () { The following example implements a scenario where you confirm if the user wants to exit the app: - + ```SnackPlayer name=BackHandler&supportedPlatforms=android @@ -99,7 +99,7 @@ export default App; - + ```SnackPlayer name=BackHandler&supportedPlatforms=android&ext=js diff --git a/website/versioned_docs/version-0.71/building-for-tv.md b/website/versioned_docs/version-0.71/building-for-tv.md index 3b18715bc0d..efaaf4d5576 100644 --- a/website/versioned_docs/version-0.71/building-for-tv.md +++ b/website/versioned_docs/version-0.71/building-for-tv.md @@ -8,7 +8,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications. - + diff --git a/website/versioned_docs/version-0.71/communication-android.md b/website/versioned_docs/version-0.71/communication-android.md index a6f89449c81..2a7aafefbfd 100644 --- a/website/versioned_docs/version-0.71/communication-android.md +++ b/website/versioned_docs/version-0.71/communication-android.md @@ -21,7 +21,7 @@ Properties are the most straightforward way of cross-component communication. So You can pass properties down to the React Native app by providing a custom implementation of `ReactActivityDelegate` in your main activity. This implementation should override `getLaunchOptions` to return a `Bundle` with the desired properties. - + @@ -82,7 +82,7 @@ export default class ImageBrowserApp extends React.Component { `ReactRootView` provides a read-write property `appProperties`. After `appProperties` is set, the React Native app is re-rendered with new properties. The update is only performed when the new updated properties differ from the previous ones. - + diff --git a/website/versioned_docs/version-0.71/custom-webview-android.md b/website/versioned_docs/version-0.71/custom-webview-android.md index bfb8be3c836..5140095872d 100644 --- a/website/versioned_docs/version-0.71/custom-webview-android.md +++ b/website/versioned_docs/version-0.71/custom-webview-android.md @@ -26,7 +26,7 @@ To get started, you'll need to create a subclass of `RNCWebViewManager`, `RNCWeb - `getName` - `addEventEmitters` - + ```java @@ -94,7 +94,7 @@ You'll need to follow the usual steps to [register the module](native-modules-an To add a new property, you'll need to add it to `CustomWebView`, and then expose it in `CustomWebViewManager`. - + ```java @@ -149,7 +149,7 @@ class CustomWebViewManager : RNCWebViewManager() { For events, you'll first need to make create event subclass. - + ```java @@ -198,7 +198,7 @@ You can trigger the event in your web view client. You can hook existing handler You should refer to [RNCWebViewManager.java](https://github.com/react-native-webview/react-native-webview/blob/master/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java) in the React Native WebView codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality. - + ```java @@ -274,7 +274,7 @@ protected class CustomWebViewClient : RNCWebViewClient() { Finally, you'll need to expose the events in `CustomWebViewManager` through `getExportedCustomDirectEventTypeConstants`. Note that currently, the default implementation returns `null`, but this may change in the future. - + ```java diff --git a/website/versioned_docs/version-0.71/datepickerios.md b/website/versioned_docs/version-0.71/datepickerios.md index 0820b586cd2..d236ffc01f6 100644 --- a/website/versioned_docs/version-0.71/datepickerios.md +++ b/website/versioned_docs/version-0.71/datepickerios.md @@ -11,7 +11,7 @@ Use `DatePickerIOS` to render a date/time picker (selector) on iOS. This is a co ### Example - + ```SnackPlayer name=DatePickerIOS&supportedPlatforms=ios diff --git a/website/versioned_docs/version-0.71/debugging.md b/website/versioned_docs/version-0.71/debugging.md index 17bc148534c..273f2173a88 100644 --- a/website/versioned_docs/version-0.71/debugging.md +++ b/website/versioned_docs/version-0.71/debugging.md @@ -90,7 +90,7 @@ You can use [the standalone version of React Developer Tools](https://github.com > Note: Version 4 of `react-devtools` requires `react-native` version 0.62 or higher to work properly. - + ```shell diff --git a/website/versioned_docs/version-0.71/dimensions.md b/website/versioned_docs/version-0.71/dimensions.md index 2eb9556460d..2a4e3ed184e 100644 --- a/website/versioned_docs/version-0.71/dimensions.md +++ b/website/versioned_docs/version-0.71/dimensions.md @@ -24,7 +24,7 @@ If you are targeting foldable devices or devices which can change the screen siz ## Example - + ```SnackPlayer name=Dimensions @@ -86,7 +86,7 @@ export default App; - + ```SnackPlayer name=Dimensions&ext=js diff --git a/website/versioned_docs/version-0.71/direct-manipulation.md b/website/versioned_docs/version-0.71/direct-manipulation.md index fcb0aa7a5da..cd434498260 100644 --- a/website/versioned_docs/version-0.71/direct-manipulation.md +++ b/website/versioned_docs/version-0.71/direct-manipulation.md @@ -63,7 +63,7 @@ If you look at the implementation of `setNativeProps` in [NativeMethodsMixin](ht Composite components are not backed by a native view, so you cannot call `setNativeProps` on them. Consider this example: - + ```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=js @@ -116,7 +116,7 @@ If you run this you will immediately see this error: `Touchable child must eithe Since the `setNativeProps` method exists on any ref to a `View` component, it is enough to forward a ref on your custom component to one of the `` components that it renders. This means that a call to `setNativeProps` on the custom component will have the same effect as if you called `setNativeProps` on the wrapped `View` component itself. - + ```SnackPlayer name=Forwarding%20setNativeProps&ext=js @@ -171,7 +171,7 @@ You may have noticed that we passed all of the props down to the child view usin Another very common use case of `setNativeProps` is to edit the value of the TextInput. The `controlled` prop of TextInput can sometimes drop characters when the `bufferDelay` is low and the user types very quickly. Some developers prefer to skip this prop entirely and instead use `setNativeProps` to directly manipulate the TextInput value when necessary. For example, the following code demonstrates editing the input when you tap a button: - + ```SnackPlayer name=Clear%20text&ext=js @@ -316,7 +316,7 @@ Like `measure()`, but measures the view relative to an ancestor, specified with This method can also be called with a `relativeToNativeNode` handler (instead of reference), but this variant is deprecated. ::: - + ```SnackPlayer name=measureLayout%20example&supportedPlatforms=android,ios&ext=js diff --git a/website/versioned_docs/version-0.71/drawerlayoutandroid.md b/website/versioned_docs/version-0.71/drawerlayoutandroid.md index c8e949ca592..2bc57c62cdc 100644 --- a/website/versioned_docs/version-0.71/drawerlayoutandroid.md +++ b/website/versioned_docs/version-0.71/drawerlayoutandroid.md @@ -9,7 +9,7 @@ React component that wraps the platform `DrawerLayout` (Android only). The Drawe ## Example - + ```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=js diff --git a/website/versioned_docs/version-0.71/dynamiccolorios.md b/website/versioned_docs/version-0.71/dynamiccolorios.md index b7af9f44320..d42afdb13e9 100644 --- a/website/versioned_docs/version-0.71/dynamiccolorios.md +++ b/website/versioned_docs/version-0.71/dynamiccolorios.md @@ -22,7 +22,7 @@ At runtime, the system will choose which of the colors to display depending on t #### Developer notes - + diff --git a/website/versioned_docs/version-0.71/easing.md b/website/versioned_docs/version-0.71/easing.md index e0f30cfa6a0..b701ca5df13 100644 --- a/website/versioned_docs/version-0.71/easing.md +++ b/website/versioned_docs/version-0.71/easing.md @@ -45,7 +45,7 @@ The following helpers are used to modify other easing functions. ## Example - + ```SnackPlayer name=Easing%20Demo&ext=js diff --git a/website/versioned_docs/version-0.71/flatlist.md b/website/versioned_docs/version-0.71/flatlist.md index 1fdaa150444..a05279cc5d2 100644 --- a/website/versioned_docs/version-0.71/flatlist.md +++ b/website/versioned_docs/version-0.71/flatlist.md @@ -22,7 +22,7 @@ If you need section support, use [``](sectionlist.md). ## Example - + ```SnackPlayer name=flatlist-simple&ext=js @@ -166,7 +166,7 @@ More complex, selectable example below. - By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes. - `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property. - + ```SnackPlayer name=flatlist-selectable&ext=js diff --git a/website/versioned_docs/version-0.71/flexbox.md b/website/versioned_docs/version-0.71/flexbox.md index c39fc3ae6b5..450642676fa 100644 --- a/website/versioned_docs/version-0.71/flexbox.md +++ b/website/versioned_docs/version-0.71/flexbox.md @@ -65,7 +65,7 @@ export default Flex; You can learn more [here](https://yogalayout.com/docs/flex-direction). - + ```SnackPlayer name=Flex%20Direction&ext=js @@ -282,7 +282,7 @@ Layout [`direction`](layout-props#direction) specifies the direction in which ch - `RTL` Text and children are laid out from right to left. Margin and padding applied to the start of an element are applied on the right side. - + ```SnackPlayer name=Flex%20Direction&ext=js @@ -509,7 +509,7 @@ export default DirectionLayout; You can learn more [here](https://yogalayout.com/docs/justify-content). - + ```SnackPlayer name=Justify%20Content&ext=js @@ -752,7 +752,7 @@ For `stretch` to have an effect, children must not have a fixed dimension along You can learn more [here](https://yogalayout.com/docs/align-items). - + ```SnackPlayer name=Align%20Items&ext=js @@ -985,7 +985,7 @@ export default AlignItemsLayout; [`alignSelf`](layout-props#alignself) has the same options and effect as `alignItems` but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. `alignSelf` overrides any option set by the parent with `alignItems`. - + ```SnackPlayer name=Align%20Self&ext=js @@ -1235,7 +1235,7 @@ export default AlignSelfLayout; You can learn more [here](https://yogalayout.com/docs/align-content). - + ```SnackPlayer name=Align%20Content&ext=js @@ -1476,7 +1476,7 @@ The [`flexWrap`](layout-props#flexwrap) property is set on containers and it con When wrapping lines, `alignContent` can be used to specify how the lines are placed in the container. Learn more [here](https://yogalayout.com/docs/flex-wrap). - + ```SnackPlayer name=Flex%20Wrap&ext=js @@ -1707,7 +1707,7 @@ export default FlexWrapLayout; You can learn more [here](https://yogalayout.com/docs/flex). - + ```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=js @@ -2080,7 +2080,7 @@ export default App; You can use `flexWrap` and `alignContent` alongwith `gap` to add consistent spacing between items. - + ```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=js @@ -2307,7 +2307,7 @@ Both `width` and `height` can take the following values: - `percentage` Defines the width or height in percentage of its parent's width or height, respectively. - + ```SnackPlayer name=Width%20and%20Height&ext=js @@ -2588,7 +2588,7 @@ The `position` type of an element defines how it is positioned within its parent - `absolute` When positioned absolutely, an element doesn't take part in the normal layout flow. It is instead laid out independent of its siblings. The position is determined based on the `top`, `right`, `bottom`, and `left` values. - + ```SnackPlayer name=Absolute%20%26%20Relative%20Layout&ext=js diff --git a/website/versioned_docs/version-0.71/getting-started.md b/website/versioned_docs/version-0.71/getting-started.md index ea3b70a6fcf..8f81855cfd9 100644 --- a/website/versioned_docs/version-0.71/getting-started.md +++ b/website/versioned_docs/version-0.71/getting-started.md @@ -14,12 +14,12 @@ This page will help you install and build your first React Native app. **If you are already familiar with mobile development**, you may want to use React Native CLI. It requires Xcode or Android Studio to get started. If you already have one of these tools installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them. - + Run the following command to create a new React Native project called "AwesomeProject": - + ```shell @@ -91,12 +91,12 @@ The instructions are a bit different depending on your development operating sys #### Development OS - + #### Target OS - + [//]: # 'macOS, Android' @@ -118,7 +118,7 @@ The instructions are a bit different depending on your development operating sys #### Target OS - + [//]: # 'Windows, Android' @@ -142,7 +142,7 @@ The instructions are a bit different depending on your development operating sys #### Target OS - + [//]: # 'Linux, Android' diff --git a/website/versioned_docs/version-0.71/headless-js-android.md b/website/versioned_docs/version-0.71/headless-js-android.md index 182ea307bb5..6ede22f13dc 100644 --- a/website/versioned_docs/version-0.71/headless-js-android.md +++ b/website/versioned_docs/version-0.71/headless-js-android.md @@ -33,7 +33,7 @@ You can do anything in your task such as network requests, timers and so on, as Yes, this does still require some native code, but it's pretty thin. You need to extend `HeadlessJsTaskService` and override `getTaskConfig`, e.g.: - + ```java @@ -104,7 +104,7 @@ Now, whenever you [start your service][0], e.g. as a periodic task or in respons Example: - + ```java @@ -140,7 +140,7 @@ By default, the headless JS task will not perform any retries. In order to do so `LinearCountingRetryPolicy` is an implementation of `HeadlessJsRetryPolicy` that allows you to specify a maximum number of retries with a fixed delay between each attempt. If that does not suit your needs then you can implement your own `HeadlessJsRetryPolicy`. These policies can be passed as an extra argument to the `HeadlessJsTaskConfig` constructor, e.g. - + ```java @@ -213,7 +213,7 @@ Following lines shows part of Android manifest file for registering broadcast re Broadcast receiver then handles intent that was broadcasted in onReceive function. This is a great place to check whether your app is on foreground or not. If app is not on foreground we can prepare our intent to be started, with no information or additional information bundled using `putExtra` (keep in mind bundle can handle only parcelable values). In the end service is started and wakelock is acquired. - + ```java diff --git a/website/versioned_docs/version-0.71/image-style-props.md b/website/versioned_docs/version-0.71/image-style-props.md index 916b2dd328c..34a43d8ac00 100644 --- a/website/versioned_docs/version-0.71/image-style-props.md +++ b/website/versioned_docs/version-0.71/image-style-props.md @@ -9,7 +9,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ### Image Resize Mode - + ```SnackPlayer name=Image%20Resize%20Modes%20Function%20Component%20Example @@ -182,7 +182,7 @@ export default DisplayAnImageWithStyle; ### Image Border - + ```SnackPlayer name=Style%20BorderWidth%20and%20BorderColor%20Function%20Component%20Example @@ -265,7 +265,7 @@ export default DisplayAnImageWithStyle; ### Image Border Radius - + ```SnackPlayer name=Style%20Border%20Radius%20Function%20Component%20Example @@ -416,7 +416,7 @@ export default DisplayAnImageWithStyle; ### Image Tint - + ```SnackPlayer name=Style%20tintColor%20Function%20Component diff --git a/website/versioned_docs/version-0.71/image.md b/website/versioned_docs/version-0.71/image.md index da149170a95..316764a236a 100644 --- a/website/versioned_docs/version-0.71/image.md +++ b/website/versioned_docs/version-0.71/image.md @@ -13,7 +13,7 @@ This example shows fetching and displaying an image from local storage as well a ## Examples - + ```SnackPlayer name=Function%20Component%20Example @@ -112,7 +112,7 @@ export default DisplayAnImage; You can also add `style` to an image: - + ```SnackPlayer name=Function%20Component%20Example diff --git a/website/versioned_docs/version-0.71/improvingux.md b/website/versioned_docs/version-0.71/improvingux.md index e36cd05ef68..8d6c4f14859 100644 --- a/website/versioned_docs/version-0.71/improvingux.md +++ b/website/versioned_docs/version-0.71/improvingux.md @@ -17,7 +17,7 @@ Entering text on touch phone is a challenge - small screen, software keyboard. B Check out [`TextInput` docs](textinput.md) for more configuration options. - + ```SnackPlayer name=TextInput%20form%20example&ext=js @@ -212,7 +212,7 @@ export default App; Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the [`KeyboardAvoidingView` component](keyboardavoidingview.md). - + ```SnackPlayer name=KeyboardAvoidingView%20example&ext=js diff --git a/website/versioned_docs/version-0.71/integration-with-android-fragment.md b/website/versioned_docs/version-0.71/integration-with-android-fragment.md index e479982449b..0f476dfa73b 100644 --- a/website/versioned_docs/version-0.71/integration-with-android-fragment.md +++ b/website/versioned_docs/version-0.71/integration-with-android-fragment.md @@ -19,7 +19,7 @@ You will need to implement the `ReactApplication` interface in your main Applica Ensure your main Application class implements ReactApplication: - + ```kotlin @@ -38,7 +38,7 @@ public class MyReactApplication extends Application implements ReactApplication Override the required methods `getUseDeveloperSupport`, `getPackages` and `getReactNativeHost`: - + ```kotlin @@ -96,7 +96,7 @@ public class MyReactApplication extends Application implements ReactApplication If you are using Android Studio, use Alt + Enter to add all missing imports in your class. Alternatively these are the required imports to include manually: - + ```kotlin @@ -165,7 +165,7 @@ Now in your Activity class (e.g. `MainActivity.java` or `MainActivity.kt`) you n Add the button field to the top of your Activity: - + ```kotlin @@ -184,7 +184,7 @@ private Button mButton; Update your Activity's `onCreate` method as follows: - + ```kotlin @@ -241,7 +241,7 @@ If you are using a starter kit for React Native, replace the "HelloWorld" string Add the `getLaunchOptions` method which will allow you to pass props through to your component. This is optional and you can remove `setLaunchOptions` if you don't need to pass any props. - + ```kotlin @@ -267,7 +267,7 @@ private Bundle getLaunchOptions(String message) { Add all missing imports in your Activity class. Be careful to use your package’s BuildConfig and not the one from the facebook package! Alternatively these are the required imports to include manually: - + ```kotlin diff --git a/website/versioned_docs/version-0.71/integration-with-existing-apps.md b/website/versioned_docs/version-0.71/integration-with-existing-apps.md index 52d9380f9c9..237a9d39ce8 100644 --- a/website/versioned_docs/version-0.71/integration-with-existing-apps.md +++ b/website/versioned_docs/version-0.71/integration-with-existing-apps.md @@ -13,7 +13,7 @@ React Native is great when you are starting a new mobile app from scratch. Howev The specific steps are different depending on what platform you're targeting. - + diff --git a/website/versioned_docs/version-0.71/interactionmanager.md b/website/versioned_docs/version-0.71/interactionmanager.md index cab9bd01144..42bd1893b50 100644 --- a/website/versioned_docs/version-0.71/interactionmanager.md +++ b/website/versioned_docs/version-0.71/interactionmanager.md @@ -43,7 +43,7 @@ By default, queued tasks are executed together in a loop in one `setImmediate` b ### Basic - + ```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js @@ -210,7 +210,7 @@ export default App; ### Advanced - + ```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=js diff --git a/website/versioned_docs/version-0.71/intro-react.md b/website/versioned_docs/version-0.71/intro-react.md index b48fca7f140..f2483c4b3a6 100644 --- a/website/versioned_docs/version-0.71/intro-react.md +++ b/website/versioned_docs/version-0.71/intro-react.md @@ -21,7 +21,7 @@ If you want to dig deeper, we encourage you to check out [React’s official doc The rest of this introduction to React uses cats in its examples: friendly, approachable creatures that need names and a cafe to work in. Here is your very first Cat component: - + ```SnackPlayer name=Your%20Cat @@ -145,7 +145,7 @@ export default Cat; Any JavaScript expression will work between curly braces, including function calls like `{getFullName("Rum", "Tum", "Tugger")}`: - + ```SnackPlayer name=Curly%20Braces&ext=js @@ -223,7 +223,7 @@ export default Cat; #### Developer notes - + @@ -273,7 +273,7 @@ You can put as many cats in your cafe as you like. Each `` renders a unique **Props** is short for “properties”. Props let you customize React components. For example, here you pass each `` a different `name` for `Cat` to render: - + ```SnackPlayer name=Multiple%20Props&ext=js @@ -373,12 +373,12 @@ While you can think of props as arguments you use to configure how components re The following example takes place in a cat cafe where two hungry cats are waiting to be fed. Their hunger, which we expect to change over time (unlike their names), is stored as state. To feed the cats, press their buttons—which will update their state. - + You can add state to a component by calling [React’s `useState` Hook](https://reactjs.org/docs/hooks-state.html). A Hook is a kind of function that lets you “hook into” React features. For example, `useState` is a Hook that lets you add state to function components. You can learn more about [other kinds of Hooks in the React documentation.](https://reactjs.org/docs/hooks-intro.html) - + ```SnackPlayer name=State&ext=js @@ -526,7 +526,7 @@ const Cafe = () => { The older class components approach is a little different when it comes to state. - + ```SnackPlayer name=State%20and%20Class%20Components&ext=js diff --git a/website/versioned_docs/version-0.71/introduction.md b/website/versioned_docs/version-0.71/introduction.md index 650ee42325a..531e051abd9 100644 --- a/website/versioned_docs/version-0.71/introduction.md +++ b/website/versioned_docs/version-0.71/introduction.md @@ -59,7 +59,7 @@ With React, you can make components using either classes or functions. Originall [Hooks were introduced in React Native 0.59.](/blog/2019/03/12/releasing-react-native-059), and because Hooks are the future-facing way to write your React components, we wrote this introduction using function component examples. Where useful, we also cover class components under a toggle like so: - + ```SnackPlayer name=Hello%20World%20Function%20Component @@ -116,7 +116,7 @@ You can find more examples of class components in [previous versions of this doc People from many different development backgrounds are learning React Native. You may have experience with a range of technologies, from web to Android to iOS and more. We try to write for developers from all backgrounds. Sometimes we provide explanations specific to one platform or another like so: - + diff --git a/website/versioned_docs/version-0.71/keyboard.md b/website/versioned_docs/version-0.71/keyboard.md index 81e251454f6..17212afec8f 100644 --- a/website/versioned_docs/version-0.71/keyboard.md +++ b/website/versioned_docs/version-0.71/keyboard.md @@ -11,7 +11,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it. - + ```SnackPlayer name=Keyboard%20Function%20Component%20Example&supportedPlatforms=ios,android @@ -69,7 +69,7 @@ export default Example; - + ```SnackPlayer name=Keyboard%20Class%20Component%20Example&supportedPlatforms=ios,android&ext=js diff --git a/website/versioned_docs/version-0.71/layout-props.md b/website/versioned_docs/version-0.71/layout-props.md index 3a01a1781e0..2e1281fc355 100644 --- a/website/versioned_docs/version-0.71/layout-props.md +++ b/website/versioned_docs/version-0.71/layout-props.md @@ -11,7 +11,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con The following example shows how different properties can affect or shape a React Native layout. You can try for example to add or remove squares from the UI while changing the values of the property `flexWrap`. - + ```SnackPlayer name=LayoutProps%20Example&ext=js diff --git a/website/versioned_docs/version-0.71/layoutanimation.md b/website/versioned_docs/version-0.71/layoutanimation.md index 7afa98c7659..a45d30de22f 100644 --- a/website/versioned_docs/version-0.71/layoutanimation.md +++ b/website/versioned_docs/version-0.71/layoutanimation.md @@ -131,7 +131,7 @@ Helper that creates an object (with `create`, `update`, and `delete` fields) to **Example:** - + ```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios @@ -347,7 +347,7 @@ Calls `configureNext()` with `Presets.spring`. **Example:** - + ```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.71/libraries.md b/website/versioned_docs/version-0.71/libraries.md index abecb19b5a6..fb6897d4521 100644 --- a/website/versioned_docs/version-0.71/libraries.md +++ b/website/versioned_docs/version-0.71/libraries.md @@ -22,7 +22,7 @@ If you have Node.js installed on your computer then you already have the npm CLI To install a library in your project, navigate to your project directory in your terminal and run the installation command. Let's try this with `react-native-webview`: - + ```shell diff --git a/website/versioned_docs/version-0.71/linking.md b/website/versioned_docs/version-0.71/linking.md index fcfc55e951e..0a5fd3b0349 100644 --- a/website/versioned_docs/version-0.71/linking.md +++ b/website/versioned_docs/version-0.71/linking.md @@ -37,7 +37,7 @@ As mentioned in the introduction, there are some URL schemes for core functional If you want to enable deep links in your app, please read the below guide: - + > For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters). @@ -114,7 +114,7 @@ You can handle these events with `Linking.getInitialURL()` - it returns a Promis ### Open Links and Deep Links (Universal Links) - + ```SnackPlayer name=Linking%20Function%20Component%20Example&supportedPlatforms=ios,android&ext=js @@ -220,7 +220,7 @@ export default App; ### Open Custom Settings - + ```SnackPlayer name=Linking%20Function%20Component%20Example&supportedPlatforms=ios,android&ext=js @@ -299,7 +299,7 @@ export default App; ### Get the Deep Link - + ```SnackPlayer name=Linking%20Function%20Component%20Example&supportedPlatforms=ios,android&ext=js @@ -412,7 +412,7 @@ export default App; ### Send Intents (Android) - + ```SnackPlayer name=Linking%20Function%20Component%20Example&supportedPlatforms=android&ext=js diff --git a/website/versioned_docs/version-0.71/modal.md b/website/versioned_docs/version-0.71/modal.md index 46db5921f3f..b7e8ade8f01 100644 --- a/website/versioned_docs/version-0.71/modal.md +++ b/website/versioned_docs/version-0.71/modal.md @@ -9,7 +9,7 @@ The Modal component is a basic way to present content above an enclosing view. ## Example - + ```SnackPlayer name=Modal&supportedPlatforms=android,ios diff --git a/website/versioned_docs/version-0.71/native-components-android.md b/website/versioned_docs/version-0.71/native-components-android.md index 985734cfe14..0d6a49ef860 100644 --- a/website/versioned_docs/version-0.71/native-components-android.md +++ b/website/versioned_docs/version-0.71/native-components-android.md @@ -32,7 +32,7 @@ To send a view: In this example we create view manager class `ReactImageManager` that extends `SimpleViewManager` of type `ReactImageView`. `ReactImageView` is the type of object managed by the manager, this will be the custom native view. Name returned by `getName` is used to reference the native view type from JavaScript. - + ```kotlin @@ -75,7 +75,7 @@ public class ReactImageManager extends SimpleViewManager { Views are created in the `createViewInstance` method, the view should initialize itself in its default state, any properties will be set via a follow up call to `updateView.` - + ```kotlin @@ -106,7 +106,7 @@ Except from `name`, `@ReactProp` annotation may take following optional argument Setter declaration requirements for methods annotated with `@ReactPropGroup` are different than for `@ReactProp`, please refer to the `@ReactPropGroup` annotation class docs for more information about it. **IMPORTANT!** in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" value can be specified using `defaultBoolean`, `defaultFloat`, etc. arguments of `@ReactProp` annotation, for complex types setter will be called with value set to `null`). - + ```kotlin @@ -153,7 +153,7 @@ Setter declaration requirements for methods annotated with `@ReactPropGroup` are The final step is to register the ViewManager to the application, this happens in a similar way to [Native Modules](native-modules-android.md), via the applications package member function `createViewManagers`. - + ```kotlin @@ -201,7 +201,7 @@ The `requireNativeComponent` function takes the name of the native view. Note th So now we know how to expose native view components that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the `getId()` method. - + ```kotlin @@ -241,7 +241,7 @@ class MyCustomView extends View { To map the `topChange` event name to the `onChange` callback prop in JavaScript, register it by overriding the `getExportedCustomBubblingEventTypeConstants` method in your `ViewManager`: - + ```kotlin @@ -317,7 +317,7 @@ In order to integrate existing Native UI elements to your React Native app, you First, let's create a `CustomView` class which extends `FrameLayout` (the content of this view can be any view that you'd like to render) - + ```kotlin title="CustomView.kt" @@ -378,7 +378,7 @@ public class CustomView extends FrameLayout { ### 2. Create a `Fragment` - + ```kotlin title="MyFragment.kt" @@ -490,7 +490,7 @@ public class MyFragment extends Fragment { ### 3. Create the `ViewManager` subclass - + ```kotlin title="MyViewManager.kt" @@ -736,7 +736,7 @@ public class MyViewManager extends ViewGroupManager { ### 4. Register the `ViewManager` - + ```kotlin title="MyPackage.kt" @@ -786,7 +786,7 @@ public class MyPackage implements ReactPackage { ### 5. Register the `Package` - + ```kotlin title="MainApplication.kt" diff --git a/website/versioned_docs/version-0.71/native-modules-android.md b/website/versioned_docs/version-0.71/native-modules-android.md index 4436482250d..9928015c872 100644 --- a/website/versioned_docs/version-0.71/native-modules-android.md +++ b/website/versioned_docs/version-0.71/native-modules-android.md @@ -38,7 +38,7 @@ The first step is to create the (`CalendarModule.java` or `CalendarModule.kt`) J Then add the following content: - + ```java @@ -85,7 +85,7 @@ As you can see, your `CalendarModule` class extends the `ReactContextBaseJavaMod All Java/Kotlin native modules in Android need to implement the `getName()` method. This method returns a string, which represents the name of the native module. The native module can then be accessed in JavaScript using its name. For example, in the below code snippet, `getName()` returns `"CalendarModule"`. - + ```java @@ -119,7 +119,7 @@ Next you will need to add a method to your native module that will create calend Set up a method `createCalendarEvent()` for `CalendarModule` that can be invoked in JS through `CalendarModule.createCalendarEvent()`. For now, the method will take in a name and location as strings. Argument type options will be covered shortly. - + ```java @@ -140,7 +140,7 @@ public void createCalendarEvent(String name, String location) { Add a debug log in the method to confirm it has been invoked when you call it from your application. Below is an example of how you can import and use the [Log](https://developer.android.com/reference/android/util/Log) class from the Android util package: - + ```java @@ -174,7 +174,7 @@ Once you finish implementing the native module and hook it up in JavaScript, you You can pass `isBlockingSynchronousMethod = true` to a native method to mark it as a synchronous method. - + ```java @@ -203,7 +203,7 @@ To add your Native Module to `ReactPackage`, first create a new Java/Kotlin Clas Then add the following content: - + ```java @@ -273,7 +273,7 @@ To register the `CalendarModule` package, you must add `MyAppPackage` to the lis Locate ReactNativeHost’s `getPackages()` method and add your package to the packages list `getPackages()` returns: - + ```java @@ -444,7 +444,7 @@ When a native module method is invoked in JavaScript, React Native converts the For argument types not listed above, you will need to handle the conversion yourself. For example, in Android, `Date` conversion is not supported out of the box. You can handle the conversion to the `Date` type within the native method yourself like so: - + ```java @@ -478,7 +478,7 @@ For argument types not listed above, you will need to handle the conversion your A native module can export constants by implementing the native method `getConstants()`, which is available in JS. Below you will implement `getConstants()` and return a Map that contains a `DEFAULT_EVENT_NAME` constant you can access in JavaScript: - + ```java @@ -518,7 +518,7 @@ Native modules also support a unique kind of argument: a callback. Callbacks are In order to create a native module method with a callback, first import the `Callback` interface, and then add a new parameter to your native module method of type `Callback`. There are a couple of nuances with callback arguments that will soon be lifted with TurboModules. First off, you can only have two callbacks in your function arguments- a successCallback and a failureCallback. In addition, the last argument to a native module method call, if it's a function, is treated as the successCallback, and the second to last argument to a native module method call, if it's a function, is treated as the failure callback. - + ```java @@ -543,7 +543,7 @@ import com.facebook.react.bridge.Callback You can invoke the callback in your Java/Kotlin method, providing whatever data you want to pass to JavaScript. Please note that you can only pass serializable data from native code to JavaScript. If you need to pass back a native object you can use `WriteableMaps`, if you need to use a collection use `WritableArrays`. It is also important to highlight that the callback is not invoked immediately after the native function completes. Below the ID of an event created in an earlier call is passed to the callback. - + ```java @@ -586,7 +586,7 @@ Another important detail to note is that a native module method can only invoke There are two approaches to error handling with callbacks. The first is to follow Node’s convention and treat the first argument passed to the callback as an error object. - + ```java @@ -630,7 +630,7 @@ const onPress = () => { Another option is to use an onSuccess and onFailure callback: - + ```java @@ -678,7 +678,7 @@ Native modules can also fulfill a [Promise](https://developer.mozilla.org/en-US/ Refactoring the above code to use a promise instead of callbacks looks like this: - + ```java @@ -733,7 +733,7 @@ const onSubmit = async () => { The reject method takes different combinations of the following arguments: - + ```java @@ -754,7 +754,7 @@ For more detail, you can find the `Promise.java` interface [here](https://github Java/Kotlin reject call: - + ```java @@ -782,7 +782,7 @@ Error message in React Native App when promise is rejected: Native modules can signal events to JavaScript without being invoked directly. For example, you might want to signal to JavaScript a reminder that a calendar event from the native Android calendar app will occur soon. The easiest way to do this is to use the `RCTDeviceEventEmitter` which can be obtained from the `ReactContext` as in the code snippet below. - + ```java @@ -893,7 +893,7 @@ import {NativeEventEmitter, NativeModules} from 'react-native'; You'll need to listen to `onActivityResult` if you want to get results from an activity you started with `startActivityForResult`. To do this, you must extend `BaseActivityEventListener` or implement `ActivityEventListener`. The former is preferred as it is more resilient to API changes. Then, you need to register the listener in the module's constructor like so: - + ```java @@ -912,7 +912,7 @@ reactContext.addActivityEventListener(mActivityResultListener); Now you can listen to `onActivityResult` by implementing the following method: - + ```java @@ -945,7 +945,7 @@ override fun onActivityResult( Let's implement a basic image picker to demonstrate this. The image picker will expose the method `pickImage` to JavaScript, which will return the path of the image when called. - + ```kotlin @@ -1105,7 +1105,7 @@ class ImagePickerModule(reactContext: ReactApplicationContext) : Listening to the activity's LifeCycle events such as `onResume`, `onPause` etc. is very similar to how `ActivityEventListener` was implemented. The module must implement `LifecycleEventListener`. Then, you need to register a listener in the module's constructor like so: - + ```java @@ -1124,7 +1124,7 @@ reactContext.addLifecycleEventListener(this) Now you can listen to the activity's LifeCycle events by implementing the following methods: - + ```java diff --git a/website/versioned_docs/version-0.71/network.md b/website/versioned_docs/version-0.71/network.md index ee4728976fa..2715acdb565 100644 --- a/website/versioned_docs/version-0.71/network.md +++ b/website/versioned_docs/version-0.71/network.md @@ -74,10 +74,10 @@ const getMoviesFromApiAsync = async () => { Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently. - + - + ```SnackPlayer name=Fetch%20Example&ext=js @@ -187,7 +187,7 @@ export default App; - + ```SnackPlayer name=Fetch%20Example&ext=js diff --git a/website/versioned_docs/version-0.71/new-architecture-library-android.md b/website/versioned_docs/version-0.71/new-architecture-library-android.md index f0f702941fb..c02ee40653d 100644 --- a/website/versioned_docs/version-0.71/new-architecture-library-android.md +++ b/website/versioned_docs/version-0.71/new-architecture-library-android.md @@ -57,7 +57,7 @@ Update your native module or component to ensure it **extends the abstract class Following the example set forth in the previous section, your library might import `NativeAwesomeManagerSpec`, implement the relevant native interface and the necessary methods for it: - + diff --git a/website/versioned_docs/version-0.71/new-architecture-library-intro.md b/website/versioned_docs/version-0.71/new-architecture-library-intro.md index b6c12551bf2..6341b2dc6eb 100644 --- a/website/versioned_docs/version-0.71/new-architecture-library-intro.md +++ b/website/versioned_docs/version-0.71/new-architecture-library-intro.md @@ -29,7 +29,7 @@ JavaScript spec files **must** be named `Native.js`, and they expor The following is a basic JavaScript spec template, written using the [Flow](https://flow.org/) and [TypeScript](https://www.typescriptlang.org/) syntax. - @@ -78,7 +78,7 @@ JavaScript spec files **must** be named `NativeComponent.js` ( The following snippet shows a basic JavaScript spec template, written in [Flow](https://flow.org/) as well as [TypeScript](https://www.typescriptlang.org/). - @@ -524,7 +524,7 @@ RCT_EXPORT_METHOD(moveToRegion:(nonnull NSNumber *)reactTag **Android** - + ```kotlin diff --git a/website/versioned_docs/version-0.71/optimizing-flatlist-configuration.md b/website/versioned_docs/version-0.71/optimizing-flatlist-configuration.md index e2bcedd0e1d..61285728049 100644 --- a/website/versioned_docs/version-0.71/optimizing-flatlist-configuration.md +++ b/website/versioned_docs/version-0.71/optimizing-flatlist-configuration.md @@ -125,7 +125,7 @@ You can also use a `key` prop in your item component. Move out the `renderItem` function to the outside of render function, so it won't recreate itself each time render function called. - + ```tsx diff --git a/website/versioned_docs/version-0.71/panresponder.md b/website/versioned_docs/version-0.71/panresponder.md index 35bea487869..eca587923d2 100644 --- a/website/versioned_docs/version-0.71/panresponder.md +++ b/website/versioned_docs/version-0.71/panresponder.md @@ -80,7 +80,7 @@ const ExampleComponent = () => { `PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen - + ```SnackPlayer name=PanResponder diff --git a/website/versioned_docs/version-0.71/permissionsandroid.md b/website/versioned_docs/version-0.71/permissionsandroid.md index b24af29bf0f..963b1d2a7d1 100644 --- a/website/versioned_docs/version-0.71/permissionsandroid.md +++ b/website/versioned_docs/version-0.71/permissionsandroid.md @@ -20,7 +20,7 @@ If a user has previously turned off a permission that you prompt for, the OS wil ### Example - + ```SnackPlayer name=PermissionsAndroid%20Example&supportedPlatforms=android diff --git a/website/versioned_docs/version-0.71/platformcolor.md b/website/versioned_docs/version-0.71/platformcolor.md index 422e0096c4c..15d7af3fd48 100644 --- a/website/versioned_docs/version-0.71/platformcolor.md +++ b/website/versioned_docs/version-0.71/platformcolor.md @@ -32,7 +32,7 @@ For a full list of the types of system colors supported, see: #### Developer notes - + diff --git a/website/versioned_docs/version-0.71/props.md b/website/versioned_docs/version-0.71/props.md index b562356f507..490eb214632 100644 --- a/website/versioned_docs/version-0.71/props.md +++ b/website/versioned_docs/version-0.71/props.md @@ -29,7 +29,7 @@ Notice the braces surrounding `{pic}` - these embed the variable `pic` into JSX. Your own components can also use `props`. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place by referring to `props` in your `render` function. Here's an example: - + ```SnackPlayer name=Props&ext=js diff --git a/website/versioned_docs/version-0.71/react-18-and-react-native.md b/website/versioned_docs/version-0.71/react-18-and-react-native.md index bfd04f7c5c0..985560f4ff4 100644 --- a/website/versioned_docs/version-0.71/react-18-and-react-native.md +++ b/website/versioned_docs/version-0.71/react-18-and-react-native.md @@ -45,7 +45,7 @@ However, if you do hit any issues, we provide an option to opt-out of the new ro On Android, you will be able to override the `isConcurrentRootEnabled` in your ActivityDelegate (in the `MainActivity` file), and enable/disable Concurrent React. - + diff --git a/website/versioned_docs/version-0.71/running-on-device.md b/website/versioned_docs/version-0.71/running-on-device.md index dff11dfc45f..9415a0b2240 100644 --- a/website/versioned_docs/version-0.71/running-on-device.md +++ b/website/versioned_docs/version-0.71/running-on-device.md @@ -12,14 +12,14 @@ It's always a good idea to test your app on an actual device before releasing it If you used `create-expo-app` to set up your project, you can run your app on a device in Expo Go by scanning the QR code that is displayed when you run `npm start`. Refer to the Expo guide for [running your project on your device](https://docs.expo.dev/workflow/run-on-device/) for more information. ::: - + ## Running your app on Android devices #### Development OS - + [//]: # 'macOS, Android' @@ -316,7 +316,7 @@ You have built a great app using React Native, and you are now itching to releas #### Development OS - + [//]: # 'macOS, iOS' diff --git a/website/versioned_docs/version-0.71/sectionlist.md b/website/versioned_docs/version-0.71/sectionlist.md index bc82fc6029e..e6fb7c76355 100644 --- a/website/versioned_docs/version-0.71/sectionlist.md +++ b/website/versioned_docs/version-0.71/sectionlist.md @@ -22,7 +22,7 @@ If you don't need section support and want a simpler interface, use [` ## Example - + ```SnackPlayer name=SectionList%20Example diff --git a/website/versioned_docs/version-0.71/security.md b/website/versioned_docs/version-0.71/security.md index fb900a57aae..632fe2e591f 100644 --- a/website/versioned_docs/version-0.71/security.md +++ b/website/versioned_docs/version-0.71/security.md @@ -34,7 +34,7 @@ If you must have an API key or a secret to access some resource from your app, t #### Developer Notes - + diff --git a/website/versioned_docs/version-0.71/shadow-props.md b/website/versioned_docs/version-0.71/shadow-props.md index 50f9e18d182..58068c8fcb2 100644 --- a/website/versioned_docs/version-0.71/shadow-props.md +++ b/website/versioned_docs/version-0.71/shadow-props.md @@ -5,7 +5,7 @@ title: Shadow Props import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; - + ```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=js diff --git a/website/versioned_docs/version-0.71/share.md b/website/versioned_docs/version-0.71/share.md index 443beb7b70f..7ca8f8f8ea9 100644 --- a/website/versioned_docs/version-0.71/share.md +++ b/website/versioned_docs/version-0.71/share.md @@ -7,10 +7,10 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ## Example - + - + ```SnackPlayer name=Function%20Component%20Example&supportedPlatforms=ios,android&ext=js @@ -90,7 +90,7 @@ export default ShareExample; - + ```SnackPlayer name=Class%20Component%20Example&supportedPlatforms=ios,android&ext=js diff --git a/website/versioned_docs/version-0.71/state.md b/website/versioned_docs/version-0.71/state.md index ba3aeaf578e..50f4f530739 100644 --- a/website/versioned_docs/version-0.71/state.md +++ b/website/versioned_docs/version-0.71/state.md @@ -11,7 +11,7 @@ In general, you should initialize `state` in the constructor, and then call `set For example, let's say we want to make text that blinks all the time. The text itself gets set once when the blinking component gets created, so the text itself is a `prop`. The "whether the text is currently on or off" changes over time, so that should be kept in `state`. - + ```SnackPlayer name=State&ext=js diff --git a/website/versioned_docs/version-0.71/statusbar.md b/website/versioned_docs/version-0.71/statusbar.md index 41c2e694bcf..710ba03bdbe 100644 --- a/website/versioned_docs/version-0.71/statusbar.md +++ b/website/versioned_docs/version-0.71/statusbar.md @@ -11,7 +11,7 @@ Component to control the app's status bar. The status bar is the zone, typically It is possible to have multiple `StatusBar` components mounted at the same time. The props will be merged in the order the `StatusBar` components were mounted. - + ```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=js diff --git a/website/versioned_docs/version-0.71/systrace.md b/website/versioned_docs/version-0.71/systrace.md index 7c26191008d..9594ea0ffcf 100644 --- a/website/versioned_docs/version-0.71/systrace.md +++ b/website/versioned_docs/version-0.71/systrace.md @@ -11,7 +11,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con `Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler. - + ```SnackPlayer name=Systrace%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.71/text-style-props.md b/website/versioned_docs/version-0.71/text-style-props.md index 6364b449152..56a4f44ba37 100644 --- a/website/versioned_docs/version-0.71/text-style-props.md +++ b/website/versioned_docs/version-0.71/text-style-props.md @@ -7,7 +7,7 @@ title: Text Style Props import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; - + ```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=js diff --git a/website/versioned_docs/version-0.71/text.md b/website/versioned_docs/version-0.71/text.md index ed47b014950..6871982c8ce 100644 --- a/website/versioned_docs/version-0.71/text.md +++ b/website/versioned_docs/version-0.71/text.md @@ -11,7 +11,7 @@ A React component for displaying text. In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines: - + ```SnackPlayer name=Text%20Functional%20Component%20Example diff --git a/website/versioned_docs/version-0.71/the-new-architecture/backward-compatibility-fabric-components.md b/website/versioned_docs/version-0.71/the-new-architecture/backward-compatibility-fabric-components.md index 88390ca59c4..63c412d32bf 100644 --- a/website/versioned_docs/version-0.71/the-new-architecture/backward-compatibility-fabric-components.md +++ b/website/versioned_docs/version-0.71/the-new-architecture/backward-compatibility-fabric-components.md @@ -304,7 +304,7 @@ my-component The code that should go in the `MyComponentViewManagerImpl.java` and that can be shared between the Native Component and the Fabric Native Component is, for example: - + ```java title="example of MyComponentViewManager.java" @@ -352,7 +352,7 @@ Then, the Native Component and the Fabric Native Component can be updated using For example, for a Native Component: - + ```java title="Native Component using the ViewManagerImpl" @@ -410,7 +410,7 @@ class MyComponentViewManager(var context: ReactApplicationContext) : SimpleViewM And, for a Fabric Native Component: - + ```java title="Fabric Component using the ViewManagerImpl" @@ -499,7 +499,7 @@ import MyComponent from 'your-component/src/index'; Since `codegenNativeComponent` is calling the `requireNativeComponent` under the hood, we need to re-export our component, to avoid registering it multiple times. - diff --git a/website/versioned_docs/version-0.71/the-new-architecture/backward-compatibility-turbomodules.md b/website/versioned_docs/version-0.71/the-new-architecture/backward-compatibility-turbomodules.md index d59476f9c67..2e63efcf367 100644 --- a/website/versioned_docs/version-0.71/the-new-architecture/backward-compatibility-turbomodules.md +++ b/website/versioned_docs/version-0.71/the-new-architecture/backward-compatibility-turbomodules.md @@ -272,7 +272,7 @@ my-module The code that should go in the `MyModuleImpl.java`, and that can be shared by the Legacy Native Module and the Turbo Native Module is, for example: - + ```java title="example of MyModuleImpl.java" @@ -325,7 +325,7 @@ Then, the Legacy Native Module and the Turbo Native Module can be updated with t For example, for a Legacy Native Module: - + ```java title="Native Module using the Impl module" @@ -377,7 +377,7 @@ class MyModule(context: ReactApplicationContext) : ReactContextBaseJavaModule(co And, for a Turbo Native Module: - + ```java title="TurboModule using the Impl module" @@ -441,7 +441,7 @@ import MyModule from 'your-module/src/index'; Since `TurboModuleRegistry.get` taps into the old Native Modules API under the hood, we need to re-export our module, to avoid registering it multiple times. - diff --git a/website/versioned_docs/version-0.71/the-new-architecture/cxx-custom-types.md b/website/versioned_docs/version-0.71/the-new-architecture/cxx-custom-types.md index 96c37ebc5dd..c92f7a0a220 100644 --- a/website/versioned_docs/version-0.71/the-new-architecture/cxx-custom-types.md +++ b/website/versioned_docs/version-0.71/the-new-architecture/cxx-custom-types.md @@ -63,7 +63,7 @@ Omitting either `fromJS` or `toJS` would make you `bridging` header either _read Now you can add the following function to your JavaScript spec: - + ```typescript title="NativeSampleModule.ts" @@ -157,7 +157,7 @@ export type CustomType = { which can be exposed to your C++ Turbo Native Module via - + ```typescript title="NativeSampleModule.ts" diff --git a/website/versioned_docs/version-0.71/the-new-architecture/cxx-cxxturbomodules.md b/website/versioned_docs/version-0.71/the-new-architecture/cxx-cxxturbomodules.md index 25e841f27b8..9870d46658a 100644 --- a/website/versioned_docs/version-0.71/the-new-architecture/cxx-cxxturbomodules.md +++ b/website/versioned_docs/version-0.71/the-new-architecture/cxx-cxxturbomodules.md @@ -67,7 +67,7 @@ CxxTurboModulesGuide Create the following spec inside the `tm` folder: - + ```typescript title="NativeSampleModule.ts" diff --git a/website/versioned_docs/version-0.71/the-new-architecture/pillars-codegen.md b/website/versioned_docs/version-0.71/the-new-architecture/pillars-codegen.md index f388088e02f..0bc511b0f81 100644 --- a/website/versioned_docs/version-0.71/the-new-architecture/pillars-codegen.md +++ b/website/versioned_docs/version-0.71/the-new-architecture/pillars-codegen.md @@ -151,7 +151,7 @@ These tasks invoke the `generateCodegenArtifactsFromSchema` on all the the impor Once the Gradle task completes, you can see different structures for a Turbo Native Module or for a Fabric Native Component. The following tab shows how they appear: - + ```sh diff --git a/website/versioned_docs/version-0.71/the-new-architecture/pillars-fabric-components.md b/website/versioned_docs/version-0.71/the-new-architecture/pillars-fabric-components.md index e6a559d8d7a..dc380270237 100644 --- a/website/versioned_docs/version-0.71/the-new-architecture/pillars-fabric-components.md +++ b/website/versioned_docs/version-0.71/the-new-architecture/pillars-fabric-components.md @@ -66,7 +66,7 @@ There are two requirements the file containing this specification must meet: Below are specifications of the `RTNCenteredText` component in both Flow and TypeScript. Create a `RTNCenteredTextNativeComponent` file with the proper extension in the `js` folder. - + ```typescript @@ -283,7 +283,7 @@ Then, you need a class that implements the `ReactPackage` interface. To run the Create an `android/src/main/java/com/rtncenteredtext` folder and, inside that folder, create a `CenteredTextPackage.java` file. - + ```java title="CenteredTextPackage.java" @@ -653,7 +653,7 @@ android ##### CenteredText.java - + ```java title="CenteredText.java" @@ -730,7 +730,7 @@ This class represents the actual view Android is going to represent on screen. I ##### CenteredTextManager.java - + ```java title="CenteredTextManager.java" @@ -833,7 +833,7 @@ It is also responsible for exporting all the constructs required by React Native Finally, open the `CenteredTextPackage.java` file in the `android/src/main/java/com/rtncenteredtext` folder and update it with the following lines - + ```diff title="CenteredTextPackage.java update" @@ -929,7 +929,7 @@ Android configuration requires to enable the **New Architecture**. Finally, you can use the component in your JavaScript application. - + ```typescript title="App.js" diff --git a/website/versioned_docs/version-0.71/the-new-architecture/pillars-turbomodule.md b/website/versioned_docs/version-0.71/the-new-architecture/pillars-turbomodule.md index 18437f7f7f8..fd2af0ce2ed 100644 --- a/website/versioned_docs/version-0.71/the-new-architecture/pillars-turbomodule.md +++ b/website/versioned_docs/version-0.71/the-new-architecture/pillars-turbomodule.md @@ -62,7 +62,7 @@ There are two requirements the file containing this specification must meet: 1. The file **must** be named `Native`, with a `.js` or `.jsx` extension when using Flow, or a `.ts`, or `.tsx` extension when using TypeScript. Codegen will only look for files matching this pattern. 2. The file must export a `TurboModuleRegistrySpec` object. - + ```typescript title="NativeCalculator.js" @@ -269,7 +269,7 @@ Then, you need a class that extends the `TurboReactPackage` interface. To run th Create an `android/src/main/java/com/rtncalculator` folder and, inside that folder, create a `CalculatorPackage.java` file. - + ```java title="CalculatorPackage.java" @@ -528,7 +528,7 @@ android ##### Creating the `CalculatorModule.java` - + ```java title="CalculatorModule.java" @@ -597,7 +597,7 @@ This class implements the module itself, which extends the `NativeCalculatorSpec ##### Updating the `CalculatorPackage.java` - + ```diff title="CalculatorPackage.java" @@ -763,7 +763,7 @@ Now you can use your Turbo Native Module calculator in your app! Here's an example App.js file using the `add` method: - + ```typescript title="App.js" diff --git a/website/versioned_docs/version-0.71/the-new-architecture/use-app-template.md b/website/versioned_docs/version-0.71/the-new-architecture/use-app-template.md index a27dd07d025..bf4c9ed9bbf 100644 --- a/website/versioned_docs/version-0.71/the-new-architecture/use-app-template.md +++ b/website/versioned_docs/version-0.71/the-new-architecture/use-app-template.md @@ -49,7 +49,7 @@ Please [follow the instructions on the React Native website](hermes.md) to enabl #### Target OS - + Navigate to the `ios` directory and run the following: diff --git a/website/versioned_docs/version-0.71/touchablehighlight.md b/website/versioned_docs/version-0.71/touchablehighlight.md index d3697919c6b..e64a3dc6a2d 100644 --- a/website/versioned_docs/version-0.71/touchablehighlight.md +++ b/website/versioned_docs/version-0.71/touchablehighlight.md @@ -32,7 +32,7 @@ function MyComponent(props: MyComponentProps) { ## Example - + ```SnackPlayer name=TouchableHighlight%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.71/touchableopacity.md b/website/versioned_docs/version-0.71/touchableopacity.md index ed04dc43fe6..3ccd4873212 100644 --- a/website/versioned_docs/version-0.71/touchableopacity.md +++ b/website/versioned_docs/version-0.71/touchableopacity.md @@ -13,7 +13,7 @@ Opacity is controlled by wrapping the children in an `Animated.View`, which is a ## Example - + ```SnackPlayer name=TouchableOpacity%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.71/transforms.md b/website/versioned_docs/version-0.71/transforms.md index b203e11a5a1..ebc0109890a 100644 --- a/website/versioned_docs/version-0.71/transforms.md +++ b/website/versioned_docs/version-0.71/transforms.md @@ -9,7 +9,7 @@ Transforms are style properties that will help you modify the appearance and pos ## Example - + ```SnackPlayer name=Transforms diff --git a/website/versioned_docs/version-0.71/tutorial.md b/website/versioned_docs/version-0.71/tutorial.md index 626bc349ac2..8d6df090468 100644 --- a/website/versioned_docs/version-0.71/tutorial.md +++ b/website/versioned_docs/version-0.71/tutorial.md @@ -63,7 +63,7 @@ Most components can be customized when they are created, with different paramete Your own components can also use `props`. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Refer to `props.YOUR_PROP_NAME` in your functional components or `this.props.YOUR_PROP_NAME` in your class components. Here's an example: - + ```SnackPlayer name=Hello%20Props&ext=js diff --git a/website/versioned_docs/version-0.71/typescript.md b/website/versioned_docs/version-0.71/typescript.md index f41627df122..083dd3f6dbc 100644 --- a/website/versioned_docs/version-0.71/typescript.md +++ b/website/versioned_docs/version-0.71/typescript.md @@ -21,7 +21,7 @@ npx create-expo-app --template 1. Add TypeScript, types, and ESLint plugins to your project. - + ```shell @@ -164,7 +164,7 @@ To use custom path aliases with TypeScript, you need to set the path aliases to 2. Add [`babel-plugin-module-resolver`][bpmr] as a development package to your project: - + ```shell diff --git a/website/versioned_docs/version-0.71/vibration.md b/website/versioned_docs/version-0.71/vibration.md index 50e94fff4f5..a1919440f55 100644 --- a/website/versioned_docs/version-0.71/vibration.md +++ b/website/versioned_docs/version-0.71/vibration.md @@ -9,7 +9,7 @@ Vibrates the device. ## Example - + ```SnackPlayer name=Vibration&supportedPlatforms=ios,android diff --git a/website/versioned_docs/version-0.71/view.md b/website/versioned_docs/version-0.71/view.md index fbf99b51365..43a1d5b6621 100644 --- a/website/versioned_docs/version-0.71/view.md +++ b/website/versioned_docs/version-0.71/view.md @@ -11,7 +11,7 @@ The most fundamental component for building a UI, `View` is a container that sup This example creates a `View` that wraps two boxes with color and a text component in a row with padding. - + ```SnackPlayer name=View%20Function%20Component%20Example diff --git a/website/versioned_docs/version-0.71/virtualizedlist.md b/website/versioned_docs/version-0.71/virtualizedlist.md index cc070cae3e1..8a81dc0677e 100644 --- a/website/versioned_docs/version-0.71/virtualizedlist.md +++ b/website/versioned_docs/version-0.71/virtualizedlist.md @@ -11,7 +11,7 @@ Virtualization massively improves memory consumption and performance of large li ## Example - + ```SnackPlayer name=VirtualizedListExample&ext=js