kitten.sh
-2
out/llms-full-react-native-gesture-handler.txt
-2
out/llms-full-react-native-gesture-handler.txt
···There are three types of events in RNGH2: `StateChangeEvent`, `GestureEvent` and `PointerEvent`. The `StateChangeEvent` is send every time a gesture moves to a different state, while `GestureEvent` is send every time a gesture is updated. The first two carry a gesture-specific data and a `state` property, indicating the current state of the gesture. `StateChangeEvent` also carries a `oldState` property indicating the previous state of the gesture. `PointerEvent` carries information about raw touch events, like touching the screen or moving the finger. These events are handled internally before they are passed along to the correct callbacks:
···There are three types of events in RNGH2: `StateChangeEvent`, `GestureEvent` and `PointerEvent`. The `StateChangeEvent` is send every time a gesture moves to a different state, while `GestureEvent` is send every time a gesture is updated. The first two carry a gesture-specific data and a `state` property, indicating the current state of the gesture. `StateChangeEvent` also carries a `oldState` property indicating the previous state of the gesture. `PointerEvent` carries information about raw touch events, like touching the screen or moving the finger. These events are handled internally before they are passed along to the correct callbacks:
-130
out/llms-full-react-native-reanimated.txt
-130
out/llms-full-react-native-reanimated.txt
···- Animated styles take precedence over React Native's static styles. All values specified in animated styles override values from static styles.···- The returned handler may be passed to multiple components. In such situation, the handler will invoke for the given events each time any of the components dispatches them.······The hook returns a context that will be reused by event handlers and value that indicates whether worklets should be rebuilt. If different implementation is needed for web, `useWeb` boolean is returned to check for web environment······- The returned handler may be passed to multiple components. In such situation, the handler will invoke for the given events each time any of the components dispatches them.············`useScrollViewOffset` returns a shared value which holds the current offset of the `ScrollView`.···And that's it! Pretty straightforward, isn't it? Let's see it in its full glory in an interactive example:You can make use of composing gestures to more complex behaviors. But what if we'd like to create something a bit more interesting?···You can play around with the example below and see how the circle changes and reacts to the gesture:···Make sure to check the full `withDecay` API reference to get to know the rest of the configuration options.···`withRepeat` is an animation modifier that lets you repeat an animation given number of times or run it indefinitely.···A parameter that determines how the animation responds to the device's reduced motion accessibility setting.`withRepeat` returns an animation object which holds the current state of the animation. It can be either assigned directly to a shared value or can be used as a value for a style object returned from useAnimatedStyle.···- `measure` is implemented only on the UI thread. When using `measure` inside event handlers, it has to be wrapped with the `runOnUI` function.···- Ensure you do not mutate the same shared value in the `result` function that you've used in the `prepare` function, as this will lead to an infinite loop.······`withSequence` returns an animation object which holds the current state of the animation. It can be either assigned directly to a shared value or can be used as a value for a style object returned from useAnimatedStyle.············| state | `SharedValue<KeyboardState>` | A shared value containing current state of the keyboard. Possible states: `{ CLOSED, OPEN, CLOSING, OPENING }` |···`withClamp` is an animation modifier that lets you limit the scope of movement of your animation to make it stay within some predefined range. Use it with withSpring animation.···For a full, in depth documentation follow the Sensors guide on Android Developers and the Device motion in the Apple Developer documentation.···- You should always reach for `useAnimatedStyle` and `useAnimatedProps` first when animating styles or properties.·········Most of the values that developers animate (`width`, `color`, `transform` etc.) are modified by passing them as an object to the `style` property of an element. But that's not always the case.···In this section, we went through the differences between animating styles and props and how to use `useAnimatedStyle` and `useAnimatedProps`. To sum up:······Reanimated comes with a bunch of predefined animations you can customize. For more advanced use-cases, you can use Keyframes or create your own custom entering/exiting animations.Spring-based animations are yet to be introduced to the web. Due to that, playground doesn't cover `springify()` options but they can be applied to your animations on iOS and Android platforms.···- Don't read or modify the value of a shared value during a component's render. Access to `value` property or calling `get`/`set` methods is a side-effect. Triggering side-effects during render violates the Rules of React. All reads from and writes to a shared value should happen in relevant callbacks which aren't executed during render, i.e. in `useAnimatedStyle` or `useEffect` hooks.···Layout transitions allows you to replace layout changes with smooth transitions. Each layout change may include changes of size and position and both of them can be animated.············The `easing` parameter lets you fine-tune the animation over the specified time duration. For example, you can make the animation begin with fast acceleration and then slow down towards the end, or start slowly, then pick up speed before slowing down again towards the end.It will all start to make sense when you compare a `linear` easing side by side with the default `Easing.inOut(Easing.quad)` easing.Reanimated provides a selection of ready-to-use easing functions in the `Easing` module. You can find a visualization of some common easing functions at <http://easings.net/>.···`withTiming` returns an animation object which holds the current state of the animation. It can be either assigned directly to a shared value or can be used as a value for a style object returned from useAnimatedStyle.···`useScrollViewOffset` returns a shared value which holds the current offset of the `ScrollView`.···It all will start to make sense when you compare side by side a `linear` easing with the default easing.Reanimated comes with a handful of predefined easing functions. You can play around with them in the interactive playground below or check the full `withTiming` API reference.···The mass of a spring influences how hard is it to make an object move and to bring it to a stop. Mass adds a feeling of _inertia_ to the object you're trying to move. You can see in the playground that the spring with greater mass moves more "sluggish" compared to the default configuration.Stiffness affects how bouncy the spring is. As an example, think about the difference between a steel spring (with very high stiffness) and a spring made out of soft plastic (with low stiffness).Damping describes how quickly the spring animation finishes. Higher damping means the spring will come to rest faster. In the real world, you could think about the same spring bouncing in the air and underwater. For example, a spring in a vacuum would have zero friction and thus zero damping.·········- The callback passed to the 3rd argument is automatically workletized and ran on the UI thread.···Most of the values that developers animate (`width`, `color`, `transform` etc.) are modified by passing them as an object to the `style` property of an element. But that's not always the case.···In this section, we went through the differences between animating styles and props and how to use `useAnimatedStyle` and `useAnimatedProps`. To sum up:···`useDerivedValue` returns a new readonly shared value based on a value returned from the `updater` function.···- Functions passed to `runOnJS` must be defined in the JavaScript thread scope, i.e. in the component body or the global scope. This code won't work because `myFunction` is defined in the `withTiming` callback, which is only executed in the UI thread:······And voilà, we've made our first animation using Reanimated! You can see how it works in its full glory in a preview below:In this section, we gained a firm grasp on the Reanimated fundamentals. We learned about `Animated` components, shared values and how to use them to create a simple animation. To sum up:···`withDecay` lets you create animations that mimic objects in motion with friction. The animation will start with the provided velocity and slow down over time according to the given deceleration rate until it stops.······`withDecay` returns an animation object which holds the current state of the animation. It can be either assigned directly to a shared value or can be used as a value for a style object returned from useAnimatedStyle.·········To implement our desired shake animation we can use `withRepeat` modifier. This modifier lets you repeat a provided animation.···When we run this code we can see that the box jiggles left to right between the set offset and a starting position. After the animation finishes the box doesn't come back to its initial place. It's not really how we imagined a shake animation but we'll get there in a second!···As a cherry on top, we'll add a little bit of suspense by adding a slight delay before the animation begins. For this exact purpose, Reanimated comes with a `withDelay` modifier.···············`interpolateColor` returns the color after interpolation from within the output range in `rgba(r, g, b, a)` format.
···- Animated styles take precedence over React Native's static styles. All values specified in animated styles override values from static styles.···- The returned handler may be passed to multiple components. In such situation, the handler will invoke for the given events each time any of the components dispatches them.······The hook returns a context that will be reused by event handlers and value that indicates whether worklets should be rebuilt. If different implementation is needed for web, `useWeb` boolean is returned to check for web environment······- The returned handler may be passed to multiple components. In such situation, the handler will invoke for the given events each time any of the components dispatches them.············`useScrollViewOffset` returns a shared value which holds the current offset of the `ScrollView`.···And that's it! Pretty straightforward, isn't it? Let's see it in its full glory in an interactive example:You can make use of composing gestures to more complex behaviors. But what if we'd like to create something a bit more interesting?···You can play around with the example below and see how the circle changes and reacts to the gesture:···Make sure to check the full `withDecay` API reference to get to know the rest of the configuration options.···`withRepeat` is an animation modifier that lets you repeat an animation given number of times or run it indefinitely.···A parameter that determines how the animation responds to the device's reduced motion accessibility setting.`withRepeat` returns an animation object which holds the current state of the animation. It can be either assigned directly to a shared value or can be used as a value for a style object returned from useAnimatedStyle.···- `measure` is implemented only on the UI thread. When using `measure` inside event handlers, it has to be wrapped with the `runOnUI` function.···- Ensure you do not mutate the same shared value in the `result` function that you've used in the `prepare` function, as this will lead to an infinite loop.······`withSequence` returns an animation object which holds the current state of the animation. It can be either assigned directly to a shared value or can be used as a value for a style object returned from useAnimatedStyle.············| state | `SharedValue<KeyboardState>` | A shared value containing current state of the keyboard. Possible states: `{ CLOSED, OPEN, CLOSING, OPENING }` |···`withClamp` is an animation modifier that lets you limit the scope of movement of your animation to make it stay within some predefined range. Use it with withSpring animation.···For a full, in depth documentation follow the Sensors guide on Android Developers and the Device motion in the Apple Developer documentation.···- You should always reach for `useAnimatedStyle` and `useAnimatedProps` first when animating styles or properties.·········Most of the values that developers animate (`width`, `color`, `transform` etc.) are modified by passing them as an object to the `style` property of an element. But that's not always the case.···In this section, we went through the differences between animating styles and props and how to use `useAnimatedStyle` and `useAnimatedProps`. To sum up:······Reanimated comes with a bunch of predefined animations you can customize. For more advanced use-cases, you can use Keyframes or create your own custom entering/exiting animations.Spring-based animations are yet to be introduced to the web. Due to that, playground doesn't cover `springify()` options but they can be applied to your animations on iOS and Android platforms.···- Don't read or modify the value of a shared value during a component's render. Access to `value` property or calling `get`/`set` methods is a side-effect. Triggering side-effects during render violates the Rules of React. All reads from and writes to a shared value should happen in relevant callbacks which aren't executed during render, i.e. in `useAnimatedStyle` or `useEffect` hooks.···Layout transitions allows you to replace layout changes with smooth transitions. Each layout change may include changes of size and position and both of them can be animated.············The `easing` parameter lets you fine-tune the animation over the specified time duration. For example, you can make the animation begin with fast acceleration and then slow down towards the end, or start slowly, then pick up speed before slowing down again towards the end.It will all start to make sense when you compare a `linear` easing side by side with the default `Easing.inOut(Easing.quad)` easing.Reanimated provides a selection of ready-to-use easing functions in the `Easing` module. You can find a visualization of some common easing functions at <http://easings.net/>.···`withTiming` returns an animation object which holds the current state of the animation. It can be either assigned directly to a shared value or can be used as a value for a style object returned from useAnimatedStyle.···`useScrollViewOffset` returns a shared value which holds the current offset of the `ScrollView`.···It all will start to make sense when you compare side by side a `linear` easing with the default easing.Reanimated comes with a handful of predefined easing functions. You can play around with them in the interactive playground below or check the full `withTiming` API reference.···The mass of a spring influences how hard is it to make an object move and to bring it to a stop. Mass adds a feeling of _inertia_ to the object you're trying to move. You can see in the playground that the spring with greater mass moves more "sluggish" compared to the default configuration.Stiffness affects how bouncy the spring is. As an example, think about the difference between a steel spring (with very high stiffness) and a spring made out of soft plastic (with low stiffness).Damping describes how quickly the spring animation finishes. Higher damping means the spring will come to rest faster. In the real world, you could think about the same spring bouncing in the air and underwater. For example, a spring in a vacuum would have zero friction and thus zero damping.·········- The callback passed to the 3rd argument is automatically workletized and ran on the UI thread.···Most of the values that developers animate (`width`, `color`, `transform` etc.) are modified by passing them as an object to the `style` property of an element. But that's not always the case.···In this section, we went through the differences between animating styles and props and how to use `useAnimatedStyle` and `useAnimatedProps`. To sum up:···`useDerivedValue` returns a new readonly shared value based on a value returned from the `updater` function.···- Functions passed to `runOnJS` must be defined in the JavaScript thread scope, i.e. in the component body or the global scope. This code won't work because `myFunction` is defined in the `withTiming` callback, which is only executed in the UI thread:······And voilà, we've made our first animation using Reanimated! You can see how it works in its full glory in a preview below:In this section, we gained a firm grasp on the Reanimated fundamentals. We learned about `Animated` components, shared values and how to use them to create a simple animation. To sum up:···`withDecay` lets you create animations that mimic objects in motion with friction. The animation will start with the provided velocity and slow down over time according to the given deceleration rate until it stops.······`withDecay` returns an animation object which holds the current state of the animation. It can be either assigned directly to a shared value or can be used as a value for a style object returned from useAnimatedStyle.·········To implement our desired shake animation we can use `withRepeat` modifier. This modifier lets you repeat a provided animation.···When we run this code we can see that the box jiggles left to right between the set offset and a starting position. After the animation finishes the box doesn't come back to its initial place. It's not really how we imagined a shake animation but we'll get there in a second!···As a cherry on top, we'll add a little bit of suspense by adding a slight delay before the animation begins. For this exact purpose, Reanimated comes with a `withDelay` modifier.···············`interpolateColor` returns the color after interpolation from within the output range in `rgba(r, g, b, a)` format.
-740
out/llms-full-react-native.txt
-740
out/llms-full-react-native.txt
·······································2. For iOS only, navigate in the `App/ios` folder and run `bundle exec pod install` to install your dependencies.···A task is an async function that you register on `AppRegistry`, similar to registering React applications:························Find a place in your application where you would like to add a call to the native module’s `createCalendarEvent()` method. Below is an example of a component, `NewModuleButton` you can add in your app. You can invoke the native module inside `NewModuleButton`'s `onPress()` function.···In order to access your native module from JavaScript you need to first import `NativeModules` from React Native:Now that you have the CalendarModule native module available, you can invoke your native method `createCalendarEvent()`. Below it is added to the `onPress()` method in `NewModuleButton`:···To save consumers of your native module from needing to do that each time they want to access your native module, you can create a JavaScript wrapper for the module. Create a new JavaScript file named `CalendarModule.js` with the following content:···This JavaScript file also becomes a good location for you to add any JavaScript side functionality. For example, if you use a type system like TypeScript you can add type annotations for your native module here. While React Native does not yet support Native to JS type safety, all your JS code will be type safe. Doing so will also make it easier for you to switch to type-safe native modules down the line. Below is an example of adding type safety to the CalendarModule:···In your other JavaScript files you can access the native module and invoke its method like this:···············The JavaScript counterpart of this method returns a Promise. This means you can use the `await` keyword within an async function to call it and wait for its result:···JavaScript modules can then register to receive events by `addListener` on the NativeEventEmitter class.·········Find a place in your application where you would like to add a call to the native module’s `createCalendarEvent()` method. Below is an example of a component, `NewModuleButton` you can add in your app. You can invoke the native module inside `NewModuleButton`'s `onPress()` function.···In order to access your native module from JavaScript you need to first import `NativeModules` from React Native:···Now that you have the CalendarModule native module available, you can invoke your native method `createCalendarEvent()`. Below it is added to the `onPress()` method in `NewModuleButton`:···To save consumers of your native module from needing to do that each time they want to access your native module, you can create a JavaScript wrapper for the module. Create a new JavaScript file named NativeCalendarModule.js with the following content:···This JavaScript file also becomes a good location for you to add any JavaScript side functionality. For example, if you use a type system like TypeScript you can add type annotations for your native module here. While React Native does not yet support Native to JS type safety, with these type annotations, all your JS code will be type safe. These annotations will also make it easier for you to switch to type-safe native modules down the line. Below is an example of adding type safety to the Calendar Module:···In your other JavaScript files you can access the native module and invoke its method like this:···The constant can then be accessed by invoking `getConstants()` on the native module in JS like so:············The JavaScript counterpart of this method returns a Promise. This means you can use the `await` keyword within an async function to call it and wait for its result:···Let's create an `App.tsx` file. This is a TypeScript file that can have JSX expressions. It contains the root React Native component that we will integrate into our Android application (link):···Let's create an `App.tsx` file. This is a TypeScript file that can have JSX expressions. It contains the root React Native component that we will integrate into our iOS application (link):······In this example, the class `MyNativeView` is a wrapper for a `NativeComponent` and exposes methods, which will be called on the iOS platform. `MyNativeView` is defined in `MyNativeView.ios.js` and contains proxy methods of `NativeComponent`.When the user interacts with the component, like clicking the button, the `backgroundColor` of `MyNativeView` changes. In this case `UIManager` would not know which `MyNativeView` should be handled and which one should change `backgroundColor`. Below you will find a solution to this problem:···TouchableOpacity uses `setNativeProps` internally to update the opacity of its child component:···This allows us to write the following code and know that the child will have its opacity updated in response to taps, without the child having any knowledge of that fact or requiring any changes to its implementation:···Let's imagine that `setNativeProps` was not available. One way that we might implement it with that constraint is to store the opacity value in the state, then update that value whenever `onPress` is fired:···Identifies the element that labels the element it is applied to. The value of `aria-labelledby` should match the `nativeID` of the related element:···If this button doesn't look right for your app, you can build your own button using Pressable. For inspiration, look at the source code for the Button component.···Animations are started by calling `start()` on your animation. `start()` takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with `{finished: true}`. If the animation is done because `stop()` was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive `{finished: false}`.···For example, when working with horizontal scrolling gestures, you would do the following in order to map `event.nativeEvent.contentOffset.x` to `scrollX` (an `Animated.Value`):················································Takes an array of mappings and extracts values from each arg accordingly, then calls `setValue` on the mapped outputs. e.g.······| callback | `(result: {finished: boolean}) => void` | No | Function that will be called after the animation finished running normally or when the animation is done because stop() was called on it before it could finish |···························Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.····································The `<Text>` element is unique relative to layout: everything inside is no longer using the Flexbox layout but using text layout. This means that elements inside of a `<Text>` are no longer rectangles, but wrap when they see the end of the line.···In React Native, we are more strict about it: **you must wrap all the text nodes inside of a `<Text>` component**. You cannot have a text node directly under a `<View>`.···You also lose the ability to set up a default font for an entire subtree. Meanwhile, `fontFamily` only accepts a single font name, which is different from `font-family` in CSS. The recommended way to use consistent fonts and sizes across your application is to create a component `MyAppText` that includes them and use this component across your app. You can also use this component to make more specific components like `MyAppHeaderText` for other kinds of text.···Assuming that `MyAppText` is a component that only renders out its children into a `Text` component with styling, then `MyAppHeaderText` can be defined as follows:···Composing `MyAppText` in this way ensures that we get the styles from a top-level component, but leaves us the ability to add/override them in specific use cases.React Native still has the concept of style inheritance, but limited to text subtrees. In this case, the second part will be both bold and red.···············React Native provides a unified way of managing images and other media assets in your Android and iOS apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:·········For images included via Xcode asset catalogs or in the Android drawable folder, use the image name without the extension:······Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, _you will need to manually specify the dimensions of your image_. It's highly recommended that you use https as well in order to satisfy App Transport Security requirements on iOS.···If you would like to set such things as the HTTP-Verb, Headers or a Body along with the image request, you may do this by defining these properties on the source object:······- `force-cache`: The existing cached data will be used to satisfy the request, regardless of its age or expiration date. If there is no existing data in the cache corresponding the request, the data is loaded from the originating source.- `only-if-cached`: The existing cache data will be used to satisfy a request, regardless of its age or expiration date. If there is no existing data in the cache corresponding to a URL load request, no attempt is made to load the data from the originating source, and the load is considered to have failed.···Android supports loading drawable resources via the `xml` file type. This means you can use vector drawables for rendering icons or shape drawables for, well, drawing shapes! You can import and use these resource types the same as any other static resource or hybrid resource. You have to specify image dimensions manually.For static drawables that live alongside your JS code, use the `require` or `import` syntax (both work the same):···For drawables included in the Android drawable folder (i.e. `res/drawable`), use the resource name without the extension:······In React Native, one interesting decision is that the `src` attribute is named `source` and doesn't take a string but an object with a `uri` attribute.···A common feature request from developers familiar with the web is `background-image`. To handle this use case, you can use the `<ImageBackground>` component, which has the same props as `<Image>`, and add whatever children to it you would like to layer on top of it.You might not want to use `<ImageBackground>` in some cases, since the implementation is basic. Refer to `<ImageBackground>`'s documentation for more insight, and create your own custom component when needed.···The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts if not used correctly, for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color.TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.···Button provides a basic button component that is rendered nicely on all platforms. The minimal example to display a button looks like this:······Now, you need to wrap the whole app in `NavigationContainer`. Usually you'd do this in your entry file, such as `index.js` or `App.js`:······You can set options such as the screen title for each screen in the `options` prop of `Stack.Screen`.Each screen takes a `component` prop that is a React component. Those components receive a prop called `navigation` which has various methods to link to other screens. For example, you can use `navigation.navigate` to go to the `Profile` screen:···For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position:···For example, the following animation coasts to a stop, then it springs back while twirling in parallel:···There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x --> 0.5x):······For example, you may want to think about your `Animated.Value` as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying `style` from the example above like so:···`interpolate()` supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:···`interpolate()` also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:···Animated values can also track other values by setting the `toValue` of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. They can also be composed with interpolations:···Gestures, like panning or scrolling, and other events can map directly to animated values using `Animated.event`. This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.For example, when working with horizontal scrolling gestures, you would do the following in order to map `event.nativeEvent.contentOffset.x` to `scrollX` (an `Animated.Value`):···When using `PanResponder`, you could use the following code to extract the x and y positions from `gestureState.dx` and `gestureState.dy`. We use a `null` in the first position of the array, as we are only interested in the second argument passed to the `PanResponder` handler, which is the `gestureState`.···Using the native driver for normal animations can be accomplished by setting `useNativeDriver: true` in animation config when starting it. Animations without a `useNativeDriver` property will default to false for legacy reasons, but emit a warning (and typechecking error in TypeScript).···Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.The native driver also works with `Animated.event`. This is especially useful for animations that follow the scroll position as without the native driver, the animation will always run a frame behind the gesture due to the async nature of React Native.···While using transform styles such as `rotateY`, `rotateX`, and others ensure the transform style `perspective` is in place. At this time some animations may not render on Android without it. Example below.···Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:···Specifies the background color of the drawer. The default value is `white`. If you want to set the opacity of the drawer, use rgba. Example:·····················Fetch also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional headers, or make a POST request:···Networking is an inherently asynchronous operation. Fetch method will return a Promise that makes it straightforward to write code that works in an asynchronous manner:······The XMLHttpRequest API is built into React Native. This means that you can use third party libraries such as frisbee or axios that depend on it, or you can use the XMLHttpRequest API directly if you prefer.···React Native also supports WebSockets, a protocol which provides full-duplex communication channels over a single TCP connection.···On Android, `accessible={true}` property for a react-native View will be translated into native `focusable={true}`.···To use, set the `accessibilityLabel` property to a custom string on your View, Text, or Touchable:···A reference to another element nativeID used to build complex forms. The value of `accessibilityLabelledBy` should match the `nativeID` of the related element:···An accessibility hint can be used to provide additional context to the user on the result of the action when it is not clear from the accessibility label alone.···By using the `accessibilityLanguage` property, the screen reader will understand which language to use while reading the element's **label**, **value**, and **hint**. The provided string value must follow the BCP 47 specification.···- **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view.······Identifies the element that labels the element it is applied to. The value of `aria-labelledby` should match the `nativeID` of the related element:···In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The `importantForAccessibility` property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to `auto`, `yes`, `no` and `no-hide-descendants` (the last value will force accessibility services to ignore the component and all of its children).···To handle action requests, a component must implement an `onAccessibilityAction` function. The only argument to this function is an event containing the name of the action to perform. The below example from RNTester shows how to create a component that defines and handles several custom actions.···Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: a view tag and a type of event. The supported event types are `typeWindowStateChanged`, `typeViewFocused`, and `typeViewClicked`.···Here is how you do it: To define your `Cat` component, first use JavaScript’s `import` to import React and React Native’s `Text` Core Component:······You can export your function component with JavaScript’s `export default` for use throughout your app like so:···Then you declare the component’s state by calling `useState` inside its function. In this example, `useState` creates an `isHungry` state variable:···It doesn’t matter what names you use. But it can be handy to think of the pattern as `[<getter>, <setter>] = useState(<initialValue>)`.···Now, when someone presses the button, `onPress` will fire, calling the `setIsHungry(false)`. This sets the state variable `isHungry` to `false`. When `isHungry` is false, the `Button`’s `disabled` prop is set to `true` and its `title` also changes:···> You might’ve noticed that although `isHungry` is a const, it is seemingly reassignable! What is happening is when a state-setting function like `setIsHungry` is called, its component will re-render. In this case the `Cat` function will run again—and this time, `useState` will give us the next value of `isHungry`.···React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.···There is also a `Platform.select` method available that, given an object where keys can be one of `'ios' | 'android' | 'native' | 'default'`, returns the most fitting value for the platform you are currently running on. That is, if you're running on a phone, `ios` and `android` keys will take preference. If those are not specified, `native` key will be used and then the `default` key.···Since it accepts `any` value, you can also use it to return platform-specific components, like below:······On Android, the `Platform` module can also be used to detect the version of the Android Platform in which the app is running:···On iOS, the `Version` is a result of `-[UIDevice systemVersion]`, which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:·········Aside from rendering some UI, your components handle events like `onChangeText` for `TextInput` or `onPress` for `Button`. They may also contain other functions and event callbacks. Consider the following example:···Component testing libraries such as React Native Testing Library facilitate writing user-centric tests by careful choice of provided APIs. The following example uses `fireEvent` methods `changeText` and `press` that simulate a user interacting with the component and a query function `getAllByText` that finds matching `Text` nodes in the rendered output.···Snapshot testing is an advanced kind of testing enabled by Jest. It is a very powerful and low-level tool, so extra attention is advised when using it.A "component snapshot" is a JSX-like string created by a custom React serializer built into Jest. This serializer lets Jest translate React component trees to string that's human-readable. Put another way: a component snapshot is a textual representation of your component’s render output _generated_ during a test run. It may look like this:···Sometimes, if we do an action in the same frame that we are adjusting the opacity or highlight of a component that is responding to a touch, we won't see that effect until after the `onPress` function has returned. If `onPress` does a `setState` that results in a lot of work and a few frames dropped, this may occur. A solution to this is to wrap any action inside of your `onPress` handler in `requestAnimationFrame`:············`React.memo()` creates a memoized component that will be re-rendered only when the props passed to the component change. We can use this function to optimize the components in the FlatList.···For class components, move the `renderItem` function outside of the render function, so it won't recreate itself each time the render function is called.···If you use the React Native CLI to build your app, `require` calls (but not `import`s) will automatically be inlined for you, both in your code and inside any third-party packages (`node_modules`) you use.······The touch handling system considers one or more active touches to be an 'interaction' and will delay `runAfterInteractions()` callbacks until all touches have ended or been cancelled.InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion:·····················This property will only work on Android API 29 and below. For similar functionality on higher Android APIs, consider using snackbar or notification.···This property will only work on Android API 29 and below. For similar functionality on higher Android APIs, consider using snackbar or notification.······························`AppRegistry` is the JS entry point to running all React Native apps. App root components should register themselves with `AppRegistry.registerComponent`, then the native system can load the bundle for the app and then actually run the app when it's ready by invoking `AppRegistry.runApplication`.···················································You should get a higher resolution image if you are on a high pixel density device. A good rule of thumb is to multiply the size of the image you display by the pixel ratio.·····················`getItemLayout` is an optional optimization that allows skipping the measurement of dynamic content if you know the size (height or width) of items ahead of time. `getItemLayout` is efficient if you have fixed size items, for example:···············································································································Since the value of the corresponding platform key can be of type `any`, `select` method can also be used to return platform-specific components, like below:·······················································································static create(styles: Object extends Record<string, ViewStyle | ImageStyle | TextStyle>): Object;···static flatten(style: Array<Object extends Record<string, ViewStyle | ImageStyle | TextStyle>>): Object;···> **WARNING: EXPERIMENTAL.** Breaking changes will probably happen a lot and will not be reliably announced. The whole thing might be deleted, who knows? Use at your own risk.····································> `useWindowDimensions` is the preferred API for React components. Unlike `Dimensions`, it updates as the window's dimensions update. This works nicely with the React paradigm.······························································································································`useWindowDimensions` automatically updates all of its values when screen size or font scale changes. You can get your application window's width and height like so:···························
·······································2. For iOS only, navigate in the `App/ios` folder and run `bundle exec pod install` to install your dependencies.···A task is an async function that you register on `AppRegistry`, similar to registering React applications:························Find a place in your application where you would like to add a call to the native module’s `createCalendarEvent()` method. Below is an example of a component, `NewModuleButton` you can add in your app. You can invoke the native module inside `NewModuleButton`'s `onPress()` function.···In order to access your native module from JavaScript you need to first import `NativeModules` from React Native:Now that you have the CalendarModule native module available, you can invoke your native method `createCalendarEvent()`. Below it is added to the `onPress()` method in `NewModuleButton`:···To save consumers of your native module from needing to do that each time they want to access your native module, you can create a JavaScript wrapper for the module. Create a new JavaScript file named `CalendarModule.js` with the following content:···This JavaScript file also becomes a good location for you to add any JavaScript side functionality. For example, if you use a type system like TypeScript you can add type annotations for your native module here. While React Native does not yet support Native to JS type safety, all your JS code will be type safe. Doing so will also make it easier for you to switch to type-safe native modules down the line. Below is an example of adding type safety to the CalendarModule:···In your other JavaScript files you can access the native module and invoke its method like this:···············The JavaScript counterpart of this method returns a Promise. This means you can use the `await` keyword within an async function to call it and wait for its result:···JavaScript modules can then register to receive events by `addListener` on the NativeEventEmitter class.·········Find a place in your application where you would like to add a call to the native module’s `createCalendarEvent()` method. Below is an example of a component, `NewModuleButton` you can add in your app. You can invoke the native module inside `NewModuleButton`'s `onPress()` function.···In order to access your native module from JavaScript you need to first import `NativeModules` from React Native:···Now that you have the CalendarModule native module available, you can invoke your native method `createCalendarEvent()`. Below it is added to the `onPress()` method in `NewModuleButton`:···To save consumers of your native module from needing to do that each time they want to access your native module, you can create a JavaScript wrapper for the module. Create a new JavaScript file named NativeCalendarModule.js with the following content:···This JavaScript file also becomes a good location for you to add any JavaScript side functionality. For example, if you use a type system like TypeScript you can add type annotations for your native module here. While React Native does not yet support Native to JS type safety, with these type annotations, all your JS code will be type safe. These annotations will also make it easier for you to switch to type-safe native modules down the line. Below is an example of adding type safety to the Calendar Module:···In your other JavaScript files you can access the native module and invoke its method like this:···The constant can then be accessed by invoking `getConstants()` on the native module in JS like so:············The JavaScript counterpart of this method returns a Promise. This means you can use the `await` keyword within an async function to call it and wait for its result:···Let's create an `App.tsx` file. This is a TypeScript file that can have JSX expressions. It contains the root React Native component that we will integrate into our Android application (link):···Let's create an `App.tsx` file. This is a TypeScript file that can have JSX expressions. It contains the root React Native component that we will integrate into our iOS application (link):······In this example, the class `MyNativeView` is a wrapper for a `NativeComponent` and exposes methods, which will be called on the iOS platform. `MyNativeView` is defined in `MyNativeView.ios.js` and contains proxy methods of `NativeComponent`.When the user interacts with the component, like clicking the button, the `backgroundColor` of `MyNativeView` changes. In this case `UIManager` would not know which `MyNativeView` should be handled and which one should change `backgroundColor`. Below you will find a solution to this problem:···TouchableOpacity uses `setNativeProps` internally to update the opacity of its child component:···This allows us to write the following code and know that the child will have its opacity updated in response to taps, without the child having any knowledge of that fact or requiring any changes to its implementation:···Let's imagine that `setNativeProps` was not available. One way that we might implement it with that constraint is to store the opacity value in the state, then update that value whenever `onPress` is fired:···Identifies the element that labels the element it is applied to. The value of `aria-labelledby` should match the `nativeID` of the related element:···If this button doesn't look right for your app, you can build your own button using Pressable. For inspiration, look at the source code for the Button component.···Animations are started by calling `start()` on your animation. `start()` takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with `{finished: true}`. If the animation is done because `stop()` was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive `{finished: false}`.···For example, when working with horizontal scrolling gestures, you would do the following in order to map `event.nativeEvent.contentOffset.x` to `scrollX` (an `Animated.Value`):················································Takes an array of mappings and extracts values from each arg accordingly, then calls `setValue` on the mapped outputs. e.g.······| callback | `(result: {finished: boolean}) => void` | No | Function that will be called after the animation finished running normally or when the animation is done because stop() was called on it before it could finish |···························Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.····································The `<Text>` element is unique relative to layout: everything inside is no longer using the Flexbox layout but using text layout. This means that elements inside of a `<Text>` are no longer rectangles, but wrap when they see the end of the line.···In React Native, we are more strict about it: **you must wrap all the text nodes inside of a `<Text>` component**. You cannot have a text node directly under a `<View>`.···You also lose the ability to set up a default font for an entire subtree. Meanwhile, `fontFamily` only accepts a single font name, which is different from `font-family` in CSS. The recommended way to use consistent fonts and sizes across your application is to create a component `MyAppText` that includes them and use this component across your app. You can also use this component to make more specific components like `MyAppHeaderText` for other kinds of text.···Assuming that `MyAppText` is a component that only renders out its children into a `Text` component with styling, then `MyAppHeaderText` can be defined as follows:···Composing `MyAppText` in this way ensures that we get the styles from a top-level component, but leaves us the ability to add/override them in specific use cases.React Native still has the concept of style inheritance, but limited to text subtrees. In this case, the second part will be both bold and red.···············React Native provides a unified way of managing images and other media assets in your Android and iOS apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:·········For images included via Xcode asset catalogs or in the Android drawable folder, use the image name without the extension:······Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, _you will need to manually specify the dimensions of your image_. It's highly recommended that you use https as well in order to satisfy App Transport Security requirements on iOS.···If you would like to set such things as the HTTP-Verb, Headers or a Body along with the image request, you may do this by defining these properties on the source object:······- `force-cache`: The existing cached data will be used to satisfy the request, regardless of its age or expiration date. If there is no existing data in the cache corresponding the request, the data is loaded from the originating source.- `only-if-cached`: The existing cache data will be used to satisfy a request, regardless of its age or expiration date. If there is no existing data in the cache corresponding to a URL load request, no attempt is made to load the data from the originating source, and the load is considered to have failed.···Android supports loading drawable resources via the `xml` file type. This means you can use vector drawables for rendering icons or shape drawables for, well, drawing shapes! You can import and use these resource types the same as any other static resource or hybrid resource. You have to specify image dimensions manually.For static drawables that live alongside your JS code, use the `require` or `import` syntax (both work the same):···For drawables included in the Android drawable folder (i.e. `res/drawable`), use the resource name without the extension:······In React Native, one interesting decision is that the `src` attribute is named `source` and doesn't take a string but an object with a `uri` attribute.···A common feature request from developers familiar with the web is `background-image`. To handle this use case, you can use the `<ImageBackground>` component, which has the same props as `<Image>`, and add whatever children to it you would like to layer on top of it.You might not want to use `<ImageBackground>` in some cases, since the implementation is basic. Refer to `<ImageBackground>`'s documentation for more insight, and create your own custom component when needed.···The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts if not used correctly, for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color.TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.···Button provides a basic button component that is rendered nicely on all platforms. The minimal example to display a button looks like this:······Now, you need to wrap the whole app in `NavigationContainer`. Usually you'd do this in your entry file, such as `index.js` or `App.js`:······You can set options such as the screen title for each screen in the `options` prop of `Stack.Screen`.Each screen takes a `component` prop that is a React component. Those components receive a prop called `navigation` which has various methods to link to other screens. For example, you can use `navigation.navigate` to go to the `Profile` screen:···For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position:···For example, the following animation coasts to a stop, then it springs back while twirling in parallel:···There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x --> 0.5x):······For example, you may want to think about your `Animated.Value` as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying `style` from the example above like so:···`interpolate()` supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:···`interpolate()` also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:···Animated values can also track other values by setting the `toValue` of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. They can also be composed with interpolations:···Gestures, like panning or scrolling, and other events can map directly to animated values using `Animated.event`. This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.For example, when working with horizontal scrolling gestures, you would do the following in order to map `event.nativeEvent.contentOffset.x` to `scrollX` (an `Animated.Value`):···When using `PanResponder`, you could use the following code to extract the x and y positions from `gestureState.dx` and `gestureState.dy`. We use a `null` in the first position of the array, as we are only interested in the second argument passed to the `PanResponder` handler, which is the `gestureState`.···Using the native driver for normal animations can be accomplished by setting `useNativeDriver: true` in animation config when starting it. Animations without a `useNativeDriver` property will default to false for legacy reasons, but emit a warning (and typechecking error in TypeScript).···Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.The native driver also works with `Animated.event`. This is especially useful for animations that follow the scroll position as without the native driver, the animation will always run a frame behind the gesture due to the async nature of React Native.···While using transform styles such as `rotateY`, `rotateX`, and others ensure the transform style `perspective` is in place. At this time some animations may not render on Android without it. Example below.···Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:···Specifies the background color of the drawer. The default value is `white`. If you want to set the opacity of the drawer, use rgba. Example:·····················Fetch also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional headers, or make a POST request:···Networking is an inherently asynchronous operation. Fetch method will return a Promise that makes it straightforward to write code that works in an asynchronous manner:······The XMLHttpRequest API is built into React Native. This means that you can use third party libraries such as frisbee or axios that depend on it, or you can use the XMLHttpRequest API directly if you prefer.···React Native also supports WebSockets, a protocol which provides full-duplex communication channels over a single TCP connection.···On Android, `accessible={true}` property for a react-native View will be translated into native `focusable={true}`.···To use, set the `accessibilityLabel` property to a custom string on your View, Text, or Touchable:···A reference to another element nativeID used to build complex forms. The value of `accessibilityLabelledBy` should match the `nativeID` of the related element:···An accessibility hint can be used to provide additional context to the user on the result of the action when it is not clear from the accessibility label alone.···By using the `accessibilityLanguage` property, the screen reader will understand which language to use while reading the element's **label**, **value**, and **hint**. The provided string value must follow the BCP 47 specification.···- **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view.······Identifies the element that labels the element it is applied to. The value of `aria-labelledby` should match the `nativeID` of the related element:···In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The `importantForAccessibility` property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to `auto`, `yes`, `no` and `no-hide-descendants` (the last value will force accessibility services to ignore the component and all of its children).···To handle action requests, a component must implement an `onAccessibilityAction` function. The only argument to this function is an event containing the name of the action to perform. The below example from RNTester shows how to create a component that defines and handles several custom actions.···Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: a view tag and a type of event. The supported event types are `typeWindowStateChanged`, `typeViewFocused`, and `typeViewClicked`.···Here is how you do it: To define your `Cat` component, first use JavaScript’s `import` to import React and React Native’s `Text` Core Component:······You can export your function component with JavaScript’s `export default` for use throughout your app like so:···Then you declare the component’s state by calling `useState` inside its function. In this example, `useState` creates an `isHungry` state variable:···It doesn’t matter what names you use. But it can be handy to think of the pattern as `[<getter>, <setter>] = useState(<initialValue>)`.···Now, when someone presses the button, `onPress` will fire, calling the `setIsHungry(false)`. This sets the state variable `isHungry` to `false`. When `isHungry` is false, the `Button`’s `disabled` prop is set to `true` and its `title` also changes:···> You might’ve noticed that although `isHungry` is a const, it is seemingly reassignable! What is happening is when a state-setting function like `setIsHungry` is called, its component will re-render. In this case the `Cat` function will run again—and this time, `useState` will give us the next value of `isHungry`.···React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.···There is also a `Platform.select` method available that, given an object where keys can be one of `'ios' | 'android' | 'native' | 'default'`, returns the most fitting value for the platform you are currently running on. That is, if you're running on a phone, `ios` and `android` keys will take preference. If those are not specified, `native` key will be used and then the `default` key.···Since it accepts `any` value, you can also use it to return platform-specific components, like below:······On Android, the `Platform` module can also be used to detect the version of the Android Platform in which the app is running:···On iOS, the `Version` is a result of `-[UIDevice systemVersion]`, which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:·········Aside from rendering some UI, your components handle events like `onChangeText` for `TextInput` or `onPress` for `Button`. They may also contain other functions and event callbacks. Consider the following example:···Component testing libraries such as React Native Testing Library facilitate writing user-centric tests by careful choice of provided APIs. The following example uses `fireEvent` methods `changeText` and `press` that simulate a user interacting with the component and a query function `getAllByText` that finds matching `Text` nodes in the rendered output.···Snapshot testing is an advanced kind of testing enabled by Jest. It is a very powerful and low-level tool, so extra attention is advised when using it.A "component snapshot" is a JSX-like string created by a custom React serializer built into Jest. This serializer lets Jest translate React component trees to string that's human-readable. Put another way: a component snapshot is a textual representation of your component’s render output _generated_ during a test run. It may look like this:···Sometimes, if we do an action in the same frame that we are adjusting the opacity or highlight of a component that is responding to a touch, we won't see that effect until after the `onPress` function has returned. If `onPress` does a `setState` that results in a lot of work and a few frames dropped, this may occur. A solution to this is to wrap any action inside of your `onPress` handler in `requestAnimationFrame`:············`React.memo()` creates a memoized component that will be re-rendered only when the props passed to the component change. We can use this function to optimize the components in the FlatList.···For class components, move the `renderItem` function outside of the render function, so it won't recreate itself each time the render function is called.···If you use the React Native CLI to build your app, `require` calls (but not `import`s) will automatically be inlined for you, both in your code and inside any third-party packages (`node_modules`) you use.······The touch handling system considers one or more active touches to be an 'interaction' and will delay `runAfterInteractions()` callbacks until all touches have ended or been cancelled.InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion:·····················This property will only work on Android API 29 and below. For similar functionality on higher Android APIs, consider using snackbar or notification.···This property will only work on Android API 29 and below. For similar functionality on higher Android APIs, consider using snackbar or notification.······························`AppRegistry` is the JS entry point to running all React Native apps. App root components should register themselves with `AppRegistry.registerComponent`, then the native system can load the bundle for the app and then actually run the app when it's ready by invoking `AppRegistry.runApplication`.···················································You should get a higher resolution image if you are on a high pixel density device. A good rule of thumb is to multiply the size of the image you display by the pixel ratio.·····················`getItemLayout` is an optional optimization that allows skipping the measurement of dynamic content if you know the size (height or width) of items ahead of time. `getItemLayout` is efficient if you have fixed size items, for example:···············································································································Since the value of the corresponding platform key can be of type `any`, `select` method can also be used to return platform-specific components, like below:·······················································································static create(styles: Object extends Record<string, ViewStyle | ImageStyle | TextStyle>): Object;···static flatten(style: Array<Object extends Record<string, ViewStyle | ImageStyle | TextStyle>>): Object;···> **WARNING: EXPERIMENTAL.** Breaking changes will probably happen a lot and will not be reliably announced. The whole thing might be deleted, who knows? Use at your own risk.····································> `useWindowDimensions` is the preferred API for React components. Unlike `Dimensions`, it updates as the window's dimensions update. This works nicely with the React paradigm.······························································································································`useWindowDimensions` automatically updates all of its values when screen size or font scale changes. You can get your application window's width and height like so:···························
+28
src/unified.ts
+28
src/unified.ts
···