-2

out/llms-full-react-native-gesture-handler.txt

reviewed

··· 1399 1399 1400 1400 The flow looks as follows: 1401 1401 1402 1402 - Loading... 1403 1403 - 1404 1402 ### Events 1405 1403 1406 1404 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

reviewed

··· 160 160 161 161 ### Example 162 162 163 163 - Loading... 164 164 - 165 163 ### Remarks 166 164 167 165 - Animated styles take precedence over React Native's static styles. All values specified in animated styles override values from static styles. ··· 320 318 321 319 ### Example 322 320 323 323 - Loading... 324 324 - 325 321 ### Remarks 326 322 327 323 - 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. ··· 408 404 409 405 ### Example 410 406 411 411 - Loading... 412 412 - 413 407 This example can be more easily implemented using `useScrollViewOffset`. 414 408 415 409 ### Remarks ··· 500 494 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 501 495 502 496 ### Example 503 503 - 504 504 - Loading... 505 497 506 498 This example can be more easily implemented using `useScrollViewOffset`. 507 499 ··· 609 601 610 602 ### Example 611 603 612 612 - Loading... 613 613 - 614 604 ### Platform compatibility 615 605 616 606 | Android | iOS | Web | ··· 1157 1147 1158 1148 ### Example 1159 1149 1160 1160 - Loading... 1161 1161 - 1162 1150 ### Remarks 1163 1151 1164 1152 - 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. ··· 1228 1216 `scrollTo` returns `undefined`. 1229 1217 1230 1218 ### Example 1231 1231 - 1232 1232 - Loading... 1233 1219 1234 1220 ### Remarks 1235 1221 ··· 1319 1305 1320 1306 #### Example 1321 1307 1322 1322 - Loading... 1323 1323 - 1324 1308 ### Platform compatibility 1325 1309 1326 1310 | Android | iOS | Web | ··· 1409 1393 1410 1394 ### Example 1411 1395 1412 1412 - Loading... 1413 1413 - 1414 1396 ### Platform compatibility 1415 1397 1416 1398 | Android | iOS | Web | ··· 1465 1447 `useScrollViewOffset` returns a shared value which holds the current offset of the `ScrollView`. 1466 1448 1467 1449 ### Example 1468 1468 - 1469 1469 - Loading... 1470 1450 1471 1451 ### Remarks 1472 1452 ··· 1579 1559 1580 1560 And that's it! Pretty straightforward, isn't it? Let's see it in its full glory in an interactive example: 1581 1561 1582 1582 - Loading... 1583 1583 - 1584 1562 You can make use of composing gestures to more complex behaviors. But what if we'd like to create something a bit more interesting? 1585 1563 1586 1564 ### Handling pan gestures ··· 1626 1604 1627 1605 You can play around with the example below and see how the circle changes and reacts to the gesture: 1628 1606 1629 1629 - Loading... 1630 1630 - 1631 1607 ### Using `withDecay` 1632 1608 1633 1609 Remember when some time ago we said that we'll come back to `withDecay`? Now this is the time! ··· 1657 1633 1658 1634 Play around and see how the square decelerates when let go with some speed! 1659 1635 1660 1660 - Loading... 1661 1661 - 1662 1636 Make sure to check the full `withDecay` API reference to get to know the rest of the configuration options. 1663 1637 1664 1638 ### Summary ··· 1679 1653 ## withRepeat 1680 1654 1681 1655 `withRepeat` is an animation modifier that lets you repeat an animation given number of times or run it indefinitely. 1682 1682 - 1683 1683 - Loading... 1684 1656 1685 1657 ### Reference 1686 1658 ··· 1739 1711 1740 1712 A parameter that determines how the animation responds to the device's reduced motion accessibility setting. 1741 1713 1742 1742 - Loading... 1743 1743 - 1744 1714 #### Returns 1745 1715 1746 1716 `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. 1747 1717 1748 1718 ### Example 1749 1749 - 1750 1750 - Loading... 1751 1719 1752 1720 ### Remarks 1753 1721 ··· 1823 1791 1824 1792 ### Example 1825 1793 1826 1826 - Loading... 1827 1827 - 1828 1794 ### Remarks 1829 1795 1830 1796 - `measure` is implemented only on the UI thread. When using `measure` inside event handlers, it has to be wrapped with the `runOnUI` function. ··· 1958 1924 1959 1925 ### Example 1960 1926 1961 1961 - Loading... 1962 1962 - 1963 1927 ### Remarks 1964 1928 1965 1929 - 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. ··· 1996 1960 1997 1961 `withSequence` is an animation modifier that lets you run animations in a sequence. 1998 1962 1999 1999 - Loading... 2000 2000 - 2001 1963 ### Reference 2002 1964 2003 1965 ``` ··· 2041 2003 `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. 2042 2004 2043 2005 ### Example 2044 2044 - 2045 2045 - Loading... 2046 2006 2047 2007 ### Platform compatibility 2048 2008 ··· 2137 2097 2138 2098 `useFrameCallback` lets you run a function on every frame update. 2139 2099 2140 2140 - Loading... 2141 2141 - 2142 2100 ### Reference 2143 2101 2144 2102 ``` ··· 2203 2161 - `callbackId` a number indicating a unique identifier of the frame callback 2204 2162 2205 2163 ### Example 2206 2206 - 2207 2207 - Loading... 2208 2164 2209 2165 ### Remarks 2210 2166 ··· 2475 2431 2476 2432 ### Example 2477 2433 2478 2478 - Loading... 2479 2479 - 2480 2434 ### Platform compatibility 2481 2435 2482 2436 | Android | iOS | Web | ··· 2637 2591 | state | `SharedValue<KeyboardState>` | A shared value containing current state of the keyboard. Possible states: `{ CLOSED, OPEN, CLOSING, OPENING }` | 2638 2592 2639 2593 ### Example 2640 2640 - 2641 2641 - Loading... 2642 2594 2643 2595 ### Remarks 2644 2596 ··· 2826 2778 2827 2779 `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. 2828 2780 2829 2829 - Loading... 2830 2830 - 2831 2781 ### Reference 2832 2782 2833 2783 ``` ··· 2908 2858 For a full, in depth documentation follow the Sensors guide on Android Developers and the Device motion in the Apple Developer documentation. 2909 2859 2910 2860 The playground below mimics the behaviour and returned values of selected sensors: 2911 2911 - 2912 2912 - Loading... 2913 2861 2914 2862 ### Reference 2915 2863 ··· 3172 3120 3173 3121 ### Example 3174 3122 3175 3175 - Loading... 3176 3176 - 3177 3123 ### Remarks 3178 3124 3179 3125 - You should always reach for `useAnimatedStyle` and `useAnimatedProps` first when animating styles or properties. ··· 3299 3245 3300 3246 ### Example 3301 3247 3302 3302 - Loading... 3303 3303 - 3304 3248 ### Remarks 3305 3249 3306 3250 - Changing the reduced motion system setting doesn't cause your components to rerender. ··· 3371 3315 3372 3316 ### Example 3373 3317 3374 3374 - Loading... 3375 3375 - 3376 3318 ### Remarks 3377 3319 3378 3320 info ··· 3533 3475 3534 3476 You can see it in action in the example below: 3535 3477 3536 3536 - Loading... 3537 3537 - 3538 3478 ### Animating props 3539 3479 3540 3480 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. ··· 3613 3553 3614 3554 Check out the full example below: 3615 3555 3616 3616 - Loading... 3617 3617 - 3618 3556 ### Summary 3619 3557 3620 3558 In this section, we went through the differences between animating styles and props and how to use `useAnimatedStyle` and `useAnimatedProps`. To sum up: ··· 3758 3696 - `ReduceMotion.Never` - This option ensures that the animation remains enabled at all times. 3759 3697 3760 3698 ### Example 3761 3761 - 3762 3762 - Loading... 3763 3699 3764 3700 ### Platform compatibility 3765 3701 ··· 4223 4159 4224 4160 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. 4225 4161 4226 4226 - Loading... 4227 4227 - 4228 4162 info 4229 4163 4230 4164 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. ··· 5595 5529 5596 5530 ### Example 5597 5531 5598 5598 - Loading... 5599 5599 - 5600 5532 ### Remarks 5601 5533 5602 5534 - 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. ··· 5923 5855 ## Layout transitions 5924 5856 5925 5857 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. 5926 5926 - 5927 5927 - Loading... 5928 5858 5929 5859 ### Predefined Transitions 5930 5860 ··· 7157 7087 7158 7088 ### Example 7159 7089 7160 7160 - Loading... 7161 7161 - 7162 7090 ### Remarks 7163 7091 7164 7092 - You can share animated props between components to avoid code duplication. ··· 7685 7613 ## withTiming 7686 7614 7687 7615 `withTiming` lets you create an animation based on duration and easing. 7688 7688 - 7689 7689 - Loading... 7690 7616 7691 7617 ### Reference 7692 7618 ··· 7754 7680 7755 7681 The timing animation configuration. 7756 7682 7757 7757 - Loading... 7758 7758 - 7759 7683 Available properties: 7760 7684 7761 7685 | Name | Type | Default | Description | ··· 7769 7693 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. 7770 7694 7771 7695 It will all start to make sense when you compare a `linear` easing side by side with the default `Easing.inOut(Easing.quad)` easing. 7772 7772 - 7773 7773 - Loading... 7774 7696 7775 7697 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/>. 7776 7698 ··· 7814 7736 `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. 7815 7737 7816 7738 ### Example 7817 7817 - 7818 7818 - Loading... 7819 7739 7820 7740 ### Remarks 7821 7741 ··· 8030 7950 `useScrollViewOffset` returns a shared value which holds the current offset of the `ScrollView`. 8031 7951 8032 7952 ### Example 8033 8033 - 8034 8034 - Loading... 8035 7953 8036 7954 ### Remarks 8037 7955 ··· 8074 7992 8075 7993 It all will start to make sense when you compare side by side a `linear` easing with the default easing. 8076 7994 8077 8077 - Loading... 8078 8078 - 8079 7995 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. 8080 7996 8081 7997 `withTiming` interactive playground ··· 8098 8014 8099 8015 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. 8100 8016 8101 8101 - Loading... 8102 8102 - 8103 8017 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). 8104 8018 8105 8019 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. ··· 8123 8037 ## withSpring 8124 8038 8125 8039 `withSpring` lets you create spring-based animations. 8126 8126 - 8127 8127 - Loading... 8128 8040 8129 8041 ### Reference 8130 8042 ··· 8197 8109 ##### `config`Optional 8198 8110 8199 8111 The spring animation configuration. 8200 8200 - 8201 8201 - Loading... 8202 8112 8203 8113 Available for physics-based spring: 8204 8114 ··· 8242 8152 8243 8153 ### Example 8244 8154 8245 8245 - Loading... 8246 8246 - 8247 8155 ### Remarks 8248 8156 8249 8157 - The callback passed to the 3rd argument is automatically workletized and ran on the UI thread. ··· 8421 8329 8422 8330 You can see it in action in the example below: 8423 8331 8424 8424 - Loading... 8425 8425 - 8426 8332 ### Animating props 8427 8333 8428 8334 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. ··· 8501 8407 8502 8408 Check out the full example below: 8503 8409 8504 8504 - Loading... 8505 8505 - 8506 8410 ### Summary 8507 8411 8508 8412 In this section, we went through the differences between animating styles and props and how to use `useAnimatedStyle` and `useAnimatedProps`. To sum up: ··· 8580 8484 `useDerivedValue` returns a new readonly shared value based on a value returned from the `updater` function. 8581 8485 8582 8486 ### Example 8583 8583 - 8584 8584 - Loading... 8585 8487 8586 8488 ### Remarks 8587 8489 ··· 8636 8538 8637 8539 ### Example 8638 8540 8639 8639 - Loading... 8640 8640 - 8641 8541 ### Remarks 8642 8542 8643 8543 - 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: ··· 8710 8610 Don't forget to call the function returned from `runOnUI`. 8711 8611 8712 8612 ### Example 8713 8713 - 8714 8714 - Loading... 8715 8613 8716 8614 ### Remarks 8717 8615 ··· 8867 8765 8868 8766 And voilà, we've made our first animation using Reanimated! You can see how it works in its full glory in a preview below: 8869 8767 8870 8870 - Loading... 8871 8871 - 8872 8768 ### Summary 8873 8769 8874 8770 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: ··· 8885 8781 ## withDecay 8886 8782 8887 8783 `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. 8888 8888 - 8889 8889 - Loading... 8890 8784 8891 8785 ### Reference 8892 8786 ··· 8932 8826 8933 8827 The decay animation configuration. 8934 8828 8935 8935 - Loading... 8936 8936 - 8937 8829 Available properties: 8938 8830 8939 8831 | Name | Type | Default | Description | ··· 8955 8847 `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. 8956 8848 8957 8849 ### Example 8958 8958 - 8959 8959 - Loading... 8960 8850 8961 8851 ### Remarks 8962 8852 ··· 9018 8908 `createAnimatedComponent` returns a component that Reanimated is capable of animating. 9019 8909 9020 8910 ### Example 9021 9021 - 9022 9022 - Loading... 9023 8911 9024 8912 ### Platform compatibility 9025 8913 ··· 9132 9020 `cancelAnimation` returns `undefined`. 9133 9021 9134 9022 ### Example 9135 9135 - 9136 9136 - Loading... 9137 9023 9138 9024 ### Remarks 9139 9025 ··· 9262 9148 } 9263 9149 ``` 9264 9150 9265 9265 - Loading... 9266 9266 - 9267 9151 ### Repeating an animation 9268 9152 9269 9153 To implement our desired shake animation we can use `withRepeat` modifier. This modifier lets you repeat a provided animation. ··· 9309 9193 ``` 9310 9194 9311 9195 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! 9312 9312 - 9313 9313 - Loading... 9314 9196 9315 9197 ### Running animations in a sequence 9316 9198 ··· 9348 9230 }; 9349 9231 ``` 9350 9232 9351 9351 - Loading... 9352 9352 - 9353 9233 ### Starting the animation with delay 9354 9234 9355 9235 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. ··· 9388 9268 ); 9389 9269 }; 9390 9270 ``` 9391 9391 - 9392 9392 - Loading... 9393 9271 9394 9272 ### Summary 9395 9273 ··· 9410 9288 9411 9289 `interpolate` lets you map a value from one range to another using linear interpolation. 9412 9290 9413 9413 - Loading... 9414 9414 - 9415 9291 ### Reference 9416 9292 9417 9293 ``` ··· 9501 9377 `interpolate` returns a mapped value within the output range. 9502 9378 9503 9379 ### Example 9504 9504 - 9505 9505 - Loading... 9506 9380 9507 9381 ### Platform compatibility 9508 9382 ··· 9554 9428 9555 9429 ### Example 9556 9430 9557 9557 - Loading... 9558 9558 - 9559 9431 ### Platform compatibility 9560 9432 9561 9433 | Android | iOS | Web | ··· 9644 9516 `interpolateColor` returns the color after interpolation from within the output range in `rgba(r, g, b, a)` format. 9645 9517 9646 9518 ### Example 9647 9647 - 9648 9648 - Loading... 9649 9519 9650 9520 ### Remarks 9651 9521

-740

out/llms-full-react-native.txt

reviewed

··· 81 81 82 82 #### `alert()` 83 83 84 84 - tsx 85 85 - 86 84 ``` 87 85 static alert ( 88 86 title: string, ··· 104 102 --- 105 103 106 104 #### `prompt()`iOS 107 107 - 108 108 - tsx 109 105 110 106 ``` 111 107 static prompt: ( ··· 352 348 353 349 #### `addEventListener()` 354 350 355 355 - tsx 356 356 - 357 351 ``` 358 352 static addEventListener( 359 353 type: 'url', ··· 366 360 --- 367 361 368 362 #### `canOpenURL()` 369 369 - 370 370 - tsx 371 363 372 364 ``` 373 365 static canOpenURL(url: string): Promise<boolean>; ··· 412 404 413 405 #### `getInitialURL()` 414 406 415 415 - tsx 416 416 - 417 407 ``` 418 408 static getInitialURL(): Promise<string | null>; 419 409 ``` ··· 428 418 429 419 #### `openSettings()` 430 420 431 431 - tsx 432 432 - 433 421 ``` 434 422 static openSettings(): Promise<void>; 435 423 ``` ··· 439 427 --- 440 428 441 429 #### `openURL()` 442 442 - 443 443 - tsx 444 430 445 431 ``` 446 432 static openURL(url: string): Promise<any>; ··· 468 454 469 455 #### `sendIntent()`Android 470 456 471 471 - tsx 472 472 - 473 457 ``` 474 458 static sendIntent( 475 459 action: string, ··· 498 482 499 483 #### `showActionSheetWithOptions()` 500 484 501 501 - tsx 502 502 - 503 485 ``` 504 486 static showActionSheetWithOptions: ( 505 487 options: ActionSheetIOSOptions, ··· 524 506 525 507 Minimal example: 526 508 527 527 - tsx 528 528 - 529 509 ``` 530 510 ActionSheetIOS.showActionSheetWithOptions( 531 511 { ··· 545 525 546 526 #### `dismissActionSheet()` 547 527 548 548 - tsx 549 549 - 550 528 ``` 551 529 static dismissActionSheet(); 552 530 ``` ··· 556 534 --- 557 535 558 536 #### `showShareActionSheetWithOptions()` 559 559 - 560 560 - tsx 561 537 562 538 ``` 563 539 static showShareActionSheetWithOptions: ( ··· 788 764 2. For iOS only, navigate in the `App/ios` folder and run `bundle exec pod install` to install your dependencies. 789 765 3. Update the `App.tsx` code to import the code in your library. For example: 790 766 791 791 - tsx 792 792 - 793 767 ``` 794 768 import NativeSampleModule from '../Library/src/index'; 795 769 ``` ··· 872 846 873 847 A task is an async function that you register on `AppRegistry`, similar to registering React applications: 874 848 875 875 - tsx 876 876 - 877 849 ``` 878 850 import {AppRegistry} from 'react-native'; 879 851 AppRegistry.registerHeadlessTask('SomeTaskName', () => ··· 882 854 ``` 883 855 884 856 Then, in `SomeTaskName.js`: 885 885 - 886 886 - tsx 887 857 888 858 ``` 889 859 module.exports = async taskData => { ··· 1037 1007 1038 1008 Example: 1039 1009 1040 1040 - tsx 1041 1041 - 1042 1010 ``` 1043 1011 import {HeadlessJsTaskError} from 'HeadlessJsTask'; 1044 1012 ··· 1509 1477 } 1510 1478 } 1511 1479 ``` 1512 1512 - 1513 1513 - tsx 1514 1480 1515 1481 ``` 1516 1482 import React from 'react'; ··· 2184 2150 moduleName:@"ImageBrowserApp" 2185 2151 initialProperties:props]; 2186 2152 ``` 2187 2187 - 2188 2188 - tsx 2189 2153 2190 2154 ``` 2191 2155 import React from 'react'; ··· 2479 2443 2480 2444 ### Usage Pattern 2481 2445 2482 2482 - tsx 2483 2483 - 2484 2446 ``` 2485 2447 const ExampleComponent = () => { 2486 2448 const panResponder = React.useRef( ··· 2538 2500 ### Methods 2539 2501 2540 2502 #### `create()` 2541 2541 - 2542 2542 - tsx 2543 2503 2544 2504 ``` 2545 2505 static create(config: PanResponderCallbacks): PanResponderInstance; ··· 2880 2840 2881 2841 The native module can then be accessed in JS like this: 2882 2842 2883 2883 - tsx 2884 2884 - 2885 2843 ``` 2886 2844 const {CalendarModule} = ReactNative.NativeModules; 2887 2845 ``` ··· 3073 3031 3074 3032 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. 3075 3033 3076 3076 - tsx 3077 3077 - 3078 3034 ``` 3079 3035 import React from 'react'; 3080 3036 import {NativeModules, Button} from 'react-native'; ··· 3098 3054 3099 3055 In order to access your native module from JavaScript you need to first import `NativeModules` from React Native: 3100 3056 3101 3101 - tsx 3102 3102 - 3103 3057 ``` 3104 3058 import {NativeModules} from 'react-native'; 3105 3059 ``` 3106 3060 3107 3061 You can then access the `CalendarModule` native module off of `NativeModules`. 3108 3062 3109 3109 - tsx 3110 3110 - 3111 3063 ``` 3112 3064 const {CalendarModule} = NativeModules; 3113 3065 ``` 3114 3066 3115 3067 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`: 3116 3116 - 3117 3117 - tsx 3118 3068 3119 3069 ``` 3120 3070 const onPress = () => { ··· 3159 3109 3160 3110 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: 3161 3111 3162 3162 - tsx 3163 3163 - 3164 3112 ``` 3165 3113 /** 3166 3114 * This exposes the native CalendarModule module as a JS module. This has a ··· 3176 3124 3177 3125 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: 3178 3126 3179 3179 - tsx 3180 3180 - 3181 3127 ``` 3182 3128 /** 3183 3129 * This exposes the native CalendarModule module as a JS module. This has a ··· 3195 3141 ``` 3196 3142 3197 3143 In your other JavaScript files you can access the native module and invoke its method like this: 3198 3198 - 3199 3199 - tsx 3200 3144 3201 3145 ``` 3202 3146 import CalendarModule from './CalendarModule'; ··· 3284 3228 3285 3229 The constant can then be accessed by invoking `getConstants` on the native module in JS: 3286 3230 3287 3287 - tsx 3288 3288 - 3289 3231 ``` 3290 3232 const {DEFAULT_EVENT_NAME} = CalendarModule.getConstants(); 3291 3233 console.log(DEFAULT_EVENT_NAME); ··· 3349 3291 3350 3292 This method could then be accessed in JavaScript using: 3351 3293 3352 3352 - tsx 3353 3353 - 3354 3294 ``` 3355 3295 const onPress = () => { 3356 3296 CalendarModule.createCalendarEvent( ··· 3391 3331 ``` 3392 3332 3393 3333 In JavaScript, you can then check the first argument to see if an error was passed through: 3394 3394 - 3395 3395 - tsx 3396 3334 3397 3335 ``` 3398 3336 const onPress = () => { ··· 3435 3373 ``` 3436 3374 3437 3375 Then in JavaScript you can add a separate callback for error and success responses: 3438 3438 - 3439 3439 - tsx 3440 3376 3441 3377 ``` 3442 3378 const onPress = () => { ··· 3498 3434 3499 3435 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: 3500 3436 3501 3501 - tsx 3502 3502 - 3503 3437 ``` 3504 3438 const onSubmit = async () => { 3505 3439 try { ··· 3644 3578 ``` 3645 3579 3646 3580 JavaScript modules can then register to receive events by `addListener` on the NativeEventEmitter class. 3647 3647 - 3648 3648 - tsx 3649 3581 3650 3582 ``` 3651 3583 import {NativeEventEmitter, NativeModules} from 'react-native'; ··· 4001 3933 ``` 4002 3934 4003 3935 The native module can then be accessed in JS like this: 4004 4004 - 4005 4005 - tsx 4006 3936 4007 3937 ``` 4008 3938 const {CalendarModuleFoo} = ReactNative.NativeModules; ··· 4021 3951 4022 3952 The native module can then be accessed in JS like this: 4023 3953 4024 4024 - tsx 4025 4025 - 4026 3954 ``` 4027 3955 const {CalendarModule} = ReactNative.NativeModules; 4028 3956 ``` ··· 4076 4004 4077 4005 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. 4078 4006 4079 4079 - tsx 4080 4080 - 4081 4007 ``` 4082 4008 import React from 'react'; 4083 4009 import {Button} from 'react-native'; ··· 4100 4026 ``` 4101 4027 4102 4028 In order to access your native module from JavaScript you need to first import `NativeModules` from React Native: 4103 4103 - 4104 4104 - tsx 4105 4029 4106 4030 ``` 4107 4031 import {NativeModules} from 'react-native'; ··· 4109 4033 4110 4034 You can then access the `CalendarModule` native module off of `NativeModules`. 4111 4035 4112 4112 - tsx 4113 4113 - 4114 4036 ``` 4115 4037 const {CalendarModule} = NativeModules; 4116 4038 ``` 4117 4039 4118 4040 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`: 4119 4119 - 4120 4120 - tsx 4121 4041 4122 4042 ``` 4123 4043 const onPress = () => { ··· 4161 4081 Importing your native module by pulling it off of `NativeModules` like above is a bit clunky. 4162 4082 4163 4083 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: 4164 4164 - 4165 4165 - tsx 4166 4084 4167 4085 ``` 4168 4086 /** ··· 4179 4097 4180 4098 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: 4181 4099 4182 4182 - tsx 4183 4183 - 4184 4100 ``` 4185 4101 /** 4186 4102 * This exposes the native CalendarModule module as a JS module. This has a ··· 4198 4114 ``` 4199 4115 4200 4116 In your other JavaScript files you can access the native module and invoke its method like this: 4201 4201 - 4202 4202 - tsx 4203 4117 4204 4118 ``` 4205 4119 import NativeCalendarModule from './NativeCalendarModule'; ··· 4247 4161 ``` 4248 4162 4249 4163 The constant can then be accessed by invoking `getConstants()` on the native module in JS like so: 4250 4250 - 4251 4251 - tsx 4252 4164 4253 4165 ``` 4254 4166 const {DEFAULT_EVENT_NAME} = CalendarModule.getConstants(); ··· 4293 4205 4294 4206 This method could then be accessed in JavaScript using the following: 4295 4207 4296 4296 - tsx 4297 4297 - 4298 4208 ``` 4299 4209 const onSubmit = () => { 4300 4210 CalendarModule.createCalendarEvent( ··· 4322 4232 ``` 4323 4233 4324 4234 In JavaScript, you can then check the first argument to see if an error was passed through: 4325 4325 - 4326 4326 - tsx 4327 4235 4328 4236 ``` 4329 4237 const onPress = () => { ··· 4363 4271 4364 4272 Then in JavaScript you can add a separate callback for error and success responses: 4365 4273 4366 4366 - tsx 4367 4367 - 4368 4274 ``` 4369 4275 const onPress = () => { 4370 4276 CalendarModule.createCalendarEventCallback( ··· 4406 4312 ``` 4407 4313 4408 4314 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: 4409 4409 - 4410 4410 - tsx 4411 4315 4412 4316 ``` 4413 4317 const onSubmit = async () => { ··· 4795 4699 #### Create a `App.tsx` file 4796 4700 4797 4701 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): 4798 4798 - 4799 4799 - tsx 4800 4702 4801 4703 ``` 4802 4704 import React from 'react'; ··· 5268 5170 5269 5171 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): 5270 5172 5271 5271 - tsx 5272 5272 - 5273 5173 ``` 5274 5174 import React from 'react'; 5275 5175 import { ··· 6264 6164 6265 6165 A React Native view can have more than one child view in the view tree eg. 6266 6166 6267 6267 - tsx 6268 6268 - 6269 6167 ``` 6270 6168 <View> 6271 6169 <MyNativeView /> ··· 6277 6175 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`. 6278 6176 6279 6177 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: 6280 6280 - 6281 6281 - tsx 6282 6178 6283 6179 ``` 6284 6180 <View> ··· 6603 6499 6604 6500 TouchableOpacity uses `setNativeProps` internally to update the opacity of its child component: 6605 6501 6606 6606 - tsx 6607 6607 - 6608 6502 ``` 6609 6503 const viewRef = useRef<View>(); 6610 6504 const setOpacityTo = useCallback(value => { ··· 6616 6510 ``` 6617 6511 6618 6512 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: 6619 6619 - 6620 6620 - tsx 6621 6513 6622 6514 ``` 6623 6515 <TouchableOpacity onPress={handlePress}> ··· 6628 6520 ``` 6629 6521 6630 6522 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: 6631 6631 - 6632 6632 - tsx 6633 6523 6634 6524 ``` 6635 6525 const [buttonOpacity, setButtonOpacity] = useState(1); ··· 6986 6876 #### `aria-labelledby`Android 6987 6877 6988 6878 Identifies the element that labels the element it is applied to. The value of `aria-labelledby` should match the `nativeID` of the related element: 6989 6989 - 6990 6990 - tsx 6991 6879 6992 6880 ``` 6993 6881 <View> ··· 7663 7551 7664 7552 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. 7665 7553 7666 7666 - tsx 7667 7667 - 7668 7554 ``` 7669 7555 <Button 7670 7556 onPress={onPressLearnMore} ··· 7882 7768 #### Working with animations 7883 7769 7884 7770 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}`. 7885 7885 - 7886 7886 - tsx 7887 7771 7888 7772 ``` 7889 7773 Animated.timing({}).start(({finished}) => { ··· 7951 7835 7952 7836 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`): 7953 7837 7954 7954 - tsx 7955 7955 - 7956 7838 ``` 7957 7839 onScroll={Animated.event( 7958 7840 // scrollX = e.nativeEvent.contentOffset.x ··· 7975 7857 7976 7858 #### `decay()` 7977 7859 7978 7978 - tsx 7979 7979 - 7980 7860 ``` 7981 7861 static decay(value, config): CompositeAnimation; 7982 7862 ``` ··· 7993 7873 --- 7994 7874 7995 7875 #### `timing()` 7996 7996 - 7997 7997 - tsx 7998 7876 7999 7877 ``` 8000 7878 static timing(value, config): CompositeAnimation; ··· 8014 7892 8015 7893 #### `spring()` 8016 7894 8017 8017 - tsx 8018 8018 - 8019 7895 ``` 8020 7896 static spring(value, config): CompositeAnimation; 8021 7897 ``` ··· 8053 7929 8054 7930 #### `add()` 8055 7931 8056 8056 - tsx 8057 8057 - 8058 7932 ``` 8059 7933 static add(a: Animated, b: Animated): AnimatedAddition; 8060 7934 ``` ··· 8064 7938 --- 8065 7939 8066 7940 #### `subtract()` 8067 8067 - 8068 8068 - tsx 8069 7941 8070 7942 ``` 8071 7943 static subtract(a: Animated, b: Animated): AnimatedSubtraction; ··· 8077 7949 8078 7950 #### `divide()` 8079 7951 8080 8080 - tsx 8081 8081 - 8082 7952 ``` 8083 7953 static divide(a: Animated, b: Animated): AnimatedDivision; 8084 7954 ``` ··· 8089 7959 8090 7960 #### `multiply()` 8091 7961 8092 8092 - tsx 8093 8093 - 8094 7962 ``` 8095 7963 static multiply(a: Animated, b: Animated): AnimatedMultiplication; 8096 7964 ``` ··· 8100 7968 --- 8101 7969 8102 7970 #### `modulo()` 8103 8103 - 8104 8104 - tsx 8105 7971 8106 7972 ``` 8107 7973 static modulo(a: Animated, modulus: number): AnimatedModulo; ··· 8113 7979 8114 7980 #### `diffClamp()` 8115 7981 8116 8116 - tsx 8117 8117 - 8118 7982 ``` 8119 7983 static diffClamp(a: Animated, min: number, max: number): AnimatedDiffClamp; 8120 7984 ``` ··· 8127 7991 8128 7992 #### `delay()` 8129 7993 8130 8130 - tsx 8131 8131 - 8132 7994 ``` 8133 7995 static delay(time: number): CompositeAnimation; 8134 7996 ``` ··· 8139 8001 8140 8002 #### `sequence()` 8141 8003 8142 8142 - tsx 8143 8143 - 8144 8004 ``` 8145 8005 static sequence(animations: CompositeAnimation[]): CompositeAnimation; 8146 8006 ``` ··· 8150 8010 --- 8151 8011 8152 8012 #### `parallel()` 8153 8153 - 8154 8154 - tsx 8155 8013 8156 8014 ``` 8157 8015 static parallel( ··· 8165 8023 --- 8166 8024 8167 8025 #### `stagger()` 8168 8168 - 8169 8169 - tsx 8170 8026 8171 8027 ``` 8172 8028 static stagger( ··· 8181 8037 8182 8038 #### `loop()` 8183 8039 8184 8184 - tsx 8185 8185 - 8186 8040 ``` 8187 8041 static loop( 8188 8042 animation: CompositeAnimation[], ··· 8200 8054 8201 8055 #### `event()` 8202 8056 8203 8203 - tsx 8204 8204 - 8205 8057 ``` 8206 8058 static event( 8207 8059 argMapping: Mapping[], ··· 8211 8063 8212 8064 Takes an array of mappings and extracts values from each arg accordingly, then calls `setValue` on the mapped outputs. e.g. 8213 8065 8214 8214 - tsx 8215 8215 - 8216 8066 ``` 8217 8067 onScroll={Animated.event( 8218 8068 [{nativeEvent: {contentOffset: {x: this._scrollX}}}], ··· 8264 8114 8265 8115 #### `start()` 8266 8116 8267 8267 - tsx 8268 8268 - 8269 8117 ``` 8270 8118 static start(callback?: (result: {finished: boolean}) => void); 8271 8119 ``` ··· 8279 8127 | 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 | 8280 8128 8281 8129 Start example with callback: 8282 8282 - 8283 8283 - tsx 8284 8130 8285 8131 ``` 8286 8132 Animated.timing({}).start(({finished}) => { ··· 8292 8138 8293 8139 #### `stop()` 8294 8140 8295 8295 - tsx 8296 8296 - 8297 8141 ``` 8298 8142 static stop(); 8299 8143 ``` ··· 8303 8147 --- 8304 8148 8305 8149 #### `reset()` 8306 8306 - 8307 8307 - tsx 8308 8150 8309 8151 ``` 8310 8152 static reset(); ··· 9119 8961 9120 8962 #### `abortPrefetch()`Android 9121 8963 9122 9122 - tsx 9123 9123 - 9124 8964 ``` 9125 8965 static abortPrefetch(requestId: number); 9126 8966 ``` ··· 9136 8976 --- 9137 8977 9138 8978 #### `getSize()` 9139 9139 - 9140 9140 - tsx 9141 8979 9142 8980 ``` 9143 8981 static getSize(uri: string): Promise<{width: number, height: number}>; ··· 9157 8995 9158 8996 #### `getSizeWithHeaders()` 9159 8997 9160 9160 - tsx 9161 9161 - 9162 8998 ``` 9163 8999 static getSizeWithHeaders( 9164 9000 uri: string, ··· 9180 9016 --- 9181 9017 9182 9018 #### `prefetch()` 9183 9183 - 9184 9184 - tsx 9185 9019 9186 9020 ``` 9187 9021 await Image.prefetch(url); ··· 9200 9034 9201 9035 #### `queryCache()` 9202 9036 9203 9203 - tsx 9204 9204 - 9205 9037 ``` 9206 9038 static queryCache( 9207 9039 urls: string[], ··· 9219 9051 --- 9220 9052 9221 9053 #### `resolveAssetSource()` 9222 9222 - 9223 9223 - tsx 9224 9054 9225 9055 ``` 9226 9056 static resolveAssetSource(source: ImageSourcePropType): { ··· 9839 9669 ## Pressable 9840 9670 9841 9671 Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children. 9842 9842 - 9843 9843 - tsx 9844 9672 9845 9673 ``` 9846 9674 <Pressable onPress={onPressFunction}> ··· 10847 10675 ### Methods 10848 10676 10849 10677 #### `flashScrollIndicators()` 10850 10850 - 10851 10851 - tsx 10852 10678 10853 10679 ``` 10854 10680 flashScrollIndicators(); ··· 10860 10686 10861 10687 #### `scrollTo()` 10862 10688 10863 10863 - tsx 10864 10864 - 10865 10689 ``` 10866 10690 scrollTo( 10867 10691 options?: {x?: number, y?: number, animated?: boolean} | number, ··· 10881 10705 --- 10882 10706 10883 10707 #### `scrollToEnd()` 10884 10884 - 10885 10885 - tsx 10886 10708 10887 10709 ``` 10888 10710 scrollToEnd(options?: {animated?: boolean}); ··· 11237 11059 11238 11060 #### `popStackEntry()` 11239 11061 11240 11240 - tsx 11241 11241 - 11242 11062 ``` 11243 11063 static popStackEntry(entry: StatusBarProps); 11244 11064 ``` ··· 11254 11074 --- 11255 11075 11256 11076 #### `pushStackEntry()` 11257 11257 - 11258 11258 - tsx 11259 11077 11260 11078 ``` 11261 11079 static pushStackEntry(props: StatusBarProps): StatusBarProps; ··· 11273 11091 11274 11092 #### `replaceStackEntry()` 11275 11093 11276 11276 - tsx 11277 11277 - 11278 11094 ``` 11279 11095 static replaceStackEntry( 11280 11096 entry: StatusBarProps, ··· 11295 11111 11296 11112 #### `setBackgroundColor()`Android 11297 11113 11298 11298 - tsx 11299 11299 - 11300 11114 ``` 11301 11115 static setBackgroundColor(color: ColorValue, animated?: boolean); 11302 11116 ``` ··· 11318 11132 11319 11133 #### `setBarStyle()` 11320 11134 11321 11321 - tsx 11322 11322 - 11323 11135 ``` 11324 11136 static setBarStyle(style: StatusBarStyle, animated?: boolean); 11325 11137 ``` ··· 11336 11148 --- 11337 11149 11338 11150 #### `setHidden()` 11339 11339 - 11340 11340 - tsx 11341 11151 11342 11152 ``` 11343 11153 static setHidden(hidden: boolean, animation?: StatusBarAnimation); ··· 11356 11166 11357 11167 #### `setNetworkActivityIndicatorVisible()`iOS 11358 11168 11359 11359 - tsx 11360 11360 - 11361 11169 ``` 11362 11170 static setNetworkActivityIndicatorVisible(visible: boolean); 11363 11171 ``` ··· 11373 11181 --- 11374 11182 11375 11183 #### `setTranslucent()`Android 11376 11376 - 11377 11377 - tsx 11378 11184 11379 11185 ``` 11380 11186 static setTranslucent(translucent: boolean); ··· 11538 11344 11539 11345 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. 11540 11346 11541 11541 - tsx 11542 11542 - 11543 11347 ``` 11544 11348 <Text> 11545 11349 <Text>First part and </Text> ··· 11586 11390 11587 11391 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>`. 11588 11392 11589 11589 - tsx 11590 11590 - 11591 11393 ``` 11592 11394 // BAD: will raise exception, can't have a text node as child of a <View> 11593 11395 <View> ··· 11603 11405 ``` 11604 11406 11605 11407 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. 11606 11606 - 11607 11607 - tsx 11608 11408 11609 11409 ``` 11610 11410 <View> ··· 11617 11417 11618 11418 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: 11619 11419 11620 11620 - tsx 11621 11621 - 11622 11420 ``` 11623 11421 const MyAppHeaderText = ({children}) => { 11624 11422 return ( ··· 11632 11430 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. 11633 11431 11634 11432 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. 11635 11635 - 11636 11636 - tsx 11637 11433 11638 11434 ``` 11639 11435 <Text style={{fontWeight: 'bold'}}> ··· 13209 13005 13210 13006 #### `.focus()` 13211 13007 13212 13212 - tsx 13213 13213 - 13214 13008 ``` 13215 13009 focus(); 13216 13010 ``` ··· 13218 13012 Makes the native input request focus. 13219 13013 13220 13014 #### `.blur()` 13221 13221 - 13222 13222 - tsx 13223 13015 13224 13016 ``` 13225 13017 blur(); ··· 13229 13021 13230 13022 #### `clear()` 13231 13023 13232 13232 - tsx 13233 13233 - 13234 13024 ``` 13235 13025 clear(); 13236 13026 ``` ··· 13241 13031 13242 13032 #### `isFocused()` 13243 13033 13244 13244 - tsx 13245 13245 - 13246 13034 ``` 13247 13035 isFocused(): boolean; 13248 13036 ``` ··· 13261 13049 13262 13050 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: 13263 13051 13264 13264 - tsx 13265 13265 - 13266 13052 ``` 13267 13053 <Image source={require('./my-icon.png')} /> 13268 13054 ``` ··· 13282 13068 13283 13069 ...and `button.js` code contains: 13284 13070 13285 13285 - tsx 13286 13286 - 13287 13071 ``` 13288 13072 <Image source={require('./img/check.png')} /> 13289 13073 ``` ··· 13303 13087 7. Images can be distributed via npm packages. 13304 13088 13305 13089 In order for this to work, the image name in `require` has to be known statically. 13306 13306 - 13307 13307 - tsx 13308 13090 13309 13091 ``` 13310 13092 // GOOD ··· 13339 13121 13340 13122 For images included via Xcode asset catalogs or in the Android drawable folder, use the image name without the extension: 13341 13123 13342 13342 - tsx 13343 13343 - 13344 13124 ``` 13345 13125 <Image 13346 13126 source={{uri: 'app_icon'}} ··· 13349 13129 ``` 13350 13130 13351 13131 For images in the Android assets folder, use the `asset:/` scheme: 13352 13352 - 13353 13353 - tsx 13354 13132 13355 13133 ``` 13356 13134 <Image ··· 13365 13143 13366 13144 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. 13367 13145 13368 13368 - tsx 13369 13369 - 13370 13146 ``` 13371 13147 // GOOD 13372 13148 <Image source={{uri: 'https://reactjs.org/logo-og.png'}} ··· 13380 13156 13381 13157 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: 13382 13158 13383 13383 - tsx 13384 13384 - 13385 13159 ``` 13386 13160 <Image 13387 13161 source={{ ··· 13404 13178 13405 13179 This is recommended for very small and dynamic images only, like icons in a list from a DB. 13406 13180 13407 13407 - tsx 13408 13408 - 13409 13181 ``` 13410 13182 // include at least width and height! 13411 13183 <Image ··· 13429 13201 - `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. 13430 13202 - `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. 13431 13203 13432 13432 - tsx 13433 13433 - 13434 13204 ``` 13435 13205 <Image 13436 13206 source={{ ··· 13450 13220 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. 13451 13221 13452 13222 For static drawables that live alongside your JS code, use the `require` or `import` syntax (both work the same): 13453 13453 - 13454 13454 - tsx 13455 13223 13456 13224 ``` 13457 13225 <Image ··· 13462 13230 13463 13231 For drawables included in the Android drawable folder (i.e. `res/drawable`), use the resource name without the extension: 13464 13232 13465 13465 - tsx 13466 13466 - 13467 13233 ``` 13468 13234 <Image 13469 13235 source={{uri: 'my_icon'}} ··· 13493 13259 13494 13260 For example, the result of `require('./my-icon.png')` might be: 13495 13261 13496 13496 - tsx 13497 13497 - 13498 13262 ``` 13499 13263 {"__packager_asset":true,"uri":"my-icon.png","width":591,"height":573} 13500 13264 ``` ··· 13503 13267 13504 13268 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. 13505 13269 13506 13506 - tsx 13507 13507 - 13508 13270 ``` 13509 13271 <Image source={{uri: 'something.jpg'}} /> 13510 13272 ``` ··· 13518 13280 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. 13519 13281 13520 13282 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. 13521 13521 - 13522 13522 - tsx 13523 13283 13524 13284 ``` 13525 13285 return ( ··· 13572 13332 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. 13573 13333 13574 13334 TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View. 13575 13575 - 13576 13576 - tsx 13577 13335 13578 13336 ``` 13579 13337 function MyComponent(props: MyComponentProps) { ··· 13827 13585 ### Displaying a basic button 13828 13586 13829 13587 Button provides a basic button component that is rendered nicely on all platforms. The minimal example to display a button looks like this: 13830 13830 - 13831 13831 - tsx 13832 13588 13833 13589 ``` 13834 13590 <Button ··· 13879 13635 13880 13636 ### Usage Pattern 13881 13637 13882 13882 - tsx 13883 13883 - 13884 13638 ``` 13885 13639 function MyComponent(props: MyComponentProps) { 13886 13640 return ( ··· 14401 14155 14402 14156 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`: 14403 14157 14404 14404 - tsx 14405 14405 - 14406 14158 ``` 14407 14159 import * as React from 'react'; 14408 14160 import {NavigationContainer} from '@react-navigation/native'; ··· 14423 14175 #### Usage 14424 14176 14425 14177 Now you can create an app with a home screen and a profile screen: 14426 14426 - 14427 14427 - tsx 14428 14178 14429 14179 ``` 14430 14180 import * as React from 'react'; ··· 14454 14204 You can set options such as the screen title for each screen in the `options` prop of `Stack.Screen`. 14455 14205 14456 14206 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: 14457 14457 - 14458 14458 - tsx 14459 14207 14460 14208 ``` 14461 14209 const HomeScreen = ({navigation}) => { ··· 14549 14297 14550 14298 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: 14551 14299 14552 14552 - tsx 14553 14553 - 14554 14300 ``` 14555 14301 Animated.timing(this.state.xPosition, { 14556 14302 toValue: 100, ··· 14568 14314 14569 14315 For example, the following animation coasts to a stop, then it springs back while twirling in parallel: 14570 14316 14571 14571 - tsx 14572 14572 - 14573 14317 ``` 14574 14318 Animated.sequence([ 14575 14319 // decay, then spring to start and twirl ··· 14604 14348 14605 14349 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): 14606 14350 14607 14607 - tsx 14608 14608 - 14609 14351 ``` 14610 14352 const a = new Animated.Value(1); 14611 14353 const b = Animated.divide(1, a); ··· 14622 14364 14623 14365 A basic mapping to convert a 0-1 range to a 0-100 range would be: 14624 14366 14625 14625 - tsx 14626 14626 - 14627 14367 ``` 14628 14368 value.interpolate({ 14629 14369 inputRange: [0, 1], ··· 14633 14373 14634 14374 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: 14635 14375 14636 14636 - tsx 14637 14637 - 14638 14376 ``` 14639 14377 style={{ 14640 14378 opacity: this.state.fadeAnim, // Binds directly ··· 14648 14386 ``` 14649 14387 14650 14388 `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: 14651 14651 - 14652 14652 - tsx 14653 14389 14654 14390 ``` 14655 14391 value.interpolate({ ··· 14677 14413 14678 14414 `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: 14679 14415 14680 14680 - tsx 14681 14681 - 14682 14416 ``` 14683 14417 value.interpolate({ 14684 14418 inputRange: [0, 360], ··· 14692 14426 14693 14427 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: 14694 14428 14695 14695 - tsx 14696 14696 - 14697 14429 ``` 14698 14430 Animated.spring(follower, {toValue: leader}).start(); 14699 14431 Animated.timing(opacity, { ··· 14712 14444 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. 14713 14445 14714 14446 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`): 14715 14715 - 14716 14716 - tsx 14717 14447 14718 14448 ``` 14719 14449 onScroll={Animated.event( ··· 14733 14463 14734 14464 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`. 14735 14465 14736 14736 - tsx 14737 14737 - 14738 14466 ``` 14739 14467 onPanResponderMove={Animated.event( 14740 14468 [null, // ignore the native event ··· 14761 14489 14762 14490 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). 14763 14491 14764 14764 - tsx 14765 14765 - 14766 14492 ``` 14767 14493 Animated.timing(this.state.animatedValue, { 14768 14494 toValue: 1, ··· 14774 14500 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. 14775 14501 14776 14502 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. 14777 14777 - 14778 14778 - tsx 14779 14503 14780 14504 ``` 14781 14505 <Animated.ScrollView // <-- Use the Animated ScrollView wrapper ··· 14804 14528 #### Bear in mind 14805 14529 14806 14530 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. 14807 14807 - 14808 14808 - tsx 14809 14531 14810 14532 ``` 14811 14533 <Animated.View ··· 14834 14556 14835 14557 Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`: 14836 14558 14837 14837 - tsx 14838 14838 - 14839 14559 ``` 14840 14560 UIManager.setLayoutAnimationEnabledExperimental(true); 14841 14561 ``` ··· 14945 14665 #### `drawerBackgroundColor` 14946 14666 14947 14667 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: 14948 14948 - 14949 14949 - tsx 14950 14668 14951 14669 ``` 14952 14670 return ( ··· 15072 14790 ### Methods 15073 14791 15074 14792 #### `closeDrawer()` 15075 15075 - 15076 15076 - tsx 15077 14793 15078 14794 ``` 15079 14795 closeDrawer(); ··· 15085 14801 15086 14802 #### `openDrawer()` 15087 14803 15088 15088 - tsx 15089 15089 - 15090 14804 ``` 15091 14805 openDrawer(); 15092 14806 ``` ··· 15201 14915 15202 14916 #### `SelectableBackground()` 15203 14917 15204 15204 - tsx 15205 15205 - 15206 14918 ``` 15207 14919 static SelectableBackground( 15208 14920 rippleRadius: number | null, ··· 15214 14926 --- 15215 14927 15216 14928 #### `SelectableBackgroundBorderless()` 15217 15217 - 15218 15218 - tsx 15219 14929 15220 14930 ``` 15221 14931 static SelectableBackgroundBorderless( ··· 15229 14939 15230 14940 #### `Ripple()` 15231 14941 15232 15232 - tsx 15233 15233 - 15234 14942 ``` 15235 14943 static Ripple( 15236 14944 color: ColorValue, ··· 15252 14960 --- 15253 14961 15254 14962 #### `canUseNativeForeground()` 15255 15255 - 15256 15256 - tsx 15257 14963 15258 14964 ``` 15259 14965 static canUseNativeForeground(): boolean; ··· 15577 15283 15578 15284 In order to fetch content from an arbitrary URL, you can pass the URL to fetch: 15579 15285 15580 15580 - tsx 15581 15581 - 15582 15286 ``` 15583 15287 fetch('https://mywebsite.com/mydata.json'); 15584 15288 ``` 15585 15289 15586 15290 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: 15587 15587 - 15588 15588 - tsx 15589 15291 15590 15292 ``` 15591 15293 fetch('https://mywebsite.com/endpoint/', { ··· 15609 15311 15610 15312 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: 15611 15313 15612 15612 - tsx 15613 15613 - 15614 15314 ``` 15615 15315 const getMoviesFromApi = () => { 15616 15316 return fetch('https://reactnative.dev/movies.json') ··· 15626 15326 15627 15327 You can also use the `async` / `await` syntax in a React Native app: 15628 15328 15629 15629 - tsx 15630 15630 - 15631 15329 ``` 15632 15330 const getMoviesFromApiAsync = async () => { 15633 15331 try { ··· 15654 15352 ### Using Other Networking Libraries 15655 15353 15656 15354 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. 15657 15657 - 15658 15658 - tsx 15659 15355 15660 15356 ``` 15661 15357 const request = new XMLHttpRequest(); ··· 15680 15376 ### WebSocket Support 15681 15377 15682 15378 React Native also supports WebSockets, a protocol which provides full-duplex communication channels over a single TCP connection. 15683 15683 - 15684 15684 - tsx 15685 15379 15686 15380 ``` 15687 15381 const ws = new WebSocket('ws://host.com/path'); ··· 16853 16547 16854 16548 On Android, `accessible={true}` property for a react-native View will be translated into native `focusable={true}`. 16855 16549 16856 16856 - tsx 16857 16857 - 16858 16550 ``` 16859 16551 <View accessible={true}> 16860 16552 <Text>text one</Text> ··· 16870 16562 16871 16563 To use, set the `accessibilityLabel` property to a custom string on your View, Text, or Touchable: 16872 16564 16873 16873 - tsx 16874 16874 - 16875 16565 ``` 16876 16566 <TouchableOpacity 16877 16567 accessible={true} ··· 16889 16579 16890 16580 A reference to another element nativeID used to build complex forms. The value of `accessibilityLabelledBy` should match the `nativeID` of the related element: 16891 16581 16892 16892 - tsx 16893 16893 - 16894 16582 ``` 16895 16583 <View> 16896 16584 <Text nativeID="formLabel">Label for Input Field</Text> ··· 16908 16596 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. 16909 16597 16910 16598 Provide the `accessibilityHint` property a custom string on your View, Text, or Touchable: 16911 16911 - 16912 16912 - tsx 16913 16599 16914 16600 ``` 16915 16601 <TouchableOpacity ··· 16935 16621 16936 16622 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. 16937 16623 16938 16938 - tsx 16939 16939 - 16940 16624 ``` 16941 16625 <View 16942 16626 accessible={true} ··· 16957 16641 - **none** Accessibility services should not announce changes to this view. 16958 16642 - **polite** Accessibility services should announce changes to this view. 16959 16643 - **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view. 16960 16960 - 16961 16961 - tsx 16962 16644 16963 16645 ``` 16964 16646 <TouchableWithoutFeedback onPress={addOne}> ··· 17020 16702 A string that will be used as the title of the large content viewer when it is shown. 17021 16703 17022 16704 Requires `accessibilityShowsLargeContentViewer` to be set to `true`. 17023 17023 - 17024 17024 - tsx 17025 16705 17026 16706 ``` 17027 16707 <View ··· 17142 16822 17143 16823 Identifies the element that labels the element it is applied to. The value of `aria-labelledby` should match the `nativeID` of the related element: 17144 16824 17145 17145 - tsx 17146 17146 - 17147 16825 ``` 17148 16826 <View> 17149 16827 <Text nativeID="formLabel">Label for Input Field</Text> ··· 17188 16866 #### `importantForAccessibility`Android 17189 16867 17190 16868 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). 17191 17191 - 17192 17192 - tsx 17193 16869 17194 16870 ``` 17195 16871 <View style={styles.container}> ··· 17284 16960 17285 16961 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. 17286 16962 17287 17287 - tsx 17288 17288 - 17289 16963 ``` 17290 16964 <View 17291 16965 accessible={true} ··· 17317 16991 ### Sending Accessibility EventsAndroid 17318 16992 17319 16993 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`. 17320 17320 - 17321 17321 - tsx 17322 16994 17323 16995 ``` 17324 16996 import {Platform, UIManager, findNodeHandle} from 'react-native'; ··· 17928 17600 17929 17601 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: 17930 17602 17931 17931 - tsx 17932 17932 - 17933 17603 ``` 17934 17604 import React from 'react'; 17935 17605 import {Text} from 'react-native'; 17936 17606 ``` 17937 17607 17938 17608 Your component starts as a function: 17939 17939 - 17940 17940 - tsx 17941 17609 17942 17610 ``` 17943 17611 const Cat = () => {}; ··· 17947 17615 17948 17616 Here the `Cat` component will render a `<Text>` element: 17949 17617 17950 17950 - tsx 17951 17951 - 17952 17618 ``` 17953 17619 const Cat = () => { 17954 17620 return <Text>Hello, I am your cat!</Text>; ··· 17956 17622 ``` 17957 17623 17958 17624 You can export your function component with JavaScript’s `export default` for use throughout your app like so: 17959 17959 - 17960 17960 - tsx 17961 17625 17962 17626 ``` 17963 17627 const Cat = () => { ··· 18035 17699 18036 17700 First, you will want to import `useState` from React like so: 18037 17701 18038 18038 - tsx 18039 18039 - 18040 17702 ``` 18041 17703 import React, {useState} from 'react'; 18042 17704 ``` 18043 17705 18044 17706 Then you declare the component’s state by calling `useState` inside its function. In this example, `useState` creates an `isHungry` state variable: 18045 18045 - 18046 18046 - tsx 18047 17707 18048 17708 ``` 18049 17709 const Cat = (props: CatProps) => { ··· 18062 17722 It doesn’t matter what names you use. But it can be handy to think of the pattern as `[<getter>, <setter>] = useState(<initialValue>)`. 18063 17723 18064 17724 Next you add the `Button` Core Component and give it an `onPress` prop: 18065 18065 - 18066 18066 - tsx 18067 17725 18068 17726 ``` 18069 17727 <Button ··· 18076 17734 18077 17735 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: 18078 17736 18079 18079 - tsx 18080 18080 - 18081 17737 ``` 18082 17738 <Button 18083 17739 //.. ··· 18089 17745 > 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`. 18090 17746 18091 17747 Finally, put your cats inside a `Cafe` component: 18092 18092 - 18093 18093 - tsx 18094 17748 18095 17749 ``` 18096 17750 const Cafe = () => { ··· 18342 17996 18343 17997 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. 18344 17998 18345 18345 - tsx 18346 18346 - 18347 17999 ``` 18348 18000 import {Platform, StyleSheet} from 'react-native'; 18349 18001 ··· 18355 18007 `Platform.OS` will be `ios` when running on iOS and `android` when running on Android. 18356 18008 18357 18009 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. 18358 18358 - 18359 18359 - tsx 18360 18010 18361 18011 ``` 18362 18012 import {Platform, StyleSheet} from 'react-native'; ··· 18384 18034 18385 18035 Since it accepts `any` value, you can also use it to return platform-specific components, like below: 18386 18036 18387 18387 - tsx 18388 18388 - 18389 18037 ``` 18390 18038 const Component = Platform.select({ 18391 18039 ios: () => require('ComponentIOS'), ··· 18395 18043 <Component />; 18396 18044 ``` 18397 18045 18398 18398 - tsx 18399 18399 - 18400 18046 ``` 18401 18047 const Component = Platform.select({ 18402 18048 native: () => require('ComponentForNative'), ··· 18409 18055 #### Detecting the Android versionAndroid 18410 18056 18411 18057 On Android, the `Platform` module can also be used to detect the version of the Android Platform in which the app is running: 18412 18412 - 18413 18413 - tsx 18414 18058 18415 18059 ``` 18416 18060 import {Platform} from 'react-native'; ··· 18426 18070 18427 18071 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: 18428 18072 18429 18429 - tsx 18430 18430 - 18431 18073 ``` 18432 18074 import {Platform} from 'react-native'; 18433 18075 ··· 18452 18094 18453 18095 You can then import the component as follows: 18454 18096 18455 18455 - tsx 18456 18456 - 18457 18097 ``` 18458 18098 import BigButton from './BigButton'; 18459 18099 ``` ··· 18474 18114 ``` 18475 18115 18476 18116 You can still import it without the `.native` extension, as follows: 18477 18477 - 18478 18478 - tsx 18479 18117 18480 18118 ``` 18481 18119 import Container from './Container'; ··· 18668 18306 18669 18307 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: 18670 18308 18671 18671 - tsx 18672 18672 - 18673 18309 ``` 18674 18310 function GroceryShoppingList() { 18675 18311 const [groceryItem, setGroceryItem] = useState(''); ··· 18716 18352 18717 18353 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. 18718 18354 18719 18719 - tsx 18720 18720 - 18721 18355 ``` 18722 18356 test('given empty GroceryShoppingList, user can add an item to it', () => { 18723 18357 const {getByPlaceholderText, getByText, getAllByText} = render( ··· 18742 18376 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. 18743 18377 18744 18378 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: 18745 18745 - 18746 18746 - tsx 18747 18379 18748 18380 ``` 18749 18381 <Text ··· 18891 18523 #### My TouchableX view isn't very responsive 18892 18524 18893 18525 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`: 18894 18894 - 18895 18895 - tsx 18896 18526 18897 18527 ``` 18898 18528 handleOnPress() { ··· 18923 18553 18924 18554 ### Pattern 18925 18555 18926 18926 - tsx 18927 18927 - 18928 18556 ``` 18929 18557 const subscription = BackHandler.addEventListener( 18930 18558 'hardwareBackPress', ··· 18978 18606 18979 18607 #### `addEventListener()` 18980 18608 18981 18981 - tsx 18982 18982 - 18983 18609 ``` 18984 18610 static addEventListener( 18985 18611 eventName: BackPressEventName, ··· 18990 18616 --- 18991 18617 18992 18618 #### `exitApp()` 18993 18993 - 18994 18994 - tsx 18995 18619 18996 18620 ``` 18997 18621 static exitApp(); ··· 19240 18864 #### Use `memo()` 19241 18865 19242 18866 `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. 19243 19243 - 19244 19244 - tsx 19245 18867 19246 18868 ``` 19247 18869 import React, {memo} from 'react'; ··· 19285 18907 19286 18908 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. 19287 18909 19288 19288 - tsx 19289 19289 - 19290 18910 ``` 19291 18911 const renderItem = useCallback(({item}) => ( 19292 18912 <View key={item.key}> ··· 19390 19010 ### Advanced: Automatically inline `require` calls 19391 19011 19392 19012 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. 19393 19393 - 19394 19394 - tsx 19395 19013 19396 19014 ``` 19397 19015 import {useCallback, useState} from 'react'; ··· 19830 19448 19831 19449 Applications can schedule tasks to run after interactions with the following: 19832 19450 19833 19833 - tsx 19834 19834 - 19835 19451 ``` 19836 19452 InteractionManager.runAfterInteractions(() => { 19837 19453 // ...long-running synchronous task... ··· 19847 19463 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. 19848 19464 19849 19465 InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion: 19850 19850 - 19851 19851 - tsx 19852 19466 19853 19467 ``` 19854 19468 const handle = InteractionManager.createInteractionHandle(); ··· 22572 22186 22573 22187 #### `configureNext()` 22574 22188 22575 22575 - tsx 22576 22576 - 22577 22189 ``` 22578 22190 static configureNext( 22579 22191 config: LayoutAnimationConfig, ··· 22611 22223 --- 22612 22224 22613 22225 #### `create()` 22614 22614 - 22615 22615 - tsx 22616 22226 22617 22227 ``` 22618 22228 static create(duration, type, creationProp) ··· 22759 22369 22760 22370 #### `check()` 22761 22371 22762 22762 - tsx 22763 22763 - 22764 22372 ``` 22765 22373 static check(permission: Permission): Promise<boolean>; 22766 22374 ``` ··· 22776 22384 --- 22777 22385 22778 22386 #### `request()` 22779 22779 - 22780 22780 - tsx 22781 22387 22782 22388 ``` 22783 22389 static request( ··· 22810 22416 --- 22811 22417 22812 22418 #### `requestMultiple()` 22813 22813 - 22814 22814 - tsx 22815 22419 22816 22420 ``` 22817 22421 static requestMultiple( ··· 22848 22452 22849 22453 #### `show()` 22850 22454 22851 22851 - tsx 22852 22852 - 22853 22455 ``` 22854 22456 static show(message: string, duration: number); 22855 22457 ``` ··· 22860 22462 22861 22463 This property will only work on Android API 29 and below. For similar functionality on higher Android APIs, consider using snackbar or notification. 22862 22464 22863 22863 - tsx 22864 22864 - 22865 22465 ``` 22866 22466 static showWithGravity(message: string, duration: number, gravity: number); 22867 22467 ``` ··· 22872 22472 22873 22473 This property will only work on Android API 29 and below. For similar functionality on higher Android APIs, consider using snackbar or notification. 22874 22474 22875 22875 - tsx 22876 22876 - 22877 22475 ``` 22878 22476 static showWithGravityAndOffset( 22879 22477 message: string, ··· 22890 22488 22891 22489 Indicates the duration on the screen. 22892 22490 22893 22893 - tsx 22894 22894 - 22895 22491 ``` 22896 22492 static SHORT: number; 22897 22493 ``` ··· 22901 22497 #### `LONG` 22902 22498 22903 22499 Indicates the duration on the screen. 22904 22904 - 22905 22905 - tsx 22906 22500 22907 22501 ``` 22908 22502 static LONG: number; ··· 22914 22508 22915 22509 Indicates the position on the screen. 22916 22510 22917 22917 - tsx 22918 22918 - 22919 22511 ``` 22920 22512 static TOP: number; 22921 22513 ``` ··· 22926 22518 22927 22519 Indicates the position on the screen. 22928 22520 22929 22929 - tsx 22930 22930 - 22931 22521 ``` 22932 22522 static BOTTOM: number; 22933 22523 ``` ··· 22938 22528 22939 22529 Indicates the position on the screen. 22940 22530 22941 22941 - tsx 22942 22942 - 22943 22531 ``` 22944 22532 static CENTER: number; 22945 22533 ``` 22946 22534 22947 22535 ## Appearance 22948 22948 - 22949 22949 - tsx 22950 22536 22951 22537 ``` 22952 22538 import {Appearance} from 'react-native'; ··· 22969 22555 ### Example 22970 22556 22971 22557 You can use the `Appearance` module to determine if the user prefers a dark color scheme: 22972 22972 - 22973 22973 - tsx 22974 22558 22975 22559 ``` 22976 22560 const colorScheme = Appearance.getColorScheme(); ··· 22989 22573 22990 22574 #### `getColorScheme()` 22991 22575 22992 22992 - tsx 22993 22993 - 22994 22576 ``` 22995 22577 static getColorScheme(): 'light' | 'dark' | null; 22996 22578 ``` ··· 23011 22593 23012 22594 #### `setColorScheme()` 23013 22595 23014 23014 - tsx 23015 23015 - 23016 22596 ``` 23017 22597 static setColorScheme('light' | 'dark' | null): void; 23018 22598 ``` ··· 23031 22611 23032 22612 #### `addChangeListener()` 23033 22613 23034 23034 - tsx 23035 23035 - 23036 22614 ``` 23037 22615 static addChangeListener( 23038 22616 listener: (preferences: {colorScheme: 'light' | 'dark' | null}) => void, ··· 23095 22673 23096 22674 `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`. 23097 22675 23098 23098 - tsx 23099 23099 - 23100 22676 ``` 23101 22677 import {Text, AppRegistry} from 'react-native'; 23102 22678 ··· 23121 22697 23122 22698 #### `getAppKeys()` 23123 22699 23124 23124 - tsx 23125 23125 - 23126 22700 ``` 23127 22701 static getAppKeys(): string[]; 23128 22702 ``` ··· 23132 22706 --- 23133 22707 23134 22708 #### `getRegistry()` 23135 23135 - 23136 23136 - tsx 23137 22709 23138 22710 ``` 23139 22711 static getRegistry(): {sections: string[]; runnables: Runnable[]}; ··· 23144 22716 --- 23145 22717 23146 22718 #### `getRunnable()` 23147 23147 - 23148 23148 - tsx 23149 22719 23150 22720 ``` 23151 22721 static getRunnable(appKey: string): : Runnable | undefined; ··· 23163 22733 23164 22734 #### `getSectionKeys()` 23165 22735 23166 23166 - tsx 23167 23167 - 23168 22736 ``` 23169 22737 static getSectionKeys(): string[]; 23170 22738 ``` ··· 23175 22743 23176 22744 #### `getSections()` 23177 22745 23178 23178 - tsx 23179 23179 - 23180 22746 ``` 23181 22747 static getSections(): Record<string, Runnable>; 23182 22748 ``` ··· 23187 22753 23188 22754 #### `registerCancellableHeadlessTask()` 23189 22755 23190 23190 - tsx 23191 23191 - 23192 22756 ``` 23193 22757 static registerCancellableHeadlessTask( 23194 22758 taskKey: string, ··· 23210 22774 --- 23211 22775 23212 22776 #### `registerComponent()` 23213 23213 - 23214 23214 - tsx 23215 22777 23216 22778 ``` 23217 22779 static registerComponent( ··· 23232 22794 --- 23233 22795 23234 22796 #### `registerConfig()` 23235 23235 - 23236 23236 - tsx 23237 22797 23238 22798 ``` 23239 22799 static registerConfig(config: AppConfig[]); ··· 23249 22809 23250 22810 #### `registerHeadlessTask()` 23251 22811 23252 23252 - tsx 23253 23253 - 23254 22812 ``` 23255 22813 static registerHeadlessTask( 23256 22814 taskKey: string, ··· 23272 22830 --- 23273 22831 23274 22832 #### `registerRunnable()` 23275 23275 - 23276 23276 - tsx 23277 22833 23278 22834 ``` 23279 22835 static registerRunnable(appKey: string, func: Runnable): string; ··· 23290 22846 23291 22847 #### `registerSection()` 23292 22848 23293 23293 - tsx 23294 23294 - 23295 22849 ``` 23296 22850 static registerSection( 23297 22851 appKey: string, ··· 23310 22864 23311 22865 #### `runApplication()` 23312 22866 23313 23313 - tsx 23314 23314 - 23315 22867 ``` 23316 22868 static runApplication(appKey: string, appParameters: any): void; 23317 22869 ``` ··· 23329 22881 23330 22882 #### `setComponentProviderInstrumentationHook()` 23331 22883 23332 23332 - tsx 23333 23333 - 23334 22884 ``` 23335 22885 static setComponentProviderInstrumentationHook( 23336 22886 hook: ComponentProviderInstrumentationHook, ··· 23356 22906 23357 22907 #### `setWrapperComponentProvider()` 23358 22908 23359 23359 - tsx 23360 23360 - 23361 22909 ``` 23362 22910 static setWrapperComponentProvider( 23363 22911 provider: WrapperComponentProvider, ··· 23373 22921 --- 23374 22922 23375 22923 #### `startHeadlessTask()` 23376 23376 - 23377 23377 - tsx 23378 22924 23379 22925 ``` 23380 22926 static startHeadlessTask( ··· 23398 22944 23399 22945 #### `unmountApplicationComponentAtRootTag()` 23400 22946 23401 23401 - tsx 23402 23402 - 23403 22947 ``` 23404 22948 static unmountApplicationComponentAtRootTag(rootTag: number); 23405 22949 ``` ··· 23507 23051 23508 23052 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. 23509 23053 23510 23510 - tsx 23511 23511 - 23512 23054 ``` 23513 23055 const image = getImage({ 23514 23056 width: PixelRatio.getPixelSizeForLayoutSize(200), ··· 23536 23078 ### Methods 23537 23079 23538 23080 #### `get()` 23539 23539 - 23540 23540 - tsx 23541 23081 23542 23082 ``` 23543 23083 static get(): number; ··· 23574 23114 23575 23115 #### `getFontScale()` 23576 23116 23577 23577 - tsx 23578 23578 - 23579 23117 ``` 23580 23118 static getFontScale(): number; 23581 23119 ``` ··· 23591 23129 23592 23130 #### `getPixelSizeForLayoutSize()` 23593 23131 23594 23594 - tsx 23595 23595 - 23596 23132 ``` 23597 23133 static getPixelSizeForLayoutSize(layoutSize: number): number; 23598 23134 ``` ··· 23604 23140 --- 23605 23141 23606 23142 #### `roundToNearestPixel()` 23607 23607 - 23608 23608 - tsx 23609 23143 23610 23144 ``` 23611 23145 static roundToNearestPixel(layoutSize: number): number; ··· 23666 23200 23667 23201 #### Require&#x64;**`renderItem`**&#x200B; 23668 23202 23669 23669 - tsx 23670 23670 - 23671 23203 ``` 23672 23204 renderItem({ 23673 23205 item: ItemT, ··· 23705 23237 23706 23238 Example usage: 23707 23239 23708 23708 - tsx 23709 23709 - 23710 23240 ``` 23711 23241 <FlatList 23712 23242 ItemSeparatorComponent={ ··· 23826 23356 23827 23357 #### `getItemLayout` 23828 23358 23829 23829 - tsx 23830 23830 - 23831 23359 ``` 23832 23360 (data, index) => {length: number, offset: number, index: number} 23833 23361 ``` 23834 23362 23835 23363 `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: 23836 23836 - 23837 23837 - tsx 23838 23364 23839 23365 ``` 23840 23366 getItemLayout={(data, index) => ( ··· 23892 23418 23893 23419 #### `keyExtractor` 23894 23420 23895 23895 - tsx 23896 23896 - 23897 23421 ``` 23898 23422 (item: ItemT, index: number) => string; 23899 23423 ``` ··· 23917 23441 --- 23918 23442 23919 23443 #### `onRefresh` 23920 23920 - 23921 23921 - tsx 23922 23444 23923 23445 ``` 23924 23446 () => void; ··· 23997 23519 Error: Changing viewabilityConfig on the fly is not supported 23998 23520 ``` 23999 23521 24000 24000 - tsx 24001 24001 - 24002 23522 ``` 24003 23523 constructor (props) { 24004 23524 super(props) ··· 24010 23530 } 24011 23531 ``` 24012 23532 24013 24013 - tsx 24014 24014 - 24015 23533 ``` 24016 23534 <FlatList 24017 23535 viewabilityConfig={this.viewabilityConfig} ··· 24048 23566 24049 23567 #### `flashScrollIndicators()` 24050 23568 24051 24051 - tsx 24052 24052 - 24053 23569 ``` 24054 23570 flashScrollIndicators(); 24055 23571 ``` ··· 24059 23575 --- 24060 23576 24061 23577 #### `getNativeScrollRef()` 24062 24062 - 24063 24063 - tsx 24064 23578 24065 23579 ``` 24066 23580 getNativeScrollRef(): React.ElementRef<typeof ScrollViewComponent>; ··· 24072 23586 24073 23587 #### `getScrollResponder()` 24074 23588 24075 24075 - tsx 24076 24076 - 24077 23589 ``` 24078 23590 getScrollResponder(): ScrollResponderMixin; 24079 23591 ``` ··· 24084 23596 24085 23597 #### `getScrollableNode()` 24086 23598 24087 24087 - tsx 24088 24088 - 24089 23599 ``` 24090 23600 getScrollableNode(): any; 24091 23601 ``` ··· 24093 23603 Provides a handle to the underlying scroll node. 24094 23604 24095 23605 #### `scrollToEnd()` 24096 24096 - 24097 24097 - tsx 24098 23606 24099 23607 ``` 24100 23608 scrollToEnd(params?: {animated?: boolean}); ··· 24116 23624 24117 23625 #### `scrollToIndex()` 24118 23626 24119 24119 - tsx 24120 24120 - 24121 23627 ``` 24122 23628 scrollToIndex: (params: { 24123 23629 index: number; ··· 24148 23654 24149 23655 #### `scrollToItem()` 24150 23656 24151 24151 - tsx 24152 24152 - 24153 23657 ``` 24154 23658 scrollToItem(params: { 24155 23659 animated?: ?boolean, ··· 24177 23681 --- 24178 23682 24179 23683 #### `scrollToOffset()` 24180 24180 - 24181 24181 - tsx 24182 23684 24183 23685 ``` 24184 23686 scrollToOffset(params: { ··· 24214 23716 24215 23717 #### `addEventListener()` 24216 23718 24217 24217 - tsx 24218 24218 - 24219 23719 ``` 24220 23720 static addEventListener( 24221 23721 eventName: AccessibilityChangeEventName | AccessibilityAnnouncementEventName, ··· 24238 23738 24239 23739 #### `announceForAccessibility()` 24240 23740 24241 24241 - tsx 24242 24242 - 24243 23741 ``` 24244 23742 static announceForAccessibility(announcement: string); 24245 23743 ``` ··· 24249 23747 --- 24250 23748 24251 23749 #### `announceForAccessibilityWithOptions()` 24252 24252 - 24253 24253 - tsx 24254 23750 24255 23751 ``` 24256 23752 static announceForAccessibilityWithOptions( ··· 24272 23768 24273 23769 #### `getRecommendedTimeoutMillis()`Android 24274 23770 24275 24275 - tsx 24276 24276 - 24277 23771 ``` 24278 23772 static getRecommendedTimeoutMillis(originalTimeout: number): Promise<number>; 24279 23773 ``` ··· 24290 23784 24291 23785 #### `isAccessibilityServiceEnabled()`Android 24292 23786 24293 24293 - tsx 24294 24294 - 24295 23787 ``` 24296 23788 static isAccessibilityServiceEnabled(): Promise<boolean>; 24297 23789 ``` ··· 24304 23796 24305 23797 #### `isBoldTextEnabled()`iOS 24306 23798 24307 24307 - tsx 24308 24308 - 24309 23799 ``` 24310 23800 static isBoldTextEnabled(): Promise<boolean>: 24311 23801 ``` ··· 24315 23805 --- 24316 23806 24317 23807 #### `isGrayscaleEnabled()`iOS 24318 24318 - 24319 24319 - tsx 24320 23808 24321 23809 ``` 24322 23810 static isGrayscaleEnabled(): Promise<boolean>; ··· 24328 23816 24329 23817 #### `isInvertColorsEnabled()`iOS 24330 23818 24331 24331 - tsx 24332 24332 - 24333 23819 ``` 24334 23820 static isInvertColorsEnabled(): Promise<boolean>; 24335 23821 ``` ··· 24340 23826 24341 23827 #### `isReduceMotionEnabled()` 24342 23828 24343 24343 - tsx 24344 24344 - 24345 23829 ``` 24346 23830 static isReduceMotionEnabled(): Promise<boolean>; 24347 23831 ``` ··· 24351 23835 --- 24352 23836 24353 23837 #### `isReduceTransparencyEnabled()`iOS 24354 24354 - 24355 24355 - tsx 24356 23838 24357 23839 ``` 24358 23840 static isReduceTransparencyEnabled(): Promise<boolean>; ··· 24363 23845 --- 24364 23846 24365 23847 #### `isScreenReaderEnabled()` 24366 24366 - 24367 24367 - tsx 24368 23848 24369 23849 ``` 24370 23850 static isScreenReaderEnabled(): Promise<boolean>; ··· 24376 23856 24377 23857 #### `prefersCrossFadeTransitions()`iOS 24378 23858 24379 24379 - tsx 24380 24380 - 24381 23859 ``` 24382 23860 static prefersCrossFadeTransitions(): Promise<boolean>; 24383 23861 ``` ··· 24387 23865 --- 24388 23866 24389 23867 #### `setAccessibilityFocus()` 24390 24390 - 24391 24391 - tsx 24392 23868 24393 23869 ``` 24394 23870 static setAccessibilityFocus(reactTag: number); ··· 24452 23928 24453 23929 #### `addEventListener()` 24454 23930 24455 24455 - tsx 24456 24456 - 24457 23931 ``` 24458 23932 static addEventListener( 24459 23933 type: AppStateEvent, ··· 24467 23941 24468 23942 #### `currentState` 24469 23943 24470 24470 - tsx 24471 24471 - 24472 23944 ``` 24473 23945 static currentState: AppStateStatus; 24474 23946 ``` ··· 24484 23956 ### Properties 24485 23957 24486 23958 #### `constants` 24487 24487 - 24488 24488 - tsx 24489 23959 24490 23960 ``` 24491 23961 static constants: PlatformConstants; ··· 24517 23987 24518 23988 #### `isPad`iOS 24519 23989 24520 24520 - tsx 24521 24521 - 24522 23990 ``` 24523 23991 static isPad: boolean; 24524 23992 ``` ··· 24533 24001 24534 24002 #### `isTV` 24535 24003 24536 24536 - tsx 24537 24537 - 24538 24004 ``` 24539 24005 static isTV: boolean; 24540 24006 ``` ··· 24549 24015 24550 24016 #### `isVision` 24551 24017 24552 24552 - tsx 24553 24553 - 24554 24018 ``` 24555 24019 static isVision: boolean; 24556 24020 ``` ··· 24564 24028 --- 24565 24029 24566 24030 #### `isTesting` 24567 24567 - 24568 24568 - tsx 24569 24031 24570 24032 ``` 24571 24033 static isTesting: boolean; ··· 24580 24042 --- 24581 24043 24582 24044 #### `OS` 24583 24583 - 24584 24584 - tsx 24585 24045 24586 24046 ``` 24587 24047 static OS: 'android' | 'ios'; ··· 24597 24057 24598 24058 #### `Version` 24599 24059 24600 24600 - tsx 24601 24601 - 24602 24060 ``` 24603 24061 static Version: 'number' | 'string'; 24604 24062 ``` ··· 24612 24070 ### Methods 24613 24071 24614 24072 #### `select()` 24615 24615 - 24616 24616 - tsx 24617 24073 24618 24074 ``` 24619 24075 static select(config: Record<string, T>): T; ··· 24638 24094 24639 24095 **Example usage:** 24640 24096 24641 24641 - tsx 24642 24642 - 24643 24097 ``` 24644 24098 import {Platform, StyleSheet} from 'react-native'; 24645 24099 ··· 24666 24120 24667 24121 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: 24668 24122 24669 24669 - tsx 24670 24670 - 24671 24123 ``` 24672 24124 const Component = Platform.select({ 24673 24125 ios: () => require('ComponentIOS'), ··· 24676 24128 24677 24129 <Component />; 24678 24130 ``` 24679 24679 - 24680 24680 - tsx 24681 24131 24682 24132 ``` 24683 24133 const Component = Platform.select({ ··· 25148 24598 25149 24599 #### `flashScrollIndicators()`iOS 25150 24600 25151 25151 - tsx 25152 25152 - 25153 24601 ``` 25154 24602 flashScrollIndicators(); 25155 24603 ``` ··· 25160 24608 25161 24609 #### `recordInteraction()` 25162 24610 25163 25163 - tsx 25164 25164 - 25165 24611 ``` 25166 24612 recordInteraction(); 25167 24613 ``` ··· 25172 24618 25173 24619 #### `scrollToLocation()` 25174 24620 25175 25175 - tsx 25176 25176 - 25177 24621 ``` 25178 24622 scrollToLocation(params: SectionListScrollParams); 25179 24623 ``` ··· 25363 24807 25364 24808 #### `addMenuItem()` 25365 24809 25366 25366 - tsx 25367 25367 - 25368 24810 ``` 25369 24811 static addMenuItem(title: string, handler: () => any); 25370 24812 ``` ··· 25380 24822 25381 24823 **Example:** 25382 24824 25383 25383 - tsx 25384 25384 - 25385 24825 ``` 25386 24826 DevSettings.addMenuItem('Show Secret Dev Screen', () => { 25387 24827 Alert.alert('Showing secret dev screen!'); ··· 25391 24831 --- 25392 24832 25393 24833 #### `reload()` 25394 25394 - 25395 25395 - tsx 25396 24834 25397 24835 ``` 25398 24836 static reload(reason?: string): void; ··· 25402 24840 25403 24841 **Example:** 25404 24842 25405 25405 - tsx 25406 25406 - 25407 24843 ``` 25408 24844 <Button title="Reload" onPress={() => DevSettings.reload()} /> 25409 24845 ``` ··· 25421 24857 ### Reference 25422 24858 25423 24859 ### Methods 25424 25424 - 25425 25425 - tsx 25426 24860 25427 24861 ``` 25428 24862 static share(content: ShareContent, options?: ShareOptions); ··· 25447 24881 25448 24882 #### `sharedAction` 25449 24883 25450 25450 - tsx 25451 25451 - 25452 24884 ``` 25453 24885 static sharedAction: 'sharedAction'; 25454 24886 ``` ··· 25458 24890 --- 25459 24891 25460 24892 #### `dismissedAction`iOS 25461 25461 - 25462 25462 - tsx 25463 24893 25464 24894 ``` 25465 24895 static dismissedAction: 'dismissedAction'; ··· 25511 24941 25512 24942 #### Require&#x64;**`getItem`**&#x200B; 25513 24943 25514 25514 - tsx 25515 25515 - 25516 24944 ``` 25517 24945 (data: any, index: number) => any; 25518 24946 ``` ··· 25527 24955 25528 24956 #### Require&#x64;**`getItemCount`**&#x200B; 25529 24957 25530 25530 - tsx 25531 25531 - 25532 24958 ``` 25533 24959 (data: any) => number; 25534 24960 ``` ··· 25542 24968 --- 25543 24969 25544 24970 #### Require&#x64;**`renderItem`**&#x200B; 25545 25545 - 25546 25546 - tsx 25547 24971 25548 24972 ``` 25549 24973 (info: any) => ?React.Element<any> ··· 25669 25093 25670 25094 #### `getItemLayout` 25671 25095 25672 25672 - tsx 25673 25673 - 25674 25096 ``` 25675 25097 ( 25676 25098 data: any, ··· 25726 25148 25727 25149 #### `keyExtractor` 25728 25150 25729 25729 - tsx 25730 25730 - 25731 25151 ``` 25732 25152 (item: any, index: number) => string; 25733 25153 ``` ··· 25772 25192 25773 25193 #### `onRefresh` 25774 25194 25775 25775 - tsx 25776 25776 - 25777 25195 ``` 25778 25196 () => void; 25779 25197 ``` ··· 25787 25205 --- 25788 25206 25789 25207 #### `onScrollToIndexFailed` 25790 25790 - 25791 25791 - tsx 25792 25208 25793 25209 ``` 25794 25210 (info: { ··· 25888 25304 25889 25305 #### `renderScrollComponent` 25890 25306 25891 25891 - tsx 25892 25892 - 25893 25307 ``` 25894 25308 (props: object) => element; 25895 25309 ``` ··· 25944 25358 25945 25359 #### `flashScrollIndicators()` 25946 25360 25947 25947 - tsx 25948 25948 - 25949 25361 ``` 25950 25362 flashScrollIndicators(); 25951 25363 ``` ··· 25954 25366 25955 25367 #### `getScrollableNode()` 25956 25368 25957 25957 - tsx 25958 25958 - 25959 25369 ``` 25960 25370 getScrollableNode(): any; 25961 25371 ``` ··· 25964 25374 25965 25375 #### `getScrollRef()` 25966 25376 25967 25967 - tsx 25968 25968 - 25969 25377 ``` 25970 25378 getScrollRef(): 25971 25379 | React.ElementRef<typeof ScrollView> ··· 25976 25384 --- 25977 25385 25978 25386 #### `getScrollResponder()` 25979 25979 - 25980 25980 - tsx 25981 25387 25982 25388 ``` 25983 25389 getScrollResponder () => ScrollResponderMixin | null; ··· 25989 25395 25990 25396 #### `scrollToEnd()` 25991 25397 25992 25992 - tsx 25993 25993 - 25994 25398 ``` 25995 25399 scrollToEnd(params?: {animated?: boolean}); 25996 25400 ``` ··· 26011 25415 26012 25416 #### `scrollToIndex()` 26013 25417 26014 26014 - tsx 26015 26015 - 26016 25418 ``` 26017 25419 scrollToIndex(params: { 26018 25420 index: number; ··· 26032 25434 --- 26033 25435 26034 25436 #### `scrollToItem()` 26035 26035 - 26036 26036 - tsx 26037 25437 26038 25438 ``` 26039 25439 scrollToItem(params: { ··· 26054 25454 --- 26055 25455 26056 25456 #### `scrollToOffset()` 26057 26057 - 26058 26058 - tsx 26059 25457 26060 25458 ``` 26061 25459 scrollToOffset(params: { ··· 26088 25486 26089 25487 #### `compose()` 26090 25488 26091 26091 - tsx 26092 26092 - 26093 25489 ``` 26094 25490 static compose(style1: Object, style2: Object): Object | Object[]; 26095 25491 ``` ··· 26100 25496 26101 25497 #### `create()` 26102 25498 26103 26103 - tsx 26104 26104 - 26105 25499 ``` 26106 25500 static create(styles: Object extends Record<string, ViewStyle | ImageStyle | TextStyle>): Object; 26107 25501 ``` ··· 26111 25505 --- 26112 25506 26113 25507 #### `flatten()` 26114 26114 - 26115 26115 - tsx 26116 25508 26117 25509 ``` 26118 25510 static flatten(style: Array<Object extends Record<string, ViewStyle | ImageStyle | TextStyle>>): Object; ··· 26126 25518 26127 25519 > **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. 26128 25520 26129 26129 - tsx 26130 26130 - 26131 25521 ``` 26132 25522 static setStyleAttributePreprocessor( 26133 25523 property: string, ··· 26175 25565 26176 25566 #### `setValue()` 26177 25567 26178 26178 - tsx 26179 26179 - 26180 25568 ``` 26181 25569 setValue(value: number); 26182 25570 ``` ··· 26192 25580 --- 26193 25581 26194 25582 #### `setOffset()` 26195 26195 - 26196 26196 - tsx 26197 25583 26198 25584 ``` 26199 25585 setOffset(offset: number); ··· 26211 25597 26212 25598 #### `flattenOffset()` 26213 25599 26214 26214 - tsx 26215 26215 - 26216 25600 ``` 26217 25601 flattenOffset(); 26218 25602 ``` ··· 26223 25607 26224 25608 #### `extractOffset()` 26225 25609 26226 26226 - tsx 26227 26227 - 26228 25610 ``` 26229 25611 extractOffset(); 26230 25612 ``` ··· 26234 25616 --- 26235 25617 26236 25618 #### `addListener()` 26237 26237 - 26238 26238 - tsx 26239 25619 26240 25620 ``` 26241 25621 addListener(callback: (state: {value: number}) => void): string; ··· 26255 25635 26256 25636 #### `removeListener()` 26257 25637 26258 26258 - tsx 26259 26259 - 26260 25638 ``` 26261 25639 removeListener(id: string); 26262 25640 ``` ··· 26273 25651 26274 25652 #### `removeAllListeners()` 26275 25653 26276 26276 - tsx 26277 26277 - 26278 25654 ``` 26279 25655 removeAllListeners(); 26280 25656 ``` ··· 26285 25661 26286 25662 #### `stopAnimation()` 26287 25663 26288 26288 - tsx 26289 26289 - 26290 25664 ``` 26291 25665 stopAnimation(callback?: (value: number) => void); 26292 25666 ``` ··· 26302 25676 --- 26303 25677 26304 25678 #### `resetAnimation()` 26305 26305 - 26306 26306 - tsx 26307 25679 26308 25680 ``` 26309 25681 resetAnimation(callback?: (value: number) => void); ··· 26321 25693 26322 25694 #### `interpolate()` 26323 25695 26324 26324 - tsx 26325 26325 - 26326 25696 ``` 26327 25697 interpolate(config: InterpolationConfigType); 26328 25698 ``` ··· 26350 25720 26351 25721 #### `animate()` 26352 25722 26353 26353 - tsx 26354 26354 - 26355 25723 ``` 26356 25724 animate(animation, callback); 26357 25725 ``` ··· 26368 25736 ## Dimensions 26369 25737 26370 25738 > `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. 26371 26371 - 26372 26372 - tsx 26373 25739 26374 25740 ``` 26375 25741 import {Dimensions} from 'react-native'; ··· 26377 25743 26378 25744 You can get the application window's width and height using the following code: 26379 25745 26380 26380 - tsx 26381 26381 - 26382 25746 ``` 26383 25747 const windowWidth = Dimensions.get('window').width; 26384 25748 const windowHeight = Dimensions.get('window').height; ··· 26396 25760 26397 25761 #### `addEventListener()` 26398 25762 26399 26399 - tsx 26400 26400 - 26401 25763 ``` 26402 25764 static addEventListener( 26403 25765 type: 'change', ··· 26415 25777 --- 26416 25778 26417 25779 #### `get()` 26418 26418 - 26419 26419 - tsx 26420 25780 26421 25781 ``` 26422 25782 static get(dim: 'window' | 'screen'): ScaledSize; ··· 26478 25838 26479 25839 #### `isEnabled()` 26480 25840 26481 26481 - tsx 26482 26482 - 26483 25841 ``` 26484 25842 static isEnabled(): boolean; 26485 25843 ``` ··· 26487 25845 --- 26488 25846 26489 25847 #### `beginEvent()` 26490 26490 - 26491 26491 - tsx 26492 25848 26493 25849 ``` 26494 25850 static beginEvent(eventName: string | (() => string), args?: EventArgs); ··· 26500 25856 26501 25857 #### `endEvent()` 26502 25858 26503 26503 - tsx 26504 26504 - 26505 25859 ``` 26506 25860 static endEvent(args?: EventArgs); 26507 25861 ``` ··· 26509 25863 --- 26510 25864 26511 25865 #### `beginAsyncEvent()` 26512 26512 - 26513 26513 - tsx 26514 25866 26515 25867 ``` 26516 25868 static beginAsyncEvent( ··· 26525 25877 26526 25878 #### `endAsyncEvent()` 26527 25879 26528 26528 - tsx 26529 26529 - 26530 25880 ``` 26531 25881 static endAsyncEvent( 26532 25882 eventName: EventName, ··· 26538 25888 --- 26539 25889 26540 25890 #### `counterEvent()` 26541 26541 - 26542 26542 - tsx 26543 25891 26544 25892 ``` 26545 25893 static counterEvent(eventName: string | (() => string), value: number); ··· 26623 25971 26624 25972 #### `step0()` 26625 25973 26626 26626 - tsx 26627 26627 - 26628 25974 ``` 26629 25975 static step0(n: number); 26630 25976 ``` ··· 26634 25980 --- 26635 25981 26636 25982 #### `step1()` 26637 26637 - 26638 26638 - tsx 26639 25983 26640 25984 ``` 26641 25985 static step1(n: number); ··· 26647 25991 26648 25992 #### `linear()` 26649 25993 26650 26650 - tsx 26651 26651 - 26652 25994 ``` 26653 25995 static linear(t: number); 26654 25996 ``` ··· 26658 26000 --- 26659 26001 26660 26002 #### `ease()` 26661 26661 - 26662 26662 - tsx 26663 26003 26664 26004 ``` 26665 26005 static ease(t: number); ··· 26671 26011 26672 26012 #### `quad()` 26673 26013 26674 26674 - tsx 26675 26675 - 26676 26014 ``` 26677 26015 static quad(t: number); 26678 26016 ``` ··· 26683 26021 26684 26022 #### `cubic()` 26685 26023 26686 26686 - tsx 26687 26687 - 26688 26024 ``` 26689 26025 static cubic(t: number); 26690 26026 ``` ··· 26694 26030 --- 26695 26031 26696 26032 #### `poly()` 26697 26697 - 26698 26698 - tsx 26699 26033 26700 26034 ``` 26701 26035 static poly(n: number); ··· 26709 26043 26710 26044 #### `sin()` 26711 26045 26712 26712 - tsx 26713 26713 - 26714 26046 ``` 26715 26047 static sin(t: number); 26716 26048 ``` ··· 26721 26053 26722 26054 #### `circle()` 26723 26055 26724 26724 - tsx 26725 26725 - 26726 26056 ``` 26727 26057 static circle(t: number); 26728 26058 ``` ··· 26733 26063 26734 26064 #### `exp()` 26735 26065 26736 26736 - tsx 26737 26737 - 26738 26066 ``` 26739 26067 static exp(t: number); 26740 26068 ``` ··· 26744 26072 --- 26745 26073 26746 26074 #### `elastic()` 26747 26747 - 26748 26748 - tsx 26749 26075 26750 26076 ``` 26751 26077 static elastic(bounciness: number); ··· 26759 26085 26760 26086 #### `back()` 26761 26087 26762 26762 - tsx 26763 26763 - 26764 26088 ``` 26765 26089 static back(s) 26766 26090 ``` ··· 26771 26095 26772 26096 #### `bounce()` 26773 26097 26774 26774 - tsx 26775 26775 - 26776 26098 ``` 26777 26099 static bounce(t: number); 26778 26100 ``` ··· 26782 26104 --- 26783 26105 26784 26106 #### `bezier()` 26785 26785 - 26786 26786 - tsx 26787 26107 26788 26108 ``` 26789 26109 static bezier(x1: number, y1: number, x2: number, y2: number); ··· 26797 26117 26798 26118 #### `in()` 26799 26119 26800 26800 - tsx 26801 26801 - 26802 26120 ``` 26803 26121 static in(easing: number); 26804 26122 ``` ··· 26809 26127 26810 26128 #### `out()` 26811 26129 26812 26812 - tsx 26813 26813 - 26814 26130 ``` 26815 26131 static out(easing: number); 26816 26132 ``` ··· 26820 26136 --- 26821 26137 26822 26138 #### `inOut()` 26823 26823 - 26824 26824 - tsx 26825 26139 26826 26140 ``` 26827 26141 static inOut(easing: number); ··· 26866 26180 26867 26181 #### `cancel()` 26868 26182 26869 26869 - tsx 26870 26870 - 26871 26183 ``` 26872 26184 static cancel(); 26873 26185 ``` ··· 26878 26190 26879 26191 #### `vibrate()` 26880 26192 26881 26881 - tsx 26882 26882 - 26883 26193 ``` 26884 26194 static vibrate( 26885 26195 pattern?: number | number[], ··· 26916 26226 26917 26227 #### `setValue()` 26918 26228 26919 26919 - tsx 26920 26920 - 26921 26229 ``` 26922 26230 setValue(value: {x: number; y: number}); 26923 26231 ``` ··· 26933 26241 --- 26934 26242 26935 26243 #### `setOffset()` 26936 26936 - 26937 26937 - tsx 26938 26244 26939 26245 ``` 26940 26246 setOffset(offset: {x: number; y: number}); ··· 26952 26258 26953 26259 #### `flattenOffset()` 26954 26260 26955 26955 - tsx 26956 26956 - 26957 26261 ``` 26958 26262 flattenOffset(); 26959 26263 ``` ··· 26964 26268 26965 26269 #### `extractOffset()` 26966 26270 26967 26967 - tsx 26968 26968 - 26969 26271 ``` 26970 26272 extractOffset(); 26971 26273 ``` ··· 26975 26277 --- 26976 26278 26977 26279 #### `addListener()` 26978 26978 - 26979 26979 - tsx 26980 26280 26981 26281 ``` 26982 26282 addListener(callback: (value: {x: number; y: number}) => void); ··· 26996 26296 26997 26297 #### `removeListener()` 26998 26298 26999 26999 - tsx 27000 27000 - 27001 26299 ``` 27002 26300 removeListener(id: string); 27003 26301 ``` ··· 27014 26312 27015 26313 #### `removeAllListeners()` 27016 26314 27017 27017 - tsx 27018 27018 - 27019 26315 ``` 27020 26316 removeAllListeners(); 27021 26317 ``` ··· 27025 26321 --- 27026 26322 27027 26323 #### `stopAnimation()` 27028 27028 - 27029 27029 - tsx 27030 26324 27031 26325 ``` 27032 26326 stopAnimation(callback?: (value: {x: number; y: number}) => void); ··· 27044 26338 27045 26339 #### `resetAnimation()` 27046 26340 27047 27047 - tsx 27048 27048 - 27049 26341 ``` 27050 26342 resetAnimation(callback?: (value: {x: number; y: number}) => void); 27051 26343 ``` ··· 27062 26354 27063 26355 #### `getLayout()` 27064 26356 27065 27065 - tsx 27066 27066 - 27067 26357 ``` 27068 26358 getLayout(): {left: Animated.Value, top: Animated.Value}; 27069 26359 ``` 27070 26360 27071 26361 Converts `{x, y}` into `{left, top}` for use in style, e.g. 27072 27072 - 27073 27073 - tsx 27074 26362 27075 26363 ``` 27076 26364 style={this.state.anim.getLayout()} ··· 27080 26368 27081 26369 #### `getTranslateTransform()` 27082 26370 27083 27083 - tsx 27084 27084 - 27085 26371 ``` 27086 26372 getTranslateTransform(): [ 27087 26373 {translateX: Animated.Value}, ··· 27091 26377 27092 26378 Converts `{x, y}` into a useable translation transform, e.g. 27093 26379 27094 27094 - tsx 27095 27095 - 27096 26380 ``` 27097 26381 style={{ 27098 26382 transform: this.state.anim.getTranslateTransform() ··· 27103 26387 27104 26388 ## useColorScheme 27105 26389 27106 27106 - tsx 27107 27107 - 27108 26390 ``` 27109 26391 import {useColorScheme} from 'react-native'; 27110 26392 ``` ··· 27127 26409 27128 26410 ## useWindowDimensions 27129 26411 27130 27130 - tsx 27131 27131 - 27132 26412 ``` 27133 26413 import {useWindowDimensions} from 'react-native'; 27134 26414 ``` 27135 26415 27136 26416 `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: 27137 27137 - 27138 27138 - tsx 27139 26417 27140 26418 ``` 27141 26419 const {height, width} = useWindowDimensions(); ··· 27147 26425 27148 26426 #### `fontScale` 27149 26427 27150 27150 - tsx 27151 27151 - 27152 26428 ``` 27153 26429 useWindowDimensions().fontScale; 27154 26430 ``` ··· 27158 26434 --- 27159 26435 27160 26436 #### `height` 27161 27161 - 27162 27162 - tsx 27163 26437 27164 26438 ``` 27165 26439 useWindowDimensions().height; ··· 27171 26445 27172 26446 #### `scale` 27173 26447 27174 27174 - tsx 27175 27175 - 27176 26448 ``` 27177 26449 useWindowDimensions().scale; 27178 26450 ``` ··· 27186 26458 27187 26459 #### `width` 27188 26460 27189 27189 - tsx 27190 27190 - 27191 26461 ``` 27192 26462 useWindowDimensions().width; 27193 26463 ``` ··· 27209 26479 ### Methods 27210 26480 27211 26481 #### `addListener()` 27212 27212 - 27213 27213 - tsx 27214 26482 27215 26483 ``` 27216 26484 static addListener: ( ··· 27247 26515 27248 26516 #### `dismiss()` 27249 26517 27250 27250 - tsx 27251 27251 - 27252 26518 ``` 27253 26519 static dismiss(); 27254 26520 ``` ··· 27259 26525 27260 26526 #### `scheduleLayoutAnimation` 27261 26527 27262 27262 - tsx 27263 27263 - 27264 26528 ``` 27265 26529 static scheduleLayoutAnimation(event: KeyboardEvent); 27266 26530 ``` ··· 27270 26534 --- 27271 26535 27272 26536 #### `isVisible()` 27273 27273 - 27274 27274 - tsx 27275 26537 27276 26538 ``` 27277 26539 static isVisible(): boolean; ··· 27282 26544 --- 27283 26545 27284 26546 #### `metrics()` 27285 27285 - 27286 27286 - tsx 27287 26547 27288 26548 ``` 27289 26549 static metrics(): KeyboardMetrics | undefined;

+28

src/unified.ts

reviewed

··· 52 52 parent.children.length = 0; 53 53 } else if (node.type === 'html') { 54 54 parent.children.splice(index, 1); 55 55 + } else if (node.type === 'heading') { 56 56 + const child = node.children[0]; 57 57 + if (node.children.length === 0) 58 58 + parent.children.splice(index, 1); 59 59 + if (node.children.length > 1 || !child || child.type !== 'text') 60 60 + return; 61 61 + switch (child.value.trim()) { 62 62 + case 'Example': 63 63 + case 'Remarks': 64 64 + case 'Note': 65 65 + case '': 66 66 + parent.children.splice(index, 1); 67 67 + break; 68 68 + default: 69 69 + return; 70 70 + } 71 71 + } else if (node.type === 'text') { 72 72 + if (!parent || parent.type !== 'paragraph' || parent.children.length > 1) 73 73 + return; 74 74 + switch (node.value.trim()) { 75 75 + case 'Loading...': 76 76 + case 'Caution': 77 77 + case 'tsx': 78 78 + parent.children.splice(index, 1); 79 79 + break; 80 80 + default: 81 81 + return; 82 82 + } 55 83 } 56 84 }); 57 85 };