From 2945cf9c5bb954509b10f1458f5fade2770d1fa8 Mon Sep 17 00:00:00 2001 From: Darsh Date: Wed, 19 Aug 2020 11:13:13 +0530 Subject: [PATCH 01/95] remove unused versions --- website/versioned_docs/version-0.10/modal.md | 9 - website/versioned_docs/version-0.10/text.md | 203 ----- .../versioned_docs/version-0.10/textinput.md | 392 -------- .../version-0.11/drawerlayoutandroid.md | 149 ---- website/versioned_docs/version-0.11/image.md | 205 ----- .../version-0.11/layoutanimation.md | 70 -- website/versioned_docs/version-0.11/modal.md | 30 - .../version-0.11/progressbarandroid.md | 62 -- .../versioned_docs/version-0.11/scrollview.md | 427 --------- .../version-0.11/toastandroid.md | 35 - .../version-0.11/toolbarandroid.md | 154 ---- .../version-0.11/touchablenativefeedback.md | 81 -- .../versioned_docs/version-0.12/animated.md | 448 ---------- .../version-0.12/drawerlayoutandroid.md | 149 ---- website/versioned_docs/version-0.12/easing.md | 177 ---- .../version-0.12/imagepickerios.md | 48 - website/versioned_docs/version-0.12/modal.md | 39 - .../versioned_docs/version-0.12/scrollview.md | 453 ---------- .../versioned_docs/version-0.12/textinput.md | 403 --------- .../version-0.12/touchablehighlight.md | 100 --- .../version-0.12/touchablenativefeedback.md | 81 -- .../version-0.12/touchableopacity.md | 54 -- .../version-0.12/touchablewithoutfeedback.md | 125 --- .../versioned_docs/version-0.12/transforms.md | 30 - .../version-0.13/drawerlayoutandroid.md | 153 ---- website/versioned_docs/version-0.13/modal.md | 45 - .../version-0.13/pushnotificationios.md | 220 ----- .../versioned_docs/version-0.13/scrollview.md | 463 ---------- website/versioned_docs/version-0.13/switch.md | 91 -- .../versioned_docs/version-0.13/textinput.md | 411 --------- .../version-0.13/toolbarandroid.md | 156 ---- .../version-0.13/touchablehighlight.md | 100 --- .../versioned_docs/version-0.13/transforms.md | 30 - .../version-0.13/view-style-props.md | 228 ----- .../version-0.13/viewpagerandroid.md | 109 --- website/versioned_docs/version-0.14/modal.md | 45 - .../version-0.14/pushnotificationios.md | 252 ------ .../version-0.14/snapshotviewios.md | 42 - .../versioned_docs/version-0.14/textinput.md | 411 --------- .../version-0.14/toolbarandroid.md | 167 ---- .../versioned_docs/version-0.14/transforms.md | 75 -- .../version-0.15/asyncstorage.md | 134 --- .../versioned_docs/version-0.15/cameraroll.md | 50 -- .../version-0.15/geolocation.md | 68 -- website/versioned_docs/version-0.15/modal.md | 54 -- .../version-0.15/progressbarandroid.md | 73 -- .../versioned_docs/version-0.15/textinput.md | 433 --------- .../versioned_docs/version-0.15/webview.md | 236 ----- .../versioned_docs/version-0.16/animated.md | 448 ---------- .../version-0.16/datepickerios.md | 101 --- .../version-0.16/drawerlayoutandroid.md | 155 ---- .../version-0.16/geolocation.md | 70 -- .../version-0.16/layout-props.md | 336 ------- .../version-0.16/progressbarandroid.md | 97 -- .../version-0.16/progressviewios.md | 82 -- .../versioned_docs/version-0.16/scrollview.md | 506 ----------- .../version-0.16/segmentedcontrolios.md | 93 -- .../version-0.16/snapshotviewios.md | 44 - website/versioned_docs/version-0.16/switch.md | 93 -- .../version-0.16/tabbarios-item.md | 102 --- .../versioned_docs/version-0.16/tabbarios.md | 56 -- .../versioned_docs/version-0.16/textinput.md | 446 --------- .../version-0.16/toastandroid.md | 35 - .../version-0.16/toolbarandroid.md | 169 ---- .../version-0.16/touchablewithoutfeedback.md | 136 --- .../version-0.16/view-style-props.md | 239 ----- .../version-0.16/viewpagerandroid.md | 124 --- .../versioned_docs/version-0.16/webview.md | 249 ------ .../version-0.17/asyncstorage.md | 149 ---- website/versioned_docs/version-0.17/image.md | 205 ----- website/versioned_docs/version-0.17/modal.md | 56 -- .../version-0.17/navigatorios.md | 291 ------ .../versioned_docs/version-0.17/netinfo.md | 137 --- .../versioned_docs/version-0.17/scrollview.md | 506 ----------- website/versioned_docs/version-0.17/text.md | 155 ---- .../versioned_docs/version-0.17/textinput.md | 434 --------- .../version-0.17/toolbarandroid.md | 184 ---- .../version-0.17/view-style-props.md | 239 ----- .../versioned_docs/version-0.17/webview.md | 251 ------ .../versioned_docs/version-0.18/animated.md | 470 ---------- .../versioned_docs/version-0.18/cameraroll.md | 50 -- .../versioned_docs/version-0.18/dimensions.md | 42 - .../version-0.18/drawerlayoutandroid.md | 155 ---- .../version-0.18/geolocation.md | 68 -- .../version-0.18/image-style-props.md | 93 -- website/versioned_docs/version-0.18/image.md | 213 ----- .../version-0.18/imageeditor.md | 25 - .../versioned_docs/version-0.18/imagestore.md | 60 -- .../version-0.18/interactionmanager.md | 97 -- .../version-0.18/navigatorios.md | 293 ------ .../version-0.18/progressbarandroid.md | 97 -- .../version-0.18/pushnotificationios.md | 257 ------ .../version-0.18/refreshcontrol.md | 102 --- .../versioned_docs/version-0.18/scrollview.md | 524 ----------- website/versioned_docs/version-0.18/switch.md | 93 -- .../version-0.18/tabbarios-item.md | 102 --- .../versioned_docs/version-0.18/tabbarios.md | 56 -- .../version-0.18/text-style-props.md | 151 ---- website/versioned_docs/version-0.18/text.md | 161 ---- .../version-0.18/toolbarandroid.md | 210 ----- .../version-0.18/touchablehighlight.md | 100 --- .../version-0.18/view-style-props.md | 239 ----- .../version-0.18/viewpagerandroid.md | 124 --- .../versioned_docs/version-0.18/webview.md | 262 ------ .../versioned_docs/version-0.19/animated.md | 470 ---------- .../versioned_docs/version-0.19/appstate.md | 100 --- website/versioned_docs/version-0.19/image.md | 215 ----- website/versioned_docs/version-0.19/picker.md | 117 --- .../versioned_docs/version-0.19/pixelratio.md | 106 --- .../version-0.19/progressbarandroid.md | 98 -- .../version-0.19/pushnotificationios.md | 264 ------ .../versioned_docs/version-0.19/scrollview.md | 520 ----------- .../versioned_docs/version-0.19/stylesheet.md | 71 -- .../version-0.19/text-style-props.md | 160 ---- website/versioned_docs/version-0.19/text.md | 163 ---- .../versioned_docs/version-0.19/textinput.md | 423 --------- .../version-0.19/touchablewithoutfeedback.md | 140 --- .../version-0.19/view-style-props.md | 203 ----- .../versioned_docs/version-0.19/webview.md | 306 ------- .../versioned_docs/version-0.20/cameraroll.md | 50 -- .../versioned_docs/version-0.20/clipboard.md | 50 -- .../version-0.20/datepickerandroid.md | 74 -- .../version-0.20/image-style-props.md | 113 --- website/versioned_docs/version-0.20/image.md | 244 ----- .../versioned_docs/version-0.20/imagestore.md | 60 -- .../version-0.20/layout-props.md | 300 ------- .../versioned_docs/version-0.20/linking.md | 161 ---- website/versioned_docs/version-0.20/picker.md | 115 --- .../version-0.20/refreshcontrol.md | 104 --- .../versioned_docs/version-0.20/scrollview.md | 548 ------------ .../versioned_docs/version-0.20/statusbar.md | 113 --- website/versioned_docs/version-0.20/text.md | 163 ---- .../versioned_docs/version-0.20/textinput.md | 423 --------- .../version-0.20/timepickerandroid.md | 72 -- .../versioned_docs/version-0.20/transforms.md | 75 -- .../version-0.20/viewpagerandroid.md | 159 ---- .../versioned_docs/version-0.20/webview.md | 335 ------- .../version-0.21/geolocation.md | 68 -- .../versioned_docs/version-0.21/linking.md | 163 ---- .../version-0.21/pushnotificationios.md | 283 ------ .../versioned_docs/version-0.21/scrollview.md | 546 ------------ .../version-0.22/actionsheetios.md | 37 - .../versioned_docs/version-0.22/animated.md | 481 ---------- .../version-0.22/drawerlayoutandroid.md | 170 ---- website/versioned_docs/version-0.22/modal.md | 65 -- .../versioned_docs/version-0.22/netinfo.md | 141 --- .../version-0.22/pushnotificationios.md | 288 ------ .../versioned_docs/version-0.22/statusbar.md | 201 ----- .../version-0.22/statusbarios.md | 41 - .../versioned_docs/version-0.22/textinput.md | 423 --------- .../version-0.22/touchablewithoutfeedback.md | 162 ---- .../versioned_docs/version-0.22/vibration.md | 29 - .../version-0.22/vibrationios.md | 31 - .../versioned_docs/version-0.22/webview.md | 335 ------- .../versioned_docs/version-0.23/animated.md | 481 ---------- .../version-0.23/asyncstorage.md | 263 ------ .../versioned_docs/version-0.23/dimensions.md | 42 - .../version-0.23/drawerlayoutandroid.md | 170 ---- website/versioned_docs/version-0.23/easing.md | 177 ---- website/versioned_docs/version-0.23/image.md | 255 ------ website/versioned_docs/version-0.23/modal.md | 63 -- .../version-0.23/refreshcontrol.md | 143 --- .../versioned_docs/version-0.23/scrollview.md | 550 ------------ .../version-0.23/segmentedcontrolios.md | 107 --- .../versioned_docs/version-0.23/textinput.md | 429 --------- .../versioned_docs/version-0.23/webview.md | 346 ------- .../version-0.24/actionsheetios.md | 45 - .../version-0.24/drawerlayoutandroid.md | 181 ---- website/versioned_docs/version-0.24/modal.md | 63 -- .../version-0.24/pushnotificationios.md | 289 ------ .../versioned_docs/version-0.24/scrollview.md | 546 ------------ website/versioned_docs/version-0.24/slider.md | 183 ---- .../versioned_docs/version-0.24/statusbar.md | 201 ----- website/versioned_docs/version-0.24/switch.md | 97 -- .../versioned_docs/version-0.24/textinput.md | 429 --------- .../versioned_docs/version-0.24/vibration.md | 42 - .../version-0.25/asyncstorage.md | 263 ------ .../version-0.25/drawerlayoutandroid.md | 205 ----- .../version-0.25/geolocation.md | 68 -- .../version-0.25/image-style-props.md | 149 ---- website/versioned_docs/version-0.25/image.md | 274 ------ .../version-0.25/navigatorios.md | 277 ------ .../version-0.25/refreshcontrol.md | 154 ---- .../versioned_docs/version-0.25/scrollview.md | 543 ----------- .../versioned_docs/version-0.25/statusbar.md | 201 ----- .../version-0.25/text-style-props.md | 160 ---- website/versioned_docs/version-0.25/text.md | 163 ---- .../versioned_docs/version-0.25/textinput.md | 433 --------- .../version-0.25/timepickerandroid.md | 72 -- .../version-0.25/touchablehighlight.md | 88 -- .../version-0.25/touchablenativefeedback.md | 88 -- .../version-0.25/touchableopacity.md | 56 -- .../version-0.25/viewpagerandroid.md | 170 ---- .../versioned_docs/version-0.25/webview.md | 316 ------- .../versioned_docs/version-0.26/linking.md | 163 ---- website/versioned_docs/version-0.26/modal.md | 74 -- .../version-0.26/panresponder.md | 128 --- .../versioned_docs/version-0.26/pickerios.md | 41 - .../version-0.26/pushnotificationios.md | 291 ------ .../versioned_docs/version-0.26/scrollview.md | 549 ------------ .../version-0.26/tabbarios-item.md | 113 --- .../versioned_docs/version-0.26/tabbarios.md | 67 -- .../version-0.26/text-style-props.md | 160 ---- website/versioned_docs/version-0.26/text.md | 174 ---- .../version-0.26/touchableopacity.md | 56 -- .../versioned_docs/version-0.26/transforms.md | 84 -- .../version-0.26/viewpagerandroid.md | 181 ---- .../versioned_docs/version-0.26/webview.md | 325 ------- .../version-0.27/drawerlayoutandroid.md | 203 ----- .../version-0.27/image-style-props.md | 149 ---- website/versioned_docs/version-0.27/image.md | 274 ------ .../version-0.27/navigatorios.md | 290 ------ .../versioned_docs/version-0.27/netinfo.md | 147 --- .../version-0.27/refreshcontrol.md | 165 ---- .../versioned_docs/version-0.27/scrollview.md | 558 ------------ .../version-0.27/statusbarios.md | 41 - .../versioned_docs/version-0.27/textinput.md | 466 ---------- .../version-0.27/viewpagerandroid.md | 181 ---- .../version-0.28/actionsheetios.md | 47 - .../version-0.28/activityindicator.md | 60 -- .../versioned_docs/version-0.28/appstate.md | 102 --- .../version-0.28/asyncstorage.md | 263 ------ website/versioned_docs/version-0.28/image.md | 274 ------ .../versioned_docs/version-0.28/linking.md | 174 ---- .../version-0.28/pushnotificationios.md | 304 ------- .../versioned_docs/version-0.28/scrollview.md | 534 ----------- .../versioned_docs/version-0.28/tabbarios.md | 82 -- .../version-0.29/asyncstorage.md | 364 -------- .../versioned_docs/version-0.29/cameraroll.md | 57 -- website/versioned_docs/version-0.29/image.md | 339 ------- .../version-0.29/interactionmanager.md | 97 -- .../version-0.29/keyboardavoidingview.md | 64 -- .../version-0.29/layout-props.md | 471 ---------- website/versioned_docs/version-0.29/modal.md | 143 --- .../version-0.29/navigatorios.md | 433 --------- .../version-0.29/pushnotificationios.md | 320 ------- .../version-0.29/refreshcontrol.md | 165 ---- .../versioned_docs/version-0.29/statusbar.md | 248 ------ .../version-0.29/statusbarios.md | 11 - .../versioned_docs/version-0.29/stylesheet.md | 77 -- website/versioned_docs/version-0.29/text.md | 237 ----- .../versioned_docs/version-0.29/textinput.md | 544 ----------- .../versioned_docs/version-0.29/webview.md | 372 -------- .../version-0.30/activityindicator.md | 62 -- .../version-0.30/datepickerios.md | 101 --- .../version-0.30/drawerlayoutandroid.md | 209 ----- .../version-0.30/image-style-props.md | 149 ---- website/versioned_docs/version-0.30/image.md | 341 ------- .../version-0.30/keyboardavoidingview.md | 64 -- .../version-0.30/layout-props.md | 483 ---------- website/versioned_docs/version-0.30/modal.md | 143 --- .../version-0.30/progressbarandroid.md | 98 -- .../version-0.30/progressviewios.md | 82 -- .../versioned_docs/version-0.30/scrollview.md | 534 ----------- .../version-0.30/segmentedcontrolios.md | 107 --- .../version-0.30/shadow-props.md | 58 -- website/versioned_docs/version-0.30/slider.md | 183 ---- .../version-0.30/text-style-props.md | 174 ---- website/versioned_docs/version-0.30/text.md | 240 ----- .../versioned_docs/version-0.30/textinput.md | 577 ------------ .../version-0.30/toolbarandroid.md | 212 ----- .../versioned_docs/version-0.30/transforms.md | 86 -- .../version-0.30/view-style-props.md | 203 ----- .../version-0.30/viewpagerandroid.md | 183 ---- .../version-0.31/asyncstorage.md | 365 -------- website/versioned_docs/version-0.31/image.md | 341 ------- .../version-0.31/panresponder.md | 128 --- .../version-0.31/pushnotificationios.md | 307 ------- website/versioned_docs/version-0.31/text.md | 240 ----- .../versioned_docs/version-0.31/textinput.md | 590 ------------ .../version-0.31/toastandroid.md | 85 -- .../version-0.31/touchablehighlight.md | 88 -- .../version-0.31/touchableopacity.md | 56 -- .../versioned_docs/version-0.31/webview.md | 394 -------- .../version-0.32/activityindicator.md | 62 -- website/versioned_docs/version-0.32/image.md | 374 -------- .../version-0.32/keyboardavoidingview.md | 75 -- .../version-0.32/layout-props.md | 483 ---------- .../version-0.32/navigatorios.md | 433 --------- website/versioned_docs/version-0.32/picker.md | 115 --- .../version-0.32/pushnotificationios.md | 307 ------- .../versioned_docs/version-0.32/scrollview.md | 535 ----------- website/versioned_docs/version-0.32/share.md | 71 -- .../version-0.32/snapshotviewios.md | 32 - .../versioned_docs/version-0.32/statusbar.md | 248 ------ .../versioned_docs/version-0.32/tabbarios.md | 82 -- .../versioned_docs/version-0.32/textinput.md | 614 ------------- .../version-0.32/viewpagerandroid.md | 156 ---- .../versioned_docs/version-0.32/webview.md | 336 ------- website/versioned_docs/version-0.33/image.md | 375 -------- .../version-0.33/layout-props.md | 483 ---------- .../version-0.33/permissionsandroid.md | 75 -- .../version-0.33/text-style-props.md | 185 ---- website/versioned_docs/version-0.33/text.md | 264 ------ .../version-0.34/actionsheetios.md | 47 - .../versioned_docs/version-0.34/animated.md | 494 ---------- .../versioned_docs/version-0.34/cameraroll.md | 57 -- .../version-0.34/geolocation.md | 70 -- website/versioned_docs/version-0.34/image.md | 394 -------- .../version-0.34/keyboardavoidingview.md | 77 -- .../version-0.34/layout-props.md | 512 ----------- website/versioned_docs/version-0.34/modal.md | 165 ---- .../version-0.34/navigatorios.md | 433 --------- .../version-0.34/pushnotificationios.md | 309 ------- website/versioned_docs/version-0.34/switch.md | 97 -- .../version-0.34/text-style-props.md | 185 ---- website/versioned_docs/version-0.34/text.md | 264 ------ .../versioned_docs/version-0.34/textinput.md | 627 ------------- .../versioned_docs/version-0.34/vibration.md | 32 - .../version-0.35/geolocation.md | 72 -- website/versioned_docs/version-0.35/image.md | 405 --------- .../version-0.35/permissionsandroid.md | 75 -- .../version-0.35/toastandroid.md | 69 -- .../versioned_docs/version-0.36/animated.md | 505 ----------- .../versioned_docs/version-0.36/keyboard.md | 112 --- .../version-0.36/layout-props.md | 525 ----------- website/versioned_docs/version-0.36/modal.md | 165 ---- .../versioned_docs/version-0.36/scrollview.md | 532 ----------- .../versioned_docs/version-0.36/statusbar.md | 249 ------ .../versioned_docs/version-0.36/textinput.md | 627 ------------- .../version-0.36/touchablehighlight.md | 88 -- .../version-0.36/touchablenativefeedback.md | 110 --- .../version-0.36/view-style-props.md | 194 ---- .../version-0.37/activityindicator.md | 60 -- website/versioned_docs/version-0.37/alert.md | 52 -- .../versioned_docs/version-0.37/alertios.md | 193 ---- .../version-0.37/appregistry.md | 96 -- website/versioned_docs/version-0.37/button.md | 84 -- .../versioned_docs/version-0.37/cameraroll.md | 57 -- .../version-0.37/datepickerios.md | 101 --- .../version-0.37/drawerlayoutandroid.md | 203 ----- .../version-0.37/image-style-props.md | 149 ---- website/versioned_docs/version-0.37/image.md | 403 --------- .../version-0.37/keyboardavoidingview.md | 77 -- .../version-0.37/layout-props.md | 511 ----------- website/versioned_docs/version-0.37/modal.md | 164 ---- .../version-0.37/navigatorios.md | 429 --------- .../version-0.37/panresponder.md | 128 --- .../version-0.37/progressbarandroid.md | 98 -- .../version-0.37/progressviewios.md | 82 -- .../version-0.37/pushnotificationios.md | 310 ------- .../versioned_docs/version-0.37/scrollview.md | 532 ----------- .../version-0.37/segmentedcontrolios.md | 107 --- .../version-0.37/shadow-props.md | 56 -- website/versioned_docs/version-0.37/slider.md | 183 ---- .../versioned_docs/version-0.37/systrace.md | 120 --- .../version-0.37/text-style-props.md | 169 ---- website/versioned_docs/version-0.37/text.md | 261 ------ .../versioned_docs/version-0.37/textinput.md | 613 ------------- .../version-0.37/toolbarandroid.md | 210 ----- .../version-0.37/touchablenativefeedback.md | 110 --- .../versioned_docs/version-0.37/transforms.md | 84 -- .../version-0.37/view-style-props.md | 194 ---- .../versioned_docs/version-0.37/webview.md | 349 -------- website/versioned_docs/version-0.38/modal.md | 162 ---- .../version-0.38/pushnotificationios.md | 339 ------- .../versioned_docs/version-0.38/statusbar.md | 253 ------ .../versioned_docs/version-0.38/textinput.md | 615 ------------- .../versioned_docs/version-0.39/animated.md | 515 ----------- .../version-0.39/geolocation.md | 74 -- website/versioned_docs/version-0.39/image.md | 403 --------- .../version-0.39/pushnotificationios.md | 339 ------- website/versioned_docs/version-0.39/text.md | 261 ------ .../versioned_docs/version-0.39/textinput.md | 626 ------------- .../version-0.39/touchableopacity.md | 56 -- .../version-0.39/touchablewithoutfeedback.md | 162 ---- .../version-0.40/datepickerandroid.md | 75 -- .../version-0.40/layout-props.md | 528 ----------- .../version-0.40/layoutanimation.md | 74 -- .../version-0.40/panresponder.md | 128 --- .../version-0.40/permissionsandroid.md | 118 --- .../version-0.40/pushnotificationios.md | 329 ------- .../versioned_docs/version-0.40/scrollview.md | 544 ----------- .../versioned_docs/version-0.40/stylesheet.md | 90 -- .../version-0.40/tabbarios-item.md | 124 --- .../versioned_docs/version-0.40/tabbarios.md | 93 -- .../version-0.40/text-style-props.md | 180 ---- website/versioned_docs/version-0.40/text.md | 265 ------ .../versioned_docs/version-0.40/textinput.md | 648 -------------- website/versioned_docs/version-0.41/alert.md | 57 -- .../version-0.41/appregistry.md | 96 -- .../versioned_docs/version-0.41/cameraroll.md | 61 -- website/versioned_docs/version-0.41/image.md | 403 --------- website/versioned_docs/version-0.41/modal.md | 173 ---- .../versioned_docs/version-0.41/scrollview.md | 555 ------------ .../version-0.41/tabbarios-item.md | 135 --- website/versioned_docs/version-0.41/text.md | 287 ------ .../versioned_docs/version-0.41/textinput.md | 661 -------------- .../version-0.41/touchablehighlight.md | 112 --- .../version-0.41/touchableopacity.md | 76 -- .../versioned_docs/version-0.42/alertios.md | 194 ---- .../versioned_docs/version-0.42/animated.md | 523 ----------- .../versioned_docs/version-0.42/appstate.md | 114 --- website/versioned_docs/version-0.42/button.md | 95 -- .../versioned_docs/version-0.42/cameraroll.md | 61 -- .../version-0.42/geolocation.md | 74 -- website/versioned_docs/version-0.42/image.md | 403 --------- .../version-0.42/layout-props.md | 528 ----------- .../version-0.42/navigatorios.md | 406 --------- .../version-0.42/permissionsandroid.md | 118 --- .../versioned_docs/version-0.42/scrollview.md | 574 ------------ website/versioned_docs/version-0.42/slider.md | 194 ---- website/versioned_docs/version-0.42/switch.md | 97 -- website/versioned_docs/version-0.42/text.md | 298 ------- .../versioned_docs/version-0.42/textinput.md | 661 -------------- .../version-0.42/touchablewithoutfeedback.md | 162 ---- .../version-0.43/accessibilityinfo.md | 98 -- website/versioned_docs/version-0.43/alert.md | 59 -- .../versioned_docs/version-0.43/animated.md | 625 ------------- .../version-0.43/appregistry.md | 141 --- .../versioned_docs/version-0.43/cameraroll.md | 99 -- .../version-0.43/datepickerandroid.md | 78 -- .../versioned_docs/version-0.43/dimensions.md | 66 -- website/versioned_docs/version-0.43/easing.md | 270 ------ website/versioned_docs/version-0.43/image.md | 403 --------- .../version-0.43/layout-props.md | 563 ------------ .../version-0.43/layoutanimation.md | 80 -- .../versioned_docs/version-0.43/scrollview.md | 579 ------------ .../versioned_docs/version-0.43/statusbar.md | 253 ------ website/versioned_docs/version-0.43/text.md | 298 ------- .../versioned_docs/version-0.43/textinput.md | 672 -------------- .../version-0.43/touchablehighlight.md | 112 --- .../version-0.43/touchablenativefeedback.md | 112 --- .../version-0.43/touchableopacity.md | 78 -- .../version-0.43/touchablewithoutfeedback.md | 160 ---- .../versioned_docs/version-0.44/alertios.md | 202 ----- .../versioned_docs/version-0.44/animated.md | 689 -------------- .../version-0.44/appregistry.md | 150 ---- .../version-0.44/backandroid.md | 41 - .../version-0.44/backhandler.md | 64 -- .../versioned_docs/version-0.44/flatlist.md | 403 --------- website/versioned_docs/version-0.44/image.md | 405 --------- .../version-0.44/keyboardavoidingview.md | 77 -- .../versioned_docs/version-0.44/linking.md | 174 ---- .../versioned_docs/version-0.44/listview.md | 286 ------ .../version-0.44/listviewdatasource.md | 190 ---- website/versioned_docs/version-0.44/modal.md | 175 ---- .../versioned_docs/version-0.44/navigator.md | 9 - .../version-0.44/navigatorios.md | 429 --------- .../version-0.44/pushnotificationios.md | 375 -------- .../versioned_docs/version-0.44/scrollview.md | 580 ------------ .../version-0.44/sectionlist.md | 232 ----- website/versioned_docs/version-0.44/slider.md | 194 ---- .../version-0.44/tabbarios-item.md | 135 --- .../versioned_docs/version-0.44/textinput.md | 672 -------------- .../version-0.44/touchablehighlight.md | 112 --- .../version-0.44/touchablewithoutfeedback.md | 160 ---- website/versioned_docs/version-0.44/view.md | 483 ---------- .../version-0.44/virtualizedlist.md | 328 ------- .../versioned_docs/version-0.44/webview.md | 377 -------- .../version-0.45/appregistry.md | 161 ---- .../versioned_docs/version-0.45/cameraroll.md | 99 -- .../version-0.45/datepickerandroid.md | 78 -- .../versioned_docs/version-0.45/flatlist.md | 433 --------- .../version-0.45/geolocation.md | 87 -- website/versioned_docs/version-0.45/image.md | 405 --------- .../versioned_docs/version-0.45/keyboard.md | 114 --- .../version-0.45/layout-props.md | 563 ------------ .../versioned_docs/version-0.45/linking.md | 187 ---- .../version-0.45/navigatorios.md | 427 --------- .../versioned_docs/version-0.45/netinfo.md | 147 --- .../version-0.45/panresponder.md | 128 --- .../version-0.45/permissionsandroid.md | 129 --- website/versioned_docs/version-0.45/picker.md | 115 --- .../version-0.45/pushnotificationios.md | 385 -------- .../versioned_docs/version-0.45/scrollview.md | 578 ------------ .../version-0.45/sectionlist.md | 313 ------- website/versioned_docs/version-0.45/slider.md | 194 ---- .../versioned_docs/version-0.45/systrace.md | 129 --- website/versioned_docs/version-0.45/text.md | 320 ------- .../versioned_docs/version-0.45/textinput.md | 672 -------------- .../version-0.45/touchablewithoutfeedback.md | 160 ---- website/versioned_docs/version-0.45/view.md | 496 ----------- .../version-0.45/virtualizedlist.md | 379 -------- .../version-0.46/accessibilityinfo.md | 123 --- .../versioned_docs/version-0.46/animated.md | 691 -------------- .../versioned_docs/version-0.46/appstate.md | 114 --- .../versioned_docs/version-0.46/flatlist.md | 446 --------- .../version-0.46/geolocation.md | 98 -- website/versioned_docs/version-0.46/image.md | 407 --------- .../version-0.46/imagebackground.md | 54 -- .../version-0.46/layout-props.md | 563 ------------ .../versioned_docs/version-0.46/linking.md | 205 ----- .../versioned_docs/version-0.46/listview.md | 297 ------ .../version-0.46/pushnotificationios.md | 397 --------- .../versioned_docs/version-0.46/scrollview.md | 602 ------------- .../version-0.46/sectionlist.md | 324 ------- .../version-0.46/virtualizedlist.md | 394 -------- .../versioned_docs/version-0.46/webview.md | 388 -------- .../version-0.47/appregistry.md | 170 ---- .../versioned_docs/version-0.47/flatlist.md | 468 ---------- .../versioned_docs/version-0.47/keyboard.md | 114 --- .../version-0.47/layout-props.md | 563 ------------ website/versioned_docs/version-0.47/modal.md | 193 ---- .../version-0.47/pushnotificationios.md | 408 --------- .../versioned_docs/version-0.47/scrollview.md | 615 ------------- .../version-0.47/sectionlist.md | 335 ------- .../versioned_docs/version-0.47/systrace.md | 138 --- website/versioned_docs/version-0.47/text.md | 320 ------- website/versioned_docs/version-0.47/view.md | 496 ----------- .../version-0.47/viewpagerandroid.md | 167 ---- .../version-0.47/virtualizedlist.md | 416 --------- .../versioned_docs/version-0.48/animated.md | 691 -------------- .../versioned_docs/version-0.48/flatlist.md | 470 ---------- .../version-0.48/geolocation.md | 98 -- website/versioned_docs/version-0.48/image.md | 413 --------- .../version-0.48/keyboardavoidingview.md | 77 -- .../version-0.48/layout-props.md | 563 ------------ .../versioned_docs/version-0.48/linking.md | 205 ----- .../versioned_docs/version-0.48/listview.md | 299 ------- .../version-0.48/listviewdatasource.md | 205 ----- .../version-0.48/maskedviewios.md | 64 -- website/versioned_docs/version-0.48/modal.md | 193 ---- .../version-0.48/navigatorios.md | 427 --------- .../versioned_docs/version-0.48/netinfo.md | 191 ---- .../versioned_docs/version-0.48/scrollview.md | 642 ------------- .../version-0.48/sectionlist.md | 335 ------- .../versioned_docs/version-0.48/statusbar.md | 253 ------ .../version-0.48/touchableopacity.md | 69 -- .../version-0.48/touchablewithoutfeedback.md | 176 ---- .../versioned_docs/version-0.48/transforms.md | 98 -- website/versioned_docs/version-0.48/view.md | 500 ----------- .../versioned_docs/version-0.49/alertios.md | 202 ----- .../versioned_docs/version-0.49/animated.md | 359 -------- website/versioned_docs/version-0.49/button.md | 95 -- .../versioned_docs/version-0.49/flatlist.md | 184 ---- .../version-0.49/geolocation.md | 115 --- .../version-0.49/maskedviewios.md | 53 -- website/versioned_docs/version-0.49/modal.md | 193 ---- .../version-0.49/navigatorios.md | 439 --------- .../version-0.49/permissionsandroid.md | 131 --- website/versioned_docs/version-0.49/picker.md | 115 --- .../versioned_docs/version-0.49/pixelratio.md | 116 --- .../version-0.49/pushnotificationios.md | 409 --------- .../versioned_docs/version-0.49/scrollview.md | 653 -------------- .../version-0.49/sectionlist.md | 101 --- .../version-0.49/snapshotviewios.md | 32 - .../versioned_docs/version-0.49/statusbar.md | 253 ------ .../versioned_docs/version-0.49/stylesheet.md | 90 -- .../versioned_docs/version-0.49/systrace.md | 138 --- .../versioned_docs/version-0.49/tabbarios.md | 104 --- website/versioned_docs/version-0.49/text.md | 473 ---------- .../versioned_docs/version-0.49/textinput.md | 702 --------------- .../version-0.49/toastandroid.md | 117 --- .../versioned_docs/version-0.49/vibration.md | 80 -- website/versioned_docs/version-0.49/view.md | 496 ----------- .../version-0.49/viewpagerandroid.md | 167 ---- .../version-0.49/virtualizedlist.md | 197 ---- .../version-0.5/accessibility.md | 298 ------- .../version-0.5/accessibilityinfo.md | 151 ---- .../version-0.5/actionsheetios.md | 30 - .../version-0.5/activityindicator.md | 101 --- website/versioned_docs/version-0.5/alert.md | 75 -- .../versioned_docs/version-0.5/alertios.md | 200 ----- .../versioned_docs/version-0.5/animated.md | 580 ------------ .../version-0.5/animatedvalue.md | 229 ----- .../version-0.5/animatedvaluexy.md | 223 ----- .../versioned_docs/version-0.5/animations.md | 409 --------- .../version-0.5/app-extensions.md | 27 - .../versioned_docs/version-0.5/appregistry.md | 208 ----- .../versioned_docs/version-0.5/appstate.md | 117 --- .../version-0.5/asyncstorage.md | 375 -------- .../versioned_docs/version-0.5/backandroid.md | 41 - .../versioned_docs/version-0.5/backhandler.md | 64 -- .../version-0.5/building-for-tv.md | 167 ---- website/versioned_docs/version-0.5/button.md | 109 --- .../versioned_docs/version-0.5/cameraroll.md | 38 - .../versioned_docs/version-0.5/checkbox.md | 74 -- .../versioned_docs/version-0.5/clipboard.md | 54 -- website/versioned_docs/version-0.5/colors.md | 185 ---- .../version-0.5/communication-android.md | 118 --- .../version-0.5/communication-ios.md | 201 ----- .../version-0.5/components-and-apis.md | 292 ------ .../version-0.5/custom-webview-android.md | 262 ------ .../version-0.5/custom-webview-ios.md | 237 ----- .../version-0.5/datepickerandroid.md | 78 -- .../version-0.5/datepickerios.md | 99 -- .../versioned_docs/version-0.5/debugging.md | 180 ---- .../versioned_docs/version-0.5/dimensions.md | 40 - .../version-0.5/direct-manipulation.md | 207 ----- .../version-0.5/drawerlayoutandroid.md | 202 ----- website/versioned_docs/version-0.5/easing.md | 265 ------ .../versioned_docs/version-0.5/flatlist.md | 540 ----------- website/versioned_docs/version-0.5/flexbox.md | 229 ----- .../versioned_docs/version-0.5/geolocation.md | 60 -- .../version-0.5/gesture-responder-system.md | 67 -- .../version-0.5/getting-started.md | 560 ------------ .../version-0.5/handling-text-input.md | 43 - .../version-0.5/handling-touches.md | 175 ---- .../version-0.5/headless-js-android.md | 187 ---- .../version-0.5/height-and-width.md | 58 -- .../version-0.5/image-style-props.md | 75 -- website/versioned_docs/version-0.5/image.md | 150 ---- .../versioned_docs/version-0.5/imageeditor.md | 36 - .../version-0.5/imagepickerios.md | 56 -- website/versioned_docs/version-0.5/images.md | 231 ----- .../versioned_docs/version-0.5/imagestore.md | 60 -- .../versioned_docs/version-0.5/improvingux.md | 55 -- .../integration-with-existing-apps.md | 816 ----------------- .../version-0.5/interactionmanager.md | 82 -- .../intro-react-native-components.md | 75 -- .../version-0.5/javascript-environment.md | 90 -- .../versioned_docs/version-0.5/keyboard.md | 114 --- .../version-0.5/keyboardavoidingview.md | 76 -- .../version-0.5/layout-props.md | 300 ------- .../version-0.5/layoutanimation.md | 80 -- .../version-0.5/linking-libraries-ios.md | 65 -- website/versioned_docs/version-0.5/linking.md | 209 ----- .../versioned_docs/version-0.5/listview.md | 299 ------- .../version-0.5/listviewdatasource.md | 205 ----- .../version-0.5/maskedviewios.md | 54 -- website/versioned_docs/version-0.5/modal.md | 146 --- .../version-0.5/more-resources.md | 44 - .../version-0.5/native-components-android.md | 188 ---- .../version-0.5/native-components-ios.md | 512 ----------- .../version-0.5/native-modules-android.md | 469 ---------- .../version-0.5/native-modules-ios.md | 504 ----------- .../version-0.5/native-modules-setup.md | 27 - .../versioned_docs/version-0.5/navigation.md | 123 --- .../versioned_docs/version-0.5/navigator.md | 470 ---------- .../version-0.5/navigatorios.md | 241 ----- website/versioned_docs/version-0.5/netinfo.md | 58 -- website/versioned_docs/version-0.5/network.md | 193 ---- .../optimizing-flatlist-configuration.md | 152 ---- .../version-0.5/panresponder.md | 130 --- .../versioned_docs/version-0.5/performance.md | 431 --------- .../version-0.5/permissionsandroid.md | 128 --- .../versioned_docs/version-0.5/picker-item.md | 52 -- .../version-0.5/picker-style-props.md | 24 - website/versioned_docs/version-0.5/picker.md | 114 --- .../versioned_docs/version-0.5/pickerios.md | 42 - .../versioned_docs/version-0.5/pixelratio.md | 90 -- .../version-0.5/platform-specific-code.md | 124 --- .../version-0.5/progressbarandroid.md | 108 --- .../version-0.5/progressviewios.md | 81 -- website/versioned_docs/version-0.5/props.md | 62 -- .../version-0.5/pushnotificationios.md | 167 ---- .../version-0.5/refreshcontrol.md | 164 ---- .../removing-default-permissions.md | 55 -- .../version-0.5/running-on-device.md | 317 ------- .../version-0.5/running-on-simulator-ios.md | 15 - .../versioned_docs/version-0.5/scrollview.md | 392 -------- .../versioned_docs/version-0.5/sectionlist.md | 381 -------- .../version-0.5/segmentedcontrolios.md | 91 -- .../versioned_docs/version-0.5/settings.md | 58 -- .../version-0.5/shadow-props.md | 56 -- website/versioned_docs/version-0.5/share.md | 76 -- .../version-0.5/signed-apk-android.md | 145 --- website/versioned_docs/version-0.5/slider.md | 246 ----- .../version-0.5/snapshotviewios.md | 31 - website/versioned_docs/version-0.5/state.md | 60 -- .../versioned_docs/version-0.5/statusbar.md | 262 ------ .../version-0.5/statusbarios.md | 39 - website/versioned_docs/version-0.5/style.md | 46 - .../versioned_docs/version-0.5/stylesheet.md | 60 -- website/versioned_docs/version-0.5/switch.md | 96 -- .../versioned_docs/version-0.5/systrace.md | 158 ---- .../version-0.5/tabbarios-item.md | 100 --- .../versioned_docs/version-0.5/tabbarios.md | 21 - .../version-0.5/text-style-props.md | 102 --- website/versioned_docs/version-0.5/text.md | 184 ---- .../versioned_docs/version-0.5/textinput.md | 342 ------- .../version-0.5/timepickerandroid.md | 76 -- website/versioned_docs/version-0.5/timers.md | 50 -- .../version-0.5/toastandroid.md | 123 --- .../version-0.5/toolbarandroid.md | 209 ----- .../version-0.5/touchablehighlight.md | 74 -- .../version-0.5/touchablenativefeedback.md | 117 --- .../version-0.5/touchableopacity.md | 54 -- .../version-0.5/touchablewithoutfeedback.md | 52 -- .../versioned_docs/version-0.5/transforms.md | 75 -- .../version-0.5/troubleshooting.md | 113 --- .../versioned_docs/version-0.5/tutorial.md | 46 - .../versioned_docs/version-0.5/upgrading.md | 124 --- .../version-0.5/using-a-listview.md | 102 --- .../version-0.5/using-a-scrollview.md | 60 -- .../versioned_docs/version-0.5/vibration.md | 76 -- .../version-0.5/vibrationios.md | 27 - .../version-0.5/view-style-props.md | 165 ---- website/versioned_docs/version-0.5/view.md | 507 ----------- .../version-0.5/viewpagerandroid.md | 169 ---- .../version-0.5/virtualizedlist.md | 531 ----------- website/versioned_docs/version-0.5/webview.md | 208 ----- .../version-0.50/actionsheetios.md | 56 -- .../version-0.50/activityindicator.md | 100 --- .../versioned_docs/version-0.50/alertios.md | 202 ----- .../versioned_docs/version-0.50/animated.md | 381 -------- website/versioned_docs/version-0.50/button.md | 98 -- .../versioned_docs/version-0.50/cameraroll.md | 137 --- .../versioned_docs/version-0.50/checkbox.md | 75 -- .../versioned_docs/version-0.50/flatlist.md | 209 ----- .../version-0.50/geolocation.md | 122 --- website/versioned_docs/version-0.50/image.md | 413 --------- .../version-0.50/maskedviewios.md | 53 -- website/versioned_docs/version-0.50/modal.md | 146 --- .../version-0.50/progressbarandroid.md | 109 --- .../version-0.50/safeareaview.md | 25 - .../versioned_docs/version-0.50/scrollview.md | 653 -------------- .../version-0.50/sectionlist.md | 113 --- .../version-0.50/segmentedcontrolios.md | 107 --- website/versioned_docs/version-0.50/text.md | 473 ---------- .../versioned_docs/version-0.50/textinput.md | 713 --------------- .../version-0.50/timepickerandroid.md | 76 -- .../version-0.50/toastandroid.md | 117 --- .../version-0.50/touchablehighlight.md | 178 ---- .../version-0.50/touchableopacity.md | 135 --- .../version-0.50/viewpagerandroid.md | 170 ---- .../version-0.50/virtualizedlist.md | 206 ----- .../versioned_docs/version-0.50/webview.md | 411 --------- .../version-0.51/actionsheetios.md | 70 -- .../versioned_docs/version-0.51/animated.md | 381 -------- website/versioned_docs/version-0.51/button.md | 109 --- website/versioned_docs/version-0.51/easing.md | 265 ------ .../versioned_docs/version-0.51/flatlist.md | 209 ----- website/versioned_docs/version-0.51/image.md | 413 --------- .../version-0.51/layout-props.md | 655 -------------- .../versioned_docs/version-0.51/netinfo.md | 191 ---- .../versioned_docs/version-0.51/scrollview.md | 598 ------------- .../version-0.51/sectionlist.md | 122 --- website/versioned_docs/version-0.51/share.md | 72 -- website/versioned_docs/version-0.51/text.md | 473 ---------- .../versioned_docs/version-0.51/textinput.md | 743 --------------- .../version-0.51/touchableopacity.md | 146 --- .../version-0.51/view-style-props.md | 248 ------ .../version-0.51/viewpagerandroid.md | 170 ---- .../version-0.52/actionsheetios.md | 70 -- website/versioned_docs/version-0.52/alert.md | 76 -- .../versioned_docs/version-0.52/animated.md | 381 -------- .../version-0.52/datepickerios.md | 168 ---- .../versioned_docs/version-0.52/flatlist.md | 560 ------------ .../version-0.52/keyboardavoidingview.md | 83 -- .../version-0.52/layout-props.md | 657 -------------- .../versioned_docs/version-0.52/linking.md | 205 ----- .../version-0.52/maskedviewios.md | 71 -- website/versioned_docs/version-0.52/modal.md | 209 ----- .../version-0.52/refreshcontrol.md | 165 ---- .../version-0.52/sectionlist.md | 396 -------- .../version-0.52/segmentedcontrolios.md | 109 --- .../versioned_docs/version-0.52/stylesheet.md | 170 ---- website/versioned_docs/version-0.52/switch.md | 97 -- .../version-0.52/virtualizedlist.md | 485 ---------- .../versioned_docs/version-0.52/webview.md | 411 --------- .../versioned_docs/version-0.53/appstate.md | 107 --- .../version-0.53/backandroid.md | 41 - .../versioned_docs/version-0.53/cameraroll.md | 137 --- .../version-0.53/geolocation.md | 122 --- website/versioned_docs/version-0.53/image.md | 413 --------- website/versioned_docs/version-0.53/modal.md | 210 ----- .../versioned_docs/version-0.53/scrollview.md | 618 ------------- .../versioned_docs/version-0.53/statusbar.md | 253 ------ .../versioned_docs/version-0.53/stylesheet.md | 174 ---- .../versioned_docs/version-0.53/textinput.md | 754 ---------------- .../versioned_docs/version-0.53/webview.md | 413 --------- .../version-0.54/activityindicator.md | 100 --- .../versioned_docs/version-0.54/appstate.md | 103 --- .../versioned_docs/version-0.54/cameraroll.md | 146 --- .../versioned_docs/version-0.54/flatlist.md | 560 ------------ .../version-0.54/geolocation.md | 166 ---- website/versioned_docs/version-0.54/image.md | 486 ---------- .../version-0.54/keyboardavoidingview.md | 104 --- .../versioned_docs/version-0.54/linking.md | 217 ----- website/versioned_docs/version-0.54/modal.md | 195 ---- .../versioned_docs/version-0.54/netinfo.md | 165 ---- .../version-0.54/permissionsandroid.md | 145 --- .../version-0.54/pushnotificationios.md | 479 ---------- .../version-0.54/sectionlist.md | 394 -------- .../versioned_docs/version-0.54/stylesheet.md | 176 ---- .../versioned_docs/version-0.54/textinput.md | 744 ---------------- .../versioned_docs/version-0.54/vibration.md | 80 -- .../versioned_docs/version-0.55/animated.md | 383 -------- .../versioned_docs/version-0.55/appstate.md | 103 --- website/versioned_docs/version-0.55/easing.md | 261 ------ .../versioned_docs/version-0.55/flatlist.md | 608 ------------- website/versioned_docs/version-0.55/image.md | 495 ---------- .../version-0.55/inputaccessoryview.md | 87 -- .../versioned_docs/version-0.55/keyboard.md | 114 --- .../version-0.55/keyboardavoidingview.md | 104 --- .../version-0.55/layout-props.md | 657 -------------- .../version-0.55/layoutanimation.md | 85 -- website/versioned_docs/version-0.55/modal.md | 195 ---- .../versioned_docs/version-0.55/netinfo.md | 165 ---- .../version-0.55/permissionsandroid.md | 155 ---- website/versioned_docs/version-0.55/picker.md | 116 --- .../version-0.55/sectionlist.md | 409 --------- .../versioned_docs/version-0.55/stylesheet.md | 174 ---- website/versioned_docs/version-0.55/text.md | 479 ---------- .../versioned_docs/version-0.55/textinput.md | 732 --------------- .../version-0.55/touchablehighlight.md | 178 ---- .../version-0.55/touchableopacity.md | 148 --- website/versioned_docs/version-0.55/view.md | 509 ----------- .../version-0.55/virtualizedlist.md | 485 ---------- .../versioned_docs/version-0.55/webview.md | 424 --------- .../versioned_docs/version-0.56/animated.md | 397 --------- .../version-0.56/asyncstorage.md | 375 -------- .../version-0.56/backhandler.md | 96 -- .../versioned_docs/version-0.56/flatlist.md | 608 ------------- .../version-0.56/geolocation.md | 168 ---- website/versioned_docs/version-0.56/image.md | 491 ---------- .../version-0.56/inputaccessoryview.md | 87 -- .../version-0.56/keyboardavoidingview.md | 104 --- .../version-0.56/layout-props.md | 657 -------------- .../version-0.56/navigatorios.md | 443 --------- .../version-0.56/panresponder.md | 131 --- .../version-0.56/permissionsandroid.md | 155 ---- .../version-0.56/progressbarandroid.md | 129 --- .../version-0.56/pushnotificationios.md | 479 ---------- .../version-0.56/refreshcontrol.md | 163 ---- .../versioned_docs/version-0.56/scrollview.md | 633 ------------- .../version-0.56/sectionlist.md | 409 --------- website/versioned_docs/version-0.56/slider.md | 194 ---- .../versioned_docs/version-0.56/systrace.md | 138 --- .../version-0.56/text-style-props.md | 189 ---- website/versioned_docs/version-0.56/text.md | 457 ---------- .../versioned_docs/version-0.56/textinput.md | 776 ---------------- .../versioned_docs/version-0.56/vibration.md | 80 -- .../version-0.56/viewpagerandroid.md | 196 ---- .../versioned_docs/version-0.56/webview.md | 484 ---------- .../version-0.57/accessibilityinfo.md | 123 --- .../versioned_docs/version-0.57/animated.md | 419 --------- .../version-0.57/appregistry.md | 170 ---- .../version-0.57/geolocation.md | 168 ---- website/versioned_docs/version-0.57/image.md | 490 ---------- .../version-0.57/imageeditor.md | 41 - .../version-0.57/keyboardavoidingview.md | 74 -- .../version-0.57/layout-props.md | 657 -------------- website/versioned_docs/version-0.57/modal.md | 202 ----- .../version-0.57/navigatorios.md | 441 --------- .../version-0.57/out-of-tree-platforms.md | 33 - .../versioned_docs/version-0.57/pixelratio.md | 105 --- .../version-0.57/refreshcontrol.md | 163 ---- .../version-0.57/safeareaview.md | 25 - .../versioned_docs/version-0.57/statusbar.md | 248 ------ website/versioned_docs/version-0.57/switch.md | 110 --- .../version-0.57/text-style-props.md | 189 ---- website/versioned_docs/version-0.57/text.md | 479 ---------- .../versioned_docs/version-0.57/textinput.md | 787 ---------------- .../version-0.57/touchablewithoutfeedback.md | 242 ----- website/versioned_docs/version-0.57/view.md | 588 ------------ .../version-0.57/viewpagerandroid.md | 196 ---- .../version-0.57/virtualizedlist.md | 485 ---------- .../versioned_docs/version-0.57/webview.md | 535 ----------- .../version-0.58/actionsheetios.md | 74 -- website/versioned_docs/version-0.58/alert.md | 83 -- .../versioned_docs/version-0.58/alertios.md | 200 ----- .../version-0.58/appregistry.md | 170 ---- .../versioned_docs/version-0.58/appstate.md | 108 --- .../version-0.58/asyncstorage.md | 378 -------- website/versioned_docs/version-0.58/button.md | 109 --- .../versioned_docs/version-0.58/cameraroll.md | 144 --- .../version-0.58/communication-android.md | 111 --- .../version-0.58/datepickerandroid.md | 83 -- .../version-0.58/datepickerios.md | 164 ---- .../versioned_docs/version-0.58/dimensions.md | 68 -- .../version-0.58/drawerlayoutandroid.md | 202 ----- .../versioned_docs/version-0.58/flatlist.md | 611 ------------- .../version-0.58/geolocation.md | 172 ---- .../version-0.58/image-style-props.md | 149 ---- website/versioned_docs/version-0.58/image.md | 503 ----------- .../version-0.58/imagebackground.md | 54 -- .../version-0.58/inputaccessoryview.md | 92 -- .../version-0.58/interactionmanager.md | 97 -- .../versioned_docs/version-0.58/keyboard.md | 116 --- .../version-0.58/keyboardavoidingview.md | 77 -- .../version-0.58/layout-props.md | 657 -------------- .../version-0.58/layoutanimation.md | 131 --- .../versioned_docs/version-0.58/linking.md | 221 ----- .../versioned_docs/version-0.58/listview.md | 301 ------- .../version-0.58/listviewdatasource.md | 205 ----- .../version-0.58/maskedviewios.md | 90 -- .../version-0.58/navigatorios.md | 9 - .../versioned_docs/version-0.58/netinfo.md | 175 ---- .../version-0.58/out-of-tree-platforms.md | 42 - .../version-0.58/panresponder.md | 130 --- .../version-0.58/permissionsandroid.md | 169 ---- .../version-0.58/picker-item.md | 52 -- website/versioned_docs/version-0.58/picker.md | 120 --- .../versioned_docs/version-0.58/pixelratio.md | 106 --- .../version-0.58/progressbarandroid.md | 132 --- .../version-0.58/pushnotificationios.md | 479 ---------- .../version-0.58/refreshcontrol.md | 165 ---- .../versioned_docs/version-0.58/scrollview.md | 662 -------------- .../version-0.58/sectionlist.md | 409 --------- .../version-0.58/segmentedcontrolios.md | 111 --- website/versioned_docs/version-0.58/share.md | 110 --- .../versioned_docs/version-0.58/statusbar.md | 245 ----- .../versioned_docs/version-0.58/stylesheet.md | 168 ---- website/versioned_docs/version-0.58/switch.md | 110 --- .../version-0.58/text-style-props.md | 189 ---- website/versioned_docs/version-0.58/text.md | 505 ----------- .../versioned_docs/version-0.58/textinput.md | 811 ----------------- .../version-0.58/timepickerandroid.md | 76 -- .../version-0.58/toastandroid.md | 181 ---- .../version-0.58/toolbarandroid.md | 210 ----- .../version-0.58/touchablehighlight.md | 178 ---- .../version-0.58/touchablenativefeedback.md | 112 --- .../version-0.58/touchableopacity.md | 157 ---- .../version-0.58/touchablewithoutfeedback.md | 251 ------ .../versioned_docs/version-0.58/vibration.md | 80 -- .../version-0.58/view-style-props.md | 251 ------ .../version-0.58/viewpagerandroid.md | 196 ---- .../versioned_docs/version-0.58/webview.md | 503 ----------- .../version-0.59/appregistry.md | 192 ---- .../version-0.59/asyncstorage.md | 380 -------- .../version-0.59/image-style-props.md | 149 ---- .../versioned_docs/version-0.59/imagestore.md | 62 -- .../versioned_docs/version-0.59/linking.md | 227 ----- .../version-0.59/maskedviewios.md | 92 -- .../versioned_docs/version-0.59/netinfo.md | 177 ---- .../versioned_docs/version-0.59/publishing.md | 83 -- .../versioned_docs/version-0.59/scrollview.md | 677 -------------- website/versioned_docs/version-0.59/share.md | 106 --- website/versioned_docs/version-0.59/slider.md | 196 ---- .../versioned_docs/version-0.59/stylesheet.md | 167 ---- website/versioned_docs/version-0.59/text.md | 505 ----------- .../versioned_docs/version-0.59/textinput.md | 843 ------------------ .../version-0.59/touchablehighlight.md | 178 ---- website/versioned_docs/version-0.59/view.md | 599 ------------- .../version-0.59/viewpagerandroid.md | 198 ---- .../version-0.59/virtualizedlist.md | 485 ---------- website/versioned_docs/version-0.6/netinfo.md | 177 ---- .../versioned_docs/version-0.6/pixelratio.md | 105 --- .../version-0.6/progressviewios.md | 80 -- .../version-0.6/pushnotificationios.md | 176 ---- .../versioned_docs/version-0.6/scrollview.md | 392 -------- .../version-0.6/statusbarios.md | 30 - .../versioned_docs/version-0.6/tabbarios.md | 43 - .../versioned_docs/version-0.6/textinput.md | 342 ------- .../version-0.6/touchablehighlight.md | 96 -- .../version-0.6/touchableopacity.md | 58 -- .../version-0.6/touchablewithoutfeedback.md | 94 -- .../version-0.7/pushnotificationios.md | 189 ---- .../versioned_docs/version-0.7/scrollview.md | 394 -------- .../version-0.7/text-style-props.md | 93 -- website/versioned_docs/version-0.7/text.md | 182 ---- .../versioned_docs/version-0.7/textinput.md | 375 -------- website/versioned_docs/version-0.7/webview.md | 219 ----- website/versioned_docs/version-0.8/image.md | 209 ----- .../version-0.8/navigatorios.md | 276 ------ .../versioned_docs/version-0.8/scrollview.md | 396 -------- .../version-0.8/text-style-props.md | 120 --- website/versioned_docs/version-0.8/text.md | 188 ---- .../version-0.8/view-style-props.md | 174 ---- website/versioned_docs/version-0.8/webview.md | 221 ----- .../versioned_docs/version-0.9/cameraroll.md | 48 - .../version-0.9/image-style-props.md | 84 -- website/versioned_docs/version-0.9/image.md | 205 ----- .../version-0.9/navigatorios.md | 287 ------ .../versioned_docs/version-0.9/pixelratio.md | 105 --- .../version-0.9/pushnotificationios.md | 220 ----- .../versioned_docs/version-0.9/scrollview.md | 427 --------- .../version-0.9/statusbarios.md | 39 - .../versioned_docs/version-0.9/tabbarios.md | 54 -- .../version-0.9/text-style-props.md | 124 --- website/versioned_docs/version-0.9/text.md | 192 ---- .../versioned_docs/version-0.9/textinput.md | 392 -------- .../versioned_docs/version-0.9/transforms.md | 75 -- .../version-0.9/view-style-props.md | 183 ---- .../version-0.10-sidebars.json | 93 -- .../version-0.11-sidebars.json | 99 -- .../version-0.12-sidebars.json | 102 --- .../version-0.13-sidebars.json | 104 --- .../version-0.14-sidebars.json | 105 --- .../version-0.15-sidebars.json | 106 --- .../version-0.18-sidebars.json | 109 --- .../version-0.19-sidebars.json | 112 --- .../version-0.20-sidebars.json | 117 --- .../version-0.22-sidebars.json | 118 --- .../version-0.24-sidebars.json | 119 --- .../version-0.26-sidebars.json | 121 --- .../version-0.28-sidebars.json | 122 --- .../version-0.29-sidebars.json | 123 --- .../version-0.32-sidebars.json | 124 --- .../version-0.33-sidebars.json | 125 --- .../version-0.36-sidebars.json | 126 --- .../version-0.37-sidebars.json | 131 --- .../version-0.43-sidebars.json | 139 --- .../version-0.44-sidebars.json | 139 --- .../version-0.46-sidebars.json | 140 --- .../version-0.48-sidebars.json | 141 --- .../version-0.5-sidebars.json | 91 -- .../version-0.50-sidebars.json | 142 --- .../version-0.52-sidebars.json | 142 --- .../version-0.53-sidebars.json | 142 --- .../version-0.54-sidebars.json | 142 --- .../version-0.55-sidebars.json | 143 --- .../version-0.56-sidebars.json | 143 --- .../version-0.57-sidebars.json | 144 --- .../version-0.59-sidebars.json | 146 --- .../version-0.6-sidebars.json | 92 -- website/versions.json | 62 +- 990 files changed, 1 insertion(+), 222682 deletions(-) delete mode 100644 website/versioned_docs/version-0.10/modal.md delete mode 100644 website/versioned_docs/version-0.10/text.md delete mode 100644 website/versioned_docs/version-0.10/textinput.md delete mode 100644 website/versioned_docs/version-0.11/drawerlayoutandroid.md delete mode 100644 website/versioned_docs/version-0.11/image.md delete mode 100644 website/versioned_docs/version-0.11/layoutanimation.md delete mode 100644 website/versioned_docs/version-0.11/modal.md delete mode 100644 website/versioned_docs/version-0.11/progressbarandroid.md delete mode 100644 website/versioned_docs/version-0.11/scrollview.md delete mode 100644 website/versioned_docs/version-0.11/toastandroid.md delete mode 100644 website/versioned_docs/version-0.11/toolbarandroid.md delete mode 100644 website/versioned_docs/version-0.11/touchablenativefeedback.md delete mode 100644 website/versioned_docs/version-0.12/animated.md delete mode 100644 website/versioned_docs/version-0.12/drawerlayoutandroid.md delete mode 100644 website/versioned_docs/version-0.12/easing.md delete mode 100644 website/versioned_docs/version-0.12/imagepickerios.md delete mode 100644 website/versioned_docs/version-0.12/modal.md delete mode 100644 website/versioned_docs/version-0.12/scrollview.md delete mode 100644 website/versioned_docs/version-0.12/textinput.md delete mode 100644 website/versioned_docs/version-0.12/touchablehighlight.md delete mode 100644 website/versioned_docs/version-0.12/touchablenativefeedback.md delete mode 100644 website/versioned_docs/version-0.12/touchableopacity.md delete mode 100644 website/versioned_docs/version-0.12/touchablewithoutfeedback.md delete mode 100644 website/versioned_docs/version-0.12/transforms.md delete mode 100644 website/versioned_docs/version-0.13/drawerlayoutandroid.md delete mode 100644 website/versioned_docs/version-0.13/modal.md delete mode 100644 website/versioned_docs/version-0.13/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.13/scrollview.md delete mode 100644 website/versioned_docs/version-0.13/switch.md delete mode 100644 website/versioned_docs/version-0.13/textinput.md delete mode 100644 website/versioned_docs/version-0.13/toolbarandroid.md delete mode 100644 website/versioned_docs/version-0.13/touchablehighlight.md delete mode 100644 website/versioned_docs/version-0.13/transforms.md delete mode 100644 website/versioned_docs/version-0.13/view-style-props.md delete mode 100644 website/versioned_docs/version-0.13/viewpagerandroid.md delete mode 100644 website/versioned_docs/version-0.14/modal.md delete mode 100644 website/versioned_docs/version-0.14/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.14/snapshotviewios.md delete mode 100644 website/versioned_docs/version-0.14/textinput.md delete mode 100644 website/versioned_docs/version-0.14/toolbarandroid.md delete mode 100644 website/versioned_docs/version-0.14/transforms.md delete mode 100644 website/versioned_docs/version-0.15/asyncstorage.md delete mode 100644 website/versioned_docs/version-0.15/cameraroll.md delete mode 100644 website/versioned_docs/version-0.15/geolocation.md delete mode 100644 website/versioned_docs/version-0.15/modal.md delete mode 100644 website/versioned_docs/version-0.15/progressbarandroid.md delete mode 100644 website/versioned_docs/version-0.15/textinput.md delete mode 100644 website/versioned_docs/version-0.15/webview.md delete mode 100644 website/versioned_docs/version-0.16/animated.md delete mode 100644 website/versioned_docs/version-0.16/datepickerios.md delete mode 100644 website/versioned_docs/version-0.16/drawerlayoutandroid.md delete mode 100644 website/versioned_docs/version-0.16/geolocation.md delete mode 100644 website/versioned_docs/version-0.16/layout-props.md delete mode 100644 website/versioned_docs/version-0.16/progressbarandroid.md delete mode 100644 website/versioned_docs/version-0.16/progressviewios.md delete mode 100644 website/versioned_docs/version-0.16/scrollview.md delete mode 100644 website/versioned_docs/version-0.16/segmentedcontrolios.md delete mode 100644 website/versioned_docs/version-0.16/snapshotviewios.md delete mode 100644 website/versioned_docs/version-0.16/switch.md delete mode 100644 website/versioned_docs/version-0.16/tabbarios-item.md delete mode 100644 website/versioned_docs/version-0.16/tabbarios.md delete mode 100644 website/versioned_docs/version-0.16/textinput.md delete mode 100644 website/versioned_docs/version-0.16/toastandroid.md delete mode 100644 website/versioned_docs/version-0.16/toolbarandroid.md delete mode 100644 website/versioned_docs/version-0.16/touchablewithoutfeedback.md delete mode 100644 website/versioned_docs/version-0.16/view-style-props.md delete mode 100644 website/versioned_docs/version-0.16/viewpagerandroid.md delete mode 100644 website/versioned_docs/version-0.16/webview.md delete mode 100644 website/versioned_docs/version-0.17/asyncstorage.md delete mode 100644 website/versioned_docs/version-0.17/image.md delete mode 100644 website/versioned_docs/version-0.17/modal.md delete mode 100644 website/versioned_docs/version-0.17/navigatorios.md delete mode 100644 website/versioned_docs/version-0.17/netinfo.md delete mode 100644 website/versioned_docs/version-0.17/scrollview.md delete mode 100644 website/versioned_docs/version-0.17/text.md delete mode 100644 website/versioned_docs/version-0.17/textinput.md delete mode 100644 website/versioned_docs/version-0.17/toolbarandroid.md delete mode 100644 website/versioned_docs/version-0.17/view-style-props.md delete mode 100644 website/versioned_docs/version-0.17/webview.md delete mode 100644 website/versioned_docs/version-0.18/animated.md delete mode 100644 website/versioned_docs/version-0.18/cameraroll.md delete mode 100644 website/versioned_docs/version-0.18/dimensions.md delete mode 100644 website/versioned_docs/version-0.18/drawerlayoutandroid.md delete mode 100644 website/versioned_docs/version-0.18/geolocation.md delete mode 100644 website/versioned_docs/version-0.18/image-style-props.md delete mode 100644 website/versioned_docs/version-0.18/image.md delete mode 100644 website/versioned_docs/version-0.18/imageeditor.md delete mode 100644 website/versioned_docs/version-0.18/imagestore.md delete mode 100644 website/versioned_docs/version-0.18/interactionmanager.md delete mode 100644 website/versioned_docs/version-0.18/navigatorios.md delete mode 100644 website/versioned_docs/version-0.18/progressbarandroid.md delete mode 100644 website/versioned_docs/version-0.18/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.18/refreshcontrol.md delete mode 100644 website/versioned_docs/version-0.18/scrollview.md delete mode 100644 website/versioned_docs/version-0.18/switch.md delete mode 100644 website/versioned_docs/version-0.18/tabbarios-item.md delete mode 100644 website/versioned_docs/version-0.18/tabbarios.md delete mode 100644 website/versioned_docs/version-0.18/text-style-props.md delete mode 100644 website/versioned_docs/version-0.18/text.md delete mode 100644 website/versioned_docs/version-0.18/toolbarandroid.md delete mode 100644 website/versioned_docs/version-0.18/touchablehighlight.md delete mode 100644 website/versioned_docs/version-0.18/view-style-props.md delete mode 100644 website/versioned_docs/version-0.18/viewpagerandroid.md delete mode 100644 website/versioned_docs/version-0.18/webview.md delete mode 100644 website/versioned_docs/version-0.19/animated.md delete mode 100644 website/versioned_docs/version-0.19/appstate.md delete mode 100644 website/versioned_docs/version-0.19/image.md delete mode 100644 website/versioned_docs/version-0.19/picker.md delete mode 100644 website/versioned_docs/version-0.19/pixelratio.md delete mode 100644 website/versioned_docs/version-0.19/progressbarandroid.md delete mode 100644 website/versioned_docs/version-0.19/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.19/scrollview.md delete mode 100644 website/versioned_docs/version-0.19/stylesheet.md delete mode 100644 website/versioned_docs/version-0.19/text-style-props.md delete mode 100644 website/versioned_docs/version-0.19/text.md delete mode 100644 website/versioned_docs/version-0.19/textinput.md delete mode 100644 website/versioned_docs/version-0.19/touchablewithoutfeedback.md delete mode 100644 website/versioned_docs/version-0.19/view-style-props.md delete mode 100644 website/versioned_docs/version-0.19/webview.md delete mode 100644 website/versioned_docs/version-0.20/cameraroll.md delete mode 100644 website/versioned_docs/version-0.20/clipboard.md delete mode 100644 website/versioned_docs/version-0.20/datepickerandroid.md delete mode 100644 website/versioned_docs/version-0.20/image-style-props.md delete mode 100644 website/versioned_docs/version-0.20/image.md delete mode 100644 website/versioned_docs/version-0.20/imagestore.md delete mode 100644 website/versioned_docs/version-0.20/layout-props.md delete mode 100644 website/versioned_docs/version-0.20/linking.md delete mode 100644 website/versioned_docs/version-0.20/picker.md delete mode 100644 website/versioned_docs/version-0.20/refreshcontrol.md delete mode 100644 website/versioned_docs/version-0.20/scrollview.md delete mode 100644 website/versioned_docs/version-0.20/statusbar.md delete mode 100644 website/versioned_docs/version-0.20/text.md delete mode 100644 website/versioned_docs/version-0.20/textinput.md delete mode 100644 website/versioned_docs/version-0.20/timepickerandroid.md delete mode 100644 website/versioned_docs/version-0.20/transforms.md delete mode 100644 website/versioned_docs/version-0.20/viewpagerandroid.md delete mode 100644 website/versioned_docs/version-0.20/webview.md delete mode 100644 website/versioned_docs/version-0.21/geolocation.md delete mode 100644 website/versioned_docs/version-0.21/linking.md delete mode 100644 website/versioned_docs/version-0.21/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.21/scrollview.md delete mode 100644 website/versioned_docs/version-0.22/actionsheetios.md delete mode 100644 website/versioned_docs/version-0.22/animated.md delete mode 100644 website/versioned_docs/version-0.22/drawerlayoutandroid.md delete mode 100644 website/versioned_docs/version-0.22/modal.md delete mode 100644 website/versioned_docs/version-0.22/netinfo.md delete mode 100644 website/versioned_docs/version-0.22/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.22/statusbar.md delete mode 100644 website/versioned_docs/version-0.22/statusbarios.md delete mode 100644 website/versioned_docs/version-0.22/textinput.md delete mode 100644 website/versioned_docs/version-0.22/touchablewithoutfeedback.md delete mode 100644 website/versioned_docs/version-0.22/vibration.md delete mode 100644 website/versioned_docs/version-0.22/vibrationios.md delete mode 100644 website/versioned_docs/version-0.22/webview.md delete mode 100644 website/versioned_docs/version-0.23/animated.md delete mode 100644 website/versioned_docs/version-0.23/asyncstorage.md delete mode 100644 website/versioned_docs/version-0.23/dimensions.md delete mode 100644 website/versioned_docs/version-0.23/drawerlayoutandroid.md delete mode 100644 website/versioned_docs/version-0.23/easing.md delete mode 100644 website/versioned_docs/version-0.23/image.md delete mode 100644 website/versioned_docs/version-0.23/modal.md delete mode 100644 website/versioned_docs/version-0.23/refreshcontrol.md delete mode 100644 website/versioned_docs/version-0.23/scrollview.md delete mode 100644 website/versioned_docs/version-0.23/segmentedcontrolios.md delete mode 100644 website/versioned_docs/version-0.23/textinput.md delete mode 100644 website/versioned_docs/version-0.23/webview.md delete mode 100644 website/versioned_docs/version-0.24/actionsheetios.md delete mode 100644 website/versioned_docs/version-0.24/drawerlayoutandroid.md delete mode 100644 website/versioned_docs/version-0.24/modal.md delete mode 100644 website/versioned_docs/version-0.24/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.24/scrollview.md delete mode 100644 website/versioned_docs/version-0.24/slider.md delete mode 100644 website/versioned_docs/version-0.24/statusbar.md delete mode 100644 website/versioned_docs/version-0.24/switch.md delete mode 100644 website/versioned_docs/version-0.24/textinput.md delete mode 100644 website/versioned_docs/version-0.24/vibration.md delete mode 100644 website/versioned_docs/version-0.25/asyncstorage.md delete mode 100644 website/versioned_docs/version-0.25/drawerlayoutandroid.md delete mode 100644 website/versioned_docs/version-0.25/geolocation.md delete mode 100644 website/versioned_docs/version-0.25/image-style-props.md delete mode 100644 website/versioned_docs/version-0.25/image.md delete mode 100644 website/versioned_docs/version-0.25/navigatorios.md delete mode 100644 website/versioned_docs/version-0.25/refreshcontrol.md delete mode 100644 website/versioned_docs/version-0.25/scrollview.md delete mode 100644 website/versioned_docs/version-0.25/statusbar.md delete mode 100644 website/versioned_docs/version-0.25/text-style-props.md delete mode 100644 website/versioned_docs/version-0.25/text.md delete mode 100644 website/versioned_docs/version-0.25/textinput.md delete mode 100644 website/versioned_docs/version-0.25/timepickerandroid.md delete mode 100644 website/versioned_docs/version-0.25/touchablehighlight.md delete mode 100644 website/versioned_docs/version-0.25/touchablenativefeedback.md delete mode 100644 website/versioned_docs/version-0.25/touchableopacity.md delete mode 100644 website/versioned_docs/version-0.25/viewpagerandroid.md delete mode 100644 website/versioned_docs/version-0.25/webview.md delete mode 100644 website/versioned_docs/version-0.26/linking.md delete mode 100644 website/versioned_docs/version-0.26/modal.md delete mode 100644 website/versioned_docs/version-0.26/panresponder.md delete mode 100644 website/versioned_docs/version-0.26/pickerios.md delete mode 100644 website/versioned_docs/version-0.26/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.26/scrollview.md delete mode 100644 website/versioned_docs/version-0.26/tabbarios-item.md delete mode 100644 website/versioned_docs/version-0.26/tabbarios.md delete mode 100644 website/versioned_docs/version-0.26/text-style-props.md delete mode 100644 website/versioned_docs/version-0.26/text.md delete mode 100644 website/versioned_docs/version-0.26/touchableopacity.md delete mode 100644 website/versioned_docs/version-0.26/transforms.md delete mode 100644 website/versioned_docs/version-0.26/viewpagerandroid.md delete mode 100644 website/versioned_docs/version-0.26/webview.md delete mode 100644 website/versioned_docs/version-0.27/drawerlayoutandroid.md delete mode 100644 website/versioned_docs/version-0.27/image-style-props.md delete mode 100644 website/versioned_docs/version-0.27/image.md delete mode 100644 website/versioned_docs/version-0.27/navigatorios.md delete mode 100644 website/versioned_docs/version-0.27/netinfo.md delete mode 100644 website/versioned_docs/version-0.27/refreshcontrol.md delete mode 100644 website/versioned_docs/version-0.27/scrollview.md delete mode 100644 website/versioned_docs/version-0.27/statusbarios.md delete mode 100644 website/versioned_docs/version-0.27/textinput.md delete mode 100644 website/versioned_docs/version-0.27/viewpagerandroid.md delete mode 100644 website/versioned_docs/version-0.28/actionsheetios.md delete mode 100644 website/versioned_docs/version-0.28/activityindicator.md delete mode 100644 website/versioned_docs/version-0.28/appstate.md delete mode 100644 website/versioned_docs/version-0.28/asyncstorage.md delete mode 100644 website/versioned_docs/version-0.28/image.md delete mode 100644 website/versioned_docs/version-0.28/linking.md delete mode 100644 website/versioned_docs/version-0.28/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.28/scrollview.md delete mode 100644 website/versioned_docs/version-0.28/tabbarios.md delete mode 100644 website/versioned_docs/version-0.29/asyncstorage.md delete mode 100644 website/versioned_docs/version-0.29/cameraroll.md delete mode 100644 website/versioned_docs/version-0.29/image.md delete mode 100644 website/versioned_docs/version-0.29/interactionmanager.md delete mode 100644 website/versioned_docs/version-0.29/keyboardavoidingview.md delete mode 100644 website/versioned_docs/version-0.29/layout-props.md delete mode 100644 website/versioned_docs/version-0.29/modal.md delete mode 100644 website/versioned_docs/version-0.29/navigatorios.md delete mode 100644 website/versioned_docs/version-0.29/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.29/refreshcontrol.md delete mode 100644 website/versioned_docs/version-0.29/statusbar.md delete mode 100644 website/versioned_docs/version-0.29/statusbarios.md delete mode 100644 website/versioned_docs/version-0.29/stylesheet.md delete mode 100644 website/versioned_docs/version-0.29/text.md delete mode 100644 website/versioned_docs/version-0.29/textinput.md delete mode 100644 website/versioned_docs/version-0.29/webview.md delete mode 100644 website/versioned_docs/version-0.30/activityindicator.md delete mode 100644 website/versioned_docs/version-0.30/datepickerios.md delete mode 100644 website/versioned_docs/version-0.30/drawerlayoutandroid.md delete mode 100644 website/versioned_docs/version-0.30/image-style-props.md delete mode 100644 website/versioned_docs/version-0.30/image.md delete mode 100644 website/versioned_docs/version-0.30/keyboardavoidingview.md delete mode 100644 website/versioned_docs/version-0.30/layout-props.md delete mode 100644 website/versioned_docs/version-0.30/modal.md delete mode 100644 website/versioned_docs/version-0.30/progressbarandroid.md delete mode 100644 website/versioned_docs/version-0.30/progressviewios.md delete mode 100644 website/versioned_docs/version-0.30/scrollview.md delete mode 100644 website/versioned_docs/version-0.30/segmentedcontrolios.md delete mode 100644 website/versioned_docs/version-0.30/shadow-props.md delete mode 100644 website/versioned_docs/version-0.30/slider.md delete mode 100644 website/versioned_docs/version-0.30/text-style-props.md delete mode 100644 website/versioned_docs/version-0.30/text.md delete mode 100644 website/versioned_docs/version-0.30/textinput.md delete mode 100644 website/versioned_docs/version-0.30/toolbarandroid.md delete mode 100644 website/versioned_docs/version-0.30/transforms.md delete mode 100644 website/versioned_docs/version-0.30/view-style-props.md delete mode 100644 website/versioned_docs/version-0.30/viewpagerandroid.md delete mode 100644 website/versioned_docs/version-0.31/asyncstorage.md delete mode 100644 website/versioned_docs/version-0.31/image.md delete mode 100644 website/versioned_docs/version-0.31/panresponder.md delete mode 100644 website/versioned_docs/version-0.31/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.31/text.md delete mode 100644 website/versioned_docs/version-0.31/textinput.md delete mode 100644 website/versioned_docs/version-0.31/toastandroid.md delete mode 100644 website/versioned_docs/version-0.31/touchablehighlight.md delete mode 100644 website/versioned_docs/version-0.31/touchableopacity.md delete mode 100644 website/versioned_docs/version-0.31/webview.md delete mode 100644 website/versioned_docs/version-0.32/activityindicator.md delete mode 100644 website/versioned_docs/version-0.32/image.md delete mode 100644 website/versioned_docs/version-0.32/keyboardavoidingview.md delete mode 100644 website/versioned_docs/version-0.32/layout-props.md delete mode 100644 website/versioned_docs/version-0.32/navigatorios.md delete mode 100644 website/versioned_docs/version-0.32/picker.md delete mode 100644 website/versioned_docs/version-0.32/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.32/scrollview.md delete mode 100644 website/versioned_docs/version-0.32/share.md delete mode 100644 website/versioned_docs/version-0.32/snapshotviewios.md delete mode 100644 website/versioned_docs/version-0.32/statusbar.md delete mode 100644 website/versioned_docs/version-0.32/tabbarios.md delete mode 100644 website/versioned_docs/version-0.32/textinput.md delete mode 100644 website/versioned_docs/version-0.32/viewpagerandroid.md delete mode 100644 website/versioned_docs/version-0.32/webview.md delete mode 100644 website/versioned_docs/version-0.33/image.md delete mode 100644 website/versioned_docs/version-0.33/layout-props.md delete mode 100644 website/versioned_docs/version-0.33/permissionsandroid.md delete mode 100644 website/versioned_docs/version-0.33/text-style-props.md delete mode 100644 website/versioned_docs/version-0.33/text.md delete mode 100644 website/versioned_docs/version-0.34/actionsheetios.md delete mode 100644 website/versioned_docs/version-0.34/animated.md delete mode 100644 website/versioned_docs/version-0.34/cameraroll.md delete mode 100644 website/versioned_docs/version-0.34/geolocation.md delete mode 100644 website/versioned_docs/version-0.34/image.md delete mode 100644 website/versioned_docs/version-0.34/keyboardavoidingview.md delete mode 100644 website/versioned_docs/version-0.34/layout-props.md delete mode 100644 website/versioned_docs/version-0.34/modal.md delete mode 100644 website/versioned_docs/version-0.34/navigatorios.md delete mode 100644 website/versioned_docs/version-0.34/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.34/switch.md delete mode 100644 website/versioned_docs/version-0.34/text-style-props.md delete mode 100644 website/versioned_docs/version-0.34/text.md delete mode 100644 website/versioned_docs/version-0.34/textinput.md delete mode 100644 website/versioned_docs/version-0.34/vibration.md delete mode 100644 website/versioned_docs/version-0.35/geolocation.md delete mode 100644 website/versioned_docs/version-0.35/image.md delete mode 100644 website/versioned_docs/version-0.35/permissionsandroid.md delete mode 100644 website/versioned_docs/version-0.35/toastandroid.md delete mode 100644 website/versioned_docs/version-0.36/animated.md delete mode 100644 website/versioned_docs/version-0.36/keyboard.md delete mode 100644 website/versioned_docs/version-0.36/layout-props.md delete mode 100644 website/versioned_docs/version-0.36/modal.md delete mode 100644 website/versioned_docs/version-0.36/scrollview.md delete mode 100644 website/versioned_docs/version-0.36/statusbar.md delete mode 100644 website/versioned_docs/version-0.36/textinput.md delete mode 100644 website/versioned_docs/version-0.36/touchablehighlight.md delete mode 100644 website/versioned_docs/version-0.36/touchablenativefeedback.md delete mode 100644 website/versioned_docs/version-0.36/view-style-props.md delete mode 100644 website/versioned_docs/version-0.37/activityindicator.md delete mode 100644 website/versioned_docs/version-0.37/alert.md delete mode 100644 website/versioned_docs/version-0.37/alertios.md delete mode 100644 website/versioned_docs/version-0.37/appregistry.md delete mode 100644 website/versioned_docs/version-0.37/button.md delete mode 100644 website/versioned_docs/version-0.37/cameraroll.md delete mode 100644 website/versioned_docs/version-0.37/datepickerios.md delete mode 100644 website/versioned_docs/version-0.37/drawerlayoutandroid.md delete mode 100644 website/versioned_docs/version-0.37/image-style-props.md delete mode 100644 website/versioned_docs/version-0.37/image.md delete mode 100644 website/versioned_docs/version-0.37/keyboardavoidingview.md delete mode 100644 website/versioned_docs/version-0.37/layout-props.md delete mode 100644 website/versioned_docs/version-0.37/modal.md delete mode 100644 website/versioned_docs/version-0.37/navigatorios.md delete mode 100644 website/versioned_docs/version-0.37/panresponder.md delete mode 100644 website/versioned_docs/version-0.37/progressbarandroid.md delete mode 100644 website/versioned_docs/version-0.37/progressviewios.md delete mode 100644 website/versioned_docs/version-0.37/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.37/scrollview.md delete mode 100644 website/versioned_docs/version-0.37/segmentedcontrolios.md delete mode 100644 website/versioned_docs/version-0.37/shadow-props.md delete mode 100644 website/versioned_docs/version-0.37/slider.md delete mode 100644 website/versioned_docs/version-0.37/systrace.md delete mode 100644 website/versioned_docs/version-0.37/text-style-props.md delete mode 100644 website/versioned_docs/version-0.37/text.md delete mode 100644 website/versioned_docs/version-0.37/textinput.md delete mode 100644 website/versioned_docs/version-0.37/toolbarandroid.md delete mode 100644 website/versioned_docs/version-0.37/touchablenativefeedback.md delete mode 100644 website/versioned_docs/version-0.37/transforms.md delete mode 100644 website/versioned_docs/version-0.37/view-style-props.md delete mode 100644 website/versioned_docs/version-0.37/webview.md delete mode 100644 website/versioned_docs/version-0.38/modal.md delete mode 100644 website/versioned_docs/version-0.38/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.38/statusbar.md delete mode 100644 website/versioned_docs/version-0.38/textinput.md delete mode 100644 website/versioned_docs/version-0.39/animated.md delete mode 100644 website/versioned_docs/version-0.39/geolocation.md delete mode 100644 website/versioned_docs/version-0.39/image.md delete mode 100644 website/versioned_docs/version-0.39/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.39/text.md delete mode 100644 website/versioned_docs/version-0.39/textinput.md delete mode 100644 website/versioned_docs/version-0.39/touchableopacity.md delete mode 100644 website/versioned_docs/version-0.39/touchablewithoutfeedback.md delete mode 100644 website/versioned_docs/version-0.40/datepickerandroid.md delete mode 100644 website/versioned_docs/version-0.40/layout-props.md delete mode 100644 website/versioned_docs/version-0.40/layoutanimation.md delete mode 100644 website/versioned_docs/version-0.40/panresponder.md delete mode 100644 website/versioned_docs/version-0.40/permissionsandroid.md delete mode 100644 website/versioned_docs/version-0.40/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.40/scrollview.md delete mode 100644 website/versioned_docs/version-0.40/stylesheet.md delete mode 100644 website/versioned_docs/version-0.40/tabbarios-item.md delete mode 100644 website/versioned_docs/version-0.40/tabbarios.md delete mode 100644 website/versioned_docs/version-0.40/text-style-props.md delete mode 100644 website/versioned_docs/version-0.40/text.md delete mode 100644 website/versioned_docs/version-0.40/textinput.md delete mode 100644 website/versioned_docs/version-0.41/alert.md delete mode 100644 website/versioned_docs/version-0.41/appregistry.md delete mode 100644 website/versioned_docs/version-0.41/cameraroll.md delete mode 100644 website/versioned_docs/version-0.41/image.md delete mode 100644 website/versioned_docs/version-0.41/modal.md delete mode 100644 website/versioned_docs/version-0.41/scrollview.md delete mode 100644 website/versioned_docs/version-0.41/tabbarios-item.md delete mode 100644 website/versioned_docs/version-0.41/text.md delete mode 100644 website/versioned_docs/version-0.41/textinput.md delete mode 100644 website/versioned_docs/version-0.41/touchablehighlight.md delete mode 100644 website/versioned_docs/version-0.41/touchableopacity.md delete mode 100644 website/versioned_docs/version-0.42/alertios.md delete mode 100644 website/versioned_docs/version-0.42/animated.md delete mode 100644 website/versioned_docs/version-0.42/appstate.md delete mode 100644 website/versioned_docs/version-0.42/button.md delete mode 100644 website/versioned_docs/version-0.42/cameraroll.md delete mode 100644 website/versioned_docs/version-0.42/geolocation.md delete mode 100644 website/versioned_docs/version-0.42/image.md delete mode 100644 website/versioned_docs/version-0.42/layout-props.md delete mode 100644 website/versioned_docs/version-0.42/navigatorios.md delete mode 100644 website/versioned_docs/version-0.42/permissionsandroid.md delete mode 100644 website/versioned_docs/version-0.42/scrollview.md delete mode 100644 website/versioned_docs/version-0.42/slider.md delete mode 100644 website/versioned_docs/version-0.42/switch.md delete mode 100644 website/versioned_docs/version-0.42/text.md delete mode 100644 website/versioned_docs/version-0.42/textinput.md delete mode 100644 website/versioned_docs/version-0.42/touchablewithoutfeedback.md delete mode 100644 website/versioned_docs/version-0.43/accessibilityinfo.md delete mode 100644 website/versioned_docs/version-0.43/alert.md delete mode 100644 website/versioned_docs/version-0.43/animated.md delete mode 100644 website/versioned_docs/version-0.43/appregistry.md delete mode 100644 website/versioned_docs/version-0.43/cameraroll.md delete mode 100644 website/versioned_docs/version-0.43/datepickerandroid.md delete mode 100644 website/versioned_docs/version-0.43/dimensions.md delete mode 100644 website/versioned_docs/version-0.43/easing.md delete mode 100644 website/versioned_docs/version-0.43/image.md delete mode 100644 website/versioned_docs/version-0.43/layout-props.md delete mode 100644 website/versioned_docs/version-0.43/layoutanimation.md delete mode 100644 website/versioned_docs/version-0.43/scrollview.md delete mode 100644 website/versioned_docs/version-0.43/statusbar.md delete mode 100644 website/versioned_docs/version-0.43/text.md delete mode 100644 website/versioned_docs/version-0.43/textinput.md delete mode 100644 website/versioned_docs/version-0.43/touchablehighlight.md delete mode 100644 website/versioned_docs/version-0.43/touchablenativefeedback.md delete mode 100644 website/versioned_docs/version-0.43/touchableopacity.md delete mode 100644 website/versioned_docs/version-0.43/touchablewithoutfeedback.md delete mode 100644 website/versioned_docs/version-0.44/alertios.md delete mode 100644 website/versioned_docs/version-0.44/animated.md delete mode 100644 website/versioned_docs/version-0.44/appregistry.md delete mode 100644 website/versioned_docs/version-0.44/backandroid.md delete mode 100644 website/versioned_docs/version-0.44/backhandler.md delete mode 100644 website/versioned_docs/version-0.44/flatlist.md delete mode 100644 website/versioned_docs/version-0.44/image.md delete mode 100644 website/versioned_docs/version-0.44/keyboardavoidingview.md delete mode 100644 website/versioned_docs/version-0.44/linking.md delete mode 100644 website/versioned_docs/version-0.44/listview.md delete mode 100644 website/versioned_docs/version-0.44/listviewdatasource.md delete mode 100644 website/versioned_docs/version-0.44/modal.md delete mode 100644 website/versioned_docs/version-0.44/navigator.md delete mode 100644 website/versioned_docs/version-0.44/navigatorios.md delete mode 100644 website/versioned_docs/version-0.44/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.44/scrollview.md delete mode 100644 website/versioned_docs/version-0.44/sectionlist.md delete mode 100644 website/versioned_docs/version-0.44/slider.md delete mode 100644 website/versioned_docs/version-0.44/tabbarios-item.md delete mode 100644 website/versioned_docs/version-0.44/textinput.md delete mode 100644 website/versioned_docs/version-0.44/touchablehighlight.md delete mode 100644 website/versioned_docs/version-0.44/touchablewithoutfeedback.md delete mode 100644 website/versioned_docs/version-0.44/view.md delete mode 100644 website/versioned_docs/version-0.44/virtualizedlist.md delete mode 100644 website/versioned_docs/version-0.44/webview.md delete mode 100644 website/versioned_docs/version-0.45/appregistry.md delete mode 100644 website/versioned_docs/version-0.45/cameraroll.md delete mode 100644 website/versioned_docs/version-0.45/datepickerandroid.md delete mode 100644 website/versioned_docs/version-0.45/flatlist.md delete mode 100644 website/versioned_docs/version-0.45/geolocation.md delete mode 100644 website/versioned_docs/version-0.45/image.md delete mode 100644 website/versioned_docs/version-0.45/keyboard.md delete mode 100644 website/versioned_docs/version-0.45/layout-props.md delete mode 100644 website/versioned_docs/version-0.45/linking.md delete mode 100644 website/versioned_docs/version-0.45/navigatorios.md delete mode 100644 website/versioned_docs/version-0.45/netinfo.md delete mode 100644 website/versioned_docs/version-0.45/panresponder.md delete mode 100644 website/versioned_docs/version-0.45/permissionsandroid.md delete mode 100644 website/versioned_docs/version-0.45/picker.md delete mode 100644 website/versioned_docs/version-0.45/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.45/scrollview.md delete mode 100644 website/versioned_docs/version-0.45/sectionlist.md delete mode 100644 website/versioned_docs/version-0.45/slider.md delete mode 100644 website/versioned_docs/version-0.45/systrace.md delete mode 100644 website/versioned_docs/version-0.45/text.md delete mode 100644 website/versioned_docs/version-0.45/textinput.md delete mode 100644 website/versioned_docs/version-0.45/touchablewithoutfeedback.md delete mode 100644 website/versioned_docs/version-0.45/view.md delete mode 100644 website/versioned_docs/version-0.45/virtualizedlist.md delete mode 100644 website/versioned_docs/version-0.46/accessibilityinfo.md delete mode 100644 website/versioned_docs/version-0.46/animated.md delete mode 100644 website/versioned_docs/version-0.46/appstate.md delete mode 100644 website/versioned_docs/version-0.46/flatlist.md delete mode 100644 website/versioned_docs/version-0.46/geolocation.md delete mode 100644 website/versioned_docs/version-0.46/image.md delete mode 100644 website/versioned_docs/version-0.46/imagebackground.md delete mode 100644 website/versioned_docs/version-0.46/layout-props.md delete mode 100644 website/versioned_docs/version-0.46/linking.md delete mode 100644 website/versioned_docs/version-0.46/listview.md delete mode 100644 website/versioned_docs/version-0.46/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.46/scrollview.md delete mode 100644 website/versioned_docs/version-0.46/sectionlist.md delete mode 100644 website/versioned_docs/version-0.46/virtualizedlist.md delete mode 100644 website/versioned_docs/version-0.46/webview.md delete mode 100644 website/versioned_docs/version-0.47/appregistry.md delete mode 100644 website/versioned_docs/version-0.47/flatlist.md delete mode 100644 website/versioned_docs/version-0.47/keyboard.md delete mode 100644 website/versioned_docs/version-0.47/layout-props.md delete mode 100644 website/versioned_docs/version-0.47/modal.md delete mode 100644 website/versioned_docs/version-0.47/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.47/scrollview.md delete mode 100644 website/versioned_docs/version-0.47/sectionlist.md delete mode 100644 website/versioned_docs/version-0.47/systrace.md delete mode 100644 website/versioned_docs/version-0.47/text.md delete mode 100644 website/versioned_docs/version-0.47/view.md delete mode 100644 website/versioned_docs/version-0.47/viewpagerandroid.md delete mode 100644 website/versioned_docs/version-0.47/virtualizedlist.md delete mode 100644 website/versioned_docs/version-0.48/animated.md delete mode 100644 website/versioned_docs/version-0.48/flatlist.md delete mode 100644 website/versioned_docs/version-0.48/geolocation.md delete mode 100644 website/versioned_docs/version-0.48/image.md delete mode 100644 website/versioned_docs/version-0.48/keyboardavoidingview.md delete mode 100644 website/versioned_docs/version-0.48/layout-props.md delete mode 100644 website/versioned_docs/version-0.48/linking.md delete mode 100644 website/versioned_docs/version-0.48/listview.md delete mode 100644 website/versioned_docs/version-0.48/listviewdatasource.md delete mode 100644 website/versioned_docs/version-0.48/maskedviewios.md delete mode 100644 website/versioned_docs/version-0.48/modal.md delete mode 100644 website/versioned_docs/version-0.48/navigatorios.md delete mode 100644 website/versioned_docs/version-0.48/netinfo.md delete mode 100644 website/versioned_docs/version-0.48/scrollview.md delete mode 100644 website/versioned_docs/version-0.48/sectionlist.md delete mode 100644 website/versioned_docs/version-0.48/statusbar.md delete mode 100644 website/versioned_docs/version-0.48/touchableopacity.md delete mode 100644 website/versioned_docs/version-0.48/touchablewithoutfeedback.md delete mode 100644 website/versioned_docs/version-0.48/transforms.md delete mode 100644 website/versioned_docs/version-0.48/view.md delete mode 100644 website/versioned_docs/version-0.49/alertios.md delete mode 100644 website/versioned_docs/version-0.49/animated.md delete mode 100644 website/versioned_docs/version-0.49/button.md delete mode 100644 website/versioned_docs/version-0.49/flatlist.md delete mode 100644 website/versioned_docs/version-0.49/geolocation.md delete mode 100644 website/versioned_docs/version-0.49/maskedviewios.md delete mode 100644 website/versioned_docs/version-0.49/modal.md delete mode 100644 website/versioned_docs/version-0.49/navigatorios.md delete mode 100644 website/versioned_docs/version-0.49/permissionsandroid.md delete mode 100644 website/versioned_docs/version-0.49/picker.md delete mode 100644 website/versioned_docs/version-0.49/pixelratio.md delete mode 100644 website/versioned_docs/version-0.49/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.49/scrollview.md delete mode 100644 website/versioned_docs/version-0.49/sectionlist.md delete mode 100644 website/versioned_docs/version-0.49/snapshotviewios.md delete mode 100644 website/versioned_docs/version-0.49/statusbar.md delete mode 100644 website/versioned_docs/version-0.49/stylesheet.md delete mode 100644 website/versioned_docs/version-0.49/systrace.md delete mode 100644 website/versioned_docs/version-0.49/tabbarios.md delete mode 100644 website/versioned_docs/version-0.49/text.md delete mode 100644 website/versioned_docs/version-0.49/textinput.md delete mode 100644 website/versioned_docs/version-0.49/toastandroid.md delete mode 100644 website/versioned_docs/version-0.49/vibration.md delete mode 100644 website/versioned_docs/version-0.49/view.md delete mode 100644 website/versioned_docs/version-0.49/viewpagerandroid.md delete mode 100644 website/versioned_docs/version-0.49/virtualizedlist.md delete mode 100644 website/versioned_docs/version-0.5/accessibility.md delete mode 100644 website/versioned_docs/version-0.5/accessibilityinfo.md delete mode 100644 website/versioned_docs/version-0.5/actionsheetios.md delete mode 100644 website/versioned_docs/version-0.5/activityindicator.md delete mode 100644 website/versioned_docs/version-0.5/alert.md delete mode 100644 website/versioned_docs/version-0.5/alertios.md delete mode 100644 website/versioned_docs/version-0.5/animated.md delete mode 100644 website/versioned_docs/version-0.5/animatedvalue.md delete mode 100644 website/versioned_docs/version-0.5/animatedvaluexy.md delete mode 100644 website/versioned_docs/version-0.5/animations.md delete mode 100644 website/versioned_docs/version-0.5/app-extensions.md delete mode 100644 website/versioned_docs/version-0.5/appregistry.md delete mode 100644 website/versioned_docs/version-0.5/appstate.md delete mode 100644 website/versioned_docs/version-0.5/asyncstorage.md delete mode 100644 website/versioned_docs/version-0.5/backandroid.md delete mode 100644 website/versioned_docs/version-0.5/backhandler.md delete mode 100644 website/versioned_docs/version-0.5/building-for-tv.md delete mode 100644 website/versioned_docs/version-0.5/button.md delete mode 100644 website/versioned_docs/version-0.5/cameraroll.md delete mode 100644 website/versioned_docs/version-0.5/checkbox.md delete mode 100644 website/versioned_docs/version-0.5/clipboard.md delete mode 100644 website/versioned_docs/version-0.5/colors.md delete mode 100644 website/versioned_docs/version-0.5/communication-android.md delete mode 100644 website/versioned_docs/version-0.5/communication-ios.md delete mode 100644 website/versioned_docs/version-0.5/components-and-apis.md delete mode 100644 website/versioned_docs/version-0.5/custom-webview-android.md delete mode 100644 website/versioned_docs/version-0.5/custom-webview-ios.md delete mode 100644 website/versioned_docs/version-0.5/datepickerandroid.md delete mode 100644 website/versioned_docs/version-0.5/datepickerios.md delete mode 100644 website/versioned_docs/version-0.5/debugging.md delete mode 100644 website/versioned_docs/version-0.5/dimensions.md delete mode 100644 website/versioned_docs/version-0.5/direct-manipulation.md delete mode 100644 website/versioned_docs/version-0.5/drawerlayoutandroid.md delete mode 100644 website/versioned_docs/version-0.5/easing.md delete mode 100644 website/versioned_docs/version-0.5/flatlist.md delete mode 100644 website/versioned_docs/version-0.5/flexbox.md delete mode 100644 website/versioned_docs/version-0.5/geolocation.md delete mode 100644 website/versioned_docs/version-0.5/gesture-responder-system.md delete mode 100644 website/versioned_docs/version-0.5/getting-started.md delete mode 100644 website/versioned_docs/version-0.5/handling-text-input.md delete mode 100644 website/versioned_docs/version-0.5/handling-touches.md delete mode 100644 website/versioned_docs/version-0.5/headless-js-android.md delete mode 100644 website/versioned_docs/version-0.5/height-and-width.md delete mode 100644 website/versioned_docs/version-0.5/image-style-props.md delete mode 100644 website/versioned_docs/version-0.5/image.md delete mode 100644 website/versioned_docs/version-0.5/imageeditor.md delete mode 100644 website/versioned_docs/version-0.5/imagepickerios.md delete mode 100644 website/versioned_docs/version-0.5/images.md delete mode 100644 website/versioned_docs/version-0.5/imagestore.md delete mode 100644 website/versioned_docs/version-0.5/improvingux.md delete mode 100644 website/versioned_docs/version-0.5/integration-with-existing-apps.md delete mode 100644 website/versioned_docs/version-0.5/interactionmanager.md delete mode 100644 website/versioned_docs/version-0.5/intro-react-native-components.md delete mode 100644 website/versioned_docs/version-0.5/javascript-environment.md delete mode 100644 website/versioned_docs/version-0.5/keyboard.md delete mode 100644 website/versioned_docs/version-0.5/keyboardavoidingview.md delete mode 100644 website/versioned_docs/version-0.5/layout-props.md delete mode 100644 website/versioned_docs/version-0.5/layoutanimation.md delete mode 100644 website/versioned_docs/version-0.5/linking-libraries-ios.md delete mode 100644 website/versioned_docs/version-0.5/linking.md delete mode 100644 website/versioned_docs/version-0.5/listview.md delete mode 100644 website/versioned_docs/version-0.5/listviewdatasource.md delete mode 100644 website/versioned_docs/version-0.5/maskedviewios.md delete mode 100644 website/versioned_docs/version-0.5/modal.md delete mode 100644 website/versioned_docs/version-0.5/more-resources.md delete mode 100644 website/versioned_docs/version-0.5/native-components-android.md delete mode 100644 website/versioned_docs/version-0.5/native-components-ios.md delete mode 100644 website/versioned_docs/version-0.5/native-modules-android.md delete mode 100644 website/versioned_docs/version-0.5/native-modules-ios.md delete mode 100644 website/versioned_docs/version-0.5/native-modules-setup.md delete mode 100644 website/versioned_docs/version-0.5/navigation.md delete mode 100644 website/versioned_docs/version-0.5/navigator.md delete mode 100644 website/versioned_docs/version-0.5/navigatorios.md delete mode 100644 website/versioned_docs/version-0.5/netinfo.md delete mode 100644 website/versioned_docs/version-0.5/network.md delete mode 100644 website/versioned_docs/version-0.5/optimizing-flatlist-configuration.md delete mode 100644 website/versioned_docs/version-0.5/panresponder.md delete mode 100644 website/versioned_docs/version-0.5/performance.md delete mode 100644 website/versioned_docs/version-0.5/permissionsandroid.md delete mode 100644 website/versioned_docs/version-0.5/picker-item.md delete mode 100644 website/versioned_docs/version-0.5/picker-style-props.md delete mode 100644 website/versioned_docs/version-0.5/picker.md delete mode 100644 website/versioned_docs/version-0.5/pickerios.md delete mode 100644 website/versioned_docs/version-0.5/pixelratio.md delete mode 100644 website/versioned_docs/version-0.5/platform-specific-code.md delete mode 100644 website/versioned_docs/version-0.5/progressbarandroid.md delete mode 100644 website/versioned_docs/version-0.5/progressviewios.md delete mode 100644 website/versioned_docs/version-0.5/props.md delete mode 100644 website/versioned_docs/version-0.5/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.5/refreshcontrol.md delete mode 100644 website/versioned_docs/version-0.5/removing-default-permissions.md delete mode 100644 website/versioned_docs/version-0.5/running-on-device.md delete mode 100644 website/versioned_docs/version-0.5/running-on-simulator-ios.md delete mode 100644 website/versioned_docs/version-0.5/scrollview.md delete mode 100644 website/versioned_docs/version-0.5/sectionlist.md delete mode 100644 website/versioned_docs/version-0.5/segmentedcontrolios.md delete mode 100644 website/versioned_docs/version-0.5/settings.md delete mode 100644 website/versioned_docs/version-0.5/shadow-props.md delete mode 100644 website/versioned_docs/version-0.5/share.md delete mode 100644 website/versioned_docs/version-0.5/signed-apk-android.md delete mode 100644 website/versioned_docs/version-0.5/slider.md delete mode 100644 website/versioned_docs/version-0.5/snapshotviewios.md delete mode 100644 website/versioned_docs/version-0.5/state.md delete mode 100644 website/versioned_docs/version-0.5/statusbar.md delete mode 100644 website/versioned_docs/version-0.5/statusbarios.md delete mode 100644 website/versioned_docs/version-0.5/style.md delete mode 100644 website/versioned_docs/version-0.5/stylesheet.md delete mode 100644 website/versioned_docs/version-0.5/switch.md delete mode 100644 website/versioned_docs/version-0.5/systrace.md delete mode 100644 website/versioned_docs/version-0.5/tabbarios-item.md delete mode 100644 website/versioned_docs/version-0.5/tabbarios.md delete mode 100644 website/versioned_docs/version-0.5/text-style-props.md delete mode 100644 website/versioned_docs/version-0.5/text.md delete mode 100644 website/versioned_docs/version-0.5/textinput.md delete mode 100644 website/versioned_docs/version-0.5/timepickerandroid.md delete mode 100644 website/versioned_docs/version-0.5/timers.md delete mode 100644 website/versioned_docs/version-0.5/toastandroid.md delete mode 100644 website/versioned_docs/version-0.5/toolbarandroid.md delete mode 100644 website/versioned_docs/version-0.5/touchablehighlight.md delete mode 100644 website/versioned_docs/version-0.5/touchablenativefeedback.md delete mode 100644 website/versioned_docs/version-0.5/touchableopacity.md delete mode 100644 website/versioned_docs/version-0.5/touchablewithoutfeedback.md delete mode 100644 website/versioned_docs/version-0.5/transforms.md delete mode 100644 website/versioned_docs/version-0.5/troubleshooting.md delete mode 100644 website/versioned_docs/version-0.5/tutorial.md delete mode 100644 website/versioned_docs/version-0.5/upgrading.md delete mode 100644 website/versioned_docs/version-0.5/using-a-listview.md delete mode 100644 website/versioned_docs/version-0.5/using-a-scrollview.md delete mode 100644 website/versioned_docs/version-0.5/vibration.md delete mode 100644 website/versioned_docs/version-0.5/vibrationios.md delete mode 100644 website/versioned_docs/version-0.5/view-style-props.md delete mode 100644 website/versioned_docs/version-0.5/view.md delete mode 100644 website/versioned_docs/version-0.5/viewpagerandroid.md delete mode 100644 website/versioned_docs/version-0.5/virtualizedlist.md delete mode 100644 website/versioned_docs/version-0.5/webview.md delete mode 100644 website/versioned_docs/version-0.50/actionsheetios.md delete mode 100644 website/versioned_docs/version-0.50/activityindicator.md delete mode 100644 website/versioned_docs/version-0.50/alertios.md delete mode 100644 website/versioned_docs/version-0.50/animated.md delete mode 100644 website/versioned_docs/version-0.50/button.md delete mode 100644 website/versioned_docs/version-0.50/cameraroll.md delete mode 100644 website/versioned_docs/version-0.50/checkbox.md delete mode 100644 website/versioned_docs/version-0.50/flatlist.md delete mode 100644 website/versioned_docs/version-0.50/geolocation.md delete mode 100644 website/versioned_docs/version-0.50/image.md delete mode 100644 website/versioned_docs/version-0.50/maskedviewios.md delete mode 100644 website/versioned_docs/version-0.50/modal.md delete mode 100644 website/versioned_docs/version-0.50/progressbarandroid.md delete mode 100644 website/versioned_docs/version-0.50/safeareaview.md delete mode 100644 website/versioned_docs/version-0.50/scrollview.md delete mode 100644 website/versioned_docs/version-0.50/sectionlist.md delete mode 100644 website/versioned_docs/version-0.50/segmentedcontrolios.md delete mode 100644 website/versioned_docs/version-0.50/text.md delete mode 100644 website/versioned_docs/version-0.50/textinput.md delete mode 100644 website/versioned_docs/version-0.50/timepickerandroid.md delete mode 100644 website/versioned_docs/version-0.50/toastandroid.md delete mode 100644 website/versioned_docs/version-0.50/touchablehighlight.md delete mode 100644 website/versioned_docs/version-0.50/touchableopacity.md delete mode 100644 website/versioned_docs/version-0.50/viewpagerandroid.md delete mode 100644 website/versioned_docs/version-0.50/virtualizedlist.md delete mode 100644 website/versioned_docs/version-0.50/webview.md delete mode 100644 website/versioned_docs/version-0.51/actionsheetios.md delete mode 100644 website/versioned_docs/version-0.51/animated.md delete mode 100644 website/versioned_docs/version-0.51/button.md delete mode 100644 website/versioned_docs/version-0.51/easing.md delete mode 100644 website/versioned_docs/version-0.51/flatlist.md delete mode 100644 website/versioned_docs/version-0.51/image.md delete mode 100644 website/versioned_docs/version-0.51/layout-props.md delete mode 100644 website/versioned_docs/version-0.51/netinfo.md delete mode 100644 website/versioned_docs/version-0.51/scrollview.md delete mode 100644 website/versioned_docs/version-0.51/sectionlist.md delete mode 100644 website/versioned_docs/version-0.51/share.md delete mode 100644 website/versioned_docs/version-0.51/text.md delete mode 100644 website/versioned_docs/version-0.51/textinput.md delete mode 100644 website/versioned_docs/version-0.51/touchableopacity.md delete mode 100644 website/versioned_docs/version-0.51/view-style-props.md delete mode 100644 website/versioned_docs/version-0.51/viewpagerandroid.md delete mode 100644 website/versioned_docs/version-0.52/actionsheetios.md delete mode 100644 website/versioned_docs/version-0.52/alert.md delete mode 100644 website/versioned_docs/version-0.52/animated.md delete mode 100644 website/versioned_docs/version-0.52/datepickerios.md delete mode 100644 website/versioned_docs/version-0.52/flatlist.md delete mode 100644 website/versioned_docs/version-0.52/keyboardavoidingview.md delete mode 100644 website/versioned_docs/version-0.52/layout-props.md delete mode 100644 website/versioned_docs/version-0.52/linking.md delete mode 100644 website/versioned_docs/version-0.52/maskedviewios.md delete mode 100644 website/versioned_docs/version-0.52/modal.md delete mode 100644 website/versioned_docs/version-0.52/refreshcontrol.md delete mode 100644 website/versioned_docs/version-0.52/sectionlist.md delete mode 100644 website/versioned_docs/version-0.52/segmentedcontrolios.md delete mode 100644 website/versioned_docs/version-0.52/stylesheet.md delete mode 100644 website/versioned_docs/version-0.52/switch.md delete mode 100644 website/versioned_docs/version-0.52/virtualizedlist.md delete mode 100644 website/versioned_docs/version-0.52/webview.md delete mode 100644 website/versioned_docs/version-0.53/appstate.md delete mode 100644 website/versioned_docs/version-0.53/backandroid.md delete mode 100644 website/versioned_docs/version-0.53/cameraroll.md delete mode 100644 website/versioned_docs/version-0.53/geolocation.md delete mode 100644 website/versioned_docs/version-0.53/image.md delete mode 100644 website/versioned_docs/version-0.53/modal.md delete mode 100644 website/versioned_docs/version-0.53/scrollview.md delete mode 100644 website/versioned_docs/version-0.53/statusbar.md delete mode 100644 website/versioned_docs/version-0.53/stylesheet.md delete mode 100644 website/versioned_docs/version-0.53/textinput.md delete mode 100644 website/versioned_docs/version-0.53/webview.md delete mode 100644 website/versioned_docs/version-0.54/activityindicator.md delete mode 100644 website/versioned_docs/version-0.54/appstate.md delete mode 100644 website/versioned_docs/version-0.54/cameraroll.md delete mode 100644 website/versioned_docs/version-0.54/flatlist.md delete mode 100644 website/versioned_docs/version-0.54/geolocation.md delete mode 100644 website/versioned_docs/version-0.54/image.md delete mode 100644 website/versioned_docs/version-0.54/keyboardavoidingview.md delete mode 100644 website/versioned_docs/version-0.54/linking.md delete mode 100644 website/versioned_docs/version-0.54/modal.md delete mode 100644 website/versioned_docs/version-0.54/netinfo.md delete mode 100644 website/versioned_docs/version-0.54/permissionsandroid.md delete mode 100644 website/versioned_docs/version-0.54/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.54/sectionlist.md delete mode 100644 website/versioned_docs/version-0.54/stylesheet.md delete mode 100644 website/versioned_docs/version-0.54/textinput.md delete mode 100644 website/versioned_docs/version-0.54/vibration.md delete mode 100644 website/versioned_docs/version-0.55/animated.md delete mode 100644 website/versioned_docs/version-0.55/appstate.md delete mode 100644 website/versioned_docs/version-0.55/easing.md delete mode 100644 website/versioned_docs/version-0.55/flatlist.md delete mode 100644 website/versioned_docs/version-0.55/image.md delete mode 100644 website/versioned_docs/version-0.55/inputaccessoryview.md delete mode 100644 website/versioned_docs/version-0.55/keyboard.md delete mode 100644 website/versioned_docs/version-0.55/keyboardavoidingview.md delete mode 100644 website/versioned_docs/version-0.55/layout-props.md delete mode 100644 website/versioned_docs/version-0.55/layoutanimation.md delete mode 100644 website/versioned_docs/version-0.55/modal.md delete mode 100644 website/versioned_docs/version-0.55/netinfo.md delete mode 100644 website/versioned_docs/version-0.55/permissionsandroid.md delete mode 100644 website/versioned_docs/version-0.55/picker.md delete mode 100644 website/versioned_docs/version-0.55/sectionlist.md delete mode 100644 website/versioned_docs/version-0.55/stylesheet.md delete mode 100644 website/versioned_docs/version-0.55/text.md delete mode 100644 website/versioned_docs/version-0.55/textinput.md delete mode 100644 website/versioned_docs/version-0.55/touchablehighlight.md delete mode 100644 website/versioned_docs/version-0.55/touchableopacity.md delete mode 100644 website/versioned_docs/version-0.55/view.md delete mode 100644 website/versioned_docs/version-0.55/virtualizedlist.md delete mode 100644 website/versioned_docs/version-0.55/webview.md delete mode 100644 website/versioned_docs/version-0.56/animated.md delete mode 100644 website/versioned_docs/version-0.56/asyncstorage.md delete mode 100644 website/versioned_docs/version-0.56/backhandler.md delete mode 100644 website/versioned_docs/version-0.56/flatlist.md delete mode 100644 website/versioned_docs/version-0.56/geolocation.md delete mode 100644 website/versioned_docs/version-0.56/image.md delete mode 100644 website/versioned_docs/version-0.56/inputaccessoryview.md delete mode 100644 website/versioned_docs/version-0.56/keyboardavoidingview.md delete mode 100644 website/versioned_docs/version-0.56/layout-props.md delete mode 100644 website/versioned_docs/version-0.56/navigatorios.md delete mode 100644 website/versioned_docs/version-0.56/panresponder.md delete mode 100644 website/versioned_docs/version-0.56/permissionsandroid.md delete mode 100644 website/versioned_docs/version-0.56/progressbarandroid.md delete mode 100644 website/versioned_docs/version-0.56/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.56/refreshcontrol.md delete mode 100644 website/versioned_docs/version-0.56/scrollview.md delete mode 100644 website/versioned_docs/version-0.56/sectionlist.md delete mode 100644 website/versioned_docs/version-0.56/slider.md delete mode 100644 website/versioned_docs/version-0.56/systrace.md delete mode 100644 website/versioned_docs/version-0.56/text-style-props.md delete mode 100644 website/versioned_docs/version-0.56/text.md delete mode 100644 website/versioned_docs/version-0.56/textinput.md delete mode 100644 website/versioned_docs/version-0.56/vibration.md delete mode 100644 website/versioned_docs/version-0.56/viewpagerandroid.md delete mode 100644 website/versioned_docs/version-0.56/webview.md delete mode 100644 website/versioned_docs/version-0.57/accessibilityinfo.md delete mode 100644 website/versioned_docs/version-0.57/animated.md delete mode 100644 website/versioned_docs/version-0.57/appregistry.md delete mode 100644 website/versioned_docs/version-0.57/geolocation.md delete mode 100644 website/versioned_docs/version-0.57/image.md delete mode 100644 website/versioned_docs/version-0.57/imageeditor.md delete mode 100644 website/versioned_docs/version-0.57/keyboardavoidingview.md delete mode 100644 website/versioned_docs/version-0.57/layout-props.md delete mode 100644 website/versioned_docs/version-0.57/modal.md delete mode 100644 website/versioned_docs/version-0.57/navigatorios.md delete mode 100644 website/versioned_docs/version-0.57/out-of-tree-platforms.md delete mode 100644 website/versioned_docs/version-0.57/pixelratio.md delete mode 100644 website/versioned_docs/version-0.57/refreshcontrol.md delete mode 100644 website/versioned_docs/version-0.57/safeareaview.md delete mode 100644 website/versioned_docs/version-0.57/statusbar.md delete mode 100644 website/versioned_docs/version-0.57/switch.md delete mode 100644 website/versioned_docs/version-0.57/text-style-props.md delete mode 100644 website/versioned_docs/version-0.57/text.md delete mode 100644 website/versioned_docs/version-0.57/textinput.md delete mode 100644 website/versioned_docs/version-0.57/touchablewithoutfeedback.md delete mode 100644 website/versioned_docs/version-0.57/view.md delete mode 100644 website/versioned_docs/version-0.57/viewpagerandroid.md delete mode 100644 website/versioned_docs/version-0.57/virtualizedlist.md delete mode 100644 website/versioned_docs/version-0.57/webview.md delete mode 100644 website/versioned_docs/version-0.58/actionsheetios.md delete mode 100644 website/versioned_docs/version-0.58/alert.md delete mode 100644 website/versioned_docs/version-0.58/alertios.md delete mode 100644 website/versioned_docs/version-0.58/appregistry.md delete mode 100644 website/versioned_docs/version-0.58/appstate.md delete mode 100644 website/versioned_docs/version-0.58/asyncstorage.md delete mode 100644 website/versioned_docs/version-0.58/button.md delete mode 100644 website/versioned_docs/version-0.58/cameraroll.md delete mode 100644 website/versioned_docs/version-0.58/communication-android.md delete mode 100644 website/versioned_docs/version-0.58/datepickerandroid.md delete mode 100644 website/versioned_docs/version-0.58/datepickerios.md delete mode 100644 website/versioned_docs/version-0.58/dimensions.md delete mode 100644 website/versioned_docs/version-0.58/drawerlayoutandroid.md delete mode 100644 website/versioned_docs/version-0.58/flatlist.md delete mode 100644 website/versioned_docs/version-0.58/geolocation.md delete mode 100644 website/versioned_docs/version-0.58/image-style-props.md delete mode 100644 website/versioned_docs/version-0.58/image.md delete mode 100644 website/versioned_docs/version-0.58/imagebackground.md delete mode 100644 website/versioned_docs/version-0.58/inputaccessoryview.md delete mode 100644 website/versioned_docs/version-0.58/interactionmanager.md delete mode 100644 website/versioned_docs/version-0.58/keyboard.md delete mode 100644 website/versioned_docs/version-0.58/keyboardavoidingview.md delete mode 100644 website/versioned_docs/version-0.58/layout-props.md delete mode 100644 website/versioned_docs/version-0.58/layoutanimation.md delete mode 100644 website/versioned_docs/version-0.58/linking.md delete mode 100644 website/versioned_docs/version-0.58/listview.md delete mode 100644 website/versioned_docs/version-0.58/listviewdatasource.md delete mode 100644 website/versioned_docs/version-0.58/maskedviewios.md delete mode 100644 website/versioned_docs/version-0.58/navigatorios.md delete mode 100644 website/versioned_docs/version-0.58/netinfo.md delete mode 100644 website/versioned_docs/version-0.58/out-of-tree-platforms.md delete mode 100644 website/versioned_docs/version-0.58/panresponder.md delete mode 100644 website/versioned_docs/version-0.58/permissionsandroid.md delete mode 100644 website/versioned_docs/version-0.58/picker-item.md delete mode 100644 website/versioned_docs/version-0.58/picker.md delete mode 100644 website/versioned_docs/version-0.58/pixelratio.md delete mode 100644 website/versioned_docs/version-0.58/progressbarandroid.md delete mode 100644 website/versioned_docs/version-0.58/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.58/refreshcontrol.md delete mode 100644 website/versioned_docs/version-0.58/scrollview.md delete mode 100644 website/versioned_docs/version-0.58/sectionlist.md delete mode 100644 website/versioned_docs/version-0.58/segmentedcontrolios.md delete mode 100644 website/versioned_docs/version-0.58/share.md delete mode 100644 website/versioned_docs/version-0.58/statusbar.md delete mode 100644 website/versioned_docs/version-0.58/stylesheet.md delete mode 100644 website/versioned_docs/version-0.58/switch.md delete mode 100644 website/versioned_docs/version-0.58/text-style-props.md delete mode 100644 website/versioned_docs/version-0.58/text.md delete mode 100644 website/versioned_docs/version-0.58/textinput.md delete mode 100644 website/versioned_docs/version-0.58/timepickerandroid.md delete mode 100644 website/versioned_docs/version-0.58/toastandroid.md delete mode 100644 website/versioned_docs/version-0.58/toolbarandroid.md delete mode 100644 website/versioned_docs/version-0.58/touchablehighlight.md delete mode 100644 website/versioned_docs/version-0.58/touchablenativefeedback.md delete mode 100644 website/versioned_docs/version-0.58/touchableopacity.md delete mode 100644 website/versioned_docs/version-0.58/touchablewithoutfeedback.md delete mode 100644 website/versioned_docs/version-0.58/vibration.md delete mode 100644 website/versioned_docs/version-0.58/view-style-props.md delete mode 100644 website/versioned_docs/version-0.58/viewpagerandroid.md delete mode 100644 website/versioned_docs/version-0.58/webview.md delete mode 100644 website/versioned_docs/version-0.59/appregistry.md delete mode 100644 website/versioned_docs/version-0.59/asyncstorage.md delete mode 100644 website/versioned_docs/version-0.59/image-style-props.md delete mode 100644 website/versioned_docs/version-0.59/imagestore.md delete mode 100644 website/versioned_docs/version-0.59/linking.md delete mode 100644 website/versioned_docs/version-0.59/maskedviewios.md delete mode 100644 website/versioned_docs/version-0.59/netinfo.md delete mode 100644 website/versioned_docs/version-0.59/publishing.md delete mode 100644 website/versioned_docs/version-0.59/scrollview.md delete mode 100644 website/versioned_docs/version-0.59/share.md delete mode 100644 website/versioned_docs/version-0.59/slider.md delete mode 100644 website/versioned_docs/version-0.59/stylesheet.md delete mode 100644 website/versioned_docs/version-0.59/text.md delete mode 100644 website/versioned_docs/version-0.59/textinput.md delete mode 100644 website/versioned_docs/version-0.59/touchablehighlight.md delete mode 100644 website/versioned_docs/version-0.59/view.md delete mode 100644 website/versioned_docs/version-0.59/viewpagerandroid.md delete mode 100644 website/versioned_docs/version-0.59/virtualizedlist.md delete mode 100644 website/versioned_docs/version-0.6/netinfo.md delete mode 100644 website/versioned_docs/version-0.6/pixelratio.md delete mode 100644 website/versioned_docs/version-0.6/progressviewios.md delete mode 100644 website/versioned_docs/version-0.6/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.6/scrollview.md delete mode 100644 website/versioned_docs/version-0.6/statusbarios.md delete mode 100644 website/versioned_docs/version-0.6/tabbarios.md delete mode 100644 website/versioned_docs/version-0.6/textinput.md delete mode 100644 website/versioned_docs/version-0.6/touchablehighlight.md delete mode 100644 website/versioned_docs/version-0.6/touchableopacity.md delete mode 100644 website/versioned_docs/version-0.6/touchablewithoutfeedback.md delete mode 100644 website/versioned_docs/version-0.7/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.7/scrollview.md delete mode 100644 website/versioned_docs/version-0.7/text-style-props.md delete mode 100644 website/versioned_docs/version-0.7/text.md delete mode 100644 website/versioned_docs/version-0.7/textinput.md delete mode 100644 website/versioned_docs/version-0.7/webview.md delete mode 100644 website/versioned_docs/version-0.8/image.md delete mode 100644 website/versioned_docs/version-0.8/navigatorios.md delete mode 100644 website/versioned_docs/version-0.8/scrollview.md delete mode 100644 website/versioned_docs/version-0.8/text-style-props.md delete mode 100644 website/versioned_docs/version-0.8/text.md delete mode 100644 website/versioned_docs/version-0.8/view-style-props.md delete mode 100644 website/versioned_docs/version-0.8/webview.md delete mode 100644 website/versioned_docs/version-0.9/cameraroll.md delete mode 100644 website/versioned_docs/version-0.9/image-style-props.md delete mode 100644 website/versioned_docs/version-0.9/image.md delete mode 100644 website/versioned_docs/version-0.9/navigatorios.md delete mode 100644 website/versioned_docs/version-0.9/pixelratio.md delete mode 100644 website/versioned_docs/version-0.9/pushnotificationios.md delete mode 100644 website/versioned_docs/version-0.9/scrollview.md delete mode 100644 website/versioned_docs/version-0.9/statusbarios.md delete mode 100644 website/versioned_docs/version-0.9/tabbarios.md delete mode 100644 website/versioned_docs/version-0.9/text-style-props.md delete mode 100644 website/versioned_docs/version-0.9/text.md delete mode 100644 website/versioned_docs/version-0.9/textinput.md delete mode 100644 website/versioned_docs/version-0.9/transforms.md delete mode 100644 website/versioned_docs/version-0.9/view-style-props.md delete mode 100644 website/versioned_sidebars/version-0.10-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.11-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.12-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.13-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.14-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.15-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.18-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.19-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.20-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.22-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.24-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.26-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.28-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.29-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.32-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.33-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.36-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.37-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.43-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.44-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.46-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.48-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.5-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.50-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.52-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.53-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.54-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.55-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.56-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.57-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.59-sidebars.json delete mode 100644 website/versioned_sidebars/version-0.6-sidebars.json diff --git a/website/versioned_docs/version-0.10/modal.md b/website/versioned_docs/version-0.10/modal.md deleted file mode 100644 index 7a3ca66bd0e..00000000000 --- a/website/versioned_docs/version-0.10/modal.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -id: version-0.10-modal -title: Modal -original_id: modal ---- - ---- - -# Reference diff --git a/website/versioned_docs/version-0.10/text.md b/website/versioned_docs/version-0.10/text.md deleted file mode 100644 index 72f4411ca1a..00000000000 --- a/website/versioned_docs/version-0.10/text.md +++ /dev/null @@ -1,203 +0,0 @@ ---- -id: version-0.10-text -title: Text -original_id: text ---- - -A React component for displaying text which supports nesting, styling, and touch handling. In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines: - -``` -renderText: function() { - return ( - - - {this.state.titleText + '\n\n'} - - - {this.state.bodyText} - - - ); -}, -... -var styles = StyleSheet.create({ - baseText: { - fontFamily: 'Cochin', - }, - titleText: { - fontSize: 20, - fontWeight: 'bold', - }, -}; -``` - -### Props - -- [`allowFontScaling`](text.md#allowfontscaling) -- [`numberOfLines`](text.md#numberoflines) -- [`onLayout`](text.md#onlayout) -- [`onPress`](text.md#onpress) -- [`style`](text.md#style) -- [`testID`](text.md#testid) -- [`suppressHighlighting`](text.md#suppresshighlighting) - -### Methods - -- [`onStartShouldSetResponder`](text.md#onstartshouldsetresponder) -- [`handleResponderTerminationRequest`](text.md#handleresponderterminationrequest) -- [`handleResponderGrant`](text.md#handlerespondergrant) -- [`handleResponderMove`](text.md#handlerespondermove) -- [`handleResponderRelease`](text.md#handleresponderrelease) -- [`handleResponderTerminate`](text.md#handleresponderterminate) - ---- - -# Reference - -## Props - -### `allowFontScaling` - -Specifies should fonts scale to respect Text Size accessibility setting on iOS. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `numberOfLines` - -Used to truncate the text with an elipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with - -`{nativeEvent: {layout: {x, y, width, height}}}` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPress` - -This function is called on press. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [View Style Props...](view-style-props.md#style) - -- **`textAlign`**: enum('auto', 'left', 'right', 'center', 'justify') - - Specifies text alignment. The value 'justify' is only supported on iOS. - -- **`color`**: string - -- **`fontSize`**: number - -- **`fontStyle`**: enum('normal', 'italic') - -- **`fontWeight`**: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') - - Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen. - -- **`lineHeight`**: number - -- **`fontFamily`**: string - -- **`letterSpacing`**: number (_iOS_) - -- **`textDecorationColor`**: string (_iOS_) - -- **`textDecorationLine`**: enum('none', 'underline', 'line-through', 'underline line-through') (_iOS_) - -- **`textDecorationStyle`**: enum('solid', 'double', 'dotted', 'dashed') (_iOS_) - -- **`writingDirection`**: enum('auto', 'ltr', 'rtl') (_iOS_) - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `suppressHighlighting` - -When true, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - -## Methods - -### `onStartShouldSetResponder()` - -```jsx -onStartShouldSetResponder(): -``` - ---- - -### `handleResponderTerminationRequest()` - -```jsx -handleResponderTerminationRequest(): -``` - ---- - -### `handleResponderGrant()` - -```jsx -handleResponderGrant((e: SyntheticEvent), (dispatchID: string)); -``` - ---- - -### `handleResponderMove()` - -```jsx -handleResponderMove((e: SyntheticEvent)); -``` - ---- - -### `handleResponderRelease()` - -```jsx -handleResponderRelease((e: SyntheticEvent)); -``` - ---- - -### `handleResponderTerminate()` - -```jsx -handleResponderTerminate((e: SyntheticEvent)); -``` diff --git a/website/versioned_docs/version-0.10/textinput.md b/website/versioned_docs/version-0.10/textinput.md deleted file mode 100644 index 036962db322..00000000000 --- a/website/versioned_docs/version-0.10/textinput.md +++ /dev/null @@ -1,392 +0,0 @@ ---- -id: version-0.10-textinput -title: TextInput -original_id: textinput ---- - -A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. - -The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example: - -``` - this.setState({text})} - value={this.state.text} - /> -``` - -Note that some props are only available with multiline={true/false}: - -var onlyMultiline = { onSelectionChange: true, // not supported in Open Source yet onTextInput: true, // not supported in Open Source yet children: true, }; - -var notMultiline = { onSubmitEditing: true, }; - -### Props - -- [`placeholderTextColor`](textinput.md#placeholdertextcolor) -- [`autoCapitalize`](textinput.md#autocapitalize) -- [`autoFocus`](textinput.md#autofocus) -- [`defaultValue`](textinput.md#defaultvalue) -- [`editable`](textinput.md#editable) -- [`keyboardType`](textinput.md#keyboardtype) -- [`multiline`](textinput.md#multiline) -- [`onBlur`](textinput.md#onblur) -- [`onChange`](textinput.md#onchange) -- [`onChangeText`](textinput.md#onchangetext) -- [`onEndEditing`](textinput.md#onendediting) -- [`onFocus`](textinput.md#onfocus) -- [`onLayout`](textinput.md#onlayout) -- [`onSubmitEditing`](textinput.md#onsubmitediting) -- [`placeholder`](textinput.md#placeholder) -- [`autoCorrect`](textinput.md#autocorrect) -- [`secureTextEntry`](textinput.md#securetextentry) -- [`style`](textinput.md#style) -- [`testID`](textinput.md#testid) -- [`textAlign`](textinput.md#textalign) -- [`value`](textinput.md#value) -- [`textAlignVertical`](textinput.md#textalignvertical) -- [`underlineColorAndroid`](textinput.md#underlinecolorandroid) -- [`clearButtonMode`](textinput.md#clearbuttonmode) -- [`clearTextOnFocus`](textinput.md#cleartextonfocus) -- [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) -- [`maxLength`](textinput.md#maxlength) -- [`returnKeyType`](textinput.md#returnkeytype) -- [`selectTextOnFocus`](textinput.md#selecttextonfocus) -- [`selectionState`](textinput.md#selectionstate) - -### Methods - -- [`isFocused`](textinput.md#isfocused) -- [`clear`](textinput.md#clear) - ---- - -# Reference - -## Props - -### `placeholderTextColor` - -The text color of the placeholder string - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `autoCapitalize` - -Can tell TextInput to automatically capitalize certain characters. - -- characters: all characters, -- words: first letter of each word -- sentences: first letter of each sentence (default) -- none: don't auto capitalize anything - -| Type | Required | -| ------------------------------------------------ | -------- | -| enum('none', 'sentences', 'words', 'characters') | No | - ---- - -### `autoFocus` - -If true, focuses the input on componentDidMount. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `defaultValue` - -Provides an initial value that will change when the user starts typing. Useful for use-cases where you don't want to deal with listening to events and updating the value prop to keep the controlled state in sync. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `editable` - -If false, text is not editable. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `keyboardType` - -Determines which keyboard to open, e.g.`numeric`. - -The following values work across platforms: - -- default -- numeric -- email-address - -| Type | Required | -| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| enum('default', 'numeric', 'email-address', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | - ---- - -### `multiline` - -If true, the text input can be multiple lines. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onBlur` - -Callback that is called when the text input is blurred - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChange` - -Callback that is called when the text input's text changes. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChangeText` - -Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onEndEditing` - -Callback that is called when text input ends. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onFocus` - -Callback that is called when the text input is focused - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{x, y, width, height}`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onSubmitEditing` - -Callback that is called when the text input's submit button is pressed. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `placeholder` - -The string that will be rendered before text input has been entered - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `autoCorrect` - -If false, disables auto-correct. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `secureTextEntry` - -If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -Styles - -| Type | Required | -| --------------------- | -------- | -| [Text](text.md#style) | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `textAlign` - -Set the position of the cursor from where editing will begin. @platorm android - -| Type | Required | -| ------------------------------ | -------- | -| enum('start', 'center', 'end') | No | - ---- - -### `value` - -The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `textAlignVertical` - -Aligns text vertically within the TextInput. - -| Type | Required | Platform | -| ------------------------------- | -------- | -------- | -| enum('top', 'center', 'bottom') | No | Android | - ---- - -### `underlineColorAndroid` - -The color of the textInput underline. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `clearButtonMode` - -When the clear button should appear on the right side of the text view - -| Type | Required | Platform | -| ---------------------------------------------------------- | -------- | -------- | -| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | - ---- - -### `clearTextOnFocus` - -If true, clears the text field automatically when editing begins - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `enablesReturnKeyAutomatically` - -If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `maxLength` - -Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `returnKeyType` - -Determines how the return key should look. - -| Type | Required | Platform | -| ------------------------------------------------------------------------------------------------------------- | -------- | -------- | -| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | iOS | - ---- - -### `selectTextOnFocus` - -If true, all text will automatically be selected on focus - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `selectionState` - -See DocumentSelectionState.js, some state that is responsible for maintaining selection information for a document - -| Type | Required | Platform | -| ---------------------- | -------- | -------- | -| DocumentSelectionState | No | iOS | - -## Methods - -### `isFocused()` - -```jsx -isFocused(): -``` - ---- - -### `clear()` - -```jsx -clear(); -``` diff --git a/website/versioned_docs/version-0.11/drawerlayoutandroid.md b/website/versioned_docs/version-0.11/drawerlayoutandroid.md deleted file mode 100644 index 7e260891e9c..00000000000 --- a/website/versioned_docs/version-0.11/drawerlayoutandroid.md +++ /dev/null @@ -1,149 +0,0 @@ ---- -id: version-0.11-drawerlayoutandroid -title: DrawerLayoutAndroid -original_id: drawerlayoutandroid ---- - -React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop. - -Example: - -``` -render: function() { - var navigationView = ( - I'm in the Drawer! - ); - return ( - navigationView}> - Hello - World! - - ); -}, -``` - -### Props - -- [`renderNavigationView`](drawerlayoutandroid.md#rendernavigationview) -- [`drawerPosition`](drawerlayoutandroid.md#drawerposition) -- [`drawerWidth`](drawerlayoutandroid.md#drawerwidth) -- [`keyboardDismissMode`](drawerlayoutandroid.md#keyboarddismissmode) -- [`onDrawerClose`](drawerlayoutandroid.md#ondrawerclose) -- [`onDrawerOpen`](drawerlayoutandroid.md#ondraweropen) -- [`onDrawerSlide`](drawerlayoutandroid.md#ondrawerslide) -- [`onDrawerStateChanged`](drawerlayoutandroid.md#ondrawerstatechanged) - -### Methods - -- [`openDrawer`](drawerlayoutandroid.md#opendrawer) -- [`closeDrawer`](drawerlayoutandroid.md#closedrawer) - ---- - -# Reference - -## Props - -### `renderNavigationView` - -The navigation view that will be rendered to the side of the screen and can be pulled in. - -| Type | Required | -| -------- | -------- | -| function | Yes | - ---- - -### `drawerPosition` - -Specifies the side of the screen from which the drawer will slide in. - -| Type | Required | -| ------------------------------------------------------------------------- | -------- | -| enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) | No | - ---- - -### `drawerWidth` - -Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. - -| Type | Required | -| ----------------------- | -------- | -| enum('none', 'on-drag') | No | - ---- - -### `onDrawerClose` - -Function called whenever the navigation view has been closed. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerOpen` - -Function called whenever the navigation view has been opened. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerSlide` - -Function called whenever there is an interaction with the navigation view. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerStateChanged` - -Function called when the drawer state has changed. The drawer can be in 3 states: - -- idle, meaning there is no interaction with the navigation view happening at the time -- dragging, meaning there is currently an interaction with the navigation view -- settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation - -| Type | Required | -| -------- | -------- | -| function | No | - -## Methods - -### `openDrawer()` - -```jsx -openDrawer(); -``` - ---- - -### `closeDrawer()` - -```jsx -closeDrawer(); -``` diff --git a/website/versioned_docs/version-0.11/image.md b/website/versioned_docs/version-0.11/image.md deleted file mode 100644 index bfcd5981d01..00000000000 --- a/website/versioned_docs/version-0.11/image.md +++ /dev/null @@ -1,205 +0,0 @@ ---- -id: version-0.11-image -title: Image -original_id: image ---- - -A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. - -Example usage: - -``` -renderImages: function() { - return ( - - - - - ); -}, -``` - -### Props - -- [`capInsets`](image.md#capinsets) -- [`onLayout`](image.md#onlayout) -- [`source`](image.md#source) -- [`style`](image.md#style) -- [`testID`](image.md#testid) -- [`accessibilityLabel`](image.md#accessibilitylabel) -- [`accessible`](image.md#accessible) -- [`resizeMode`](image.md#resizemode) -- [`defaultSource`](image.md#defaultsource) -- [`onError`](image.md#onerror) -- [`onLoad`](image.md#onload) -- [`onLoadEnd`](image.md#onloadend) -- [`onLoadStart`](image.md#onloadstart) -- [`onProgress`](image.md#onprogress) - ---- - -# Reference - -## Props - -### `capInsets` - -When the image is resized, the corners of the size specified by capInsets will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info on [Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets) - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{nativeEvent: {layout: {x, y, width, height}}}`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `source` - -`uri` is a string representing the resource identifier for the image, which could be an http address, a local file path, or the name of a static image resource (which should be wrapped in the `require('image!name')` function). - -| Type | Required | -| ------------------------------ | -------- | -| object: {uri: string}, ,number | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`backgroundColor`**: string - -- **`borderColor`**: string - -- **`borderRadius`**: number - -- **`borderWidth`**: number - -- **`opacity`**: number - -- **`overflow`**: enum('visible', 'hidden') - -- **`resizeMode`**: Object.keys(ImageResizeMode) - -- **`tintColor`**: string - ---- - -### `testID` - -A unique identifier for this element to be used in UI Automation testing scripts. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `accessibilityLabel` - -The text that's read by the screen reader when the user interacts with the image. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | iOS | - ---- - -### `accessible` - -When true, indicates the image is an accessibility element. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `resizeMode` - -Determines how to resize the image when the frame doesn't match the raw image dimensions. - -| Type | Required | -| ----------------------------------- | -------- | -| enum('cover', 'contain', 'stretch') | No | - ---- - -### `defaultSource` - -A static image to display while downloading the final image off the network. - -| Type | Required | Platform | -| --------------------- | -------- | -------- | -| object: {uri: string} | No | iOS | - ---- - -### `onError` - -Invoked on load error with `{nativeEvent: {error}}` - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `onLoad` - -Invoked when load completes successfully - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `onLoadEnd` - -Invoked when load either succeeds or fails - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `onLoadStart` - -Invoked on load start - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `onProgress` - -Invoked on download progress with `{nativeEvent: {loaded, total}}` - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | diff --git a/website/versioned_docs/version-0.11/layoutanimation.md b/website/versioned_docs/version-0.11/layoutanimation.md deleted file mode 100644 index 5c65b678723..00000000000 --- a/website/versioned_docs/version-0.11/layoutanimation.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: version-0.11-layoutanimation -title: LayoutAnimation -original_id: layoutanimation ---- - -Automatically animates views to their new positions when the next layout happens. - -A common way to use this API is to call `LayoutAnimation.configureNext` before calling `setState`. - -### Methods - -- [`configureNext`](layoutanimation.md#configurenext) -- [`create`](layoutanimation.md#create) - -### Properties - -- [`Types`](layoutanimation.md#types) -- [`Properties`](layoutanimation.md#properties) -- [`configChecker`](layoutanimation.md#configchecker) -- [`Presets`](layoutanimation.md#presets) -- [`easeInEaseOut`](layoutanimation.md#easeineaseout) -- [`linear`](layoutanimation.md#linear) -- [`spring`](layoutanimation.md#spring) - ---- - -# Reference - -## Methods - -### `configureNext()` - -```jsx -static configureNext(config, onAnimationDidEnd?) -``` - -Schedules an animation to happen on the next layout. - -@param config Specifies animation properties: - -- `duration` in milliseconds -- `create`, config for animating in new views (see `Anim` type) -- `update`, config for animating views that have been updated (see `Anim` type) - -@param onAnimationDidEnd Called when the animation finished. Only supported on iOS. @param onError Called on error. Only supported on iOS. - ---- - -### `create()` - -```jsx -static create(duration, type, creationProp) -``` - -Helper for creating a config for `configureNext`. - -## Properties - ---- - ---- - ---- - ---- - ---- - ---- diff --git a/website/versioned_docs/version-0.11/modal.md b/website/versioned_docs/version-0.11/modal.md deleted file mode 100644 index a22ba436a25..00000000000 --- a/website/versioned_docs/version-0.11/modal.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -id: version-0.11-modal -title: Modal -original_id: modal ---- - -### Props - -- [`animated`](modal.md#animated) -- [`transparent`](modal.md#transparent) - ---- - -# Reference - -## Props - -### `animated` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `transparent` - -| Type | Required | -| ---- | -------- | -| bool | No | diff --git a/website/versioned_docs/version-0.11/progressbarandroid.md b/website/versioned_docs/version-0.11/progressbarandroid.md deleted file mode 100644 index 76bf010b956..00000000000 --- a/website/versioned_docs/version-0.11/progressbarandroid.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -id: version-0.11-progressbarandroid -title: ProgressBarAndroid -original_id: progressbarandroid ---- - -React component that wraps the Android-only `ProgressBar`. This component is used to indicate that the app is loading or there is some activity in the app. - -Example: - -``` -render: function() { - var progressBar = - - - ; - - return ( - - ); -}, -``` - -### Props - -- [`styleAttr`](progressbarandroid.md#styleattr) -- [`testID`](progressbarandroid.md#testid) - ---- - -# Reference - -## Props - -### `styleAttr` - -Style of the ProgressBar. One of: - -- Horizontal -- Small -- Large -- Inverse -- SmallInverse -- LargeInverse - -| Type | Required | -| ------------------------------------------------------------------------------- | -------- | -| enum('Horizontal', 'Small', 'Large', 'Inverse', 'SmallInverse', 'LargeInverse') | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | diff --git a/website/versioned_docs/version-0.11/scrollview.md b/website/versioned_docs/version-0.11/scrollview.md deleted file mode 100644 index 01f145bc7a8..00000000000 --- a/website/versioned_docs/version-0.11/scrollview.md +++ /dev/null @@ -1,427 +0,0 @@ ---- -id: version-0.11-scrollview -title: ScrollView -original_id: scrollview ---- - -Component that wraps platform ScrollView while providing integration with touch locking "responder" system. - -Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer `{flex: 1}` down the view stack can lead to errors here, which the element inspector makes quick to debug. - -Doesn't yet support other contained responders from blocking this scroll view from becoming the responder. - -### Props - -- [`centerContent`](scrollview.md#centercontent) -- [`contentContainerStyle`](scrollview.md#contentcontainerstyle) -- [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) -- [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) -- [`onScroll`](scrollview.md#onscroll) -- [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) -- [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) -- [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) -- [`style`](scrollview.md#style) -- [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) -- [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) -- [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) -- [`bounces`](scrollview.md#bounces) -- [`bouncesZoom`](scrollview.md#bounceszoom) -- [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) -- [`horizontal`](scrollview.md#horizontal) -- [`contentInset`](scrollview.md#contentinset) -- [`contentOffset`](scrollview.md#contentoffset) -- [`decelerationRate`](scrollview.md#decelerationrate) -- [`directionalLockEnabled`](scrollview.md#directionallockenabled) -- [`maximumZoomScale`](scrollview.md#maximumzoomscale) -- [`minimumZoomScale`](scrollview.md#minimumzoomscale) -- [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) -- [`pagingEnabled`](scrollview.md#pagingenabled) -- [`scrollEnabled`](scrollview.md#scrollenabled) -- [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) -- [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) -- [`scrollsToTop`](scrollview.md#scrollstotop) -- [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) -- [`zoomScale`](scrollview.md#zoomscale) - -### Methods - -- [`scrollTo`](scrollview.md#scrollto) -- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) -- [`handleScroll`](scrollview.md#handlescroll) - ---- - -# Reference - -## Props - -### `centerContent` - -When true, the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `contentContainerStyle` - -These styles will be applied to the scroll view content container which wraps all of the child views. Example: - -return ( ); ... var styles = StyleSheet.create({ contentContainer: { paddingVertical: 20 } }); - -| Type | Required | -| ------------------------------------ | -------- | -| StyleSheetPropType(View Style props) | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. -- 'interactive', the keyboard is dismissed interactively with the drag and moves in synchrony with the touch; dragging upwards cancels the dismissal. On android this is not supported and it will have the same behavior as 'none'. - -| Type | Required | -| -------------------------------------- | -------- | -| enum('none', 'interactive', 'on-drag') | No | - ---- - -### `keyboardShouldPersistTaps` - -When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the scroll view will not catch taps, and the keyboard will not dismiss automatically. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onScroll` - -Fires at most once per frame during scrolling. The frequency of the events can be contolled using the `scrollEventThrottle` prop. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `removeClippedSubviews` - -Experimental: When true, offscreen child views (whose `overflow` value is `hidden`) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsHorizontalScrollIndicator` - -When true, shows a horizontal scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsVerticalScrollIndicator` - -When true, shows a vertical scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderStyle`**: enum('solid', 'dotted', 'dashed') - -- **`backfaceVisibility`**: enum('visible', 'hidden') - -- **`borderBottomColor`**: string - -- **`borderBottomLeftRadius`**: number - -- **`borderBottomRightRadius`**: number - -- **`borderColor`**: string - -- **`borderLeftColor`**: string - -- **`borderRadius`**: number - -- **`borderRightColor`**: string - -- **`backgroundColor`**: string - -- **`borderTopColor`**: string - -- **`borderTopLeftRadius`**: number - -- **`borderTopRightRadius`**: number - -- **`opacity`**: number - -- **`overflow`**: enum('visible', 'hidden') - -- **`shadowColor`**: string - -- **`shadowOffset`**: object: {width: number,height: number} - -- **`shadowOpacity`**: number - -- **`shadowRadius`**: number - ---- - -### `alwaysBounceHorizontal` - -When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself. The default value is true when `horizontal={true}` and false otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `alwaysBounceVertical` - -When true, the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself. The default value is false when `horizontal={true}` and true otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `automaticallyAdjustContentInsets` - -Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/ toolbar. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bounces` - -When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. When false, it disables all bouncing even if the `alwaysBounce*` props are true. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bouncesZoom` - -When true, gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture end, otherwise the zoom will not exceed the limits. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `canCancelContentTouches` - -When false, once tracking starts, won't try to drag if the touch moves. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `horizontal` - -When true, the scroll view's children are arranged horizontally in a row instead of vertically in a column. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `contentInset` - -The amount by which the scroll view content is inset from the edges of the scroll view. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `contentOffset` - -Used to manually set the starting scroll offset. The default value is `{x: 0, y: 0}`. - -| Type | Required | Platform | -| ------------- | -------- | -------- | -| PointPropType | No | iOS | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. Reasonable choices include - -- Normal: 0.998 (the default) -- Fast: 0.9 - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `directionalLockEnabled` - -When true, the ScrollView will try to lock to only vertical or horizontal scrolling while dragging. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `maximumZoomScale` - -The maximum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `minimumZoomScale` - -The minimum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `onScrollAnimationEnd` - -Called when a scrolling animation ends. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `pagingEnabled` - -When true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEnabled` - -When false, the content does not scroll. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEventThrottle` - -This controls how often the scroll event will be fired while scrolling (in events per seconds). A higher number yields better accuracy for code that is tracking the scroll position, but can lead to scroll performance problems due to the volume of information being send over the bridge. The default value is zero, which means the scroll event will be sent only once each time the view is scrolled. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `scrollIndicatorInsets` - -The amount by which the scroll view indicators are inset from the edges of the scroll view. This should normally be set to the same value as the `contentInset`. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `scrollsToTop` - -When true, the scroll view scrolls to top when the status bar is tapped. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `stickyHeaderIndices` - -An array of child indices determining which children get docked to the top of the screen when scrolling. For example, passing `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction with `horizontal={true}`. - -| Type | Required | Platform | -| --------------- | -------- | -------- | -| array of number | No | iOS | - ---- - -### `zoomScale` - -The current scale of the scroll view content. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - -## Methods - -### `scrollTo()` - -```jsx -scrollTo(([destY]: number), ([destX]: number)); -``` - ---- - -### `scrollWithoutAnimationTo()` - -```jsx -scrollWithoutAnimationTo(([destY]: number), ([destX]: number)); -``` - ---- - -### `handleScroll()` - -```jsx -handleScroll((e: Event)); -``` diff --git a/website/versioned_docs/version-0.11/toastandroid.md b/website/versioned_docs/version-0.11/toastandroid.md deleted file mode 100644 index 089d7c46315..00000000000 --- a/website/versioned_docs/version-0.11/toastandroid.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -id: version-0.11-toastandroid -title: ToastAndroid -original_id: toastandroid ---- - -This exposes the native ToastAndroid module as a JS module. This has a function 'showText' which takes the following parameters: - -1. String message: A string with the text to toast -2. int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG - -### Methods - -- [`show`](toastandroid.md#show) - -### Properties - -- [`SHORT`](toastandroid.md#short) -- [`LONG`](toastandroid.md#long) - ---- - -# Reference - -## Methods - -### `show()` - -```jsx -static show(message, duration) -``` - -## Properties - ---- diff --git a/website/versioned_docs/version-0.11/toolbarandroid.md b/website/versioned_docs/version-0.11/toolbarandroid.md deleted file mode 100644 index 4ab57875f76..00000000000 --- a/website/versioned_docs/version-0.11/toolbarandroid.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: version-0.11-toolbarandroid -title: ToolbarAndroid -original_id: toolbarandroid ---- - -React component that wraps the Android-only [`Toolbar` widget][0]. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right. - -If the toolbar has an only child, it will be displayed between the title and actions. - -Example: - -``` -render: function() { - return ( - - ) -}, -onActionSelected: function(position) { - if (position === 0) { // index of 'Settings' - showSettings(); - } -} -``` - -[0]: https://developer.android.com/reference/android/support/v7/widget/Toolbar.html - -### Props - -- [`actions`](toolbarandroid.md#actions) -- [`logo`](toolbarandroid.md#logo) -- [`navIcon`](toolbarandroid.md#navicon) -- [`onActionSelected`](toolbarandroid.md#onactionselected) -- [`onIconClicked`](toolbarandroid.md#oniconclicked) -- [`subtitle`](toolbarandroid.md#subtitle) -- [`subtitleColor`](toolbarandroid.md#subtitlecolor) -- [`testID`](toolbarandroid.md#testid) -- [`title`](toolbarandroid.md#title) -- [`titleColor`](toolbarandroid.md#titlecolor) - ---- - -# Reference - -## Props - -### `actions` - -Sets possible actions on the toolbar as part of the action menu. These are displayed as icons or text on the right side of the widget. If they don't fit they are placed in an 'overflow' menu. - -This property takes an array of objects, where each object has the following keys: - -- `title`: **required**, the title of this action -- `icon`: the icon for this action, e.g. `require('image!some_icon')` -- `show`: when to show this action as an icon or hide it in the overflow menu: `always`, `ifRoom` or `never` -- `showWithText`: boolean, whether to show text alongside the icon or not - -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------ | -------- | -| array of object: {title: string,icon: Image.propTypes.source,show: enum('always', 'ifRoom', 'never'),showWithText: bool} | No | - ---- - -### `logo` - -Sets the toolbar logo. - -| Type | Required | -| ---------------------- | -------- | -| Image.propTypes.source | No | - ---- - -### `navIcon` - -Sets the navigation icon. - -| Type | Required | -| ---------------------- | -------- | -| Image.propTypes.source | No | - ---- - -### `onActionSelected` - -Callback that is called when an action is selected. The only argument that is passeed to the callback is the position of the action in the actions array. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onIconClicked` - -Callback called when the icon is selected. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `subtitle` - -Sets the toolbar subtitle. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `subtitleColor` - -Sets the toolbar subtitle color. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `title` - -Sets the toolbar title. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `titleColor` - -Sets the toolbar title color. - -| Type | Required | -| ------ | -------- | -| string | No | diff --git a/website/versioned_docs/version-0.11/touchablenativefeedback.md b/website/versioned_docs/version-0.11/touchablenativefeedback.md deleted file mode 100644 index 5a0d7c82ab4..00000000000 --- a/website/versioned_docs/version-0.11/touchablenativefeedback.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -id: version-0.11-touchablenativefeedback -title: TouchableNativeFeedback -original_id: touchablenativefeedback ---- - -A wrapper for making views respond properly to touches (Android only). On Android this component uses native state drawable to display touch feedback. At the moment it only supports having a single View instance as a child node, as it's implemented by replacing that View with another instance of RCTView node with some additional properties set. - -Background drawable of native feedback touchable can be customized with `background` property. - -Example: - -``` -renderButton: function() { - return ( - - - Button - - - ); -}, -``` - -### Props - -- [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) - -* [`background`](touchablenativefeedback.md#background) - -### Methods - -- [`SelectableBackground`](touchablenativefeedback.md#selectablebackground) -- [`SelectableBackgroundBorderless`](touchablenativefeedback.md#selectablebackgroundborderless) -- [`Ripple`](touchablenativefeedback.md#ripple) - ---- - -# Reference - -## Props - -### `background` - -Determines the type of background drawable that's going to be used to display feedback. It takes an object with `type` property and extra data depending on the `type`. It's recommended to use one of the following static methods to generate that dictionary: - -1. TouchableNativeFeedback.SelectableBackground() - will create object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground) - -2. TouchableNativeFeedback.SelectableBackgroundBorderless() - will create object that represent android theme's default background for borderless selectable elements (?android:attr/selectableItemBackgroundBorderless). Available on android API level 21+ - -3. TouchableNativeFeedback.RippleAndroid(color, borderless) - will create object that represents ripple drawable with specified color (as a string). If property `borderless` evaluates to true the ripple will render outside of the view bounds (see native actionbar buttons as an example of that behavior). This background type is available on Android API level 21+ - -| Type | Required | -| ------------------ | -------- | -| backgroundPropType | No | - -## Methods - -### `SelectableBackground()` - -```jsx -static SelectableBackground() -``` - ---- - -### `SelectableBackgroundBorderless()` - -```jsx -static SelectableBackgroundBorderless() -``` - ---- - -### `Ripple()` - -```jsx -static Ripple(color, borderless) -``` diff --git a/website/versioned_docs/version-0.12/animated.md b/website/versioned_docs/version-0.12/animated.md deleted file mode 100644 index d1a4e32ce2d..00000000000 --- a/website/versioned_docs/version-0.12/animated.md +++ /dev/null @@ -1,448 +0,0 @@ ---- -id: version-0.12-animated -title: Animated -original_id: animated ---- - -Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and painless to build and maintain. - -The general workflow is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates either via animations, such as `Animated.timing`, or by hooking into gestures like panning or scolling via `Animated.event`. `Animated.Value` can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted: - -```jsx -class FadeInView extends React.Component { - constructor(props) { - super(props); - this.state = { - fadeAnim: new Animated.Value(0) // init opacity 0 - }; - } - componentDidMount() { - Animated.timing( - // Uses easing functions - this.state.fadeAnim, // The value to drive - { toValue: 1 } // Configuration - ).start(); // Don't forget start! - } - render() { - return ( - - {' '} - // Binds - {this.props.children} - - ); - } -} -``` - -Note that only animatable components can be animated. `View`, `Text`, and `Image` are already provided, and you can create custom ones with `createAnimatedComponent`. These components do the magic of binding the animated values to the properties, and do targetted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default. - -Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation. - -A single `Animated.Value` can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value. - -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` in the example above like so: - -```jsx - style={{ - opacity: this.state.fadeAnim, // Binds directly - transform: [{ - translateY: this.state.fadeAnim.interpolate({ - inputRange: [0, 1], - outputRange: [150, 0] // 0 : 150, 0.5 : 75, 1 : 0 - }), - }], - }}> -``` - -Animations can also be combined in complex ways using composition functions such as `sequence` and `parallel`, and can also be chained together by setting the `toValue` of one animation to be another `Animated.Value`. - -`Animated.ValueXY` is handy for 2D animations, like panning, and there are other helpful additions like `setOffset` and `getLayout` to aid with typical interaction patterns, like drag-and-drop. - -You can see more example usage in `AnimationExample.js`, the Gratuitous Animation App, and [Animations documentation guide](animations). - -Note that `Animated` is designed to be fully serializable so that animations can be run in a high performace way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout `Animated.Value.addListener` as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future. - -### Methods - -- [`decay`](animated.md#decay) -- [`timing`](animated.md#timing) -- [`spring`](animated.md#spring) -- [`delay`](animated.md#delay) -- [`sequence`](animated.md#sequence) -- [`parallel`](animated.md#parallel) -- [`stagger`](animated.md#stagger) -- [`event`](animated.md#event) -- [`createAnimatedComponent`](animated.md#createanimatedcomponent) - -### Properties - -- [`Value`](animated.md#value) -- [`ValueXY`](animated.md#valuexy) - -### Classes - -- [`AnimatedValue`](animated.md#animatedvalue) -- [`AnimatedValueXY`](animated.md#animatedvaluexy) -- [`AnimatedProps`](animated.md#animatedprops) - ---- - -# Reference - -## Methods - -### `decay()` - -```jsx -static decay(value, config) -``` - -Animates a value from an initial velocity to zero based on a decay coefficient. - ---- - -### `timing()` - -```jsx -static timing(value, config) -``` - -Animates a value along a timed easing curve. The `Easing` module has tons of pre-defined curves, or you can use your own function. - ---- - -### `spring()` - -```jsx -static spring(value, config) -``` - -Spring animation based on Rebound and Origami. Tracks velocity state to create fluid motions as the `toValue` updates, and can be chained together. - ---- - -### `delay()` - -```jsx -static delay(time) -``` - -Starts an animation after the given delay. - ---- - -### `sequence()` - -```jsx -static sequence(animations) -``` - -Starts an array of animations in order, waiting for each to complete before starting the next. If the current running animation is stopped, no following animations will be started. - ---- - -### `parallel()` - -```jsx -static parallel(animations, config?) -``` - -Starts an array of animations all at the same time. By default, if one of the animations is stopped, they will all be stopped. You can override this with the `stopTogether` flag. - ---- - -### `stagger()` - -```jsx -static stagger(time, animations) -``` - -Array of animations may run in parallel (overlap), but are started in sequence with successive delays. Nice for doing trailing effects. - ---- - -### `event()` - -```jsx -static event(argMapping, config?) -``` - -Takes an array of mappings and extracts values from each arg accordingly, then calls `setValue` on the mapped outputs. e.g. - -```jsx - onScroll={this.AnimatedEvent( - [{nativeEvent: {contentOffset: {x: this._scrollX}}}] - {listener}, // Optional async listener - ) - ... - onPanResponderMove: this.AnimatedEvent([ - null, // raw event arg ignored - {dx: this._panX}, // gestureState arg - ]), -``` - ---- - -### `createAnimatedComponent()` - -```jsx -static createAnimatedComponent(Component) -``` - -Make any React component Animatable. Used to create `Animated.View`, etc. - -## Properties - ---- - -## Classes - -## class AnimatedValue - -Standard value for driving animations. One `Animated.Value` can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling `setValue`) will stop any previous ones. - -### Methods - -### `constructor()` - -```jsx -constructor(value); -``` - ---- - -### `setValue()` - -```jsx -setValue(value); -``` - -Directly set the value. This will stop any animations running on the value and udpate all the bound properties. - ---- - -### `setOffset()` - -```jsx -setOffset(offset); -``` - -Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture. - ---- - -### `flattenOffset()` - -```jsx -flattenOffset(); -``` - -Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged. - ---- - -### `addListener()` - -```jsx -addListener(callback); -``` - -Adds an asynchronous listener to the value so you can observe updates from animations or whathaveyou. This is useful because there is no way to syncronously read the value because it might be driven natively. - ---- - -### `removeListener()` - -```jsx -removeListener(id); -``` - ---- - -### `removeAllListeners()` - -```jsx -removeAllListeners(); -``` - ---- - -### `stopAnimation()` - -```jsx -stopAnimation(callback?) -``` - -Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout. - ---- - -### `interpolate()` - -```jsx -interpolate(config); -``` - -Interpolates the value before updating the property, e.g. mapping 0-1 to 0-10. - ---- - -### `animate()` - -```jsx -animate(animation, callback); -``` - -Typically only used internally, but could be used by a custom Animation class. - ---- - -### `stopTracking()` - -```jsx -stopTracking(); -``` - -Typically only used internally. - ---- - -### `track()` - -```jsx -track(tracking); -``` - -Typically only used internally. - ---- - -## class AnimatedValueXY - -2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal `Animated.Value`, but multiplexed. Contains two regular `Animated.Value`s under the hood. Example: - -```jsx -class DraggableView extends React.Component { - constructor(props) { - super(props); - this.state = { - pan: new Animated.ValueXY() // inits to zero - }; - this.state.panResponder = PanResponder.create({ - onStartShouldSetPanResponder: () => true, - onPanResponderMove: Animated.event([ - null, - { - dx: this.state.pan.x, // x,y are Animated.Value - dy: this.state.pan.y - } - ]), - onPanResponderRelease: () => { - Animated.spring( - this.state.pan, // Auto-multiplexed - { toValue: { x: 0, y: 0 } } // Back to zero - ).start(); - } - }); - } - render() { - return ( - - {this.props.children} - - ); - } -} -``` - -### Methods - -### `constructor()` - -```jsx -constructor(valueIn?) -``` - ---- - -### `setValue()` - -```jsx -setValue(value); -``` - ---- - -### `setOffset()` - -```jsx -setOffset(offset); -``` - ---- - -### `flattenOffset()` - -```jsx -flattenOffset(); -``` - ---- - -### `stopAnimation()` - -```jsx -stopAnimation(callback?) -``` - ---- - -### `addListener()` - -```jsx -addListener(callback); -``` - ---- - -### `removeListener()` - -```jsx -removeListener(id); -``` - ---- - -### `getLayout()` - -```jsx -getLayout(); -``` - -Converts `{x, y}` into `{left, top}` for use in style, e.g. - -```jsx - style={this.state.anim.getLayout()} -``` - ---- - -### `getTranslateTransform()` - -```jsx -getTranslateTransform(); -``` - -Converts `{x, y}` into a useable translation transform, e.g. - -```jsx - style={{ - transform: this.state.anim.getTranslateTransform() - }} -``` diff --git a/website/versioned_docs/version-0.12/drawerlayoutandroid.md b/website/versioned_docs/version-0.12/drawerlayoutandroid.md deleted file mode 100644 index bac1a7b65bd..00000000000 --- a/website/versioned_docs/version-0.12/drawerlayoutandroid.md +++ /dev/null @@ -1,149 +0,0 @@ ---- -id: version-0.12-drawerlayoutandroid -title: DrawerLayoutAndroid -original_id: drawerlayoutandroid ---- - -React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop. - -Example: - -``` -render: function() { - var navigationView = ( - I'm in the Drawer! - ); - return ( - navigationView}> - Hello - World! - - ); -}, -``` - -### Props - -- [`renderNavigationView`](drawerlayoutandroid.md#rendernavigationview) -- [`drawerPosition`](drawerlayoutandroid.md#drawerposition) -- [`drawerWidth`](drawerlayoutandroid.md#drawerwidth) -- [`keyboardDismissMode`](drawerlayoutandroid.md#keyboarddismissmode) -- [`onDrawerClose`](drawerlayoutandroid.md#ondrawerclose) -- [`onDrawerOpen`](drawerlayoutandroid.md#ondraweropen) -- [`onDrawerSlide`](drawerlayoutandroid.md#ondrawerslide) -- [`onDrawerStateChanged`](drawerlayoutandroid.md#ondrawerstatechanged) - -### Methods - -- [`openDrawer`](drawerlayoutandroid.md#opendrawer) -- [`closeDrawer`](drawerlayoutandroid.md#closedrawer) - ---- - -# Reference - -## Props - -### `renderNavigationView` - -The navigation view that will be rendered to the side of the screen and can be pulled in. - -| Type | Required | -| -------- | -------- | -| function | Yes | - ---- - -### `drawerPosition` - -Specifies the side of the screen from which the drawer will slide in. - -| Type | Required | -| ------------------------------------------------------------------------- | -------- | -| enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) | No | - ---- - -### `drawerWidth` - -Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. - -| Type | Required | -| ----------------------- | -------- | -| enum('none', 'on-drag') | No | - ---- - -### `onDrawerClose` - -Function called whenever the navigation view has been closed. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerOpen` - -Function called whenever the navigation view has been opened. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerSlide` - -Function called whenever there is an interaction with the navigation view. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerStateChanged` - -Function called when the drawer state has changed. The drawer can be in 3 states: - -- idle, meaning there is no interaction with the navigation view happening at the time -- dragging, meaning there is currently an interaction with the navigation view -- settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation - -| Type | Required | -| -------- | -------- | -| function | No | - -## Methods - -### `openDrawer()` - -```jsx -openDrawer(); -``` - ---- - -### `closeDrawer()` - -```jsx -closeDrawer(); -``` diff --git a/website/versioned_docs/version-0.12/easing.md b/website/versioned_docs/version-0.12/easing.md deleted file mode 100644 index 7f132511ab5..00000000000 --- a/website/versioned_docs/version-0.12/easing.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -id: version-0.12-easing -title: Easing -original_id: easing ---- - -This class implements common easing functions. The math is pretty obscure, but this cool website has nice visual illustrations of what they represent: http://xaedes.de/dev/transitions/ - -### Methods - -- [`step0`](easing.md#step0) -- [`step1`](easing.md#step1) -- [`linear`](easing.md#linear) -- [`ease`](easing.md#ease) -- [`quad`](easing.md#quad) -- [`cubic`](easing.md#cubic) -- [`poly`](easing.md#poly) -- [`sin`](easing.md#sin) -- [`circle`](easing.md#circle) -- [`exp`](easing.md#exp) -- [`elastic`](easing.md#elastic) -- [`back`](easing.md#back) -- [`bounce`](easing.md#bounce) -- [`bezier`](easing.md#bezier) -- [`in`](easing.md#in) -- [`out`](easing.md#out) -- [`inOut`](easing.md#inout) - ---- - -# Reference - -## Methods - -### `step0()` - -```jsx -static step0(n) -``` - ---- - -### `step1()` - -```jsx -static step1(n) -``` - ---- - -### `linear()` - -```jsx -static linear(t) -``` - ---- - -### `ease()` - -```jsx -static ease(t) -``` - ---- - -### `quad()` - -```jsx -static quad(t) -``` - ---- - -### `cubic()` - -```jsx -static cubic(t) -``` - ---- - -### `poly()` - -```jsx -static poly(n) -``` - ---- - -### `sin()` - -```jsx -static sin(t) -``` - ---- - -### `circle()` - -```jsx -static circle(t) -``` - ---- - -### `exp()` - -```jsx -static exp(t) -``` - ---- - -### `elastic()` - -```jsx -static elastic(bounciness) -``` - -A basic elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times. - -Wolfram Plots: - -http://tiny.cc/elastic_b_1 (default bounciness = 1) http://tiny.cc/elastic_b_3 (bounciness = 3) - ---- - -### `back()` - -```jsx -static back(s) -``` - ---- - -### `bounce()` - -```jsx -static bounce(t) -``` - ---- - -### `bezier()` - -```jsx -static bezier(x1, y1, x2, y2, epsilon?) -``` - ---- - -### `in()` - -```jsx -static in easing; -``` - ---- - -### `out()` - -```jsx -static out(easing) -``` - -Runs an easing function backwards. - ---- - -### `inOut()` - -```jsx -static inOut(easing) -``` - -Makes any easing function symmetrical. diff --git a/website/versioned_docs/version-0.12/imagepickerios.md b/website/versioned_docs/version-0.12/imagepickerios.md deleted file mode 100644 index 5b308a3e250..00000000000 --- a/website/versioned_docs/version-0.12/imagepickerios.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: version-0.12-imagepickerios -title: ImagePickerIOS -original_id: imagepickerios ---- - -### Methods - -- [`canRecordVideos`](imagepickerios.md#canrecordvideos) -- [`canUseCamera`](imagepickerios.md#canusecamera) -- [`openCameraDialog`](imagepickerios.md#opencameradialog) -- [`openSelectDialog`](imagepickerios.md#openselectdialog) - ---- - -# Reference - -## Methods - -### `canRecordVideos()` - -```jsx -static canRecordVideos(callback) -``` - ---- - -### `canUseCamera()` - -```jsx -static canUseCamera(callback) -``` - ---- - -### `openCameraDialog()` - -```jsx -static openCameraDialog(config, successCallback, cancelCallback) -``` - ---- - -### `openSelectDialog()` - -```jsx -static openSelectDialog(config, successCallback, cancelCallback) -``` diff --git a/website/versioned_docs/version-0.12/modal.md b/website/versioned_docs/version-0.12/modal.md deleted file mode 100644 index c60381b0d39..00000000000 --- a/website/versioned_docs/version-0.12/modal.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -id: version-0.12-modal -title: Modal -original_id: modal ---- - -### Props - -- [`animated`](modal.md#animated) -- [`onDismiss`](modal.md#ondismiss) -- [`transparent`](modal.md#transparent) - ---- - -# Reference - -## Props - -### `animated` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onDismiss` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `transparent` - -| Type | Required | -| ---- | -------- | -| bool | No | diff --git a/website/versioned_docs/version-0.12/scrollview.md b/website/versioned_docs/version-0.12/scrollview.md deleted file mode 100644 index 5141ed2adfe..00000000000 --- a/website/versioned_docs/version-0.12/scrollview.md +++ /dev/null @@ -1,453 +0,0 @@ ---- -id: version-0.12-scrollview -title: ScrollView -original_id: scrollview ---- - -Component that wraps platform ScrollView while providing integration with touch locking "responder" system. - -Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer `{flex: 1}` down the view stack can lead to errors here, which the element inspector makes quick to debug. - -Doesn't yet support other contained responders from blocking this scroll view from becoming the responder. - -### Props - -- [`contentInset`](scrollview.md#contentinset) -- [`contentContainerStyle`](scrollview.md#contentcontainerstyle) -- [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) -- [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) -- [`onScroll`](scrollview.md#onscroll) -- [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) -- [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) -- [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) -- [`style`](scrollview.md#style) -- [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) -- [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) -- [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) -- [`bounces`](scrollview.md#bounces) -- [`bouncesZoom`](scrollview.md#bounceszoom) -- [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) -- [`centerContent`](scrollview.md#centercontent) -- [`horizontal`](scrollview.md#horizontal) -- [`contentOffset`](scrollview.md#contentoffset) -- [`decelerationRate`](scrollview.md#decelerationrate) -- [`directionalLockEnabled`](scrollview.md#directionallockenabled) -- [`maximumZoomScale`](scrollview.md#maximumzoomscale) -- [`minimumZoomScale`](scrollview.md#minimumzoomscale) -- [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) -- [`pagingEnabled`](scrollview.md#pagingenabled) -- [`scrollEnabled`](scrollview.md#scrollenabled) -- [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) -- [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) -- [`scrollsToTop`](scrollview.md#scrollstotop) -- [`snapToAlignment`](scrollview.md#snaptoalignment) -- [`snapToInterval`](scrollview.md#snaptointerval) -- [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) -- [`zoomScale`](scrollview.md#zoomscale) - -### Methods - -- [`scrollTo`](scrollview.md#scrollto) -- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) -- [`handleScroll`](scrollview.md#handlescroll) - ---- - -# Reference - -## Props - -### `contentInset` - -The amount by which the scroll view content is inset from the edges of the scroll view. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `contentContainerStyle` - -These styles will be applied to the scroll view content container which wraps all of the child views. Example: - -return ( ); ... var styles = StyleSheet.create({ contentContainer: { paddingVertical: 20 } }); - -| Type | Required | -| ------------------------------------ | -------- | -| StyleSheetPropType(View Style props) | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. -- 'interactive', the keyboard is dismissed interactively with the drag and moves in synchrony with the touch; dragging upwards cancels the dismissal. On android this is not supported and it will have the same behavior as 'none'. - -| Type | Required | -| -------------------------------------- | -------- | -| enum('none', 'interactive', 'on-drag') | No | - ---- - -### `keyboardShouldPersistTaps` - -When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the scroll view will not catch taps, and the keyboard will not dismiss automatically. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onScroll` - -Fires at most once per frame during scrolling. The frequency of the events can be contolled using the `scrollEventThrottle` prop. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `removeClippedSubviews` - -Experimental: When true, offscreen child views (whose `overflow` value is `hidden`) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsHorizontalScrollIndicator` - -When true, shows a horizontal scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsVerticalScrollIndicator` - -When true, shows a vertical scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderStyle`**: enum('solid', 'dotted', 'dashed') - -- **`backfaceVisibility`**: enum('visible', 'hidden') - -- **`borderBottomColor`**: string - -- **`borderBottomLeftRadius`**: number - -- **`borderBottomRightRadius`**: number - -- **`borderColor`**: string - -- **`borderLeftColor`**: string - -- **`borderRadius`**: number - -- **`borderRightColor`**: string - -- **`backgroundColor`**: string - -- **`borderTopColor`**: string - -- **`borderTopLeftRadius`**: number - -- **`borderTopRightRadius`**: number - -- **`opacity`**: number - -- **`overflow`**: enum('visible', 'hidden') - -- **`shadowColor`**: string - -- **`shadowOffset`**: object: {width: number,height: number} - -- **`shadowOpacity`**: number - -- **`shadowRadius`**: number - ---- - -### `alwaysBounceHorizontal` - -When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself. The default value is true when `horizontal={true}` and false otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `alwaysBounceVertical` - -When true, the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself. The default value is false when `horizontal={true}` and true otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `automaticallyAdjustContentInsets` - -Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/ toolbar. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bounces` - -When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. When false, it disables all bouncing even if the `alwaysBounce*` props are true. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bouncesZoom` - -When true, gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture end, otherwise the zoom will not exceed the limits. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `canCancelContentTouches` - -When false, once tracking starts, won't try to drag if the touch moves. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `centerContent` - -When true, the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `horizontal` - -When true, the scroll view's children are arranged horizontally in a row instead of vertically in a column. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `contentOffset` - -Used to manually set the starting scroll offset. The default value is `{x: 0, y: 0}`. - -| Type | Required | Platform | -| ------------- | -------- | -------- | -| PointPropType | No | iOS | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. Reasonable choices include - -- Normal: 0.998 (the default) -- Fast: 0.9 - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `directionalLockEnabled` - -When true, the ScrollView will try to lock to only vertical or horizontal scrolling while dragging. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `maximumZoomScale` - -The maximum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `minimumZoomScale` - -The minimum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `onScrollAnimationEnd` - -Called when a scrolling animation ends. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `pagingEnabled` - -When true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEnabled` - -When false, the content does not scroll. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEventThrottle` - -This controls how often the scroll event will be fired while scrolling (in events per seconds). A higher number yields better accuracy for code that is tracking the scroll position, but can lead to scroll performance problems due to the volume of information being send over the bridge. The default value is zero, which means the scroll event will be sent only once each time the view is scrolled. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `scrollIndicatorInsets` - -The amount by which the scroll view indicators are inset from the edges of the scroll view. This should normally be set to the same value as the `contentInset`. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `scrollsToTop` - -When true, the scroll view scrolls to top when the status bar is tapped. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `snapToAlignment` - -When `snapToInterval` is set, `snapToAlignment` will define the relationship of the the snapping to the scroll view. - -- `start` (the default) will align the snap at the left (horizontal) or top (vertical) -- `center` will align the snap in the center -- `end` will align the snap at the right (horizontal) or bottom (vertical) - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| enum('start', 'center', 'end') | No | iOS | - ---- - -### `snapToInterval` - -When set, causes the scroll view to stop at multiples of the value of `snapToInterval`. This can be used for paginating through children that have lengths smaller than the scroll view. Used in combination with `snapToAlignment`. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `stickyHeaderIndices` - -An array of child indices determining which children get docked to the top of the screen when scrolling. For example, passing `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction with `horizontal={true}`. - -| Type | Required | Platform | -| --------------- | -------- | -------- | -| array of number | No | iOS | - ---- - -### `zoomScale` - -The current scale of the scroll view content. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - -## Methods - -### `scrollTo()` - -```jsx -scrollTo(([destY]: number), ([destX]: number)); -``` - ---- - -### `scrollWithoutAnimationTo()` - -```jsx -scrollWithoutAnimationTo(([destY]: number), ([destX]: number)); -``` - ---- - -### `handleScroll()` - -```jsx -handleScroll((e: Event)); -``` diff --git a/website/versioned_docs/version-0.12/textinput.md b/website/versioned_docs/version-0.12/textinput.md deleted file mode 100644 index 09be087f3bd..00000000000 --- a/website/versioned_docs/version-0.12/textinput.md +++ /dev/null @@ -1,403 +0,0 @@ ---- -id: version-0.12-textinput -title: TextInput -original_id: textinput ---- - -A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. - -One use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example: - -``` - this.setState({text})} - value={this.state.text} - /> -``` - -Note that some props are only available with multiline={true/false}: - -var onlyMultiline = { onSelectionChange: true, // not supported in Open Source yet onTextInput: true, // not supported in Open Source yet children: true, }; - -var notMultiline = { onSubmitEditing: true, }; - -### Props - -- [`placeholderTextColor`](textinput.md#placeholdertextcolor) -- [`autoCapitalize`](textinput.md#autocapitalize) -- [`autoFocus`](textinput.md#autofocus) -- [`defaultValue`](textinput.md#defaultvalue) -- [`editable`](textinput.md#editable) -- [`keyboardType`](textinput.md#keyboardtype) -- [`multiline`](textinput.md#multiline) -- [`onBlur`](textinput.md#onblur) -- [`onChange`](textinput.md#onchange) -- [`onChangeText`](textinput.md#onchangetext) -- [`onEndEditing`](textinput.md#onendediting) -- [`onFocus`](textinput.md#onfocus) -- [`onLayout`](textinput.md#onlayout) -- [`onSubmitEditing`](textinput.md#onsubmitediting) -- [`placeholder`](textinput.md#placeholder) -- [`autoCorrect`](textinput.md#autocorrect) -- [`secureTextEntry`](textinput.md#securetextentry) -- [`style`](textinput.md#style) -- [`testID`](textinput.md#testid) -- [`textAlign`](textinput.md#textalign) -- [`value`](textinput.md#value) -- [`numberOfLines`](textinput.md#numberoflines) -- [`textAlignVertical`](textinput.md#textalignvertical) -- [`underlineColorAndroid`](textinput.md#underlinecolorandroid) -- [`clearButtonMode`](textinput.md#clearbuttonmode) -- [`clearTextOnFocus`](textinput.md#cleartextonfocus) -- [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) -- [`maxLength`](textinput.md#maxlength) -- [`returnKeyType`](textinput.md#returnkeytype) -- [`selectTextOnFocus`](textinput.md#selecttextonfocus) -- [`selectionState`](textinput.md#selectionstate) - -### Methods - -- [`isFocused`](textinput.md#isfocused) -- [`clear`](textinput.md#clear) - ---- - -# Reference - -## Props - -### `placeholderTextColor` - -The text color of the placeholder string - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `autoCapitalize` - -Can tell TextInput to automatically capitalize certain characters. - -- characters: all characters, -- words: first letter of each word -- sentences: first letter of each sentence (default) -- none: don't auto capitalize anything - -| Type | Required | -| ------------------------------------------------ | -------- | -| enum('none', 'sentences', 'words', 'characters') | No | - ---- - -### `autoFocus` - -If true, focuses the input on componentDidMount. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `defaultValue` - -Provides an initial value that will change when the user starts typing. Useful for use-cases where you don't want to deal with listening to events and updating the value prop to keep the controlled state in sync. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `editable` - -If false, text is not editable. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `keyboardType` - -Determines which keyboard to open, e.g.`numeric`. - -The following values work across platforms: - -- default -- numeric -- email-address - -| Type | Required | -| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| enum('default', 'numeric', 'email-address', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | - ---- - -### `multiline` - -If true, the text input can be multiple lines. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onBlur` - -Callback that is called when the text input is blurred - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChange` - -Callback that is called when the text input's text changes. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChangeText` - -Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onEndEditing` - -Callback that is called when text input ends. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onFocus` - -Callback that is called when the text input is focused - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{x, y, width, height}`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onSubmitEditing` - -Callback that is called when the text input's submit button is pressed. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `placeholder` - -The string that will be rendered before text input has been entered - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `autoCorrect` - -If false, disables auto-correct. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `secureTextEntry` - -If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -Styles - -| Type | Required | -| --------------------- | -------- | -| [Text](text.md#style) | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `textAlign` - -Set the position of the cursor from where editing will begin. @platorm android - -| Type | Required | -| ------------------------------ | -------- | -| enum('start', 'center', 'end') | No | - ---- - -### `value` - -The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `numberOfLines` - -Sets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | Android | - ---- - -### `textAlignVertical` - -Aligns text vertically within the TextInput. - -| Type | Required | Platform | -| ------------------------------- | -------- | -------- | -| enum('top', 'center', 'bottom') | No | Android | - ---- - -### `underlineColorAndroid` - -The color of the textInput underline. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `clearButtonMode` - -When the clear button should appear on the right side of the text view - -| Type | Required | Platform | -| ---------------------------------------------------------- | -------- | -------- | -| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | - ---- - -### `clearTextOnFocus` - -If true, clears the text field automatically when editing begins - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `enablesReturnKeyAutomatically` - -If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `maxLength` - -Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `returnKeyType` - -Determines how the return key should look. - -| Type | Required | Platform | -| ------------------------------------------------------------------------------------------------------------- | -------- | -------- | -| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | iOS | - ---- - -### `selectTextOnFocus` - -If true, all text will automatically be selected on focus - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `selectionState` - -See DocumentSelectionState.js, some state that is responsible for maintaining selection information for a document - -| Type | Required | Platform | -| ---------------------- | -------- | -------- | -| DocumentSelectionState | No | iOS | - -## Methods - -### `isFocused()` - -```jsx -isFocused(): -``` - ---- - -### `clear()` - -```jsx -clear(); -``` diff --git a/website/versioned_docs/version-0.12/touchablehighlight.md b/website/versioned_docs/version-0.12/touchablehighlight.md deleted file mode 100644 index 9c55cb9ba7f..00000000000 --- a/website/versioned_docs/version-0.12/touchablehighlight.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: version-0.12-touchablehighlight -title: TouchableHighlight -original_id: touchablehighlight ---- - -A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view. The underlay comes from adding a view to the view hierarchy, which can 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. - -Example: - -``` -renderButton: function() { - return ( - - - - ); -}, -``` - -> **NOTE**: TouchableHighlight supports only one child -> -> If you wish to have to have several child components, wrap them in a View. - -### Props - -- [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) - -* [`activeOpacity`](touchablehighlight.md#activeopacity) -* [`onHideUnderlay`](touchablehighlight.md#onhideunderlay) -* [`onShowUnderlay`](touchablehighlight.md#onshowunderlay) -* [`style`](touchablehighlight.md#style) -* [`underlayColor`](touchablehighlight.md#underlaycolor) - -### Methods - -- [`computeSyntheticState`](touchablehighlight.md#computesyntheticstate) - ---- - -# Reference - -## Props - -### `activeOpacity` - -Determines what the opacity of the wrapped view should be when touch is active. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `onHideUnderlay` - -Called immediately after the underlay is hidden - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onShowUnderlay` - -Called immediately after the underlay is shown - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `style` - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `underlayColor` - -The color of the underlay that will show through when the touch is active. - -| Type | Required | -| ------ | -------- | -| string | No | - -## Methods - -### `computeSyntheticState()` - -```jsx -computeSyntheticState(props); -``` diff --git a/website/versioned_docs/version-0.12/touchablenativefeedback.md b/website/versioned_docs/version-0.12/touchablenativefeedback.md deleted file mode 100644 index 202645dbb8e..00000000000 --- a/website/versioned_docs/version-0.12/touchablenativefeedback.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -id: version-0.12-touchablenativefeedback -title: TouchableNativeFeedback -original_id: touchablenativefeedback ---- - -A wrapper for making views respond properly to touches (Android only). On Android this component uses native state drawable to display touch feedback. At the moment it only supports having a single View instance as a child node, as it's implemented by replacing that View with another instance of RCTView node with some additional properties set. - -Background drawable of native feedback touchable can be customized with `background` property. - -Example: - -``` -renderButton: function() { - return ( - - - Button - - - ); -}, -``` - -### Props - -- [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) - -* [`background`](touchablenativefeedback.md#background) - -### Methods - -- [`SelectableBackground`](touchablenativefeedback.md#selectablebackground) -- [`SelectableBackgroundBorderless`](touchablenativefeedback.md#selectablebackgroundborderless) -- [`Ripple`](touchablenativefeedback.md#ripple) - ---- - -# Reference - -## Props - -### `background` - -Determines the type of background drawable that's going to be used to display feedback. It takes an object with `type` property and extra data depending on the `type`. It's recommended to use one of the following static methods to generate that dictionary: - -1. TouchableNativeFeedback.SelectableBackground() - will create object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground) - -2. TouchableNativeFeedback.SelectableBackgroundBorderless() - will create object that represent android theme's default background for borderless selectable elements (?android:attr/selectableItemBackgroundBorderless). Available on android API level 21+ - -3. TouchableNativeFeedback.Ripple(color, borderless) - will create object that represents ripple drawable with specified color (as a string). If property `borderless` evaluates to true the ripple will render outside of the view bounds (see native actionbar buttons as an example of that behavior). This background type is available on Android API level 21+ - -| Type | Required | -| ------------------ | -------- | -| backgroundPropType | No | - -## Methods - -### `SelectableBackground()` - -```jsx -static SelectableBackground() -``` - ---- - -### `SelectableBackgroundBorderless()` - -```jsx -static SelectableBackgroundBorderless() -``` - ---- - -### `Ripple()` - -```jsx -static Ripple(color, borderless) -``` diff --git a/website/versioned_docs/version-0.12/touchableopacity.md b/website/versioned_docs/version-0.12/touchableopacity.md deleted file mode 100644 index b9524d58086..00000000000 --- a/website/versioned_docs/version-0.12/touchableopacity.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: version-0.12-touchableopacity -title: TouchableOpacity -original_id: touchableopacity ---- - -A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it. This is done without actually changing the view hierarchy, and in general can be added to an app without weird side-effects. - -Example: - -``` -renderButton: function() { - return ( - - - - ); -}, -``` - -### Props - -- [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) - -* [`activeOpacity`](touchableopacity.md#activeopacity) - -### Methods - -- [`setOpacityTo`](touchableopacity.md#setopacityto) - ---- - -# Reference - -## Props - -### `activeOpacity` - -Determines what the opacity of the wrapped view should be when touch is active. - -| Type | Required | -| ------ | -------- | -| number | No | - -## Methods - -### `setOpacityTo()` - -```jsx -setOpacityTo(value); -``` diff --git a/website/versioned_docs/version-0.12/touchablewithoutfeedback.md b/website/versioned_docs/version-0.12/touchablewithoutfeedback.md deleted file mode 100644 index 5a9d1449e6d..00000000000 --- a/website/versioned_docs/version-0.12/touchablewithoutfeedback.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: version-0.12-touchablewithoutfeedback -title: TouchableWithoutFeedback -original_id: touchablewithoutfeedback ---- - -Do not use unless you have a very good reason. All the elements that respond to press should have a visual feedback when touched. This is one of the primary reason a "web" app doesn't feel "native". - -### Props - -- [`delayPressOut`](touchablewithoutfeedback.md#delaypressout) -- [`accessibilityComponentType`](touchablewithoutfeedback.md#accessibilitycomponenttype) -- [`accessible`](touchablewithoutfeedback.md#accessible) -- [`delayLongPress`](touchablewithoutfeedback.md#delaylongpress) -- [`delayPressIn`](touchablewithoutfeedback.md#delaypressin) -- [`accessibilityTraits`](touchablewithoutfeedback.md#accessibilitytraits) -- [`onLayout`](touchablewithoutfeedback.md#onlayout) -- [`onLongPress`](touchablewithoutfeedback.md#onlongpress) -- [`onPress`](touchablewithoutfeedback.md#onpress) -- [`onPressIn`](touchablewithoutfeedback.md#onpressin) -- [`onPressOut`](touchablewithoutfeedback.md#onpressout) - ---- - -# Reference - -## Props - -### `delayPressOut` - -Delay in ms, from the release of the touch, before onPressOut is called. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `accessibilityComponentType` - -| Type | Required | -| ------------------------------- | -------- | -| View.AccessibilityComponentType | No | - ---- - -### `accessible` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `delayLongPress` - -Delay in ms, from onPressIn, before onLongPress is called. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `delayPressIn` - -Delay in ms, from the start of the touch, before onPressIn is called. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `accessibilityTraits` - -| Type | Required | -| ------------------------------------------------------------ | -------- | -| View.AccessibilityTraits, ,array of View.AccessibilityTraits | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with - -`{nativeEvent: {layout: {x, y, width, height}}}` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLongPress` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPress` - -Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock). - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPressIn` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPressOut` - -| Type | Required | -| -------- | -------- | -| function | No | diff --git a/website/versioned_docs/version-0.12/transforms.md b/website/versioned_docs/version-0.12/transforms.md deleted file mode 100644 index 52694d5f0ad..00000000000 --- a/website/versioned_docs/version-0.12/transforms.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -id: version-0.12-transforms -title: Transforms -original_id: transforms ---- - -### Props - -- [`transform`](transforms.md#transform) -- [`transformMatrix`](transforms.md#transformmatrix) - ---- - -# Reference - -## Props - -### `transform` - -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| array of object: {perspective: number}, ,object: {rotate: string}, ,object: {rotateX: string}, ,object: {rotateY: string}, ,object: {rotateZ: string}, ,object: {scale: number}, ,object: {scaleX: number}, ,object: {scaleY: number}, ,object: {translateX: number}, ,object: {translateY: number}, ,object: {skewX: string}, ,object: {skewY: string} | No | - ---- - -### `transformMatrix` - -| Type | Required | -| --------------- | -------- | -| array of number | No | diff --git a/website/versioned_docs/version-0.13/drawerlayoutandroid.md b/website/versioned_docs/version-0.13/drawerlayoutandroid.md deleted file mode 100644 index f927d2a7c1a..00000000000 --- a/website/versioned_docs/version-0.13/drawerlayoutandroid.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -id: version-0.13-drawerlayoutandroid -title: DrawerLayoutAndroid -original_id: drawerlayoutandroid ---- - -React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop. - -Example: - -``` -render: function() { - var navigationView = ( - - I'm in the Drawer! - - ); - return ( - navigationView}> - - Hello - World! - - - ); -}, -``` - -### Props - -- [`renderNavigationView`](drawerlayoutandroid.md#rendernavigationview) -- [`drawerPosition`](drawerlayoutandroid.md#drawerposition) -- [`drawerWidth`](drawerlayoutandroid.md#drawerwidth) -- [`keyboardDismissMode`](drawerlayoutandroid.md#keyboarddismissmode) -- [`onDrawerClose`](drawerlayoutandroid.md#ondrawerclose) -- [`onDrawerOpen`](drawerlayoutandroid.md#ondraweropen) -- [`onDrawerSlide`](drawerlayoutandroid.md#ondrawerslide) -- [`onDrawerStateChanged`](drawerlayoutandroid.md#ondrawerstatechanged) - -### Methods - -- [`openDrawer`](drawerlayoutandroid.md#opendrawer) -- [`closeDrawer`](drawerlayoutandroid.md#closedrawer) - ---- - -# Reference - -## Props - -### `renderNavigationView` - -The navigation view that will be rendered to the side of the screen and can be pulled in. - -| Type | Required | -| -------- | -------- | -| function | Yes | - ---- - -### `drawerPosition` - -Specifies the side of the screen from which the drawer will slide in. - -| Type | Required | -| ------------------------------------------------------------------------- | -------- | -| enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) | No | - ---- - -### `drawerWidth` - -Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. - -| Type | Required | -| ----------------------- | -------- | -| enum('none', 'on-drag') | No | - ---- - -### `onDrawerClose` - -Function called whenever the navigation view has been closed. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerOpen` - -Function called whenever the navigation view has been opened. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerSlide` - -Function called whenever there is an interaction with the navigation view. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerStateChanged` - -Function called when the drawer state has changed. The drawer can be in 3 states: - -- idle, meaning there is no interaction with the navigation view happening at the time -- dragging, meaning there is currently an interaction with the navigation view -- settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation - -| Type | Required | -| -------- | -------- | -| function | No | - -## Methods - -### `openDrawer()` - -```jsx -openDrawer(); -``` - ---- - -### `closeDrawer()` - -```jsx -closeDrawer(); -``` diff --git a/website/versioned_docs/version-0.13/modal.md b/website/versioned_docs/version-0.13/modal.md deleted file mode 100644 index 2a61a5539b6..00000000000 --- a/website/versioned_docs/version-0.13/modal.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -id: version-0.13-modal -title: Modal -original_id: modal ---- - -A Modal component covers the native view (e.g. UIViewController, Activity) that contains the React Native root. - -Use Modal in hybrid apps that embed React Native; Modal allows the portion of your app written in React Native to present content above the enclosing native view hierarchy. - -In apps written with React Native from the root view down, you should use Navigator instead of Modal. With a top-level Navigator, you have more control over how to present the modal scene over the rest of your app. - -### Props - -- [`animated`](modal.md#animated) -- [`onDismiss`](modal.md#ondismiss) -- [`transparent`](modal.md#transparent) - ---- - -# Reference - -## Props - -### `animated` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onDismiss` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `transparent` - -| Type | Required | -| ---- | -------- | -| bool | No | diff --git a/website/versioned_docs/version-0.13/pushnotificationios.md b/website/versioned_docs/version-0.13/pushnotificationios.md deleted file mode 100644 index b4abd99ef2a..00000000000 --- a/website/versioned_docs/version-0.13/pushnotificationios.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: version-0.13-pushnotificationios -title: PushNotificationIOS -original_id: pushnotificationios ---- - -Handle push notifications for your app, including permission handling and icon badge number. - -To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). - -### Methods - -- [`presentLocalNotification`](pushnotificationios.md#presentlocalnotification) -- [`scheduleLocalNotification`](pushnotificationios.md#schedulelocalnotification) -- [`setApplicationIconBadgeNumber`](pushnotificationios.md#setapplicationiconbadgenumber) -- [`getApplicationIconBadgeNumber`](pushnotificationios.md#getapplicationiconbadgenumber) -- [`addEventListener`](pushnotificationios.md#addeventlistener) -- [`requestPermissions`](pushnotificationios.md#requestpermissions) -- [`abandonPermissions`](pushnotificationios.md#abandonpermissions) -- [`checkPermissions`](pushnotificationios.md#checkpermissions) -- [`removeEventListener`](pushnotificationios.md#removeeventlistener) -- [`popInitialNotification`](pushnotificationios.md#popinitialnotification) -- [`constructor`](pushnotificationios.md#constructor) -- [`getMessage`](pushnotificationios.md#getmessage) -- [`getSound`](pushnotificationios.md#getsound) -- [`getAlert`](pushnotificationios.md#getalert) -- [`getBadgeCount`](pushnotificationios.md#getbadgecount) -- [`getData`](pushnotificationios.md#getdata) - ---- - -# Reference - -## Methods - -### `presentLocalNotification()` - -```jsx -static presentLocalNotification(details) -``` - -Schedules the localNotification for immediate presentation. - -details is an object containing: - -- `alertBody` : The message displayed in the notification alert. - ---- - -### `scheduleLocalNotification()` - -```jsx -static scheduleLocalNotification(details) -``` - -Schedules the localNotification for future presentation. - -details is an object containing: - -- `fireDate` : The date and time when the system should deliver the notification. -- `alertBody` : The message displayed in the notification alert. - ---- - -### `setApplicationIconBadgeNumber()` - -```jsx -static setApplicationIconBadgeNumber(number) -``` - -Sets the badge number for the app icon on the home screen - ---- - -### `getApplicationIconBadgeNumber()` - -```jsx -static getApplicationIconBadgeNumber(callback) -``` - -Gets the current badge number for the app icon on the home screen - ---- - -### `addEventListener()` - -```jsx -static addEventListener(type, handler) -``` - -Attaches a listener to remote notification events while the app is running in the foreground or the background. - -Valid events are: - -- `notification` : Fired when a remote notification is received. The handler will be invoked with an instance of `PushNotificationIOS`. -- `register`: Fired when the user registers for remote notifications. The handler will be invoked with a hex string representing the deviceToken. - ---- - -### `requestPermissions()` - -```jsx -static requestPermissions(permissions?) -``` - -Requests notification permissions from iOS, prompting the user's dialog box. By default, it will request all notification permissions, but a subset of these can be requested by passing a map of requested permissions. The following permissions are supported: - -- `alert` -- `badge` -- `sound` - -If a map is provided to the method, only the permissions with truthy values will be requested. - ---- - -### `abandonPermissions()` - -```jsx -static abandonPermissions() -``` - -Unregister for all remote notifications received via Apple Push Notification service. - -You should call this method in rare circumstances only, such as when a new version of the app removes support for all types of remote notifications. Users can temporarily prevent apps from receiving remote notifications through the Notifications section of the Settings app. Apps unregistered through this method can always re-register. - ---- - -### `checkPermissions()` - -```jsx -static checkPermissions(callback) -``` - -See what push permissions are currently enabled. `callback` will be invoked with a `permissions` object: - -- `alert` :boolean -- `badge` :boolean -- `sound` :boolean - ---- - -### `removeEventListener()` - -```jsx -static removeEventListener(type, handler) -``` - -Removes the event listener. Do this in `componentWillUnmount` to prevent memory leaks - ---- - -### `popInitialNotification()` - -```jsx -static popInitialNotification() -``` - -An initial notification will be available if the app was cold-launched from a notification. - -The first caller of `popInitialNotification` will get the initial notification object, or `null`. Subsequent invocations will return null. - ---- - -### `constructor()` - -```jsx -constructor(nativeNotif); -``` - -You will never need to instansiate `PushNotificationIOS` yourself. Listening to the `notification` event and invoking `popInitialNotification` is sufficient - ---- - -### `getMessage()` - -```jsx -getMessage(); -``` - -An alias for `getAlert` to get the notification's main message string - ---- - -### `getSound()` - -```jsx -getSound(); -``` - -Gets the sound string from the `aps` object - ---- - -### `getAlert()` - -```jsx -getAlert(); -``` - -Gets the notification's main message from the `aps` object - ---- - -### `getBadgeCount()` - -```jsx -getBadgeCount(); -``` - -Gets the badge count number from the `aps` object - ---- - -### `getData()` - -```jsx -getData(); -``` - -Gets the data object on the notif diff --git a/website/versioned_docs/version-0.13/scrollview.md b/website/versioned_docs/version-0.13/scrollview.md deleted file mode 100644 index 826d06cbd18..00000000000 --- a/website/versioned_docs/version-0.13/scrollview.md +++ /dev/null @@ -1,463 +0,0 @@ ---- -id: version-0.13-scrollview -title: ScrollView -original_id: scrollview ---- - -Component that wraps platform ScrollView while providing integration with touch locking "responder" system. - -Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer `{flex: 1}` down the view stack can lead to errors here, which the element inspector can help to debug. - -Doesn't yet support other contained responders from blocking this scroll view from becoming the responder. - -### Props - -- [`contentInset`](scrollview.md#contentinset) -- [`contentContainerStyle`](scrollview.md#contentcontainerstyle) -- [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) -- [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) -- [`onScroll`](scrollview.md#onscroll) -- [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) -- [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) -- [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) -- [`style`](scrollview.md#style) -- [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) -- [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) -- [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) -- [`bounces`](scrollview.md#bounces) -- [`bouncesZoom`](scrollview.md#bounceszoom) -- [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) -- [`centerContent`](scrollview.md#centercontent) -- [`horizontal`](scrollview.md#horizontal) -- [`contentOffset`](scrollview.md#contentoffset) -- [`decelerationRate`](scrollview.md#decelerationrate) -- [`directionalLockEnabled`](scrollview.md#directionallockenabled) -- [`maximumZoomScale`](scrollview.md#maximumzoomscale) -- [`minimumZoomScale`](scrollview.md#minimumzoomscale) -- [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) -- [`pagingEnabled`](scrollview.md#pagingenabled) -- [`scrollEnabled`](scrollview.md#scrollenabled) -- [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) -- [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) -- [`scrollsToTop`](scrollview.md#scrollstotop) -- [`snapToAlignment`](scrollview.md#snaptoalignment) -- [`snapToInterval`](scrollview.md#snaptointerval) -- [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) -- [`zoomScale`](scrollview.md#zoomscale) - -### Methods - -- [`scrollTo`](scrollview.md#scrollto) -- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) -- [`handleScroll`](scrollview.md#handlescroll) - ---- - -# Reference - -## Props - -### `contentInset` - -The amount by which the scroll view content is inset from the edges of the scroll view. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `contentContainerStyle` - -These styles will be applied to the scroll view content container which wraps all of the child views. Example: - -return ( ); ... var styles = StyleSheet.create({ contentContainer: { paddingVertical: 20 } }); - -| Type | Required | -| ------------------------------------ | -------- | -| StyleSheetPropType(View Style props) | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. -- 'interactive', the keyboard is dismissed interactively with the drag and moves in synchrony with the touch; dragging upwards cancels the dismissal. On android this is not supported and it will have the same behavior as 'none'. - -| Type | Required | -| -------------------------------------- | -------- | -| enum('none', 'interactive', 'on-drag') | No | - ---- - -### `keyboardShouldPersistTaps` - -When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the scroll view will not catch taps, and the keyboard will not dismiss automatically. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onScroll` - -Fires at most once per frame during scrolling. The frequency of the events can be contolled using the `scrollEventThrottle` prop. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `removeClippedSubviews` - -Experimental: When true, offscreen child views (whose `overflow` value is `hidden`) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsHorizontalScrollIndicator` - -When true, shows a horizontal scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsVerticalScrollIndicator` - -When true, shows a vertical scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderStyle`**: enum('solid', 'dotted', 'dashed') - -- **`backfaceVisibility`**: enum('visible', 'hidden') - -- **`borderBottomColor`**: string - -- **`borderBottomLeftRadius`**: number - -- **`borderBottomRightRadius`**: number - -- **`borderBottomWidth`**: number - -- **`borderColor`**: string - -- **`borderLeftColor`**: string - -- **`borderLeftWidth`**: number - -- **`borderRadius`**: number - -- **`borderRightColor`**: string - -- **`borderRightWidth`**: number - -- **`backgroundColor`**: string - -- **`borderTopColor`**: string - -- **`borderTopLeftRadius`**: number - -- **`borderTopRightRadius`**: number - -- **`borderTopWidth`**: number - -- **`borderWidth`**: number - -- **`opacity`**: number - -- **`overflow`**: enum('visible', 'hidden') - -- **`shadowColor`**: string - -- **`shadowOffset`**: object: {width: number,height: number} - -- **`shadowOpacity`**: number - -- **`shadowRadius`**: number - ---- - -### `alwaysBounceHorizontal` - -When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself. The default value is true when `horizontal={true}` and false otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `alwaysBounceVertical` - -When true, the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself. The default value is false when `horizontal={true}` and true otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `automaticallyAdjustContentInsets` - -Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/ toolbar. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bounces` - -When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. When false, it disables all bouncing even if the `alwaysBounce*` props are true. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bouncesZoom` - -When true, gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture end, otherwise the zoom will not exceed the limits. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `canCancelContentTouches` - -When false, once tracking starts, won't try to drag if the touch moves. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `centerContent` - -When true, the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `horizontal` - -When true, the scroll view's children are arranged horizontally in a row instead of vertically in a column. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `contentOffset` - -Used to manually set the starting scroll offset. The default value is `{x: 0, y: 0}`. - -| Type | Required | Platform | -| ------------- | -------- | -------- | -| PointPropType | No | iOS | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. Reasonable choices include - -- Normal: 0.998 (the default) -- Fast: 0.9 - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `directionalLockEnabled` - -When true, the ScrollView will try to lock to only vertical or horizontal scrolling while dragging. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `maximumZoomScale` - -The maximum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `minimumZoomScale` - -The minimum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `onScrollAnimationEnd` - -Called when a scrolling animation ends. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `pagingEnabled` - -When true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEnabled` - -When false, the content does not scroll. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEventThrottle` - -This controls how often the scroll event will be fired while scrolling (in events per seconds). A higher number yields better accuracy for code that is tracking the scroll position, but can lead to scroll performance problems due to the volume of information being send over the bridge. The default value is zero, which means the scroll event will be sent only once each time the view is scrolled. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `scrollIndicatorInsets` - -The amount by which the scroll view indicators are inset from the edges of the scroll view. This should normally be set to the same value as the `contentInset`. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `scrollsToTop` - -When true, the scroll view scrolls to top when the status bar is tapped. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `snapToAlignment` - -When `snapToInterval` is set, `snapToAlignment` will define the relationship of the the snapping to the scroll view. - -- `start` (the default) will align the snap at the left (horizontal) or top (vertical) -- `center` will align the snap in the center -- `end` will align the snap at the right (horizontal) or bottom (vertical) - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| enum('start', 'center', 'end') | No | iOS | - ---- - -### `snapToInterval` - -When set, causes the scroll view to stop at multiples of the value of `snapToInterval`. This can be used for paginating through children that have lengths smaller than the scroll view. Used in combination with `snapToAlignment`. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `stickyHeaderIndices` - -An array of child indices determining which children get docked to the top of the screen when scrolling. For example, passing `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction with `horizontal={true}`. - -| Type | Required | Platform | -| --------------- | -------- | -------- | -| array of number | No | iOS | - ---- - -### `zoomScale` - -The current scale of the scroll view content. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - -## Methods - -### `scrollTo()` - -```jsx -scrollTo(([destY]: number), ([destX]: number)); -``` - ---- - -### `scrollWithoutAnimationTo()` - -```jsx -scrollWithoutAnimationTo(([destY]: number), ([destX]: number)); -``` - ---- - -### `handleScroll()` - -```jsx -handleScroll((e: Event)); -``` diff --git a/website/versioned_docs/version-0.13/switch.md b/website/versioned_docs/version-0.13/switch.md deleted file mode 100644 index 2f287de7adf..00000000000 --- a/website/versioned_docs/version-0.13/switch.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: version-0.13-switch -title: Switch -original_id: switch ---- - -Universal two-state toggle component. - -### Props - -- [`disabled`](switch.md#disabled) -- [`onValueChange`](switch.md#onvaluechange) -- [`testID`](switch.md#testid) -- [`value`](switch.md#value) -- [`onTintColor`](switch.md#ontintcolor) -- [`thumbTintColor`](switch.md#thumbtintcolor) -- [`tintColor`](switch.md#tintcolor) - ---- - -# Reference - -## Props - -### `disabled` - -If true the user won't be able to toggle the switch. Default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onValueChange` - -Invoked with the new value when the value chages. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `value` - -The value of the switch. If true the switch will be turned on. Default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onTintColor` - -Background color when the switch is turned on. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | iOS | - ---- - -### `thumbTintColor` - -Color of the foreground switch grip. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | iOS | - ---- - -### `tintColor` - -Background color when the switch is turned off. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | iOS | diff --git a/website/versioned_docs/version-0.13/textinput.md b/website/versioned_docs/version-0.13/textinput.md deleted file mode 100644 index eb427172c95..00000000000 --- a/website/versioned_docs/version-0.13/textinput.md +++ /dev/null @@ -1,411 +0,0 @@ ---- -id: version-0.13-textinput -title: TextInput -original_id: textinput ---- - -A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. - -A nice use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. For example: - -``` - this.setState({text})} - value={this.state.text} - /> -``` - -Note that some props are only available with `multiline={true/false}`: - -``` - var onlyMultiline = { - onSelectionChange: true, // not supported in Open Source yet - onTextInput: true, // not supported in Open Source yet - children: true, - }; - - var notMultiline = { - onSubmitEditing: true, - }; -``` - -### Props - -- [`placeholderTextColor`](textinput.md#placeholdertextcolor) -- [`autoCapitalize`](textinput.md#autocapitalize) -- [`autoFocus`](textinput.md#autofocus) -- [`defaultValue`](textinput.md#defaultvalue) -- [`editable`](textinput.md#editable) -- [`keyboardType`](textinput.md#keyboardtype) -- [`multiline`](textinput.md#multiline) -- [`onBlur`](textinput.md#onblur) -- [`onChange`](textinput.md#onchange) -- [`onChangeText`](textinput.md#onchangetext) -- [`onEndEditing`](textinput.md#onendediting) -- [`onFocus`](textinput.md#onfocus) -- [`onLayout`](textinput.md#onlayout) -- [`onSubmitEditing`](textinput.md#onsubmitediting) -- [`placeholder`](textinput.md#placeholder) -- [`autoCorrect`](textinput.md#autocorrect) -- [`secureTextEntry`](textinput.md#securetextentry) -- [`style`](textinput.md#style) -- [`testID`](textinput.md#testid) -- [`textAlign`](textinput.md#textalign) -- [`value`](textinput.md#value) -- [`numberOfLines`](textinput.md#numberoflines) -- [`textAlignVertical`](textinput.md#textalignvertical) -- [`underlineColorAndroid`](textinput.md#underlinecolorandroid) -- [`clearButtonMode`](textinput.md#clearbuttonmode) -- [`clearTextOnFocus`](textinput.md#cleartextonfocus) -- [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) -- [`maxLength`](textinput.md#maxlength) -- [`returnKeyType`](textinput.md#returnkeytype) -- [`selectTextOnFocus`](textinput.md#selecttextonfocus) -- [`selectionState`](textinput.md#selectionstate) - -### Methods - -- [`isFocused`](textinput.md#isfocused) -- [`clear`](textinput.md#clear) - ---- - -# Reference - -## Props - -### `placeholderTextColor` - -The text color of the placeholder string - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `autoCapitalize` - -Can tell TextInput to automatically capitalize certain characters. - -- characters: all characters, -- words: first letter of each word -- sentences: first letter of each sentence (default) -- none: don't auto capitalize anything - -| Type | Required | -| ------------------------------------------------ | -------- | -| enum('none', 'sentences', 'words', 'characters') | No | - ---- - -### `autoFocus` - -If true, focuses the input on componentDidMount. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `defaultValue` - -Provides an initial value that will change when the user starts typing. Useful for use-cases where you don't want to deal with listening to events and updating the value prop to keep the controlled state in sync. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `editable` - -If false, text is not editable. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `keyboardType` - -Determines which keyboard to open, e.g.`numeric`. - -The following values work across platforms: - -- default -- numeric -- email-address - -| Type | Required | -| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| enum('default', 'numeric', 'email-address', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | - ---- - -### `multiline` - -If true, the text input can be multiple lines. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onBlur` - -Callback that is called when the text input is blurred - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChange` - -Callback that is called when the text input's text changes. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChangeText` - -Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onEndEditing` - -Callback that is called when text input ends. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onFocus` - -Callback that is called when the text input is focused - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{x, y, width, height}`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onSubmitEditing` - -Callback that is called when the text input's submit button is pressed. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `placeholder` - -The string that will be rendered before text input has been entered - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `autoCorrect` - -If false, disables auto-correct. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `secureTextEntry` - -If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -Styles - -| Type | Required | -| --------------------- | -------- | -| [Text](text.md#style) | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `textAlign` - -Set the position of the cursor from where editing will begin. @platorm android - -| Type | Required | -| ------------------------------ | -------- | -| enum('start', 'center', 'end') | No | - ---- - -### `value` - -The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `numberOfLines` - -Sets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | Android | - ---- - -### `textAlignVertical` - -Aligns text vertically within the TextInput. - -| Type | Required | Platform | -| ------------------------------- | -------- | -------- | -| enum('top', 'center', 'bottom') | No | Android | - ---- - -### `underlineColorAndroid` - -The color of the textInput underline. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `clearButtonMode` - -When the clear button should appear on the right side of the text view - -| Type | Required | Platform | -| ---------------------------------------------------------- | -------- | -------- | -| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | - ---- - -### `clearTextOnFocus` - -If true, clears the text field automatically when editing begins - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `enablesReturnKeyAutomatically` - -If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `maxLength` - -Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `returnKeyType` - -Determines how the return key should look. - -| Type | Required | Platform | -| ------------------------------------------------------------------------------------------------------------- | -------- | -------- | -| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | iOS | - ---- - -### `selectTextOnFocus` - -If true, all text will automatically be selected on focus - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `selectionState` - -See DocumentSelectionState.js, some state that is responsible for maintaining selection information for a document - -| Type | Required | Platform | -| ---------------------- | -------- | -------- | -| DocumentSelectionState | No | iOS | - -## Methods - -### `isFocused()` - -```jsx -isFocused(): -``` - ---- - -### `clear()` - -```jsx -clear(); -``` diff --git a/website/versioned_docs/version-0.13/toolbarandroid.md b/website/versioned_docs/version-0.13/toolbarandroid.md deleted file mode 100644 index f4a3a36fabb..00000000000 --- a/website/versioned_docs/version-0.13/toolbarandroid.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: version-0.13-toolbarandroid -title: ToolbarAndroid -original_id: toolbarandroid ---- - -React component that wraps the Android-only [`Toolbar` widget][0]. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right. - -If the toolbar has an only child, it will be displayed between the title and actions. - -Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where `require('./some_icon.png')` translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using `require('./some_icon.png')` will do this automatically for you, so as long as you don't explicitly use e.g. `{uri: 'http://...'}`, you will be good. - -Example: - -``` -render: function() { - return ( - - ) -}, -onActionSelected: function(position) { - if (position === 0) { // index of 'Settings' - showSettings(); - } -} -``` - -[0]: https://developer.android.com/reference/android/support/v7/widget/Toolbar.html - -### Props - -- [`actions`](toolbarandroid.md#actions) -- [`logo`](toolbarandroid.md#logo) -- [`navIcon`](toolbarandroid.md#navicon) -- [`onActionSelected`](toolbarandroid.md#onactionselected) -- [`onIconClicked`](toolbarandroid.md#oniconclicked) -- [`subtitle`](toolbarandroid.md#subtitle) -- [`subtitleColor`](toolbarandroid.md#subtitlecolor) -- [`testID`](toolbarandroid.md#testid) -- [`title`](toolbarandroid.md#title) -- [`titleColor`](toolbarandroid.md#titlecolor) - ---- - -# Reference - -## Props - -### `actions` - -Sets possible actions on the toolbar as part of the action menu. These are displayed as icons or text on the right side of the widget. If they don't fit they are placed in an 'overflow' menu. - -This property takes an array of objects, where each object has the following keys: - -- `title`: **required**, the title of this action -- `icon`: the icon for this action, e.g. `require('image!some_icon')` -- `show`: when to show this action as an icon or hide it in the overflow menu: `always`, `ifRoom` or `never` -- `showWithText`: boolean, whether to show text alongside the icon or not - -| Type | Required | -| --------------------------------------------------------------------------------------------------------------------- | -------- | -| array of object: {title: string,icon: optionalImageSource,show: enum('always', 'ifRoom', 'never'),showWithText: bool} | No | - ---- - -### `logo` - -Sets the toolbar logo. - -| Type | Required | -| ------------------- | -------- | -| optionalImageSource | No | - ---- - -### `navIcon` - -Sets the navigation icon. - -| Type | Required | -| ------------------- | -------- | -| optionalImageSource | No | - ---- - -### `onActionSelected` - -Callback that is called when an action is selected. The only argument that is passeed to the callback is the position of the action in the actions array. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onIconClicked` - -Callback called when the icon is selected. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `subtitle` - -Sets the toolbar subtitle. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `subtitleColor` - -Sets the toolbar subtitle color. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `title` - -Sets the toolbar title. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `titleColor` - -Sets the toolbar title color. - -| Type | Required | -| ------ | -------- | -| string | No | diff --git a/website/versioned_docs/version-0.13/touchablehighlight.md b/website/versioned_docs/version-0.13/touchablehighlight.md deleted file mode 100644 index 6f095d6e047..00000000000 --- a/website/versioned_docs/version-0.13/touchablehighlight.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: version-0.13-touchablehighlight -title: TouchableHighlight -original_id: touchablehighlight ---- - -A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view. The underlay comes from adding a view to the view hierarchy, which can 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. - -Example: - -``` -renderButton: function() { - return ( - - - - ); -}, -``` - -> **NOTE**: TouchableHighlight supports only one child -> -> If you wish to have several child components, wrap them in a View. - -### Props - -- [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) - -* [`activeOpacity`](touchablehighlight.md#activeopacity) -* [`onHideUnderlay`](touchablehighlight.md#onhideunderlay) -* [`onShowUnderlay`](touchablehighlight.md#onshowunderlay) -* [`style`](touchablehighlight.md#style) -* [`underlayColor`](touchablehighlight.md#underlaycolor) - -### Methods - -- [`computeSyntheticState`](touchablehighlight.md#computesyntheticstate) - ---- - -# Reference - -## Props - -### `activeOpacity` - -Determines what the opacity of the wrapped view should be when touch is active. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `onHideUnderlay` - -Called immediately after the underlay is hidden - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onShowUnderlay` - -Called immediately after the underlay is shown - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `style` - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `underlayColor` - -The color of the underlay that will show through when the touch is active. - -| Type | Required | -| ------ | -------- | -| string | No | - -## Methods - -### `computeSyntheticState()` - -```jsx -computeSyntheticState(props); -``` diff --git a/website/versioned_docs/version-0.13/transforms.md b/website/versioned_docs/version-0.13/transforms.md deleted file mode 100644 index 2a880a9963a..00000000000 --- a/website/versioned_docs/version-0.13/transforms.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -id: version-0.13-transforms -title: Transforms -original_id: transforms ---- - -### Props - -- [`transform`](transforms.md#transform) -- [`transformMatrix`](transforms.md#transformmatrix) - ---- - -# Reference - -## Props - -### `transform` - -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| array of object: {perspective: number}, ,object: {rotate: string}, ,object: {rotateX: string}, ,object: {rotateY: string}, ,object: {rotateZ: string}, ,object: {scale: number}, ,object: {scaleX: number}, ,object: {scaleY: number}, ,object: {translateX: number}, ,object: {translateY: number}, ,object: {skewX: string}, ,object: {skewY: string} | No | - ---- - -### `transformMatrix` - -| Type | Required | -| ----------------------- | -------- | -| TransformMatrixPropType | No | diff --git a/website/versioned_docs/version-0.13/view-style-props.md b/website/versioned_docs/version-0.13/view-style-props.md deleted file mode 100644 index eae92b04c96..00000000000 --- a/website/versioned_docs/version-0.13/view-style-props.md +++ /dev/null @@ -1,228 +0,0 @@ ---- -id: version-0.13-view-style-props -title: View Style Props -original_id: view-style-props ---- - -### Props - -- [`borderStyle`](view-style-props.md#borderstyle) -- [`backfaceVisibility`](view-style-props.md#backfacevisibility) -- [`borderBottomColor`](view-style-props.md#borderbottomcolor) -- [`borderBottomLeftRadius`](view-style-props.md#borderbottomleftradius) -- [`borderBottomRightRadius`](view-style-props.md#borderbottomrightradius) -- [`borderBottomWidth`](view-style-props.md#borderbottomwidth) -- [`borderColor`](view-style-props.md#bordercolor) -- [`borderLeftColor`](view-style-props.md#borderleftcolor) -- [`borderLeftWidth`](view-style-props.md#borderleftwidth) -- [`borderRadius`](view-style-props.md#borderradius) -- [`borderRightColor`](view-style-props.md#borderrightcolor) -- [`borderRightWidth`](view-style-props.md#borderrightwidth) -- [`backgroundColor`](view-style-props.md#backgroundcolor) -- [`borderTopColor`](view-style-props.md#bordertopcolor) -- [`borderTopLeftRadius`](view-style-props.md#bordertopleftradius) -- [`borderTopRightRadius`](view-style-props.md#bordertoprightradius) -- [`borderTopWidth`](view-style-props.md#bordertopwidth) -- [`borderWidth`](view-style-props.md#borderwidth) -- [`opacity`](view-style-props.md#opacity) -- [`overflow`](view-style-props.md#overflow) -- [`shadowColor`](view-style-props.md#shadowcolor) -- [`shadowOffset`](view-style-props.md#shadowoffset) -- [`shadowOpacity`](view-style-props.md#shadowopacity) -- [`shadowRadius`](view-style-props.md#shadowradius) - ---- - -# Reference - -## Props - -### `borderStyle` - -| Type | Required | -| --------------------------------- | -------- | -| enum('solid', 'dotted', 'dashed') | No | - ---- - -### `backfaceVisibility` - -| Type | Required | -| ------------------------- | -------- | -| enum('visible', 'hidden') | No | - ---- - -### `borderBottomColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `borderBottomLeftRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderBottomRightRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderBottomWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `borderLeftColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `borderLeftWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderRightColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `borderRightWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `backgroundColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `borderTopColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `borderTopLeftRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderTopRightRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderTopWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `opacity` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `overflow` - -| Type | Required | -| ------------------------- | -------- | -| enum('visible', 'hidden') | No | - ---- - -### `shadowColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `shadowOffset` - -| Type | Required | -| -------------------------------------- | -------- | -| object: {width: number,height: number} | No | - ---- - -### `shadowOpacity` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `shadowRadius` - -| Type | Required | -| ------ | -------- | -| number | No | diff --git a/website/versioned_docs/version-0.13/viewpagerandroid.md b/website/versioned_docs/version-0.13/viewpagerandroid.md deleted file mode 100644 index 4bf02339410..00000000000 --- a/website/versioned_docs/version-0.13/viewpagerandroid.md +++ /dev/null @@ -1,109 +0,0 @@ ---- -id: version-0.13-viewpagerandroid -title: ViewPagerAndroid -original_id: viewpagerandroid ---- - -Container that allows to flip left and right between child views. Each child view of the `ViewPagerAndroid` will be treated as a separate page and will be streched to fill the `ViewPagerAndroid`. - -It is important all children are ``s and not composite components. You can set style properties like `padding` or `backgroundColor` for each child. - -Example: - -``` -render: function() { - return ( - - - First page - - - Second page - - - ); -} - -... - -var styles = { - ... - pageStyle: { - alignItems: 'center', - padding: 20, - } -} -``` - -### Props - -- [`initialPage`](viewpagerandroid.md#initialpage) -- [`keyboardDismissMode`](viewpagerandroid.md#keyboarddismissmode) -- [`onPageScroll`](viewpagerandroid.md#onpagescroll) -- [`onPageSelected`](viewpagerandroid.md#onpageselected) - -### Methods - -- [`setPage`](viewpagerandroid.md#setpage) - ---- - -# Reference - -## Props - -### `initialPage` - -Index of initial page that should be selected. Use `setPage` method to update the page, and `onPageSelected` to monitor page changes - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. - -| Type | Required | -| ----------------------- | -------- | -| enum('none', 'on-drag') | No | - ---- - -### `onPageScroll` - -Executed when transitioning between pages (ether because of animation for the requested page change or when user is swiping/dragging between pages) The `event.nativeEvent` object for this callback will carry following data: - -- position - index of first page from the left that is currently visible -- offset - value from range [0,1) describing stage between page transitions. Value x means that (1 - x) fraction of the page at "position" index is visible, and x fraction of the next page is visible. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPageSelected` - -This callback will be caleld once ViewPager finish navigating to selected page (when user swipes between pages). The `event.nativeEvent` object passed to this callback will have following fields: - -- position - index of page that has been selected - -| Type | Required | -| -------- | -------- | -| function | No | - -## Methods - -### `setPage()` - -```jsx -setPage(selectedPage); -``` diff --git a/website/versioned_docs/version-0.14/modal.md b/website/versioned_docs/version-0.14/modal.md deleted file mode 100644 index d28a7b48bcd..00000000000 --- a/website/versioned_docs/version-0.14/modal.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -id: version-0.14-modal -title: Modal -original_id: modal ---- - -A Modal component covers the native view (e.g. UIViewController, Activity) that contains the React Native root. - -Use Modal in hybrid apps that embed React Native; Modal allows the portion of your app written in React Native to present content above the enclosing native view hierarchy. - -In apps written with React Native from the root view down, you should use Navigator instead of Modal. With a top-level Navigator, you have more control over how to present the modal scene over the rest of your app by using the configureScene property. - -### Props - -- [`animated`](modal.md#animated) -- [`onDismiss`](modal.md#ondismiss) -- [`transparent`](modal.md#transparent) - ---- - -# Reference - -## Props - -### `animated` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onDismiss` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `transparent` - -| Type | Required | -| ---- | -------- | -| bool | No | diff --git a/website/versioned_docs/version-0.14/pushnotificationios.md b/website/versioned_docs/version-0.14/pushnotificationios.md deleted file mode 100644 index 285f868b4a6..00000000000 --- a/website/versioned_docs/version-0.14/pushnotificationios.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -id: version-0.14-pushnotificationios -title: PushNotificationIOS -original_id: pushnotificationios ---- - -Handle push notifications for your app, including permission handling and icon badge number. - -To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). - -To enable support for `notification` and `register` events you need to augment your AppDelegate. - -At the top of your `AppDelegate.m`: - -`#import "RCTPushNotificationManager.h"` - -And then in your AppDelegate implementation add the following: - -``` -// Required for the register event. - - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken - { - [RCTPushNotificationManager application:application didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; - } - // Required for the notification event. - - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification - { - [RCTPushNotificationManager application:application didReceiveRemoteNotification:notification]; - } -``` - -### Methods - -- [`presentLocalNotification`](pushnotificationios.md#presentlocalnotification) -- [`scheduleLocalNotification`](pushnotificationios.md#schedulelocalnotification) -- [`cancelAllLocalNotifications`](pushnotificationios.md#cancelalllocalnotifications) -- [`setApplicationIconBadgeNumber`](pushnotificationios.md#setapplicationiconbadgenumber) -- [`getApplicationIconBadgeNumber`](pushnotificationios.md#getapplicationiconbadgenumber) -- [`addEventListener`](pushnotificationios.md#addeventlistener) -- [`requestPermissions`](pushnotificationios.md#requestpermissions) -- [`abandonPermissions`](pushnotificationios.md#abandonpermissions) -- [`checkPermissions`](pushnotificationios.md#checkpermissions) -- [`removeEventListener`](pushnotificationios.md#removeeventlistener) -- [`popInitialNotification`](pushnotificationios.md#popinitialnotification) -- [`constructor`](pushnotificationios.md#constructor) -- [`getMessage`](pushnotificationios.md#getmessage) -- [`getSound`](pushnotificationios.md#getsound) -- [`getAlert`](pushnotificationios.md#getalert) -- [`getBadgeCount`](pushnotificationios.md#getbadgecount) -- [`getData`](pushnotificationios.md#getdata) - ---- - -# Reference - -## Methods - -### `presentLocalNotification()` - -```jsx -static presentLocalNotification(details) -``` - -Schedules the localNotification for immediate presentation. - -details is an object containing: - -- `alertBody` : The message displayed in the notification alert. - ---- - -### `scheduleLocalNotification()` - -```jsx -static scheduleLocalNotification(details) -``` - -Schedules the localNotification for future presentation. - -details is an object containing: - -- `fireDate` : The date and time when the system should deliver the notification. -- `alertBody` : The message displayed in the notification alert. - ---- - -### `cancelAllLocalNotifications()` - -```jsx -static cancelAllLocalNotifications() -``` - -Cancels all scheduled localNotifications - ---- - -### `setApplicationIconBadgeNumber()` - -```jsx -static setApplicationIconBadgeNumber(number) -``` - -Sets the badge number for the app icon on the home screen - ---- - -### `getApplicationIconBadgeNumber()` - -```jsx -static getApplicationIconBadgeNumber(callback) -``` - -Gets the current badge number for the app icon on the home screen - ---- - -### `addEventListener()` - -```jsx -static addEventListener(type, handler) -``` - -Attaches a listener to remote notification events while the app is running in the foreground or the background. - -Valid events are: - -- `notification` : Fired when a remote notification is received. The handler will be invoked with an instance of `PushNotificationIOS`. -- `register`: Fired when the user registers for remote notifications. The handler will be invoked with a hex string representing the deviceToken. - ---- - -### `requestPermissions()` - -```jsx -static requestPermissions(permissions?) -``` - -Requests notification permissions from iOS, prompting the user's dialog box. By default, it will request all notification permissions, but a subset of these can be requested by passing a map of requested permissions. The following permissions are supported: - -- `alert` -- `badge` -- `sound` - -If a map is provided to the method, only the permissions with truthy values will be requested. - ---- - -### `abandonPermissions()` - -```jsx -static abandonPermissions() -``` - -Unregister for all remote notifications received via Apple Push Notification service. - -You should call this method in rare circumstances only, such as when a new version of the app removes support for all types of remote notifications. Users can temporarily prevent apps from receiving remote notifications through the Notifications section of the Settings app. Apps unregistered through this method can always re-register. - ---- - -### `checkPermissions()` - -```jsx -static checkPermissions(callback) -``` - -See what push permissions are currently enabled. `callback` will be invoked with a `permissions` object: - -- `alert` :boolean -- `badge` :boolean -- `sound` :boolean - ---- - -### `removeEventListener()` - -```jsx -static removeEventListener(type, handler) -``` - -Removes the event listener. Do this in `componentWillUnmount` to prevent memory leaks - ---- - -### `popInitialNotification()` - -```jsx -static popInitialNotification() -``` - -An initial notification will be available if the app was cold-launched from a notification. - -The first caller of `popInitialNotification` will get the initial notification object, or `null`. Subsequent invocations will return null. - ---- - -### `constructor()` - -```jsx -constructor(nativeNotif); -``` - -You will never need to instansiate `PushNotificationIOS` yourself. Listening to the `notification` event and invoking `popInitialNotification` is sufficient - ---- - -### `getMessage()` - -```jsx -getMessage(); -``` - -An alias for `getAlert` to get the notification's main message string - ---- - -### `getSound()` - -```jsx -getSound(); -``` - -Gets the sound string from the `aps` object - ---- - -### `getAlert()` - -```jsx -getAlert(); -``` - -Gets the notification's main message from the `aps` object - ---- - -### `getBadgeCount()` - -```jsx -getBadgeCount(); -``` - -Gets the badge count number from the `aps` object - ---- - -### `getData()` - -```jsx -getData(); -``` - -Gets the data object on the notif diff --git a/website/versioned_docs/version-0.14/snapshotviewios.md b/website/versioned_docs/version-0.14/snapshotviewios.md deleted file mode 100644 index 5b9bc407ce6..00000000000 --- a/website/versioned_docs/version-0.14/snapshotviewios.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: version-0.14-snapshotviewios -title: SnapshotViewIOS -original_id: snapshotviewios ---- - -### Props - -- [`onSnapshotReady`](snapshotviewios.md#onsnapshotready) -- [`testIdentifier`](snapshotviewios.md#testidentifier) - -### Methods - -- [`onDefaultAction`](snapshotviewios.md#ondefaultaction) - ---- - -# Reference - -## Props - -### `onSnapshotReady` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `testIdentifier` - -| Type | Required | -| ------ | -------- | -| string | No | - -## Methods - -### `onDefaultAction()` - -```jsx -onDefaultAction((event: Object)); -``` diff --git a/website/versioned_docs/version-0.14/textinput.md b/website/versioned_docs/version-0.14/textinput.md deleted file mode 100644 index 690a8fec279..00000000000 --- a/website/versioned_docs/version-0.14/textinput.md +++ /dev/null @@ -1,411 +0,0 @@ ---- -id: version-0.14-textinput -title: TextInput -original_id: textinput ---- - -A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. - -One use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example: - -``` - this.setState({text})} - value={this.state.text} - /> -``` - -Note that some props are only available with `multiline={true/false}`: - -``` - var onlyMultiline = { - onSelectionChange: true, // not supported in Open Source yet - onTextInput: true, // not supported in Open Source yet - children: true, - }; - - var notMultiline = { - onSubmitEditing: true, - }; -``` - -### Props - -- [`placeholderTextColor`](textinput.md#placeholdertextcolor) -- [`autoCapitalize`](textinput.md#autocapitalize) -- [`autoFocus`](textinput.md#autofocus) -- [`defaultValue`](textinput.md#defaultvalue) -- [`editable`](textinput.md#editable) -- [`keyboardType`](textinput.md#keyboardtype) -- [`multiline`](textinput.md#multiline) -- [`onBlur`](textinput.md#onblur) -- [`onChange`](textinput.md#onchange) -- [`onChangeText`](textinput.md#onchangetext) -- [`onEndEditing`](textinput.md#onendediting) -- [`onFocus`](textinput.md#onfocus) -- [`onLayout`](textinput.md#onlayout) -- [`onSubmitEditing`](textinput.md#onsubmitediting) -- [`placeholder`](textinput.md#placeholder) -- [`autoCorrect`](textinput.md#autocorrect) -- [`secureTextEntry`](textinput.md#securetextentry) -- [`style`](textinput.md#style) -- [`testID`](textinput.md#testid) -- [`value`](textinput.md#value) -- [`numberOfLines`](textinput.md#numberoflines) -- [`textAlign`](textinput.md#textalign) -- [`textAlignVertical`](textinput.md#textalignvertical) -- [`underlineColorAndroid`](textinput.md#underlinecolorandroid) -- [`clearButtonMode`](textinput.md#clearbuttonmode) -- [`clearTextOnFocus`](textinput.md#cleartextonfocus) -- [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) -- [`maxLength`](textinput.md#maxlength) -- [`returnKeyType`](textinput.md#returnkeytype) -- [`selectTextOnFocus`](textinput.md#selecttextonfocus) -- [`selectionState`](textinput.md#selectionstate) - -### Methods - -- [`isFocused`](textinput.md#isfocused) -- [`clear`](textinput.md#clear) - ---- - -# Reference - -## Props - -### `placeholderTextColor` - -The text color of the placeholder string - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `autoCapitalize` - -Can tell TextInput to automatically capitalize certain characters. - -- characters: all characters, -- words: first letter of each word -- sentences: first letter of each sentence (default) -- none: don't auto capitalize anything - -| Type | Required | -| ------------------------------------------------ | -------- | -| enum('none', 'sentences', 'words', 'characters') | No | - ---- - -### `autoFocus` - -If true, focuses the input on componentDidMount. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `defaultValue` - -Provides an initial value that will change when the user starts typing. Useful for use-cases where you don't want to deal with listening to events and updating the value prop to keep the controlled state in sync. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `editable` - -If false, text is not editable. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `keyboardType` - -Determines which keyboard to open, e.g.`numeric`. - -The following values work across platforms: - -- default -- numeric -- email-address - -| Type | Required | -| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| enum('default', 'numeric', 'email-address', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | - ---- - -### `multiline` - -If true, the text input can be multiple lines. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onBlur` - -Callback that is called when the text input is blurred - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChange` - -Callback that is called when the text input's text changes. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChangeText` - -Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onEndEditing` - -Callback that is called when text input ends. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onFocus` - -Callback that is called when the text input is focused - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{x, y, width, height}`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onSubmitEditing` - -Callback that is called when the text input's submit button is pressed. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `placeholder` - -The string that will be rendered before text input has been entered - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `autoCorrect` - -If false, disables auto-correct. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `secureTextEntry` - -If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -Styles - -| Type | Required | -| --------------------- | -------- | -| [Text](text.md#style) | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `value` - -The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `numberOfLines` - -Sets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | Android | - ---- - -### `textAlign` - -Set the position of the cursor from where editing will begin. - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| enum('start', 'center', 'end') | No | Android | - ---- - -### `textAlignVertical` - -Aligns text vertically within the TextInput. - -| Type | Required | Platform | -| ------------------------------- | -------- | -------- | -| enum('top', 'center', 'bottom') | No | Android | - ---- - -### `underlineColorAndroid` - -The color of the textInput underline. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `clearButtonMode` - -When the clear button should appear on the right side of the text view - -| Type | Required | Platform | -| ---------------------------------------------------------- | -------- | -------- | -| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | - ---- - -### `clearTextOnFocus` - -If true, clears the text field automatically when editing begins - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `enablesReturnKeyAutomatically` - -If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `maxLength` - -Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `returnKeyType` - -Determines how the return key should look. - -| Type | Required | Platform | -| ------------------------------------------------------------------------------------------------------------- | -------- | -------- | -| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | iOS | - ---- - -### `selectTextOnFocus` - -If true, all text will automatically be selected on focus - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `selectionState` - -See DocumentSelectionState.js, some state that is responsible for maintaining selection information for a document - -| Type | Required | Platform | -| ---------------------- | -------- | -------- | -| DocumentSelectionState | No | iOS | - -## Methods - -### `isFocused()` - -```jsx -isFocused(): -``` - ---- - -### `clear()` - -```jsx -clear(); -``` diff --git a/website/versioned_docs/version-0.14/toolbarandroid.md b/website/versioned_docs/version-0.14/toolbarandroid.md deleted file mode 100644 index a4639edcef1..00000000000 --- a/website/versioned_docs/version-0.14/toolbarandroid.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -id: version-0.14-toolbarandroid -title: ToolbarAndroid -original_id: toolbarandroid ---- - -React component that wraps the Android-only [`Toolbar` widget][0]. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right. - -If the toolbar has an only child, it will be displayed between the title and actions. - -Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where `require('./some_icon.png')` translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using `require('./some_icon.png')` will do this automatically for you, so as long as you don't explicitly use e.g. `{uri: 'http://...'}`, you will be good. - -Example: - -``` -render: function() { - return ( - - ) -}, -onActionSelected: function(position) { - if (position === 0) { // index of 'Settings' - showSettings(); - } -} -``` - -[0]: https://developer.android.com/reference/android/support/v7/widget/Toolbar.html - -### Props - -- [`overflowIcon`](toolbarandroid.md#overflowicon) -- [`actions`](toolbarandroid.md#actions) -- [`navIcon`](toolbarandroid.md#navicon) -- [`onActionSelected`](toolbarandroid.md#onactionselected) -- [`onIconClicked`](toolbarandroid.md#oniconclicked) -- [`logo`](toolbarandroid.md#logo) -- [`subtitle`](toolbarandroid.md#subtitle) -- [`subtitleColor`](toolbarandroid.md#subtitlecolor) -- [`testID`](toolbarandroid.md#testid) -- [`title`](toolbarandroid.md#title) -- [`titleColor`](toolbarandroid.md#titlecolor) - ---- - -# Reference - -## Props - -### `overflowIcon` - -Sets the overflow icon. - -| Type | Required | -| ------------------- | -------- | -| optionalImageSource | No | - ---- - -### `actions` - -Sets possible actions on the toolbar as part of the action menu. These are displayed as icons or text on the right side of the widget. If they don't fit they are placed in an 'overflow' menu. - -This property takes an array of objects, where each object has the following keys: - -- `title`: **required**, the title of this action -- `icon`: the icon for this action, e.g. `require('image!some_icon')` -- `show`: when to show this action as an icon or hide it in the overflow menu: `always`, `ifRoom` or `never` -- `showWithText`: boolean, whether to show text alongside the icon or not - -| Type | Required | -| --------------------------------------------------------------------------------------------------------------------- | -------- | -| array of object: {title: string,icon: optionalImageSource,show: enum('always', 'ifRoom', 'never'),showWithText: bool} | No | - ---- - -### `navIcon` - -Sets the navigation icon. - -| Type | Required | -| ------------------- | -------- | -| optionalImageSource | No | - ---- - -### `onActionSelected` - -Callback that is called when an action is selected. The only argument that is passeed to the callback is the position of the action in the actions array. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onIconClicked` - -Callback called when the icon is selected. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `logo` - -Sets the toolbar logo. - -| Type | Required | -| ------------------- | -------- | -| optionalImageSource | No | - ---- - -### `subtitle` - -Sets the toolbar subtitle. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `subtitleColor` - -Sets the toolbar subtitle color. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `title` - -Sets the toolbar title. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `titleColor` - -Sets the toolbar title color. - -| Type | Required | -| ------ | -------- | -| string | No | diff --git a/website/versioned_docs/version-0.14/transforms.md b/website/versioned_docs/version-0.14/transforms.md deleted file mode 100644 index b8c52698e8e..00000000000 --- a/website/versioned_docs/version-0.14/transforms.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -id: version-0.14-transforms -title: Transforms -original_id: transforms ---- - -### Props - -- [`rotation`](transforms.md#rotation) -- [`scaleX`](transforms.md#scalex) -- [`scaleY`](transforms.md#scaley) -- [`transform`](transforms.md#transform) -- [`transformMatrix`](transforms.md#transformmatrix) -- [`translateX`](transforms.md#translatex) -- [`translateY`](transforms.md#translatey) - ---- - -# Reference - -## Props - -### `rotation` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `scaleX` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `scaleY` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `transform` - -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| array of object: {perspective: number}, ,object: {rotate: string}, ,object: {rotateX: string}, ,object: {rotateY: string}, ,object: {rotateZ: string}, ,object: {scale: number}, ,object: {scaleX: number}, ,object: {scaleY: number}, ,object: {translateX: number}, ,object: {translateY: number}, ,object: {skewX: string}, ,object: {skewY: string} | No | - ---- - -### `transformMatrix` - -| Type | Required | -| ----------------------- | -------- | -| TransformMatrixPropType | No | - ---- - -### `translateX` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `translateY` - -| Type | Required | -| ------ | -------- | -| number | No | diff --git a/website/versioned_docs/version-0.15/asyncstorage.md b/website/versioned_docs/version-0.15/asyncstorage.md deleted file mode 100644 index 7d8c5bb7a74..00000000000 --- a/website/versioned_docs/version-0.15/asyncstorage.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -id: version-0.15-asyncstorage -title: AsyncStorage -original_id: asyncstorage ---- - -AsyncStorage is an asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage. - -It is recommended that you use an abstraction on top of AsyncStorage instead of AsyncStorage directly for anything more than light usage since it operates globally. - -This JS code is a facade over the native iOS implementation to provide a clear JS API, real Error objects, and non-multi functions. Each method returns a `Promise` object. - -### Methods - -- [`getItem`](asyncstorage.md#getitem) -- [`setItem`](asyncstorage.md#setitem) -- [`removeItem`](asyncstorage.md#removeitem) -- [`mergeItem`](asyncstorage.md#mergeitem) -- [`clear`](asyncstorage.md#clear) -- [`getAllKeys`](asyncstorage.md#getallkeys) -- [`multiGet`](asyncstorage.md#multiget) -- [`multiSet`](asyncstorage.md#multiset) -- [`multiRemove`](asyncstorage.md#multiremove) -- [`multiMerge`](asyncstorage.md#multimerge) - ---- - -# Reference - -## Methods - -### `getItem()` - -```jsx -static getItem(key, callback?) -``` - -Fetches `key` and passes the result to `callback`, along with an `Error` if there is any. Returns a `Promise` object. - ---- - -### `setItem()` - -```jsx -static setItem(key, value, callback?) -``` - -Sets `value` for `key` and calls `callback` on completion, along with an `Error` if there is any. Returns a `Promise` object. - ---- - -### `removeItem()` - -```jsx -static removeItem(key, callback?) -``` - -Returns a `Promise` object. - ---- - -### `mergeItem()` - -```jsx -static mergeItem(key, value, callback?) -``` - -Merges existing value with input value, assuming they are stringified json. Returns a `Promise` object. Not supported by all native implementations. - ---- - -### `clear()` - -```jsx -static clear(callback?) -``` - -Erases _all_ AsyncStorage for all clients, libraries, etc. You probably don't want to call this - use removeItem or multiRemove to clear only your own keys instead. Returns a `Promise` object. - ---- - -### `getAllKeys()` - -```jsx -static getAllKeys(callback?) -``` - -Gets _all_ keys known to the app, for all callers, libraries, etc. Returns a `Promise` object. - ---- - -### `multiGet()` - -```jsx -static multiGet(keys, callback?) -``` - -multiGet invokes callback with an array of key-value pair arrays that matches the input format of multiSet. Returns a `Promise` object. - -multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']]) - ---- - -### `multiSet()` - -```jsx -static multiSet(keyValuePairs, callback?) -``` - -multiSet and multiMerge take arrays of key-value array pairs that match the output of multiGet, e.g. Returns a `Promise` object. - -multiSet([['k1', 'val1'], ['k2', 'val2']], cb); - ---- - -### `multiRemove()` - -```jsx -static multiRemove(keys, callback?) -``` - -Delete all the keys in the `keys` array. Returns a `Promise` object. - ---- - -### `multiMerge()` - -```jsx -static multiMerge(keyValuePairs, callback?) -``` - -Merges existing values with input values, assuming they are stringified json. Returns a `Promise` object. - -Not supported by all native implementations. diff --git a/website/versioned_docs/version-0.15/cameraroll.md b/website/versioned_docs/version-0.15/cameraroll.md deleted file mode 100644 index ba60876f4a4..00000000000 --- a/website/versioned_docs/version-0.15/cameraroll.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: version-0.15-cameraroll -title: CameraRoll -original_id: cameraroll ---- - -`CameraRoll` provides access to the local camera roll / gallery. - -### Methods - -- [`saveImageWithTag`](cameraroll.md#saveimagewithtag) -- [`getPhotos`](cameraroll.md#getphotos) - ---- - -# Reference - -## Methods - -### `saveImageWithTag()` - -```jsx -static saveImageWithTag(tag, successCallback, errorCallback) -``` - -Saves the image to the camera roll / gallery. - -The CameraRoll API is not yet implemented for Android. - -@param {string} tag On Android, this is a local URI, such as `"file:///sdcard/img.png"`. - -On iOS, the tag can be one of the following: - -- local URI -- assets-library tag -- a tag not maching any of the above, which means the image data will be stored in memory (and consume memory as long as the process is alive) - -@param successCallback Invoked with the value of `tag` on success. @param errorCallback Invoked with error message on error. - ---- - -### `getPhotos()` - -```jsx -static getPhotos(params, callback, errorCallback) -``` - -Invokes `callback` with photo identifier objects from the local camera roll of the device matching shape defined by `getPhotosReturnChecker`. - -@param {object} params See `getPhotosParamChecker`. @param {function} callback Invoked with arg of shape defined by `getPhotosReturnChecker` on success. @param {function} errorCallback Invoked with error message on error. diff --git a/website/versioned_docs/version-0.15/geolocation.md b/website/versioned_docs/version-0.15/geolocation.md deleted file mode 100644 index 5030554f039..00000000000 --- a/website/versioned_docs/version-0.15/geolocation.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: version-0.15-geolocation -title: Geolocation -original_id: geolocation ---- - -The Geolocation API follows the web spec: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation - -### iOS - -You need to include the `NSLocationWhenInUseUsageDescription` key in Info.plist to enable geolocation. Geolocation is enabled by default when you create a project with `react-native init`. - -### Android - -To request access to location, you need to add the following line to your app's `AndroidManifest.xml`: - -`` - -### Methods - -- [`getCurrentPosition`](geolocation.md#getcurrentposition) -- [`watchPosition`](geolocation.md#watchposition) -- [`clearWatch`](geolocation.md#clearwatch) -- [`stopObserving`](geolocation.md#stopobserving) - ---- - -# Reference - -## Methods - -### `getCurrentPosition()` - -```jsx -static getCurrentPosition(geo_success, geo_error?, geo_options?) -``` - -Invokes the success callback once with the latest location info. Supported options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool) - ---- - -### `watchPosition()` - -```jsx -static watchPosition(success, error?, options?) -``` - -Invokes the success callback whenever the location changes. Supported options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool) - ---- - -### `clearWatch()` - -```jsx -static clearWatch(watchID) -``` - ---- - -### `stopObserving()` - -```jsx -static stopObserving() -``` - -Stops observing for device location changes. In addition, it removes all listeners previously registered. - -Notice that this method has only effect if the `geolocation.watchPosition(successCallback, errorCallback)` method was previously invoked. diff --git a/website/versioned_docs/version-0.15/modal.md b/website/versioned_docs/version-0.15/modal.md deleted file mode 100644 index 54200a7bf33..00000000000 --- a/website/versioned_docs/version-0.15/modal.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: version-0.15-modal -title: Modal -original_id: modal ---- - -A Modal component covers the native view (e.g. UIViewController, Activity) that contains the React Native root. - -Use Modal in hybrid apps that embed React Native; Modal allows the portion of your app written in React Native to present content above the enclosing native view hierarchy. - -In apps written with React Native from the root view down, you should use Navigator instead of Modal. With a top-level Navigator, you have more control over how to present the modal scene over the rest of your app by using the configureScene property. - -### Props - -- [`animated`](modal.md#animated) -- [`onDismiss`](modal.md#ondismiss) -- [`transparent`](modal.md#transparent) -- [`visible`](modal.md#visible) - ---- - -# Reference - -## Props - -### `animated` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onDismiss` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `transparent` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `visible` - -| Type | Required | -| ---- | -------- | -| bool | No | diff --git a/website/versioned_docs/version-0.15/progressbarandroid.md b/website/versioned_docs/version-0.15/progressbarandroid.md deleted file mode 100644 index 5ab65cd64db..00000000000 --- a/website/versioned_docs/version-0.15/progressbarandroid.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: version-0.15-progressbarandroid -title: ProgressBarAndroid -original_id: progressbarandroid ---- - -React component that wraps the Android-only `ProgressBar`. This component is used to indicate that the app is loading or there is some activity in the app. - -Example: - -``` -render: function() { - var progressBar = - - - ; - - return ( - - ); -}, -``` - -### Props - -- [`color`](progressbarandroid.md#color) -- [`styleAttr`](progressbarandroid.md#styleattr) -- [`testID`](progressbarandroid.md#testid) - ---- - -# Reference - -## Props - -### `color` - -Color of the progress bar. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `styleAttr` - -Style of the ProgressBar. One of: - -- Horizontal -- Small -- Large -- Inverse -- SmallInverse -- LargeInverse - -| Type | Required | -| ------------------------------------------------------------------------------- | -------- | -| enum('Horizontal', 'Small', 'Large', 'Inverse', 'SmallInverse', 'LargeInverse') | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | diff --git a/website/versioned_docs/version-0.15/textinput.md b/website/versioned_docs/version-0.15/textinput.md deleted file mode 100644 index b8f5ab5a1e5..00000000000 --- a/website/versioned_docs/version-0.15/textinput.md +++ /dev/null @@ -1,433 +0,0 @@ ---- -id: version-0.15-textinput -title: TextInput -original_id: textinput ---- - -A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. - -A nice use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. For example: - -``` - this.setState({text})} - value={this.state.text} - /> -``` - -Note that some props are only available with `multiline={true/false}`: - -``` - var onlyMultiline = { - onSelectionChange: true, // not supported in Open Source yet - onTextInput: true, // not supported in Open Source yet - children: true, - }; - - var notMultiline = { - onSubmitEditing: true, - }; -``` - -### Props - -- [`secureTextEntry`](textinput.md#securetextentry) -- [`autoCapitalize`](textinput.md#autocapitalize) -- [`autoFocus`](textinput.md#autofocus) -- [`defaultValue`](textinput.md#defaultvalue) -- [`editable`](textinput.md#editable) -- [`keyboardType`](textinput.md#keyboardtype) -- [`multiline`](textinput.md#multiline) -- [`onBlur`](textinput.md#onblur) -- [`onChange`](textinput.md#onchange) -- [`onChangeText`](textinput.md#onchangetext) -- [`onEndEditing`](textinput.md#onendediting) -- [`onFocus`](textinput.md#onfocus) -- [`onLayout`](textinput.md#onlayout) -- [`onSubmitEditing`](textinput.md#onsubmitediting) -- [`placeholder`](textinput.md#placeholder) -- [`placeholderTextColor`](textinput.md#placeholdertextcolor) -- [`autoCorrect`](textinput.md#autocorrect) -- [`style`](textinput.md#style) -- [`testID`](textinput.md#testid) -- [`value`](textinput.md#value) -- [`numberOfLines`](textinput.md#numberoflines) -- [`textAlign`](textinput.md#textalign) -- [`textAlignVertical`](textinput.md#textalignvertical) -- [`underlineColorAndroid`](textinput.md#underlinecolorandroid) -- [`blurOnSubmit`](textinput.md#bluronsubmit) -- [`clearButtonMode`](textinput.md#clearbuttonmode) -- [`clearTextOnFocus`](textinput.md#cleartextonfocus) -- [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) -- [`maxLength`](textinput.md#maxlength) -- [`onKeyPress`](textinput.md#onkeypress) -- [`returnKeyType`](textinput.md#returnkeytype) -- [`selectTextOnFocus`](textinput.md#selecttextonfocus) -- [`selectionState`](textinput.md#selectionstate) - -### Methods - -- [`isFocused`](textinput.md#isfocused) -- [`clear`](textinput.md#clear) - ---- - -# Reference - -## Props - -### `secureTextEntry` - -If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `autoCapitalize` - -Can tell TextInput to automatically capitalize certain characters. - -- characters: all characters, -- words: first letter of each word -- sentences: first letter of each sentence (default) -- none: don't auto capitalize anything - -| Type | Required | -| ------------------------------------------------ | -------- | -| enum('none', 'sentences', 'words', 'characters') | No | - ---- - -### `autoFocus` - -If true, focuses the input on componentDidMount. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `defaultValue` - -Provides an initial value that will change when the user starts typing. Useful for use-cases where you don't want to deal with listening to events and updating the value prop to keep the controlled state in sync. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `editable` - -If false, text is not editable. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `keyboardType` - -Determines which keyboard to open, e.g.`numeric`. - -The following values work across platforms: - -- default -- numeric -- email-address - -| Type | Required | -| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| enum('default', 'numeric', 'email-address', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | - ---- - -### `multiline` - -If true, the text input can be multiple lines. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onBlur` - -Callback that is called when the text input is blurred - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChange` - -Callback that is called when the text input's text changes. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChangeText` - -Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onEndEditing` - -Callback that is called when text input ends. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onFocus` - -Callback that is called when the text input is focused - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{x, y, width, height}`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onSubmitEditing` - -Callback that is called when the text input's submit button is pressed. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `placeholder` - -The string that will be rendered before text input has been entered - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `placeholderTextColor` - -The text color of the placeholder string - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `autoCorrect` - -If false, disables auto-correct. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -Styles - -| Type | Required | -| --------------------- | -------- | -| [Text](text.md#style) | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `value` - -The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to set the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `numberOfLines` - -Sets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | Android | - ---- - -### `textAlign` - -Set the position of the cursor from where editing will begin. - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| enum('start', 'center', 'end') | No | Android | - ---- - -### `textAlignVertical` - -Aligns text vertically within the TextInput. - -| Type | Required | Platform | -| ------------------------------- | -------- | -------- | -| enum('top', 'center', 'bottom') | No | Android | - ---- - -### `underlineColorAndroid` - -The color of the textInput underline. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `blurOnSubmit` - -If true, the text field will blur when submitted. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `clearButtonMode` - -When the clear button should appear on the right side of the text view - -| Type | Required | Platform | -| ---------------------------------------------------------- | -------- | -------- | -| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | - ---- - -### `clearTextOnFocus` - -If true, clears the text field automatically when editing begins - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `enablesReturnKeyAutomatically` - -If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `maxLength` - -Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `onKeyPress` - -Callback that is called when a key is pressed. Pressed key value is passed as an argument to the callback handler. Fires before onChange callbacks. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `returnKeyType` - -Determines how the return key should look. - -| Type | Required | Platform | -| ------------------------------------------------------------------------------------------------------------- | -------- | -------- | -| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | iOS | - ---- - -### `selectTextOnFocus` - -If true, all text will automatically be selected on focus - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `selectionState` - -See DocumentSelectionState.js, some state that is responsible for maintaining selection information for a document - -| Type | Required | Platform | -| ---------------------- | -------- | -------- | -| DocumentSelectionState | No | iOS | - -## Methods - -### `isFocused()` - -```jsx -isFocused(): -``` - ---- - -### `clear()` - -```jsx -clear(); -``` diff --git a/website/versioned_docs/version-0.15/webview.md b/website/versioned_docs/version-0.15/webview.md deleted file mode 100644 index f98a40ce251..00000000000 --- a/website/versioned_docs/version-0.15/webview.md +++ /dev/null @@ -1,236 +0,0 @@ ---- -id: version-0.15-webview -title: WebView -original_id: webview ---- - -Renders a native WebView. - -Note that WebView is only supported on iOS for now, see https://reactnative.dev/known-issues.md - -### Props - -- [`onShouldStartLoadWithRequest`](webview.md#onshouldstartloadwithrequest) -- [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) -- [`contentInset`](webview.md#contentinset) -- [`html`](webview.md#html) -- [`injectedJavaScript`](webview.md#injectedjavascript) -- [`javaScriptEnabledAndroid`](webview.md#javascriptenabledandroid) -- [`onNavigationStateChange`](webview.md#onnavigationstatechange) -- [`bounces`](webview.md#bounces) -- [`renderError`](webview.md#rendererror) -- [`renderLoading`](webview.md#renderloading) -- [`scalesPageToFit`](webview.md#scalespagetofit) -- [`scrollEnabled`](webview.md#scrollenabled) -- [`startInLoadingState`](webview.md#startinloadingstate) -- [`style`](webview.md#style) -- [`url`](webview.md#url) - -### Methods - -- [`goForward`](webview.md#goforward) -- [`goBack`](webview.md#goback) -- [`reload`](webview.md#reload) -- [`updateNavigationState`](webview.md#updatenavigationstate) -- [`getWebViewHandle`](webview.md#getwebviewhandle) -- [`onLoadingStart`](webview.md#onloadingstart) -- [`onLoadingError`](webview.md#onloadingerror) -- [`onLoadingFinish`](webview.md#onloadingfinish) - ---- - -# Reference - -## Props - -### `onShouldStartLoadWithRequest` - -Allows custom handling of any webview requests by a JS handler. Return true or false from this method to continue loading the request. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `automaticallyAdjustContentInsets` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `contentInset` - -| Type | Required | -| ------------------------------------------------------------------ | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | - ---- - -### `html` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `injectedJavaScript` - -Sets the JS to be injected when the webpage loads. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `javaScriptEnabledAndroid` - -Used for android only, JS is enabled by default for WebView on iOS - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onNavigationStateChange` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `bounces` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `renderError` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `renderLoading` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `scalesPageToFit` - -Used for iOS only, sets whether the webpage scales to fit the view and the user can change the scale - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `scrollEnabled` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `startInLoadingState` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `url` - -| Type | Required | -| ------ | -------- | -| string | No | - -## Methods - -### `goForward()` - -```jsx -goForward(); -``` - ---- - -### `goBack()` - -```jsx -goBack(); -``` - ---- - -### `reload()` - -```jsx -reload(); -``` - ---- - -### `updateNavigationState()` - -```jsx -updateNavigationState((event: Event)); -``` - -We return an event with a bunch of fields including: url, title, loading, canGoBack, canGoForward - ---- - -### `getWebViewHandle()` - -```jsx -getWebViewHandle(): -``` - ---- - -### `onLoadingStart()` - -```jsx -onLoadingStart((event: Event)); -``` - ---- - -### `onLoadingError()` - -```jsx -onLoadingError((event: Event)); -``` - ---- - -### `onLoadingFinish()` - -```jsx -onLoadingFinish((event: Event)); -``` diff --git a/website/versioned_docs/version-0.16/animated.md b/website/versioned_docs/version-0.16/animated.md deleted file mode 100644 index 0d89781e0fa..00000000000 --- a/website/versioned_docs/version-0.16/animated.md +++ /dev/null @@ -1,448 +0,0 @@ ---- -id: version-0.16-animated -title: Animated -original_id: animated ---- - -Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and possible to build and maintain. - -The general workflow is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates either via animations, such as `Animated.timing`, or by hooking into gestures like panning or scolling via `Animated.event`. `Animated.Value` can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted: - -```jsx -class FadeInView extends React.Component { - constructor(props) { - super(props); - this.state = { - fadeAnim: new Animated.Value(0) // init opacity 0 - }; - } - componentDidMount() { - Animated.timing( - // Uses easing functions - this.state.fadeAnim, // The value to drive - { toValue: 1 } // Configuration - ).start(); // Don't forget start! - } - render() { - return ( - - {' '} - // Binds - {this.props.children} - - ); - } -} -``` - -Note that only animatable components can be animated. `View`, `Text`, and `Image` are already provided, and you can create custom ones with `createAnimatedComponent`. These particular components do the magic of binding the animated values to the properties, and do targetted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default. - -Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation. - -A single `Animated.Value` can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value. - -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 could be done by modifying `style` in the example above like so: - -```jsx - style={{ - opacity: this.state.fadeAnim, // Binds directly - transform: [{ - translateY: this.state.fadeAnim.interpolate({ - inputRange: [0, 1], - outputRange: [150, 0] // 0 : 150, 0.5 : 75, 1 : 0 - }), - }], - }}> -``` - -Animations can also be combined in complex ways using composition functions such as `sequence` and `parallel`, and can also be chained together by setting the `toValue` of one animation to be another `Animated.Value`. - -`Animated.ValueXY` is handy for 2D animations, like panning, and there are other helpful additions like `setOffset` and `getLayout` to aid with typical interaction patterns, like drag-and-drop. - -You can see more example usage in `AnimationExample.js`, the Gratuitous Animation App, and [Animations documentation guide](animations). - -Note that `Animated` is designed to be fully serializable so that animations can be run in a high performace way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout `Animated.Value.addListener` as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future. - -### Methods - -- [`decay`](animated.md#decay) -- [`timing`](animated.md#timing) -- [`spring`](animated.md#spring) -- [`delay`](animated.md#delay) -- [`sequence`](animated.md#sequence) -- [`parallel`](animated.md#parallel) -- [`stagger`](animated.md#stagger) -- [`event`](animated.md#event) -- [`createAnimatedComponent`](animated.md#createanimatedcomponent) - -### Properties - -- [`Value`](animated.md#value) -- [`ValueXY`](animated.md#valuexy) - -### Classes - -- [`AnimatedValue`](animated.md#animatedvalue) -- [`AnimatedValueXY`](animated.md#animatedvaluexy) -- [`AnimatedProps`](animated.md#animatedprops) - ---- - -# Reference - -## Methods - -### `decay()` - -```jsx -static decay(value, config) -``` - -Animates a value from an initial velocity to zero based on a decay coefficient. - ---- - -### `timing()` - -```jsx -static timing(value, config) -``` - -Animates a value along a timed easing curve. The `Easing` module has tons of pre-defined curves, or you can use your own function. - ---- - -### `spring()` - -```jsx -static spring(value, config) -``` - -Spring animation based on Rebound and Origami. Tracks velocity state to create fluid motions as the `toValue` updates, and can be chained together. - ---- - -### `delay()` - -```jsx -static delay(time) -``` - -Starts an animation after the given delay. - ---- - -### `sequence()` - -```jsx -static sequence(animations) -``` - -Starts an array of animations in order, waiting for each to complete before starting the next. If the current running animation is stopped, no following animations will be started. - ---- - -### `parallel()` - -```jsx -static parallel(animations, config?) -``` - -Starts an array of animations all at the same time. By default, if one of the animations is stopped, they will all be stopped. You can override this with the `stopTogether` flag. - ---- - -### `stagger()` - -```jsx -static stagger(time, animations) -``` - -Array of animations may run in parallel (overlap), but are started in sequence with successive delays. Nice for doing trailing effects. - ---- - -### `event()` - -```jsx -static event(argMapping, config?) -``` - -Takes an array of mappings and extracts values from each arg accordingly, then calls `setValue` on the mapped outputs. e.g. - -```jsx - onScroll={this.AnimatedEvent( - [{nativeEvent: {contentOffset: {x: this._scrollX}}}] - {listener}, // Optional async listener - ) - ... - onPanResponderMove: this.AnimatedEvent([ - null, // raw event arg ignored - {dx: this._panX}, // gestureState arg - ]), -``` - ---- - -### `createAnimatedComponent()` - -```jsx -static createAnimatedComponent(Component) -``` - -Make any React component Animatable. Used to create `Animated.View`, etc. - -## Properties - ---- - -## Classes - -## class AnimatedValue - -Standard value for driving animations. One `Animated.Value` can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling `setValue`) will stop any previous ones. - -### Methods - -### `constructor()` - -```jsx -constructor(value); -``` - ---- - -### `setValue()` - -```jsx -setValue(value); -``` - -Directly set the value. This will stop any animations running on the value and update all the bound properties. - ---- - -### `setOffset()` - -```jsx -setOffset(offset); -``` - -Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture. - ---- - -### `flattenOffset()` - -```jsx -flattenOffset(); -``` - -Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged. - ---- - -### `addListener()` - -```jsx -addListener(callback); -``` - -Adds an asynchronous listener to the value so you can observe updates from animations or whathaveyou. This is useful because there is no way to syncronously read the value because it might be driven natively. - ---- - -### `removeListener()` - -```jsx -removeListener(id); -``` - ---- - -### `removeAllListeners()` - -```jsx -removeAllListeners(); -``` - ---- - -### `stopAnimation()` - -```jsx -stopAnimation(callback?) -``` - -Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout. - ---- - -### `interpolate()` - -```jsx -interpolate(config); -``` - -Interpolates the value before updating the property, e.g. mapping 0-1 to 0-10. - ---- - -### `animate()` - -```jsx -animate(animation, callback); -``` - -Typically only used internally, but could be used by a custom Animation class. - ---- - -### `stopTracking()` - -```jsx -stopTracking(); -``` - -Typically only used internally. - ---- - -### `track()` - -```jsx -track(tracking); -``` - -Typically only used internally. - ---- - -## class AnimatedValueXY - -2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal `Animated.Value`, but multiplexed. Contains two regular `Animated.Value`s under the hood. Example: - -```jsx -class DraggableView extends React.Component { - constructor(props) { - super(props); - this.state = { - pan: new Animated.ValueXY() // inits to zero - }; - this.state.panResponder = PanResponder.create({ - onStartShouldSetPanResponder: () => true, - onPanResponderMove: Animated.event([ - null, - { - dx: this.state.pan.x, // x,y are Animated.Value - dy: this.state.pan.y - } - ]), - onPanResponderRelease: () => { - Animated.spring( - this.state.pan, // Auto-multiplexed - { toValue: { x: 0, y: 0 } } // Back to zero - ).start(); - } - }); - } - render() { - return ( - - {this.props.children} - - ); - } -} -``` - -### Methods - -### `constructor()` - -```jsx -constructor(valueIn?) -``` - ---- - -### `setValue()` - -```jsx -setValue(value); -``` - ---- - -### `setOffset()` - -```jsx -setOffset(offset); -``` - ---- - -### `flattenOffset()` - -```jsx -flattenOffset(); -``` - ---- - -### `stopAnimation()` - -```jsx -stopAnimation(callback?) -``` - ---- - -### `addListener()` - -```jsx -addListener(callback); -``` - ---- - -### `removeListener()` - -```jsx -removeListener(id); -``` - ---- - -### `getLayout()` - -```jsx -getLayout(); -``` - -Converts `{x, y}` into `{left, top}` for use in style, e.g. - -```jsx - style={this.state.anim.getLayout()} -``` - ---- - -### `getTranslateTransform()` - -```jsx -getTranslateTransform(); -``` - -Converts `{x, y}` into a useable translation transform, e.g. - -```jsx - style={{ - transform: this.state.anim.getTranslateTransform() - }} -``` diff --git a/website/versioned_docs/version-0.16/datepickerios.md b/website/versioned_docs/version-0.16/datepickerios.md deleted file mode 100644 index 48f478f4de9..00000000000 --- a/website/versioned_docs/version-0.16/datepickerios.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -id: version-0.16-datepickerios -title: DatePickerIOS -original_id: datepickerios ---- - -Use `DatePickerIOS` to render a date/time picker (selector) on iOS. This is a controlled component, so you must hook in to the `onDateChange` callback and update the `date` prop in order for the component to update, otherwise the user's change will be reverted immediately to reflect `props.date` as the source of truth. - -### Props - -- [View props...](view.md#props) - -* [`date`](datepickerios.md#date) -* [`onDateChange`](datepickerios.md#ondatechange) -* [`maximumDate`](datepickerios.md#maximumdate) -* [`minimumDate`](datepickerios.md#minimumdate) -* [`minuteInterval`](datepickerios.md#minuteinterval) -* [`mode`](datepickerios.md#mode) -* [`timeZoneOffsetInMinutes`](datepickerios.md#timezoneoffsetinminutes) - ---- - -# Reference - -## Props - -### `date` - -The currently selected date. - -| Type | Required | -| ---- | -------- | -| Date | Yes | - ---- - -### `onDateChange` - -Date change handler. - -This is called when the user changes the date or time in the UI. The first and only argument is a Date object representing the new date and time. - -| Type | Required | -| -------- | -------- | -| function | Yes | - ---- - -### `maximumDate` - -Maximum date. - -Restricts the range of possible date/time values. - -| Type | Required | -| ---- | -------- | -| Date | No | - ---- - -### `minimumDate` - -Minimum date. - -Restricts the range of possible date/time values. - -| Type | Required | -| ---- | -------- | -| Date | No | - ---- - -### `minuteInterval` - -The interval at which minutes can be selected. - -| Type | Required | -| ------------------------------------------ | -------- | -| enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30) | No | - ---- - -### `mode` - -The date picker mode. - -| Type | Required | -| -------------------------------- | -------- | -| enum('date', 'time', 'datetime') | No | - ---- - -### `timeZoneOffsetInMinutes` - -Timezone offset in minutes. - -By default, the date picker will use the device's timezone. With this parameter, it is possible to force a certain timezone offset. For instance, to show times in Pacific Standard Time, pass -7 \* 60. - -| Type | Required | -| ------ | -------- | -| number | No | diff --git a/website/versioned_docs/version-0.16/drawerlayoutandroid.md b/website/versioned_docs/version-0.16/drawerlayoutandroid.md deleted file mode 100644 index 488e0a616fe..00000000000 --- a/website/versioned_docs/version-0.16/drawerlayoutandroid.md +++ /dev/null @@ -1,155 +0,0 @@ ---- -id: version-0.16-drawerlayoutandroid -title: DrawerLayoutAndroid -original_id: drawerlayoutandroid ---- - -React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop. - -Example: - -``` -render: function() { - var navigationView = ( - - I'm in the Drawer! - - ); - return ( - navigationView}> - - Hello - World! - - - ); -}, -``` - -### Props - -- [View props...](view.md#props) - -* [`renderNavigationView`](drawerlayoutandroid.md#rendernavigationview) -* [`drawerPosition`](drawerlayoutandroid.md#drawerposition) -* [`drawerWidth`](drawerlayoutandroid.md#drawerwidth) -* [`keyboardDismissMode`](drawerlayoutandroid.md#keyboarddismissmode) -* [`onDrawerClose`](drawerlayoutandroid.md#ondrawerclose) -* [`onDrawerOpen`](drawerlayoutandroid.md#ondraweropen) -* [`onDrawerSlide`](drawerlayoutandroid.md#ondrawerslide) -* [`onDrawerStateChanged`](drawerlayoutandroid.md#ondrawerstatechanged) - -### Methods - -- [`openDrawer`](drawerlayoutandroid.md#opendrawer) -- [`closeDrawer`](drawerlayoutandroid.md#closedrawer) - ---- - -# Reference - -## Props - -### `renderNavigationView` - -The navigation view that will be rendered to the side of the screen and can be pulled in. - -| Type | Required | -| -------- | -------- | -| function | Yes | - ---- - -### `drawerPosition` - -Specifies the side of the screen from which the drawer will slide in. - -| Type | Required | -| ------------------------------------------------------------------------- | -------- | -| enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) | No | - ---- - -### `drawerWidth` - -Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. - -| Type | Required | -| ----------------------- | -------- | -| enum('none', 'on-drag') | No | - ---- - -### `onDrawerClose` - -Function called whenever the navigation view has been closed. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerOpen` - -Function called whenever the navigation view has been opened. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerSlide` - -Function called whenever there is an interaction with the navigation view. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerStateChanged` - -Function called when the drawer state has changed. The drawer can be in 3 states: - -- idle, meaning there is no interaction with the navigation view happening at the time -- dragging, meaning there is currently an interaction with the navigation view -- settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation - -| Type | Required | -| -------- | -------- | -| function | No | - -## Methods - -### `openDrawer()` - -```jsx -openDrawer(); -``` - ---- - -### `closeDrawer()` - -```jsx -closeDrawer(); -``` diff --git a/website/versioned_docs/version-0.16/geolocation.md b/website/versioned_docs/version-0.16/geolocation.md deleted file mode 100644 index 7797f5eddce..00000000000 --- a/website/versioned_docs/version-0.16/geolocation.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: version-0.16-geolocation -title: Geolocation -original_id: geolocation ---- - -The Geolocation API follows the web spec: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation - -### iOS - -You need to include the `NSLocationWhenInUseUsageDescription` key in Info.plist to enable geolocation. Geolocation is enabled by default when you create a project with `react-native init`. - -### Android - -To request access to location, you need to add the following line to your app's `AndroidManifest.xml`: - -`` - -Geolocation support for Android is planned but not yet open sourced. See [Known Issues](https://reactnative.dev/known-issues.md#missing-modules-and-native-views). - -### Methods - -- [`getCurrentPosition`](geolocation.md#getcurrentposition) -- [`watchPosition`](geolocation.md#watchposition) -- [`clearWatch`](geolocation.md#clearwatch) -- [`stopObserving`](geolocation.md#stopobserving) - ---- - -# Reference - -## Methods - -### `getCurrentPosition()` - -```jsx -static getCurrentPosition(geo_success, geo_error?, geo_options?) -``` - -Invokes the success callback once with the latest location info. Supported options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool) - ---- - -### `watchPosition()` - -```jsx -static watchPosition(success, error?, options?) -``` - -Invokes the success callback whenever the location changes. Supported options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool) - ---- - -### `clearWatch()` - -```jsx -static clearWatch(watchID) -``` - ---- - -### `stopObserving()` - -```jsx -static stopObserving() -``` - -Stops observing for device location changes. In addition, it removes all listeners previously registered. - -Notice that this method has only effect if the `geolocation.watchPosition(successCallback, errorCallback)` method was previously invoked. diff --git a/website/versioned_docs/version-0.16/layout-props.md b/website/versioned_docs/version-0.16/layout-props.md deleted file mode 100644 index 4c4afba00db..00000000000 --- a/website/versioned_docs/version-0.16/layout-props.md +++ /dev/null @@ -1,336 +0,0 @@ ---- -id: version-0.16-layout-props -title: Layout Props -original_id: layout-props ---- - -### Props - -- [`marginRight`](layout-props.md#marginright) -- [`alignItems`](layout-props.md#alignitems) -- [`borderBottomWidth`](layout-props.md#borderbottomwidth) -- [`borderLeftWidth`](layout-props.md#borderleftwidth) -- [`borderRightWidth`](layout-props.md#borderrightwidth) -- [`borderTopWidth`](layout-props.md#bordertopwidth) -- [`borderWidth`](layout-props.md#borderwidth) -- [`bottom`](layout-props.md#bottom) -- [`flex`](layout-props.md#flex) -- [`flexDirection`](layout-props.md#flexdirection) -- [`flexWrap`](layout-props.md#flexwrap) -- [`height`](layout-props.md#height) -- [`justifyContent`](layout-props.md#justifycontent) -- [`left`](layout-props.md#left) -- [`margin`](layout-props.md#margin) -- [`marginBottom`](layout-props.md#marginbottom) -- [`marginHorizontal`](layout-props.md#marginhorizontal) -- [`marginLeft`](layout-props.md#marginleft) -- [`alignSelf`](layout-props.md#alignself) -- [`marginTop`](layout-props.md#margintop) -- [`marginVertical`](layout-props.md#marginvertical) -- [`maxHeight`](layout-props.md#maxheight) -- [`maxWidth`](layout-props.md#maxwidth) -- [`minHeight`](layout-props.md#minheight) -- [`minWidth`](layout-props.md#minwidth) -- [`padding`](layout-props.md#padding) -- [`paddingBottom`](layout-props.md#paddingbottom) -- [`paddingHorizontal`](layout-props.md#paddinghorizontal) -- [`paddingLeft`](layout-props.md#paddingleft) -- [`paddingRight`](layout-props.md#paddingright) -- [`paddingTop`](layout-props.md#paddingtop) -- [`paddingVertical`](layout-props.md#paddingvertical) -- [`position`](layout-props.md#position) -- [`right`](layout-props.md#right) -- [`top`](layout-props.md#top) -- [`width`](layout-props.md#width) - ---- - -# Reference - -## Props - -### `marginRight` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `alignItems` - -| Type | Required | -| --------------------------------------------------- | -------- | -| enum('flex-start', 'flex-end', 'center', 'stretch') | No | - ---- - -### `borderBottomWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderLeftWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderRightWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderTopWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `bottom` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `flex` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `flexDirection` - -| Type | Required | -| --------------------- | -------- | -| enum('row', 'column') | No | - ---- - -### `flexWrap` - -| Type | Required | -| ---------------------- | -------- | -| enum('wrap', 'nowrap') | No | - ---- - -### `height` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `justifyContent` - -| Type | Required | -| ------------------------------------------------------------------------- | -------- | -| enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') | No | - ---- - -### `left` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `margin` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `marginBottom` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `marginHorizontal` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `marginLeft` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `alignSelf` - -| Type | Required | -| ----------------------------------------------------------- | -------- | -| enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') | No | - ---- - -### `marginTop` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `marginVertical` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `maxHeight` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `maxWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `minHeight` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `minWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `padding` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `paddingBottom` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `paddingHorizontal` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `paddingLeft` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `paddingRight` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `paddingTop` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `paddingVertical` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `position` - -| Type | Required | -| ---------------------------- | -------- | -| enum('absolute', 'relative') | No | - ---- - -### `right` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `top` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `width` - -| Type | Required | -| ------ | -------- | -| number | No | diff --git a/website/versioned_docs/version-0.16/progressbarandroid.md b/website/versioned_docs/version-0.16/progressbarandroid.md deleted file mode 100644 index 35102b12e0d..00000000000 --- a/website/versioned_docs/version-0.16/progressbarandroid.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: version-0.16-progressbarandroid -title: ProgressBarAndroid -original_id: progressbarandroid ---- - -React component that wraps the Android-only `ProgressBar`. This component is used to indicate that the app is loading or there is some activity in the app. - -Example: - -``` -render: function() { - var progressBar = - - - ; - - return ( - - ); -}, -``` - -### Props - -- [View props...](view.md#props) - -* [`color`](progressbarandroid.md#color) -* [`indeterminate`](progressbarandroid.md#indeterminate) -* [`progress`](progressbarandroid.md#progress) -* [`styleAttr`](progressbarandroid.md#styleattr) -* [`testID`](progressbarandroid.md#testid) - ---- - -# Reference - -## Props - -### `color` - -Color of the progress bar. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `indeterminate` - -If the progress bar will show indeterminate progress. Note that this can only be false if styleAttr is Horizontal. - -| Type | Required | -| ----------------- | -------- | -| indeterminateType | No | - ---- - -### `progress` - -The progress value (between 0 and 1). - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `styleAttr` - -Style of the ProgressBar. One of: - -- Horizontal -- Small -- Large -- Inverse -- SmallInverse -- LargeInverse - -| Type | Required | -| ------------------------------------------------------------------------------- | -------- | -| enum('Horizontal', 'Small', 'Large', 'Inverse', 'SmallInverse', 'LargeInverse') | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | diff --git a/website/versioned_docs/version-0.16/progressviewios.md b/website/versioned_docs/version-0.16/progressviewios.md deleted file mode 100644 index db07d28438e..00000000000 --- a/website/versioned_docs/version-0.16/progressviewios.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: version-0.16-progressviewios -title: ProgressViewIOS -original_id: progressviewios ---- - -Use `ProgressViewIOS` to render a UIProgressView on iOS. - -### Props - -- [View props...](view.md#props) - -* [`progress`](progressviewios.md#progress) -* [`progressImage`](progressviewios.md#progressimage) -* [`progressTintColor`](progressviewios.md#progresstintcolor) -* [`progressViewStyle`](progressviewios.md#progressviewstyle) -* [`trackImage`](progressviewios.md#trackimage) -* [`trackTintColor`](progressviewios.md#tracktintcolor) - ---- - -# Reference - -## Props - -### `progress` - -The progress value (between 0 and 1). - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `progressImage` - -A stretchable image to display as the progress bar. - -| Type | Required | -| ---------------------- | -------- | -| Image.propTypes.source | No | - ---- - -### `progressTintColor` - -The tint color of the progress bar itself. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `progressViewStyle` - -The progress bar style. - -| Type | Required | -| ---------------------- | -------- | -| enum('default', 'bar') | No | - ---- - -### `trackImage` - -A stretchable image to display behind the progress bar. - -| Type | Required | -| ---------------------- | -------- | -| Image.propTypes.source | No | - ---- - -### `trackTintColor` - -The tint color of the progress bar track. - -| Type | Required | -| ------ | -------- | -| string | No | diff --git a/website/versioned_docs/version-0.16/scrollview.md b/website/versioned_docs/version-0.16/scrollview.md deleted file mode 100644 index b4fd2953c88..00000000000 --- a/website/versioned_docs/version-0.16/scrollview.md +++ /dev/null @@ -1,506 +0,0 @@ ---- -id: version-0.16-scrollview -title: ScrollView -original_id: scrollview ---- - -Component that wraps platform ScrollView while providing integration with touch locking "responder" system. - -Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer `{flex: 1}` down the view stack can lead to errors here, which the element inspector helps to debug. - -Doesn't yet support other contained responders from blocking this scroll view from becoming the responder. - -### Props - -- [View props...](view.md#props) - -* [`contentInset`](scrollview.md#contentinset) -* [`contentContainerStyle`](scrollview.md#contentcontainerstyle) -* [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) -* [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) -* [`onContentSizeChange`](scrollview.md#oncontentsizechange) -* [`onScroll`](scrollview.md#onscroll) -* [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) -* [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) -* [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) -* [`style`](scrollview.md#style) -* [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) -* [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) -* [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) -* [`bounces`](scrollview.md#bounces) -* [`bouncesZoom`](scrollview.md#bounceszoom) -* [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) -* [`centerContent`](scrollview.md#centercontent) -* [`horizontal`](scrollview.md#horizontal) -* [`contentOffset`](scrollview.md#contentoffset) -* [`decelerationRate`](scrollview.md#decelerationrate) -* [`directionalLockEnabled`](scrollview.md#directionallockenabled) -* [`maximumZoomScale`](scrollview.md#maximumzoomscale) -* [`minimumZoomScale`](scrollview.md#minimumzoomscale) -* [`onRefreshStart`](scrollview.md#onrefreshstart) -* [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) -* [`pagingEnabled`](scrollview.md#pagingenabled) -* [`scrollEnabled`](scrollview.md#scrollenabled) -* [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) -* [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) -* [`scrollsToTop`](scrollview.md#scrollstotop) -* [`snapToAlignment`](scrollview.md#snaptoalignment) -* [`snapToInterval`](scrollview.md#snaptointerval) -* [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) -* [`zoomScale`](scrollview.md#zoomscale) - -### Methods - -- [`endRefreshing`](scrollview.md#endrefreshing) -- [`scrollTo`](scrollview.md#scrollto) -- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) -- [`handleScroll`](scrollview.md#handlescroll) - ---- - -# Reference - -## Props - -### `contentInset` - -The amount by which the scroll view content is inset from the edges of the scroll view. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `contentContainerStyle` - -These styles will be applied to the scroll view content container which wraps all of the child views. Example: - -return ( ); ... var styles = StyleSheet.create({ contentContainer: { paddingVertical: 20 } }); - -| Type | Required | -| ------------------------------------ | -------- | -| StyleSheetPropType(View Style props) | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. -- 'interactive', the keyboard is dismissed interactively with the drag and moves in synchrony with the touch; dragging upwards cancels the dismissal. On android this is not supported and it will have the same behavior as 'none'. - -| Type | Required | -| -------------------------------------- | -------- | -| enum('none', 'interactive', 'on-drag') | No | - ---- - -### `keyboardShouldPersistTaps` - -When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the scroll view will not catch taps, and the keyboard will not dismiss automatically. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onContentSizeChange` - -Called when scrollable content view of the ScrollView changes. It's implemented using onLayout handler attached to the content container which this ScrollView renders. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onScroll` - -Fires at most once per frame during scrolling. The frequency of the events can be contolled using the `scrollEventThrottle` prop. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `removeClippedSubviews` - -Experimental: When true, offscreen child views (whose `overflow` value is `hidden`) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsHorizontalScrollIndicator` - -When true, shows a horizontal scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsVerticalScrollIndicator` - -When true, shows a vertical scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderStyle`**: enum('solid', 'dotted', 'dashed') - -- **`backfaceVisibility`**: enum('visible', 'hidden') - -- **`borderBottomColor`**: string - -- **`borderBottomLeftRadius`**: number - -- **`borderBottomRightRadius`**: number - -- **`borderBottomWidth`**: number - -- **`borderColor`**: string - -- **`borderLeftColor`**: string - -- **`borderLeftWidth`**: number - -- **`borderRadius`**: number - -- **`borderRightColor`**: string - -- **`borderRightWidth`**: number - -- **`backgroundColor`**: string - -- **`borderTopColor`**: string - -- **`borderTopLeftRadius`**: number - -- **`borderTopRightRadius`**: number - -- **`borderTopWidth`**: number - -- **`borderWidth`**: number - -- **`opacity`**: number - -- **`overflow`**: enum('visible', 'hidden') - -- **`shadowColor`**: string - -- **`shadowOffset`**: object: {width: number,height: number} - -- **`shadowOpacity`**: number - -- **`shadowRadius`**: number - -- **`elevation`**: number (_Android_) - - (Android-only) Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions. - ---- - -### `alwaysBounceHorizontal` - -When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself. The default value is true when `horizontal={true}` and false otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `alwaysBounceVertical` - -When true, the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself. The default value is false when `horizontal={true}` and true otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `automaticallyAdjustContentInsets` - -Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/ toolbar. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bounces` - -When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. When false, it disables all bouncing even if the `alwaysBounce*` props are true. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bouncesZoom` - -When true, gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture end, otherwise the zoom will not exceed the limits. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `canCancelContentTouches` - -When false, once tracking starts, won't try to drag if the touch moves. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `centerContent` - -When true, the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `horizontal` - -When true, the scroll view's children are arranged horizontally in a row instead of vertically in a column. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `contentOffset` - -Used to manually set the starting scroll offset. The default value is `{x: 0, y: 0}`. - -| Type | Required | Platform | -| ------------- | -------- | -------- | -| PointPropType | No | iOS | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. Reasonable choices include - -- Normal: 0.998 (the default) -- Fast: 0.9 - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `directionalLockEnabled` - -When true, the ScrollView will try to lock to only vertical or horizontal scrolling while dragging. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `maximumZoomScale` - -The maximum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `minimumZoomScale` - -The minimum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `onRefreshStart` - -When defined, displays a UIRefreshControl. Invoked with a function to stop refreshing when the UIRefreshControl is animating. - -``` -(endRefreshing) => { - endRefreshing(); -} -``` - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `onScrollAnimationEnd` - -Called when a scrolling animation ends. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `pagingEnabled` - -When true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEnabled` - -When false, the content does not scroll. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEventThrottle` - -This controls how often the scroll event will be fired while scrolling (in events per seconds). A higher number yields better accuracy for code that is tracking the scroll position, but can lead to scroll performance problems due to the volume of information being send over the bridge. The default value is zero, which means the scroll event will be sent only once each time the view is scrolled. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `scrollIndicatorInsets` - -The amount by which the scroll view indicators are inset from the edges of the scroll view. This should normally be set to the same value as the `contentInset`. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `scrollsToTop` - -When true, the scroll view scrolls to top when the status bar is tapped. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `snapToAlignment` - -When `snapToInterval` is set, `snapToAlignment` will define the relationship of the the snapping to the scroll view. - -- `start` (the default) will align the snap at the left (horizontal) or top (vertical) -- `center` will align the snap in the center -- `end` will align the snap at the right (horizontal) or bottom (vertical) - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| enum('start', 'center', 'end') | No | iOS | - ---- - -### `snapToInterval` - -When set, causes the scroll view to stop at multiples of the value of `snapToInterval`. This can be used for paginating through children that have lengths smaller than the scroll view. Used in combination with `snapToAlignment`. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `stickyHeaderIndices` - -An array of child indices determining which children get docked to the top of the screen when scrolling. For example, passing `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction with `horizontal={true}`. - -| Type | Required | Platform | -| --------------- | -------- | -------- | -| array of number | No | iOS | - ---- - -### `zoomScale` - -The current scale of the scroll view content. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - -## Methods - -### `endRefreshing()` - -```jsx -endRefreshing(); -``` - ---- - -### `scrollTo()` - -```jsx -scrollTo(([destY]: number), ([destX]: number)); -``` - ---- - -### `scrollWithoutAnimationTo()` - -```jsx -scrollWithoutAnimationTo(([destY]: number), ([destX]: number)); -``` - ---- - -### `handleScroll()` - -```jsx -handleScroll((e: Object)); -``` diff --git a/website/versioned_docs/version-0.16/segmentedcontrolios.md b/website/versioned_docs/version-0.16/segmentedcontrolios.md deleted file mode 100644 index c635de42e65..00000000000 --- a/website/versioned_docs/version-0.16/segmentedcontrolios.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: version-0.16-segmentedcontrolios -title: SegmentedControlIOS -original_id: segmentedcontrolios ---- - -Use `SegmentedControlIOS` to render a UISegmentedControl iOS. - -### Props - -- [View props...](view.md#props) - -* [`enabled`](segmentedcontrolios.md#enabled) -* [`momentary`](segmentedcontrolios.md#momentary) -* [`onChange`](segmentedcontrolios.md#onchange) -* [`onValueChange`](segmentedcontrolios.md#onvaluechange) -* [`selectedIndex`](segmentedcontrolios.md#selectedindex) -* [`tintColor`](segmentedcontrolios.md#tintcolor) -* [`values`](segmentedcontrolios.md#values) - ---- - -# Reference - -## Props - -### `enabled` - -If false the user won't be able to interact with the control. Default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `momentary` - -If true, then selecting a segment won't persist visually. The `onValueChange` callback will still work as expected. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onChange` - -Callback that is called when the user taps a segment; passes the event as an argument - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onValueChange` - -Callback that is called when the user taps a segment; passes the segment's value as an argument - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `selectedIndex` - -The index in `props.values` of the segment to be pre-selected - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `tintColor` - -Accent color of the control. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `values` - -The labels for the control's segment buttons, in order. - -| Type | Required | -| --------------- | -------- | -| array of string | No | diff --git a/website/versioned_docs/version-0.16/snapshotviewios.md b/website/versioned_docs/version-0.16/snapshotviewios.md deleted file mode 100644 index 8e696769bb7..00000000000 --- a/website/versioned_docs/version-0.16/snapshotviewios.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: version-0.16-snapshotviewios -title: SnapshotViewIOS -original_id: snapshotviewios ---- - -### Props - -- [View props...](view.md#props) - -* [`onSnapshotReady`](snapshotviewios.md#onsnapshotready) -* [`testIdentifier`](snapshotviewios.md#testidentifier) - -### Methods - -- [`onDefaultAction`](snapshotviewios.md#ondefaultaction) - ---- - -# Reference - -## Props - -### `onSnapshotReady` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `testIdentifier` - -| Type | Required | -| ------ | -------- | -| string | No | - -## Methods - -### `onDefaultAction()` - -```jsx -onDefaultAction((event: Object)); -``` diff --git a/website/versioned_docs/version-0.16/switch.md b/website/versioned_docs/version-0.16/switch.md deleted file mode 100644 index 412f323dd85..00000000000 --- a/website/versioned_docs/version-0.16/switch.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: version-0.16-switch -title: Switch -original_id: switch ---- - -Universal two-state toggle component. - -### Props - -- [View props...](view.md#props) - -* [`disabled`](switch.md#disabled) -* [`onValueChange`](switch.md#onvaluechange) -* [`testID`](switch.md#testid) -* [`value`](switch.md#value) -* [`onTintColor`](switch.md#ontintcolor) -* [`thumbTintColor`](switch.md#thumbtintcolor) -* [`tintColor`](switch.md#tintcolor) - ---- - -# Reference - -## Props - -### `disabled` - -If true the user won't be able to toggle the switch. Default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onValueChange` - -Invoked with the new value when the value chages. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `value` - -The value of the switch. If true the switch will be turned on. Default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onTintColor` - -Background color when the switch is turned on. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | iOS | - ---- - -### `thumbTintColor` - -Color of the foreground switch grip. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | iOS | - ---- - -### `tintColor` - -Background color when the switch is turned off. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | iOS | diff --git a/website/versioned_docs/version-0.16/tabbarios-item.md b/website/versioned_docs/version-0.16/tabbarios-item.md deleted file mode 100644 index 6be9397eb0b..00000000000 --- a/website/versioned_docs/version-0.16/tabbarios-item.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: version-0.16-tabbarios-item -title: TabBarIOS.Item -original_id: tabbarios-item ---- - -### Props - -- [View props...](view.md#props) - -* [`badge`](tabbarios-item.md#badge) -* [`icon`](tabbarios-item.md#icon) -* [`onPress`](tabbarios-item.md#onpress) -* [`selected`](tabbarios-item.md#selected) -* [`selectedIcon`](tabbarios-item.md#selectedicon) -* [`style`](tabbarios-item.md#style) -* [`systemIcon`](tabbarios-item.md#systemicon) -* [`title`](tabbarios-item.md#title) - ---- - -# Reference - -## Props - -### `badge` - -Little red bubble that sits at the top right of the icon. - -| Type | Required | -| --------------- | -------- | -| string, ,number | No | - ---- - -### `icon` - -A custom icon for the tab. It is ignored when a system icon is defined. - -| Type | Required | -| ---------------------- | -------- | -| Image.propTypes.source | No | - ---- - -### `onPress` - -Callback when this tab is being selected, you should change the state of your component to set selected={true}. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `selected` - -It specifies whether the children are visible or not. If you see a blank content, you probably forgot to add a selected one. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `selectedIcon` - -A custom icon when the tab is selected. It is ignored when a system icon is defined. If left empty, the icon will be tinted in blue. - -| Type | Required | -| ---------------------- | -------- | -| Image.propTypes.source | No | - ---- - -### `style` - -React style object. - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `systemIcon` - -Items comes with a few predefined system icons. Note that if you are using them, the title and selectedIcon will be overriden with the system ones. - -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | -| enum('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated') | No | - ---- - -### `title` - -Text that appears under the icon. It is ignored when a system icon is defined. - -| Type | Required | -| ------ | -------- | -| string | No | diff --git a/website/versioned_docs/version-0.16/tabbarios.md b/website/versioned_docs/version-0.16/tabbarios.md deleted file mode 100644 index 2fe55908349..00000000000 --- a/website/versioned_docs/version-0.16/tabbarios.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: version-0.16-tabbarios -title: TabBarIOS -original_id: tabbarios ---- - -### Props - -- [View props...](view.md#props) - -* [`barTintColor`](tabbarios.md#bartintcolor) -* [`style`](tabbarios.md#style) -* [`tintColor`](tabbarios.md#tintcolor) -* [`translucent`](tabbarios.md#translucent) - ---- - -# Reference - -## Props - -### `barTintColor` - -Background color of the tab bar - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `style` - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `tintColor` - -Color of the currently selected tab icon - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `translucent` - -A Boolean value that indicates whether the tab bar is translucent - -| Type | Required | -| ---- | -------- | -| bool | No | diff --git a/website/versioned_docs/version-0.16/textinput.md b/website/versioned_docs/version-0.16/textinput.md deleted file mode 100644 index 9582e31088b..00000000000 --- a/website/versioned_docs/version-0.16/textinput.md +++ /dev/null @@ -1,446 +0,0 @@ ---- -id: version-0.16-textinput -title: TextInput -original_id: textinput ---- - -A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. - -One use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. For example: - -``` - this.setState({text})} - value={this.state.text} - /> -``` - -Note that some props are only available with `multiline={true/false}`: - -``` - var onlyMultiline = { - onSelectionChange: true, // not supported in Open Source yet - onTextInput: true, // not supported in Open Source yet - children: true, - }; - - var notMultiline = { - onSubmitEditing: true, - }; -``` - -### Props - -- [View props...](view.md#props) - -* [`secureTextEntry`](textinput.md#securetextentry) -* [`autoCapitalize`](textinput.md#autocapitalize) -* [`autoFocus`](textinput.md#autofocus) -* [`defaultValue`](textinput.md#defaultvalue) -* [`editable`](textinput.md#editable) -* [`keyboardType`](textinput.md#keyboardtype) -* [`maxLength`](textinput.md#maxlength) -* [`multiline`](textinput.md#multiline) -* [`onBlur`](textinput.md#onblur) -* [`onChange`](textinput.md#onchange) -* [`onChangeText`](textinput.md#onchangetext) -* [`onEndEditing`](textinput.md#onendediting) -* [`onFocus`](textinput.md#onfocus) -* [`onLayout`](textinput.md#onlayout) -* [`onSubmitEditing`](textinput.md#onsubmitediting) -* [`placeholder`](textinput.md#placeholder) -* [`placeholderTextColor`](textinput.md#placeholdertextcolor) -* [`autoCorrect`](textinput.md#autocorrect) -* [`style`](textinput.md#style) -* [`testID`](textinput.md#testid) -* [`value`](textinput.md#value) -* [`numberOfLines`](textinput.md#numberoflines) -* [`textAlign`](textinput.md#textalign) -* [`textAlignVertical`](textinput.md#textalignvertical) -* [`underlineColorAndroid`](textinput.md#underlinecolorandroid) -* [`blurOnSubmit`](textinput.md#bluronsubmit) -* [`clearButtonMode`](textinput.md#clearbuttonmode) -* [`clearTextOnFocus`](textinput.md#cleartextonfocus) -* [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) -* [`keyboardAppearance`](textinput.md#keyboardappearance) -* [`onKeyPress`](textinput.md#onkeypress) -* [`returnKeyType`](textinput.md#returnkeytype) -* [`selectTextOnFocus`](textinput.md#selecttextonfocus) -* [`selectionState`](textinput.md#selectionstate) - -### Methods - -- [`isFocused`](textinput.md#isfocused) -- [`clear`](textinput.md#clear) - ---- - -# Reference - -## Props - -### `secureTextEntry` - -If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `autoCapitalize` - -Can tell TextInput to automatically capitalize certain characters. - -- characters: all characters, -- words: first letter of each word -- sentences: first letter of each sentence (default) -- none: don't auto capitalize anything - -| Type | Required | -| ------------------------------------------------ | -------- | -| enum('none', 'sentences', 'words', 'characters') | No | - ---- - -### `autoFocus` - -If true, focuses the input on componentDidMount. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `defaultValue` - -Provides an initial value that will change when the user starts typing. Useful for use-cases where you don't want to deal with listening to events and updating the value prop to keep the controlled state in sync. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `editable` - -If false, text is not editable. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `keyboardType` - -Determines which keyboard to open, e.g.`numeric`. - -The following values work across platforms: - -- default -- numeric -- email-address - -| Type | Required | -| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| enum('default', 'numeric', 'email-address', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | - ---- - -### `maxLength` - -Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `multiline` - -If true, the text input can be multiple lines. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onBlur` - -Callback that is called when the text input is blurred - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChange` - -Callback that is called when the text input's text changes. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChangeText` - -Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onEndEditing` - -Callback that is called when text input ends. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onFocus` - -Callback that is called when the text input is focused - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{x, y, width, height}`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onSubmitEditing` - -Callback that is called when the text input's submit button is pressed. Invalid if multiline={true} is specified. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `placeholder` - -The string that will be rendered before text input has been entered - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `placeholderTextColor` - -The text color of the placeholder string - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `autoCorrect` - -If false, disables auto-correct. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -Styles - -| Type | Required | -| --------------------- | -------- | -| [Text](text.md#style) | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `value` - -The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `numberOfLines` - -Sets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | Android | - ---- - -### `textAlign` - -Set the position of the cursor from where editing will begin. - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| enum('start', 'center', 'end') | No | Android | - ---- - -### `textAlignVertical` - -Aligns text vertically within the TextInput. - -| Type | Required | Platform | -| ------------------------------- | -------- | -------- | -| enum('top', 'center', 'bottom') | No | Android | - ---- - -### `underlineColorAndroid` - -The color of the textInput underline. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `blurOnSubmit` - -If true, the text field will blur when submitted. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `clearButtonMode` - -When the clear button should appear on the right side of the text view - -| Type | Required | Platform | -| ---------------------------------------------------------- | -------- | -------- | -| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | - ---- - -### `clearTextOnFocus` - -If true, clears the text field automatically when editing begins - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `enablesReturnKeyAutomatically` - -If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `keyboardAppearance` - -Determines the color of the keyboard. - -| Type | Required | Platform | -| -------------------------------- | -------- | -------- | -| enum('default', 'light', 'dark') | No | iOS | - ---- - -### `onKeyPress` - -Callback that is called when a key is pressed. Pressed key value is passed as an argument to the callback handler. Fires before onChange callbacks. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `returnKeyType` - -Determines how the return key should look. - -| Type | Required | Platform | -| ------------------------------------------------------------------------------------------------------------- | -------- | -------- | -| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | iOS | - ---- - -### `selectTextOnFocus` - -If true, all text will automatically be selected on focus - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `selectionState` - -See DocumentSelectionState.js, some state that is responsible for maintaining selection information for a document - -| Type | Required | Platform | -| ---------------------- | -------- | -------- | -| DocumentSelectionState | No | iOS | - -## Methods - -### `isFocused()` - -```jsx -isFocused(): -``` - ---- - -### `clear()` - -```jsx -clear(); -``` diff --git a/website/versioned_docs/version-0.16/toastandroid.md b/website/versioned_docs/version-0.16/toastandroid.md deleted file mode 100644 index 35a15a89737..00000000000 --- a/website/versioned_docs/version-0.16/toastandroid.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -id: version-0.16-toastandroid -title: ToastAndroid -original_id: toastandroid ---- - -This exposes the native ToastAndroid module as a JS module. This has a function 'show' which takes the following parameters: - -1. String message: A string with the text to toast -2. int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG - -### Methods - -- [`show`](toastandroid.md#show) - -### Properties - -- [`SHORT`](toastandroid.md#short) -- [`LONG`](toastandroid.md#long) - ---- - -# Reference - -## Methods - -### `show()` - -```jsx -static show(message, duration) -``` - -## Properties - ---- diff --git a/website/versioned_docs/version-0.16/toolbarandroid.md b/website/versioned_docs/version-0.16/toolbarandroid.md deleted file mode 100644 index 7c758b68b8d..00000000000 --- a/website/versioned_docs/version-0.16/toolbarandroid.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -id: version-0.16-toolbarandroid -title: ToolbarAndroid -original_id: toolbarandroid ---- - -React component that wraps the Android-only [`Toolbar` widget][0]. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right. - -If the toolbar has an only child, it will be displayed between the title and actions. - -Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where `require('./some_icon.png')` translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using `require('./some_icon.png')` will do this automatically for you, so as long as you don't explicitly use e.g. `{uri: 'http://...'}`, you will be good. - -Example: - -``` -render: function() { - return ( - - ) -}, -onActionSelected: function(position) { - if (position === 0) { // index of 'Settings' - showSettings(); - } -} -``` - -[0]: https://developer.android.com/reference/android/support/v7/widget/Toolbar.html - -### Props - -- [View props...](view.md#props) - -* [`overflowIcon`](toolbarandroid.md#overflowicon) -* [`actions`](toolbarandroid.md#actions) -* [`navIcon`](toolbarandroid.md#navicon) -* [`onActionSelected`](toolbarandroid.md#onactionselected) -* [`onIconClicked`](toolbarandroid.md#oniconclicked) -* [`logo`](toolbarandroid.md#logo) -* [`subtitle`](toolbarandroid.md#subtitle) -* [`subtitleColor`](toolbarandroid.md#subtitlecolor) -* [`testID`](toolbarandroid.md#testid) -* [`title`](toolbarandroid.md#title) -* [`titleColor`](toolbarandroid.md#titlecolor) - ---- - -# Reference - -## Props - -### `overflowIcon` - -Sets the overflow icon. - -| Type | Required | -| ------------------- | -------- | -| optionalImageSource | No | - ---- - -### `actions` - -Sets possible actions on the toolbar as part of the action menu. These are displayed as icons or text on the right side of the widget. If they don't fit they are placed in an 'overflow' menu. - -This property takes an array of objects, where each object has the following keys: - -- `title`: **required**, the title of this action -- `icon`: the icon for this action, e.g. `require('image!some_icon')` -- `show`: when to show this action as an icon or hide it in the overflow menu: `always`, `ifRoom` or `never` -- `showWithText`: boolean, whether to show text alongside the icon or not - -| Type | Required | -| --------------------------------------------------------------------------------------------------------------------- | -------- | -| array of object: {title: string,icon: optionalImageSource,show: enum('always', 'ifRoom', 'never'),showWithText: bool} | No | - ---- - -### `navIcon` - -Sets the navigation icon. - -| Type | Required | -| ------------------- | -------- | -| optionalImageSource | No | - ---- - -### `onActionSelected` - -Callback that is called when an action is selected. The only argument that is passeed to the callback is the position of the action in the actions array. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onIconClicked` - -Callback called when the icon is selected. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `logo` - -Sets the toolbar logo. - -| Type | Required | -| ------------------- | -------- | -| optionalImageSource | No | - ---- - -### `subtitle` - -Sets the toolbar subtitle. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `subtitleColor` - -Sets the toolbar subtitle color. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `title` - -Sets the toolbar title. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `titleColor` - -Sets the toolbar title color. - -| Type | Required | -| ------ | -------- | -| string | No | diff --git a/website/versioned_docs/version-0.16/touchablewithoutfeedback.md b/website/versioned_docs/version-0.16/touchablewithoutfeedback.md deleted file mode 100644 index 00811d98255..00000000000 --- a/website/versioned_docs/version-0.16/touchablewithoutfeedback.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: version-0.16-touchablewithoutfeedback -title: TouchableWithoutFeedback -original_id: touchablewithoutfeedback ---- - -Do not use unless you have a very good reason. All the elements that respond to press should have a visual feedback when touched. This is one of the primary reason a "web" app doesn't feel "native". - -### Props - -- [`onLayout`](touchablewithoutfeedback.md#onlayout) -- [`accessibilityComponentType`](touchablewithoutfeedback.md#accessibilitycomponenttype) -- [`accessible`](touchablewithoutfeedback.md#accessible) -- [`delayLongPress`](touchablewithoutfeedback.md#delaylongpress) -- [`delayPressIn`](touchablewithoutfeedback.md#delaypressin) -- [`delayPressOut`](touchablewithoutfeedback.md#delaypressout) -- [`accessibilityTraits`](touchablewithoutfeedback.md#accessibilitytraits) -- [`onLongPress`](touchablewithoutfeedback.md#onlongpress) -- [`onPress`](touchablewithoutfeedback.md#onpress) -- [`onPressIn`](touchablewithoutfeedback.md#onpressin) -- [`onPressOut`](touchablewithoutfeedback.md#onpressout) -- [`pressRetentionOffset`](touchablewithoutfeedback.md#pressretentionoffset) - ---- - -# Reference - -## Props - -### `onLayout` - -Invoked on mount and layout changes with - -`{nativeEvent: {layout: {x, y, width, height}}}` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `accessibilityComponentType` - -| Type | Required | -| ------------------------------- | -------- | -| View.AccessibilityComponentType | No | - ---- - -### `accessible` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `delayLongPress` - -Delay in ms, from onPressIn, before onLongPress is called. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `delayPressIn` - -Delay in ms, from the start of the touch, before onPressIn is called. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `delayPressOut` - -Delay in ms, from the release of the touch, before onPressOut is called. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `accessibilityTraits` - -| Type | Required | -| ------------------------------------------------------------ | -------- | -| View.AccessibilityTraits, ,array of View.AccessibilityTraits | No | - ---- - -### `onLongPress` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPress` - -Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock). - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPressIn` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPressOut` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `pressRetentionOffset` - -When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations. - -| Type | Required | -| ------------------------------------------------------------------ | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | diff --git a/website/versioned_docs/version-0.16/view-style-props.md b/website/versioned_docs/version-0.16/view-style-props.md deleted file mode 100644 index 0d1647cf197..00000000000 --- a/website/versioned_docs/version-0.16/view-style-props.md +++ /dev/null @@ -1,239 +0,0 @@ ---- -id: version-0.16-view-style-props -title: View Style Props -original_id: view-style-props ---- - -### Props - -- [`borderStyle`](view-style-props.md#borderstyle) -- [`backfaceVisibility`](view-style-props.md#backfacevisibility) -- [`borderBottomColor`](view-style-props.md#borderbottomcolor) -- [`borderBottomLeftRadius`](view-style-props.md#borderbottomleftradius) -- [`borderBottomRightRadius`](view-style-props.md#borderbottomrightradius) -- [`borderBottomWidth`](view-style-props.md#borderbottomwidth) -- [`borderColor`](view-style-props.md#bordercolor) -- [`borderLeftColor`](view-style-props.md#borderleftcolor) -- [`borderLeftWidth`](view-style-props.md#borderleftwidth) -- [`borderRadius`](view-style-props.md#borderradius) -- [`borderRightColor`](view-style-props.md#borderrightcolor) -- [`borderRightWidth`](view-style-props.md#borderrightwidth) -- [`backgroundColor`](view-style-props.md#backgroundcolor) -- [`borderTopColor`](view-style-props.md#bordertopcolor) -- [`borderTopLeftRadius`](view-style-props.md#bordertopleftradius) -- [`borderTopRightRadius`](view-style-props.md#bordertoprightradius) -- [`borderTopWidth`](view-style-props.md#bordertopwidth) -- [`borderWidth`](view-style-props.md#borderwidth) -- [`opacity`](view-style-props.md#opacity) -- [`overflow`](view-style-props.md#overflow) -- [`shadowColor`](view-style-props.md#shadowcolor) -- [`shadowOffset`](view-style-props.md#shadowoffset) -- [`shadowOpacity`](view-style-props.md#shadowopacity) -- [`shadowRadius`](view-style-props.md#shadowradius) -- [`elevation`](view-style-props.md#elevation) - ---- - -# Reference - -## Props - -### `borderStyle` - -| Type | Required | -| --------------------------------- | -------- | -| enum('solid', 'dotted', 'dashed') | No | - ---- - -### `backfaceVisibility` - -| Type | Required | -| ------------------------- | -------- | -| enum('visible', 'hidden') | No | - ---- - -### `borderBottomColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `borderBottomLeftRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderBottomRightRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderBottomWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `borderLeftColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `borderLeftWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderRightColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `borderRightWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `backgroundColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `borderTopColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `borderTopLeftRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderTopRightRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderTopWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `opacity` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `overflow` - -| Type | Required | -| ------------------------- | -------- | -| enum('visible', 'hidden') | No | - ---- - -### `shadowColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `shadowOffset` - -| Type | Required | -| -------------------------------------- | -------- | -| object: {width: number,height: number} | No | - ---- - -### `shadowOpacity` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `shadowRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `elevation` - -(Android-only) Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | Android | diff --git a/website/versioned_docs/version-0.16/viewpagerandroid.md b/website/versioned_docs/version-0.16/viewpagerandroid.md deleted file mode 100644 index 6f9164dcf92..00000000000 --- a/website/versioned_docs/version-0.16/viewpagerandroid.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -id: version-0.16-viewpagerandroid -title: ViewPagerAndroid -original_id: viewpagerandroid ---- - -Container that allows to flip left and right between child views. Each child view of the `ViewPagerAndroid` will be treated as a separate page and will be streched to fill the `ViewPagerAndroid`. - -It is important all children are ``s and not composite components. You can set style properties like `padding` or `backgroundColor` for each child. - -Example: - -``` -render: function() { - return ( - - - First page - - - Second page - - - ); -} - -... - -var styles = { - ... - pageStyle: { - alignItems: 'center', - padding: 20, - } -} -``` - -### Props - -- [View props...](view.md#props) - -* [`initialPage`](viewpagerandroid.md#initialpage) -* [`keyboardDismissMode`](viewpagerandroid.md#keyboarddismissmode) -* [`onPageScroll`](viewpagerandroid.md#onpagescroll) -* [`onPageSelected`](viewpagerandroid.md#onpageselected) - -### Methods - -- [`setPage`](viewpagerandroid.md#setpage) -- [`setPageWithoutAnimation`](viewpagerandroid.md#setpagewithoutanimation) - ---- - -# Reference - -## Props - -### `initialPage` - -Index of initial page that should be selected. Use `setPage` method to update the page, and `onPageSelected` to monitor page changes - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. - -| Type | Required | -| ----------------------- | -------- | -| enum('none', 'on-drag') | No | - ---- - -### `onPageScroll` - -Executed when transitioning between pages (ether because of animation for the requested page change or when user is swiping/dragging between pages) The `event.nativeEvent` object for this callback will carry following data: - -- position - index of first page from the left that is currently visible -- offset - value from range [0,1) describing stage between page transitions. Value x means that (1 - x) fraction of the page at "position" index is visible, and x fraction of the next page is visible. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPageSelected` - -This callback will be caleld once ViewPager finish navigating to selected page (when user swipes between pages). The `event.nativeEvent` object passed to this callback will have following fields: - -- position - index of page that has been selected - -| Type | Required | -| -------- | -------- | -| function | No | - -## Methods - -### `setPage()` - -```jsx -setPage((selectedPage: number)); -``` - -A helper function to scroll to a specific page in the ViewPager. The transition between pages will be animated. - ---- - -### `setPageWithoutAnimation()` - -```jsx -setPageWithoutAnimation((selectedPage: number)); -``` - -A helper function to scroll to a specific page in the ViewPager. The transition between pages will be _not_ be animated. diff --git a/website/versioned_docs/version-0.16/webview.md b/website/versioned_docs/version-0.16/webview.md deleted file mode 100644 index 6e5aafd77e6..00000000000 --- a/website/versioned_docs/version-0.16/webview.md +++ /dev/null @@ -1,249 +0,0 @@ ---- -id: version-0.16-webview -title: WebView -original_id: webview ---- - -Renders a native WebView. - -Note that WebView is only supported on iOS for now, see https://reactnative.dev/known-issues.md - -### Props - -- [View props...](view.md#props) - -* [`scrollEnabled`](webview.md#scrollenabled) -* [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) -* [`contentInset`](webview.md#contentinset) -* [`html`](webview.md#html) -* [`injectedJavaScript`](webview.md#injectedjavascript) -* [`onNavigationStateChange`](webview.md#onnavigationstatechange) -* [`renderError`](webview.md#rendererror) -* [`renderLoading`](webview.md#renderloading) -* [`bounces`](webview.md#bounces) -* [`startInLoadingState`](webview.md#startinloadingstate) -* [`style`](webview.md#style) -* [`url`](webview.md#url) -* [`javaScriptEnabledAndroid`](webview.md#javascriptenabledandroid) -* [`allowsInlineMediaPlayback`](webview.md#allowsinlinemediaplayback) -* [`onShouldStartLoadWithRequest`](webview.md#onshouldstartloadwithrequest) -* [`scalesPageToFit`](webview.md#scalespagetofit) - -### Methods - -- [`goForward`](webview.md#goforward) -- [`goBack`](webview.md#goback) -- [`reload`](webview.md#reload) -- [`updateNavigationState`](webview.md#updatenavigationstate) -- [`getWebViewHandle`](webview.md#getwebviewhandle) -- [`onLoadingStart`](webview.md#onloadingstart) -- [`onLoadingError`](webview.md#onloadingerror) -- [`onLoadingFinish`](webview.md#onloadingfinish) - ---- - -# Reference - -## Props - -### `scrollEnabled` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `automaticallyAdjustContentInsets` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `contentInset` - -| Type | Required | -| ------------------------------------------------------------------ | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | - ---- - -### `html` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `injectedJavaScript` - -Sets the JS to be injected when the webpage loads. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `onNavigationStateChange` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `renderError` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `renderLoading` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `bounces` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `startInLoadingState` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `url` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `javaScriptEnabledAndroid` - -Used for android only, JS is enabled by default for WebView on iOS - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `allowsInlineMediaPlayback` - -Determines whether HTML5 videos play inline or use the native full-screen controller. default value `false` **NOTE** : "In order for video to play inline, not only does this property need to be set to true, but the video element in the HTML document must also include the webkit-playsinline attribute." - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `onShouldStartLoadWithRequest` - -Allows custom handling of any webview requests by a JS handler. Return true or false from this method to continue loading the request. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `scalesPageToFit` - -Sets whether the webpage scales to fit the view and the user can change the scale. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - -## Methods - -### `goForward()` - -```jsx -goForward(); -``` - ---- - -### `goBack()` - -```jsx -goBack(); -``` - ---- - -### `reload()` - -```jsx -reload(); -``` - ---- - -### `updateNavigationState()` - -```jsx -updateNavigationState((event: Event)); -``` - -We return an event with a bunch of fields including: url, title, loading, canGoBack, canGoForward - ---- - -### `getWebViewHandle()` - -```jsx -getWebViewHandle(): -``` - ---- - -### `onLoadingStart()` - -```jsx -onLoadingStart((event: Event)); -``` - ---- - -### `onLoadingError()` - -```jsx -onLoadingError((event: Event)); -``` - ---- - -### `onLoadingFinish()` - -```jsx -onLoadingFinish((event: Event)); -``` diff --git a/website/versioned_docs/version-0.17/asyncstorage.md b/website/versioned_docs/version-0.17/asyncstorage.md deleted file mode 100644 index 120f577338e..00000000000 --- a/website/versioned_docs/version-0.17/asyncstorage.md +++ /dev/null @@ -1,149 +0,0 @@ ---- -id: version-0.17-asyncstorage -title: AsyncStorage -original_id: asyncstorage ---- - -AsyncStorage is an unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage. - -It is recommended that you use an abstraction on top of AsyncStorage instead of AsyncStorage directly for anything more than light usage since it operates globally. - -This JS code is a facade over the native iOS implementation to provide a clear JS API, real Error objects, and non-multi functions. Each method returns a `Promise` object. - -### Methods - -- [`getItem`](asyncstorage.md#getitem) -- [`setItem`](asyncstorage.md#setitem) -- [`removeItem`](asyncstorage.md#removeitem) -- [`mergeItem`](asyncstorage.md#mergeitem) -- [`clear`](asyncstorage.md#clear) -- [`getAllKeys`](asyncstorage.md#getallkeys) -- [`flushGetRequests`](asyncstorage.md#flushgetrequests) -- [`multiGet`](asyncstorage.md#multiget) -- [`multiSet`](asyncstorage.md#multiset) -- [`multiRemove`](asyncstorage.md#multiremove) -- [`multiMerge`](asyncstorage.md#multimerge) - -### Properties - ---- - -# Reference - -## Methods - -### `getItem()` - -```jsx -static getItem(key, callback?) -``` - -Fetches `key` and passes the result to `callback`, along with an `Error` if there is any. Returns a `Promise` object. - ---- - -### `setItem()` - -```jsx -static setItem(key, value, callback?) -``` - -Sets `value` for `key` and calls `callback` on completion, along with an `Error` if there is any. Returns a `Promise` object. - ---- - -### `removeItem()` - -```jsx -static removeItem(key, callback?) -``` - -Returns a `Promise` object. - ---- - -### `mergeItem()` - -```jsx -static mergeItem(key, value, callback?) -``` - -Merges existing value with input value, assuming they are stringified json. Returns a `Promise` object. Not supported by all native implementations. - ---- - -### `clear()` - -```jsx -static clear(callback?) -``` - -Erases _all_ AsyncStorage for all clients, libraries, etc. You probably don't want to call this - use removeItem or multiRemove to clear only your own keys instead. Returns a `Promise` object. - ---- - -### `getAllKeys()` - -```jsx -static getAllKeys(callback?) -``` - -Gets _all_ keys known to the app, for all callers, libraries, etc. Returns a `Promise` object. - ---- - -### `flushGetRequests()` - -```jsx -static flushGetRequests() -``` - -Flushes any pending requests using a single multiget - ---- - -### `multiGet()` - -```jsx -static multiGet(keys, callback?) -``` - -multiGet invokes callback with an array of key-value pair arrays that matches the input format of multiSet. Returns a `Promise` object. - -multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']]) - ---- - -### `multiSet()` - -```jsx -static multiSet(keyValuePairs, callback?) -``` - -multiSet and multiMerge take arrays of key-value array pairs that match the output of multiGet, e.g. Returns a `Promise` object. - -multiSet([['k1', 'val1'], ['k2', 'val2']], cb); - ---- - -### `multiRemove()` - -```jsx -static multiRemove(keys, callback?) -``` - -Delete all the keys in the `keys` array. Returns a `Promise` object. - ---- - -### `multiMerge()` - -```jsx -static multiMerge(keyValuePairs, callback?) -``` - -Merges existing values with input values, assuming they are stringified json. Returns a `Promise` object. - -Not supported by all native implementations. - -## Properties diff --git a/website/versioned_docs/version-0.17/image.md b/website/versioned_docs/version-0.17/image.md deleted file mode 100644 index 5c3105a1c9c..00000000000 --- a/website/versioned_docs/version-0.17/image.md +++ /dev/null @@ -1,205 +0,0 @@ ---- -id: version-0.17-image -title: Image -original_id: image ---- - -A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. - -Example usage: - -``` -renderImages: function() { - return ( - - - - - ); -}, -``` - -### Props - -- [`testID`](image.md#testid) -- [`onLayout`](image.md#onlayout) -- [`onLoadEnd`](image.md#onloadend) -- [`onLoadStart`](image.md#onloadstart) -- [`resizeMode`](image.md#resizemode) -- [`source`](image.md#source) -- [`style`](image.md#style) -- [`onLoad`](image.md#onload) -- [`accessibilityLabel`](image.md#accessibilitylabel) -- [`accessible`](image.md#accessible) -- [`capInsets`](image.md#capinsets) -- [`defaultSource`](image.md#defaultsource) -- [`onError`](image.md#onerror) -- [`onProgress`](image.md#onprogress) - ---- - -# Reference - -## Props - -### `testID` - -A unique identifier for this element to be used in UI Automation testing scripts. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{nativeEvent: {layout: {x, y, width, height}}}`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadEnd` - -Invoked when load either succeeds or fails - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadStart` - -Invoked on load start - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `resizeMode` - -Determines how to resize the image when the frame doesn't match the raw image dimensions. - -| Type | Required | -| ----------------------------------- | -------- | -| enum('cover', 'contain', 'stretch') | No | - ---- - -### `source` - -`uri` is a string representing the resource identifier for the image, which could be an http address, a local file path, or the name of a static image resource (which should be wrapped in the `require('image!name')` function). - -| Type | Required | -| ------------------------------ | -------- | -| object: {uri: string}, ,number | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`backgroundColor`**: string - -- **`borderColor`**: string - -- **`borderRadius`**: number - -- **`borderWidth`**: number - -- **`opacity`**: number - -- **`overflow`**: enum('visible', 'hidden') - -- **`resizeMode`**: Object.keys(ImageResizeMode) - -- **`tintColor`**: string - ---- - -### `onLoad` - -Invoked when load completes successfully - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `accessibilityLabel` - -The text that's read by the screen reader when the user interacts with the image. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | iOS | - ---- - -### `accessible` - -When true, indicates the image is an accessibility element. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `capInsets` - -When the image is resized, the corners of the size specified by capInsets will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info on [Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets) - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `defaultSource` - -A static image to display while loading the image source. - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| object: {uri: string}, ,number | No | iOS | - ---- - -### `onError` - -Invoked on load error with `{nativeEvent: {error}}` - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `onProgress` - -Invoked on download progress with `{nativeEvent: {loaded, total}}` - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | diff --git a/website/versioned_docs/version-0.17/modal.md b/website/versioned_docs/version-0.17/modal.md deleted file mode 100644 index 5377b585620..00000000000 --- a/website/versioned_docs/version-0.17/modal.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: version-0.17-modal -title: Modal -original_id: modal ---- - -A Modal component covers the native view (e.g. UIViewController, Activity) that contains the React Native root. - -Use Modal in hybrid apps that embed React Native; Modal allows the portion of your app written in React Native to present content above the enclosing native view hierarchy. - -In apps written with React Native from the root view down, you should use Navigator instead of Modal. With a top-level Navigator, you have more control over how to present the modal scene over the rest of your app by using the configureScene property. - -This component is only available in iOS at this time. - -### Props - -- [`animated`](modal.md#animated) -- [`onDismiss`](modal.md#ondismiss) -- [`transparent`](modal.md#transparent) -- [`visible`](modal.md#visible) - ---- - -# Reference - -## Props - -### `animated` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onDismiss` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `transparent` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `visible` - -| Type | Required | -| ---- | -------- | -| bool | No | diff --git a/website/versioned_docs/version-0.17/navigatorios.md b/website/versioned_docs/version-0.17/navigatorios.md deleted file mode 100644 index f83d18249ca..00000000000 --- a/website/versioned_docs/version-0.17/navigatorios.md +++ /dev/null @@ -1,291 +0,0 @@ ---- -id: version-0.17-navigatorios -title: NavigatorIOS -original_id: navigatorios ---- - -NavigatorIOS wraps UIKit navigation and allows you to add back-swipe functionality across your app. - -> **NOTE**: This Component is not maintained by Facebook -> -> This component is under community responsibility. If a pure JavaScript solution fits your needs you may try the `Navigator` component instead. - -#### Routes - -A route is an object used to describe each page in the navigator. The first route is provided to NavigatorIOS as `initialRoute`: - -``` -render: function() { - return ( - - ); -}, -``` - -Now MyView will be rendered by the navigator. It will receive the route object in the `route` prop, a navigator, and all of the props specified in `passProps`. - -See the initialRoute propType for a complete definition of a route. - -#### Navigator - -A `navigator` is an object of navigation functions that a view can call. It is passed as a prop to any component rendered by NavigatorIOS. - -``` -var MyView = React.createClass({ - _handleBackButtonPress: function() { - this.props.navigator.pop(); - }, - _handleNextButtonPress: function() { - this.props.navigator.push(nextRoute); - }, - ... -}); -``` - -A navigation object contains the following functions: - -- `push(route)` - Navigate forward to a new route -- `pop()` - Go back one page -- `popN(n)` - Go back N pages at once. When N=1, behavior matches `pop()` -- `replace(route)` - Replace the route for the current page and immediately load the view for the new route -- `replacePrevious(route)` - Replace the route/view for the previous page -- `replacePreviousAndPop(route)` - Replaces the previous route/view and transitions back to it -- `resetTo(route)` - Replaces the top item and popToTop -- `popToRoute(route)` - Go back to the item for a particular route object -- `popToTop()` - Go back to the top item - -Navigator functions are also available on the NavigatorIOS component: - -``` -var MyView = React.createClass({ - _handleNavigationRequest: function() { - this.refs.nav.push(otherRoute); - }, - render: () => ( - - ), -}); -``` - -### Props - -- [`initialRoute`](navigatorios.md#initialroute) -- [`barTintColor`](navigatorios.md#bartintcolor) -- [`itemWrapperStyle`](navigatorios.md#itemwrapperstyle) -- [`navigationBarHidden`](navigatorios.md#navigationbarhidden) -- [`shadowHidden`](navigatorios.md#shadowhidden) -- [`tintColor`](navigatorios.md#tintcolor) -- [`titleTextColor`](navigatorios.md#titletextcolor) -- [`translucent`](navigatorios.md#translucent) - -### Methods - -- [`push`](navigatorios.md#push) -- [`popN`](navigatorios.md#popn) -- [`pop`](navigatorios.md#pop) -- [`replaceAtIndex`](navigatorios.md#replaceatindex) -- [`replace`](navigatorios.md#replace) -- [`replacePrevious`](navigatorios.md#replaceprevious) -- [`popToTop`](navigatorios.md#poptotop) -- [`popToRoute`](navigatorios.md#poptoroute) -- [`replacePreviousAndPop`](navigatorios.md#replacepreviousandpop) -- [`resetTo`](navigatorios.md#resetto) -- [`handleNavigationComplete`](navigatorios.md#handlenavigationcomplete) -- [`renderNavigationStackItems`](navigatorios.md#rendernavigationstackitems) - ---- - -# Reference - -## Props - -### `initialRoute` - -NavigatorIOS uses "route" objects to identify child views, their props, and navigation bar configuration. "push" and all the other navigation operations expect routes to be like this: - -| Type | Required | -| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| object: {component: function,title: string,passProps: object,backButtonIcon: Image.propTypes.source,backButtonTitle: string,leftButtonIcon: Image.propTypes.source,leftButtonTitle: string,onLeftButtonPress: function,rightButtonIcon: Image.propTypes.source,rightButtonTitle: string,onRightButtonPress: function,wrapperStyle: [View](view.md#style)} | Yes | - ---- - -### `barTintColor` - -The background color of the navigation bar - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `itemWrapperStyle` - -The default wrapper style for components in the navigator. A common use case is to set the backgroundColor for every page - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `navigationBarHidden` - -A Boolean value that indicates whether the navigation bar is hidden - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `shadowHidden` - -A Boolean value that indicates whether to hide the 1px hairline shadow - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `tintColor` - -The color used for buttons in the navigation bar - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `titleTextColor` - -The text color of the navigation bar title - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `translucent` - -A Boolean value that indicates whether the navigation bar is translucent - -| Type | Required | -| ---- | -------- | -| bool | No | - -## Methods - -### `push()` - -```jsx -push((route: object)); -``` - ---- - -### `popN()` - -```jsx -popN((n: number)); -``` - ---- - -### `pop()` - -```jsx -pop(); -``` - ---- - -### `replaceAtIndex()` - -```jsx -replaceAtIndex((route: object), (index: number)); -``` - -Replace a route in the navigation stack. - -`index` specifies the route in the stack that should be replaced. If it's negative, it counts from the back. - ---- - -### `replace()` - -```jsx -replace((route: object)); -``` - -Replaces the top of the navigation stack. - ---- - -### `replacePrevious()` - -```jsx -replacePrevious((route: object)); -``` - -Replace the current route's parent. - ---- - -### `popToTop()` - -```jsx -popToTop(); -``` - ---- - -### `popToRoute()` - -```jsx -popToRoute((route: object)); -``` - ---- - -### `replacePreviousAndPop()` - -```jsx -replacePreviousAndPop((route: object)); -``` - ---- - -### `resetTo()` - -```jsx -resetTo((route: object)); -``` - ---- - -### `handleNavigationComplete()` - -```jsx -handleNavigationComplete((e: Event)); -``` - ---- - -### `renderNavigationStackItems()` - -```jsx -renderNavigationStackItems(); -``` diff --git a/website/versioned_docs/version-0.17/netinfo.md b/website/versioned_docs/version-0.17/netinfo.md deleted file mode 100644 index f34d822ff25..00000000000 --- a/website/versioned_docs/version-0.17/netinfo.md +++ /dev/null @@ -1,137 +0,0 @@ ---- -id: version-0.17-netinfo -title: NetInfo -original_id: netinfo ---- - -NetInfo exposes info about online/offline status - -``` -NetInfo.fetch().done((reach) => { - console.log('Initial: ' + reach); -}); -function handleFirstConnectivityChange(reach) { - console.log('First change: ' + reach); - NetInfo.removeEventListener( - 'change', - handleFirstConnectivityChange - ); -} -NetInfo.addEventListener( - 'change', - handleFirstConnectivityChange -); -``` - -### IOS - -Asynchronously determine if the device is online and on a cellular network. - -- `none` - device is offline -- `wifi` - device is online and connected via wifi, or is the iOS simulator -- `cell` - device is connected via Edge, 3G, WiMax, or LTE -- `unknown` - error case and the network status is unknown - -### Android - -To request network info, you need to add the following line to your app's `AndroidManifest.xml`: - -`` Asynchronously determine if the device is connected and details about that connection. - -Android Connectivity Types. - -- `NONE` - device is offline -- `BLUETOOTH` - The Bluetooth data connection. -- `DUMMY` - Dummy data connection. -- `ETHERNET` - The Ethernet data connection. -- `MOBILE` - The Mobile data connection. -- `MOBILE_DUN` - A DUN-specific Mobile data connection. -- `MOBILE_HIPRI` - A High Priority Mobile data connection. -- `MOBILE_MMS` - An MMS-specific Mobile data connection. -- `MOBILE_SUPL` - A SUPL-specific Mobile data connection. -- `VPN` - A virtual network using one or more native bearers. Requires API Level 21 -- `WIFI` - The WIFI data connection. -- `WIMAX` - The WiMAX data connection. -- `UNKNOWN` - Unknown data connection. - -The rest ConnectivityStates are hidden by the Android API, but can be used if necessary. - -### isConnectionExpensive - -Available on Android. Detect if the current active connection is metered or not. A network is classified as metered when the user is sensitive to heavy data usage on that connection due to monetary costs, data limitations or battery/performance issues. - -``` -NetInfo.isConnectionExpensive((isConnectionExpensive) => { - console.log('Connection is ' + (isConnectionExpensive ? 'Expensive' : 'Not Expensive')); -}); -``` - -### isConnected - -Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity. - -``` -NetInfo.isConnected.fetch().done((isConnected) => { - console.log('First, is ' + (isConnected ? 'online' : 'offline')); -}); -function handleFirstConnectivityChange(isConnected) { - console.log('Then, is ' + (isConnected ? 'online' : 'offline')); - NetInfo.isConnected.removeEventListener( - 'change', - handleFirstConnectivityChange - ); -} -NetInfo.isConnected.addEventListener( - 'change', - handleFirstConnectivityChange -); -``` - -### Methods - -- [`addEventListener`](netinfo.md#addeventlistener) -- [`removeEventListener`](netinfo.md#removeeventlistener) -- [`fetch`](netinfo.md#fetch) -- [`isConnectionExpensive`](netinfo.md#isconnectionexpensive) - -### Properties - -- [`isConnected`](netinfo.md#isconnected) - ---- - -# Reference - -## Methods - -### `addEventListener()` - -```jsx -static addEventListener(eventName, handler) -``` - ---- - -### `removeEventListener()` - -```jsx -static removeEventListener(eventName, handler) -``` - ---- - -### `fetch()` - -```jsx -static fetch() -``` - ---- - -### `isConnectionExpensive()` - -```jsx -static isConnectionExpensive(callback) -``` - -## Properties diff --git a/website/versioned_docs/version-0.17/scrollview.md b/website/versioned_docs/version-0.17/scrollview.md deleted file mode 100644 index 7c0514dc4e9..00000000000 --- a/website/versioned_docs/version-0.17/scrollview.md +++ /dev/null @@ -1,506 +0,0 @@ ---- -id: version-0.17-scrollview -title: ScrollView -original_id: scrollview ---- - -Component that wraps platform ScrollView while providing integration with touch locking "responder" system. - -Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer `{flex: 1}` down the view stack can lead to errors here, which the element inspector makes quick to debug. - -Doesn't yet support other contained responders from blocking this scroll view from becoming the responder. - -### Props - -- [View props...](view.md#props) - -* [`contentInset`](scrollview.md#contentinset) -* [`contentContainerStyle`](scrollview.md#contentcontainerstyle) -* [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) -* [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) -* [`onContentSizeChange`](scrollview.md#oncontentsizechange) -* [`onScroll`](scrollview.md#onscroll) -* [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) -* [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) -* [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) -* [`style`](scrollview.md#style) -* [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) -* [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) -* [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) -* [`bounces`](scrollview.md#bounces) -* [`bouncesZoom`](scrollview.md#bounceszoom) -* [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) -* [`centerContent`](scrollview.md#centercontent) -* [`horizontal`](scrollview.md#horizontal) -* [`contentOffset`](scrollview.md#contentoffset) -* [`decelerationRate`](scrollview.md#decelerationrate) -* [`directionalLockEnabled`](scrollview.md#directionallockenabled) -* [`maximumZoomScale`](scrollview.md#maximumzoomscale) -* [`minimumZoomScale`](scrollview.md#minimumzoomscale) -* [`onRefreshStart`](scrollview.md#onrefreshstart) -* [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) -* [`pagingEnabled`](scrollview.md#pagingenabled) -* [`scrollEnabled`](scrollview.md#scrollenabled) -* [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) -* [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) -* [`scrollsToTop`](scrollview.md#scrollstotop) -* [`snapToAlignment`](scrollview.md#snaptoalignment) -* [`snapToInterval`](scrollview.md#snaptointerval) -* [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) -* [`zoomScale`](scrollview.md#zoomscale) - -### Methods - -- [`endRefreshing`](scrollview.md#endrefreshing) -- [`scrollTo`](scrollview.md#scrollto) -- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) -- [`handleScroll`](scrollview.md#handlescroll) - ---- - -# Reference - -## Props - -### `contentInset` - -The amount by which the scroll view content is inset from the edges of the scroll view. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `contentContainerStyle` - -These styles will be applied to the scroll view content container which wraps all of the child views. Example: - -return ( ); ... var styles = StyleSheet.create({ contentContainer: { paddingVertical: 20 } }); - -| Type | Required | -| ------------------------------------ | -------- | -| StyleSheetPropType(View Style props) | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. -- 'interactive', the keyboard is dismissed interactively with the drag and moves in synchrony with the touch; dragging upwards cancels the dismissal. On android this is not supported and it will have the same behavior as 'none'. - -| Type | Required | -| -------------------------------------- | -------- | -| enum('none', 'interactive', 'on-drag') | No | - ---- - -### `keyboardShouldPersistTaps` - -When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the scroll view will not catch taps, and the keyboard will not dismiss automatically. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onContentSizeChange` - -Called when scrollable content view of the ScrollView changes. It's implemented using onLayout handler attached to the content container which this ScrollView renders. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onScroll` - -Fires at most once per frame during scrolling. The frequency of the events can be contolled using the `scrollEventThrottle` prop. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `removeClippedSubviews` - -Experimental: When true, offscreen child views (whose `overflow` value is `hidden`) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsHorizontalScrollIndicator` - -When true, shows a horizontal scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsVerticalScrollIndicator` - -When true, shows a vertical scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderStyle`**: enum('solid', 'dotted', 'dashed') - -- **`backfaceVisibility`**: enum('visible', 'hidden') - -- **`borderBottomColor`**: string - -- **`borderBottomLeftRadius`**: number - -- **`borderBottomRightRadius`**: number - -- **`borderBottomWidth`**: number - -- **`borderColor`**: string - -- **`borderLeftColor`**: string - -- **`borderLeftWidth`**: number - -- **`borderRadius`**: number - -- **`borderRightColor`**: string - -- **`borderRightWidth`**: number - -- **`backgroundColor`**: string - -- **`borderTopColor`**: string - -- **`borderTopLeftRadius`**: number - -- **`borderTopRightRadius`**: number - -- **`borderTopWidth`**: number - -- **`borderWidth`**: number - -- **`opacity`**: number - -- **`overflow`**: enum('visible', 'hidden') - -- **`shadowColor`**: string - -- **`shadowOffset`**: object: {width: number,height: number} - -- **`shadowOpacity`**: number - -- **`shadowRadius`**: number - -- **`elevation`**: number (_Android_) - - (Android-only) Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions. - ---- - -### `alwaysBounceHorizontal` - -When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself. The default value is true when `horizontal={true}` and false otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `alwaysBounceVertical` - -When true, the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself. The default value is false when `horizontal={true}` and true otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `automaticallyAdjustContentInsets` - -Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/ toolbar. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bounces` - -When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. When false, it disables all bouncing even if the `alwaysBounce*` props are true. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bouncesZoom` - -When true, gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture end, otherwise the zoom will not exceed the limits. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `canCancelContentTouches` - -When false, once tracking starts, won't try to drag if the touch moves. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `centerContent` - -When true, the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `horizontal` - -When true, the scroll view's children are arranged horizontally in a row instead of vertically in a column. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `contentOffset` - -Used to manually set the starting scroll offset. The default value is `{x: 0, y: 0}`. - -| Type | Required | Platform | -| ------------- | -------- | -------- | -| PointPropType | No | iOS | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. Reasonable choices include - -- Normal: 0.998 (the default) -- Fast: 0.9 - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `directionalLockEnabled` - -When true, the ScrollView will try to lock to only vertical or horizontal scrolling while dragging. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `maximumZoomScale` - -The maximum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `minimumZoomScale` - -The minimum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `onRefreshStart` - -When defined, displays a UIRefreshControl. Invoked with a function to stop refreshing when the UIRefreshControl is animating. - -``` -(endRefreshing) => { - endRefreshing(); -} -``` - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `onScrollAnimationEnd` - -Called when a scrolling animation ends. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `pagingEnabled` - -When true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEnabled` - -When false, the content does not scroll. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEventThrottle` - -This controls how often the scroll event will be fired while scrolling (in events per seconds). A higher number yields better accuracy for code that is tracking the scroll position, but can lead to scroll performance problems due to the volume of information being send over the bridge. The default value is zero, which means the scroll event will be sent only once each time the view is scrolled. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `scrollIndicatorInsets` - -The amount by which the scroll view indicators are inset from the edges of the scroll view. This should normally be set to the same value as the `contentInset`. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `scrollsToTop` - -When true, the scroll view scrolls to top when the status bar is tapped. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `snapToAlignment` - -When `snapToInterval` is set, `snapToAlignment` will define the relationship of the the snapping to the scroll view. - -- `start` (the default) will align the snap at the left (horizontal) or top (vertical) -- `center` will align the snap in the center -- `end` will align the snap at the right (horizontal) or bottom (vertical) - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| enum('start', 'center', 'end') | No | iOS | - ---- - -### `snapToInterval` - -When set, causes the scroll view to stop at multiples of the value of `snapToInterval`. This can be used for paginating through children that have lengths smaller than the scroll view. Used in combination with `snapToAlignment`. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `stickyHeaderIndices` - -An array of child indices determining which children get docked to the top of the screen when scrolling. For example, passing `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction with `horizontal={true}`. - -| Type | Required | Platform | -| --------------- | -------- | -------- | -| array of number | No | iOS | - ---- - -### `zoomScale` - -The current scale of the scroll view content. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - -## Methods - -### `endRefreshing()` - -```jsx -endRefreshing(); -``` - ---- - -### `scrollTo()` - -```jsx -scrollTo(([destY]: number), ([destX]: number)); -``` - ---- - -### `scrollWithoutAnimationTo()` - -```jsx -scrollWithoutAnimationTo(([destY]: number), ([destX]: number)); -``` - ---- - -### `handleScroll()` - -```jsx -handleScroll((e: Object)); -``` diff --git a/website/versioned_docs/version-0.17/text.md b/website/versioned_docs/version-0.17/text.md deleted file mode 100644 index ffc1683e742..00000000000 --- a/website/versioned_docs/version-0.17/text.md +++ /dev/null @@ -1,155 +0,0 @@ ---- -id: version-0.17-text -title: Text -original_id: text ---- - -A React component for displaying text which supports nesting, styling, and touch handling. In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines: - -``` -renderText: function() { - return ( - - - {this.state.titleText + '\n\n'} - - - {this.state.bodyText} - - - ); -}, -... -var styles = StyleSheet.create({ - baseText: { - fontFamily: 'Cochin', - }, - titleText: { - fontSize: 20, - fontWeight: 'bold', - }, -}; -``` - -### Props - -- [`accessible`](text.md#accessible) -- [`allowFontScaling`](text.md#allowfontscaling) -- [`numberOfLines`](text.md#numberoflines) -- [`onLayout`](text.md#onlayout) -- [`onPress`](text.md#onpress) -- [`style`](text.md#style) -- [`testID`](text.md#testid) -- [`suppressHighlighting`](text.md#suppresshighlighting) - ---- - -# Reference - -## Props - -### `accessible` - -| Type | Required | -| ---- | -------- | -| | No | - ---- - -### `allowFontScaling` - -Specifies should fonts scale to respect Text Size accessibility setting on iOS. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `numberOfLines` - -Used to truncate the text with an elipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with - -`{nativeEvent: {layout: {x, y, width, height}}}` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPress` - -This function is called on press. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [View Style Props...](view-style-props.md#style) - -- **`textAlign`**: enum('auto', 'left', 'right', 'center', 'justify') - - Specifies text alignment. The value 'justify' is only supported on iOS. - -- **`color`**: string - -- **`fontSize`**: number - -- **`fontStyle`**: enum('normal', 'italic') - -- **`fontWeight`**: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') - - Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen. - -- **`lineHeight`**: number - -- **`fontFamily`**: string - -- **`letterSpacing`**: number (_iOS_) - -- **`textDecorationColor`**: string (_iOS_) - -- **`textDecorationLine`**: enum('none', 'underline', 'line-through', 'underline line-through') (_iOS_) - -- **`textDecorationStyle`**: enum('solid', 'double', 'dotted', 'dashed') (_iOS_) - -- **`writingDirection`**: enum('auto', 'ltr', 'rtl') (_iOS_) - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `suppressHighlighting` - -When true, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | diff --git a/website/versioned_docs/version-0.17/textinput.md b/website/versioned_docs/version-0.17/textinput.md deleted file mode 100644 index 38a76f04a15..00000000000 --- a/website/versioned_docs/version-0.17/textinput.md +++ /dev/null @@ -1,434 +0,0 @@ ---- -id: version-0.17-textinput -title: TextInput -original_id: textinput ---- - -A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. - -The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example: - -``` - this.setState({text})} - value={this.state.text} - /> -``` - -Note that some props are only available with `multiline={true/false}`: - -### Props - -- [View props...](view.md#props) - -* [`secureTextEntry`](textinput.md#securetextentry) -* [`autoCapitalize`](textinput.md#autocapitalize) -* [`autoFocus`](textinput.md#autofocus) -* [`defaultValue`](textinput.md#defaultvalue) -* [`editable`](textinput.md#editable) -* [`keyboardType`](textinput.md#keyboardtype) -* [`maxLength`](textinput.md#maxlength) -* [`multiline`](textinput.md#multiline) -* [`onBlur`](textinput.md#onblur) -* [`onChange`](textinput.md#onchange) -* [`onChangeText`](textinput.md#onchangetext) -* [`onEndEditing`](textinput.md#onendediting) -* [`onFocus`](textinput.md#onfocus) -* [`onLayout`](textinput.md#onlayout) -* [`onSubmitEditing`](textinput.md#onsubmitediting) -* [`placeholder`](textinput.md#placeholder) -* [`placeholderTextColor`](textinput.md#placeholdertextcolor) -* [`autoCorrect`](textinput.md#autocorrect) -* [`style`](textinput.md#style) -* [`testID`](textinput.md#testid) -* [`value`](textinput.md#value) -* [`numberOfLines`](textinput.md#numberoflines) -* [`textAlign`](textinput.md#textalign) -* [`textAlignVertical`](textinput.md#textalignvertical) -* [`underlineColorAndroid`](textinput.md#underlinecolorandroid) -* [`blurOnSubmit`](textinput.md#bluronsubmit) -* [`clearButtonMode`](textinput.md#clearbuttonmode) -* [`clearTextOnFocus`](textinput.md#cleartextonfocus) -* [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) -* [`keyboardAppearance`](textinput.md#keyboardappearance) -* [`onKeyPress`](textinput.md#onkeypress) -* [`returnKeyType`](textinput.md#returnkeytype) -* [`selectTextOnFocus`](textinput.md#selecttextonfocus) -* [`selectionState`](textinput.md#selectionstate) - -### Methods - -- [`isFocused`](textinput.md#isfocused) -- [`clear`](textinput.md#clear) - ---- - -# Reference - -## Props - -### `secureTextEntry` - -If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `autoCapitalize` - -Can tell TextInput to automatically capitalize certain characters. - -- characters: all characters, -- words: first letter of each word -- sentences: first letter of each sentence (default) -- none: don't auto capitalize anything - -| Type | Required | -| ------------------------------------------------ | -------- | -| enum('none', 'sentences', 'words', 'characters') | No | - ---- - -### `autoFocus` - -If true, focuses the input on componentDidMount. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `defaultValue` - -Provides an initial value that will change when the user starts typing. Useful for use-cases where you don't want to deal with listening to events and updating the value prop to keep the controlled state in sync. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `editable` - -If false, text is not editable. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `keyboardType` - -Determines which keyboard to open, e.g.`numeric`. - -The following values work across platforms: - -- default -- numeric -- email-address - -| Type | Required | -| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| enum('default', 'numeric', 'email-address', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | - ---- - -### `maxLength` - -Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `multiline` - -If true, the text input can be multiple lines. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onBlur` - -Callback that is called when the text input is blurred - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChange` - -Callback that is called when the text input's text changes. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChangeText` - -Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onEndEditing` - -Callback that is called when text input ends. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onFocus` - -Callback that is called when the text input is focused - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{x, y, width, height}`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onSubmitEditing` - -Callback that is called when the text input's submit button is pressed. Invalid if multiline={true} is specified. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `placeholder` - -The string that will be rendered before text input has been entered - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `placeholderTextColor` - -The text color of the placeholder string - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `autoCorrect` - -If false, disables auto-correct. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -Styles - -| Type | Required | -| --------------------- | -------- | -| [Text](text.md#style) | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `value` - -The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `numberOfLines` - -Sets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | Android | - ---- - -### `textAlign` - -Set the position of the cursor from where editing will begin. - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| enum('start', 'center', 'end') | No | Android | - ---- - -### `textAlignVertical` - -Aligns text vertically within the TextInput. - -| Type | Required | Platform | -| ------------------------------- | -------- | -------- | -| enum('top', 'center', 'bottom') | No | Android | - ---- - -### `underlineColorAndroid` - -The color of the textInput underline. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `blurOnSubmit` - -If true, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting blurOnSubmit to true means that pressing return will blur the field and trigger the onSubmitEditing event instead of inserting a newline into the field. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `clearButtonMode` - -When the clear button should appear on the right side of the text view - -| Type | Required | Platform | -| ---------------------------------------------------------- | -------- | -------- | -| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | - ---- - -### `clearTextOnFocus` - -If true, clears the text field automatically when editing begins - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `enablesReturnKeyAutomatically` - -If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `keyboardAppearance` - -Determines the color of the keyboard. - -| Type | Required | Platform | -| -------------------------------- | -------- | -------- | -| enum('default', 'light', 'dark') | No | iOS | - ---- - -### `onKeyPress` - -Callback that is called when a key is pressed. Pressed key value is passed as an argument to the callback handler. Fires before onChange callbacks. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `returnKeyType` - -Determines how the return key should look. - -| Type | Required | Platform | -| ------------------------------------------------------------------------------------------------------------- | -------- | -------- | -| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | iOS | - ---- - -### `selectTextOnFocus` - -If true, all text will automatically be selected on focus - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `selectionState` - -See DocumentSelectionState.js, some state that is responsible for maintaining selection information for a document - -| Type | Required | Platform | -| ---------------------- | -------- | -------- | -| DocumentSelectionState | No | iOS | - -## Methods - -### `isFocused()` - -```jsx -isFocused(): -``` - ---- - -### `clear()` - -```jsx -clear(); -``` diff --git a/website/versioned_docs/version-0.17/toolbarandroid.md b/website/versioned_docs/version-0.17/toolbarandroid.md deleted file mode 100644 index 5b6134c0e6d..00000000000 --- a/website/versioned_docs/version-0.17/toolbarandroid.md +++ /dev/null @@ -1,184 +0,0 @@ ---- -id: version-0.17-toolbarandroid -title: ToolbarAndroid -original_id: toolbarandroid ---- - -React component that wraps the Android-only [`Toolbar` widget][0]. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right. - -If the toolbar has an only child, it will be displayed between the title and actions. - -Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where `require('./some_icon.png')` translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using `require('./some_icon.png')` will do this automatically for you, so as long as you don't explicitly use e.g. `{uri: 'http://...'}`, you will be good. - -Example: - -``` -render: function() { - return ( - - ) -}, -onActionSelected: function(position) { - if (position === 0) { // index of 'Settings' - showSettings(); - } -} -``` - -[0]: https://developer.android.com/reference/android/support/v7/widget/Toolbar.html - -### Props - -- [View props...](view.md#props) - -* [`rtl`](toolbarandroid.md#rtl) -* [`actions`](toolbarandroid.md#actions) -* [`navIcon`](toolbarandroid.md#navicon) -* [`onActionSelected`](toolbarandroid.md#onactionselected) -* [`onIconClicked`](toolbarandroid.md#oniconclicked) -* [`overflowIcon`](toolbarandroid.md#overflowicon) -* [`logo`](toolbarandroid.md#logo) -* [`subtitle`](toolbarandroid.md#subtitle) -* [`subtitleColor`](toolbarandroid.md#subtitlecolor) -* [`testID`](toolbarandroid.md#testid) -* [`title`](toolbarandroid.md#title) -* [`titleColor`](toolbarandroid.md#titlecolor) - ---- - -# Reference - -## Props - -### `rtl` - -Used to set the toolbar direction to RTL. In addition to this property you need to add - -android:supportsRtl="true" - -to your application AndroidManifest.xml and then call `setLayoutDirection(LayoutDirection.RTL)` in your MainActivity `onCreate` method. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `actions` - -Sets possible actions on the toolbar as part of the action menu. These are displayed as icons or text on the right side of the widget. If they don't fit they are placed in an 'overflow' menu. - -This property takes an array of objects, where each object has the following keys: - -- `title`: **required**, the title of this action -- `icon`: the icon for this action, e.g. `require('image!some_icon')` -- `show`: when to show this action as an icon or hide it in the overflow menu: `always`, `ifRoom` or `never` -- `showWithText`: boolean, whether to show text alongside the icon or not - -| Type | Required | -| --------------------------------------------------------------------------------------------------------------------- | -------- | -| array of object: {title: string,icon: optionalImageSource,show: enum('always', 'ifRoom', 'never'),showWithText: bool} | No | - ---- - -### `navIcon` - -Sets the navigation icon. - -| Type | Required | -| ------------------- | -------- | -| optionalImageSource | No | - ---- - -### `onActionSelected` - -Callback that is called when an action is selected. The only argument that is passeed to the callback is the position of the action in the actions array. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onIconClicked` - -Callback called when the icon is selected. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `overflowIcon` - -Sets the overflow icon. - -| Type | Required | -| ------------------- | -------- | -| optionalImageSource | No | - ---- - -### `logo` - -Sets the toolbar logo. - -| Type | Required | -| ------------------- | -------- | -| optionalImageSource | No | - ---- - -### `subtitle` - -Sets the toolbar subtitle. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `subtitleColor` - -Sets the toolbar subtitle color. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `title` - -Sets the toolbar title. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `titleColor` - -Sets the toolbar title color. - -| Type | Required | -| ------ | -------- | -| string | No | diff --git a/website/versioned_docs/version-0.17/view-style-props.md b/website/versioned_docs/version-0.17/view-style-props.md deleted file mode 100644 index fd4418a3d0b..00000000000 --- a/website/versioned_docs/version-0.17/view-style-props.md +++ /dev/null @@ -1,239 +0,0 @@ ---- -id: version-0.17-view-style-props -title: View Style Props -original_id: view-style-props ---- - -### Props - -- [`borderStyle`](view-style-props.md#borderstyle) -- [`backfaceVisibility`](view-style-props.md#backfacevisibility) -- [`borderBottomColor`](view-style-props.md#borderbottomcolor) -- [`borderBottomLeftRadius`](view-style-props.md#borderbottomleftradius) -- [`borderBottomRightRadius`](view-style-props.md#borderbottomrightradius) -- [`borderBottomWidth`](view-style-props.md#borderbottomwidth) -- [`borderColor`](view-style-props.md#bordercolor) -- [`borderLeftColor`](view-style-props.md#borderleftcolor) -- [`borderLeftWidth`](view-style-props.md#borderleftwidth) -- [`borderRadius`](view-style-props.md#borderradius) -- [`borderRightColor`](view-style-props.md#borderrightcolor) -- [`borderRightWidth`](view-style-props.md#borderrightwidth) -- [`backgroundColor`](view-style-props.md#backgroundcolor) -- [`borderTopColor`](view-style-props.md#bordertopcolor) -- [`borderTopLeftRadius`](view-style-props.md#bordertopleftradius) -- [`borderTopRightRadius`](view-style-props.md#bordertoprightradius) -- [`borderTopWidth`](view-style-props.md#bordertopwidth) -- [`borderWidth`](view-style-props.md#borderwidth) -- [`opacity`](view-style-props.md#opacity) -- [`overflow`](view-style-props.md#overflow) -- [`shadowColor`](view-style-props.md#shadowcolor) -- [`shadowOffset`](view-style-props.md#shadowoffset) -- [`shadowOpacity`](view-style-props.md#shadowopacity) -- [`shadowRadius`](view-style-props.md#shadowradius) -- [`elevation`](view-style-props.md#elevation) - ---- - -# Reference - -## Props - -### `borderStyle` - -| Type | Required | -| --------------------------------- | -------- | -| enum('solid', 'dotted', 'dashed') | No | - ---- - -### `backfaceVisibility` - -| Type | Required | -| ------------------------- | -------- | -| enum('visible', 'hidden') | No | - ---- - -### `borderBottomColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `borderBottomLeftRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderBottomRightRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderBottomWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `borderLeftColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `borderLeftWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderRightColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `borderRightWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `backgroundColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `borderTopColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `borderTopLeftRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderTopRightRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderTopWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `opacity` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `overflow` - -| Type | Required | -| ------------------------- | -------- | -| enum('visible', 'hidden') | No | - ---- - -### `shadowColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `shadowOffset` - -| Type | Required | -| -------------------------------------- | -------- | -| object: {width: number,height: number} | No | - ---- - -### `shadowOpacity` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `shadowRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `elevation` - -(Android-only) Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | Android | diff --git a/website/versioned_docs/version-0.17/webview.md b/website/versioned_docs/version-0.17/webview.md deleted file mode 100644 index b0669c610e5..00000000000 --- a/website/versioned_docs/version-0.17/webview.md +++ /dev/null @@ -1,251 +0,0 @@ ---- -id: version-0.17-webview -title: WebView -original_id: webview ---- - -Renders a native WebView. - -### Props - -- [View props...](view.md#props) - -* [`style`](webview.md#style) -* [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) -* [`html`](webview.md#html) -* [`injectedJavaScript`](webview.md#injectedjavascript) -* [`onNavigationStateChange`](webview.md#onnavigationstatechange) -* [`renderError`](webview.md#rendererror) -* [`renderLoading`](webview.md#renderloading) -* [`startInLoadingState`](webview.md#startinloadingstate) -* [`contentInset`](webview.md#contentinset) -* [`url`](webview.md#url) -* [`javaScriptEnabledAndroid`](webview.md#javascriptenabledandroid) -* [`allowsInlineMediaPlayback`](webview.md#allowsinlinemediaplayback) -* [`bounces`](webview.md#bounces) -* [`onShouldStartLoadWithRequest`](webview.md#onshouldstartloadwithrequest) -* [`scalesPageToFit`](webview.md#scalespagetofit) -* [`scrollEnabled`](webview.md#scrollenabled) - -### Methods - -- [`goForward`](webview.md#goforward) -- [`goBack`](webview.md#goback) -- [`reload`](webview.md#reload) -- [`updateNavigationState`](webview.md#updatenavigationstate) -- [`getWebViewHandle`](webview.md#getwebviewhandle) -- [`onLoadingStart`](webview.md#onloadingstart) -- [`onLoadingError`](webview.md#onloadingerror) -- [`onLoadingFinish`](webview.md#onloadingfinish) - ---- - -# Reference - -## Props - -### `style` - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `automaticallyAdjustContentInsets` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `html` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `injectedJavaScript` - -Sets the JS to be injected when the webpage loads. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `onNavigationStateChange` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `renderError` - -Function that returns a view to show if there's an error. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `renderLoading` - -Function that returns a loading indicator. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `startInLoadingState` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `contentInset` - -| Type | Required | -| ------------------------------------------------------------------ | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | - ---- - -### `url` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `javaScriptEnabledAndroid` - -Used on Android only, JS is enabled by default for WebView on iOS - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `allowsInlineMediaPlayback` - -Determines whether HTML5 videos play inline or use the native full-screen controller. default value `false` **NOTE** : "In order for video to play inline, not only does this property need to be set to true, but the video element in the HTML document must also include the webkit-playsinline attribute." - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bounces` - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `onShouldStartLoadWithRequest` - -Allows custom handling of any webview requests by a JS handler. Return true or false from this method to continue loading the request. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `scalesPageToFit` - -Sets whether the webpage scales to fit the view and the user can change the scale. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEnabled` - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - -## Methods - -### `goForward()` - -```jsx -goForward(); -``` - ---- - -### `goBack()` - -```jsx -goBack(); -``` - ---- - -### `reload()` - -```jsx -reload(); -``` - ---- - -### `updateNavigationState()` - -```jsx -updateNavigationState((event: Event)); -``` - -We return an event with a bunch of fields including: url, title, loading, canGoBack, canGoForward - ---- - -### `getWebViewHandle()` - -```jsx -getWebViewHandle(): -``` - ---- - -### `onLoadingStart()` - -```jsx -onLoadingStart((event: Event)); -``` - ---- - -### `onLoadingError()` - -```jsx -onLoadingError((event: Event)); -``` - ---- - -### `onLoadingFinish()` - -```jsx -onLoadingFinish((event: Event)); -``` diff --git a/website/versioned_docs/version-0.18/animated.md b/website/versioned_docs/version-0.18/animated.md deleted file mode 100644 index 5cf546c2a89..00000000000 --- a/website/versioned_docs/version-0.18/animated.md +++ /dev/null @@ -1,470 +0,0 @@ ---- -id: version-0.18-animated -title: Animated -original_id: animated ---- - -Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and possible to build and maintain. - -The general workflow is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates either via animations, such as `Animated.timing`, or by hooking into gestures like panning or scrolling via `Animated.event`. `Animated.Value` can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted: - -```jsx -class FadeInView extends React.Component { - constructor(props) { - super(props); - this.state = { - fadeAnim: new Animated.Value(0) // init opacity 0 - }; - } - componentDidMount() { - Animated.timing( - // Uses easing functions - this.state.fadeAnim, // The value to drive - { toValue: 1 } // Configuration - ).start(); // Don't forget start! - } - render() { - return ( - - {' '} - // Binds - {this.props.children} - - ); - } -} -``` - -Note that only animatable components can be animated. `View`, `Text`, and `Image` are already provided, and you can create custom ones with `createAnimatedComponent`. These particular components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default. - -Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation. - -A single `Animated.Value` can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value. - -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` in the example above like so: - -```jsx - style={{ - opacity: this.state.fadeAnim, // Binds directly - transform: [{ - translateY: this.state.fadeAnim.interpolate({ - inputRange: [0, 1], - outputRange: [150, 0] // 0 : 150, 0.5 : 75, 1 : 0 - }), - }], - }}> -``` - -Animations can also be combined in complex ways using composition functions such as `sequence` and `parallel`, and can also be chained together by setting the `toValue` of one animation to be another `Animated.Value`. - -`Animated.ValueXY` is handy for 2D animations, like panning, and there are other helpful additions like `setOffset` and `getLayout` to aid with typical interaction patterns, like drag-and-drop. - -You can see more example usage in `AnimationExample.js`, the Gratuitous Animation App, and [Animations documentation guide](animations.md). - -Note that `Animated` is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout `Animated.Value.addListener` as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future. - -### Methods - -- [`decay`](animated.md#decay) -- [`timing`](animated.md#timing) -- [`spring`](animated.md#spring) -- [`add`](animated.md#add) -- [`multiply`](animated.md#multiply) -- [`delay`](animated.md#delay) -- [`sequence`](animated.md#sequence) -- [`parallel`](animated.md#parallel) -- [`stagger`](animated.md#stagger) -- [`event`](animated.md#event) -- [`createAnimatedComponent`](animated.md#createanimatedcomponent) - -### Properties - -- [`Value`](animated.md#value) -- [`ValueXY`](animated.md#valuexy) - -### Classes - -- [`AnimatedValue`](animated.md#animatedvalue) -- [`AnimatedValueXY`](animated.md#animatedvaluexy) -- [`AnimatedProps`](animated.md#animatedprops) - ---- - -# Reference - -## Methods - -### `decay()` - -```jsx -static decay(value, config) -``` - -Animates a value from an initial velocity to zero based on a decay coefficient. - ---- - -### `timing()` - -```jsx -static timing(value, config) -``` - -Animates a value along a timed easing curve. The `Easing` module has tons of pre-defined curves, or you can use your own function. - ---- - -### `spring()` - -```jsx -static spring(value, config) -``` - -Spring animation based on Rebound and Origami. Tracks velocity state to create fluid motions as the `toValue` updates, and can be chained together. - ---- - -### `add()` - -```jsx -static add(a, b) -``` - -Creates a new Animated value composed from two Animated values added together. - ---- - -### `multiply()` - -```jsx -static multiply(a, b) -``` - -Creates a new Animated value composed from two Animated values multiplied together. - ---- - -### `delay()` - -```jsx -static delay(time) -``` - -Starts an animation after the given delay. - ---- - -### `sequence()` - -```jsx -static sequence(animations) -``` - -Starts an array of animations in order, waiting for each to complete before starting the next. If the current running animation is stopped, no following animations will be started. - ---- - -### `parallel()` - -```jsx -static parallel(animations, config?) -``` - -Starts an array of animations all at the same time. By default, if one of the animations is stopped, they will all be stopped. You can override this with the `stopTogether` flag. - ---- - -### `stagger()` - -```jsx -static stagger(time, animations) -``` - -Array of animations may run in parallel (overlap), but are started in sequence with successive delays. Nice for doing trailing effects. - ---- - -### `event()` - -```jsx -static event(argMapping, config?) -``` - -Takes an array of mappings and extracts values from each arg accordingly, then calls `setValue` on the mapped outputs. e.g. - -```jsx - onScroll={Animated.event( - [{nativeEvent: {contentOffset: {x: this._scrollX}}}] - {listener}, // Optional async listener - ) - ... - onPanResponderMove: Animated.event([ - null, // raw event arg ignored - {dx: this._panX}, // gestureState arg - ]), -``` - ---- - -### `createAnimatedComponent()` - -```jsx -static createAnimatedComponent(Component) -``` - -Make any React component Animatable. Used to create `Animated.View`, etc. - -## Properties - ---- - -## Classes - -## class AnimatedValue - -Standard value for driving animations. One `Animated.Value` can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling `setValue`) will stop any previous ones. - -### Methods - -### `constructor()` - -```jsx -constructor(value); -``` - ---- - -### `setValue()` - -```jsx -setValue(value); -``` - -Directly set the value. This will stop any animations running on the value and update all the bound properties. - ---- - -### `setOffset()` - -```jsx -setOffset(offset); -``` - -Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture. - ---- - -### `flattenOffset()` - -```jsx -flattenOffset(); -``` - -Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged. - ---- - -### `addListener()` - -```jsx -addListener(callback); -``` - -Adds an asynchronous listener to the value so you can observe updates from animations or whathaveyou. This is useful because there is no way to synchronously read the value because it might be driven natively. - ---- - -### `removeListener()` - -```jsx -removeListener(id); -``` - ---- - -### `removeAllListeners()` - -```jsx -removeAllListeners(); -``` - ---- - -### `stopAnimation()` - -```jsx -stopAnimation(callback?) -``` - -Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout. - ---- - -### `interpolate()` - -```jsx -interpolate(config); -``` - -Interpolates the value before updating the property, e.g. mapping 0-1 to 0-10. - ---- - -### `animate()` - -```jsx -animate(animation, callback); -``` - -Typically only used internally, but could be used by a custom Animation class. - ---- - -### `stopTracking()` - -```jsx -stopTracking(); -``` - -Typically only used internally. - ---- - -### `track()` - -```jsx -track(tracking); -``` - -Typically only used internally. - ---- - -## class AnimatedValueXY - -2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal `Animated.Value`, but multiplexed. Contains two regular `Animated.Value`s under the hood. Example: - -```jsx -class DraggableView extends React.Component { - constructor(props) { - super(props); - this.state = { - pan: new Animated.ValueXY() // inits to zero - }; - this.state.panResponder = PanResponder.create({ - onStartShouldSetPanResponder: () => true, - onPanResponderMove: Animated.event([ - null, - { - dx: this.state.pan.x, // x,y are Animated.Value - dy: this.state.pan.y - } - ]), - onPanResponderRelease: () => { - Animated.spring( - this.state.pan, // Auto-multiplexed - { toValue: { x: 0, y: 0 } } // Back to zero - ).start(); - } - }); - } - render() { - return ( - - {this.props.children} - - ); - } -} -``` - -### Methods - -### `constructor()` - -```jsx -constructor(valueIn?) -``` - ---- - -### `setValue()` - -```jsx -setValue(value); -``` - ---- - -### `setOffset()` - -```jsx -setOffset(offset); -``` - ---- - -### `flattenOffset()` - -```jsx -flattenOffset(); -``` - ---- - -### `stopAnimation()` - -```jsx -stopAnimation(callback?) -``` - ---- - -### `addListener()` - -```jsx -addListener(callback); -``` - ---- - -### `removeListener()` - -```jsx -removeListener(id); -``` - ---- - -### `getLayout()` - -```jsx -getLayout(); -``` - -Converts `{x, y}` into `{left, top}` for use in style, e.g. - -```jsx - style={this.state.anim.getLayout()} -``` - ---- - -### `getTranslateTransform()` - -```jsx -getTranslateTransform(); -``` - -Converts `{x, y}` into a useable translation transform, e.g. - -```jsx - style={{ - transform: this.state.anim.getTranslateTransform() - }} -``` diff --git a/website/versioned_docs/version-0.18/cameraroll.md b/website/versioned_docs/version-0.18/cameraroll.md deleted file mode 100644 index ffbfbbe8c2d..00000000000 --- a/website/versioned_docs/version-0.18/cameraroll.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: version-0.18-cameraroll -title: CameraRoll -original_id: cameraroll ---- - -`CameraRoll` provides access to the local camera roll / gallery. - -### Methods - -- [`saveImageWithTag`](cameraroll.md#saveimagewithtag) -- [`getPhotos`](cameraroll.md#getphotos) - ---- - -# Reference - -## Methods - -### `saveImageWithTag()` - -```jsx -static saveImageWithTag(tag, successCallback, errorCallback) -``` - -Saves the image to the camera roll / gallery. - -The CameraRoll API is not yet implemented for Android. - -@param {string} tag On Android, this is a local URI, such as `"file:///sdcard/img.png"`. - -On iOS, the tag can be one of the following: - -- local URI -- assets-library tag -- a tag not matching any of the above, which means the image data will be stored in memory (and consume memory as long as the process is alive) - -@param successCallback Invoked with the value of `tag` on success. @param errorCallback Invoked with error message on error. - ---- - -### `getPhotos()` - -```jsx -static getPhotos(params, callback, errorCallback) -``` - -Invokes `callback` with photo identifier objects from the local camera roll of the device matching shape defined by `getPhotosReturnChecker`. - -@param {object} params See `getPhotosParamChecker`. @param {function} callback Invoked with arg of shape defined by `getPhotosReturnChecker` on success. @param {function} errorCallback Invoked with error message on error. diff --git a/website/versioned_docs/version-0.18/dimensions.md b/website/versioned_docs/version-0.18/dimensions.md deleted file mode 100644 index 1f81f50bef0..00000000000 --- a/website/versioned_docs/version-0.18/dimensions.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: version-0.18-dimensions -title: Dimensions -original_id: dimensions ---- - -### Methods - -- [`set`](dimensions.md#set) -- [`get`](dimensions.md#get) - ---- - -# Reference - -## Methods - -### `set()` - -```jsx -static set(dims) -``` - -This should only be called from native code. - -@param {object} dims string-keyed object of dimensions to set - ---- - -### `get()` - -```jsx -static get(dim) -``` - -Initial dimensions are set before `runApplication` is called so they should be available before any other require's are run, but may be updated later. - -Note: Although dimensions are available immediately, they may change (e.g due to device rotation) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a `StyleSheet`). - -Example: `var {height, width} = Dimensions.get('window');` - -@param {string} dim Name of dimension as defined when calling `set`. @returns {Object?} Value for the dimension. diff --git a/website/versioned_docs/version-0.18/drawerlayoutandroid.md b/website/versioned_docs/version-0.18/drawerlayoutandroid.md deleted file mode 100644 index 1c5420eeced..00000000000 --- a/website/versioned_docs/version-0.18/drawerlayoutandroid.md +++ /dev/null @@ -1,155 +0,0 @@ ---- -id: version-0.18-drawerlayoutandroid -title: DrawerLayoutAndroid -original_id: drawerlayoutandroid ---- - -React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop. - -Example: - -``` -render: function() { - var navigationView = ( - - I'm in the Drawer! - - ); - return ( - navigationView}> - - Hello - World! - - - ); -}, -``` - -### Props - -- [View props...](view.md#props) - -* [`renderNavigationView`](drawerlayoutandroid.md#rendernavigationview) -* [`drawerPosition`](drawerlayoutandroid.md#drawerposition) -* [`drawerWidth`](drawerlayoutandroid.md#drawerwidth) -* [`keyboardDismissMode`](drawerlayoutandroid.md#keyboarddismissmode) -* [`onDrawerClose`](drawerlayoutandroid.md#ondrawerclose) -* [`onDrawerOpen`](drawerlayoutandroid.md#ondraweropen) -* [`onDrawerSlide`](drawerlayoutandroid.md#ondrawerslide) -* [`onDrawerStateChanged`](drawerlayoutandroid.md#ondrawerstatechanged) - -### Methods - -- [`openDrawer`](drawerlayoutandroid.md#opendrawer) -- [`closeDrawer`](drawerlayoutandroid.md#closedrawer) - ---- - -# Reference - -## Props - -### `renderNavigationView` - -The navigation view that will be rendered to the side of the screen and can be pulled in. - -| Type | Required | -| -------- | -------- | -| function | Yes | - ---- - -### `drawerPosition` - -Specifies the side of the screen from which the drawer will slide in. - -| Type | Required | -| ------------------------------------------------------------------------- | -------- | -| enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) | No | - ---- - -### `drawerWidth` - -Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. - -| Type | Required | -| ----------------------- | -------- | -| enum('none', 'on-drag') | No | - ---- - -### `onDrawerClose` - -Function called whenever the navigation view has been closed. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerOpen` - -Function called whenever the navigation view has been opened. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerSlide` - -Function called whenever there is an interaction with the navigation view. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerStateChanged` - -Function called when the drawer state has changed. The drawer can be in 3 states: - -- idle, meaning there is no interaction with the navigation view happening at the time -- dragging, meaning there is currently an interaction with the navigation view -- settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation - -| Type | Required | -| -------- | -------- | -| function | No | - -## Methods - -### `openDrawer()` - -```jsx -openDrawer(); -``` - ---- - -### `closeDrawer()` - -```jsx -closeDrawer(); -``` diff --git a/website/versioned_docs/version-0.18/geolocation.md b/website/versioned_docs/version-0.18/geolocation.md deleted file mode 100644 index b3f739b8eb1..00000000000 --- a/website/versioned_docs/version-0.18/geolocation.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: version-0.18-geolocation -title: Geolocation -original_id: geolocation ---- - -The Geolocation API follows the web spec: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation - -### iOS - -You need to include the `NSLocationWhenInUseUsageDescription` key in Info.plist to enable geolocation. Geolocation is enabled by default when you create a project with `react-native init`. - -### Android - -To request access to location, you need to add the following line to your app's `AndroidManifest.xml`: - -`` - -### Methods - -- [`getCurrentPosition`](geolocation.md#getcurrentposition) -- [`watchPosition`](geolocation.md#watchposition) -- [`clearWatch`](geolocation.md#clearwatch) -- [`stopObserving`](geolocation.md#stopobserving) - ---- - -# Reference - -## Methods - -### `getCurrentPosition()` - -```jsx -static getCurrentPosition(geo_success, geo_error?, geo_options?) -``` - -Invokes the success callback once with the latest location info. Supported options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool) - ---- - -### `watchPosition()` - -```jsx -static watchPosition(success, error?, options?) -``` - -Invokes the success callback whenever the location changes. Supported options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool) - ---- - -### `clearWatch()` - -```jsx -static clearWatch(watchID) -``` - ---- - -### `stopObserving()` - -```jsx -static stopObserving() -``` - -Stops observing for device location changes. In addition, it removes all listeners previously registered. - -Notice that this method has only effect if the `geolocation.watchPosition(successCallback, errorCallback)` method was previously invoked. diff --git a/website/versioned_docs/version-0.18/image-style-props.md b/website/versioned_docs/version-0.18/image-style-props.md deleted file mode 100644 index e90049074c3..00000000000 --- a/website/versioned_docs/version-0.18/image-style-props.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: version-0.18-image-style-props -title: Image Style Props -original_id: image-style-props ---- - -### Props - -- [`backfaceVisibility`](image-style-props.md#backfacevisibility) -- [`backgroundColor`](image-style-props.md#backgroundcolor) -- [`borderColor`](image-style-props.md#bordercolor) -- [`borderRadius`](image-style-props.md#borderradius) -- [`borderWidth`](image-style-props.md#borderwidth) -- [`opacity`](image-style-props.md#opacity) -- [`overflow`](image-style-props.md#overflow) -- [`resizeMode`](image-style-props.md#resizemode) -- [`tintColor`](image-style-props.md#tintcolor) - ---- - -# Reference - -## Props - -### `backfaceVisibility` - -| Type | Required | -| ------------------------- | -------- | -| enum('visible', 'hidden') | No | - ---- - -### `backgroundColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `opacity` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `overflow` - -| Type | Required | -| ------------------------- | -------- | -| enum('visible', 'hidden') | No | - ---- - -### `resizeMode` - -| Type | Required | -| ---------------------------- | -------- | -| Object.keys(ImageResizeMode) | No | - ---- - -### `tintColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | diff --git a/website/versioned_docs/version-0.18/image.md b/website/versioned_docs/version-0.18/image.md deleted file mode 100644 index cedb1df3862..00000000000 --- a/website/versioned_docs/version-0.18/image.md +++ /dev/null @@ -1,213 +0,0 @@ ---- -id: version-0.18-image -title: Image -original_id: image ---- - -A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. - -Example usage: - -``` -renderImages: function() { - return ( - - - - - ); -}, -``` - -### Props - -- [`testID`](image.md#testid) -- [`onLayout`](image.md#onlayout) -- [`onLoadEnd`](image.md#onloadend) -- [`onLoadStart`](image.md#onloadstart) -- [`resizeMode`](image.md#resizemode) -- [`source`](image.md#source) -- [`style`](image.md#style) -- [`onLoad`](image.md#onload) -- [`accessibilityLabel`](image.md#accessibilitylabel) -- [`accessible`](image.md#accessible) -- [`capInsets`](image.md#capinsets) -- [`defaultSource`](image.md#defaultsource) -- [`onError`](image.md#onerror) -- [`onProgress`](image.md#onprogress) - ---- - -# Reference - -## Props - -### `testID` - -A unique identifier for this element to be used in UI Automation testing scripts. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{nativeEvent: {layout: {x, y, width, height}}}`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadEnd` - -Invoked when load either succeeds or fails - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadStart` - -Invoked on load start - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `resizeMode` - -Determines how to resize the image when the frame doesn't match the raw image dimensions. - -'cover': Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding). - -'contain': Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). - -'stretch': Scale width and height independently, This may change the aspect ratio of the src. - -| Type | Required | -| ----------------------------------- | -------- | -| enum('cover', 'contain', 'stretch') | No | - ---- - -### `source` - -`uri` is a string representing the resource identifier for the image, which could be an http address, a local file path, or the name of a static image resource (which should be wrapped in the `require('./path/to/image.png')` function). - -| Type | Required | -| ------------------------------ | -------- | -| object: {uri: string}, ,number | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`backfaceVisibility`**: enum('visible', 'hidden') - -- **`backgroundColor`**: [color](colors.md) - -- **`borderColor`**: [color](colors.md) - -- **`borderRadius`**: number - -- **`borderWidth`**: number - -- **`opacity`**: number - -- **`overflow`**: enum('visible', 'hidden') - -- **`resizeMode`**: Object.keys(ImageResizeMode) - -- **`tintColor`**: [color](colors.md) - ---- - -### `onLoad` - -Invoked when load completes successfully - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `accessibilityLabel` - -The text that's read by the screen reader when the user interacts with the image. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | iOS | - ---- - -### `accessible` - -When true, indicates the image is an accessibility element. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `capInsets` - -When the image is resized, the corners of the size specified by capInsets will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info on [Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets) - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `defaultSource` - -A static image to display while loading the image source. - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| object: {uri: string}, ,number | No | iOS | - ---- - -### `onError` - -Invoked on load error with `{nativeEvent: {error}}` - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `onProgress` - -Invoked on download progress with `{nativeEvent: {loaded, total}}` - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | diff --git a/website/versioned_docs/version-0.18/imageeditor.md b/website/versioned_docs/version-0.18/imageeditor.md deleted file mode 100644 index b890b362ba7..00000000000 --- a/website/versioned_docs/version-0.18/imageeditor.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -id: version-0.18-imageeditor -title: ImageEditor -original_id: imageeditor ---- - -### Methods - -- [`cropImage`](imageeditor.md#cropimage) - ---- - -# Reference - -## Methods - -### `cropImage()` - -```jsx -static cropImage(uri, cropData, success, failure) -``` - -Crop the image specified by the URI param. If URI points to a remote image, it will be downloaded automatically. If the image cannot be loaded/downloaded, the failure callback will be called. - -If the cropping process is successful, the resultant cropped image will be stored in the ImageStore, and the URI returned in the success callback will point to the image in the store. Remember to delete the cropped image from the ImageStore when you are done with it. diff --git a/website/versioned_docs/version-0.18/imagestore.md b/website/versioned_docs/version-0.18/imagestore.md deleted file mode 100644 index 2c6d2a300f6..00000000000 --- a/website/versioned_docs/version-0.18/imagestore.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: version-0.18-imagestore -title: ImageStore -original_id: imagestore ---- - -### Methods - -- [`hasImageForTag`](imagestore.md#hasimagefortag) -- [`removeImageForTag`](imagestore.md#removeimagefortag) -- [`addImageFromBase64`](imagestore.md#addimagefrombase64) -- [`getBase64ForTag`](imagestore.md#getbase64fortag) - ---- - -# Reference - -## Methods - -### `hasImageForTag()` - -```jsx -static hasImageForTag(uri, callback) -``` - -Check if the ImageStore contains image data for the specified URI. @platform ios - ---- - -### `removeImageForTag()` - -```jsx -static removeImageForTag(uri) -``` - -Delete an image from the ImageStore. Images are stored in memory and must be manually removed when you are finished with them, otherwise they will continue to use up RAM until the app is terminated. It is safe to call `removeImageForTag()` without first calling `hasImageForTag()`, it will silently fail. @platform ios - ---- - -### `addImageFromBase64()` - -```jsx -static addImageFromBase64(base64ImageData, success, failure) -``` - -Stores a base64-encoded image in the ImageStore, and returns a URI that can be used to access or display the image later. Images are stored in memory only, and must be manually deleted when you are finished with them by calling `removeImageForTag()`. - -Note that it is very inefficient to transfer large quantities of binary data between JS and native code, so you should avoid calling this more than necessary. - ---- - -### `getBase64ForTag()` - -```jsx -static getBase64ForTag(uri, success, failure) -``` - -Retrieves the base64-encoded data for an image in the ImageStore. If the specified URI does not match an image in the store, the failure callback will be called. - -Note that it is very inefficient to transfer large quantities of binary data between JS and native code, so you should avoid calling this more than necessary. To display an image in the ImageStore, you can pass the URI to an `` component; there is no need to retrieve the base64 data. diff --git a/website/versioned_docs/version-0.18/interactionmanager.md b/website/versioned_docs/version-0.18/interactionmanager.md deleted file mode 100644 index f10fe78ca81..00000000000 --- a/website/versioned_docs/version-0.18/interactionmanager.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: version-0.18-interactionmanager -title: InteractionManager -original_id: interactionmanager ---- - -InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly. - -Applications can schedule tasks to run after interactions with the following: - -``` -InteractionManager.runAfterInteractions(() => { - // ...long-running synchronous task... -}); -``` - -Compare this to other scheduling alternatives: - -- requestAnimationFrame(): for code that animates a view over time. -- setImmediate/setTimeout(): run code later, note this may delay animations. -- runAfterInteractions(): run code later, without delaying active animations. - -The touch handling system considers one or more active touches to be an 'interaction' and will delay `runAfterInteractions()` callbacks until all touches have ended or been cancelled. - -InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion: - -``` -var handle = InteractionManager.createInteractionHandle(); -// run animation... (`runAfterInteractions` tasks are queued) -// later, on animation completion: -InteractionManager.clearInteractionHandle(handle); -// queued tasks run if all handles were cleared -``` - -`runAfterInteractions` takes either a plain callback function, or a `PromiseTask` object with a `gen` method that returns a `Promise`. If a `PromiseTask` is supplied, then it is fully resolved (including asynchronous dependencies that also schedule more tasks via `runAfterInteractions`) before starting on the next task that might have been queued up synchronously earlier. - -By default, queued tasks are executed together in a loop in one `setImmediate` batch. If `setDeadline` is called with a positive number, then tasks will only be executed until the deadline (in terms of js event loop run time) approaches, at which point execution will yield via setTimeout, allowing events such as touches to start interactions and block queued tasks from executing, making apps more responsive. - -### Methods - -- [`runAfterInteractions`](interactionmanager.md#runafterinteractions) -- [`createInteractionHandle`](interactionmanager.md#createinteractionhandle) -- [`clearInteractionHandle`](interactionmanager.md#clearinteractionhandle) -- [`setDeadline`](interactionmanager.md#setdeadline) - -### Properties - -- [`Events`](interactionmanager.md#events) -- [`addListener`](interactionmanager.md#addlistener) - ---- - -# Reference - -## Methods - -### `runAfterInteractions()` - -```jsx -static runAfterInteractions(task) -``` - -Schedule a function to run after all interactions have completed. - ---- - -### `createInteractionHandle()` - -```jsx -static createInteractionHandle() -``` - -Notify manager that an interaction has started. - ---- - -### `clearInteractionHandle()` - -```jsx -static clearInteractionHandle(handle) -``` - -Notify manager that an interaction has completed. - ---- - -### `setDeadline()` - -```jsx -static setDeadline(deadline) -``` - -A positive number will use setTimeout to schedule any tasks after the eventLoopRunningTime hits the deadline value, otherwise all tasks will be executed in one setImmediate batch (default). - -## Properties - ---- diff --git a/website/versioned_docs/version-0.18/navigatorios.md b/website/versioned_docs/version-0.18/navigatorios.md deleted file mode 100644 index 552a07a182a..00000000000 --- a/website/versioned_docs/version-0.18/navigatorios.md +++ /dev/null @@ -1,293 +0,0 @@ ---- -id: version-0.18-navigatorios -title: NavigatorIOS -original_id: navigatorios ---- - -NavigatorIOS wraps UIKit navigation and allows you to add back-swipe functionality across your app. - -> **NOTE**: This Component is not maintained by Facebook -> -> This component is under community responsibility. If a pure JavaScript solution fits your needs you may try the `Navigator` component instead. - -#### Routes - -A route is an object used to describe each page in the navigator. The first route is provided to NavigatorIOS as `initialRoute`: - -``` -render: function() { - return ( - - ); -}, -``` - -Now MyView will be rendered by the navigator. It will receive the route object in the `route` prop, a navigator, and all of the props specified in `passProps`. - -See the initialRoute propType for a complete definition of a route. - -#### Navigator - -A `navigator` is an object of navigation functions that a view can call. It is passed as a prop to any component rendered by NavigatorIOS. - -``` -var MyView = React.createClass({ - _handleBackButtonPress: function() { - this.props.navigator.pop(); - }, - _handleNextButtonPress: function() { - this.props.navigator.push(nextRoute); - }, - ... -}); -``` - -A navigation object contains the following functions: - -- `push(route)` - Navigate forward to a new route -- `pop()` - Go back one page -- `popN(n)` - Go back N pages at once. When N=1, behavior matches `pop()` -- `replace(route)` - Replace the route for the current page and immediately load the view for the new route -- `replacePrevious(route)` - Replace the route/view for the previous page -- `replacePreviousAndPop(route)` - Replaces the previous route/view and transitions back to it -- `resetTo(route)` - Replaces the top item and popToTop -- `popToRoute(route)` - Go back to the item for a particular route object -- `popToTop()` - Go back to the top item - -Navigator functions are also available on the NavigatorIOS component: - -``` -var MyView = React.createClass({ - _handleNavigationRequest: function() { - this.refs.nav.push(otherRoute); - }, - render: () => ( - - ), -}); -``` - -Props passed to the NavigatorIOS component will set the default configuration for the navigation bar. Props passed as properties to a route object will set the configuration for that route's navigation bar, overriding any props passed to the NavigatorIOS component. - -### Props - -- [`initialRoute`](navigatorios.md#initialroute) -- [`barTintColor`](navigatorios.md#bartintcolor) -- [`itemWrapperStyle`](navigatorios.md#itemwrapperstyle) -- [`navigationBarHidden`](navigatorios.md#navigationbarhidden) -- [`shadowHidden`](navigatorios.md#shadowhidden) -- [`tintColor`](navigatorios.md#tintcolor) -- [`titleTextColor`](navigatorios.md#titletextcolor) -- [`translucent`](navigatorios.md#translucent) - -### Methods - -- [`push`](navigatorios.md#push) -- [`popN`](navigatorios.md#popn) -- [`pop`](navigatorios.md#pop) -- [`replaceAtIndex`](navigatorios.md#replaceatindex) -- [`replace`](navigatorios.md#replace) -- [`replacePrevious`](navigatorios.md#replaceprevious) -- [`popToTop`](navigatorios.md#poptotop) -- [`popToRoute`](navigatorios.md#poptoroute) -- [`replacePreviousAndPop`](navigatorios.md#replacepreviousandpop) -- [`resetTo`](navigatorios.md#resetto) -- [`handleNavigationComplete`](navigatorios.md#handlenavigationcomplete) -- [`renderNavigationStackItems`](navigatorios.md#rendernavigationstackitems) - ---- - -# Reference - -## Props - -### `initialRoute` - -NavigatorIOS uses "route" objects to identify child views, their props, and navigation bar configuration. "push" and all the other navigation operations expect routes to be like this: - -| Type | Required | -| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| object: {component: function,title: string,passProps: object,backButtonIcon: Image.propTypes.source,backButtonTitle: string,leftButtonIcon: Image.propTypes.source,leftButtonTitle: string,onLeftButtonPress: function,rightButtonIcon: Image.propTypes.source,rightButtonTitle: string,onRightButtonPress: function,wrapperStyle: [View](view.md#style),navigationBarHidden: bool,shadowHidden: bool,tintColor: string,barTintColor: string,titleTextColor: string,translucent: bool} | Yes | - ---- - -### `barTintColor` - -The default background color of the navigation bar - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `itemWrapperStyle` - -The default wrapper style for components in the navigator. A common use case is to set the backgroundColor for every page - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `navigationBarHidden` - -A Boolean value that indicates whether the navigation bar is hidden by default - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `shadowHidden` - -A Boolean value that indicates whether to hide the 1px hairline shadow by default - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `tintColor` - -The default color used for buttons in the navigation bar - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `titleTextColor` - -The default text color of the navigation bar title - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `translucent` - -A Boolean value that indicates whether the navigation bar is translucent by default - -| Type | Required | -| ---- | -------- | -| bool | No | - -## Methods - -### `push()` - -```jsx -push((route: object)); -``` - ---- - -### `popN()` - -```jsx -popN((n: number)); -``` - ---- - -### `pop()` - -```jsx -pop(); -``` - ---- - -### `replaceAtIndex()` - -```jsx -replaceAtIndex((route: object), (index: number)); -``` - -Replace a route in the navigation stack. - -`index` specifies the route in the stack that should be replaced. If it's negative, it counts from the back. - ---- - -### `replace()` - -```jsx -replace((route: object)); -``` - -Replaces the top of the navigation stack. - ---- - -### `replacePrevious()` - -```jsx -replacePrevious((route: object)); -``` - -Replace the current route's parent. - ---- - -### `popToTop()` - -```jsx -popToTop(); -``` - ---- - -### `popToRoute()` - -```jsx -popToRoute((route: object)); -``` - ---- - -### `replacePreviousAndPop()` - -```jsx -replacePreviousAndPop((route: object)); -``` - ---- - -### `resetTo()` - -```jsx -resetTo((route: object)); -``` - ---- - -### `handleNavigationComplete()` - -```jsx -handleNavigationComplete((e: Event)); -``` - ---- - -### `renderNavigationStackItems()` - -```jsx -renderNavigationStackItems(); -``` diff --git a/website/versioned_docs/version-0.18/progressbarandroid.md b/website/versioned_docs/version-0.18/progressbarandroid.md deleted file mode 100644 index cd210b481cd..00000000000 --- a/website/versioned_docs/version-0.18/progressbarandroid.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: version-0.18-progressbarandroid -title: ProgressBarAndroid -original_id: progressbarandroid ---- - -React component that wraps the Android-only `ProgressBar`. This component is used to indicate that the app is loading or there is some activity in the app. - -Example: - -``` -render: function() { - var progressBar = - - - ; - - return ( - - ); -}, -``` - -### Props - -- [View props...](view.md#props) - -* [`color`](progressbarandroid.md#color) -* [`indeterminate`](progressbarandroid.md#indeterminate) -* [`progress`](progressbarandroid.md#progress) -* [`styleAttr`](progressbarandroid.md#styleattr) -* [`testID`](progressbarandroid.md#testid) - ---- - -# Reference - -## Props - -### `color` - -Color of the progress bar. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `indeterminate` - -If the progress bar will show indeterminate progress. Note that this can only be false if styleAttr is Horizontal. - -| Type | Required | -| ----------------- | -------- | -| indeterminateType | No | - ---- - -### `progress` - -The progress value (between 0 and 1). - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `styleAttr` - -Style of the ProgressBar. One of: - -- Horizontal -- Small -- Large -- Inverse -- SmallInverse -- LargeInverse - -| Type | Required | -| ------------------------------------------------------------------------------- | -------- | -| enum('Horizontal', 'Small', 'Large', 'Inverse', 'SmallInverse', 'LargeInverse') | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | diff --git a/website/versioned_docs/version-0.18/pushnotificationios.md b/website/versioned_docs/version-0.18/pushnotificationios.md deleted file mode 100644 index 1b301adba28..00000000000 --- a/website/versioned_docs/version-0.18/pushnotificationios.md +++ /dev/null @@ -1,257 +0,0 @@ ---- -id: version-0.18-pushnotificationios -title: PushNotificationIOS -original_id: pushnotificationios ---- - -Handle push notifications for your app, including permission handling and icon badge number. - -To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). - -To enable support for `notification` and `register` events you need to augment your AppDelegate. - -At the top of your `AppDelegate.m`: - -`#import "RCTPushNotificationManager.h"` - -And then in your AppDelegate implementation add the following: - -``` - // Required to register for notifications - - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings - { - [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings]; - } - // Required for the register event. - - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken - { - [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; - } - // Required for the notification event. - - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification - { - [RCTPushNotificationManager didReceiveRemoteNotification:notification]; - } -``` - -### Methods - -- [`presentLocalNotification`](pushnotificationios.md#presentlocalnotification) -- [`scheduleLocalNotification`](pushnotificationios.md#schedulelocalnotification) -- [`cancelAllLocalNotifications`](pushnotificationios.md#cancelalllocalnotifications) -- [`setApplicationIconBadgeNumber`](pushnotificationios.md#setapplicationiconbadgenumber) -- [`getApplicationIconBadgeNumber`](pushnotificationios.md#getapplicationiconbadgenumber) -- [`addEventListener`](pushnotificationios.md#addeventlistener) -- [`requestPermissions`](pushnotificationios.md#requestpermissions) -- [`abandonPermissions`](pushnotificationios.md#abandonpermissions) -- [`checkPermissions`](pushnotificationios.md#checkpermissions) -- [`removeEventListener`](pushnotificationios.md#removeeventlistener) -- [`popInitialNotification`](pushnotificationios.md#popinitialnotification) -- [`constructor`](pushnotificationios.md#constructor) -- [`getMessage`](pushnotificationios.md#getmessage) -- [`getSound`](pushnotificationios.md#getsound) -- [`getAlert`](pushnotificationios.md#getalert) -- [`getBadgeCount`](pushnotificationios.md#getbadgecount) -- [`getData`](pushnotificationios.md#getdata) - ---- - -# Reference - -## Methods - -### `presentLocalNotification()` - -```jsx -static presentLocalNotification(details) -``` - -Schedules the localNotification for immediate presentation. - -details is an object containing: - -- `alertBody` : The message displayed in the notification alert. - ---- - -### `scheduleLocalNotification()` - -```jsx -static scheduleLocalNotification(details) -``` - -Schedules the localNotification for future presentation. - -details is an object containing: - -- `fireDate` : The date and time when the system should deliver the notification. -- `alertBody` : The message displayed in the notification alert. - ---- - -### `cancelAllLocalNotifications()` - -```jsx -static cancelAllLocalNotifications() -``` - -Cancels all scheduled localNotifications - ---- - -### `setApplicationIconBadgeNumber()` - -```jsx -static setApplicationIconBadgeNumber(number) -``` - -Sets the badge number for the app icon on the home screen - ---- - -### `getApplicationIconBadgeNumber()` - -```jsx -static getApplicationIconBadgeNumber(callback) -``` - -Gets the current badge number for the app icon on the home screen - ---- - -### `addEventListener()` - -```jsx -static addEventListener(type, handler) -``` - -Attaches a listener to remote notification events while the app is running in the foreground or the background. - -Valid events are: - -- `notification` : Fired when a remote notification is received. The handler will be invoked with an instance of `PushNotificationIOS`. -- `register`: Fired when the user registers for remote notifications. The handler will be invoked with a hex string representing the deviceToken. - ---- - -### `requestPermissions()` - -```jsx -static requestPermissions(permissions?) -``` - -Requests notification permissions from iOS, prompting the user's dialog box. By default, it will request all notification permissions, but a subset of these can be requested by passing a map of requested permissions. The following permissions are supported: - -- `alert` -- `badge` -- `sound` - -If a map is provided to the method, only the permissions with truthy values will be requested. - ---- - -### `abandonPermissions()` - -```jsx -static abandonPermissions() -``` - -Unregister for all remote notifications received via Apple Push Notification service. - -You should call this method in rare circumstances only, such as when a new version of the app removes support for all types of remote notifications. Users can temporarily prevent apps from receiving remote notifications through the Notifications section of the Settings app. Apps unregistered through this method can always re-register. - ---- - -### `checkPermissions()` - -```jsx -static checkPermissions(callback) -``` - -See what push permissions are currently enabled. `callback` will be invoked with a `permissions` object: - -- `alert` :boolean -- `badge` :boolean -- `sound` :boolean - ---- - -### `removeEventListener()` - -```jsx -static removeEventListener(type, handler) -``` - -Removes the event listener. Do this in `componentWillUnmount` to prevent memory leaks - ---- - -### `popInitialNotification()` - -```jsx -static popInitialNotification() -``` - -An initial notification will be available if the app was cold-launched from a notification. - -The first caller of `popInitialNotification` will get the initial notification object, or `null`. Subsequent invocations will return null. - ---- - -### `constructor()` - -```jsx -constructor(nativeNotif); -``` - -You will never need to instantiate `PushNotificationIOS` yourself. Listening to the `notification` event and invoking `popInitialNotification` is sufficient - ---- - -### `getMessage()` - -```jsx -getMessage(); -``` - -An alias for `getAlert` to get the notification's main message string - ---- - -### `getSound()` - -```jsx -getSound(); -``` - -Gets the sound string from the `aps` object - ---- - -### `getAlert()` - -```jsx -getAlert(); -``` - -Gets the notification's main message from the `aps` object - ---- - -### `getBadgeCount()` - -```jsx -getBadgeCount(); -``` - -Gets the badge count number from the `aps` object - ---- - -### `getData()` - -```jsx -getData(); -``` - -Gets the data object on the notif diff --git a/website/versioned_docs/version-0.18/refreshcontrol.md b/website/versioned_docs/version-0.18/refreshcontrol.md deleted file mode 100644 index da3d52e1de0..00000000000 --- a/website/versioned_docs/version-0.18/refreshcontrol.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: version-0.18-refreshcontrol -title: RefreshControl -original_id: refreshcontrol ---- - -This component is used inside a ScrollView to add pull to refresh functionality. When the ScrollView is at `scrollY: 0`, swiping down triggers an `onRefresh` event. - -### Props - -- [`onRefresh`](refreshcontrol.md#onrefresh) -- [`refreshing`](refreshcontrol.md#refreshing) -- [`colors`](refreshcontrol.md#colors) -- [`enabled`](refreshcontrol.md#enabled) -- [`progressBackgroundColor`](refreshcontrol.md#progressbackgroundcolor) -- [`size`](refreshcontrol.md#size) -- [`tintColor`](refreshcontrol.md#tintcolor) -- [`title`](refreshcontrol.md#title) - ---- - -# Reference - -## Props - -### `onRefresh` - -Called when the view starts refreshing. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `refreshing` - -Whether the view should be indicating an active refresh. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `colors` - -The colors (at least one) that will be used to draw the refresh indicator. - -| Type | Required | Platform | -| --------------------------- | -------- | -------- | -| array of [color](colors.md) | No | Android | - ---- - -### `enabled` - -Whether the pull to refresh functionality is enabled. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `progressBackgroundColor` - -The background color of the refresh indicator. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `size` - -Size of the refresh indicator, see RefreshControl.SIZE. - -| Type | Required | Platform | -| -------------------------------- | -------- | -------- | -| RefreshLayoutConsts.SIZE.DEFAULT | No | Android | - ---- - -### `tintColor` - -The color of the refresh indicator. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | - ---- - -### `title` - -The title displayed under the refresh indicator. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | iOS | diff --git a/website/versioned_docs/version-0.18/scrollview.md b/website/versioned_docs/version-0.18/scrollview.md deleted file mode 100644 index 8e60fb211f4..00000000000 --- a/website/versioned_docs/version-0.18/scrollview.md +++ /dev/null @@ -1,524 +0,0 @@ ---- -id: version-0.18-scrollview -title: ScrollView -original_id: scrollview ---- - -Component that wraps platform ScrollView while providing integration with touch locking "responder" system. - -Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer `{flex: 1}` down the view stack can lead to errors here, which the element inspector helps to debug. - -Doesn't yet support other contained responders from blocking this scroll view from becoming the responder. - -### Props - -- [View props...](view.md#props) - -* [`centerContent`](scrollview.md#centercontent) -* [`contentContainerStyle`](scrollview.md#contentcontainerstyle) -* [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) -* [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) -* [`onContentSizeChange`](scrollview.md#oncontentsizechange) -* [`onScroll`](scrollview.md#onscroll) -* [`refreshControl`](scrollview.md#refreshcontrol) -* [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) -* [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) -* [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) -* [`style`](scrollview.md#style) -* [`sendMomentumEvents`](scrollview.md#sendmomentumevents) -* [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) -* [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) -* [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) -* [`bounces`](scrollview.md#bounces) -* [`bouncesZoom`](scrollview.md#bounceszoom) -* [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) -* [`horizontal`](scrollview.md#horizontal) -* [`contentInset`](scrollview.md#contentinset) -* [`contentOffset`](scrollview.md#contentoffset) -* [`decelerationRate`](scrollview.md#decelerationrate) -* [`directionalLockEnabled`](scrollview.md#directionallockenabled) -* [`maximumZoomScale`](scrollview.md#maximumzoomscale) -* [`minimumZoomScale`](scrollview.md#minimumzoomscale) -* [`onRefreshStart`](scrollview.md#onrefreshstart) -* [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) -* [`pagingEnabled`](scrollview.md#pagingenabled) -* [`scrollEnabled`](scrollview.md#scrollenabled) -* [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) -* [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) -* [`scrollsToTop`](scrollview.md#scrollstotop) -* [`snapToAlignment`](scrollview.md#snaptoalignment) -* [`snapToInterval`](scrollview.md#snaptointerval) -* [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) -* [`zoomScale`](scrollview.md#zoomscale) - -### Methods - -- [`endRefreshing`](scrollview.md#endrefreshing) -- [`scrollTo`](scrollview.md#scrollto) -- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) -- [`handleScroll`](scrollview.md#handlescroll) - ---- - -# Reference - -## Props - -### `centerContent` - -When true, the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `contentContainerStyle` - -These styles will be applied to the scroll view content container which wraps all of the child views. Example: - -return ( ); ... var styles = StyleSheet.create({ contentContainer: { paddingVertical: 20 } }); - -| Type | Required | -| ------------------------------------ | -------- | -| StyleSheetPropType(View Style props) | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. -- 'interactive', the keyboard is dismissed interactively with the drag and moves in synchrony with the touch; dragging upwards cancels the dismissal. On android this is not supported and it will have the same behavior as 'none'. - -| Type | Required | -| -------------------------------------- | -------- | -| enum('none', 'interactive', 'on-drag') | No | - ---- - -### `keyboardShouldPersistTaps` - -When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the scroll view will not catch taps, and the keyboard will not dismiss automatically. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onContentSizeChange` - -Called when scrollable content view of the ScrollView changes. It's implemented using onLayout handler attached to the content container which this ScrollView renders. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onScroll` - -Fires at most once per frame during scrolling. The frequency of the events can be controlled using the `scrollEventThrottle` prop. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `refreshControl` - -A RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView. - -See [RefreshControl](refreshcontrol.md). - -| Type | Required | -| ------- | -------- | -| element | No | - ---- - -### `removeClippedSubviews` - -Experimental: When true, offscreen child views (whose `overflow` value is `hidden`) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsHorizontalScrollIndicator` - -When true, shows a horizontal scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsVerticalScrollIndicator` - -When true, shows a vertical scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderStyle`**: enum('solid', 'dotted', 'dashed') - -- **`backfaceVisibility`**: enum('visible', 'hidden') - -- **`borderBottomColor`**: [color](colors.md) - -- **`borderBottomLeftRadius`**: number - -- **`borderBottomRightRadius`**: number - -- **`borderBottomWidth`**: number - -- **`borderColor`**: [color](colors.md) - -- **`borderLeftColor`**: [color](colors.md) - -- **`borderLeftWidth`**: number - -- **`borderRadius`**: number - -- **`borderRightColor`**: [color](colors.md) - -- **`borderRightWidth`**: number - -- **`backgroundColor`**: [color](colors.md) - -- **`borderTopColor`**: [color](colors.md) - -- **`borderTopLeftRadius`**: number - -- **`borderTopRightRadius`**: number - -- **`borderTopWidth`**: number - -- **`borderWidth`**: number - -- **`opacity`**: number - -- **`overflow`**: enum('visible', 'hidden') - -- **`shadowColor`**: [color](colors.md) - -- **`shadowOffset`**: object: {width: number,height: number} - -- **`shadowOpacity`**: number - -- **`shadowRadius`**: number - -- **`elevation`**: number (_Android_) - - (Android-only) Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions. - ---- - -### `sendMomentumEvents` - -When true, momentum events will be sent from Android This is internal and set automatically by the framework if you have onMomentumScrollBegin or onMomentumScrollEnd set on your ScrollView - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `alwaysBounceHorizontal` - -When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself. The default value is true when `horizontal={true}` and false otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `alwaysBounceVertical` - -When true, the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself. The default value is false when `horizontal={true}` and true otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `automaticallyAdjustContentInsets` - -Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/ toolbar. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bounces` - -When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. When false, it disables all bouncing even if the `alwaysBounce*` props are true. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bouncesZoom` - -When true, gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture end, otherwise the zoom will not exceed the limits. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `canCancelContentTouches` - -When false, once tracking starts, won't try to drag if the touch moves. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `horizontal` - -When true, the scroll view's children are arranged horizontally in a row instead of vertically in a column. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `contentInset` - -The amount by which the scroll view content is inset from the edges of the scroll view. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `contentOffset` - -Used to manually set the starting scroll offset. The default value is `{x: 0, y: 0}`. - -| Type | Required | Platform | -| ------------- | -------- | -------- | -| PointPropType | No | iOS | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. Reasonable choices include - -- Normal: 0.998 (the default) -- Fast: 0.9 - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `directionalLockEnabled` - -When true, the ScrollView will try to lock to only vertical or horizontal scrolling while dragging. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `maximumZoomScale` - -The maximum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `minimumZoomScale` - -The minimum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `onRefreshStart` - -Deprecated - use `refreshControl` property instead. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `onScrollAnimationEnd` - -Called when a scrolling animation ends. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `pagingEnabled` - -When true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEnabled` - -When false, the content does not scroll. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEventThrottle` - -This controls how often the scroll event will be fired while scrolling (in events per seconds). A higher number yields better accuracy for code that is tracking the scroll position, but can lead to scroll performance problems due to the volume of information being send over the bridge. The default value is zero, which means the scroll event will be sent only once each time the view is scrolled. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `scrollIndicatorInsets` - -The amount by which the scroll view indicators are inset from the edges of the scroll view. This should normally be set to the same value as the `contentInset`. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `scrollsToTop` - -When true, the scroll view scrolls to top when the status bar is tapped. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `snapToAlignment` - -When `snapToInterval` is set, `snapToAlignment` will define the relationship of the the snapping to the scroll view. - -- `start` (the default) will align the snap at the left (horizontal) or top (vertical) -- `center` will align the snap in the center -- `end` will align the snap at the right (horizontal) or bottom (vertical) - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| enum('start', 'center', 'end') | No | iOS | - ---- - -### `snapToInterval` - -When set, causes the scroll view to stop at multiples of the value of `snapToInterval`. This can be used for paginating through children that have lengths smaller than the scroll view. Used in combination with `snapToAlignment`. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `stickyHeaderIndices` - -An array of child indices determining which children get docked to the top of the screen when scrolling. For example, passing `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction with `horizontal={true}`. - -| Type | Required | Platform | -| --------------- | -------- | -------- | -| array of number | No | iOS | - ---- - -### `zoomScale` - -The current scale of the scroll view content. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - -## Methods - -### `endRefreshing()` - -```jsx -endRefreshing(); -``` - ---- - -### `scrollTo()` - -```jsx -scrollTo(([destY]: number), ([destX]: number)); -``` - ---- - -### `scrollWithoutAnimationTo()` - -```jsx -scrollWithoutAnimationTo(([destY]: number), ([destX]: number)); -``` - ---- - -### `handleScroll()` - -```jsx -handleScroll((e: Object)); -``` diff --git a/website/versioned_docs/version-0.18/switch.md b/website/versioned_docs/version-0.18/switch.md deleted file mode 100644 index 5028d72b5a4..00000000000 --- a/website/versioned_docs/version-0.18/switch.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: version-0.18-switch -title: Switch -original_id: switch ---- - -Universal two-state toggle component. - -### Props - -- [View props...](view.md#props) - -* [`disabled`](switch.md#disabled) -* [`onValueChange`](switch.md#onvaluechange) -* [`testID`](switch.md#testid) -* [`value`](switch.md#value) -* [`onTintColor`](switch.md#ontintcolor) -* [`thumbTintColor`](switch.md#thumbtintcolor) -* [`tintColor`](switch.md#tintcolor) - ---- - -# Reference - -## Props - -### `disabled` - -If true the user won't be able to toggle the switch. Default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onValueChange` - -Invoked with the new value when the value changes. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `value` - -The value of the switch. If true the switch will be turned on. Default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onTintColor` - -Background color when the switch is turned on. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | - ---- - -### `thumbTintColor` - -Color of the foreground switch grip. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | - ---- - -### `tintColor` - -Background color when the switch is turned off. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | diff --git a/website/versioned_docs/version-0.18/tabbarios-item.md b/website/versioned_docs/version-0.18/tabbarios-item.md deleted file mode 100644 index 5eaad66f8d2..00000000000 --- a/website/versioned_docs/version-0.18/tabbarios-item.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: version-0.18-tabbarios-item -title: TabBarIOS.Item -original_id: tabbarios-item ---- - -### Props - -- [View props...](view.md#props) - -* [`badge`](tabbarios-item.md#badge) -* [`icon`](tabbarios-item.md#icon) -* [`onPress`](tabbarios-item.md#onpress) -* [`selected`](tabbarios-item.md#selected) -* [`selectedIcon`](tabbarios-item.md#selectedicon) -* [`style`](tabbarios-item.md#style) -* [`systemIcon`](tabbarios-item.md#systemicon) -* [`title`](tabbarios-item.md#title) - ---- - -# Reference - -## Props - -### `badge` - -Little red bubble that sits at the top right of the icon. - -| Type | Required | -| --------------- | -------- | -| string, ,number | No | - ---- - -### `icon` - -A custom icon for the tab. It is ignored when a system icon is defined. - -| Type | Required | -| ---------------------- | -------- | -| Image.propTypes.source | No | - ---- - -### `onPress` - -Callback when this tab is being selected, you should change the state of your component to set selected={true}. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `selected` - -It specifies whether the children are visible or not. If you see a blank content, you probably forgot to add a selected one. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `selectedIcon` - -A custom icon when the tab is selected. It is ignored when a system icon is defined. If left empty, the icon will be tinted in blue. - -| Type | Required | -| ---------------------- | -------- | -| Image.propTypes.source | No | - ---- - -### `style` - -React style object. - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `systemIcon` - -Items comes with a few predefined system icons. Note that if you are using them, the title and selectedIcon will be overridden with the system ones. - -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | -| enum('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated') | No | - ---- - -### `title` - -Text that appears under the icon. It is ignored when a system icon is defined. - -| Type | Required | -| ------ | -------- | -| string | No | diff --git a/website/versioned_docs/version-0.18/tabbarios.md b/website/versioned_docs/version-0.18/tabbarios.md deleted file mode 100644 index d4b30202f3a..00000000000 --- a/website/versioned_docs/version-0.18/tabbarios.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: version-0.18-tabbarios -title: TabBarIOS -original_id: tabbarios ---- - -### Props - -- [View props...](view.md#props) - -* [`barTintColor`](tabbarios.md#bartintcolor) -* [`style`](tabbarios.md#style) -* [`tintColor`](tabbarios.md#tintcolor) -* [`translucent`](tabbarios.md#translucent) - ---- - -# Reference - -## Props - -### `barTintColor` - -Background color of the tab bar - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `style` - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `tintColor` - -Color of the currently selected tab icon - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `translucent` - -A Boolean value that indicates whether the tab bar is translucent - -| Type | Required | -| ---- | -------- | -| bool | No | diff --git a/website/versioned_docs/version-0.18/text-style-props.md b/website/versioned_docs/version-0.18/text-style-props.md deleted file mode 100644 index 9968f86c7d1..00000000000 --- a/website/versioned_docs/version-0.18/text-style-props.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: version-0.18-text-style-props -title: Text Style Props -original_id: text-style-props ---- - -### Props - -- [`textShadowColor`](text-style-props.md#textshadowcolor) -- [`color`](text-style-props.md#color) -- [`fontSize`](text-style-props.md#fontsize) -- [`fontStyle`](text-style-props.md#fontstyle) -- [`fontWeight`](text-style-props.md#fontweight) -- [`lineHeight`](text-style-props.md#lineheight) -- [`textAlign`](text-style-props.md#textalign) -- [`fontFamily`](text-style-props.md#fontfamily) -- [`textShadowOffset`](text-style-props.md#textshadowoffset) -- [`textShadowRadius`](text-style-props.md#textshadowradius) -- [`letterSpacing`](text-style-props.md#letterspacing) -- [`textDecorationColor`](text-style-props.md#textdecorationcolor) -- [`textDecorationLine`](text-style-props.md#textdecorationline) -- [`textDecorationStyle`](text-style-props.md#textdecorationstyle) -- [`writingDirection`](text-style-props.md#writingdirection) - ---- - -# Reference - -## Props - -### `textShadowColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `color` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `fontSize` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `fontStyle` - -| Type | Required | -| ------------------------ | -------- | -| enum('normal', 'italic') | No | - ---- - -### `fontWeight` - -Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen. - -| Type | Required | -| ------------------------------------------------------------------------------------- | -------- | -| enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') | No | - ---- - -### `lineHeight` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `textAlign` - -Specifies text alignment. The value 'justify' is only supported on iOS. - -| Type | Required | -| -------------------------------------------------- | -------- | -| enum('auto', 'left', 'right', 'center', 'justify') | No | - ---- - -### `fontFamily` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `textShadowOffset` - -| Type | Required | -| -------------------------------------- | -------- | -| object: {width: number,height: number} | No | - ---- - -### `textShadowRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `letterSpacing` - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `textDecorationColor` - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | - ---- - -### `textDecorationLine` - -| Type | Required | Platform | -| ------------------------------------------------------------------- | -------- | -------- | -| enum('none', 'underline', 'line-through', 'underline line-through') | No | iOS | - ---- - -### `textDecorationStyle` - -| Type | Required | Platform | -| ------------------------------------------- | -------- | -------- | -| enum('solid', 'double', 'dotted', 'dashed') | No | iOS | - ---- - -### `writingDirection` - -| Type | Required | Platform | -| -------------------------- | -------- | -------- | -| enum('auto', 'ltr', 'rtl') | No | iOS | diff --git a/website/versioned_docs/version-0.18/text.md b/website/versioned_docs/version-0.18/text.md deleted file mode 100644 index c545a847615..00000000000 --- a/website/versioned_docs/version-0.18/text.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: version-0.18-text -title: Text -original_id: text ---- - -A React component for displaying text which supports nesting, styling, and touch handling. In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines: - -``` -renderText: function() { - return ( - - - {this.state.titleText + '\n\n'} - - - {this.state.bodyText} - - - ); -}, -... -var styles = StyleSheet.create({ - baseText: { - fontFamily: 'Cochin', - }, - titleText: { - fontSize: 20, - fontWeight: 'bold', - }, -}; -``` - -### Props - -- [`accessible`](text.md#accessible) -- [`allowFontScaling`](text.md#allowfontscaling) -- [`numberOfLines`](text.md#numberoflines) -- [`onLayout`](text.md#onlayout) -- [`onPress`](text.md#onpress) -- [`style`](text.md#style) -- [`testID`](text.md#testid) -- [`suppressHighlighting`](text.md#suppresshighlighting) - ---- - -# Reference - -## Props - -### `accessible` - -| Type | Required | -| ---- | -------- | -| | No | - ---- - -### `allowFontScaling` - -Specifies should fonts scale to respect Text Size accessibility setting on iOS. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `numberOfLines` - -Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with - -`{nativeEvent: {layout: {x, y, width, height}}}` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPress` - -This function is called on press. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [View Style Props...](view-style-props.md#style) - -- **`textShadowColor`**: [color](colors.md) - -- **`color`**: [color](colors.md) - -- **`fontSize`**: number - -- **`fontStyle`**: enum('normal', 'italic') - -- **`fontWeight`**: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') - - Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen. - -- **`lineHeight`**: number - -- **`textAlign`**: enum('auto', 'left', 'right', 'center', 'justify') - - Specifies text alignment. The value 'justify' is only supported on iOS. - -- **`fontFamily`**: string - -- **`textShadowOffset`**: object: {width: number,height: number} - -- **`textShadowRadius`**: number - -- **`letterSpacing`**: number (_iOS_) - -- **`textDecorationColor`**: [color](colors.md) (_iOS_) - -- **`textDecorationLine`**: enum('none', 'underline', 'line-through', 'underline line-through') (_iOS_) - -- **`textDecorationStyle`**: enum('solid', 'double', 'dotted', 'dashed') (_iOS_) - -- **`writingDirection`**: enum('auto', 'ltr', 'rtl') (_iOS_) - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `suppressHighlighting` - -When true, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | diff --git a/website/versioned_docs/version-0.18/toolbarandroid.md b/website/versioned_docs/version-0.18/toolbarandroid.md deleted file mode 100644 index 5e6b077a122..00000000000 --- a/website/versioned_docs/version-0.18/toolbarandroid.md +++ /dev/null @@ -1,210 +0,0 @@ ---- -id: version-0.18-toolbarandroid -title: ToolbarAndroid -original_id: toolbarandroid ---- - -React component that wraps the Android-only [`Toolbar` widget][0]. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right. - -If the toolbar has an only child, it will be displayed between the title and actions. - -Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where `require('./some_icon.png')` translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using `require('./some_icon.png')` will do this automatically for you, so as long as you don't explicitly use e.g. `{uri: 'http://...'}`, you will be good. - -Example: - -``` -render: function() { - return ( - - ) -}, -onActionSelected: function(position) { - if (position === 0) { // index of 'Settings' - showSettings(); - } -} -``` - -[0]: https://developer.android.com/reference/android/support/v7/widget/Toolbar.html - -### Props - -- [View props...](view.md#props) - -* [`overflowIcon`](toolbarandroid.md#overflowicon) -* [`actions`](toolbarandroid.md#actions) -* [`contentInsetStart`](toolbarandroid.md#contentinsetstart) -* [`logo`](toolbarandroid.md#logo) -* [`navIcon`](toolbarandroid.md#navicon) -* [`onActionSelected`](toolbarandroid.md#onactionselected) -* [`onIconClicked`](toolbarandroid.md#oniconclicked) -* [`contentInsetEnd`](toolbarandroid.md#contentinsetend) -* [`rtl`](toolbarandroid.md#rtl) -* [`subtitle`](toolbarandroid.md#subtitle) -* [`subtitleColor`](toolbarandroid.md#subtitlecolor) -* [`testID`](toolbarandroid.md#testid) -* [`title`](toolbarandroid.md#title) -* [`titleColor`](toolbarandroid.md#titlecolor) - ---- - -# Reference - -## Props - -### `overflowIcon` - -Sets the overflow icon. - -| Type | Required | -| ------------------- | -------- | -| optionalImageSource | No | - ---- - -### `actions` - -Sets possible actions on the toolbar as part of the action menu. These are displayed as icons or text on the right side of the widget. If they don't fit they are placed in an 'overflow' menu. - -This property takes an array of objects, where each object has the following keys: - -- `title`: **required**, the title of this action -- `icon`: the icon for this action, e.g. `require('./some_icon.png')` -- `show`: when to show this action as an icon or hide it in the overflow menu: `always`, `ifRoom` or `never` -- `showWithText`: boolean, whether to show text alongside the icon or not - -| Type | Required | -| --------------------------------------------------------------------------------------------------------------------- | -------- | -| array of object: {title: string,icon: optionalImageSource,show: enum('always', 'ifRoom', 'never'),showWithText: bool} | No | - ---- - -### `contentInsetStart` - -Sets the content inset for the toolbar starting edge. - -The content inset affects the valid area for Toolbar content other than the navigation button and menu. Insets define the minimum margin for these components and can be used to effectively align Toolbar content along well-known gridlines. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `logo` - -Sets the toolbar logo. - -| Type | Required | -| ------------------- | -------- | -| optionalImageSource | No | - ---- - -### `navIcon` - -Sets the navigation icon. - -| Type | Required | -| ------------------- | -------- | -| optionalImageSource | No | - ---- - -### `onActionSelected` - -Callback that is called when an action is selected. The only argument that is passed to the callback is the position of the action in the actions array. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onIconClicked` - -Callback called when the icon is selected. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `contentInsetEnd` - -Sets the content inset for the toolbar ending edge. - -The content inset affects the valid area for Toolbar content other than the navigation button and menu. Insets define the minimum margin for these components and can be used to effectively align Toolbar content along well-known gridlines. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `rtl` - -Used to set the toolbar direction to RTL. In addition to this property you need to add - -android:supportsRtl="true" - -to your application AndroidManifest.xml and then call `setLayoutDirection(LayoutDirection.RTL)` in your MainActivity `onCreate` method. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `subtitle` - -Sets the toolbar subtitle. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `subtitleColor` - -Sets the toolbar subtitle color. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `title` - -Sets the toolbar title. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `titleColor` - -Sets the toolbar title color. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | diff --git a/website/versioned_docs/version-0.18/touchablehighlight.md b/website/versioned_docs/version-0.18/touchablehighlight.md deleted file mode 100644 index 5d1b0b51aca..00000000000 --- a/website/versioned_docs/version-0.18/touchablehighlight.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: version-0.18-touchablehighlight -title: TouchableHighlight -original_id: touchablehighlight ---- - -A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view. The underlay comes from adding a view to the view hierarchy, which can 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. - -Example: - -``` -renderButton: function() { - return ( - - - - ); -}, -``` - -> **NOTE**: TouchableHighlight supports only one child -> -> If you wish to have several child components, wrap them in a View. - -### Props - -- [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) - -* [`activeOpacity`](touchablehighlight.md#activeopacity) -* [`onHideUnderlay`](touchablehighlight.md#onhideunderlay) -* [`onShowUnderlay`](touchablehighlight.md#onshowunderlay) -* [`style`](touchablehighlight.md#style) -* [`underlayColor`](touchablehighlight.md#underlaycolor) - -### Methods - -- [`computeSyntheticState`](touchablehighlight.md#computesyntheticstate) - ---- - -# Reference - -## Props - -### `activeOpacity` - -Determines what the opacity of the wrapped view should be when touch is active. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `onHideUnderlay` - -Called immediately after the underlay is hidden - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onShowUnderlay` - -Called immediately after the underlay is shown - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `style` - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `underlayColor` - -The color of the underlay that will show through when the touch is active. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - -## Methods - -### `computeSyntheticState()` - -```jsx -computeSyntheticState(props); -``` diff --git a/website/versioned_docs/version-0.18/view-style-props.md b/website/versioned_docs/version-0.18/view-style-props.md deleted file mode 100644 index caa92ebaac3..00000000000 --- a/website/versioned_docs/version-0.18/view-style-props.md +++ /dev/null @@ -1,239 +0,0 @@ ---- -id: version-0.18-view-style-props -title: View Style Props -original_id: view-style-props ---- - -### Props - -- [`borderStyle`](view-style-props.md#borderstyle) -- [`backfaceVisibility`](view-style-props.md#backfacevisibility) -- [`borderBottomColor`](view-style-props.md#borderbottomcolor) -- [`borderBottomLeftRadius`](view-style-props.md#borderbottomleftradius) -- [`borderBottomRightRadius`](view-style-props.md#borderbottomrightradius) -- [`borderBottomWidth`](view-style-props.md#borderbottomwidth) -- [`borderColor`](view-style-props.md#bordercolor) -- [`borderLeftColor`](view-style-props.md#borderleftcolor) -- [`borderLeftWidth`](view-style-props.md#borderleftwidth) -- [`borderRadius`](view-style-props.md#borderradius) -- [`borderRightColor`](view-style-props.md#borderrightcolor) -- [`borderRightWidth`](view-style-props.md#borderrightwidth) -- [`backgroundColor`](view-style-props.md#backgroundcolor) -- [`borderTopColor`](view-style-props.md#bordertopcolor) -- [`borderTopLeftRadius`](view-style-props.md#bordertopleftradius) -- [`borderTopRightRadius`](view-style-props.md#bordertoprightradius) -- [`borderTopWidth`](view-style-props.md#bordertopwidth) -- [`borderWidth`](view-style-props.md#borderwidth) -- [`opacity`](view-style-props.md#opacity) -- [`overflow`](view-style-props.md#overflow) -- [`shadowColor`](view-style-props.md#shadowcolor) -- [`shadowOffset`](view-style-props.md#shadowoffset) -- [`shadowOpacity`](view-style-props.md#shadowopacity) -- [`shadowRadius`](view-style-props.md#shadowradius) -- [`elevation`](view-style-props.md#elevation) - ---- - -# Reference - -## Props - -### `borderStyle` - -| Type | Required | -| --------------------------------- | -------- | -| enum('solid', 'dotted', 'dashed') | No | - ---- - -### `backfaceVisibility` - -| Type | Required | -| ------------------------- | -------- | -| enum('visible', 'hidden') | No | - ---- - -### `borderBottomColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderBottomLeftRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderBottomRightRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderBottomWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderLeftColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderLeftWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderRightColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderRightWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `backgroundColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderTopColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderTopLeftRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderTopRightRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderTopWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `opacity` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `overflow` - -| Type | Required | -| ------------------------- | -------- | -| enum('visible', 'hidden') | No | - ---- - -### `shadowColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `shadowOffset` - -| Type | Required | -| -------------------------------------- | -------- | -| object: {width: number,height: number} | No | - ---- - -### `shadowOpacity` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `shadowRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `elevation` - -(Android-only) Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | Android | diff --git a/website/versioned_docs/version-0.18/viewpagerandroid.md b/website/versioned_docs/version-0.18/viewpagerandroid.md deleted file mode 100644 index 9393caae063..00000000000 --- a/website/versioned_docs/version-0.18/viewpagerandroid.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -id: version-0.18-viewpagerandroid -title: ViewPagerAndroid -original_id: viewpagerandroid ---- - -Container that allows to flip left and right between child views. Each child view of the `ViewPagerAndroid` will be treated as a separate page and will be stretched to fill the `ViewPagerAndroid`. - -It is important all children are ``s and not composite components. You can set style properties like `padding` or `backgroundColor` for each child. - -Example: - -``` -render: function() { - return ( - - - First page - - - Second page - - - ); -} - -... - -var styles = { - ... - pageStyle: { - alignItems: 'center', - padding: 20, - } -} -``` - -### Props - -- [View props...](view.md#props) - -* [`initialPage`](viewpagerandroid.md#initialpage) -* [`keyboardDismissMode`](viewpagerandroid.md#keyboarddismissmode) -* [`onPageScroll`](viewpagerandroid.md#onpagescroll) -* [`onPageSelected`](viewpagerandroid.md#onpageselected) - -### Methods - -- [`setPage`](viewpagerandroid.md#setpage) -- [`setPageWithoutAnimation`](viewpagerandroid.md#setpagewithoutanimation) - ---- - -# Reference - -## Props - -### `initialPage` - -Index of initial page that should be selected. Use `setPage` method to update the page, and `onPageSelected` to monitor page changes - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. - -| Type | Required | -| ----------------------- | -------- | -| enum('none', 'on-drag') | No | - ---- - -### `onPageScroll` - -Executed when transitioning between pages (ether because of animation for the requested page change or when user is swiping/dragging between pages) The `event.nativeEvent` object for this callback will carry following data: - -- position - index of first page from the left that is currently visible -- offset - value from range [0,1) describing stage between page transitions. Value x means that (1 - x) fraction of the page at "position" index is visible, and x fraction of the next page is visible. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPageSelected` - -This callback will be called once ViewPager finish navigating to selected page (when user swipes between pages). The `event.nativeEvent` object passed to this callback will have following fields: - -- position - index of page that has been selected - -| Type | Required | -| -------- | -------- | -| function | No | - -## Methods - -### `setPage()` - -```jsx -setPage((selectedPage: number)); -``` - -A helper function to scroll to a specific page in the ViewPager. The transition between pages will be animated. - ---- - -### `setPageWithoutAnimation()` - -```jsx -setPageWithoutAnimation((selectedPage: number)); -``` - -A helper function to scroll to a specific page in the ViewPager. The transition between pages will be _not_ be animated. diff --git a/website/versioned_docs/version-0.18/webview.md b/website/versioned_docs/version-0.18/webview.md deleted file mode 100644 index 535f41b859b..00000000000 --- a/website/versioned_docs/version-0.18/webview.md +++ /dev/null @@ -1,262 +0,0 @@ ---- -id: version-0.18-webview -title: WebView -original_id: webview ---- - -Renders a native WebView. - -### Props - -- [View props...](view.md#props) - -* [`style`](webview.md#style) -* [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) -* [`html`](webview.md#html) -* [`injectedJavaScript`](webview.md#injectedjavascript) -* [`onNavigationStateChange`](webview.md#onnavigationstatechange) -* [`renderError`](webview.md#rendererror) -* [`renderLoading`](webview.md#renderloading) -* [`startInLoadingState`](webview.md#startinloadingstate) -* [`contentInset`](webview.md#contentinset) -* [`url`](webview.md#url) -* [`domStorageEnabledAndroid`](webview.md#domstorageenabledandroid) -* [`javaScriptEnabledAndroid`](webview.md#javascriptenabledandroid) -* [`allowsInlineMediaPlayback`](webview.md#allowsinlinemediaplayback) -* [`bounces`](webview.md#bounces) -* [`onShouldStartLoadWithRequest`](webview.md#onshouldstartloadwithrequest) -* [`scalesPageToFit`](webview.md#scalespagetofit) -* [`scrollEnabled`](webview.md#scrollenabled) - -### Methods - -- [`goForward`](webview.md#goforward) -- [`goBack`](webview.md#goback) -- [`reload`](webview.md#reload) -- [`updateNavigationState`](webview.md#updatenavigationstate) -- [`getWebViewHandle`](webview.md#getwebviewhandle) -- [`onLoadingStart`](webview.md#onloadingstart) -- [`onLoadingError`](webview.md#onloadingerror) -- [`onLoadingFinish`](webview.md#onloadingfinish) - ---- - -# Reference - -## Props - -### `style` - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `automaticallyAdjustContentInsets` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `html` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `injectedJavaScript` - -Sets the JS to be injected when the webpage loads. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `onNavigationStateChange` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `renderError` - -Function that returns a view to show if there's an error. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `renderLoading` - -Function that returns a loading indicator. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `startInLoadingState` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `contentInset` - -| Type | Required | -| ------------------------------------------------------------------ | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | - ---- - -### `url` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `domStorageEnabledAndroid` - -Used on Android only, controls whether DOM Storage is enabled or not - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `javaScriptEnabledAndroid` - -Used on Android only, JS is enabled by default for WebView on iOS - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `allowsInlineMediaPlayback` - -Determines whether HTML5 videos play inline or use the native full-screen controller. default value `false` **NOTE** : "In order for video to play inline, not only does this property need to be set to true, but the video element in the HTML document must also include the webkit-playsinline attribute." - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bounces` - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `onShouldStartLoadWithRequest` - -Allows custom handling of any webview requests by a JS handler. Return true or false from this method to continue loading the request. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `scalesPageToFit` - -Sets whether the webpage scales to fit the view and the user can change the scale. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEnabled` - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - -## Methods - -### `goForward()` - -```jsx -goForward(); -``` - ---- - -### `goBack()` - -```jsx -goBack(); -``` - ---- - -### `reload()` - -```jsx -reload(); -``` - ---- - -### `updateNavigationState()` - -```jsx -updateNavigationState((event: Event)); -``` - -We return an event with a bunch of fields including: url, title, loading, canGoBack, canGoForward - ---- - -### `getWebViewHandle()` - -```jsx -getWebViewHandle(): -``` - ---- - -### `onLoadingStart()` - -```jsx -onLoadingStart((event: Event)); -``` - ---- - -### `onLoadingError()` - -```jsx -onLoadingError((event: Event)); -``` - ---- - -### `onLoadingFinish()` - -```jsx -onLoadingFinish((event: Event)); -``` diff --git a/website/versioned_docs/version-0.19/animated.md b/website/versioned_docs/version-0.19/animated.md deleted file mode 100644 index 6181cf6665a..00000000000 --- a/website/versioned_docs/version-0.19/animated.md +++ /dev/null @@ -1,470 +0,0 @@ ---- -id: version-0.19-animated -title: Animated -original_id: animated ---- - -Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and straight forward to build and maintain. - -The general workflow is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates either via animations, such as `Animated.timing`, or by hooking into gestures like panning or scrolling via `Animated.event`. `Animated.Value` can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted: - -```jsx -class FadeInView extends React.Component { - constructor(props) { - super(props); - this.state = { - fadeAnim: new Animated.Value(0) // init opacity 0 - }; - } - componentDidMount() { - Animated.timing( - // Uses easing functions - this.state.fadeAnim, // The value to drive - { toValue: 1 } // Configuration - ).start(); // Don't forget start! - } - render() { - return ( - - {' '} - // Binds - {this.props.children} - - ); - } -} -``` - -Note that only animatable components can be animated. `View`, `Text`, and `Image` are already provided, and you can create custom ones with `createAnimatedComponent`. These components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default. - -Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation. - -A single `Animated.Value` can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value. - -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` in the example above like so: - -```jsx - style={{ - opacity: this.state.fadeAnim, // Binds directly - transform: [{ - translateY: this.state.fadeAnim.interpolate({ - inputRange: [0, 1], - outputRange: [150, 0] // 0 : 150, 0.5 : 75, 1 : 0 - }), - }], - }}> -``` - -Animations can also be combined in complex ways using composition functions such as `sequence` and `parallel`, and can also be chained together by setting the `toValue` of one animation to be another `Animated.Value`. - -`Animated.ValueXY` is handy for 2D animations, like panning, and there are other helpful additions like `setOffset` and `getLayout` to aid with typical interaction patterns, like drag-and-drop. - -You can see more example usage in `AnimationExample.js`, the Gratuitous Animation App, and [Animations documentation guide](animations.md). - -Note that `Animated` is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout `Animated.Value.addListener` as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future. - -### Methods - -- [`decay`](animated.md#decay) -- [`timing`](animated.md#timing) -- [`spring`](animated.md#spring) -- [`add`](animated.md#add) -- [`multiply`](animated.md#multiply) -- [`delay`](animated.md#delay) -- [`sequence`](animated.md#sequence) -- [`parallel`](animated.md#parallel) -- [`stagger`](animated.md#stagger) -- [`event`](animated.md#event) -- [`createAnimatedComponent`](animated.md#createanimatedcomponent) - -### Properties - -- [`Value`](animated.md#value) -- [`ValueXY`](animated.md#valuexy) - -### Classes - -- [`AnimatedValue`](animated.md#animatedvalue) -- [`AnimatedValueXY`](animated.md#animatedvaluexy) -- [`AnimatedProps`](animated.md#animatedprops) - ---- - -# Reference - -## Methods - -### `decay()` - -```jsx -static decay(value, config) -``` - -Animates a value from an initial velocity to zero based on a decay coefficient. - ---- - -### `timing()` - -```jsx -static timing(value, config) -``` - -Animates a value along a timed easing curve. The `Easing` module has tons of pre-defined curves, or you can use your own function. - ---- - -### `spring()` - -```jsx -static spring(value, config) -``` - -Spring animation based on Rebound and Origami. Tracks velocity state to create fluid motions as the `toValue` updates, and can be chained together. - ---- - -### `add()` - -```jsx -static add(a, b) -``` - -Creates a new Animated value composed from two Animated values added together. - ---- - -### `multiply()` - -```jsx -static multiply(a, b) -``` - -Creates a new Animated value composed from two Animated values multiplied together. - ---- - -### `delay()` - -```jsx -static delay(time) -``` - -Starts an animation after the given delay. - ---- - -### `sequence()` - -```jsx -static sequence(animations) -``` - -Starts an array of animations in order, waiting for each to complete before starting the next. If the current running animation is stopped, no following animations will be started. - ---- - -### `parallel()` - -```jsx -static parallel(animations, config?) -``` - -Starts an array of animations all at the same time. By default, if one of the animations is stopped, they will all be stopped. You can override this with the `stopTogether` flag. - ---- - -### `stagger()` - -```jsx -static stagger(time, animations) -``` - -Array of animations may run in parallel (overlap), but are started in sequence with successive delays. Nice for doing trailing effects. - ---- - -### `event()` - -```jsx -static event(argMapping, config?) -``` - -Takes an array of mappings and extracts values from each arg accordingly, then calls `setValue` on the mapped outputs. e.g. - -```jsx - onScroll={Animated.event( - [{nativeEvent: {contentOffset: {x: this._scrollX}}}] - {listener}, // Optional async listener - ) - ... - onPanResponderMove: Animated.event([ - null, // raw event arg ignored - {dx: this._panX}, // gestureState arg - ]), -``` - ---- - -### `createAnimatedComponent()` - -```jsx -static createAnimatedComponent(Component) -``` - -Make any React component Animatable. Used to create `Animated.View`, etc. - -## Properties - ---- - -## Classes - -## class AnimatedValue - -Standard value for driving animations. One `Animated.Value` can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling `setValue`) will stop any previous ones. - -### Methods - -### `constructor()` - -```jsx -constructor(value); -``` - ---- - -### `setValue()` - -```jsx -setValue(value); -``` - -Directly set the value. This will stop any animations running on the value and update all the bound properties. - ---- - -### `setOffset()` - -```jsx -setOffset(offset); -``` - -Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture. - ---- - -### `flattenOffset()` - -```jsx -flattenOffset(); -``` - -Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged. - ---- - -### `addListener()` - -```jsx -addListener(callback); -``` - -Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively. - ---- - -### `removeListener()` - -```jsx -removeListener(id); -``` - ---- - -### `removeAllListeners()` - -```jsx -removeAllListeners(); -``` - ---- - -### `stopAnimation()` - -```jsx -stopAnimation(callback?) -``` - -Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout. - ---- - -### `interpolate()` - -```jsx -interpolate(config); -``` - -Interpolates the value before updating the property, e.g. mapping 0-1 to 0-10. - ---- - -### `animate()` - -```jsx -animate(animation, callback); -``` - -Typically only used internally, but could be used by a custom Animation class. - ---- - -### `stopTracking()` - -```jsx -stopTracking(); -``` - -Typically only used internally. - ---- - -### `track()` - -```jsx -track(tracking); -``` - -Typically only used internally. - ---- - -## class AnimatedValueXY - -2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal `Animated.Value`, but multiplexed. Contains two regular `Animated.Value`s under the hood. Example: - -```jsx -class DraggableView extends React.Component { - constructor(props) { - super(props); - this.state = { - pan: new Animated.ValueXY() // inits to zero - }; - this.state.panResponder = PanResponder.create({ - onStartShouldSetPanResponder: () => true, - onPanResponderMove: Animated.event([ - null, - { - dx: this.state.pan.x, // x,y are Animated.Value - dy: this.state.pan.y - } - ]), - onPanResponderRelease: () => { - Animated.spring( - this.state.pan, // Auto-multiplexed - { toValue: { x: 0, y: 0 } } // Back to zero - ).start(); - } - }); - } - render() { - return ( - - {this.props.children} - - ); - } -} -``` - -### Methods - -### `constructor()` - -```jsx -constructor(valueIn?) -``` - ---- - -### `setValue()` - -```jsx -setValue(value); -``` - ---- - -### `setOffset()` - -```jsx -setOffset(offset); -``` - ---- - -### `flattenOffset()` - -```jsx -flattenOffset(); -``` - ---- - -### `stopAnimation()` - -```jsx -stopAnimation(callback?) -``` - ---- - -### `addListener()` - -```jsx -addListener(callback); -``` - ---- - -### `removeListener()` - -```jsx -removeListener(id); -``` - ---- - -### `getLayout()` - -```jsx -getLayout(); -``` - -Converts `{x, y}` into `{left, top}` for use in style, e.g. - -```jsx - style={this.state.anim.getLayout()} -``` - ---- - -### `getTranslateTransform()` - -```jsx -getTranslateTransform(); -``` - -Converts `{x, y}` into a useable translation transform, e.g. - -```jsx - style={{ - transform: this.state.anim.getTranslateTransform() - }} -``` diff --git a/website/versioned_docs/version-0.19/appstate.md b/website/versioned_docs/version-0.19/appstate.md deleted file mode 100644 index c1379cc496c..00000000000 --- a/website/versioned_docs/version-0.19/appstate.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: version-0.19-appstate -title: AppState -original_id: appstate ---- - -`AppState` can tell you if the app is in the foreground or background, and notify you when the state changes. - -AppState is frequently used to determine the intent and proper behavior when handling push notifications. - -### App States - -- `active` - The app is running in the foreground -- `background` - The app is running in the background. The user is either in another app or on the home screen -- `inactive` - This is a transition state that currently never happens for typical React Native apps. - -For more information, see [Apple's documentation](https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/TheAppLifeCycle/TheAppLifeCycle.html) - -### Basic Usage - -To see the current state, you can check `AppState.currentState`, which will be kept up-to-date. However, `currentState` will be null at launch while `AppState` retrieves it over the bridge. - -``` -getInitialState: function() { - return { - currentAppState: AppState.currentState, - }; -}, -componentDidMount: function() { - AppState.addEventListener('change', this._handleAppStateChange); -}, -componentWillUnmount: function() { - AppState.removeEventListener('change', this._handleAppStateChange); -}, -_handleAppStateChange: function(currentAppState) { - this.setState({ currentAppState, }); -}, -render: function() { - return ( - Current state is: {this.state.currentAppState} - ); -}, -``` - -This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the `active` state, and the null state will happen only momentarily. - -### Methods - -- [`addEventListener`](appstate.md#addeventlistener) -- [`removeEventListener`](appstate.md#removeeventlistener) - -### Properties - -- [`currentState`](appstate.md#currentstate) - ---- - -# Reference - -## Methods - -### `addEventListener()` - -```jsx -static addEventListener(type, handler) -``` - -Add a handler to AppState changes by listening to the `change` event type and providing the handler - -**Parameters:** - -| Name | Type | Required | Description | -| ------- | -------- | -------- | ----------- | -| type | string | Yes | | -| handler | function | Yes | | - ---- - -### `removeEventListener()` - -```jsx -static removeEventListener(type, handler) -``` - -Remove a handler by passing the `change` event type and the handler - -**Parameters:** - -| Name | Type | Required | Description | -| ------- | -------- | -------- | ----------- | -| type | string | Yes | | -| handler | function | Yes | | - -## Properties - -### `currentState` - -```jsx -AppState.currentState; -``` diff --git a/website/versioned_docs/version-0.19/image.md b/website/versioned_docs/version-0.19/image.md deleted file mode 100644 index 76133ce4415..00000000000 --- a/website/versioned_docs/version-0.19/image.md +++ /dev/null @@ -1,215 +0,0 @@ ---- -id: version-0.19-image -title: Image -original_id: image ---- - -A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. - -Example usage: - -``` -renderImages: function() { - return ( - - - - - ); -}, -``` - -### Props - -- [`testID`](image.md#testid) -- [`onLayout`](image.md#onlayout) -- [`onLoadEnd`](image.md#onloadend) -- [`onLoadStart`](image.md#onloadstart) -- [`resizeMode`](image.md#resizemode) -- [`source`](image.md#source) -- [`style`](image.md#style) -- [`onLoad`](image.md#onload) -- [`accessibilityLabel`](image.md#accessibilitylabel) -- [`accessible`](image.md#accessible) -- [`capInsets`](image.md#capinsets) -- [`defaultSource`](image.md#defaultsource) -- [`onError`](image.md#onerror) -- [`onProgress`](image.md#onprogress) - ---- - -# Reference - -## Props - -### `testID` - -A unique identifier for this element to be used in UI Automation testing scripts. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{nativeEvent: {layout: {x, y, width, height}}}`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadEnd` - -Invoked when load either succeeds or fails - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadStart` - -Invoked on load start - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `resizeMode` - -Determines how to resize the image when the frame doesn't match the raw image dimensions. - -'cover': Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding). - -'contain': Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). - -'stretch': Scale width and height independently, This may change the aspect ratio of the src. - -| Type | Required | -| ----------------------------------- | -------- | -| enum('cover', 'contain', 'stretch') | No | - ---- - -### `source` - -`uri` is a string representing the resource identifier for the image, which could be an http address, a local file path, or the name of a static image resource (which should be wrapped in the `require('./path/to/image.png')` function). - -| Type | Required | -| ------------------------------ | -------- | -| object: {uri: string}, ,number | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Shadow Props...](shadow-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`backfaceVisibility`**: enum('visible', 'hidden') - -- **`backgroundColor`**: [color](colors.md) - -- **`borderColor`**: [color](colors.md) - -- **`borderRadius`**: number - -- **`borderWidth`**: number - -- **`opacity`**: number - -- **`overflow`**: enum('visible', 'hidden') - -- **`resizeMode`**: Object.keys(ImageResizeMode) - -- **`tintColor`**: [color](colors.md) - ---- - -### `onLoad` - -Invoked when load completes successfully - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `accessibilityLabel` - -The text that's read by the screen reader when the user interacts with the image. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | iOS | - ---- - -### `accessible` - -When true, indicates the image is an accessibility element. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `capInsets` - -When the image is resized, the corners of the size specified by capInsets will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info on [Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets) - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `defaultSource` - -A static image to display while loading the image source. - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| object: {uri: string}, ,number | No | iOS | - ---- - -### `onError` - -Invoked on load error with `{nativeEvent: {error}}` - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `onProgress` - -Invoked on download progress with `{nativeEvent: {loaded, total}}` - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | diff --git a/website/versioned_docs/version-0.19/picker.md b/website/versioned_docs/version-0.19/picker.md deleted file mode 100644 index a9b6a1e2ec5..00000000000 --- a/website/versioned_docs/version-0.19/picker.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -id: version-0.19-picker -title: Picker -original_id: picker ---- - -Renders the native picker component on Android and iOS. Example: - - this.setState({language: lang})}> - - - - -Note: The picker has a default fixed height which you can modify using `style` if needed. To set the width, you can use `style` as well, e.g. to set a fixed width or stretch the picker horizontally. - -### Props - -- [View props...](view.md#props) - -* [`onValueChange`](picker.md#onvaluechange) -* [`selectedValue`](picker.md#selectedvalue) -* [`style`](picker.md#style) -* [`testID`](picker.md#testid) -* [`enabled`](picker.md#enabled) -* [`mode`](picker.md#mode) -* [`prompt`](picker.md#prompt) -* [`itemStyle`](picker.md#itemstyle) - ---- - -# Reference - -## Props - -### `onValueChange` - -Callback for when an item is selected. This is called with the following parameters: - -- `itemValue`: the `value` prop of the item that was selected -- `itemPosition`: the index of the selected item in this picker - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `selectedValue` - -Value matching value of one of the items. Can be a string or an integer. - -| Type | Required | -| ---- | -------- | -| any | No | - ---- - -### `style` - -| Type | Required | -| --------------- | -------- | -| pickerStyleType | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `enabled` - -If set to false, the picker will be disabled, i.e. the user will not be able to make a selection. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `mode` - -On Android, specifies how to display the selection items when the user taps on the picker: - -- 'dialog': Show a modal dialog. This is the default. -- 'dropdown': Shows a dropdown anchored to the picker view - -| Type | Required | Platform | -| -------------------------- | -------- | -------- | -| enum('dialog', 'dropdown') | No | Android | - ---- - -### `prompt` - -Prompt string for this picker, used on Android in dialog mode as the title of the dialog. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `itemStyle` - -Style to apply to each of the item labels. - -| Type | Required | Platform | -| ---------------------------------- | -------- | -------- | -| [text styles](text-style-props.md) | No | iOS | diff --git a/website/versioned_docs/version-0.19/pixelratio.md b/website/versioned_docs/version-0.19/pixelratio.md deleted file mode 100644 index d06494da073..00000000000 --- a/website/versioned_docs/version-0.19/pixelratio.md +++ /dev/null @@ -1,106 +0,0 @@ ---- -id: version-0.19-pixelratio -title: PixelRatio -original_id: pixelratio ---- - -PixelRatio class gives access to the device pixel density. - -### Fetching a correctly sized image - -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. - -``` -var image = getImage({ - width: PixelRatio.getPixelSizeForLayoutSize(200), - height: PixelRatio.getPixelSizeForLayoutSize(100), -}); - -``` - -### Methods - -- [`get`](pixelratio.md#get) -- [`getFontScale`](pixelratio.md#getfontscale) -- [`getPixelSizeForLayoutSize`](pixelratio.md#getpixelsizeforlayoutsize) -- [`roundToNearestPixel`](pixelratio.md#roundtonearestpixel) -- [`startDetecting`](pixelratio.md#startdetecting) - ---- - -# Reference - -## Methods - -### `get()` - -```jsx -static get() -``` - -Returns the device pixel density. Some examples: - -- PixelRatio.get() === 1 - - [mdpi Android devices](https://material.io/tools/devices/) -- PixelRatio.get() === 1.5 - - [hdpi Android devices](https://material.io/tools/devices/) -- PixelRatio.get() === 2 - - iPhone 4, 4S - - iPhone 5, 5c, 5s - - iPhone 6, 7, 8 - - [xhdpi Android devices](https://material.io/tools/devices/) -- PixelRatio.get() === 3 - - iPhone 6 Plus, 7 Plus, 8 Plus - - iPhone X - - Pixel, Pixel 2 - - [xxhdpi Android devices](https://material.io/tools/devices/) -- PixelRatio.get() === 3.5 - - Nexus 6 - - Pixel XL, Pixel 2 XL - - [xxxhdpi Android devices](https://material.io/tools/devices/) - ---- - -### `getFontScale()` - -```jsx -static getFontScale() -``` - -Returns the scaling factor for font sizes. This is the ratio that is used to calculate the absolute font size, so any elements that heavily depend on that should use this to do calculations. - -If a font scale is not set, this returns the device pixel ratio. - -Currently this is only implemented on Android and reflects the user preference set in Settings > Display > Font size, on iOS it will always return the default pixel ratio. @platform android - ---- - -### `getPixelSizeForLayoutSize()` - -```jsx -static getPixelSizeForLayoutSize(layoutSize) -``` - -Converts a layout size (dp) to pixel size (px). - -Guaranteed to return an integer number. - ---- - -### `roundToNearestPixel()` - -```jsx -static roundToNearestPixel(layoutSize) -``` - -Rounds a layout size (dp) to the nearest layout size that corresponds to an integer number of pixels. For example, on a device with a PixelRatio of 3, `PixelRatio.roundToNearestPixel(8.4) = 8.33`, which corresponds to exactly (8.33 \* 3) = 25 pixels. - ---- - -### `startDetecting()` - -```jsx -static startDetecting() -``` - -// No-op for iOS, but used on the web. Should not be documented. diff --git a/website/versioned_docs/version-0.19/progressbarandroid.md b/website/versioned_docs/version-0.19/progressbarandroid.md deleted file mode 100644 index 97b5092ce0f..00000000000 --- a/website/versioned_docs/version-0.19/progressbarandroid.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: version-0.19-progressbarandroid -title: ProgressBarAndroid -original_id: progressbarandroid ---- - -React component that wraps the Android-only `ProgressBar`. This component is used to indicate that the app is loading or there is some activity in the app. - -Example: - -``` -render: function() { - var progressBar = - - - ; - - return ( - - ); -}, -``` - -### Props - -- [View props...](view.md#props) - -* [`color`](progressbarandroid.md#color) -* [`indeterminate`](progressbarandroid.md#indeterminate) -* [`progress`](progressbarandroid.md#progress) -* [`styleAttr`](progressbarandroid.md#styleattr) -* [`testID`](progressbarandroid.md#testid) - ---- - -# Reference - -## Props - -### `color` - -Color of the progress bar. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `indeterminate` - -If the progress bar will show indeterminate progress. Note that this can only be false if styleAttr is Horizontal. - -| Type | Required | -| ----------------- | -------- | -| indeterminateType | No | - ---- - -### `progress` - -The progress value (between 0 and 1). - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `styleAttr` - -Style of the ProgressBar. One of: - -- Horizontal -- Normal (default) -- Small -- Large -- Inverse -- SmallInverse -- LargeInverse - -| Type | Required | -| ----------------------------------------------------------------------------------------- | -------- | -| enum('Horizontal', 'Normal', 'Small', 'Large', 'Inverse', 'SmallInverse', 'LargeInverse') | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | diff --git a/website/versioned_docs/version-0.19/pushnotificationios.md b/website/versioned_docs/version-0.19/pushnotificationios.md deleted file mode 100644 index 93536de0841..00000000000 --- a/website/versioned_docs/version-0.19/pushnotificationios.md +++ /dev/null @@ -1,264 +0,0 @@ ---- -id: version-0.19-pushnotificationios -title: PushNotificationIOS -original_id: pushnotificationios ---- - -Handle push notifications for your app, including permission handling and icon badge number. - -To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). - -[Manually link](linking-libraries-ios.md#manual-linking) the PushNotificationIOS library - -- Be sure to add the following to your `Header Search Paths`: `$(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS` -- Set the search to `recursive` - -Finally, to enable support for `notification` and `register` events you need to augment your AppDelegate. - -At the top of your `AppDelegate.m`: - -`#import "RCTPushNotificationManager.h"` - -And then in your AppDelegate implementation add the following: - -``` - // Required to register for notifications - - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings - { - [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings]; - } - // Required for the register event. - - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken - { - [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; - } - // Required for the notification event. - - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification - { - [RCTPushNotificationManager didReceiveRemoteNotification:notification]; - } -``` - -### Methods - -- [`presentLocalNotification`](pushnotificationios.md#presentlocalnotification) -- [`scheduleLocalNotification`](pushnotificationios.md#schedulelocalnotification) -- [`cancelAllLocalNotifications`](pushnotificationios.md#cancelalllocalnotifications) -- [`setApplicationIconBadgeNumber`](pushnotificationios.md#setapplicationiconbadgenumber) -- [`getApplicationIconBadgeNumber`](pushnotificationios.md#getapplicationiconbadgenumber) -- [`addEventListener`](pushnotificationios.md#addeventlistener) -- [`requestPermissions`](pushnotificationios.md#requestpermissions) -- [`abandonPermissions`](pushnotificationios.md#abandonpermissions) -- [`checkPermissions`](pushnotificationios.md#checkpermissions) -- [`removeEventListener`](pushnotificationios.md#removeeventlistener) -- [`popInitialNotification`](pushnotificationios.md#popinitialnotification) -- [`constructor`](pushnotificationios.md#constructor) -- [`getMessage`](pushnotificationios.md#getmessage) -- [`getSound`](pushnotificationios.md#getsound) -- [`getAlert`](pushnotificationios.md#getalert) -- [`getBadgeCount`](pushnotificationios.md#getbadgecount) -- [`getData`](pushnotificationios.md#getdata) - ---- - -# Reference - -## Methods - -### `presentLocalNotification()` - -```jsx -static presentLocalNotification(details) -``` - -Schedules the localNotification for immediate presentation. - -details is an object containing: - -- `alertBody` : The message displayed in the notification alert. -- `soundName` : The sound played when the notification is fired (optional). - ---- - -### `scheduleLocalNotification()` - -```jsx -static scheduleLocalNotification(details) -``` - -Schedules the localNotification for future presentation. - -details is an object containing: - -- `fireDate` : The date and time when the system should deliver the notification. -- `alertBody` : The message displayed in the notification alert. -- `soundName` : The sound played when the notification is fired (optional). - ---- - -### `cancelAllLocalNotifications()` - -```jsx -static cancelAllLocalNotifications() -``` - -Cancels all scheduled localNotifications - ---- - -### `setApplicationIconBadgeNumber()` - -```jsx -static setApplicationIconBadgeNumber(number) -``` - -Sets the badge number for the app icon on the home screen - ---- - -### `getApplicationIconBadgeNumber()` - -```jsx -static getApplicationIconBadgeNumber(callback) -``` - -Gets the current badge number for the app icon on the home screen - ---- - -### `addEventListener()` - -```jsx -static addEventListener(type, handler) -``` - -Attaches a listener to remote notification events while the app is running in the foreground or the background. - -Valid events are: - -- `notification` : Fired when a remote notification is received. The handler will be invoked with an instance of `PushNotificationIOS`. -- `register`: Fired when the user registers for remote notifications. The handler will be invoked with a hex string representing the deviceToken. - ---- - -### `requestPermissions()` - -```jsx -static requestPermissions(permissions?) -``` - -Requests notification permissions from iOS, prompting the user's dialog box. By default, it will request all notification permissions, but a subset of these can be requested by passing a map of requested permissions. The following permissions are supported: - -- `alert` -- `badge` -- `sound` - -If a map is provided to the method, only the permissions with truthy values will be requested. - ---- - -### `abandonPermissions()` - -```jsx -static abandonPermissions() -``` - -Unregister for all remote notifications received via Apple Push Notification service. - -You should call this method in rare circumstances only, such as when a new version of the app removes support for all types of remote notifications. Users can temporarily prevent apps from receiving remote notifications through the Notifications section of the Settings app. Apps unregistered through this method can always re-register. - ---- - -### `checkPermissions()` - -```jsx -static checkPermissions(callback) -``` - -See what push permissions are currently enabled. `callback` will be invoked with a `permissions` object: - -- `alert` :boolean -- `badge` :boolean -- `sound` :boolean - ---- - -### `removeEventListener()` - -```jsx -static removeEventListener(type, handler) -``` - -Removes the event listener. Do this in `componentWillUnmount` to prevent memory leaks - ---- - -### `popInitialNotification()` - -```jsx -static popInitialNotification() -``` - -An initial notification will be available if the app was cold-launched from a notification. - -The first caller of `popInitialNotification` will get the initial notification object, or `null`. Subsequent invocations will return null. - ---- - -### `constructor()` - -```jsx -constructor(nativeNotif); -``` - -You will never need to instantiate `PushNotificationIOS` yourself. Listening to the `notification` event and invoking `popInitialNotification` is sufficient - ---- - -### `getMessage()` - -```jsx -getMessage(); -``` - -An alias for `getAlert` to get the notification's main message string - ---- - -### `getSound()` - -```jsx -getSound(); -``` - -Gets the sound string from the `aps` object - ---- - -### `getAlert()` - -```jsx -getAlert(); -``` - -Gets the notification's main message from the `aps` object - ---- - -### `getBadgeCount()` - -```jsx -getBadgeCount(); -``` - -Gets the badge count number from the `aps` object - ---- - -### `getData()` - -```jsx -getData(); -``` - -Gets the data object on the notif diff --git a/website/versioned_docs/version-0.19/scrollview.md b/website/versioned_docs/version-0.19/scrollview.md deleted file mode 100644 index cd8fe6d5a0a..00000000000 --- a/website/versioned_docs/version-0.19/scrollview.md +++ /dev/null @@ -1,520 +0,0 @@ ---- -id: version-0.19-scrollview -title: ScrollView -original_id: scrollview ---- - -Component that wraps platform ScrollView while providing integration with touch locking "responder" system. - -Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer `{flex: 1}` down the view stack can lead to errors here, which the element inspector makes quick to debug. - -Doesn't yet support other contained responders from blocking this scroll view from becoming the responder. - -### Props - -- [View props...](view.md#props) - -* [`centerContent`](scrollview.md#centercontent) -* [`contentContainerStyle`](scrollview.md#contentcontainerstyle) -* [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) -* [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) -* [`onContentSizeChange`](scrollview.md#oncontentsizechange) -* [`onScroll`](scrollview.md#onscroll) -* [`refreshControl`](scrollview.md#refreshcontrol) -* [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) -* [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) -* [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) -* [`style`](scrollview.md#style) -* [`sendMomentumEvents`](scrollview.md#sendmomentumevents) -* [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) -* [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) -* [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) -* [`bounces`](scrollview.md#bounces) -* [`bouncesZoom`](scrollview.md#bounceszoom) -* [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) -* [`horizontal`](scrollview.md#horizontal) -* [`contentInset`](scrollview.md#contentinset) -* [`contentOffset`](scrollview.md#contentoffset) -* [`decelerationRate`](scrollview.md#decelerationrate) -* [`directionalLockEnabled`](scrollview.md#directionallockenabled) -* [`maximumZoomScale`](scrollview.md#maximumzoomscale) -* [`minimumZoomScale`](scrollview.md#minimumzoomscale) -* [`onRefreshStart`](scrollview.md#onrefreshstart) -* [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) -* [`pagingEnabled`](scrollview.md#pagingenabled) -* [`scrollEnabled`](scrollview.md#scrollenabled) -* [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) -* [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) -* [`scrollsToTop`](scrollview.md#scrollstotop) -* [`snapToAlignment`](scrollview.md#snaptoalignment) -* [`snapToInterval`](scrollview.md#snaptointerval) -* [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) -* [`zoomScale`](scrollview.md#zoomscale) - -### Methods - -- [`endRefreshing`](scrollview.md#endrefreshing) -- [`scrollTo`](scrollview.md#scrollto) -- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) -- [`handleScroll`](scrollview.md#handlescroll) - ---- - -# Reference - -## Props - -### `centerContent` - -When true, the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `contentContainerStyle` - -These styles will be applied to the scroll view content container which wraps all of the child views. Example: - -return ( ); ... var styles = StyleSheet.create({ contentContainer: { paddingVertical: 20 } }); - -| Type | Required | -| ------------------------------------ | -------- | -| StyleSheetPropType(View Style props) | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. -- 'interactive', the keyboard is dismissed interactively with the drag and moves in synchrony with the touch; dragging upwards cancels the dismissal. On android this is not supported and it will have the same behavior as 'none'. - -| Type | Required | -| -------------------------------------- | -------- | -| enum('none', 'interactive', 'on-drag') | No | - ---- - -### `keyboardShouldPersistTaps` - -When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the scroll view will not catch taps, and the keyboard will not dismiss automatically. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onContentSizeChange` - -Called when scrollable content view of the ScrollView changes. It's implemented using onLayout handler attached to the content container which this ScrollView renders. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onScroll` - -Fires at most once per frame during scrolling. The frequency of the events can be controlled using the `scrollEventThrottle` prop. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `refreshControl` - -A RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView. - -See [RefreshControl](refreshcontrol.md). - -| Type | Required | -| ------- | -------- | -| element | No | - ---- - -### `removeClippedSubviews` - -Experimental: When true, offscreen child views (whose `overflow` value is `hidden`) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsHorizontalScrollIndicator` - -When true, shows a horizontal scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsVerticalScrollIndicator` - -When true, shows a vertical scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Shadow Props...](shadow-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderRightColor`**: [color](colors.md) - -- **`backfaceVisibility`**: enum('visible', 'hidden') - -- **`borderBottomColor`**: [color](colors.md) - -- **`borderBottomLeftRadius`**: number - -- **`borderBottomRightRadius`**: number - -- **`borderBottomWidth`**: number - -- **`borderColor`**: [color](colors.md) - -- **`borderLeftColor`**: [color](colors.md) - -- **`borderLeftWidth`**: number - -- **`borderRadius`**: number - -- **`backgroundColor`**: [color](colors.md) - -- **`borderRightWidth`**: number - -- **`borderStyle`**: enum('solid', 'dotted', 'dashed') - -- **`borderTopColor`**: [color](colors.md) - -- **`borderTopLeftRadius`**: number - -- **`borderTopRightRadius`**: number - -- **`borderTopWidth`**: number - -- **`borderWidth`**: number - -- **`opacity`**: number - -- **`overflow`**: enum('visible', 'hidden') - -- **`elevation`**: number (_Android_) - - (Android-only) Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions. - ---- - -### `sendMomentumEvents` - -When true, momentum events will be sent from Android This is internal and set automatically by the framework if you have onMomentumScrollBegin or onMomentumScrollEnd set on your ScrollView - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `alwaysBounceHorizontal` - -When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself. The default value is true when `horizontal={true}` and false otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `alwaysBounceVertical` - -When true, the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself. The default value is false when `horizontal={true}` and true otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `automaticallyAdjustContentInsets` - -Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/ toolbar. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bounces` - -When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. When false, it disables all bouncing even if the `alwaysBounce*` props are true. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bouncesZoom` - -When true, gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture end, otherwise the zoom will not exceed the limits. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `canCancelContentTouches` - -When false, once tracking starts, won't try to drag if the touch moves. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `horizontal` - -When true, the scroll view's children are arranged horizontally in a row instead of vertically in a column. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `contentInset` - -The amount by which the scroll view content is inset from the edges of the scroll view. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `contentOffset` - -Used to manually set the starting scroll offset. The default value is `{x: 0, y: 0}`. - -| Type | Required | Platform | -| ------------- | -------- | -------- | -| PointPropType | No | iOS | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. Reasonable choices include - -- Normal: 0.998 (the default) -- Fast: 0.9 - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `directionalLockEnabled` - -When true, the ScrollView will try to lock to only vertical or horizontal scrolling while dragging. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `maximumZoomScale` - -The maximum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `minimumZoomScale` - -The minimum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `onRefreshStart` - -Deprecated - use `refreshControl` property instead. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `onScrollAnimationEnd` - -Called when a scrolling animation ends. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `pagingEnabled` - -When true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEnabled` - -When false, the content does not scroll. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEventThrottle` - -This controls how often the scroll event will be fired while scrolling (in events per seconds). A higher number yields better accuracy for code that is tracking the scroll position, but can lead to scroll performance problems due to the volume of information being send over the bridge. The default value is zero, which means the scroll event will be sent only once each time the view is scrolled. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `scrollIndicatorInsets` - -The amount by which the scroll view indicators are inset from the edges of the scroll view. This should normally be set to the same value as the `contentInset`. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `scrollsToTop` - -When true, the scroll view scrolls to top when the status bar is tapped. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `snapToAlignment` - -When `snapToInterval` is set, `snapToAlignment` will define the relationship of the the snapping to the scroll view. - -- `start` (the default) will align the snap at the left (horizontal) or top (vertical) -- `center` will align the snap in the center -- `end` will align the snap at the right (horizontal) or bottom (vertical) - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| enum('start', 'center', 'end') | No | iOS | - ---- - -### `snapToInterval` - -When set, causes the scroll view to stop at multiples of the value of `snapToInterval`. This can be used for paginating through children that have lengths smaller than the scroll view. Used in combination with `snapToAlignment`. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `stickyHeaderIndices` - -An array of child indices determining which children get docked to the top of the screen when scrolling. For example, passing `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction with `horizontal={true}`. - -| Type | Required | Platform | -| --------------- | -------- | -------- | -| array of number | No | iOS | - ---- - -### `zoomScale` - -The current scale of the scroll view content. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - -## Methods - -### `endRefreshing()` - -```jsx -endRefreshing(); -``` - ---- - -### `scrollTo()` - -```jsx -scrollTo(destY, destX, animated); -``` - ---- - -### `scrollWithoutAnimationTo()` - -```jsx -scrollWithoutAnimationTo(destY, destX); -``` - -Deprecated, do not use. - ---- - -### `handleScroll()` - -```jsx -handleScroll((e: Object)); -``` diff --git a/website/versioned_docs/version-0.19/stylesheet.md b/website/versioned_docs/version-0.19/stylesheet.md deleted file mode 100644 index 1706167b202..00000000000 --- a/website/versioned_docs/version-0.19/stylesheet.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: version-0.19-stylesheet -title: StyleSheet -original_id: stylesheet ---- - -A StyleSheet is an abstraction similar to CSS StyleSheets - -Create a new StyleSheet: - -``` -var styles = StyleSheet.create({ - container: { - borderRadius: 4, - borderWidth: 0.5, - borderColor: '#d6d7da', - }, - title: { - fontSize: 19, - fontWeight: 'bold', - }, - activeTitle: { - color: 'red', - }, -}); -``` - -Use a StyleSheet: - -``` - - - -``` - -Code quality: - -- By moving styles away from the render function, you're making the code easier to understand. -- Naming the styles is a good way to add meaning to the low level components in the render function. - -Performance: - -- Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time. -- It also allows to send the style only once through the bridge. All subsequent uses are going to refer an id (not implemented yet). - -### Methods - -- [`create`](stylesheet.md#create) - -### Properties - -- [`hairlineWidth`](stylesheet.md#hairlinewidth) -- [`flatten`](stylesheet.md#flatten) - ---- - -# Reference - -## Methods - -### `create()` - -```jsx -static create(obj) -``` - -Creates a StyleSheet style reference from the given object. - -## Properties - ---- diff --git a/website/versioned_docs/version-0.19/text-style-props.md b/website/versioned_docs/version-0.19/text-style-props.md deleted file mode 100644 index bc38d87796f..00000000000 --- a/website/versioned_docs/version-0.19/text-style-props.md +++ /dev/null @@ -1,160 +0,0 @@ ---- -id: version-0.19-text-style-props -title: Text Style Props -original_id: text-style-props ---- - -### Props - -- [`textShadowOffset`](text-style-props.md#textshadowoffset) -- [`color`](text-style-props.md#color) -- [`fontSize`](text-style-props.md#fontsize) -- [`fontStyle`](text-style-props.md#fontstyle) -- [`fontWeight`](text-style-props.md#fontweight) -- [`lineHeight`](text-style-props.md#lineheight) -- [`textAlign`](text-style-props.md#textalign) -- [`textShadowColor`](text-style-props.md#textshadowcolor) -- [`fontFamily`](text-style-props.md#fontfamily) -- [`textShadowRadius`](text-style-props.md#textshadowradius) -- [`textAlignVertical`](text-style-props.md#textalignvertical) -- [`letterSpacing`](text-style-props.md#letterspacing) -- [`textDecorationColor`](text-style-props.md#textdecorationcolor) -- [`textDecorationLine`](text-style-props.md#textdecorationline) -- [`textDecorationStyle`](text-style-props.md#textdecorationstyle) -- [`writingDirection`](text-style-props.md#writingdirection) - ---- - -# Reference - -## Props - -### `textShadowOffset` - -| Type | Required | -| -------------------------------------- | -------- | -| object: {width: number,height: number} | No | - ---- - -### `color` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `fontSize` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `fontStyle` - -| Type | Required | -| ------------------------ | -------- | -| enum('normal', 'italic') | No | - ---- - -### `fontWeight` - -Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen. - -| Type | Required | -| ------------------------------------------------------------------------------------- | -------- | -| enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') | No | - ---- - -### `lineHeight` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `textAlign` - -Specifies text alignment. The value 'justify' is only supported on iOS. - -| Type | Required | -| -------------------------------------------------- | -------- | -| enum('auto', 'left', 'right', 'center', 'justify') | No | - ---- - -### `textShadowColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `fontFamily` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `textShadowRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `textAlignVertical` - -| Type | Required | Platform | -| --------------------------------------- | -------- | -------- | -| enum('auto', 'top', 'bottom', 'center') | No | Android | - ---- - -### `letterSpacing` - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `textDecorationColor` - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | - ---- - -### `textDecorationLine` - -| Type | Required | Platform | -| ------------------------------------------------------------------- | -------- | -------- | -| enum('none', 'underline', 'line-through', 'underline line-through') | No | iOS | - ---- - -### `textDecorationStyle` - -| Type | Required | Platform | -| ------------------------------------------- | -------- | -------- | -| enum('solid', 'double', 'dotted', 'dashed') | No | iOS | - ---- - -### `writingDirection` - -| Type | Required | Platform | -| -------------------------- | -------- | -------- | -| enum('auto', 'ltr', 'rtl') | No | iOS | diff --git a/website/versioned_docs/version-0.19/text.md b/website/versioned_docs/version-0.19/text.md deleted file mode 100644 index b15f1a0cb10..00000000000 --- a/website/versioned_docs/version-0.19/text.md +++ /dev/null @@ -1,163 +0,0 @@ ---- -id: version-0.19-text -title: Text -original_id: text ---- - -A React component for displaying text which supports nesting, styling, and touch handling. In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines: - -``` -renderText: function() { - return ( - - - {this.state.titleText + '\n\n'} - - - {this.state.bodyText} - - - ); -}, -... -var styles = StyleSheet.create({ - baseText: { - fontFamily: 'Cochin', - }, - titleText: { - fontSize: 20, - fontWeight: 'bold', - }, -}; -``` - -### Props - -- [`accessible`](text.md#accessible) -- [`allowFontScaling`](text.md#allowfontscaling) -- [`numberOfLines`](text.md#numberoflines) -- [`onLayout`](text.md#onlayout) -- [`onPress`](text.md#onpress) -- [`style`](text.md#style) -- [`testID`](text.md#testid) -- [`suppressHighlighting`](text.md#suppresshighlighting) - ---- - -# Reference - -## Props - -### `accessible` - -| Type | Required | -| ---- | -------- | -| | No | - ---- - -### `allowFontScaling` - -Specifies should fonts scale to respect Text Size accessibility setting on iOS. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `numberOfLines` - -Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with - -`{nativeEvent: {layout: {x, y, width, height}}}` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPress` - -This function is called on press. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [View Style Props...](view-style-props.md#style) - -- **`textShadowOffset`**: object: {width: number,height: number} - -- **`color`**: [color](colors.md) - -- **`fontSize`**: number - -- **`fontStyle`**: enum('normal', 'italic') - -- **`fontWeight`**: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') - - Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen. - -- **`lineHeight`**: number - -- **`textAlign`**: enum('auto', 'left', 'right', 'center', 'justify') - - Specifies text alignment. The value 'justify' is only supported on iOS. - -- **`textShadowColor`**: [color](colors.md) - -- **`fontFamily`**: string - -- **`textShadowRadius`**: number - -- **`textAlignVertical`**: enum('auto', 'top', 'bottom', 'center') (_Android_) - -- **`letterSpacing`**: number (_iOS_) - -- **`textDecorationColor`**: [color](colors.md) (_iOS_) - -- **`textDecorationLine`**: enum('none', 'underline', 'line-through', 'underline line-through') (_iOS_) - -- **`textDecorationStyle`**: enum('solid', 'double', 'dotted', 'dashed') (_iOS_) - -- **`writingDirection`**: enum('auto', 'ltr', 'rtl') (_iOS_) - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `suppressHighlighting` - -When true, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | diff --git a/website/versioned_docs/version-0.19/textinput.md b/website/versioned_docs/version-0.19/textinput.md deleted file mode 100644 index 75c8734efae..00000000000 --- a/website/versioned_docs/version-0.19/textinput.md +++ /dev/null @@ -1,423 +0,0 @@ ---- -id: version-0.19-textinput -title: TextInput -original_id: textinput ---- - -A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. - -The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example: - -``` - this.setState({text})} - value={this.state.text} - /> -``` - -Note that some props are only available with `multiline={true/false}`: - -### Props - -- [View props...](view.md#props) - -* [`placeholder`](textinput.md#placeholder) -* [`autoCapitalize`](textinput.md#autocapitalize) -* [`autoFocus`](textinput.md#autofocus) -* [`defaultValue`](textinput.md#defaultvalue) -* [`editable`](textinput.md#editable) -* [`keyboardType`](textinput.md#keyboardtype) -* [`maxLength`](textinput.md#maxlength) -* [`multiline`](textinput.md#multiline) -* [`onBlur`](textinput.md#onblur) -* [`onChange`](textinput.md#onchange) -* [`onChangeText`](textinput.md#onchangetext) -* [`onEndEditing`](textinput.md#onendediting) -* [`onFocus`](textinput.md#onfocus) -* [`onLayout`](textinput.md#onlayout) -* [`onSelectionChange`](textinput.md#onselectionchange) -* [`onSubmitEditing`](textinput.md#onsubmitediting) -* [`autoCorrect`](textinput.md#autocorrect) -* [`placeholderTextColor`](textinput.md#placeholdertextcolor) -* [`secureTextEntry`](textinput.md#securetextentry) -* [`style`](textinput.md#style) -* [`testID`](textinput.md#testid) -* [`value`](textinput.md#value) -* [`numberOfLines`](textinput.md#numberoflines) -* [`underlineColorAndroid`](textinput.md#underlinecolorandroid) -* [`blurOnSubmit`](textinput.md#bluronsubmit) -* [`clearButtonMode`](textinput.md#clearbuttonmode) -* [`clearTextOnFocus`](textinput.md#cleartextonfocus) -* [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) -* [`keyboardAppearance`](textinput.md#keyboardappearance) -* [`onKeyPress`](textinput.md#onkeypress) -* [`returnKeyType`](textinput.md#returnkeytype) -* [`selectTextOnFocus`](textinput.md#selecttextonfocus) -* [`selectionState`](textinput.md#selectionstate) - -### Methods - -- [`isFocused`](textinput.md#isfocused) -- [`clear`](textinput.md#clear) - ---- - -# Reference - -## Props - -### `placeholder` - -The string that will be rendered before text input has been entered - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `autoCapitalize` - -Can tell TextInput to automatically capitalize certain characters. - -- characters: all characters, -- words: first letter of each word -- sentences: first letter of each sentence (default) -- none: don't auto capitalize anything - -| Type | Required | -| ------------------------------------------------ | -------- | -| enum('none', 'sentences', 'words', 'characters') | No | - ---- - -### `autoFocus` - -If true, focuses the input on componentDidMount. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `defaultValue` - -Provides an initial value that will change when the user starts typing. Useful for use-cases where you don't want to deal with listening to events and updating the value prop to keep the controlled state in sync. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `editable` - -If false, text is not editable. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `keyboardType` - -Determines which keyboard to open, e.g.`numeric`. - -The following values work across platforms: - -- default -- numeric -- email-address - -| Type | Required | -| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | - ---- - -### `maxLength` - -Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `multiline` - -If true, the text input can be multiple lines. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onBlur` - -Callback that is called when the text input is blurred - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChange` - -Callback that is called when the text input's text changes. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChangeText` - -Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onEndEditing` - -Callback that is called when text input ends. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onFocus` - -Callback that is called when the text input is focused - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{x, y, width, height}`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onSelectionChange` - -Callback that is called when the text input selection is changed - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onSubmitEditing` - -Callback that is called when the text input's submit button is pressed. Invalid if multiline={true} is specified. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `autoCorrect` - -If false, disables auto-correct. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `placeholderTextColor` - -The text color of the placeholder string - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `secureTextEntry` - -If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -Styles - -| Type | Required | -| --------------------- | -------- | -| [Text](text.md#style) | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `value` - -The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `numberOfLines` - -Sets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | Android | - ---- - -### `underlineColorAndroid` - -The color of the textInput underline. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `blurOnSubmit` - -If true, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting blurOnSubmit to true means that pressing return will blur the field and trigger the onSubmitEditing event instead of inserting a newline into the field. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `clearButtonMode` - -When the clear button should appear on the right side of the text view - -| Type | Required | Platform | -| ---------------------------------------------------------- | -------- | -------- | -| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | - ---- - -### `clearTextOnFocus` - -If true, clears the text field automatically when editing begins - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `enablesReturnKeyAutomatically` - -If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `keyboardAppearance` - -Determines the color of the keyboard. - -| Type | Required | Platform | -| -------------------------------- | -------- | -------- | -| enum('default', 'light', 'dark') | No | iOS | - ---- - -### `onKeyPress` - -Callback that is called when a key is pressed. Pressed key value is passed as an argument to the callback handler. Fires before onChange callbacks. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `returnKeyType` - -Determines how the return key should look. - -| Type | Required | Platform | -| ------------------------------------------------------------------------------------------------------------- | -------- | -------- | -| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | iOS | - ---- - -### `selectTextOnFocus` - -If true, all text will automatically be selected on focus - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `selectionState` - -See DocumentSelectionState.js, some state that is responsible for maintaining selection information for a document - -| Type | Required | Platform | -| ---------------------- | -------- | -------- | -| DocumentSelectionState | No | iOS | - -## Methods - -### `isFocused()` - -```jsx -isFocused(): -``` - ---- - -### `clear()` - -```jsx -clear(); -``` diff --git a/website/versioned_docs/version-0.19/touchablewithoutfeedback.md b/website/versioned_docs/version-0.19/touchablewithoutfeedback.md deleted file mode 100644 index c8395785ac5..00000000000 --- a/website/versioned_docs/version-0.19/touchablewithoutfeedback.md +++ /dev/null @@ -1,140 +0,0 @@ ---- -id: version-0.19-touchablewithoutfeedback -title: TouchableWithoutFeedback -original_id: touchablewithoutfeedback ---- - -Do not use unless you have a very good reason. All the elements that respond to press should have a visual feedback when touched. This is one of the primary reason a "web" app doesn't feel "native". - -> **NOTE**: TouchableWithoutFeedback supports only one child -> -> If you wish to have several child components, wrap them in a View. - -### Props - -- [`onLayout`](touchablewithoutfeedback.md#onlayout) -- [`accessibilityComponentType`](touchablewithoutfeedback.md#accessibilitycomponenttype) -- [`accessible`](touchablewithoutfeedback.md#accessible) -- [`delayLongPress`](touchablewithoutfeedback.md#delaylongpress) -- [`delayPressIn`](touchablewithoutfeedback.md#delaypressin) -- [`delayPressOut`](touchablewithoutfeedback.md#delaypressout) -- [`accessibilityTraits`](touchablewithoutfeedback.md#accessibilitytraits) -- [`onLongPress`](touchablewithoutfeedback.md#onlongpress) -- [`onPress`](touchablewithoutfeedback.md#onpress) -- [`onPressIn`](touchablewithoutfeedback.md#onpressin) -- [`onPressOut`](touchablewithoutfeedback.md#onpressout) -- [`pressRetentionOffset`](touchablewithoutfeedback.md#pressretentionoffset) - ---- - -# Reference - -## Props - -### `onLayout` - -Invoked on mount and layout changes with - -`{nativeEvent: {layout: {x, y, width, height}}}` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `accessibilityComponentType` - -| Type | Required | -| ------------------------------- | -------- | -| View.AccessibilityComponentType | No | - ---- - -### `accessible` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `delayLongPress` - -Delay in ms, from onPressIn, before onLongPress is called. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `delayPressIn` - -Delay in ms, from the start of the touch, before onPressIn is called. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `delayPressOut` - -Delay in ms, from the release of the touch, before onPressOut is called. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `accessibilityTraits` - -| Type | Required | -| ------------------------------------------------------------ | -------- | -| View.AccessibilityTraits, ,array of View.AccessibilityTraits | No | - ---- - -### `onLongPress` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPress` - -Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock). - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPressIn` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPressOut` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `pressRetentionOffset` - -When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations. - -| Type | Required | -| ------------------------------------------------------------------ | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | diff --git a/website/versioned_docs/version-0.19/view-style-props.md b/website/versioned_docs/version-0.19/view-style-props.md deleted file mode 100644 index 18686a64dc6..00000000000 --- a/website/versioned_docs/version-0.19/view-style-props.md +++ /dev/null @@ -1,203 +0,0 @@ ---- -id: version-0.19-view-style-props -title: View Style Props -original_id: view-style-props ---- - -### Props - -- [`borderRightColor`](view-style-props.md#borderrightcolor) -- [`backfaceVisibility`](view-style-props.md#backfacevisibility) -- [`borderBottomColor`](view-style-props.md#borderbottomcolor) -- [`borderBottomLeftRadius`](view-style-props.md#borderbottomleftradius) -- [`borderBottomRightRadius`](view-style-props.md#borderbottomrightradius) -- [`borderBottomWidth`](view-style-props.md#borderbottomwidth) -- [`borderColor`](view-style-props.md#bordercolor) -- [`borderLeftColor`](view-style-props.md#borderleftcolor) -- [`borderLeftWidth`](view-style-props.md#borderleftwidth) -- [`borderRadius`](view-style-props.md#borderradius) -- [`backgroundColor`](view-style-props.md#backgroundcolor) -- [`borderRightWidth`](view-style-props.md#borderrightwidth) -- [`borderStyle`](view-style-props.md#borderstyle) -- [`borderTopColor`](view-style-props.md#bordertopcolor) -- [`borderTopLeftRadius`](view-style-props.md#bordertopleftradius) -- [`borderTopRightRadius`](view-style-props.md#bordertoprightradius) -- [`borderTopWidth`](view-style-props.md#bordertopwidth) -- [`borderWidth`](view-style-props.md#borderwidth) -- [`opacity`](view-style-props.md#opacity) -- [`overflow`](view-style-props.md#overflow) -- [`elevation`](view-style-props.md#elevation) - ---- - -# Reference - -## Props - -### `borderRightColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `backfaceVisibility` - -| Type | Required | -| ------------------------- | -------- | -| enum('visible', 'hidden') | No | - ---- - -### `borderBottomColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderBottomLeftRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderBottomRightRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderBottomWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderLeftColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderLeftWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `backgroundColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderRightWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderStyle` - -| Type | Required | -| --------------------------------- | -------- | -| enum('solid', 'dotted', 'dashed') | No | - ---- - -### `borderTopColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderTopLeftRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderTopRightRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderTopWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `opacity` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `overflow` - -| Type | Required | -| ------------------------- | -------- | -| enum('visible', 'hidden') | No | - ---- - -### `elevation` - -(Android-only) Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | Android | diff --git a/website/versioned_docs/version-0.19/webview.md b/website/versioned_docs/version-0.19/webview.md deleted file mode 100644 index 91fc2edf76a..00000000000 --- a/website/versioned_docs/version-0.19/webview.md +++ /dev/null @@ -1,306 +0,0 @@ ---- -id: version-0.19-webview -title: WebView -original_id: webview ---- - -Renders a native WebView. - -### Props - -- [View props...](view.md#props) - -* [`renderLoading`](webview.md#renderloading) -* [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) -* [`html`](webview.md#html) -* [`injectedJavaScript`](webview.md#injectedjavascript) -* [`onError`](webview.md#onerror) -* [`onLoad`](webview.md#onload) -* [`onLoadEnd`](webview.md#onloadend) -* [`onLoadStart`](webview.md#onloadstart) -* [`onNavigationStateChange`](webview.md#onnavigationstatechange) -* [`renderError`](webview.md#rendererror) -* [`contentInset`](webview.md#contentinset) -* [`startInLoadingState`](webview.md#startinloadingstate) -* [`style`](webview.md#style) -* [`url`](webview.md#url) -* [`domStorageEnabled`](webview.md#domstorageenabled) -* [`javaScriptEnabled`](webview.md#javascriptenabled) -* [`allowsInlineMediaPlayback`](webview.md#allowsinlinemediaplayback) -* [`bounces`](webview.md#bounces) -* [`onShouldStartLoadWithRequest`](webview.md#onshouldstartloadwithrequest) -* [`scalesPageToFit`](webview.md#scalespagetofit) -* [`scrollEnabled`](webview.md#scrollenabled) - -### Methods - -- [`goForward`](webview.md#goforward) -- [`goBack`](webview.md#goback) -- [`reload`](webview.md#reload) -- [`updateNavigationState`](webview.md#updatenavigationstate) -- [`getWebViewHandle`](webview.md#getwebviewhandle) -- [`onLoadingStart`](webview.md#onloadingstart) -- [`onLoadingError`](webview.md#onloadingerror) -- [`onLoadingFinish`](webview.md#onloadingfinish) - ---- - -# Reference - -## Props - -### `renderLoading` - -Function that returns a loading indicator. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `automaticallyAdjustContentInsets` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `html` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `injectedJavaScript` - -Sets the JS to be injected when the webpage loads. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `onError` - -Invoked when load fails - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoad` - -Invoked when load finish - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadEnd` - -Invoked when load either succeeds or fails - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadStart` - -Invoked on load start - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onNavigationStateChange` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `renderError` - -Function that returns a view to show if there's an error. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `contentInset` - -| Type | Required | -| ------------------------------------------------------------------ | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | - ---- - -### `startInLoadingState` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `url` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `domStorageEnabled` - -Used on Android only, controls whether DOM Storage is enabled or not - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `javaScriptEnabled` - -Used on Android only, JS is enabled by default for WebView on iOS - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `allowsInlineMediaPlayback` - -Determines whether HTML5 videos play inline or use the native full-screen controller. default value `false` **NOTE** : "In order for video to play inline, not only does this property need to be set to true, but the video element in the HTML document must also include the webkit-playsinline attribute." - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bounces` - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `onShouldStartLoadWithRequest` - -Allows custom handling of any webview requests by a JS handler. Return true or false from this method to continue loading the request. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `scalesPageToFit` - -Sets whether the webpage scales to fit the view and the user can change the scale. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEnabled` - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - -## Methods - -### `goForward()` - -```jsx -goForward(); -``` - ---- - -### `goBack()` - -```jsx -goBack(); -``` - ---- - -### `reload()` - -```jsx -reload(); -``` - ---- - -### `updateNavigationState()` - -```jsx -updateNavigationState((event: Event)); -``` - -We return an event with a bunch of fields including: url, title, loading, canGoBack, canGoForward - ---- - -### `getWebViewHandle()` - -```jsx -getWebViewHandle(): -``` - ---- - -### `onLoadingStart()` - -```jsx -onLoadingStart((event: Event)); -``` - ---- - -### `onLoadingError()` - -```jsx -onLoadingError((event: Event)); -``` - ---- - -### `onLoadingFinish()` - -```jsx -onLoadingFinish((event: Event)); -``` diff --git a/website/versioned_docs/version-0.20/cameraroll.md b/website/versioned_docs/version-0.20/cameraroll.md deleted file mode 100644 index 1f726dd453c..00000000000 --- a/website/versioned_docs/version-0.20/cameraroll.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: version-0.20-cameraroll -title: CameraRoll -original_id: cameraroll ---- - -`CameraRoll` provides access to the local camera roll / gallery. - -### Methods - -- [`saveImageWithTag`](cameraroll.md#saveimagewithtag) -- [`getPhotos`](cameraroll.md#getphotos) - ---- - -# Reference - -## Methods - -### `saveImageWithTag()` - -```jsx -static saveImageWithTag(tag) -``` - -Saves the image to the camera roll / gallery. - -On Android, the tag is a local URI, such as `"file:///sdcard/img.png"`. - -On iOS, the tag can be one of the following: - -- local URI -- assets-library tag -- a tag not matching any of the above, which means the image data will be stored in memory (and consume memory as long as the process is alive) - -Returns a Promise which when resolved will be passed the new URI. - ---- - -### `getPhotos()` - -```jsx -static getPhotos(params) -``` - -Returns a Promise with photo identifier objects from the local camera roll of the device matching shape defined by `getPhotosReturnChecker`. - -@param {object} params See `getPhotosParamChecker`. - -Returns a Promise which when resolved will be of shape `getPhotosReturnChecker`. diff --git a/website/versioned_docs/version-0.20/clipboard.md b/website/versioned_docs/version-0.20/clipboard.md deleted file mode 100644 index c448adfec31..00000000000 --- a/website/versioned_docs/version-0.20/clipboard.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: version-0.20-clipboard -title: Clipboard -original_id: clipboard ---- - -`Clipboard` gives you an interface for setting and getting content from Clipboard on both Android and iOS - -### Methods - -- [`getString`](clipboard.md#getstring) -- [`setString`](clipboard.md#setstring) - ---- - -# Reference - -## Methods - -### `getString()` - -```jsx -static getString() -``` - -Get content of string type, this method returns a `Promise`, so you can use following code to get clipboard content - -```jsx -async _getContent() { - var content = await Clipboard.getString(); -} -``` - ---- - -### `setString()` - -```jsx -static setString(content) -``` - -Set content of string type. You can use following code to set clipboard content - -```jsx -_setContent() { - Clipboard.setString('hello world'); -} -``` - -@param the content to be stored in the clipboard. diff --git a/website/versioned_docs/version-0.20/datepickerandroid.md b/website/versioned_docs/version-0.20/datepickerandroid.md deleted file mode 100644 index 39c0ec46512..00000000000 --- a/website/versioned_docs/version-0.20/datepickerandroid.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: version-0.20-datepickerandroid -title: DatePickerAndroid -original_id: datepickerandroid ---- - -Opens the standard Android date picker dialog. - -### Example - -``` -try { - const {action, year, month, day} = await DatePickerAndroid.open({ - // Use `new Date()` for current date. - // May 25 2020. Month 0 is January. - date: new Date(2020, 4, 25) - }); - if (action !== DatePickerAndroid.dismissedAction) { - // Selected year, month (0-11), day - } -} catch ({code, message}) { - console.warn('Cannot open date picker', message); -} -``` - -### Methods - -- [`open`](datepickerandroid.md#open) -- [`dateSetAction`](datepickerandroid.md#datesetaction) -- [`dismissedAction`](datepickerandroid.md#dismissedaction) - ---- - -# Reference - -## Methods - -### `open()` - -```jsx -static open(options) -``` - -Opens the standard Android date picker dialog. - -The available keys for the `options` object are: - -- `date` (`Date` object or timestamp in milliseconds) - date to show by default -- `minDate` (`Date` or timestamp in milliseconds) - minimum date that can be selected -- `maxDate` (`Date` object or timestamp in milliseconds) - minimum date that can be selected - -Returns a Promise which will be invoked an object containing `action`, `year`, `month` (0-11), `day` if the user picked a date. If the user dismissed the dialog, the Promise will still be resolved with action being `DatePickerAndroid.dismissedAction` and all the other keys being undefined. **Always** check whether the `action` before reading the values. - -Note the native date picker dialog has some UI glitches on Android 4 and lower when using the `minDate` and `maxDate` options. - ---- - -### `dateSetAction()` - -```jsx -static dateSetAction() -``` - -A date has been selected. - ---- - -### `dismissedAction()` - -```jsx -static dismissedAction() -``` - -The dialog has been dismissed. diff --git a/website/versioned_docs/version-0.20/image-style-props.md b/website/versioned_docs/version-0.20/image-style-props.md deleted file mode 100644 index 282c0e8909e..00000000000 --- a/website/versioned_docs/version-0.20/image-style-props.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -id: version-0.20-image-style-props -title: Image Style Props -original_id: image-style-props ---- - -### Props - -- [`backfaceVisibility`](image-style-props.md#backfacevisibility) -- [`backgroundColor`](image-style-props.md#backgroundcolor) -- [`borderColor`](image-style-props.md#bordercolor) -- [`borderRadius`](image-style-props.md#borderradius) -- [`borderWidth`](image-style-props.md#borderwidth) -- [`opacity`](image-style-props.md#opacity) -- [`overflow`](image-style-props.md#overflow) -- [`resizeMode`](image-style-props.md#resizemode) -- [`overlayColor`](image-style-props.md#overlaycolor) -- [`tintColor`](image-style-props.md#tintcolor) - ---- - -# Reference - -## Props - -### `backfaceVisibility` - -| Type | Required | -| ------------------------- | -------- | -| enum('visible', 'hidden') | No | - ---- - -### `backgroundColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `opacity` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `overflow` - -| Type | Required | -| ------------------------- | -------- | -| enum('visible', 'hidden') | No | - ---- - -### `resizeMode` - -| Type | Required | -| ---------------------------- | -------- | -| Object.keys(ImageResizeMode) | No | - ---- - -### `overlayColor` - -When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners: - -- Certain resize modes, such as 'contain' -- Animated GIFs - -A typical way to use this prop is with images displayed on a solid background and setting the `overlayColor` to the same color as the background. - -For details of how this works under the hood, see http://frescolib.org/rounded-corners-and-circles.md - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `tintColor` - -iOS-Specific style to "tint" an image. Changes the color of all the non-transparent pixels to the tintColor. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | diff --git a/website/versioned_docs/version-0.20/image.md b/website/versioned_docs/version-0.20/image.md deleted file mode 100644 index d55516c5f97..00000000000 --- a/website/versioned_docs/version-0.20/image.md +++ /dev/null @@ -1,244 +0,0 @@ ---- -id: version-0.20-image -title: Image -original_id: image ---- - -A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. - -Example usage: - -``` -renderImages: function() { - return ( - - - - - ); -}, -``` - -### Props - -- [`testID`](image.md#testid) -- [`onLayout`](image.md#onlayout) -- [`onLoadEnd`](image.md#onloadend) -- [`onLoadStart`](image.md#onloadstart) -- [`resizeMode`](image.md#resizemode) -- [`source`](image.md#source) -- [`style`](image.md#style) -- [`onLoad`](image.md#onload) -- [`accessibilityLabel`](image.md#accessibilitylabel) -- [`accessible`](image.md#accessible) -- [`capInsets`](image.md#capinsets) -- [`defaultSource`](image.md#defaultsource) -- [`onError`](image.md#onerror) -- [`onProgress`](image.md#onprogress) - -### Methods - -- [`getSize`](image.md#getsize) - ---- - -# Reference - -## Props - -### `testID` - -A unique identifier for this element to be used in UI Automation testing scripts. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{nativeEvent: {layout: {x, y, width, height}}}`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadEnd` - -Invoked when load either succeeds or fails - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadStart` - -Invoked on load start - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `resizeMode` - -Determines how to resize the image when the frame doesn't match the raw image dimensions. - -'cover': Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding). - -'contain': Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). - -'stretch': Scale width and height independently, This may change the aspect ratio of the src. - -| Type | Required | -| ----------------------------------- | -------- | -| enum('cover', 'contain', 'stretch') | No | - ---- - -### `source` - -`uri` is a string representing the resource identifier for the image, which could be an http address, a local file path, or the name of a static image resource (which should be wrapped in the `require('./path/to/image.png')` function). - -| Type | Required | -| ------------------------------ | -------- | -| object: {uri: string}, ,number | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Shadow Props...](shadow-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`backfaceVisibility`**: enum('visible', 'hidden') - -- **`backgroundColor`**: [color](colors.md) - -- **`borderColor`**: [color](colors.md) - -- **`borderRadius`**: number - -- **`borderWidth`**: number - -- **`opacity`**: number - -- **`overflow`**: enum('visible', 'hidden') - -- **`resizeMode`**: Object.keys(ImageResizeMode) - -- **`overlayColor`**: string (_Android_) - - When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners: - - - Certain resize modes, such as 'contain' - - Animated GIFs - - A typical way to use this prop is with images displayed on a solid background and setting the `overlayColor` to the same color as the background. - - For details of how this works under the hood, see http://frescolib.org/rounded-corners-and-circles.md - -* **`tintColor`**: [color](colors.md) (_iOS_) - - iOS-Specific style to "tint" an image. Changes the color of all the non-transparent pixels to the tintColor. - ---- - -### `onLoad` - -Invoked when load completes successfully - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `accessibilityLabel` - -The text that's read by the screen reader when the user interacts with the image. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | iOS | - ---- - -### `accessible` - -When true, indicates the image is an accessibility element. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `capInsets` - -When the image is resized, the corners of the size specified by capInsets will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info on [Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets) - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `defaultSource` - -A static image to display while loading the image source. - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| object: {uri: string}, ,number | No | iOS | - ---- - -### `onError` - -Invoked on load error with `{nativeEvent: {error}}` - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `onProgress` - -Invoked on download progress with `{nativeEvent: {loaded, total}}` - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - -## Methods - -### `getSize()` - -```jsx -static getSize(uri: string, success: function, failure: function) -``` - -Retrieve the width and height (in pixels) of an image prior to displaying it. This method can fail if the image cannot be found, or fails to download. - -In order to retrieve the image dimensions, the image may first need to be loaded or downloaded, after which it will be cached. This means that in principle you could use this method to preload images, however it is not optimized for that purpose, and may in future be implemented in a way that does not fully load/download the image data. A proper, supported way to preload images will be provided as a separate API. diff --git a/website/versioned_docs/version-0.20/imagestore.md b/website/versioned_docs/version-0.20/imagestore.md deleted file mode 100644 index a29c98d0271..00000000000 --- a/website/versioned_docs/version-0.20/imagestore.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: version-0.20-imagestore -title: ImageStore -original_id: imagestore ---- - -### Methods - -- [`hasImageForTag`](imagestore.md#hasimagefortag) -- [`removeImageForTag`](imagestore.md#removeimagefortag) -- [`addImageFromBase64`](imagestore.md#addimagefrombase64) -- [`getBase64ForTag`](imagestore.md#getbase64fortag) - ---- - -# Reference - -## Methods - -### `hasImageForTag()` - -```jsx -static hasImageForTag(uri, callback) -``` - -Check if the ImageStore contains image data for the specified URI. @platform ios - ---- - -### `removeImageForTag()` - -```jsx -static removeImageForTag(uri) -``` - -Delete an image from the ImageStore. Images are stored in memory and must be manually removed when you are finished with them, otherwise they will continue to use up RAM until the app is terminated. It is safe to call `removeImageForTag()` without first calling `hasImageForTag()`, it will fail silently. @platform ios - ---- - -### `addImageFromBase64()` - -```jsx -static addImageFromBase64(base64ImageData, success, failure) -``` - -Stores a base64-encoded image in the ImageStore, and returns a URI that can be used to access or display the image later. Images are stored in memory only, and must be manually deleted when you are finished with them by calling `removeImageForTag()`. - -Note that it is very inefficient to transfer large quantities of binary data between JS and native code, so you should avoid calling this more than necessary. @platform ios - ---- - -### `getBase64ForTag()` - -```jsx -static getBase64ForTag(uri, success, failure) -``` - -Retrieves the base64-encoded data for an image in the ImageStore. If the specified URI does not match an image in the store, the failure callback will be called. - -Note that it is very inefficient to transfer large quantities of binary data between JS and native code, so you should avoid calling this more than necessary. To display an image in the ImageStore, you can pass the URI to an `` component; there is no need to retrieve the base64 data. diff --git a/website/versioned_docs/version-0.20/layout-props.md b/website/versioned_docs/version-0.20/layout-props.md deleted file mode 100644 index 2bd5fcbb97b..00000000000 --- a/website/versioned_docs/version-0.20/layout-props.md +++ /dev/null @@ -1,300 +0,0 @@ ---- -id: version-0.20-layout-props -title: Layout Props -original_id: layout-props ---- - -### Props - -- [`marginHorizontal`](layout-props.md#marginhorizontal) -- [`alignItems`](layout-props.md#alignitems) -- [`borderBottomWidth`](layout-props.md#borderbottomwidth) -- [`borderLeftWidth`](layout-props.md#borderleftwidth) -- [`borderRightWidth`](layout-props.md#borderrightwidth) -- [`borderTopWidth`](layout-props.md#bordertopwidth) -- [`borderWidth`](layout-props.md#borderwidth) -- [`bottom`](layout-props.md#bottom) -- [`flex`](layout-props.md#flex) -- [`flexDirection`](layout-props.md#flexdirection) -- [`flexWrap`](layout-props.md#flexwrap) -- [`height`](layout-props.md#height) -- [`justifyContent`](layout-props.md#justifycontent) -- [`left`](layout-props.md#left) -- [`margin`](layout-props.md#margin) -- [`marginBottom`](layout-props.md#marginbottom) -- [`alignSelf`](layout-props.md#alignself) -- [`marginLeft`](layout-props.md#marginleft) -- [`marginRight`](layout-props.md#marginright) -- [`marginTop`](layout-props.md#margintop) -- [`marginVertical`](layout-props.md#marginvertical) -- [`padding`](layout-props.md#padding) -- [`paddingBottom`](layout-props.md#paddingbottom) -- [`paddingHorizontal`](layout-props.md#paddinghorizontal) -- [`paddingLeft`](layout-props.md#paddingleft) -- [`paddingRight`](layout-props.md#paddingright) -- [`paddingTop`](layout-props.md#paddingtop) -- [`paddingVertical`](layout-props.md#paddingvertical) -- [`position`](layout-props.md#position) -- [`right`](layout-props.md#right) -- [`top`](layout-props.md#top) -- [`width`](layout-props.md#width) - ---- - -# Reference - -## Props - -### `marginHorizontal` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `alignItems` - -| Type | Required | -| --------------------------------------------------- | -------- | -| enum('flex-start', 'flex-end', 'center', 'stretch') | No | - ---- - -### `borderBottomWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderLeftWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderRightWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderTopWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `bottom` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `flex` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `flexDirection` - -| Type | Required | -| --------------------- | -------- | -| enum('row', 'column') | No | - ---- - -### `flexWrap` - -| Type | Required | -| ---------------------- | -------- | -| enum('wrap', 'nowrap') | No | - ---- - -### `height` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `justifyContent` - -| Type | Required | -| ------------------------------------------------------------------------- | -------- | -| enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') | No | - ---- - -### `left` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `margin` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `marginBottom` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `alignSelf` - -| Type | Required | -| ----------------------------------------------------------- | -------- | -| enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') | No | - ---- - -### `marginLeft` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `marginRight` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `marginTop` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `marginVertical` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `padding` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `paddingBottom` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `paddingHorizontal` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `paddingLeft` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `paddingRight` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `paddingTop` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `paddingVertical` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `position` - -| Type | Required | -| ---------------------------- | -------- | -| enum('absolute', 'relative') | No | - ---- - -### `right` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `top` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `width` - -| Type | Required | -| ------ | -------- | -| number | No | diff --git a/website/versioned_docs/version-0.20/linking.md b/website/versioned_docs/version-0.20/linking.md deleted file mode 100644 index 60dc2322b33..00000000000 --- a/website/versioned_docs/version-0.20/linking.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: version-0.20-linking -title: Linking -original_id: linking ---- - -`Linking` gives you a general interface to interact with both incoming and outgoing app links. - -### Basic Usage - -#### Handling deep links - -If your app was launched from an external url registered to your app you can access and handle it from any component you want with - -``` -componentDidMount() { - var url = Linking.getInitialURL().then(url) => { - if (url) { - console.log('Initial url is: ' + url); - } - }).catch(err => console.error('An error occurred', err)); -} -``` - -NOTE: For instructions on how to add support for deep linking on Android, refer [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters). - -NOTE: For iOS, in case you also want to listen to incoming app links during your app's execution you'll need to add the following lines to you `*AppDelegate.m`: - -``` -- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url - sourceApplication:(NSString *)sourceApplication annotation:(id)annotation -{ - return [LinkingManager application:application openURL:url - sourceApplication:sourceApplication annotation:annotation]; -} - -// Only if your app is using [Universal Links](https://developer.apple.com/library/prerelease/ios/documentation/General/Conceptual/AppSearch/UniversalLinks.html). -- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity - restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler -{ - return [LinkingManager application:application - continueUserActivity:userActivity - restorationHandler:restorationHandler]; -} -``` - -And then on your React component you'll be able to listen to the events on `Linking` as follows - -``` -componentDidMount() { - Linking.addEventListener('url', this._handleOpenURL); -}, -componentWillUnmount() { - Linking.removeEventListener('url', this._handleOpenURL); -}, -_handleOpenURL(event) { - console.log(event.url); -} -``` - -Note that this is only supported on iOS. - -#### Opening external links - -To start the corresponding activity for a link (web URL, email, contact etc.), call - -``` -Linking.openURL(url).catch(err => console.error('An error occurred', err)); -``` - -If you want to check if any installed app can handle a given URL beforehand you can call - -``` -Linking.canOpenURL(url).then(supported => { - if (!supported) { - console.log('Can\'t handle url: ' + url); - } else { - return Linking.openURL(url); - } -}).catch(err => console.error('An error occurred', err)); -``` - -### Methods - -- [`addEventListener`](linking.md#addeventlistener) -- [`removeEventListener`](linking.md#removeeventlistener) -- [`openURL`](linking.md#openurl) -- [`canOpenURL`](linking.md#canopenurl) -- [`getInitialURL`](linking.md#getinitialurl) - ---- - -# Reference - -## Methods - -### `addEventListener()` - -```jsx -static addEventListener(type, handler) -``` - -Add a handler to Linking changes by listening to the `url` event type and providing the handler - -@platform ios - ---- - -### `removeEventListener()` - -```jsx -static removeEventListener(type, handler) -``` - -Remove a handler by passing the `url` event type and the handler - -@platform ios - ---- - -### `openURL()` - -```jsx -static openURL(url) -``` - -Try to open the given `url` with any of the installed apps. - -You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386"), a contact, or any other URL that can be opened with the installed apps. - -NOTE: This method will fail if the system doesn't know how to open the specified URL. If you're passing in a non-http(s) URL, it's best to check {@code canOpenURL} first. - -NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly! - ---- - -### `canOpenURL()` - -```jsx -static canOpenURL(url) -``` - -Determine whether or not an installed app can handle a given URL. - -NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly! - -NOTE: As of iOS 9, your app needs to provide the `LSApplicationQueriesSchemes` key inside `Info.plist`. - -@param URL the URL to open - ---- - -### `getInitialURL()` - -```jsx -static getInitialURL() -``` - -If the app launch was triggered by an app link with, it will give the link url, otherwise it will give `null` - -NOTE: To support deep linking on Android, refer http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents diff --git a/website/versioned_docs/version-0.20/picker.md b/website/versioned_docs/version-0.20/picker.md deleted file mode 100644 index b797395022a..00000000000 --- a/website/versioned_docs/version-0.20/picker.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: version-0.20-picker -title: Picker -original_id: picker ---- - -Renders the native picker component on Android and iOS. Example: - - this.setState({language: lang})}> - - - - -### Props - -- [View props...](view.md#props) - -* [`onValueChange`](picker.md#onvaluechange) -* [`selectedValue`](picker.md#selectedvalue) -* [`style`](picker.md#style) -* [`testID`](picker.md#testid) -* [`enabled`](picker.md#enabled) -* [`mode`](picker.md#mode) -* [`prompt`](picker.md#prompt) -* [`itemStyle`](picker.md#itemstyle) - ---- - -# Reference - -## Props - -### `onValueChange` - -Callback for when an item is selected. This is called with the following parameters: - -- `itemValue`: the `value` prop of the item that was selected -- `itemPosition`: the index of the selected item in this picker - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `selectedValue` - -Value matching value of one of the items. Can be a string or an integer. - -| Type | Required | -| ---- | -------- | -| any | No | - ---- - -### `style` - -| Type | Required | -| --------------- | -------- | -| pickerStyleType | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `enabled` - -If set to false, the picker will be disabled, i.e. the user will not be able to make a selection. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `mode` - -On Android, specifies how to display the selection items when the user taps on the picker: - -- 'dialog': Show a modal dialog. This is the default. -- 'dropdown': Shows a dropdown anchored to the picker view - -| Type | Required | Platform | -| -------------------------- | -------- | -------- | -| enum('dialog', 'dropdown') | No | Android | - ---- - -### `prompt` - -Prompt string for this picker, used on Android in dialog mode as the title of the dialog. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `itemStyle` - -Style to apply to each of the item labels. - -| Type | Required | Platform | -| ---------------------------------- | -------- | -------- | -| [text styles](text-style-props.md) | No | iOS | diff --git a/website/versioned_docs/version-0.20/refreshcontrol.md b/website/versioned_docs/version-0.20/refreshcontrol.md deleted file mode 100644 index b2ffc59fd0a..00000000000 --- a/website/versioned_docs/version-0.20/refreshcontrol.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: version-0.20-refreshcontrol -title: RefreshControl -original_id: refreshcontrol ---- - -This component is used inside a ScrollView to add pull to refresh functionality. When the ScrollView is at `scrollY: 0`, swiping down triggers an `onRefresh` event. - -### Props - -- [View props...](view.md#props) - -* [`onRefresh`](refreshcontrol.md#onrefresh) -* [`refreshing`](refreshcontrol.md#refreshing) -* [`colors`](refreshcontrol.md#colors) -* [`enabled`](refreshcontrol.md#enabled) -* [`progressBackgroundColor`](refreshcontrol.md#progressbackgroundcolor) -* [`size`](refreshcontrol.md#size) -* [`tintColor`](refreshcontrol.md#tintcolor) -* [`title`](refreshcontrol.md#title) - ---- - -# Reference - -## Props - -### `onRefresh` - -Called when the view starts refreshing. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `refreshing` - -Whether the view should be indicating an active refresh. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `colors` - -The colors (at least one) that will be used to draw the refresh indicator. - -| Type | Required | Platform | -| --------------------------- | -------- | -------- | -| array of [color](colors.md) | No | Android | - ---- - -### `enabled` - -Whether the pull to refresh functionality is enabled. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `progressBackgroundColor` - -The background color of the refresh indicator. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `size` - -Size of the refresh indicator, see RefreshControl.SIZE. - -| Type | Required | Platform | -| -------------------------------- | -------- | -------- | -| RefreshLayoutConsts.SIZE.DEFAULT | No | Android | - ---- - -### `tintColor` - -The color of the refresh indicator. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | - ---- - -### `title` - -The title displayed under the refresh indicator. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | iOS | diff --git a/website/versioned_docs/version-0.20/scrollview.md b/website/versioned_docs/version-0.20/scrollview.md deleted file mode 100644 index f9823e05856..00000000000 --- a/website/versioned_docs/version-0.20/scrollview.md +++ /dev/null @@ -1,548 +0,0 @@ ---- -id: version-0.20-scrollview -title: ScrollView -original_id: scrollview ---- - -Component that wraps platform ScrollView while providing integration with touch locking "responder" system. - -Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer `{flex: 1}` down the view stack can lead to errors here, which the element inspector makes quick to debug. - -Doesn't yet support other contained responders from blocking this scroll view from becoming the responder. - -### Props - -- [View props...](view.md#props) - -* [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) -* [`contentContainerStyle`](scrollview.md#contentcontainerstyle) -* [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) -* [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) -* [`onContentSizeChange`](scrollview.md#oncontentsizechange) -* [`onScroll`](scrollview.md#onscroll) -* [`refreshControl`](scrollview.md#refreshcontrol) -* [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) -* [`scrollEnabled`](scrollview.md#scrollenabled) -* [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) -* [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) -* [`style`](scrollview.md#style) -* [`sendMomentumEvents`](scrollview.md#sendmomentumevents) -* [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) -* [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) -* [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) -* [`bounces`](scrollview.md#bounces) -* [`bouncesZoom`](scrollview.md#bounceszoom) -* [`horizontal`](scrollview.md#horizontal) -* [`centerContent`](scrollview.md#centercontent) -* [`contentInset`](scrollview.md#contentinset) -* [`contentOffset`](scrollview.md#contentoffset) -* [`decelerationRate`](scrollview.md#decelerationrate) -* [`directionalLockEnabled`](scrollview.md#directionallockenabled) -* [`indicatorStyle`](scrollview.md#indicatorstyle) -* [`maximumZoomScale`](scrollview.md#maximumzoomscale) -* [`minimumZoomScale`](scrollview.md#minimumzoomscale) -* [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) -* [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) -* [`pagingEnabled`](scrollview.md#pagingenabled) -* [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) -* [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) -* [`scrollsToTop`](scrollview.md#scrollstotop) -* [`snapToAlignment`](scrollview.md#snaptoalignment) -* [`snapToInterval`](scrollview.md#snaptointerval) -* [`zoomScale`](scrollview.md#zoomscale) -* [`onRefreshStart`](scrollview.md#onrefreshstart) - -### Methods - -- [`endRefreshing`](scrollview.md#endrefreshing) -- [`scrollTo`](scrollview.md#scrollto) -- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) -- [`handleScroll`](scrollview.md#handlescroll) - ---- - -# Reference - -## Props - -### `canCancelContentTouches` - -When false, once tracking starts, won't try to drag if the touch moves. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `contentContainerStyle` - -These styles will be applied to the scroll view content container which wraps all of the child views. Example: - -return ( ); ... var styles = StyleSheet.create({ contentContainer: { paddingVertical: 20 } }); - -| Type | Required | -| ------------------------------------ | -------- | -| StyleSheetPropType(View Style props) | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. -- 'interactive', the keyboard is dismissed interactively with the drag and moves in synchrony with the touch; dragging upwards cancels the dismissal. On android this is not supported and it will have the same behavior as 'none'. - -| Type | Required | -| -------------------------------------- | -------- | -| enum('none', 'interactive', 'on-drag') | No | - ---- - -### `keyboardShouldPersistTaps` - -When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the scroll view will not catch taps, and the keyboard will not dismiss automatically. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onContentSizeChange` - -Called when scrollable content view of the ScrollView changes. It's implemented using onLayout handler attached to the content container which this ScrollView renders. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onScroll` - -Fires at most once per frame during scrolling. The frequency of the events can be controlled using the `scrollEventThrottle` prop. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `refreshControl` - -A RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView. - -See [RefreshControl](refreshcontrol.md). - -| Type | Required | -| ------- | -------- | -| element | No | - ---- - -### `removeClippedSubviews` - -Experimental: When true, offscreen child views (whose `overflow` value is `hidden`) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `scrollEnabled` - -When false, the content does not scroll. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsHorizontalScrollIndicator` - -When true, shows a horizontal scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsVerticalScrollIndicator` - -When true, shows a vertical scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Shadow Props...](shadow-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderRightColor`**: [color](colors.md) - -- **`backfaceVisibility`**: enum('visible', 'hidden') - -- **`borderBottomColor`**: [color](colors.md) - -- **`borderBottomLeftRadius`**: number - -- **`borderBottomRightRadius`**: number - -- **`borderBottomWidth`**: number - -- **`borderColor`**: [color](colors.md) - -- **`borderLeftColor`**: [color](colors.md) - -- **`borderLeftWidth`**: number - -- **`borderRadius`**: number - -- **`backgroundColor`**: [color](colors.md) - -- **`borderRightWidth`**: number - -- **`borderStyle`**: enum('solid', 'dotted', 'dashed') - -- **`borderTopColor`**: [color](colors.md) - -- **`borderTopLeftRadius`**: number - -- **`borderTopRightRadius`**: number - -- **`borderTopWidth`**: number - -- **`borderWidth`**: number - -- **`opacity`**: number - -- **`overflow`**: enum('visible', 'hidden') - -- **`elevation`**: number (_Android_) - - (Android-only) Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions. - ---- - -### `sendMomentumEvents` - -When true, momentum events will be sent from Android This is internal and set automatically by the framework if you have onMomentumScrollBegin or onMomentumScrollEnd set on your ScrollView - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `alwaysBounceHorizontal` - -When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself. The default value is true when `horizontal={true}` and false otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `alwaysBounceVertical` - -When true, the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself. The default value is false when `horizontal={true}` and true otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `automaticallyAdjustContentInsets` - -Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/ toolbar. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bounces` - -When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. When false, it disables all bouncing even if the `alwaysBounce*` props are true. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bouncesZoom` - -When true, gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture end, otherwise the zoom will not exceed the limits. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `horizontal` - -When true, the scroll view's children are arranged horizontally in a row instead of vertically in a column. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `centerContent` - -When true, the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `contentInset` - -The amount by which the scroll view content is inset from the edges of the scroll view. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `contentOffset` - -Used to manually set the starting scroll offset. The default value is `{x: 0, y: 0}`. - -| Type | Required | Platform | -| ------------- | -------- | -------- | -| PointPropType | No | iOS | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use string shortcuts `"normal"` and `"fast"` which match the underlying iOS settings for `UIScrollViewDecelerationRateNormal` and `UIScrollViewDecelerationRateFast` respectively. - -- Normal: 0.998 (the default) -- Fast: 0.9 - -| Type | Required | Platform | -| ------------------------------- | -------- | -------- | -| enum('fast', 'normal'), ,number | No | iOS | - ---- - -### `directionalLockEnabled` - -When true, the ScrollView will try to lock to only vertical or horizontal scrolling while dragging. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `indicatorStyle` - -The style of the scroll indicators. - -- `default` (the default), same as `black`. - -- `black`, scroll indicator is black. This style is good against a white content background. - -- `white`, scroll indicator is white. This style is good against a black content background. - -| Type | Required | Platform | -| --------------------------------- | -------- | -------- | -| enum('default', 'black', 'white') | No | iOS | - ---- - -### `maximumZoomScale` - -The maximum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `minimumZoomScale` - -The minimum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `stickyHeaderIndices` - -An array of child indices determining which children get docked to the top of the screen when scrolling. For example, passing `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction with `horizontal={true}`. - -| Type | Required | Platform | -| --------------- | -------- | -------- | -| array of number | No | iOS | - ---- - -### `onScrollAnimationEnd` - -Called when a scrolling animation ends. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `pagingEnabled` - -When true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEventThrottle` - -This controls how often the scroll event will be fired while scrolling (in events per seconds). A higher number yields better accuracy for code that is tracking the scroll position, but can lead to scroll performance problems due to the volume of information being send over the bridge. The default value is zero, which means the scroll event will be sent only once each time the view is scrolled. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `scrollIndicatorInsets` - -The amount by which the scroll view indicators are inset from the edges of the scroll view. This should normally be set to the same value as the `contentInset`. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `scrollsToTop` - -When true, the scroll view scrolls to top when the status bar is tapped. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `snapToAlignment` - -When `snapToInterval` is set, `snapToAlignment` will define the relationship of the the snapping to the scroll view. - -- `start` (the default) will align the snap at the left (horizontal) or top (vertical) -- `center` will align the snap in the center -- `end` will align the snap at the right (horizontal) or bottom (vertical) - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| enum('start', 'center', 'end') | No | iOS | - ---- - -### `snapToInterval` - -When set, causes the scroll view to stop at multiples of the value of `snapToInterval`. This can be used for paginating through children that have lengths smaller than the scroll view. Used in combination with `snapToAlignment`. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `zoomScale` - -The current scale of the scroll view content. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `onRefreshStart` - -**Deprecated.** Use the `refreshControl` prop instead. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - -## Methods - -### `endRefreshing()` - -```jsx -endRefreshing(); -``` - ---- - -### `scrollTo()` - -```jsx -scrollTo( - ([y]: number), - object, - ([x]: number), - ([animated]: boolean) -); -``` - -Scrolls to a given x, y offset, either immediately or with a smooth animation. Syntax: - -scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true}) - -Note: The weird argument signature is due to the fact that, for historical reasons, the function also accepts separate arguments as as alternative to the options object. This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED. - ---- - -### `scrollWithoutAnimationTo()` - -```jsx -scrollWithoutAnimationTo(y, x); -``` - -Deprecated, do not use. - ---- - -### `handleScroll()` - -```jsx -handleScroll((e: Object)); -``` diff --git a/website/versioned_docs/version-0.20/statusbar.md b/website/versioned_docs/version-0.20/statusbar.md deleted file mode 100644 index bafeaf747a7..00000000000 --- a/website/versioned_docs/version-0.20/statusbar.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -id: version-0.20-statusbar -title: StatusBar -original_id: statusbar ---- - -Component to control the app status bar. - -### Usage with Navigator - -It is possible to have multiple `StatusBar` components mounted at the same time. The props will be merged in the order the `StatusBar` components were mounted. One use case is to specify status bar styles per route using `Navigator`. - -``` - - - - - - } - /> - -``` - -### Props - -- [`animated`](statusbar.md#animated) -- [`hidden`](statusbar.md#hidden) -- [`backgroundColor`](statusbar.md#backgroundcolor) -- [`translucent`](statusbar.md#translucent) -- [`barStyle`](statusbar.md#barstyle) -- [`networkActivityIndicatorVisible`](statusbar.md#networkactivityindicatorvisible) -- [`showHideTransition`](statusbar.md#showhidetransition) - ---- - -# Reference - -## Props - -### `animated` - -If the transition between status bar property changes should be animated. Supported for backgroundColor, barStyle and hidden. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `hidden` - -If the status bar is hidden. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `backgroundColor` - -The background color of the status bar. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `translucent` - -If the status bar is translucent. When translucent is set to true, the app will draw under the status bar. This is useful when using a semi transparent status bar color. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `barStyle` - -Sets the color of the status bar text. - -| Type | Required | Platform | -| -------------------------------- | -------- | -------- | -| enum('default', 'light-content') | No | iOS | - ---- - -### `networkActivityIndicatorVisible` - -If the network activity indicator should be visible. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `showHideTransition` - -The transition effect when showing and hiding the status bar using the `hidden` prop. Defaults to 'fade'. - -| Type | Required | Platform | -| --------------------- | -------- | -------- | -| enum('fade', 'slide') | No | iOS | diff --git a/website/versioned_docs/version-0.20/text.md b/website/versioned_docs/version-0.20/text.md deleted file mode 100644 index 958448c6acd..00000000000 --- a/website/versioned_docs/version-0.20/text.md +++ /dev/null @@ -1,163 +0,0 @@ ---- -id: version-0.20-text -title: Text -original_id: text ---- - -A React component for displaying text which supports nesting, styling, and touch handling. In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines: - -``` -renderText: function() { - return ( - - - {this.state.titleText + '\n\n'} - - - {this.state.bodyText} - - - ); -}, -... -var styles = StyleSheet.create({ - baseText: { - fontFamily: 'Cochin', - }, - titleText: { - fontSize: 20, - fontWeight: 'bold', - }, -}; -``` - -### Props - -- [`accessible`](text.md#accessible) -- [`numberOfLines`](text.md#numberoflines) -- [`onLayout`](text.md#onlayout) -- [`onPress`](text.md#onpress) -- [`style`](text.md#style) -- [`testID`](text.md#testid) -- [`allowFontScaling`](text.md#allowfontscaling) -- [`suppressHighlighting`](text.md#suppresshighlighting) - ---- - -# Reference - -## Props - -### `accessible` - -| Type | Required | -| ---- | -------- | -| | No | - ---- - -### `numberOfLines` - -Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with - -`{nativeEvent: {layout: {x, y, width, height}}}` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPress` - -This function is called on press. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [View Style Props...](view-style-props.md#style) - -- **`textShadowOffset`**: object: {width: number,height: number} - -- **`color`**: [color](colors.md) - -- **`fontSize`**: number - -- **`fontStyle`**: enum('normal', 'italic') - -- **`fontWeight`**: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') - - Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen. - -- **`lineHeight`**: number - -- **`textAlign`**: enum('auto', 'left', 'right', 'center', 'justify') - - Specifies text alignment. The value 'justify' is only supported on iOS. - -- **`textShadowColor`**: [color](colors.md) - -- **`fontFamily`**: string - -- **`textShadowRadius`**: number - -- **`textAlignVertical`**: enum('auto', 'top', 'bottom', 'center') (_Android_) - -- **`letterSpacing`**: number (_iOS_) - -- **`textDecorationColor`**: [color](colors.md) (_iOS_) - -- **`textDecorationLine`**: enum('none', 'underline', 'line-through', 'underline line-through') (_iOS_) - -- **`textDecorationStyle`**: enum('solid', 'double', 'dotted', 'dashed') (_iOS_) - -- **`writingDirection`**: enum('auto', 'ltr', 'rtl') (_iOS_) - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `allowFontScaling` - -Specifies should fonts scale to respect Text Size accessibility setting on iOS. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `suppressHighlighting` - -When true, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | diff --git a/website/versioned_docs/version-0.20/textinput.md b/website/versioned_docs/version-0.20/textinput.md deleted file mode 100644 index 67f4c562455..00000000000 --- a/website/versioned_docs/version-0.20/textinput.md +++ /dev/null @@ -1,423 +0,0 @@ ---- -id: version-0.20-textinput -title: TextInput -original_id: textinput ---- - -A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. - -One use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example: - -``` - this.setState({text})} - value={this.state.text} - /> -``` - -Note that some props are only available with `multiline={true/false}`: - -### Props - -- [View props...](view.md#props) - -* [`placeholder`](textinput.md#placeholder) -* [`autoCapitalize`](textinput.md#autocapitalize) -* [`autoFocus`](textinput.md#autofocus) -* [`defaultValue`](textinput.md#defaultvalue) -* [`editable`](textinput.md#editable) -* [`keyboardType`](textinput.md#keyboardtype) -* [`maxLength`](textinput.md#maxlength) -* [`multiline`](textinput.md#multiline) -* [`onBlur`](textinput.md#onblur) -* [`onChange`](textinput.md#onchange) -* [`onChangeText`](textinput.md#onchangetext) -* [`onEndEditing`](textinput.md#onendediting) -* [`onFocus`](textinput.md#onfocus) -* [`onLayout`](textinput.md#onlayout) -* [`onSelectionChange`](textinput.md#onselectionchange) -* [`onSubmitEditing`](textinput.md#onsubmitediting) -* [`autoCorrect`](textinput.md#autocorrect) -* [`placeholderTextColor`](textinput.md#placeholdertextcolor) -* [`secureTextEntry`](textinput.md#securetextentry) -* [`selectionColor`](textinput.md#selectioncolor) -* [`style`](textinput.md#style) -* [`value`](textinput.md#value) -* [`numberOfLines`](textinput.md#numberoflines) -* [`underlineColorAndroid`](textinput.md#underlinecolorandroid) -* [`blurOnSubmit`](textinput.md#bluronsubmit) -* [`clearButtonMode`](textinput.md#clearbuttonmode) -* [`clearTextOnFocus`](textinput.md#cleartextonfocus) -* [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) -* [`keyboardAppearance`](textinput.md#keyboardappearance) -* [`onKeyPress`](textinput.md#onkeypress) -* [`returnKeyType`](textinput.md#returnkeytype) -* [`selectTextOnFocus`](textinput.md#selecttextonfocus) -* [`selectionState`](textinput.md#selectionstate) - -### Methods - -- [`isFocused`](textinput.md#isfocused) -- [`clear`](textinput.md#clear) - ---- - -# Reference - -## Props - -### `placeholder` - -The string that will be rendered before text input has been entered - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `autoCapitalize` - -Can tell TextInput to automatically capitalize certain characters. - -- characters: all characters, -- words: first letter of each word -- sentences: first letter of each sentence (default) -- none: don't auto capitalize anything - -| Type | Required | -| ------------------------------------------------ | -------- | -| enum('none', 'sentences', 'words', 'characters') | No | - ---- - -### `autoFocus` - -If true, focuses the input on componentDidMount. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `defaultValue` - -Provides an initial value that will change when the user starts typing. Useful for use-cases where you don't want to deal with listening to events and updating the value prop to keep the controlled state in sync. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `editable` - -If false, text is not editable. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `keyboardType` - -Determines which keyboard to open, e.g.`numeric`. - -The following values work across platforms: - -- default -- numeric -- email-address - -| Type | Required | -| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | - ---- - -### `maxLength` - -Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `multiline` - -If true, the text input can be multiple lines. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onBlur` - -Callback that is called when the text input is blurred - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChange` - -Callback that is called when the text input's text changes. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChangeText` - -Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onEndEditing` - -Callback that is called when text input ends. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onFocus` - -Callback that is called when the text input is focused - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{x, y, width, height}`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onSelectionChange` - -Callback that is called when the text input selection is changed - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onSubmitEditing` - -Callback that is called when the text input's submit button is pressed. Invalid if multiline={true} is specified. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `autoCorrect` - -If false, disables auto-correct. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `placeholderTextColor` - -The text color of the placeholder string - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `secureTextEntry` - -If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `selectionColor` - -The highlight (and cursor on ios) color of the text input - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `style` - -Styles - -| Type | Required | -| --------------------- | -------- | -| [Text](text.md#style) | No | - ---- - -### `value` - -The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `numberOfLines` - -Sets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | Android | - ---- - -### `underlineColorAndroid` - -The color of the textInput underline. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `blurOnSubmit` - -If true, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting blurOnSubmit to true means that pressing return will blur the field and trigger the onSubmitEditing event instead of inserting a newline into the field. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `clearButtonMode` - -When the clear button should appear on the right side of the text view - -| Type | Required | Platform | -| ---------------------------------------------------------- | -------- | -------- | -| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | - ---- - -### `clearTextOnFocus` - -If true, clears the text field automatically when editing begins - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `enablesReturnKeyAutomatically` - -If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `keyboardAppearance` - -Determines the color of the keyboard. - -| Type | Required | Platform | -| -------------------------------- | -------- | -------- | -| enum('default', 'light', 'dark') | No | iOS | - ---- - -### `onKeyPress` - -Callback that is called when a key is pressed. Pressed key value is passed as an argument to the callback handler. Fires before onChange callbacks. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `returnKeyType` - -Determines how the return key should look. - -| Type | Required | Platform | -| ------------------------------------------------------------------------------------------------------------- | -------- | -------- | -| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | iOS | - ---- - -### `selectTextOnFocus` - -If true, all text will automatically be selected on focus - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `selectionState` - -See DocumentSelectionState.js, some state that is responsible for maintaining selection information for a document - -| Type | Required | Platform | -| ---------------------- | -------- | -------- | -| DocumentSelectionState | No | iOS | - -## Methods - -### `isFocused()` - -```jsx -isFocused(): -``` - ---- - -### `clear()` - -```jsx -clear(); -``` diff --git a/website/versioned_docs/version-0.20/timepickerandroid.md b/website/versioned_docs/version-0.20/timepickerandroid.md deleted file mode 100644 index 2e7074fedaa..00000000000 --- a/website/versioned_docs/version-0.20/timepickerandroid.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -id: version-0.20-timepickerandroid -title: TimePickerAndroid -original_id: timepickerandroid ---- - -Opens the standard Android time picker dialog. - -### Example - -``` -try { - const {action, hour, minute} = await TimePickerAndroid.open({ - hour: 14, - minute: 0, - is24Hour: false, // Will display '2 PM' - }); - if (action !== DatePickerAndroid.dismissedAction) { - // Selected hour (0-23), minute (0-59) - } -} catch ({code, message}) { - console.warn('Cannot open time picker', message); -} -``` - -### Methods - -- [`open`](timepickerandroid.md#open) -- [`timeSetAction`](timepickerandroid.md#timesetaction) -- [`dismissedAction`](timepickerandroid.md#dismissedaction) - ---- - -# Reference - -## Methods - -### `open()` - -```jsx -static open(options) -``` - -Opens the standard Android time picker dialog. - -The available keys for the `options` object are: - -- `hour` (0-23) - the hour to show, defaults to the current time -- `minute` (0-59) - the minute to show, defaults to the current time -- `is24Hour` (boolean) - If `true`, the picker uses the 24-hour format. If `false`, the picker shows an AM/PM chooser. If undefined, the default for the current locale is used. - -Returns a Promise which will be invoked an object containing `action`, `hour` (0-23), `minute` (0-59) if the user picked a time. If the user dismissed the dialog, the Promise will still be resolved with action being `TimePickerAndroid.dismissedAction` and all the other keys being undefined. **Always** check whether the `action` before reading the values. - ---- - -### `timeSetAction()` - -```jsx -static timeSetAction() -``` - -A time has been selected. - ---- - -### `dismissedAction()` - -```jsx -static dismissedAction() -``` - -The dialog has been dismissed. diff --git a/website/versioned_docs/version-0.20/transforms.md b/website/versioned_docs/version-0.20/transforms.md deleted file mode 100644 index 5794e69ecc7..00000000000 --- a/website/versioned_docs/version-0.20/transforms.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -id: version-0.20-transforms -title: Transforms -original_id: transforms ---- - -### Props - -- [`rotation`](transforms.md#rotation) -- [`scaleX`](transforms.md#scalex) -- [`scaleY`](transforms.md#scaley) -- [`transform`](transforms.md#transform) -- [`transformMatrix`](transforms.md#transformmatrix) -- [`translateX`](transforms.md#translatex) -- [`translateY`](transforms.md#translatey) - ---- - -# Reference - -## Props - -### `rotation` - -| Type | Required | -| ---------------------------------------------------------------------------- | -------- | -| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | - ---- - -### `scaleX` - -| Type | Required | -| ---------------------------------------------------------------------------- | -------- | -| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | - ---- - -### `scaleY` - -| Type | Required | -| ---------------------------------------------------------------------------- | -------- | -| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | - ---- - -### `transform` - -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| array of object: {perspective: number}, ,object: {rotate: string}, ,object: {rotateX: string}, ,object: {rotateY: string}, ,object: {rotateZ: string}, ,object: {scale: number}, ,object: {scaleX: number}, ,object: {scaleY: number}, ,object: {translateX: number}, ,object: {translateY: number}, ,object: {skewX: string}, ,object: {skewY: string} | No | - ---- - -### `transformMatrix` - -| Type | Required | -| ----------------------- | -------- | -| TransformMatrixPropType | No | - ---- - -### `translateX` - -| Type | Required | -| ---------------------------------------------------------------------------- | -------- | -| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | - ---- - -### `translateY` - -| Type | Required | -| ---------------------------------------------------------------------------- | -------- | -| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | diff --git a/website/versioned_docs/version-0.20/viewpagerandroid.md b/website/versioned_docs/version-0.20/viewpagerandroid.md deleted file mode 100644 index e01aade01f7..00000000000 --- a/website/versioned_docs/version-0.20/viewpagerandroid.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -id: version-0.20-viewpagerandroid -title: ViewPagerAndroid -original_id: viewpagerandroid ---- - -Container that allows to flip left and right between child views. Each child view of the `ViewPagerAndroid` will be treated as a separate page and will be stretched to fill the `ViewPagerAndroid`. - -It is important all children are ``s and not composite components. You can set style properties like `padding` or `backgroundColor` for each child. - -Example: - -``` -render: function() { - return ( - - - First page - - - Second page - - - ); -} - -... - -var styles = { - ... - pageStyle: { - alignItems: 'center', - padding: 20, - } -} -``` - -### Props - -- [View props...](view.md#props) - -* [`initialPage`](viewpagerandroid.md#initialpage) -* [`keyboardDismissMode`](viewpagerandroid.md#keyboarddismissmode) -* [`onPageScroll`](viewpagerandroid.md#onpagescroll) -* [`onPageScrollStateChanged`](viewpagerandroid.md#onpagescrollstatechanged) -* [`onPageSelected`](viewpagerandroid.md#onpageselected) - -### Methods - -- [`setPage`](viewpagerandroid.md#setpage) -- [`setPageWithoutAnimation`](viewpagerandroid.md#setpagewithoutanimation) - -### Type Definitions - -- [`ViewPagerScrollState`](viewpagerandroid.md#viewpagerscrollstate) - ---- - -# Reference - -## Props - -### `initialPage` - -Index of initial page that should be selected. Use `setPage` method to update the page, and `onPageSelected` to monitor page changes - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. - -| Type | Required | -| ----------------------- | -------- | -| enum('none', 'on-drag') | No | - ---- - -### `onPageScroll` - -Executed when transitioning between pages (ether because of animation for the requested page change or when user is swiping/dragging between pages) The `event.nativeEvent` object for this callback will carry following data: - -- position - index of first page from the left that is currently visible -- offset - value from range [0,1) describing stage between page transitions. Value x means that (1 - x) fraction of the page at "position" index is visible, and x fraction of the next page is visible. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPageScrollStateChanged` - -Function called when the page scrolling state has changed. The page scrolling state can be in 3 states: - -- idle, meaning there is no interaction with the page scroller happening at the time -- dragging, meaning there is currently an interaction with the page scroller -- settling, meaning that there was an interaction with the page scroller, and the page scroller is now finishing its closing or opening animation - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPageSelected` - -This callback will be called once ViewPager finish navigating to selected page (when user swipes between pages). The `event.nativeEvent` object passed to this callback will have following fields: - -- position - index of page that has been selected - -| Type | Required | -| -------- | -------- | -| function | No | - -## Methods - -### `setPage()` - -```jsx -setPage((selectedPage: number)); -``` - -A helper function to scroll to a specific page in the ViewPager. The transition between pages will be animated. - ---- - -### `setPageWithoutAnimation()` - -```jsx -setPageWithoutAnimation((selectedPage: number)); -``` - -A helper function to scroll to a specific page in the ViewPager. The transition between pages will be _not_ be animated. - -## Type Definitions - -### ViewPagerScrollState - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| -------- | ----------- | -| idle | | -| dragging | | -| settling | | diff --git a/website/versioned_docs/version-0.20/webview.md b/website/versioned_docs/version-0.20/webview.md deleted file mode 100644 index a803cd22edd..00000000000 --- a/website/versioned_docs/version-0.20/webview.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: version-0.20-webview -title: WebView -original_id: webview ---- - -Renders a native WebView. - -### Props - -- [View props...](view.md#props) - -* [`source`](webview.md#source) -* [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) -* [`scalesPageToFit`](webview.md#scalespagetofit) -* [`injectedJavaScript`](webview.md#injectedjavascript) -* [`onError`](webview.md#onerror) -* [`onLoad`](webview.md#onload) -* [`onLoadEnd`](webview.md#onloadend) -* [`onLoadStart`](webview.md#onloadstart) -* [`onNavigationStateChange`](webview.md#onnavigationstatechange) -* [`renderError`](webview.md#rendererror) -* [`renderLoading`](webview.md#renderloading) -* [`contentInset`](webview.md#contentinset) -* [`startInLoadingState`](webview.md#startinloadingstate) -* [`style`](webview.md#style) -* [`onShouldStartLoadWithRequest`](webview.md#onshouldstartloadwithrequest) -* [`domStorageEnabled`](webview.md#domstorageenabled) -* [`javaScriptEnabled`](webview.md#javascriptenabled) -* [`allowsInlineMediaPlayback`](webview.md#allowsinlinemediaplayback) -* [`bounces`](webview.md#bounces) -* [`decelerationRate`](webview.md#decelerationrate) -* [`scrollEnabled`](webview.md#scrollenabled) -* [`url`](webview.md#url) -* [`html`](webview.md#html) - -### Methods - -- [`goForward`](webview.md#goforward) -- [`goBack`](webview.md#goback) -- [`reload`](webview.md#reload) -- [`updateNavigationState`](webview.md#updatenavigationstate) -- [`getWebViewHandle`](webview.md#getwebviewhandle) -- [`onLoadingStart`](webview.md#onloadingstart) -- [`onLoadingError`](webview.md#onloadingerror) -- [`onLoadingFinish`](webview.md#onloadingfinish) - ---- - -# Reference - -## Props - -### `source` - -Loads static html or a uri (with optional headers) in the WebView. - -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------- | -------- | -| object: {uri: string,method: string,headers: object,body: string}, ,object: {html: string,baseUrl: string}, ,number | No | - ---- - -### `automaticallyAdjustContentInsets` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `scalesPageToFit` - -Sets whether the webpage scales to fit the view and the user can change the scale. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `injectedJavaScript` - -Sets the JS to be injected when the webpage loads. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `onError` - -Invoked when load fails - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoad` - -Invoked when load finish - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadEnd` - -Invoked when load either succeeds or fails - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadStart` - -Invoked on load start - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onNavigationStateChange` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `renderError` - -Function that returns a view to show if there's an error. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `renderLoading` - -Function that returns a loading indicator. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `contentInset` - -| Type | Required | -| ------------------------------------------------------------------ | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | - ---- - -### `startInLoadingState` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `onShouldStartLoadWithRequest` - -Allows custom handling of any webview requests by a JS handler. Return true or false from this method to continue loading the request. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `domStorageEnabled` - -Used on Android only, controls whether DOM Storage is enabled or not - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `javaScriptEnabled` - -Used on Android only, JS is enabled by default for WebView on iOS - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `allowsInlineMediaPlayback` - -Determines whether HTML5 videos play inline or use the native full-screen controller. default value `false` **NOTE** : "In order for video to play inline, not only does this property need to be set to true, but the video element in the HTML document must also include the webkit-playsinline attribute." - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bounces` - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use string shortcuts `"normal"` and `"fast"` which match the underlying iOS settings for `UIScrollViewDecelerationRateNormal` and `UIScrollViewDecelerationRateFast` respectively. - -- Normal: 0.998 -- Fast: 0.9 (the default for iOS WebView) - -| Type | Required | Platform | -| ------------------------------------- | -------- | -------- | -| ScrollView.propTypes.decelerationRate | No | iOS | - ---- - -### `scrollEnabled` - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `url` - -**Deprecated.** Use the `source` prop instead. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `html` - -**Deprecated.** Use the `source` prop instead. - -| Type | Required | -| ------ | -------- | -| string | No | - -## Methods - -### `goForward()` - -```jsx -goForward(); -``` - ---- - -### `goBack()` - -```jsx -goBack(); -``` - ---- - -### `reload()` - -```jsx -reload(); -``` - ---- - -### `updateNavigationState()` - -```jsx -updateNavigationState((event: Event)); -``` - -We return an event with a bunch of fields including: url, title, loading, canGoBack, canGoForward - ---- - -### `getWebViewHandle()` - -```jsx -getWebViewHandle(): -``` - ---- - -### `onLoadingStart()` - -```jsx -onLoadingStart((event: Event)); -``` - ---- - -### `onLoadingError()` - -```jsx -onLoadingError((event: Event)); -``` - ---- - -### `onLoadingFinish()` - -```jsx -onLoadingFinish((event: Event)); -``` diff --git a/website/versioned_docs/version-0.21/geolocation.md b/website/versioned_docs/version-0.21/geolocation.md deleted file mode 100644 index 13cfa5986e2..00000000000 --- a/website/versioned_docs/version-0.21/geolocation.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: version-0.21-geolocation -title: Geolocation -original_id: geolocation ---- - -The Geolocation API follows the web spec: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation - -### iOS - -You need to include the `NSLocationWhenInUseUsageDescription` key in Info.plist to enable geolocation. Geolocation is enabled by default when you create a project with `react-native init`. - -### Android - -To request access to location, you need to add the following line to your app's `AndroidManifest.xml`: - -`` - -### Methods - -- [`getCurrentPosition`](geolocation.md#getcurrentposition) -- [`watchPosition`](geolocation.md#watchposition) -- [`clearWatch`](geolocation.md#clearwatch) -- [`stopObserving`](geolocation.md#stopobserving) - ---- - -# Reference - -## Methods - -### `getCurrentPosition()` - -```jsx -static getCurrentPosition(geo_success, geo_error?, geo_options?) -``` - -Invokes the success callback once with the latest location info. Supported options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool) - ---- - -### `watchPosition()` - -```jsx -static watchPosition(success, error?, options?) -``` - -Invokes the success callback whenever the location changes. Supported options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool), distanceFilter(m) - ---- - -### `clearWatch()` - -```jsx -static clearWatch(watchID) -``` - ---- - -### `stopObserving()` - -```jsx -static stopObserving() -``` - -Stops observing for device location changes. In addition, it removes all listeners previously registered. - -Notice that this method has only effect if the `geolocation.watchPosition(successCallback, errorCallback)` method was previously invoked. diff --git a/website/versioned_docs/version-0.21/linking.md b/website/versioned_docs/version-0.21/linking.md deleted file mode 100644 index 4bccfc1312b..00000000000 --- a/website/versioned_docs/version-0.21/linking.md +++ /dev/null @@ -1,163 +0,0 @@ ---- -id: version-0.21-linking -title: Linking -original_id: linking ---- - -`Linking` gives you a general interface to interact with both incoming and outgoing app links. - -### Basic Usage - -#### Handling deep links - -If your app was launched from an external url registered to your app you can access and handle it from any component you want with - -``` -componentDidMount() { - var url = Linking.getInitialURL().then((url) => { - if (url) { - console.log('Initial url is: ' + url); - } - }).catch(err => console.error('An error occurred', err)); -} -``` - -NOTE: For instructions on how to add support for deep linking on Android, refer [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters). - -NOTE: For iOS, in case you also want to listen to incoming app links during your app's execution you'll need to add the following lines to you `*AppDelegate.m`: - -``` -#import "RCTLinkingManager.h" - -- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url - sourceApplication:(NSString *)sourceApplication annotation:(id)annotation -{ - return [RCTLinkingManager application:application openURL:url - sourceApplication:sourceApplication annotation:annotation]; -} - -// Only if your app is using [Universal Links](https://developer.apple.com/library/prerelease/ios/documentation/General/Conceptual/AppSearch/UniversalLinks.html). -- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity - restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler -{ - return [RCTLinkingManager application:application - continueUserActivity:userActivity - restorationHandler:restorationHandler]; -} -``` - -And then on your React component you'll be able to listen to the events on `Linking` as follows - -``` -componentDidMount() { - Linking.addEventListener('url', this._handleOpenURL); -}, -componentWillUnmount() { - Linking.removeEventListener('url', this._handleOpenURL); -}, -_handleOpenURL(event) { - console.log(event.url); -} -``` - -Note that this is only supported on iOS. - -#### Opening external links - -To start the corresponding activity for a link (web URL, email, contact etc.), call - -``` -Linking.openURL(url).catch(err => console.error('An error occurred', err)); -``` - -If you want to check if any installed app can handle a given URL beforehand you can call - -``` -Linking.canOpenURL(url).then(supported => { - if (!supported) { - console.log('Can\'t handle url: ' + url); - } else { - return Linking.openURL(url); - } -}).catch(err => console.error('An error occurred', err)); -``` - -### Methods - -- [`addEventListener`](linking.md#addeventlistener) -- [`removeEventListener`](linking.md#removeeventlistener) -- [`openURL`](linking.md#openurl) -- [`canOpenURL`](linking.md#canopenurl) -- [`getInitialURL`](linking.md#getinitialurl) - ---- - -# Reference - -## Methods - -### `addEventListener()` - -```jsx -static addEventListener(type, handler) -``` - -Add a handler to Linking changes by listening to the `url` event type and providing the handler - -@platform ios - ---- - -### `removeEventListener()` - -```jsx -static removeEventListener(type, handler) -``` - -Remove a handler by passing the `url` event type and the handler - -@platform ios - ---- - -### `openURL()` - -```jsx -static openURL(url) -``` - -Try to open the given `url` with any of the installed apps. - -You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386"), a contact, or any other URL that can be opened with the installed apps. - -NOTE: This method will fail if the system doesn't know how to open the specified URL. If you're passing in a non-http(s) URL, it's best to check {@code canOpenURL} first. - -NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly! - ---- - -### `canOpenURL()` - -```jsx -static canOpenURL(url) -``` - -Determine whether or not an installed app can handle a given URL. - -NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly! - -NOTE: As of iOS 9, your app needs to provide the `LSApplicationQueriesSchemes` key inside `Info.plist`. - -@param URL the URL to open - ---- - -### `getInitialURL()` - -```jsx -static getInitialURL() -``` - -If the app launch was triggered by an app link with, it will give the link url, otherwise it will give `null` - -NOTE: To support deep linking on Android, refer http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents diff --git a/website/versioned_docs/version-0.21/pushnotificationios.md b/website/versioned_docs/version-0.21/pushnotificationios.md deleted file mode 100644 index fcae10d5665..00000000000 --- a/website/versioned_docs/version-0.21/pushnotificationios.md +++ /dev/null @@ -1,283 +0,0 @@ ---- -id: version-0.21-pushnotificationios -title: PushNotificationIOS -original_id: pushnotificationios ---- - -Handle push notifications for your app, including permission handling and icon badge number. - -To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). - -[Manually link](linking-libraries-ios.md#manual-linking) the PushNotificationIOS library - -- Be sure to add the following to your `Header Search Paths`: `$(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS` -- Set the search to `recursive` - -Finally, to enable support for `notification` and `register` events you need to augment your AppDelegate. - -At the top of your `AppDelegate.m`: - -`#import "RCTPushNotificationManager.h"` - -And then in your AppDelegate implementation add the following: - -``` - // Required to register for notifications - - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings - { - [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings]; - } - // Required for the register event. - - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken - { - [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; - } - // Required for the notification event. - - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification - { - [RCTPushNotificationManager didReceiveRemoteNotification:notification]; - } - // Required for the localNotification event. - - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification - { - [RCTPushNotificationManager didReceiveLocalNotification:notification]; - } -``` - -### Methods - -- [`presentLocalNotification`](pushnotificationios.md#presentlocalnotification) -- [`scheduleLocalNotification`](pushnotificationios.md#schedulelocalnotification) -- [`cancelAllLocalNotifications`](pushnotificationios.md#cancelalllocalnotifications) -- [`setApplicationIconBadgeNumber`](pushnotificationios.md#setapplicationiconbadgenumber) -- [`getApplicationIconBadgeNumber`](pushnotificationios.md#getapplicationiconbadgenumber) -- [`cancelLocalNotifications`](pushnotificationios.md#cancellocalnotifications) -- [`addEventListener`](pushnotificationios.md#addeventlistener) -- [`requestPermissions`](pushnotificationios.md#requestpermissions) -- [`abandonPermissions`](pushnotificationios.md#abandonpermissions) -- [`checkPermissions`](pushnotificationios.md#checkpermissions) -- [`removeEventListener`](pushnotificationios.md#removeeventlistener) -- [`popInitialNotification`](pushnotificationios.md#popinitialnotification) -- [`constructor`](pushnotificationios.md#constructor) -- [`getMessage`](pushnotificationios.md#getmessage) -- [`getSound`](pushnotificationios.md#getsound) -- [`getAlert`](pushnotificationios.md#getalert) -- [`getBadgeCount`](pushnotificationios.md#getbadgecount) -- [`getData`](pushnotificationios.md#getdata) - ---- - -# Reference - -## Methods - -### `presentLocalNotification()` - -```jsx -static presentLocalNotification(details) -``` - -Schedules the localNotification for immediate presentation. - -details is an object containing: - -- `alertBody` : The message displayed in the notification alert. -- `soundName` : The sound played when the notification is fired (optional). - ---- - -### `scheduleLocalNotification()` - -```jsx -static scheduleLocalNotification(details) -``` - -Schedules the localNotification for future presentation. - -details is an object containing: - -- `fireDate` : The date and time when the system should deliver the notification. -- `alertBody` : The message displayed in the notification alert. -- `soundName` : The sound played when the notification is fired (optional). -- `userInfo` : An optional object containing additional notification data. - ---- - -### `cancelAllLocalNotifications()` - -```jsx -static cancelAllLocalNotifications() -``` - -Cancels all scheduled localNotifications - ---- - -### `setApplicationIconBadgeNumber()` - -```jsx -static setApplicationIconBadgeNumber(number) -``` - -Sets the badge number for the app icon on the home screen - ---- - -### `getApplicationIconBadgeNumber()` - -```jsx -static getApplicationIconBadgeNumber(callback) -``` - -Gets the current badge number for the app icon on the home screen - ---- - -### `cancelLocalNotifications()` - -```jsx -static cancelLocalNotifications(userInfo) -``` - -Cancel local notifications. - -Optionally restricts the set of canceled notifications to those notifications whose `userInfo` fields match the corresponding fields in the `userInfo` argument. - ---- - -### `addEventListener()` - -```jsx -static addEventListener(type, handler) -``` - -Attaches a listener to remote notification events while the app is running in the foreground or the background. - -Valid events are: - -- `notification` : Fired when a remote notification is received. The handler will be invoked with an instance of `PushNotificationIOS`. -- `register`: Fired when the user registers for remote notifications. The handler will be invoked with a hex string representing the deviceToken. - ---- - -### `requestPermissions()` - -```jsx -static requestPermissions(permissions?) -``` - -Requests notification permissions from iOS, prompting the user's dialog box. By default, it will request all notification permissions, but a subset of these can be requested by passing a map of requested permissions. The following permissions are supported: - -- `alert` -- `badge` -- `sound` - -If a map is provided to the method, only the permissions with truthy values will be requested. - ---- - -### `abandonPermissions()` - -```jsx -static abandonPermissions() -``` - -Unregister for all remote notifications received via Apple Push Notification service. - -You should call this method in rare circumstances only, such as when a new version of the app removes support for all types of remote notifications. Users can temporarily prevent apps from receiving remote notifications through the Notifications section of the Settings app. Apps unregistered through this method can always re-register. - ---- - -### `checkPermissions()` - -```jsx -static checkPermissions(callback) -``` - -See what push permissions are currently enabled. `callback` will be invoked with a `permissions` object: - -- `alert` :boolean -- `badge` :boolean -- `sound` :boolean - ---- - -### `removeEventListener()` - -```jsx -static removeEventListener(type, handler) -``` - -Removes the event listener. Do this in `componentWillUnmount` to prevent memory leaks - ---- - -### `popInitialNotification()` - -```jsx -static popInitialNotification() -``` - -An initial notification will be available if the app was cold-launched from a notification. - -The first caller of `popInitialNotification` will get the initial notification object, or `null`. Subsequent invocations will return null. - ---- - -### `constructor()` - -```jsx -constructor(nativeNotif); -``` - -You will never need to instantiate `PushNotificationIOS` yourself. Listening to the `notification` event and invoking `popInitialNotification` is sufficient - ---- - -### `getMessage()` - -```jsx -getMessage(); -``` - -An alias for `getAlert` to get the notification's main message string - ---- - -### `getSound()` - -```jsx -getSound(); -``` - -Gets the sound string from the `aps` object - ---- - -### `getAlert()` - -```jsx -getAlert(); -``` - -Gets the notification's main message from the `aps` object - ---- - -### `getBadgeCount()` - -```jsx -getBadgeCount(); -``` - -Gets the badge count number from the `aps` object - ---- - -### `getData()` - -```jsx -getData(); -``` - -Gets the data object on the notif diff --git a/website/versioned_docs/version-0.21/scrollview.md b/website/versioned_docs/version-0.21/scrollview.md deleted file mode 100644 index 6123f1cfce8..00000000000 --- a/website/versioned_docs/version-0.21/scrollview.md +++ /dev/null @@ -1,546 +0,0 @@ ---- -id: version-0.21-scrollview -title: ScrollView -original_id: scrollview ---- - -Component that wraps platform ScrollView while providing integration with touch locking "responder" system. - -Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer `{flex: 1}` down the view stack can lead to errors here, which the element inspector will help you to debug. - -Doesn't yet support other contained responders from blocking this scroll view from becoming the responder. - -### Props - -- [View props...](view.md#props) - -* [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) -* [`contentContainerStyle`](scrollview.md#contentcontainerstyle) -* [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) -* [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) -* [`onContentSizeChange`](scrollview.md#oncontentsizechange) -* [`onScroll`](scrollview.md#onscroll) -* [`refreshControl`](scrollview.md#refreshcontrol) -* [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) -* [`scrollEnabled`](scrollview.md#scrollenabled) -* [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) -* [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) -* [`style`](scrollview.md#style) -* [`sendMomentumEvents`](scrollview.md#sendmomentumevents) -* [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) -* [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) -* [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) -* [`bounces`](scrollview.md#bounces) -* [`bouncesZoom`](scrollview.md#bounceszoom) -* [`horizontal`](scrollview.md#horizontal) -* [`centerContent`](scrollview.md#centercontent) -* [`contentInset`](scrollview.md#contentinset) -* [`contentOffset`](scrollview.md#contentoffset) -* [`decelerationRate`](scrollview.md#decelerationrate) -* [`directionalLockEnabled`](scrollview.md#directionallockenabled) -* [`indicatorStyle`](scrollview.md#indicatorstyle) -* [`maximumZoomScale`](scrollview.md#maximumzoomscale) -* [`minimumZoomScale`](scrollview.md#minimumzoomscale) -* [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) -* [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) -* [`pagingEnabled`](scrollview.md#pagingenabled) -* [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) -* [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) -* [`scrollsToTop`](scrollview.md#scrollstotop) -* [`snapToAlignment`](scrollview.md#snaptoalignment) -* [`snapToInterval`](scrollview.md#snaptointerval) -* [`zoomScale`](scrollview.md#zoomscale) -* [`onRefreshStart`](scrollview.md#onrefreshstart) - -### Methods - -- [`endRefreshing`](scrollview.md#endrefreshing) -- [`scrollTo`](scrollview.md#scrollto) -- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) -- [`handleScroll`](scrollview.md#handlescroll) - ---- - -# Reference - -## Props - -### `canCancelContentTouches` - -When false, once tracking starts, won't try to drag if the touch moves. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `contentContainerStyle` - -These styles will be applied to the scroll view content container which wraps all of the child views. Example: - -return ( ); ... var styles = StyleSheet.create({ contentContainer: { paddingVertical: 20 } }); - -| Type | Required | -| ------------------------------------ | -------- | -| StyleSheetPropType(View Style props) | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. -- 'interactive', the keyboard is dismissed interactively with the drag and moves in synchrony with the touch; dragging upwards cancels the dismissal. On android this is not supported and it will have the same behavior as 'none'. - -| Type | Required | -| -------------------------------------- | -------- | -| enum('none', 'interactive', 'on-drag') | No | - ---- - -### `keyboardShouldPersistTaps` - -When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the scroll view will not catch taps, and the keyboard will not dismiss automatically. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onContentSizeChange` - -Called when scrollable content view of the ScrollView changes. It's implemented using onLayout handler attached to the content container which this ScrollView renders. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onScroll` - -Fires at most once per frame during scrolling. The frequency of the events can be controlled using the `scrollEventThrottle` prop. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `refreshControl` - -A RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView. - -See [RefreshControl](refreshcontrol.md). - -| Type | Required | -| ------- | -------- | -| element | No | - ---- - -### `removeClippedSubviews` - -Experimental: When true, offscreen child views (whose `overflow` value is `hidden`) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `scrollEnabled` - -When false, the content does not scroll. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsHorizontalScrollIndicator` - -When true, shows a horizontal scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsVerticalScrollIndicator` - -When true, shows a vertical scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Shadow Props...](shadow-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderRightColor`**: [color](colors.md) - -- **`backfaceVisibility`**: enum('visible', 'hidden') - -- **`borderBottomColor`**: [color](colors.md) - -- **`borderBottomLeftRadius`**: number - -- **`borderBottomRightRadius`**: number - -- **`borderBottomWidth`**: number - -- **`borderColor`**: [color](colors.md) - -- **`borderLeftColor`**: [color](colors.md) - -- **`borderLeftWidth`**: number - -- **`borderRadius`**: number - -- **`backgroundColor`**: [color](colors.md) - -- **`borderRightWidth`**: number - -- **`borderStyle`**: enum('solid', 'dotted', 'dashed') - -- **`borderTopColor`**: [color](colors.md) - -- **`borderTopLeftRadius`**: number - -- **`borderTopRightRadius`**: number - -- **`borderTopWidth`**: number - -- **`borderWidth`**: number - -- **`opacity`**: number - -- **`overflow`**: enum('visible', 'hidden') - -- **`elevation`**: number (_Android_) - - (Android-only) Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions. - ---- - -### `sendMomentumEvents` - -When true, momentum events will be sent from Android This is internal and set automatically by the framework if you have onMomentumScrollBegin or onMomentumScrollEnd set on your ScrollView - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `alwaysBounceHorizontal` - -When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself. The default value is true when `horizontal={true}` and false otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `alwaysBounceVertical` - -When true, the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself. The default value is false when `horizontal={true}` and true otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `automaticallyAdjustContentInsets` - -Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/ toolbar. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bounces` - -When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. When false, it disables all bouncing even if the `alwaysBounce*` props are true. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bouncesZoom` - -When true, gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture end, otherwise the zoom will not exceed the limits. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `horizontal` - -When true, the scroll view's children are arranged horizontally in a row instead of vertically in a column. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `centerContent` - -When true, the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `contentInset` - -The amount by which the scroll view content is inset from the edges of the scroll view. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `contentOffset` - -Used to manually set the starting scroll offset. The default value is `{x: 0, y: 0}`. - -| Type | Required | Platform | -| ------------- | -------- | -------- | -| PointPropType | No | iOS | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use string shortcuts `"normal"` and `"fast"` which match the underlying iOS settings for `UIScrollViewDecelerationRateNormal` and `UIScrollViewDecelerationRateFast` respectively. - -- Normal: 0.998 (the default) -- Fast: 0.9 - -| Type | Required | Platform | -| ------------------------------- | -------- | -------- | -| enum('fast', 'normal'), ,number | No | iOS | - ---- - -### `directionalLockEnabled` - -When true, the ScrollView will try to lock to only vertical or horizontal scrolling while dragging. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `indicatorStyle` - -The style of the scroll indicators. - -- `default` (the default), same as `black`. -- `black`, scroll indicator is `black`. This style is good against a light content background. -- `white`, scroll indicator is `white`. This style is good against a dark content background. - -| Type | Required | Platform | -| --------------------------------- | -------- | -------- | -| enum('default', 'black', 'white') | No | iOS | - ---- - -### `maximumZoomScale` - -The maximum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `minimumZoomScale` - -The minimum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `stickyHeaderIndices` - -An array of child indices determining which children get docked to the top of the screen when scrolling. For example, passing `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction with `horizontal={true}`. - -| Type | Required | Platform | -| --------------- | -------- | -------- | -| array of number | No | iOS | - ---- - -### `onScrollAnimationEnd` - -Called when a scrolling animation ends. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `pagingEnabled` - -When true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEventThrottle` - -This controls how often the scroll event will be fired while scrolling (in events per seconds). A higher number yields better accuracy for code that is tracking the scroll position, but can lead to scroll performance problems due to the volume of information being send over the bridge. The default value is zero, which means the scroll event will be sent only once each time the view is scrolled. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `scrollIndicatorInsets` - -The amount by which the scroll view indicators are inset from the edges of the scroll view. This should normally be set to the same value as the `contentInset`. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `scrollsToTop` - -When true, the scroll view scrolls to top when the status bar is tapped. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `snapToAlignment` - -When `snapToInterval` is set, `snapToAlignment` will define the relationship of the snapping to the scroll view. - -- `start` (the default) will align the snap at the left (horizontal) or top (vertical) -- `center` will align the snap in the center -- `end` will align the snap at the right (horizontal) or bottom (vertical) - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| enum('start', 'center', 'end') | No | iOS | - ---- - -### `snapToInterval` - -When set, causes the scroll view to stop at multiples of the value of `snapToInterval`. This can be used for paginating through children that have lengths smaller than the scroll view. Used in combination with `snapToAlignment`. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `zoomScale` - -The current scale of the scroll view content. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `onRefreshStart` - -**Deprecated.** Use the `refreshControl` prop instead. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - -## Methods - -### `endRefreshing()` - -```jsx -endRefreshing(); -``` - ---- - -### `scrollTo()` - -```jsx -scrollTo( - ([y]: number), - object, - ([x]: number), - ([animated]: boolean) -); -``` - -Scrolls to a given x, y offset, either immediately or with a smooth animation. Syntax: - -scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true}) - -Note: The weird argument signature is due to the fact that, for historical reasons, the function also accepts separate arguments as as alternative to the options object. This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED. - ---- - -### `scrollWithoutAnimationTo()` - -```jsx -scrollWithoutAnimationTo(y, x); -``` - -Deprecated, do not use. - ---- - -### `handleScroll()` - -```jsx -handleScroll((e: Object)); -``` diff --git a/website/versioned_docs/version-0.22/actionsheetios.md b/website/versioned_docs/version-0.22/actionsheetios.md deleted file mode 100644 index 4ab1257f9eb..00000000000 --- a/website/versioned_docs/version-0.22/actionsheetios.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -id: version-0.22-actionsheetios -title: ActionSheetIOS -original_id: actionsheetios ---- - -### Methods - -- [`showActionSheetWithOptions`](actionsheetios.md#showactionsheetwithoptions) -- [`showShareActionSheetWithOptions`](actionsheetios.md#showshareactionsheetwithoptions) - ---- - -# Reference - -## Methods - -### `showActionSheetWithOptions()` - -```jsx -static showActionSheetWithOptions(options, callback) -``` - ---- - -### `showShareActionSheetWithOptions()` - -```jsx -static showShareActionSheetWithOptions(options, failureCallback, successCallback) -``` - -Display the iOS share sheet. The `options` object should contain one or both of: - -- `message` (string) - a message to share -- `url` (string) - a URL to share - -NOTE: if `url` points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc. diff --git a/website/versioned_docs/version-0.22/animated.md b/website/versioned_docs/version-0.22/animated.md deleted file mode 100644 index e2369864251..00000000000 --- a/website/versioned_docs/version-0.22/animated.md +++ /dev/null @@ -1,481 +0,0 @@ ---- -id: version-0.22-animated -title: Animated -original_id: animated ---- - -Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and straight-forward to build and maintain. - -The general workflow is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates either via animations, such as `Animated.timing`, or by hooking into gestures like panning or scrolling via `Animated.event`. `Animated.Value` can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted: - -```jsx -class FadeInView extends React.Component { - constructor(props) { - super(props); - this.state = { - fadeAnim: new Animated.Value(0) // init opacity 0 - }; - } - componentDidMount() { - Animated.timing( - // Uses easing functions - this.state.fadeAnim, // The value to drive - { toValue: 1 } // Configuration - ).start(); // Don't forget start! - } - render() { - return ( - - {' '} - // Binds - {this.props.children} - - ); - } -} -``` - -Note that only animatable components can be animated. `View`, `Text`, and `Image` are already provided, and you can create custom ones with `createAnimatedComponent`. These particular components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default. - -Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation. - -A single `Animated.Value` can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value. - -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` in the example above like so: - -```jsx - style={{ - opacity: this.state.fadeAnim, // Binds directly - transform: [{ - translateY: this.state.fadeAnim.interpolate({ - inputRange: [0, 1], - outputRange: [150, 0] // 0 : 150, 0.5 : 75, 1 : 0 - }), - }], - }}> -``` - -Animations can also be combined in complex ways using composition functions such as `sequence` and `parallel`, and can also be chained together by setting the `toValue` of one animation to be another `Animated.Value`. - -`Animated.ValueXY` is handy for 2D animations, like panning, and there are other helpful additions like `setOffset` and `getLayout` to aid with typical interaction patterns, like drag-and-drop. - -You can see more example usage in `AnimationExample.js`, the Gratuitous Animation App, and [Animations documentation guide](animations.md). - -Note that `Animated` is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout `Animated.Value.addListener` as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future. - -### Methods - -- [`decay`](animated.md#decay) -- [`timing`](animated.md#timing) -- [`spring`](animated.md#spring) -- [`add`](animated.md#add) -- [`multiply`](animated.md#multiply) -- [`modulo`](animated.md#modulo) -- [`delay`](animated.md#delay) -- [`sequence`](animated.md#sequence) -- [`parallel`](animated.md#parallel) -- [`stagger`](animated.md#stagger) -- [`event`](animated.md#event) -- [`createAnimatedComponent`](animated.md#createanimatedcomponent) - -### Properties - -- [`Value`](animated.md#value) -- [`ValueXY`](animated.md#valuexy) - -### Classes - -- [`AnimatedValue`](animated.md#animatedvalue) -- [`AnimatedValueXY`](animated.md#animatedvaluexy) -- [`AnimatedProps`](animated.md#animatedprops) - ---- - -# Reference - -## Methods - -### `decay()` - -```jsx -static decay(value, config) -``` - -Animates a value from an initial velocity to zero based on a decay coefficient. - ---- - -### `timing()` - -```jsx -static timing(value, config) -``` - -Animates a value along a timed easing curve. The `Easing` module has tons of pre-defined curves, or you can use your own function. - ---- - -### `spring()` - -```jsx -static spring(value, config) -``` - -Spring animation based on Rebound and Origami. Tracks velocity state to create fluid motions as the `toValue` updates, and can be chained together. - ---- - -### `add()` - -```jsx -static add(a, b) -``` - -Creates a new Animated value composed from two Animated values added together. - ---- - -### `multiply()` - -```jsx -static multiply(a, b) -``` - -Creates a new Animated value composed from two Animated values multiplied together. - ---- - -### `modulo()` - -```jsx -static modulo(a, modulus) -``` - -Creates a new Animated value that is the (non-negative) modulo of the provided Animated value - ---- - -### `delay()` - -```jsx -static delay(time) -``` - -Starts an animation after the given delay. - ---- - -### `sequence()` - -```jsx -static sequence(animations) -``` - -Starts an array of animations in order, waiting for each to complete before starting the next. If the current running animation is stopped, no following animations will be started. - ---- - -### `parallel()` - -```jsx -static parallel(animations, config?) -``` - -Starts an array of animations all at the same time. By default, if one of the animations is stopped, they will all be stopped. You can override this with the `stopTogether` flag. - ---- - -### `stagger()` - -```jsx -static stagger(time, animations) -``` - -Array of animations may run in parallel (overlap), but are started in sequence with successive delays. Nice for doing trailing effects. - ---- - -### `event()` - -```jsx -static event(argMapping, config?) -``` - -Takes an array of mappings and extracts values from each arg accordingly, then calls `setValue` on the mapped outputs. e.g. - -```jsx - onScroll={Animated.event( - [{nativeEvent: {contentOffset: {x: this._scrollX}}}] - {listener}, // Optional async listener - ) - ... - onPanResponderMove: Animated.event([ - null, // raw event arg ignored - {dx: this._panX}, // gestureState arg - ]), -``` - ---- - -### `createAnimatedComponent()` - -```jsx -static createAnimatedComponent(Component) -``` - -Make any React component Animatable. Used to create `Animated.View`, etc. - -## Properties - ---- - -## Classes - -## class AnimatedValue - -Standard value for driving animations. One `Animated.Value` can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling `setValue`) will stop any previous ones. - -### Methods - -### `constructor()` - -```jsx -constructor(value); -``` - ---- - -### `setValue()` - -```jsx -setValue(value); -``` - -Directly set the value. This will stop any animations running on the value and update all the bound properties. - ---- - -### `setOffset()` - -```jsx -setOffset(offset); -``` - -Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture. - ---- - -### `flattenOffset()` - -```jsx -flattenOffset(); -``` - -Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged. - ---- - -### `addListener()` - -```jsx -addListener(callback); -``` - -Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively. - ---- - -### `removeListener()` - -```jsx -removeListener(id); -``` - ---- - -### `removeAllListeners()` - -```jsx -removeAllListeners(); -``` - ---- - -### `stopAnimation()` - -```jsx -stopAnimation(callback?) -``` - -Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout. - ---- - -### `interpolate()` - -```jsx -interpolate(config); -``` - -Interpolates the value before updating the property, e.g. mapping 0-1 to 0-10. - ---- - -### `animate()` - -```jsx -animate(animation, callback); -``` - -Typically only used internally, but could be used by a custom Animation class. - ---- - -### `stopTracking()` - -```jsx -stopTracking(); -``` - -Typically only used internally. - ---- - -### `track()` - -```jsx -track(tracking); -``` - -Typically only used internally. - ---- - -## class AnimatedValueXY - -2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal `Animated.Value`, but multiplexed. Contains two regular `Animated.Value`s under the hood. Example: - -```jsx -class DraggableView extends React.Component { - constructor(props) { - super(props); - this.state = { - pan: new Animated.ValueXY() // inits to zero - }; - this.state.panResponder = PanResponder.create({ - onStartShouldSetPanResponder: () => true, - onPanResponderMove: Animated.event([ - null, - { - dx: this.state.pan.x, // x,y are Animated.Value - dy: this.state.pan.y - } - ]), - onPanResponderRelease: () => { - Animated.spring( - this.state.pan, // Auto-multiplexed - { toValue: { x: 0, y: 0 } } // Back to zero - ).start(); - } - }); - } - render() { - return ( - - {this.props.children} - - ); - } -} -``` - -### Methods - -### `constructor()` - -```jsx -constructor(valueIn?) -``` - ---- - -### `setValue()` - -```jsx -setValue(value); -``` - ---- - -### `setOffset()` - -```jsx -setOffset(offset); -``` - ---- - -### `flattenOffset()` - -```jsx -flattenOffset(); -``` - ---- - -### `stopAnimation()` - -```jsx -stopAnimation(callback?) -``` - ---- - -### `addListener()` - -```jsx -addListener(callback); -``` - ---- - -### `removeListener()` - -```jsx -removeListener(id); -``` - ---- - -### `getLayout()` - -```jsx -getLayout(); -``` - -Converts `{x, y}` into `{left, top}` for use in style, e.g. - -```jsx - style={this.state.anim.getLayout()} -``` - ---- - -### `getTranslateTransform()` - -```jsx -getTranslateTransform(); -``` - -Converts `{x, y}` into a useable translation transform, e.g. - -```jsx - style={{ - transform: this.state.anim.getTranslateTransform() - }} -``` diff --git a/website/versioned_docs/version-0.22/drawerlayoutandroid.md b/website/versioned_docs/version-0.22/drawerlayoutandroid.md deleted file mode 100644 index 2d818a014b7..00000000000 --- a/website/versioned_docs/version-0.22/drawerlayoutandroid.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -id: version-0.22-drawerlayoutandroid -title: DrawerLayoutAndroid -original_id: drawerlayoutandroid ---- - -React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop. - -Example: - -``` -render: function() { - var navigationView = ( - - I'm in the Drawer! - - ); - return ( - navigationView}> - - Hello - World! - - - ); -}, -``` - -### Props - -- [View props...](view.md#props) - -* [`renderNavigationView`](drawerlayoutandroid.md#rendernavigationview) -* [`drawerLockMode`](drawerlayoutandroid.md#drawerlockmode) -* [`drawerPosition`](drawerlayoutandroid.md#drawerposition) -* [`drawerWidth`](drawerlayoutandroid.md#drawerwidth) -* [`keyboardDismissMode`](drawerlayoutandroid.md#keyboarddismissmode) -* [`onDrawerClose`](drawerlayoutandroid.md#ondrawerclose) -* [`onDrawerOpen`](drawerlayoutandroid.md#ondraweropen) -* [`onDrawerSlide`](drawerlayoutandroid.md#ondrawerslide) -* [`onDrawerStateChanged`](drawerlayoutandroid.md#ondrawerstatechanged) - -### Methods - -- [`openDrawer`](drawerlayoutandroid.md#opendrawer) -- [`closeDrawer`](drawerlayoutandroid.md#closedrawer) - ---- - -# Reference - -## Props - -### `renderNavigationView` - -The navigation view that will be rendered to the side of the screen and can be pulled in. - -| Type | Required | -| -------- | -------- | -| function | Yes | - ---- - -### `drawerLockMode` - -Specifies the lock mode of the drawer. The drawer can be locked in 3 states: - -- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures. -- locked closed, meaning that the drawer will stay closed and not respond to gestures. -- locked open, meaning that the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`). - -| Type | Required | -| ------------------------------------------------ | -------- | -| enum('unlocked', 'locked-closed', 'locked-open') | No | - ---- - -### `drawerPosition` - -Specifies the side of the screen from which the drawer will slide in. - -| Type | Required | -| ------------------------------------------------------------------------- | -------- | -| enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) | No | - ---- - -### `drawerWidth` - -Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. - -| Type | Required | -| ----------------------- | -------- | -| enum('none', 'on-drag') | No | - ---- - -### `onDrawerClose` - -Function called whenever the navigation view has been closed. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerOpen` - -Function called whenever the navigation view has been opened. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerSlide` - -Function called whenever there is an interaction with the navigation view. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerStateChanged` - -Function called when the drawer state has changed. The drawer can be in 3 states: - -- idle, meaning there is no interaction with the navigation view happening at the time -- dragging, meaning there is currently an interaction with the navigation view -- settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation - -| Type | Required | -| -------- | -------- | -| function | No | - -## Methods - -### `openDrawer()` - -```jsx -openDrawer(); -``` - ---- - -### `closeDrawer()` - -```jsx -closeDrawer(); -``` diff --git a/website/versioned_docs/version-0.22/modal.md b/website/versioned_docs/version-0.22/modal.md deleted file mode 100644 index dd29dd13cde..00000000000 --- a/website/versioned_docs/version-0.22/modal.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: version-0.22-modal -title: Modal -original_id: modal ---- - -A Modal component covers the native view (e.g. UIViewController, Activity) that contains the React Native root. - -Use Modal in hybrid apps that embed React Native; Modal allows the portion of your app written in React Native to present content above the enclosing native view hierarchy. - -In apps written with React Native from the root view down, you should use Navigator instead of Modal. With a top-level Navigator, you have more control over how to present the modal scene over the rest of your app by using the configureScene property. - -This component is only available in iOS at this time. - -### Props - -- [`animated`](modal.md#animated) -- [`onDismiss`](modal.md#ondismiss) -- [`onShow`](modal.md#onshow) -- [`transparent`](modal.md#transparent) -- [`visible`](modal.md#visible) - ---- - -# Reference - -## Props - -### `animated` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onDismiss` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onShow` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `transparent` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `visible` - -| Type | Required | -| ---- | -------- | -| bool | No | diff --git a/website/versioned_docs/version-0.22/netinfo.md b/website/versioned_docs/version-0.22/netinfo.md deleted file mode 100644 index 6397dfd1582..00000000000 --- a/website/versioned_docs/version-0.22/netinfo.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: version-0.22-netinfo -title: NetInfo -original_id: netinfo ---- - -NetInfo exposes info about online/offline status - -``` -NetInfo.fetch().done((reach) => { - console.log('Initial: ' + reach); -}); -function handleFirstConnectivityChange(reach) { - console.log('First change: ' + reach); - NetInfo.removeEventListener( - 'change', - handleFirstConnectivityChange - ); -} -NetInfo.addEventListener( - 'change', - handleFirstConnectivityChange -); -``` - -### IOS - -Asynchronously determine if the device is online and on a cellular network. - -- `none` - device is offline -- `wifi` - device is online and connected via wifi, or is the iOS simulator -- `cell` - device is connected via Edge, 3G, WiMax, or LTE -- `unknown` - error case and the network status is unknown - -### Android - -To request network info, you need to add the following line to your app's `AndroidManifest.xml`: - -`` Asynchronously determine if the device is connected and details about that connection. - -Android Connectivity Types. - -- `NONE` - device is offline -- `BLUETOOTH` - The Bluetooth data connection. -- `DUMMY` - Dummy data connection. -- `ETHERNET` - The Ethernet data connection. -- `MOBILE` - The Mobile data connection. -- `MOBILE_DUN` - A DUN-specific Mobile data connection. -- `MOBILE_HIPRI` - A High Priority Mobile data connection. -- `MOBILE_MMS` - An MMS-specific Mobile data connection. -- `MOBILE_SUPL` - A SUPL-specific Mobile data connection. -- `VPN` - A virtual network using one or more native bearers. Requires API Level 21 -- `WIFI` - The WIFI data connection. -- `WIMAX` - The WiMAX data connection. -- `UNKNOWN` - Unknown data connection. - -The rest ConnectivityStates are hidden by the Android API, but can be used if necessary. - -### isConnectionExpensive - -Available on Android. Detect if the current active connection is metered or not. A network is classified as metered when the user is sensitive to heavy data usage on that connection due to monetary costs, data limitations or battery/performance issues. - -``` -NetInfo.isConnectionExpensive() -.then(isConnectionExpensive => { - console.log('Connection is ' + (isConnectionExpensive ? 'Expensive' : 'Not Expensive')); -}) -.catch(error => { - console.error(error); -}); -``` - -### isConnected - -Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity. - -``` -NetInfo.isConnected.fetch().then(isConnected => { - console.log('First, is ' + (isConnected ? 'online' : 'offline')); -}); -function handleFirstConnectivityChange(isConnected) { - console.log('Then, is ' + (isConnected ? 'online' : 'offline')); - NetInfo.isConnected.removeEventListener( - 'change', - handleFirstConnectivityChange - ); -} -NetInfo.isConnected.addEventListener( - 'change', - handleFirstConnectivityChange -); -``` - -### Methods - -- [`addEventListener`](netinfo.md#addeventlistener) -- [`removeEventListener`](netinfo.md#removeeventlistener) -- [`fetch`](netinfo.md#fetch) -- [`isConnectionExpensive`](netinfo.md#isconnectionexpensive) - -### Properties - -- [`isConnected`](netinfo.md#isconnected) - ---- - -# Reference - -## Methods - -### `addEventListener()` - -```jsx -static addEventListener(eventName, handler) -``` - ---- - -### `removeEventListener()` - -```jsx -static removeEventListener(eventName, handler) -``` - ---- - -### `fetch()` - -```jsx -static fetch() -``` - ---- - -### `isConnectionExpensive()` - -```jsx -static isConnectionExpensive() -``` - -## Properties diff --git a/website/versioned_docs/version-0.22/pushnotificationios.md b/website/versioned_docs/version-0.22/pushnotificationios.md deleted file mode 100644 index 44477e1c2d7..00000000000 --- a/website/versioned_docs/version-0.22/pushnotificationios.md +++ /dev/null @@ -1,288 +0,0 @@ ---- -id: version-0.22-pushnotificationios -title: PushNotificationIOS -original_id: pushnotificationios ---- - -Handle push notifications for your app, including permission handling and icon badge number. - -To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). - -[Manually link](linking-libraries-ios.md#manual-linking) the PushNotificationIOS library - -- Be sure to add the following to your `Header Search Paths`: `$(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS` -- Set the search to `recursive` - -Finally, to enable support for `notification` and `register` events you need to augment your AppDelegate. - -At the top of your `AppDelegate.m`: - -`#import "RCTPushNotificationManager.h"` - -And then in your AppDelegate implementation add the following: - -``` - // Required to register for notifications - - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings - { - [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings]; - } - // Required for the register event. - - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken - { - [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; - } - // Required for the notification event. - - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification - { - [RCTPushNotificationManager didReceiveRemoteNotification:notification]; - } - // Required for the localNotification event. - - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification - { - [RCTPushNotificationManager didReceiveLocalNotification:notification]; - } -``` - -### Methods - -- [`presentLocalNotification`](pushnotificationios.md#presentlocalnotification) -- [`scheduleLocalNotification`](pushnotificationios.md#schedulelocalnotification) -- [`cancelAllLocalNotifications`](pushnotificationios.md#cancelalllocalnotifications) -- [`setApplicationIconBadgeNumber`](pushnotificationios.md#setapplicationiconbadgenumber) -- [`getApplicationIconBadgeNumber`](pushnotificationios.md#getapplicationiconbadgenumber) -- [`cancelLocalNotifications`](pushnotificationios.md#cancellocalnotifications) -- [`addEventListener`](pushnotificationios.md#addeventlistener) -- [`requestPermissions`](pushnotificationios.md#requestpermissions) -- [`abandonPermissions`](pushnotificationios.md#abandonpermissions) -- [`checkPermissions`](pushnotificationios.md#checkpermissions) -- [`removeEventListener`](pushnotificationios.md#removeeventlistener) -- [`popInitialNotification`](pushnotificationios.md#popinitialnotification) -- [`constructor`](pushnotificationios.md#constructor) -- [`getMessage`](pushnotificationios.md#getmessage) -- [`getSound`](pushnotificationios.md#getsound) -- [`getAlert`](pushnotificationios.md#getalert) -- [`getBadgeCount`](pushnotificationios.md#getbadgecount) -- [`getData`](pushnotificationios.md#getdata) - ---- - -# Reference - -## Methods - -### `presentLocalNotification()` - -```jsx -static presentLocalNotification(details) -``` - -Schedules the localNotification for immediate presentation. - -details is an object containing: - -- `alertBody` : The message displayed in the notification alert. -- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; -- `soundName` : The sound played when the notification is fired (optional). -- `category` : The category of this notification, required for actionable notifications (optional). -- `userInfo` : An optional object containing additional notification data. - ---- - -### `scheduleLocalNotification()` - -```jsx -static scheduleLocalNotification(details) -``` - -Schedules the localNotification for future presentation. - -details is an object containing: - -- `fireDate` : The date and time when the system should deliver the notification. -- `alertBody` : The message displayed in the notification alert. -- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; -- `soundName` : The sound played when the notification is fired (optional). -- `category` : The category of this notification, required for actionable notifications (optional). -- `userInfo` : An optional object containing additional notification data. - ---- - -### `cancelAllLocalNotifications()` - -```jsx -static cancelAllLocalNotifications() -``` - -Cancels all scheduled localNotifications - ---- - -### `setApplicationIconBadgeNumber()` - -```jsx -static setApplicationIconBadgeNumber(number) -``` - -Sets the badge number for the app icon on the home screen - ---- - -### `getApplicationIconBadgeNumber()` - -```jsx -static getApplicationIconBadgeNumber(callback) -``` - -Gets the current badge number for the app icon on the home screen - ---- - -### `cancelLocalNotifications()` - -```jsx -static cancelLocalNotifications(userInfo) -``` - -Cancel local notifications. - -Optionally restricts the set of canceled notifications to those notifications whose `userInfo` fields match the corresponding fields in the `userInfo` argument. - ---- - -### `addEventListener()` - -```jsx -static addEventListener(type, handler) -``` - -Attaches a listener to remote notification events while the app is running in the foreground or the background. - -Valid events are: - -- `notification` : Fired when a remote notification is received. The handler will be invoked with an instance of `PushNotificationIOS`. -- `register`: Fired when the user registers for remote notifications. The handler will be invoked with a hex string representing the deviceToken. - ---- - -### `requestPermissions()` - -```jsx -static requestPermissions(permissions?) -``` - -Requests notification permissions from iOS, prompting the user's dialog box. By default, it will request all notification permissions, but a subset of these can be requested by passing a map of requested permissions. The following permissions are supported: - -- `alert` -- `badge` -- `sound` - -If a map is provided to the method, only the permissions with truthy values will be requested. - ---- - -### `abandonPermissions()` - -```jsx -static abandonPermissions() -``` - -Unregister for all remote notifications received via Apple Push Notification service. - -You should call this method in rare circumstances only, such as when a new version of the app removes support for all types of remote notifications. Users can temporarily prevent apps from receiving remote notifications through the Notifications section of the Settings app. Apps unregistered through this method can always re-register. - ---- - -### `checkPermissions()` - -```jsx -static checkPermissions(callback) -``` - -See what push permissions are currently enabled. `callback` will be invoked with a `permissions` object: - -- `alert` :boolean -- `badge` :boolean -- `sound` :boolean - ---- - -### `removeEventListener()` - -```jsx -static removeEventListener(type, handler) -``` - -Removes the event listener. Do this in `componentWillUnmount` to prevent memory leaks - ---- - -### `popInitialNotification()` - -```jsx -static popInitialNotification() -``` - -An initial notification will be available if the app was cold-launched from a notification. - -The first caller of `popInitialNotification` will get the initial notification object, or `null`. Subsequent invocations will return null. - ---- - -### `constructor()` - -```jsx -constructor(nativeNotif); -``` - -You will never need to instantiate `PushNotificationIOS` yourself. Listening to the `notification` event and invoking `popInitialNotification` is sufficient - ---- - -### `getMessage()` - -```jsx -getMessage(); -``` - -An alias for `getAlert` to get the notification's main message string - ---- - -### `getSound()` - -```jsx -getSound(); -``` - -Gets the sound string from the `aps` object - ---- - -### `getAlert()` - -```jsx -getAlert(); -``` - -Gets the notification's main message from the `aps` object - ---- - -### `getBadgeCount()` - -```jsx -getBadgeCount(); -``` - -Gets the badge count number from the `aps` object - ---- - -### `getData()` - -```jsx -getData(); -``` - -Gets the data object on the notif diff --git a/website/versioned_docs/version-0.22/statusbar.md b/website/versioned_docs/version-0.22/statusbar.md deleted file mode 100644 index 808862f30ee..00000000000 --- a/website/versioned_docs/version-0.22/statusbar.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: version-0.22-statusbar -title: StatusBar -original_id: statusbar ---- - -Component to control the app status bar. - -### Usage with Navigator - -It is possible to have multiple `StatusBar` components mounted at the same time. The props will be merged in the order the `StatusBar` components were mounted. One use case is to specify status bar styles per route using `Navigator`. - -``` - - - - - - } - /> - -``` - -### Imperative API - -For cases where using a component is not ideal, there is also an imperative API exposed as static functions on the component. It is however not recommended to use the static API and the compoment for the same prop because any value set by the static API will get overriden by the one set by the component in the next render. - -### Props - -- [`animated`](statusbar.md#animated) -- [`hidden`](statusbar.md#hidden) -- [`backgroundColor`](statusbar.md#backgroundcolor) -- [`translucent`](statusbar.md#translucent) -- [`barStyle`](statusbar.md#barstyle) -- [`networkActivityIndicatorVisible`](statusbar.md#networkactivityindicatorvisible) -- [`showHideTransition`](statusbar.md#showhidetransition) - -### Methods - -- [`setHidden`](statusbar.md#sethidden) -- [`setBarStyle`](statusbar.md#setbarstyle) -- [`setNetworkActivityIndicatorVisible`](statusbar.md#setnetworkactivityindicatorvisible) -- [`setBackgroundColor`](statusbar.md#setbackgroundcolor) -- [`setTranslucent`](statusbar.md#settranslucent) - -### Type Definitions - -- [`StatusBarStyle`](statusbar.md#statusbarstyle) -- [`StatusBarAnimation`](statusbar.md#statusbaranimation) - ---- - -# Reference - -## Props - -### `animated` - -If the transition between status bar property changes should be animated. Supported for backgroundColor, barStyle and hidden. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `hidden` - -If the status bar is hidden. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `backgroundColor` - -The background color of the status bar. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `translucent` - -If the status bar is translucent. When translucent is set to true, the app will draw under the status bar. This is useful when using a semi transparent status bar color. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `barStyle` - -Sets the color of the status bar text. - -| Type | Required | Platform | -| -------------------------------- | -------- | -------- | -| enum('default', 'light-content') | No | iOS | - ---- - -### `networkActivityIndicatorVisible` - -If the network activity indicator should be visible. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `showHideTransition` - -The transition effect when showing and hiding the status bar using the `hidden` prop. Defaults to 'fade'. - -| Type | Required | Platform | -| --------------------- | -------- | -------- | -| enum('fade', 'slide') | No | iOS | - -## Methods - -### `setHidden()` - -```jsx -static setHidden(hidden: boolean, [animation]: StatusBarAnimation) -``` - ---- - -### `setBarStyle()` - -```jsx -static setBarStyle(style: StatusBarStyle, [animated]: boolean) -``` - ---- - -### `setNetworkActivityIndicatorVisible()` - -```jsx -static setNetworkActivityIndicatorVisible(visible: boolean) -``` - ---- - -### `setBackgroundColor()` - -```jsx -static setBackgroundColor(color, [animated]: boolean) -``` - ---- - -### `setTranslucent()` - -```jsx -static setTranslucent(translucent: boolean) -``` - -## Type Definitions - -### StatusBarStyle - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| ------------- | ----------- | -| default | | -| light-content | | - ---- - -### StatusBarAnimation - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| ----- | ----------- | -| none | | -| fade | | -| slide | | diff --git a/website/versioned_docs/version-0.22/statusbarios.md b/website/versioned_docs/version-0.22/statusbarios.md deleted file mode 100644 index 6f4c3e32df9..00000000000 --- a/website/versioned_docs/version-0.22/statusbarios.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: version-0.22-statusbarios -title: StatusBarIOS -original_id: statusbarios ---- - -Deprecated. Use `StatusBar` instead. - -### Methods - -- [`setStyle`](statusbarios.md#setstyle) -- [`setHidden`](statusbarios.md#sethidden) -- [`setNetworkActivityIndicatorVisible`](statusbarios.md#setnetworkactivityindicatorvisible) - ---- - -# Reference - -## Methods - -### `setStyle()` - -```jsx -static setStyle(style, animated?) -``` - ---- - -### `setHidden()` - -```jsx -static setHidden(hidden, animation?) -``` - ---- - -### `setNetworkActivityIndicatorVisible()` - -```jsx -static setNetworkActivityIndicatorVisible(visible) -``` diff --git a/website/versioned_docs/version-0.22/textinput.md b/website/versioned_docs/version-0.22/textinput.md deleted file mode 100644 index a49aa9da218..00000000000 --- a/website/versioned_docs/version-0.22/textinput.md +++ /dev/null @@ -1,423 +0,0 @@ ---- -id: version-0.22-textinput -title: TextInput -original_id: textinput ---- - -A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. - -The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A basic example: - -``` - this.setState({text})} - value={this.state.text} - /> -``` - -Note that some props are only available with `multiline={true/false}`: - -### Props - -- [View props...](view.md#props) - -* [`onSubmitEditing`](textinput.md#onsubmitediting) -* [`autoCapitalize`](textinput.md#autocapitalize) -* [`autoFocus`](textinput.md#autofocus) -* [`blurOnSubmit`](textinput.md#bluronsubmit) -* [`defaultValue`](textinput.md#defaultvalue) -* [`editable`](textinput.md#editable) -* [`keyboardType`](textinput.md#keyboardtype) -* [`maxLength`](textinput.md#maxlength) -* [`multiline`](textinput.md#multiline) -* [`onBlur`](textinput.md#onblur) -* [`onChange`](textinput.md#onchange) -* [`onChangeText`](textinput.md#onchangetext) -* [`onEndEditing`](textinput.md#onendediting) -* [`onFocus`](textinput.md#onfocus) -* [`onLayout`](textinput.md#onlayout) -* [`onSelectionChange`](textinput.md#onselectionchange) -* [`autoCorrect`](textinput.md#autocorrect) -* [`placeholder`](textinput.md#placeholder) -* [`placeholderTextColor`](textinput.md#placeholdertextcolor) -* [`secureTextEntry`](textinput.md#securetextentry) -* [`selectionColor`](textinput.md#selectioncolor) -* [`style`](textinput.md#style) -* [`value`](textinput.md#value) -* [`numberOfLines`](textinput.md#numberoflines) -* [`underlineColorAndroid`](textinput.md#underlinecolorandroid) -* [`clearButtonMode`](textinput.md#clearbuttonmode) -* [`clearTextOnFocus`](textinput.md#cleartextonfocus) -* [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) -* [`keyboardAppearance`](textinput.md#keyboardappearance) -* [`onKeyPress`](textinput.md#onkeypress) -* [`returnKeyType`](textinput.md#returnkeytype) -* [`selectTextOnFocus`](textinput.md#selecttextonfocus) -* [`selectionState`](textinput.md#selectionstate) - -### Methods - -- [`isFocused`](textinput.md#isfocused) -- [`clear`](textinput.md#clear) - ---- - -# Reference - -## Props - -### `onSubmitEditing` - -Callback that is called when the text input's submit button is pressed. Invalid if multiline={true} is specified. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `autoCapitalize` - -Can tell TextInput to automatically capitalize certain characters. - -- characters: all characters, -- words: first letter of each word -- sentences: first letter of each sentence (default) -- none: don't auto capitalize anything - -| Type | Required | -| ------------------------------------------------ | -------- | -| enum('none', 'sentences', 'words', 'characters') | No | - ---- - -### `autoFocus` - -If true, focuses the input on componentDidMount. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `blurOnSubmit` - -If true, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting blurOnSubmit to true means that pressing return will blur the field and trigger the onSubmitEditing event instead of inserting a newline into the field. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `defaultValue` - -Provides an initial value that will change when the user starts typing. Useful for basic use-cases where you don't want to deal with listening to events and updating the value prop to keep the controlled state in sync. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `editable` - -If false, text is not editable. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `keyboardType` - -Determines which keyboard to open, e.g.`numeric`. - -The following values work across platforms: - -- default -- numeric -- email-address - -| Type | Required | -| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | - ---- - -### `maxLength` - -Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `multiline` - -If true, the text input can be multiple lines. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onBlur` - -Callback that is called when the text input is blurred - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChange` - -Callback that is called when the text input's text changes. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChangeText` - -Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onEndEditing` - -Callback that is called when text input ends. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onFocus` - -Callback that is called when the text input is focused - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{x, y, width, height}`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onSelectionChange` - -Callback that is called when the text input selection is changed - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `autoCorrect` - -If false, disables auto-correct. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `placeholder` - -The string that will be rendered before text input has been entered - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `placeholderTextColor` - -The text color of the placeholder string - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `secureTextEntry` - -If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `selectionColor` - -The highlight (and cursor on ios) color of the text input - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `style` - -Styles - -| Type | Required | -| --------------------- | -------- | -| [Text](text.md#style) | No | - ---- - -### `value` - -The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to only setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `numberOfLines` - -Sets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | Android | - ---- - -### `underlineColorAndroid` - -The color of the textInput underline. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `clearButtonMode` - -When the clear button should appear on the right side of the text view - -| Type | Required | Platform | -| ---------------------------------------------------------- | -------- | -------- | -| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | - ---- - -### `clearTextOnFocus` - -If true, clears the text field automatically when editing begins - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `enablesReturnKeyAutomatically` - -If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `keyboardAppearance` - -Determines the color of the keyboard. - -| Type | Required | Platform | -| -------------------------------- | -------- | -------- | -| enum('default', 'light', 'dark') | No | iOS | - ---- - -### `onKeyPress` - -Callback that is called when a key is pressed. Pressed key value is passed as an argument to the callback handler. Fires before onChange callbacks. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `returnKeyType` - -Determines how the return key should look. - -| Type | Required | Platform | -| ------------------------------------------------------------------------------------------------------------- | -------- | -------- | -| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | iOS | - ---- - -### `selectTextOnFocus` - -If true, all text will automatically be selected on focus - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `selectionState` - -See DocumentSelectionState.js, some state that is responsible for maintaining selection information for a document - -| Type | Required | Platform | -| ---------------------- | -------- | -------- | -| DocumentSelectionState | No | iOS | - -## Methods - -### `isFocused()` - -```jsx -isFocused(): -``` - ---- - -### `clear()` - -```jsx -clear(); -``` diff --git a/website/versioned_docs/version-0.22/touchablewithoutfeedback.md b/website/versioned_docs/version-0.22/touchablewithoutfeedback.md deleted file mode 100644 index 65d9130e355..00000000000 --- a/website/versioned_docs/version-0.22/touchablewithoutfeedback.md +++ /dev/null @@ -1,162 +0,0 @@ ---- -id: version-0.22-touchablewithoutfeedback -title: TouchableWithoutFeedback -original_id: touchablewithoutfeedback ---- - -Do not use unless you have a very good reason. All the elements that respond to press should have a visual feedback when touched. This is one of the primary reason a "web" app doesn't feel "native". - -> **NOTE**: TouchableWithoutFeedback supports only one child -> -> If you wish to have several child components, wrap them in a View. - -### Props - -- [`hitSlop`](touchablewithoutfeedback.md#hitslop) -- [`accessibilityComponentType`](touchablewithoutfeedback.md#accessibilitycomponenttype) -- [`accessible`](touchablewithoutfeedback.md#accessible) -- [`delayLongPress`](touchablewithoutfeedback.md#delaylongpress) -- [`delayPressIn`](touchablewithoutfeedback.md#delaypressin) -- [`delayPressOut`](touchablewithoutfeedback.md#delaypressout) -- [`disabled`](touchablewithoutfeedback.md#disabled) -- [`accessibilityTraits`](touchablewithoutfeedback.md#accessibilitytraits) -- [`onLayout`](touchablewithoutfeedback.md#onlayout) -- [`onLongPress`](touchablewithoutfeedback.md#onlongpress) -- [`onPress`](touchablewithoutfeedback.md#onpress) -- [`onPressIn`](touchablewithoutfeedback.md#onpressin) -- [`onPressOut`](touchablewithoutfeedback.md#onpressout) -- [`pressRetentionOffset`](touchablewithoutfeedback.md#pressretentionoffset) - ---- - -# Reference - -## Props - -### `hitSlop` - -This defines how far your touch can start away from the button. This is added to `pressRetentionOffset` when moving off of the button. ** NOTE ** The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views. - -| Type | Required | -| ------------------------------------------------------------------ | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | - ---- - -### `accessibilityComponentType` - -| Type | Required | -| ------------------------------- | -------- | -| View.AccessibilityComponentType | No | - ---- - -### `accessible` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `delayLongPress` - -Delay in ms, from onPressIn, before onLongPress is called. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `delayPressIn` - -Delay in ms, from the start of the touch, before onPressIn is called. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `delayPressOut` - -Delay in ms, from the release of the touch, before onPressOut is called. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `disabled` - -If true, disable all interactions for this component. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `accessibilityTraits` - -| Type | Required | -| ------------------------------------------------------------ | -------- | -| View.AccessibilityTraits, ,array of View.AccessibilityTraits | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with - -`{nativeEvent: {layout: {x, y, width, height}}}` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLongPress` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPress` - -Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock). - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPressIn` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPressOut` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `pressRetentionOffset` - -When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations. - -| Type | Required | -| ------------------------------------------------------------------ | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | diff --git a/website/versioned_docs/version-0.22/vibration.md b/website/versioned_docs/version-0.22/vibration.md deleted file mode 100644 index 004836afa12..00000000000 --- a/website/versioned_docs/version-0.22/vibration.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -id: version-0.22-vibration -title: Vibration -original_id: vibration ---- - -The Vibration API is exposed at `Vibration.vibrate()`. The vibration is synchronous so this method will return immediately. - -There will be no effect on devices that do not support Vibration, eg. the simulator. - -Note for android add `` to `AndroidManifest.xml` - -Vibration patterns are currently unsupported. - -### Methods - -- [`vibrate`](vibration.md#vibrate) - ---- - -# Reference - -## Methods - -### `vibrate()` - -```jsx -static vibrate(duration) -``` diff --git a/website/versioned_docs/version-0.22/vibrationios.md b/website/versioned_docs/version-0.22/vibrationios.md deleted file mode 100644 index 47f5f18e4dd..00000000000 --- a/website/versioned_docs/version-0.22/vibrationios.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -id: version-0.22-vibrationios -title: VibrationIOS -original_id: vibrationios ---- - -NOTE: `VibrationIOS` is being deprecated. Use `Vibration` instead. - -The Vibration API is exposed at `VibrationIOS.vibrate()`. On iOS, calling this function will trigger a one second vibration. The vibration is synchronous so this method will return immediately. - -There will be no effect on devices that do not support Vibration, eg. the iOS simulator. - -Vibration patterns are currently unsupported. - -### Methods - -- [`vibrate`](vibrationios.md#vibrate) - ---- - -# Reference - -## Methods - -### `vibrate()` - -```jsx -static vibrate() -``` - -@deprecated diff --git a/website/versioned_docs/version-0.22/webview.md b/website/versioned_docs/version-0.22/webview.md deleted file mode 100644 index 42a6bccebdf..00000000000 --- a/website/versioned_docs/version-0.22/webview.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: version-0.22-webview -title: WebView -original_id: webview ---- - -Renders a native WebView. - -### Props - -- [View props...](view.md#props) - -* [`scalesPageToFit`](webview.md#scalespagetofit) -* [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) -* [`onShouldStartLoadWithRequest`](webview.md#onshouldstartloadwithrequest) -* [`injectedJavaScript`](webview.md#injectedjavascript) -* [`onError`](webview.md#onerror) -* [`onLoad`](webview.md#onload) -* [`onLoadEnd`](webview.md#onloadend) -* [`onLoadStart`](webview.md#onloadstart) -* [`onNavigationStateChange`](webview.md#onnavigationstatechange) -* [`renderError`](webview.md#rendererror) -* [`renderLoading`](webview.md#renderloading) -* [`contentInset`](webview.md#contentinset) -* [`source`](webview.md#source) -* [`startInLoadingState`](webview.md#startinloadingstate) -* [`style`](webview.md#style) -* [`decelerationRate`](webview.md#decelerationrate) -* [`domStorageEnabled`](webview.md#domstorageenabled) -* [`javaScriptEnabled`](webview.md#javascriptenabled) -* [`allowsInlineMediaPlayback`](webview.md#allowsinlinemediaplayback) -* [`bounces`](webview.md#bounces) -* [`scrollEnabled`](webview.md#scrollenabled) -* [`url`](webview.md#url) -* [`html`](webview.md#html) - -### Methods - -- [`goForward`](webview.md#goforward) -- [`goBack`](webview.md#goback) -- [`reload`](webview.md#reload) -- [`updateNavigationState`](webview.md#updatenavigationstate) -- [`getWebViewHandle`](webview.md#getwebviewhandle) -- [`onLoadingStart`](webview.md#onloadingstart) -- [`onLoadingError`](webview.md#onloadingerror) -- [`onLoadingFinish`](webview.md#onloadingfinish) - ---- - -# Reference - -## Props - -### `scalesPageToFit` - -Sets whether the webpage scales to fit the view and the user can change the scale. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `automaticallyAdjustContentInsets` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onShouldStartLoadWithRequest` - -Allows custom handling of any webview requests by a JS handler. Return true or false from this method to continue loading the request. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `injectedJavaScript` - -Sets the JS to be injected when the webpage loads. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `onError` - -Invoked when load fails - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoad` - -Invoked when load finish - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadEnd` - -Invoked when load either succeeds or fails - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadStart` - -Invoked on load start - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onNavigationStateChange` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `renderError` - -Function that returns a view to show if there's an error. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `renderLoading` - -Function that returns a loading indicator. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `contentInset` - -| Type | Required | -| ------------------------------------------------------------------ | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | - ---- - -### `source` - -Loads static html or a uri (with optional headers) in the WebView. - -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------- | -------- | -| object: {uri: string,method: string,headers: object,body: string}, ,object: {html: string,baseUrl: string}, ,number | No | - ---- - -### `startInLoadingState` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use string shortcuts `"normal"` and `"fast"` which match the underlying iOS settings for `UIScrollViewDecelerationRateNormal` and `UIScrollViewDecelerationRateFast` respectively. - -- Normal: 0.998 -- Fast: 0.9 (the default for iOS WebView) - -| Type | Required | Platform | -| ------------------------------------- | -------- | -------- | -| ScrollView.propTypes.decelerationRate | No | iOS | - ---- - -### `domStorageEnabled` - -Used on Android only, controls whether DOM Storage is enabled or not - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `javaScriptEnabled` - -Used on Android only, JS is enabled by default for WebView on iOS - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `allowsInlineMediaPlayback` - -Determines whether HTML5 videos play inline or use the native full-screen controller. default value `false` **NOTE** : "In order for video to play inline, not only does this property need to be set to true, but the video element in the HTML document must also include the webkit-playsinline attribute." - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bounces` - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEnabled` - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `url` - -**Deprecated.** Use the `source` prop instead. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `html` - -**Deprecated.** Use the `source` prop instead. - -| Type | Required | -| ------ | -------- | -| string | No | - -## Methods - -### `goForward()` - -```jsx -goForward(); -``` - ---- - -### `goBack()` - -```jsx -goBack(); -``` - ---- - -### `reload()` - -```jsx -reload(); -``` - ---- - -### `updateNavigationState()` - -```jsx -updateNavigationState((event: Event)); -``` - -We return an event with a bunch of fields including: url, title, loading, canGoBack, canGoForward - ---- - -### `getWebViewHandle()` - -```jsx -getWebViewHandle(): -``` - ---- - -### `onLoadingStart()` - -```jsx -onLoadingStart((event: Event)); -``` - ---- - -### `onLoadingError()` - -```jsx -onLoadingError((event: Event)); -``` - ---- - -### `onLoadingFinish()` - -```jsx -onLoadingFinish((event: Event)); -``` diff --git a/website/versioned_docs/version-0.23/animated.md b/website/versioned_docs/version-0.23/animated.md deleted file mode 100644 index 669ec4fece5..00000000000 --- a/website/versioned_docs/version-0.23/animated.md +++ /dev/null @@ -1,481 +0,0 @@ ---- -id: version-0.23-animated -title: Animated -original_id: animated ---- - -Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful. - -The general workflow is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates either via animations, such as `Animated.timing`, or by hooking into gestures like panning or scrolling via `Animated.event`. `Animated.Value` can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted: - -```jsx -class FadeInView extends React.Component { - constructor(props) { - super(props); - this.state = { - fadeAnim: new Animated.Value(0) // init opacity 0 - }; - } - componentDidMount() { - Animated.timing( - // Uses easing functions - this.state.fadeAnim, // The value to drive - { toValue: 1 } // Configuration - ).start(); // Don't forget start! - } - render() { - return ( - - {' '} - // Binds - {this.props.children} - - ); - } -} -``` - -Note that only animatable components can be animated. `View`, `Text`, and `Image` are already provided, and you can create custom ones with `createAnimatedComponent`. These components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default. - -Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation. - -A single `Animated.Value` can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value. - -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` in the example above like so: - -```jsx - style={{ - opacity: this.state.fadeAnim, // Binds directly - transform: [{ - translateY: this.state.fadeAnim.interpolate({ - inputRange: [0, 1], - outputRange: [150, 0] // 0 : 150, 0.5 : 75, 1 : 0 - }), - }], - }}> -``` - -Animations can also be combined in complex ways using composition functions such as `sequence` and `parallel`, and can also be chained together by setting the `toValue` of one animation to be another `Animated.Value`. - -`Animated.ValueXY` is handy for 2D animations, like panning, and there are other helpful additions like `setOffset` and `getLayout` to aid with typical interaction patterns, like drag-and-drop. - -You can see more example usage in `AnimationExample.js`, the Gratuitous Animation App, and [Animations documentation guide](animations.md). - -Note that `Animated` is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout `Animated.Value.addListener` as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future. - -### Methods - -- [`decay`](animated.md#decay) -- [`timing`](animated.md#timing) -- [`spring`](animated.md#spring) -- [`add`](animated.md#add) -- [`multiply`](animated.md#multiply) -- [`modulo`](animated.md#modulo) -- [`delay`](animated.md#delay) -- [`sequence`](animated.md#sequence) -- [`parallel`](animated.md#parallel) -- [`stagger`](animated.md#stagger) -- [`event`](animated.md#event) -- [`createAnimatedComponent`](animated.md#createanimatedcomponent) - -### Properties - -- [`Value`](animated.md#value) -- [`ValueXY`](animated.md#valuexy) - -### Classes - -- [`AnimatedValue`](animated.md#animatedvalue) -- [`AnimatedValueXY`](animated.md#animatedvaluexy) -- [`AnimatedProps`](animated.md#animatedprops) - ---- - -# Reference - -## Methods - -### `decay()` - -```jsx -static decay(value, config) -``` - -Animates a value from an initial velocity to zero based on a decay coefficient. - ---- - -### `timing()` - -```jsx -static timing(value, config) -``` - -Animates a value along a timed easing curve. The `Easing` module has tons of pre-defined curves, or you can use your own function. - ---- - -### `spring()` - -```jsx -static spring(value, config) -``` - -Spring animation based on Rebound and Origami. Tracks velocity state to create fluid motions as the `toValue` updates, and can be chained together. - ---- - -### `add()` - -```jsx -static add(a, b) -``` - -Creates a new Animated value composed from two Animated values added together. - ---- - -### `multiply()` - -```jsx -static multiply(a, b) -``` - -Creates a new Animated value composed from two Animated values multiplied together. - ---- - -### `modulo()` - -```jsx -static modulo(a, modulus) -``` - -Creates a new Animated value that is the (non-negative) modulo of the provided Animated value - ---- - -### `delay()` - -```jsx -static delay(time) -``` - -Starts an animation after the given delay. - ---- - -### `sequence()` - -```jsx -static sequence(animations) -``` - -Starts an array of animations in order, waiting for each to complete before starting the next. If the current running animation is stopped, no following animations will be started. - ---- - -### `parallel()` - -```jsx -static parallel(animations, config?) -``` - -Starts an array of animations all at the same time. By default, if one of the animations is stopped, they will all be stopped. You can override this with the `stopTogether` flag. - ---- - -### `stagger()` - -```jsx -static stagger(time, animations) -``` - -Array of animations may run in parallel (overlap), but are started in sequence with successive delays. Nice for doing trailing effects. - ---- - -### `event()` - -```jsx -static event(argMapping, config?) -``` - -Takes an array of mappings and extracts values from each arg accordingly, then calls `setValue` on the mapped outputs. e.g. - -```jsx - onScroll={Animated.event( - [{nativeEvent: {contentOffset: {x: this._scrollX}}}] - {listener}, // Optional async listener - ) - ... - onPanResponderMove: Animated.event([ - null, // raw event arg ignored - {dx: this._panX}, // gestureState arg - ]), -``` - ---- - -### `createAnimatedComponent()` - -```jsx -static createAnimatedComponent(Component) -``` - -Make any React component Animatable. Used to create `Animated.View`, etc. - -## Properties - ---- - -## Classes - -## class AnimatedValue - -Standard value for driving animations. One `Animated.Value` can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling `setValue`) will stop any previous ones. - -### Methods - -### `constructor()` - -```jsx -constructor(value); -``` - ---- - -### `setValue()` - -```jsx -setValue(value); -``` - -Directly set the value. This will stop any animations running on the value and update all the bound properties. - ---- - -### `setOffset()` - -```jsx -setOffset(offset); -``` - -Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture. - ---- - -### `flattenOffset()` - -```jsx -flattenOffset(); -``` - -Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged. - ---- - -### `addListener()` - -```jsx -addListener(callback); -``` - -Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively. - ---- - -### `removeListener()` - -```jsx -removeListener(id); -``` - ---- - -### `removeAllListeners()` - -```jsx -removeAllListeners(); -``` - ---- - -### `stopAnimation()` - -```jsx -stopAnimation(callback?) -``` - -Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout. - ---- - -### `interpolate()` - -```jsx -interpolate(config); -``` - -Interpolates the value before updating the property, e.g. mapping 0-1 to 0-10. - ---- - -### `animate()` - -```jsx -animate(animation, callback); -``` - -Typically only used internally, but could be used by a custom Animation class. - ---- - -### `stopTracking()` - -```jsx -stopTracking(); -``` - -Typically only used internally. - ---- - -### `track()` - -```jsx -track(tracking); -``` - -Typically only used internally. - ---- - -## class AnimatedValueXY - -2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal `Animated.Value`, but multiplexed. Contains two regular `Animated.Value`s under the hood. Example: - -```jsx -class DraggableView extends React.Component { - constructor(props) { - super(props); - this.state = { - pan: new Animated.ValueXY() // inits to zero - }; - this.state.panResponder = PanResponder.create({ - onStartShouldSetPanResponder: () => true, - onPanResponderMove: Animated.event([ - null, - { - dx: this.state.pan.x, // x,y are Animated.Value - dy: this.state.pan.y - } - ]), - onPanResponderRelease: () => { - Animated.spring( - this.state.pan, // Auto-multiplexed - { toValue: { x: 0, y: 0 } } // Back to zero - ).start(); - } - }); - } - render() { - return ( - - {this.props.children} - - ); - } -} -``` - -### Methods - -### `constructor()` - -```jsx -constructor(valueIn?) -``` - ---- - -### `setValue()` - -```jsx -setValue(value); -``` - ---- - -### `setOffset()` - -```jsx -setOffset(offset); -``` - ---- - -### `flattenOffset()` - -```jsx -flattenOffset(); -``` - ---- - -### `stopAnimation()` - -```jsx -stopAnimation(callback?) -``` - ---- - -### `addListener()` - -```jsx -addListener(callback); -``` - ---- - -### `removeListener()` - -```jsx -removeListener(id); -``` - ---- - -### `getLayout()` - -```jsx -getLayout(); -``` - -Converts `{x, y}` into `{left, top}` for use in style, e.g. - -```jsx - style={this.state.anim.getLayout()} -``` - ---- - -### `getTranslateTransform()` - -```jsx -getTranslateTransform(); -``` - -Converts `{x, y}` into a useable translation transform, e.g. - -```jsx - style={{ - transform: this.state.anim.getTranslateTransform() - }} -``` diff --git a/website/versioned_docs/version-0.23/asyncstorage.md b/website/versioned_docs/version-0.23/asyncstorage.md deleted file mode 100644 index f851635e76f..00000000000 --- a/website/versioned_docs/version-0.23/asyncstorage.md +++ /dev/null @@ -1,263 +0,0 @@ ---- -id: version-0.23-asyncstorage -title: AsyncStorage -original_id: asyncstorage ---- - -AsyncStorage is an asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage. - -It is recommended that you use an abstraction on top of AsyncStorage instead of AsyncStorage directly for anything more than light usage since it operates globally. - -This JS code is a facade over the native iOS implementation to provide a clear JS API, real Error objects, and non-multi functions. Each method returns a `Promise` object. - -### Methods - -- [`getItem`](asyncstorage.md#getitem) -- [`setItem`](asyncstorage.md#setitem) -- [`removeItem`](asyncstorage.md#removeitem) -- [`mergeItem`](asyncstorage.md#mergeitem) -- [`clear`](asyncstorage.md#clear) -- [`getAllKeys`](asyncstorage.md#getallkeys) -- [`flushGetRequests`](asyncstorage.md#flushgetrequests) -- [`multiGet`](asyncstorage.md#multiget) -- [`multiSet`](asyncstorage.md#multiset) -- [`multiRemove`](asyncstorage.md#multiremove) -- [`multiMerge`](asyncstorage.md#multimerge) - -### Properties - ---- - -# Reference - -## Methods - -### `getItem()` - -```jsx -static getItem(key, callback?) -``` - -Fetches `key` and passes the result to `callback`, along with an `Error` if there is any. Returns a `Promise` object. - ---- - -### `setItem()` - -```jsx -static setItem(key, value, callback?) -``` - -Sets `value` for `key` and calls `callback` on completion, along with an `Error` if there is any. Returns a `Promise` object. - ---- - -### `removeItem()` - -```jsx -static removeItem(key, callback?) -``` - -Returns a `Promise` object. - ---- - -### `mergeItem()` - -```jsx -static mergeItem(key, value, callback?) -``` - -Merges existing value with input value, assuming they are stringified json. Returns a `Promise` object. Not supported by all native implementations. - -Example: - -```jsx -let UID123_object = { - name: 'Chris', - age: 30, - traits: { hair: 'brown', eyes: 'brown' } -}; - -// need only define what will be added or updated -let UID123_delta = { - age: 31, - traits: { eyes: 'blue', shoe_size: 10 } -}; - -AsyncStorage.setItem( - store_key, - JSON.stringify(UID123_object), - () => { - AsyncStorage.mergeItem( - 'UID123', - JSON.stringify(UID123_delta), - () => { - AsyncStorage.getItem('UID123', (err, result) => { - console.log(result); - // => {'name':'Chris','age':31,'traits':{'shoe_size':10,'hair':'brown','eyes':'blue'}} - }); - } - ); - } -); -``` - ---- - -### `clear()` - -```jsx -static clear(callback?) -``` - -Erases _all_ AsyncStorage for all clients, libraries, etc. You probably don't want to call this - use removeItem or multiRemove to clear only your own keys instead. Returns a `Promise` object. - ---- - -### `getAllKeys()` - -```jsx -static getAllKeys(callback?) -``` - -Gets _all_ keys known to the app, for all callers, libraries, etc. Returns a `Promise` object. - -Example: see multiGet for example - ---- - -### `flushGetRequests()` - -```jsx -static flushGetRequests() -``` - -Flushes any pending requests using a single multiget - ---- - -### `multiGet()` - -```jsx -static multiGet(keys, callback?) -``` - -multiGet invokes callback with an array of key-value pair arrays that matches the input format of multiSet. Returns a `Promise` object. - -multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']]) - -Example: - -```jsx -AsyncStorage.getAllKeys((err, keys) => { - AsyncStorage.multiGet(keys, (err, stores) => { - stores.map((result, i, store) => { - // get at each store's key/value so you can work with it - let key = store[i][0]; - let value = store[i][1]; - }); - }); -}); -``` - ---- - -### `multiSet()` - -```jsx -static multiSet(keyValuePairs, callback?) -``` - -multiSet and multiMerge take arrays of key-value array pairs that match the output of multiGet, e.g. Returns a `Promise` object. - -multiSet([['k1', 'val1'], ['k2', 'val2']], cb); - -Example: see multiMerge for an example - ---- - -### `multiRemove()` - -```jsx -static multiRemove(keys, callback?) -``` - -Delete all the keys in the `keys` array. Returns a `Promise` object. - -Example: - -```jsx -let keys = ['k1', 'k2']; -AsyncStorage.multiRemove(keys, (err) => { - // keys k1 & k2 removed, if they existed - // do most stuff after removal (if you want) -}); -``` - ---- - -### `multiMerge()` - -```jsx -static multiMerge(keyValuePairs, callback?) -``` - -Merges existing values with input values, assuming they are stringified json. Returns a `Promise` object. - -Not supported by all native implementations. - -Example: - -```jsx -// first user, initial values -let UID234_object = { - name: 'Chris', - age: 30, - traits: { hair: 'brown', eyes: 'brown' } -}; - -// first user, delta values -let UID234_delta = { - age: 31, - traits: { eyes: 'blue', shoe_size: 10 } -}; - -// second user, initial values -let UID345_object = { - name: 'Marge', - age: 25, - traits: { hair: 'blonde', eyes: 'blue' } -}; - -// second user, delta values -let UID345_delta = { - age: 26, - traits: { eyes: 'green', shoe_size: 6 } -}; - -let multi_set_pairs = [ - ['UID234', JSON.stringify(UID234_object)], - ['UID345', JSON.stringify(UID345_object)] -]; -let multi_merge_pairs = [ - ['UID234', JSON.stringify(UID234_delta)], - ['UID345', JSON.stringify(UID345_delta)] -]; - -AsyncStorage.multiSet(multi_set_pairs, (err) => { - AsyncStorage.multiMerge(multi_merge_pairs, (err) => { - AsyncStorage.multiGet(['UID234', 'UID345'], (err, stores) => { - stores.map((result, i, store) => { - let key = store[i][0]; - let val = store[i][1]; - console.log(key, val); - // => UID234 {"name":"Chris","age":31,"traits":{"shoe_size":10,"hair":"brown","eyes":"blue"}} - // => UID345 {"name":"Marge","age":26,"traits":{"shoe_size":6,"hair":"blonde","eyes":"green"}} - }); - }); - }); -}); -``` - -## Properties diff --git a/website/versioned_docs/version-0.23/dimensions.md b/website/versioned_docs/version-0.23/dimensions.md deleted file mode 100644 index 6616c952f2c..00000000000 --- a/website/versioned_docs/version-0.23/dimensions.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: version-0.23-dimensions -title: Dimensions -original_id: dimensions ---- - -### Methods - -- [`set`](dimensions.md#set) -- [`get`](dimensions.md#get) - ---- - -# Reference - -## Methods - -### `set()` - -```jsx -static set(dims) -``` - -This should only be called from native code by sending the didUpdateDimensions event. - -@param {object} dims string-keyed object of dimensions to set - ---- - -### `get()` - -```jsx -static get(dim) -``` - -Initial dimensions are set before `runApplication` is called so they should be available before any other require's are run, but may be updated later. - -Note: Although dimensions are available immediately, they may change (e.g due to device rotation) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a `StyleSheet`). - -Example: `var {height, width} = Dimensions.get('window');` - -@param {string} dim Name of dimension as defined when calling `set`. @returns {Object?} Value for the dimension. diff --git a/website/versioned_docs/version-0.23/drawerlayoutandroid.md b/website/versioned_docs/version-0.23/drawerlayoutandroid.md deleted file mode 100644 index 634ee92f4e8..00000000000 --- a/website/versioned_docs/version-0.23/drawerlayoutandroid.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -id: version-0.23-drawerlayoutandroid -title: DrawerLayoutAndroid -original_id: drawerlayoutandroid ---- - -React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop. - -Example: - -``` -render: function() { - var navigationView = ( - - I'm in the Drawer! - - ); - return ( - navigationView}> - - Hello - World! - - - ); -}, -``` - -### Props - -- [View props...](view.md#props) - -* [`renderNavigationView`](drawerlayoutandroid.md#rendernavigationview) -* [`drawerLockMode`](drawerlayoutandroid.md#drawerlockmode) -* [`drawerPosition`](drawerlayoutandroid.md#drawerposition) -* [`drawerWidth`](drawerlayoutandroid.md#drawerwidth) -* [`keyboardDismissMode`](drawerlayoutandroid.md#keyboarddismissmode) -* [`onDrawerClose`](drawerlayoutandroid.md#ondrawerclose) -* [`onDrawerOpen`](drawerlayoutandroid.md#ondraweropen) -* [`onDrawerSlide`](drawerlayoutandroid.md#ondrawerslide) -* [`onDrawerStateChanged`](drawerlayoutandroid.md#ondrawerstatechanged) - -### Methods - -- [`openDrawer`](drawerlayoutandroid.md#opendrawer) -- [`closeDrawer`](drawerlayoutandroid.md#closedrawer) - ---- - -# Reference - -## Props - -### `renderNavigationView` - -The navigation view that will be rendered to the side of the screen and can be pulled in. - -| Type | Required | -| -------- | -------- | -| function | Yes | - ---- - -### `drawerLockMode` - -Specifies the lock mode of the drawer. The drawer can be locked in 3 states: - -- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures. -- locked-closed, meaning that the drawer will stay closed and not respond to gestures. -- locked-open, meaning that the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`). - -| Type | Required | -| ------------------------------------------------ | -------- | -| enum('unlocked', 'locked-closed', 'locked-open') | No | - ---- - -### `drawerPosition` - -Specifies the side of the screen from which the drawer will slide in. - -| Type | Required | -| ------------------------------------------------------------------------- | -------- | -| enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) | No | - ---- - -### `drawerWidth` - -Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. - -| Type | Required | -| ----------------------- | -------- | -| enum('none', 'on-drag') | No | - ---- - -### `onDrawerClose` - -Function called whenever the navigation view has been closed. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerOpen` - -Function called whenever the navigation view has been opened. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerSlide` - -Function called whenever there is an interaction with the navigation view. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerStateChanged` - -Function called when the drawer state has changed. The drawer can be in 3 states: - -- idle, meaning there is no interaction with the navigation view happening at the time -- dragging, meaning there is currently an interaction with the navigation view -- settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation - -| Type | Required | -| -------- | -------- | -| function | No | - -## Methods - -### `openDrawer()` - -```jsx -openDrawer(); -``` - ---- - -### `closeDrawer()` - -```jsx -closeDrawer(); -``` diff --git a/website/versioned_docs/version-0.23/easing.md b/website/versioned_docs/version-0.23/easing.md deleted file mode 100644 index db75b517ada..00000000000 --- a/website/versioned_docs/version-0.23/easing.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -id: version-0.23-easing -title: Easing -original_id: easing ---- - -This class implements common easing functions. The math is pretty obscure, but this cool website has nice visual illustrations of what they represent: http://xaedes.de/dev/transitions/ - -### Methods - -- [`step0`](easing.md#step0) -- [`step1`](easing.md#step1) -- [`linear`](easing.md#linear) -- [`ease`](easing.md#ease) -- [`quad`](easing.md#quad) -- [`cubic`](easing.md#cubic) -- [`poly`](easing.md#poly) -- [`sin`](easing.md#sin) -- [`circle`](easing.md#circle) -- [`exp`](easing.md#exp) -- [`elastic`](easing.md#elastic) -- [`back`](easing.md#back) -- [`bounce`](easing.md#bounce) -- [`bezier`](easing.md#bezier) -- [`in`](easing.md#in) -- [`out`](easing.md#out) -- [`inOut`](easing.md#inout) - ---- - -# Reference - -## Methods - -### `step0()` - -```jsx -static step0(n) -``` - ---- - -### `step1()` - -```jsx -static step1(n) -``` - ---- - -### `linear()` - -```jsx -static linear(t) -``` - ---- - -### `ease()` - -```jsx -static ease(t) -``` - ---- - -### `quad()` - -```jsx -static quad(t) -``` - ---- - -### `cubic()` - -```jsx -static cubic(t) -``` - ---- - -### `poly()` - -```jsx -static poly(n) -``` - ---- - -### `sin()` - -```jsx -static sin(t) -``` - ---- - -### `circle()` - -```jsx -static circle(t) -``` - ---- - -### `exp()` - -```jsx -static exp(t) -``` - ---- - -### `elastic()` - -```jsx -static elastic(bounciness) -``` - -An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times. - -Wolfram Plots: - -http://tiny.cc/elastic_b_1 (default bounciness = 1) http://tiny.cc/elastic_b_3 (bounciness = 3) - ---- - -### `back()` - -```jsx -static back(s) -``` - ---- - -### `bounce()` - -```jsx -static bounce(t) -``` - ---- - -### `bezier()` - -```jsx -static bezier(x1, y1, x2, y2) -``` - ---- - -### `in()` - -```jsx -static in easing; -``` - ---- - -### `out()` - -```jsx -static out(easing) -``` - -Runs an easing function backwards. - ---- - -### `inOut()` - -```jsx -static inOut(easing) -``` - -Makes any easing function symmetrical. diff --git a/website/versioned_docs/version-0.23/image.md b/website/versioned_docs/version-0.23/image.md deleted file mode 100644 index 70508efe1e6..00000000000 --- a/website/versioned_docs/version-0.23/image.md +++ /dev/null @@ -1,255 +0,0 @@ ---- -id: version-0.23-image -title: Image -original_id: image ---- - -A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. - -Example usage: - -``` -renderImages: function() { - return ( - - - - - ); -}, -``` - -### Props - -- [`testID`](image.md#testid) -- [`onLayout`](image.md#onlayout) -- [`onLoadEnd`](image.md#onloadend) -- [`onLoadStart`](image.md#onloadstart) -- [`resizeMode`](image.md#resizemode) -- [`source`](image.md#source) -- [`style`](image.md#style) -- [`onLoad`](image.md#onload) -- [`accessibilityLabel`](image.md#accessibilitylabel) -- [`accessible`](image.md#accessible) -- [`blurRadius`](image.md#blurradius) -- [`capInsets`](image.md#capinsets) -- [`defaultSource`](image.md#defaultsource) -- [`onError`](image.md#onerror) -- [`onProgress`](image.md#onprogress) - -### Methods - -- [`getSize`](image.md#getsize) - ---- - -# Reference - -## Props - -### `testID` - -A unique identifier for this element to be used in UI Automation testing scripts. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{nativeEvent: {layout: {x, y, width, height}}}`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadEnd` - -Invoked when load either succeeds or fails - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadStart` - -Invoked on load start - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `resizeMode` - -Determines how to resize the image when the frame doesn't match the raw image dimensions. - -'cover': Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding). - -'contain': Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). - -'stretch': Scale width and height independently, This may change the aspect ratio of the src. - -| Type | Required | -| ----------------------------------- | -------- | -| enum('cover', 'contain', 'stretch') | No | - ---- - -### `source` - -`uri` is a string representing the resource identifier for the image, which could be an http address, a local file path, or the name of a static image resource (which should be wrapped in the `require('./path/to/image.png')` function). - -| Type | Required | -| ------------------------------ | -------- | -| object: {uri: string}, ,number | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Shadow Props...](shadow-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`backfaceVisibility`**: enum('visible', 'hidden') - -- **`backgroundColor`**: [color](colors.md) - -- **`borderColor`**: [color](colors.md) - -- **`borderRadius`**: number - -- **`borderWidth`**: number - -- **`opacity`**: number - -- **`overflow`**: enum('visible', 'hidden') - -- **`resizeMode`**: Object.keys(ImageResizeMode) - -- **`overlayColor`**: string (_Android_) - - When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners: - - - Certain resize modes, such as 'contain' - - Animated GIFs - - A typical way to use this prop is with images displayed on a solid background and setting the `overlayColor` to the same color as the background. - - For details of how this works under the hood, see http://frescolib.org/rounded-corners-and-circles.md - -* **`tintColor`**: [color](colors.md) (_iOS_) - - iOS-Specific style to "tint" an image. Changes the color of all the non-transparent pixels to the tintColor. - ---- - -### `onLoad` - -Invoked when load completes successfully - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `accessibilityLabel` - -The text that's read by the screen reader when the user interacts with the image. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | iOS | - ---- - -### `accessible` - -When true, indicates the image is an accessibility element. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `blurRadius` - -blurRadius: the blur radius of the blur filter added to the image - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `capInsets` - -When the image is resized, the corners of the size specified by capInsets will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info on [Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets) - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `defaultSource` - -A static image to display while loading the image source. - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| object: {uri: string}, ,number | No | iOS | - ---- - -### `onError` - -Invoked on load error with `{nativeEvent: {error}}` - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `onProgress` - -Invoked on download progress with `{nativeEvent: {loaded, total}}` - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - -## Methods - -### `getSize()` - -```jsx -static getSize(uri: string, success: function, failure: function) -``` - -Retrieve the width and height (in pixels) of an image prior to displaying it. This method can fail if the image cannot be found, or fails to download. - -In order to retrieve the image dimensions, the image may first need to be loaded or downloaded, after which it will be cached. This means that in principle you could use this method to preload images, however it is not optimized for that purpose, and may in future be implemented in a way that does not fully load/download the image data. A proper, supported way to preload images will be provided as a separate API. diff --git a/website/versioned_docs/version-0.23/modal.md b/website/versioned_docs/version-0.23/modal.md deleted file mode 100644 index 9bd34343607..00000000000 --- a/website/versioned_docs/version-0.23/modal.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: version-0.23-modal -title: Modal -original_id: modal ---- - -A Modal component covers the native view (e.g. UIViewController, Activity) that contains the React Native root. - -Use Modal in hybrid apps that embed React Native; Modal allows the portion of your app written in React Native to present content above the enclosing native view hierarchy. - -In apps written with React Native from the root view down, you should use Navigator instead of Modal. With a top-level Navigator, you have more control over how to present the modal scene over the rest of your app by using the configureScene property. - -### Props - -- [`animated`](modal.md#animated) -- [`onRequestClose`](modal.md#onrequestclose) -- [`onShow`](modal.md#onshow) -- [`transparent`](modal.md#transparent) -- [`visible`](modal.md#visible) - ---- - -# Reference - -## Props - -### `animated` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onRequestClose` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onShow` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `transparent` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `visible` - -| Type | Required | -| ---- | -------- | -| bool | No | diff --git a/website/versioned_docs/version-0.23/refreshcontrol.md b/website/versioned_docs/version-0.23/refreshcontrol.md deleted file mode 100644 index 02c0f094d93..00000000000 --- a/website/versioned_docs/version-0.23/refreshcontrol.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -id: version-0.23-refreshcontrol -title: RefreshControl -original_id: refreshcontrol ---- - -This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at `scrollY: 0`, swiping down triggers an `onRefresh` event. - -### Usage example - -```js -class RefreshableList extends Component { - constructor(props) { - super(props); - this.state = { - refreshing: false, - }; - } - - _onRefresh() { - this.setState({refreshing: true}); - fetchData().then(() => { - this.setState({refreshing: false}); - }); - } - - render() { - return ( - - } - ... - > - ... - - ); - } - ... -} -``` - -**Note:** `refreshing` is a controlled prop, this is why it needs to be set to true in the `onRefresh` function otherwise the refresh indicator will stop immediatly. - -### Props - -- [View props...](view.md#props) - -* [`onRefresh`](refreshcontrol.md#onrefresh) -* [`refreshing`](refreshcontrol.md#refreshing) -* [`colors`](refreshcontrol.md#colors) -* [`enabled`](refreshcontrol.md#enabled) -* [`progressBackgroundColor`](refreshcontrol.md#progressbackgroundcolor) -* [`size`](refreshcontrol.md#size) -* [`tintColor`](refreshcontrol.md#tintcolor) -* [`title`](refreshcontrol.md#title) - ---- - -# Reference - -## Props - -### `onRefresh` - -Called when the view starts refreshing. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `refreshing` - -Whether the view should be indicating an active refresh. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `colors` - -The colors (at least one) that will be used to draw the refresh indicator. - -| Type | Required | Platform | -| --------------------------- | -------- | -------- | -| array of [color](colors.md) | No | Android | - ---- - -### `enabled` - -Whether the pull to refresh functionality is enabled. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `progressBackgroundColor` - -The background color of the refresh indicator. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `size` - -Size of the refresh indicator, see RefreshControl.SIZE. - -| Type | Required | Platform | -| -------------------------------- | -------- | -------- | -| RefreshLayoutConsts.SIZE.DEFAULT | No | Android | - ---- - -### `tintColor` - -The color of the refresh indicator. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | - ---- - -### `title` - -The title displayed under the refresh indicator. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | iOS | diff --git a/website/versioned_docs/version-0.23/scrollview.md b/website/versioned_docs/version-0.23/scrollview.md deleted file mode 100644 index 17a3626f54d..00000000000 --- a/website/versioned_docs/version-0.23/scrollview.md +++ /dev/null @@ -1,550 +0,0 @@ ---- -id: version-0.23-scrollview -title: ScrollView -original_id: scrollview ---- - -Component that wraps platform ScrollView while providing integration with touch locking "responder" system. - -Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer `{flex: 1}` down the view stack can lead to errors here, which the element inspector makes quick to debug. - -Doesn't yet support other contained responders from blocking this scroll view from becoming the responder. - -### Props - -- [View props...](view.md#props) - -* [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) -* [`contentContainerStyle`](scrollview.md#contentcontainerstyle) -* [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) -* [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) -* [`onContentSizeChange`](scrollview.md#oncontentsizechange) -* [`onScroll`](scrollview.md#onscroll) -* [`refreshControl`](scrollview.md#refreshcontrol) -* [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) -* [`scrollEnabled`](scrollview.md#scrollenabled) -* [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) -* [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) -* [`style`](scrollview.md#style) -* [`sendMomentumEvents`](scrollview.md#sendmomentumevents) -* [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) -* [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) -* [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) -* [`bounces`](scrollview.md#bounces) -* [`bouncesZoom`](scrollview.md#bounceszoom) -* [`horizontal`](scrollview.md#horizontal) -* [`centerContent`](scrollview.md#centercontent) -* [`contentInset`](scrollview.md#contentinset) -* [`contentOffset`](scrollview.md#contentoffset) -* [`decelerationRate`](scrollview.md#decelerationrate) -* [`directionalLockEnabled`](scrollview.md#directionallockenabled) -* [`indicatorStyle`](scrollview.md#indicatorstyle) -* [`maximumZoomScale`](scrollview.md#maximumzoomscale) -* [`minimumZoomScale`](scrollview.md#minimumzoomscale) -* [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) -* [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) -* [`pagingEnabled`](scrollview.md#pagingenabled) -* [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) -* [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) -* [`scrollsToTop`](scrollview.md#scrollstotop) -* [`snapToAlignment`](scrollview.md#snaptoalignment) -* [`snapToInterval`](scrollview.md#snaptointerval) -* [`zoomScale`](scrollview.md#zoomscale) -* [`onRefreshStart`](scrollview.md#onrefreshstart) - -### Methods - -- [`endRefreshing`](scrollview.md#endrefreshing) -- [`scrollTo`](scrollview.md#scrollto) -- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) -- [`handleScroll`](scrollview.md#handlescroll) - ---- - -# Reference - -## Props - -### `canCancelContentTouches` - -When false, once tracking starts, won't try to drag if the touch moves. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `contentContainerStyle` - -These styles will be applied to the scroll view content container which wraps all of the child views. Example: - -return ( ); ... var styles = StyleSheet.create({ contentContainer: { paddingVertical: 20 } }); - -| Type | Required | -| ------------------------------------ | -------- | -| StyleSheetPropType(View Style props) | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. -- 'interactive', the keyboard is dismissed interactively with the drag and moves in synchrony with the touch; dragging upwards cancels the dismissal. On android this is not supported and it will have the same behavior as 'none'. - -| Type | Required | -| -------------------------------------- | -------- | -| enum('none', 'interactive', 'on-drag') | No | - ---- - -### `keyboardShouldPersistTaps` - -When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the scroll view will not catch taps, and the keyboard will not dismiss automatically. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onContentSizeChange` - -Called when scrollable content view of the ScrollView changes. It's implemented using onLayout handler attached to the content container which this ScrollView renders. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onScroll` - -Fires at most once per frame during scrolling. The frequency of the events can be controlled using the `scrollEventThrottle` prop. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `refreshControl` - -A RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView. - -See [RefreshControl](refreshcontrol.md). - -| Type | Required | -| ------- | -------- | -| element | No | - ---- - -### `removeClippedSubviews` - -Experimental: When true, offscreen child views (whose `overflow` value is `hidden`) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `scrollEnabled` - -When false, the content does not scroll. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsHorizontalScrollIndicator` - -When true, shows a horizontal scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsVerticalScrollIndicator` - -When true, shows a vertical scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Shadow Props...](shadow-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderRightColor`**: [color](colors.md) - -- **`backfaceVisibility`**: enum('visible', 'hidden') - -- **`borderBottomColor`**: [color](colors.md) - -- **`borderBottomLeftRadius`**: number - -- **`borderBottomRightRadius`**: number - -- **`borderBottomWidth`**: number - -- **`borderColor`**: [color](colors.md) - -- **`borderLeftColor`**: [color](colors.md) - -- **`borderLeftWidth`**: number - -- **`borderRadius`**: number - -- **`backgroundColor`**: [color](colors.md) - -- **`borderRightWidth`**: number - -- **`borderStyle`**: enum('solid', 'dotted', 'dashed') - -- **`borderTopColor`**: [color](colors.md) - -- **`borderTopLeftRadius`**: number - -- **`borderTopRightRadius`**: number - -- **`borderTopWidth`**: number - -- **`borderWidth`**: number - -- **`opacity`**: number - -- **`overflow`**: enum('visible', 'hidden') - -- **`elevation`**: number (_Android_) - - (Android-only) Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions. - ---- - -### `sendMomentumEvents` - -When true, momentum events will be sent from Android This is internal and set automatically by the framework if you have onMomentumScrollBegin or onMomentumScrollEnd set on your ScrollView - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `alwaysBounceHorizontal` - -When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself. The default value is true when `horizontal={true}` and false otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `alwaysBounceVertical` - -When true, the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself. The default value is false when `horizontal={true}` and true otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `automaticallyAdjustContentInsets` - -Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/ toolbar. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bounces` - -When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. When false, it disables all bouncing even if the `alwaysBounce*` props are true. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bouncesZoom` - -When true, gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture end, otherwise the zoom will not exceed the limits. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `horizontal` - -When true, the scroll view's children are arranged horizontally in a row instead of vertically in a column. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `centerContent` - -When true, the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `contentInset` - -The amount by which the scroll view content is inset from the edges of the scroll view. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `contentOffset` - -Used to manually set the starting scroll offset. The default value is `{x: 0, y: 0}`. - -| Type | Required | Platform | -| ------------- | -------- | -------- | -| PointPropType | No | iOS | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use string shortcuts `"normal"` and `"fast"` which match the underlying iOS settings for `UIScrollViewDecelerationRateNormal` and `UIScrollViewDecelerationRateFast` respectively. - -- normal: 0.998 (the default) -- fast: 0.99 - -| Type | Required | Platform | -| ------------------------------- | -------- | -------- | -| enum('fast', 'normal'), ,number | No | iOS | - ---- - -### `directionalLockEnabled` - -When true, the ScrollView will try to lock to only vertical or horizontal scrolling while dragging. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `indicatorStyle` - -The style of the scroll indicators. - - - -- `default` (the default), same as `black`. -- `black`, scroll indicator is black. This style is good against a white content background. -- `white`, scroll indicator is white. This style is good against a black content background. - -| Type | Required | Platform | -| --------------------------------- | -------- | -------- | -| enum('default', 'black', 'white') | No | iOS | - - - ---- - -### `maximumZoomScale` - -The maximum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `minimumZoomScale` - -The minimum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `stickyHeaderIndices` - -An array of child indices determining which children get docked to the top of the screen when scrolling. For example, passing `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction with `horizontal={true}`. - -| Type | Required | Platform | -| --------------- | -------- | -------- | -| array of number | No | iOS | - ---- - -### `onScrollAnimationEnd` - -Called when a scrolling animation ends. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `pagingEnabled` - -When true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEventThrottle` - -This controls how often the scroll event will be fired while scrolling (as a time interval in ms). A lower number yields better accuracy for code that is tracking the scroll position, but can lead to scroll performance problems due to the volume of information being send over the bridge. You will not notice a difference between values set between 1-16 as the JS run loop is synced to the screen refresh rate. If you do not need precise scroll position tracking, set this value higher to limit the information being sent across the bridge. The default value is zero, which results in the scroll event being sent only once each time the view is scrolled. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `scrollIndicatorInsets` - -The amount by which the scroll view indicators are inset from the edges of the scroll view. This should normally be set to the same value as the `contentInset`. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `scrollsToTop` - -When true, the scroll view scrolls to top when the status bar is tapped. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `snapToAlignment` - -When `snapToInterval` is set, `snapToAlignment` will define the relationship of the snapping to the scroll view. - -- `start` (the default) will align the snap at the left (horizontal) or top (vertical) -- `center` will align the snap in the center -- `end` will align the snap at the right (horizontal) or bottom (vertical) - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| enum('start', 'center', 'end') | No | iOS | - ---- - -### `snapToInterval` - -When set, causes the scroll view to stop at multiples of the value of `snapToInterval`. This can be used for paginating through children that have lengths smaller than the scroll view. Used in combination with `snapToAlignment`. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `zoomScale` - -The current scale of the scroll view content. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `onRefreshStart` - -**Deprecated.** Use the `refreshControl` prop instead. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - -## Methods - -### `endRefreshing()` - -```jsx -endRefreshing(); -``` - ---- - -### `scrollTo()` - -```jsx -scrollTo( - ([y]: number), - object, - ([x]: number), - ([animated]: boolean) -); -``` - -Scrolls to a given x, y offset, either immediately or with a smooth animation. Syntax: - -scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true}) - -Note: The weird argument signature is due to the fact that, for historical reasons, the function also accepts separate arguments as as alternative to the options object. This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED. - ---- - -### `scrollWithoutAnimationTo()` - -```jsx -scrollWithoutAnimationTo(y, x); -``` - -Deprecated, do not use. - ---- - -### `handleScroll()` - -```jsx -handleScroll((e: Object)); -``` diff --git a/website/versioned_docs/version-0.23/segmentedcontrolios.md b/website/versioned_docs/version-0.23/segmentedcontrolios.md deleted file mode 100644 index da5b8b9a8a9..00000000000 --- a/website/versioned_docs/version-0.23/segmentedcontrolios.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: version-0.23-segmentedcontrolios -title: SegmentedControlIOS -original_id: segmentedcontrolios ---- - -Use `SegmentedControlIOS` to render a UISegmentedControl iOS. - -#### Programmatically changing selected index - -The selected index can be changed on the fly by assigning the selectIndex prop to a state variable, then changing that variable. Note that the state variable would need to be updated as the user selects a value and changes the index, as shown in the example below. - -``` - { - this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex}); - }} -/> -``` - -### Props - -- [View props...](view.md#props) - -* [`enabled`](segmentedcontrolios.md#enabled) -* [`momentary`](segmentedcontrolios.md#momentary) -* [`onChange`](segmentedcontrolios.md#onchange) -* [`onValueChange`](segmentedcontrolios.md#onvaluechange) -* [`selectedIndex`](segmentedcontrolios.md#selectedindex) -* [`tintColor`](segmentedcontrolios.md#tintcolor) -* [`values`](segmentedcontrolios.md#values) - ---- - -# Reference - -## Props - -### `enabled` - -If false the user won't be able to interact with the control. Default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `momentary` - -If true, then selecting a segment won't persist visually. The `onValueChange` callback will still work as expected. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onChange` - -Callback that is called when the user taps a segment; passes the event as an argument - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onValueChange` - -Callback that is called when the user taps a segment; passes the segment's value as an argument - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `selectedIndex` - -The index in `props.values` of the segment to be (pre)selected. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `tintColor` - -Accent color of the control. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `values` - -The labels for the control's segment buttons, in order. - -| Type | Required | -| --------------- | -------- | -| array of string | No | diff --git a/website/versioned_docs/version-0.23/textinput.md b/website/versioned_docs/version-0.23/textinput.md deleted file mode 100644 index 6dc34025d8c..00000000000 --- a/website/versioned_docs/version-0.23/textinput.md +++ /dev/null @@ -1,429 +0,0 @@ ---- -id: version-0.23-textinput -title: TextInput -original_id: textinput ---- - -A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. - -The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. An example: - -``` - this.setState({text})} - value={this.state.text} - /> -``` - -Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=false`. To achieve the same effect, you can wrap your `TextInput` in a `View`: - -``` - - - -``` - -### Props - -- [View props...](view.md#props) - -* [`onSubmitEditing`](textinput.md#onsubmitediting) -* [`autoCapitalize`](textinput.md#autocapitalize) -* [`autoFocus`](textinput.md#autofocus) -* [`blurOnSubmit`](textinput.md#bluronsubmit) -* [`defaultValue`](textinput.md#defaultvalue) -* [`editable`](textinput.md#editable) -* [`keyboardType`](textinput.md#keyboardtype) -* [`maxLength`](textinput.md#maxlength) -* [`multiline`](textinput.md#multiline) -* [`onBlur`](textinput.md#onblur) -* [`onChange`](textinput.md#onchange) -* [`onChangeText`](textinput.md#onchangetext) -* [`onEndEditing`](textinput.md#onendediting) -* [`onFocus`](textinput.md#onfocus) -* [`onLayout`](textinput.md#onlayout) -* [`onSelectionChange`](textinput.md#onselectionchange) -* [`autoCorrect`](textinput.md#autocorrect) -* [`placeholder`](textinput.md#placeholder) -* [`placeholderTextColor`](textinput.md#placeholdertextcolor) -* [`secureTextEntry`](textinput.md#securetextentry) -* [`selectionColor`](textinput.md#selectioncolor) -* [`style`](textinput.md#style) -* [`value`](textinput.md#value) -* [`numberOfLines`](textinput.md#numberoflines) -* [`underlineColorAndroid`](textinput.md#underlinecolorandroid) -* [`clearButtonMode`](textinput.md#clearbuttonmode) -* [`clearTextOnFocus`](textinput.md#cleartextonfocus) -* [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) -* [`keyboardAppearance`](textinput.md#keyboardappearance) -* [`onKeyPress`](textinput.md#onkeypress) -* [`returnKeyType`](textinput.md#returnkeytype) -* [`selectTextOnFocus`](textinput.md#selecttextonfocus) -* [`selectionState`](textinput.md#selectionstate) - -### Methods - -- [`isFocused`](textinput.md#isfocused) -- [`clear`](textinput.md#clear) - ---- - -# Reference - -## Props - -### `onSubmitEditing` - -Callback that is called when the text input's submit button is pressed. Invalid if multiline={true} is specified. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `autoCapitalize` - -Can tell TextInput to automatically capitalize certain characters. - -- characters: all characters, -- words: first letter of each word -- sentences: first letter of each sentence (default) -- none: don't auto capitalize anything - -| Type | Required | -| ------------------------------------------------ | -------- | -| enum('none', 'sentences', 'words', 'characters') | No | - ---- - -### `autoFocus` - -If true, focuses the input on componentDidMount. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `blurOnSubmit` - -If true, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting blurOnSubmit to true means that pressing return will blur the field and trigger the onSubmitEditing event instead of inserting a newline into the field. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `defaultValue` - -Provides an initial value that will change when the user starts typing. Useful for use-cases where you don't want to deal with listening to events and updating the value prop to keep the controlled state in sync. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `editable` - -If false, text is not editable. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `keyboardType` - -Determines which keyboard to open, e.g.`numeric`. - -The following values work across platforms: - -- default -- numeric -- email-address - -| Type | Required | -| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | - ---- - -### `maxLength` - -Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `multiline` - -If true, the text input can be multiple lines. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onBlur` - -Callback that is called when the text input is blurred - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChange` - -Callback that is called when the text input's text changes. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChangeText` - -Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onEndEditing` - -Callback that is called when text input ends. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onFocus` - -Callback that is called when the text input is focused - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{x, y, width, height}`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onSelectionChange` - -Callback that is called when the text input selection is changed - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `autoCorrect` - -If false, disables auto-correct. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `placeholder` - -The string that will be rendered before text input has been entered - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `placeholderTextColor` - -The text color of the placeholder string - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `secureTextEntry` - -If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `selectionColor` - -The highlight (and cursor on ios) color of the text input - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `style` - -Styles - -| Type | Required | -| --------------------- | -------- | -| [Text](text.md#style) | No | - ---- - -### `value` - -The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `numberOfLines` - -Sets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | Android | - ---- - -### `underlineColorAndroid` - -The color of the textInput underline. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `clearButtonMode` - -When the clear button should appear on the right side of the text view - -| Type | Required | Platform | -| ---------------------------------------------------------- | -------- | -------- | -| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | - ---- - -### `clearTextOnFocus` - -If true, clears the text field automatically when editing begins - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `enablesReturnKeyAutomatically` - -If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `keyboardAppearance` - -Determines the color of the keyboard. - -| Type | Required | Platform | -| -------------------------------- | -------- | -------- | -| enum('default', 'light', 'dark') | No | iOS | - ---- - -### `onKeyPress` - -Callback that is called when a key is pressed. Pressed key value is passed as an argument to the callback handler. Fires before onChange callbacks. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `returnKeyType` - -Determines how the return key should look. - -| Type | Required | Platform | -| ------------------------------------------------------------------------------------------------------------- | -------- | -------- | -| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | iOS | - ---- - -### `selectTextOnFocus` - -If true, all text will automatically be selected on focus - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `selectionState` - -See DocumentSelectionState.js, some state that is responsible for maintaining selection information for a document - -| Type | Required | Platform | -| ---------------------- | -------- | -------- | -| DocumentSelectionState | No | iOS | - -## Methods - -### `isFocused()` - -```jsx -isFocused(): -``` - ---- - -### `clear()` - -```jsx -clear(); -``` diff --git a/website/versioned_docs/version-0.23/webview.md b/website/versioned_docs/version-0.23/webview.md deleted file mode 100644 index f29165b5d5d..00000000000 --- a/website/versioned_docs/version-0.23/webview.md +++ /dev/null @@ -1,346 +0,0 @@ ---- -id: version-0.23-webview -title: WebView -original_id: webview ---- - -Renders a native WebView. - -### Props - -- [View props...](view.md#props) - -* [`scalesPageToFit`](webview.md#scalespagetofit) -* [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) -* [`onShouldStartLoadWithRequest`](webview.md#onshouldstartloadwithrequest) -* [`injectedJavaScript`](webview.md#injectedjavascript) -* [`mediaPlaybackRequiresUserAction`](webview.md#mediaplaybackrequiresuseraction) -* [`onError`](webview.md#onerror) -* [`onLoad`](webview.md#onload) -* [`onLoadEnd`](webview.md#onloadend) -* [`onLoadStart`](webview.md#onloadstart) -* [`onNavigationStateChange`](webview.md#onnavigationstatechange) -* [`renderError`](webview.md#rendererror) -* [`renderLoading`](webview.md#renderloading) -* [`contentInset`](webview.md#contentinset) -* [`source`](webview.md#source) -* [`startInLoadingState`](webview.md#startinloadingstate) -* [`style`](webview.md#style) -* [`decelerationRate`](webview.md#decelerationrate) -* [`domStorageEnabled`](webview.md#domstorageenabled) -* [`javaScriptEnabled`](webview.md#javascriptenabled) -* [`allowsInlineMediaPlayback`](webview.md#allowsinlinemediaplayback) -* [`bounces`](webview.md#bounces) -* [`scrollEnabled`](webview.md#scrollenabled) -* [`url`](webview.md#url) -* [`html`](webview.md#html) - -### Methods - -- [`goForward`](webview.md#goforward) -- [`goBack`](webview.md#goback) -- [`reload`](webview.md#reload) -- [`updateNavigationState`](webview.md#updatenavigationstate) -- [`getWebViewHandle`](webview.md#getwebviewhandle) -- [`onLoadingStart`](webview.md#onloadingstart) -- [`onLoadingError`](webview.md#onloadingerror) -- [`onLoadingFinish`](webview.md#onloadingfinish) - ---- - -# Reference - -## Props - -### `scalesPageToFit` - -Sets whether the webpage scales to fit the view and the user can change the scale. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `automaticallyAdjustContentInsets` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onShouldStartLoadWithRequest` - -Allows custom handling of any webview requests by a JS handler. Return true or false from this method to continue loading the request. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `injectedJavaScript` - -Sets the JS to be injected when the webpage loads. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `mediaPlaybackRequiresUserAction` - -Determines whether HTML5 audio & videos require the user to tap before they can start playing. The default value is `false`. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onError` - -Invoked when load fails - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoad` - -Invoked when load finish - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadEnd` - -Invoked when load either succeeds or fails - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadStart` - -Invoked on load start - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onNavigationStateChange` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `renderError` - -Function that returns a view to show if there's an error. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `renderLoading` - -Function that returns a loading indicator. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `contentInset` - -| Type | Required | -| ------------------------------------------------------------------ | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | - ---- - -### `source` - -Loads static html or a uri (with optional headers) in the WebView. - -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------- | -------- | -| object: {uri: string,method: string,headers: object,body: string}, ,object: {html: string,baseUrl: string}, ,number | No | - ---- - -### `startInLoadingState` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use string shortcuts `"normal"` and `"fast"` which match the underlying iOS settings for `UIScrollViewDecelerationRateNormal` and `UIScrollViewDecelerationRateFast` respectively. - -- normal: 0.998 -- fast: 0.99 (the default for iOS WebView) - -| Type | Required | Platform | -| ------------------------------------- | -------- | -------- | -| ScrollView.propTypes.decelerationRate | No | iOS | - ---- - -### `domStorageEnabled` - -Used on Android only, controls whether DOM Storage is enabled or not - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `javaScriptEnabled` - -Used on Android only, JS is enabled by default for WebView on iOS - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `allowsInlineMediaPlayback` - -Determines whether HTML5 videos play inline or use the native full-screen controller. default value `false` **NOTE** : "In order for video to play inline, not only does this property need to be set to true, but the video element in the HTML document must also include the webkit-playsinline attribute." - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bounces` - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEnabled` - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `url` - -**Deprecated.** Use the `source` prop instead. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `html` - -**Deprecated.** Use the `source` prop instead. - -| Type | Required | -| ------ | -------- | -| string | No | - -## Methods - -### `goForward()` - -```jsx -goForward(); -``` - ---- - -### `goBack()` - -```jsx -goBack(); -``` - ---- - -### `reload()` - -```jsx -reload(); -``` - ---- - -### `updateNavigationState()` - -```jsx -updateNavigationState((event: Event)); -``` - -We return an event with a bunch of fields including: url, title, loading, canGoBack, canGoForward - ---- - -### `getWebViewHandle()` - -```jsx -getWebViewHandle(): -``` - ---- - -### `onLoadingStart()` - -```jsx -onLoadingStart((event: Event)); -``` - ---- - -### `onLoadingError()` - -```jsx -onLoadingError((event: Event)); -``` - ---- - -### `onLoadingFinish()` - -```jsx -onLoadingFinish((event: Event)); -``` diff --git a/website/versioned_docs/version-0.24/actionsheetios.md b/website/versioned_docs/version-0.24/actionsheetios.md deleted file mode 100644 index 16a951e0b58..00000000000 --- a/website/versioned_docs/version-0.24/actionsheetios.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -id: version-0.24-actionsheetios -title: ActionSheetIOS -original_id: actionsheetios ---- - -### Methods - -- [`showActionSheetWithOptions`](actionsheetios.md#showactionsheetwithoptions) -- [`showShareActionSheetWithOptions`](actionsheetios.md#showshareactionsheetwithoptions) - ---- - -# Reference - -## Methods - -### `showActionSheetWithOptions()` - -```jsx -static showActionSheetWithOptions(options, callback) -``` - -Display an iOS action sheet. The `options` object must contain one or more of: - -- `options` (array of strings) - a list of button titles (required) -- `cancelButtonIndex` (int) - index of cancel button in `options` -- `destructiveButtonIndex` (int) - index of destructive button in `options` -- `title` (string) - a title to show above the action sheet -- `message` (string) - a message to show below the title - ---- - -### `showShareActionSheetWithOptions()` - -```jsx -static showShareActionSheetWithOptions(options, failureCallback, successCallback) -``` - -Display the iOS share sheet. The `options` object should contain one or both of: - -- `message` (string) - a message to share -- `url` (string) - a URL to share - -NOTE: if `url` points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc. diff --git a/website/versioned_docs/version-0.24/drawerlayoutandroid.md b/website/versioned_docs/version-0.24/drawerlayoutandroid.md deleted file mode 100644 index f2fea508586..00000000000 --- a/website/versioned_docs/version-0.24/drawerlayoutandroid.md +++ /dev/null @@ -1,181 +0,0 @@ ---- -id: version-0.24-drawerlayoutandroid -title: DrawerLayoutAndroid -original_id: drawerlayoutandroid ---- - -React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop. - -Example: - -``` -render: function() { - var navigationView = ( - - I'm in the Drawer! - - ); - return ( - navigationView}> - - Hello - World! - - - ); -}, -``` - -### Props - -- [View props...](view.md#props) - -* [`renderNavigationView`](drawerlayoutandroid.md#rendernavigationview) -* [`drawerLockMode`](drawerlayoutandroid.md#drawerlockmode) -* [`drawerPosition`](drawerlayoutandroid.md#drawerposition) -* [`drawerWidth`](drawerlayoutandroid.md#drawerwidth) -* [`keyboardDismissMode`](drawerlayoutandroid.md#keyboarddismissmode) -* [`onDrawerClose`](drawerlayoutandroid.md#ondrawerclose) -* [`onDrawerOpen`](drawerlayoutandroid.md#ondraweropen) -* [`onDrawerSlide`](drawerlayoutandroid.md#ondrawerslide) -* [`onDrawerStateChanged`](drawerlayoutandroid.md#ondrawerstatechanged) -* [`statusBarBackgroundColor`](drawerlayoutandroid.md#statusbarbackgroundcolor) - -### Methods - -- [`openDrawer`](drawerlayoutandroid.md#opendrawer) -- [`closeDrawer`](drawerlayoutandroid.md#closedrawer) - ---- - -# Reference - -## Props - -### `renderNavigationView` - -The navigation view that will be rendered to the side of the screen and can be pulled in. - -| Type | Required | -| -------- | -------- | -| function | Yes | - ---- - -### `drawerLockMode` - -Specifies the lock mode of the drawer. The drawer can be locked in 3 states: - -- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures. -- locked-closed, meaning that the drawer will stay closed and not respond to gestures. -- locked-open, meaning that the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`). - -| Type | Required | -| ------------------------------------------------ | -------- | -| enum('unlocked', 'locked-closed', 'locked-open') | No | - ---- - -### `drawerPosition` - -Specifies the side of the screen from which the drawer will slide in. - -| Type | Required | -| ------------------------------------------------------------------------- | -------- | -| enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) | No | - ---- - -### `drawerWidth` - -Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. - -| Type | Required | -| ----------------------- | -------- | -| enum('none', 'on-drag') | No | - ---- - -### `onDrawerClose` - -Function called whenever the navigation view has been closed. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerOpen` - -Function called whenever the navigation view has been opened. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerSlide` - -Function called whenever there is an interaction with the navigation view. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerStateChanged` - -Function called when the drawer state has changed. The drawer can be in 3 states: - -- idle, meaning there is no interaction with the navigation view happening at the time -- dragging, meaning there is currently an interaction with the navigation view -- settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `statusBarBackgroundColor` - -Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar. It will only have an effect on API 21+. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - -## Methods - -### `openDrawer()` - -```jsx -openDrawer(); -``` - ---- - -### `closeDrawer()` - -```jsx -closeDrawer(); -``` diff --git a/website/versioned_docs/version-0.24/modal.md b/website/versioned_docs/version-0.24/modal.md deleted file mode 100644 index a56580838e3..00000000000 --- a/website/versioned_docs/version-0.24/modal.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: version-0.24-modal -title: Modal -original_id: modal ---- - -A Modal component covers the native view (e.g. UIViewController, Activity) that contains the React Native root. - -Use Modal in hybrid apps that embed React Native; Modal allows the portion of your app written in React Native to present content above the enclosing native view hierarchy. - -In apps written with React Native from the root view down, you should use Navigator instead of Modal. With a top-level Navigator, you have more control over how to present the modal scene over the rest of your app by using the configureScene property. - -### Props - -- [`animated`](modal.md#animated) -- [`onRequestClose`](modal.md#onrequestclose) -- [`onShow`](modal.md#onshow) -- [`transparent`](modal.md#transparent) -- [`visible`](modal.md#visible) - ---- - -# Reference - -## Props - -### `animated` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onRequestClose` - -| Type | Required | -| ---------------------------------------------------------------------- | -------- | -| Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func | No | - ---- - -### `onShow` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `transparent` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `visible` - -| Type | Required | -| ---- | -------- | -| bool | No | diff --git a/website/versioned_docs/version-0.24/pushnotificationios.md b/website/versioned_docs/version-0.24/pushnotificationios.md deleted file mode 100644 index 84a3bef1129..00000000000 --- a/website/versioned_docs/version-0.24/pushnotificationios.md +++ /dev/null @@ -1,289 +0,0 @@ ---- -id: version-0.24-pushnotificationios -title: PushNotificationIOS -original_id: pushnotificationios ---- - -Handle push notifications for your app, including permission handling and icon badge number. - -To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). - -[Manually link](linking-libraries-ios.md#manual-linking) the PushNotificationIOS library - -- Be sure to add the following to your `Header Search Paths`: `$(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS` -- Set the search to `recursive` - -Finally, to enable support for `notification` and `register` events you need to augment your AppDelegate. - -At the top of your `AppDelegate.m`: - -`#import "RCTPushNotificationManager.h"` - -And then in your AppDelegate implementation add the following: - -``` - // Required to register for notifications - - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings - { - [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings]; - } - // Required for the register event. - - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken - { - [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; - } - // Required for the notification event. - - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification - { - [RCTPushNotificationManager didReceiveRemoteNotification:notification]; - } - // Required for the localNotification event. - - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification - { - [RCTPushNotificationManager didReceiveLocalNotification:notification]; - } -``` - -### Methods - -- [`presentLocalNotification`](pushnotificationios.md#presentlocalnotification) -- [`scheduleLocalNotification`](pushnotificationios.md#schedulelocalnotification) -- [`cancelAllLocalNotifications`](pushnotificationios.md#cancelalllocalnotifications) -- [`setApplicationIconBadgeNumber`](pushnotificationios.md#setapplicationiconbadgenumber) -- [`getApplicationIconBadgeNumber`](pushnotificationios.md#getapplicationiconbadgenumber) -- [`cancelLocalNotifications`](pushnotificationios.md#cancellocalnotifications) -- [`addEventListener`](pushnotificationios.md#addeventlistener) -- [`requestPermissions`](pushnotificationios.md#requestpermissions) -- [`abandonPermissions`](pushnotificationios.md#abandonpermissions) -- [`checkPermissions`](pushnotificationios.md#checkpermissions) -- [`removeEventListener`](pushnotificationios.md#removeeventlistener) -- [`popInitialNotification`](pushnotificationios.md#popinitialnotification) -- [`constructor`](pushnotificationios.md#constructor) -- [`getMessage`](pushnotificationios.md#getmessage) -- [`getSound`](pushnotificationios.md#getsound) -- [`getAlert`](pushnotificationios.md#getalert) -- [`getBadgeCount`](pushnotificationios.md#getbadgecount) -- [`getData`](pushnotificationios.md#getdata) - ---- - -# Reference - -## Methods - -### `presentLocalNotification()` - -```jsx -static presentLocalNotification(details) -``` - -Schedules the localNotification for immediate presentation. - -details is an object containing: - -- `alertBody` : The message displayed in the notification alert. -- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; -- `soundName` : The sound played when the notification is fired (optional). -- `category` : The category of this notification, required for actionable notifications (optional). -- `userInfo` : An optional object containing additional notification data. - ---- - -### `scheduleLocalNotification()` - -```jsx -static scheduleLocalNotification(details) -``` - -Schedules the localNotification for future presentation. - -details is an object containing: - -- `fireDate` : The date and time when the system should deliver the notification. -- `alertBody` : The message displayed in the notification alert. -- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; -- `soundName` : The sound played when the notification is fired (optional). -- `category` : The category of this notification, required for actionable notifications (optional). -- `userInfo` : An optional object containing additional notification data. - ---- - -### `cancelAllLocalNotifications()` - -```jsx -static cancelAllLocalNotifications() -``` - -Cancels all scheduled localNotifications - ---- - -### `setApplicationIconBadgeNumber()` - -```jsx -static setApplicationIconBadgeNumber(number) -``` - -Sets the badge number for the app icon on the home screen - ---- - -### `getApplicationIconBadgeNumber()` - -```jsx -static getApplicationIconBadgeNumber(callback) -``` - -Gets the current badge number for the app icon on the home screen - ---- - -### `cancelLocalNotifications()` - -```jsx -static cancelLocalNotifications(userInfo) -``` - -Cancel local notifications. - -Optionally restricts the set of canceled notifications to those notifications whose `userInfo` fields match the corresponding fields in the `userInfo` argument. - ---- - -### `addEventListener()` - -```jsx -static addEventListener(type, handler) -``` - -Attaches a listener to remote or local notification events while the app is running in the foreground or the background. - -Valid events are: - -- `notification` : Fired when a remote notification is received. The handler will be invoked with an instance of `PushNotificationIOS`. -- `localNotification` : Fired when a local notification is received. The handler will be invoked with an instance of `PushNotificationIOS`. -- `register`: Fired when the user registers for remote notifications. The handler will be invoked with a hex string representing the deviceToken. - ---- - -### `requestPermissions()` - -```jsx -static requestPermissions(permissions?) -``` - -Requests notification permissions from iOS, prompting the user's dialog box. By default, it will request all notification permissions, but a subset of these can be requested by passing a map of requested permissions. The following permissions are supported: - -- `alert` -- `badge` -- `sound` - -If a map is provided to the method, only the permissions with truthy values will be requested. - ---- - -### `abandonPermissions()` - -```jsx -static abandonPermissions() -``` - -Unregister for all remote notifications received via Apple Push Notification service. - -You should call this method in rare circumstances only, such as when a new version of the app removes support for all types of remote notifications. Users can temporarily prevent apps from receiving remote notifications through the Notifications section of the Settings app. Apps unregistered through this method can always re-register. - ---- - -### `checkPermissions()` - -```jsx -static checkPermissions(callback) -``` - -See what push permissions are currently enabled. `callback` will be invoked with a `permissions` object: - -- `alert` :boolean -- `badge` :boolean -- `sound` :boolean - ---- - -### `removeEventListener()` - -```jsx -static removeEventListener(type, handler) -``` - -Removes the event listener. Do this in `componentWillUnmount` to prevent memory leaks - ---- - -### `popInitialNotification()` - -```jsx -static popInitialNotification() -``` - -An initial notification will be available if the app was cold-launched from a notification. - -The first caller of `popInitialNotification` will get the initial notification object, or `null`. Subsequent invocations will return null. - ---- - -### `constructor()` - -```jsx -constructor(nativeNotif); -``` - -You will never need to instantiate `PushNotificationIOS` yourself. Listening to the `notification` event and invoking `popInitialNotification` is sufficient - ---- - -### `getMessage()` - -```jsx -getMessage(); -``` - -An alias for `getAlert` to get the notification's main message string - ---- - -### `getSound()` - -```jsx -getSound(); -``` - -Gets the sound string from the `aps` object - ---- - -### `getAlert()` - -```jsx -getAlert(); -``` - -Gets the notification's main message from the `aps` object - ---- - -### `getBadgeCount()` - -```jsx -getBadgeCount(); -``` - -Gets the badge count number from the `aps` object - ---- - -### `getData()` - -```jsx -getData(); -``` - -Gets the data object on the notif diff --git a/website/versioned_docs/version-0.24/scrollview.md b/website/versioned_docs/version-0.24/scrollview.md deleted file mode 100644 index 7ffd1d74ee4..00000000000 --- a/website/versioned_docs/version-0.24/scrollview.md +++ /dev/null @@ -1,546 +0,0 @@ ---- -id: version-0.24-scrollview -title: ScrollView -original_id: scrollview ---- - -Component that wraps platform ScrollView while providing integration with touch locking "responder" system. - -Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer `{flex: 1}` down the view stack can lead to errors here, which the element inspector allows you to debug. - -Doesn't yet support other contained responders from blocking this scroll view from becoming the responder. - -### Props - -- [View props...](view.md#props) - -* [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) -* [`contentContainerStyle`](scrollview.md#contentcontainerstyle) -* [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) -* [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) -* [`onContentSizeChange`](scrollview.md#oncontentsizechange) -* [`onScroll`](scrollview.md#onscroll) -* [`refreshControl`](scrollview.md#refreshcontrol) -* [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) -* [`scrollEnabled`](scrollview.md#scrollenabled) -* [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) -* [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) -* [`style`](scrollview.md#style) -* [`endFillColor`](scrollview.md#endfillcolor) -* [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) -* [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) -* [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) -* [`bounces`](scrollview.md#bounces) -* [`bouncesZoom`](scrollview.md#bounceszoom) -* [`horizontal`](scrollview.md#horizontal) -* [`centerContent`](scrollview.md#centercontent) -* [`contentInset`](scrollview.md#contentinset) -* [`contentOffset`](scrollview.md#contentoffset) -* [`decelerationRate`](scrollview.md#decelerationrate) -* [`directionalLockEnabled`](scrollview.md#directionallockenabled) -* [`indicatorStyle`](scrollview.md#indicatorstyle) -* [`maximumZoomScale`](scrollview.md#maximumzoomscale) -* [`minimumZoomScale`](scrollview.md#minimumzoomscale) -* [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) -* [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) -* [`pagingEnabled`](scrollview.md#pagingenabled) -* [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) -* [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) -* [`scrollsToTop`](scrollview.md#scrollstotop) -* [`snapToAlignment`](scrollview.md#snaptoalignment) -* [`snapToInterval`](scrollview.md#snaptointerval) -* [`zoomScale`](scrollview.md#zoomscale) -* [`onRefreshStart`](scrollview.md#onrefreshstart) - -### Methods - -- [`endRefreshing`](scrollview.md#endrefreshing) -- [`scrollTo`](scrollview.md#scrollto) -- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) -- [`handleScroll`](scrollview.md#handlescroll) - ---- - -# Reference - -## Props - -### `canCancelContentTouches` - -When false, once tracking starts, won't try to drag if the touch moves. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `contentContainerStyle` - -These styles will be applied to the scroll view content container which wraps all of the child views. Example: - -return ( ); ... var styles = StyleSheet.create({ contentContainer: { paddingVertical: 20 } }); - -| Type | Required | -| ------------------------------------ | -------- | -| StyleSheetPropType(View Style props) | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. -- 'interactive', the keyboard is dismissed interactively with the drag and moves in synchrony with the touch; dragging upwards cancels the dismissal. On android this is not supported and it will have the same behavior as 'none'. - -| Type | Required | -| -------------------------------------- | -------- | -| enum('none', 'interactive', 'on-drag') | No | - ---- - -### `keyboardShouldPersistTaps` - -When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the scroll view will not catch taps, and the keyboard will not dismiss automatically. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onContentSizeChange` - -Called when scrollable content view of the ScrollView changes. It's implemented using onLayout handler attached to the content container which this ScrollView renders. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onScroll` - -Fires at most once per frame during scrolling. The frequency of the events can be controlled using the `scrollEventThrottle` prop. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `refreshControl` - -A RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView. - -See [RefreshControl](refreshcontrol.md). - -| Type | Required | -| ------- | -------- | -| element | No | - ---- - -### `removeClippedSubviews` - -Experimental: When true, offscreen child views (whose `overflow` value is `hidden`) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `scrollEnabled` - -When false, the content does not scroll. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsHorizontalScrollIndicator` - -When true, shows a horizontal scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsVerticalScrollIndicator` - -When true, shows a vertical scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Shadow Props...](shadow-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderRightColor`**: [color](colors.md) - -- **`backfaceVisibility`**: enum('visible', 'hidden') - -- **`borderBottomColor`**: [color](colors.md) - -- **`borderBottomLeftRadius`**: number - -- **`borderBottomRightRadius`**: number - -- **`borderBottomWidth`**: number - -- **`borderColor`**: [color](colors.md) - -- **`borderLeftColor`**: [color](colors.md) - -- **`borderLeftWidth`**: number - -- **`borderRadius`**: number - -- **`backgroundColor`**: [color](colors.md) - -- **`borderRightWidth`**: number - -- **`borderStyle`**: enum('solid', 'dotted', 'dashed') - -- **`borderTopColor`**: [color](colors.md) - -- **`borderTopLeftRadius`**: number - -- **`borderTopRightRadius`**: number - -- **`borderTopWidth`**: number - -- **`borderWidth`**: number - -- **`opacity`**: number - -- **`overflow`**: enum('visible', 'hidden') - -- **`elevation`**: number (_Android_) - - (Android-only) Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions. - ---- - -### `endFillColor` - -Sometimes a scrollview takes up more space than its content fills. When this is the case, this prop will fill the rest of the scrollview with a color to avoid setting a background and creating unnecessary overdraw. This is an advanced optimization that is not needed in the general case. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `alwaysBounceHorizontal` - -When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself. The default value is true when `horizontal={true}` and false otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `alwaysBounceVertical` - -When true, the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself. The default value is false when `horizontal={true}` and true otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `automaticallyAdjustContentInsets` - -Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/ toolbar. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bounces` - -When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. When false, it disables all bouncing even if the `alwaysBounce*` props are true. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bouncesZoom` - -When true, gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture end, otherwise the zoom will not exceed the limits. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `horizontal` - -When true, the scroll view's children are arranged horizontally in a row instead of vertically in a column. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `centerContent` - -When true, the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `contentInset` - -The amount by which the scroll view content is inset from the edges of the scroll view. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `contentOffset` - -Used to manually set the starting scroll offset. The default value is `{x: 0, y: 0}`. - -| Type | Required | Platform | -| ------------- | -------- | -------- | -| PointPropType | No | iOS | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use string shortcuts `"normal"` and `"fast"` which match the underlying iOS settings for `UIScrollViewDecelerationRateNormal` and `UIScrollViewDecelerationRateFast` respectively. - -- normal: 0.998 (the default) -- fast: 0.99 - -| Type | Required | Platform | -| ------------------------------- | -------- | -------- | -| enum('fast', 'normal'), ,number | No | iOS | - ---- - -### `directionalLockEnabled` - -When true, the ScrollView will try to lock to only vertical or horizontal scrolling while dragging. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `indicatorStyle` - -The style of the scroll indicators. - -- `default` (the default), same as `black`. -- `black`, scroll indicator is `black`. This style is good against a light content background. -- `white`, scroll indicator is `white`. This style is good against a dark content background. - -| Type | Required | Platform | -| --------------------------------- | -------- | -------- | -| enum('default', 'black', 'white') | No | iOS | - ---- - -### `maximumZoomScale` - -The maximum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `minimumZoomScale` - -The minimum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `stickyHeaderIndices` - -An array of child indices determining which children get docked to the top of the screen when scrolling. For example, passing `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction with `horizontal={true}`. - -| Type | Required | Platform | -| --------------- | -------- | -------- | -| array of number | No | iOS | - ---- - -### `onScrollAnimationEnd` - -Called when a scrolling animation ends. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `pagingEnabled` - -When true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEventThrottle` - -This controls how often the scroll event will be fired while scrolling (as a time interval in ms). A lower number yields better accuracy for code that is tracking the scroll position, but can lead to scroll performance problems due to the volume of information being send over the bridge. You will not notice a difference between values set between 1-16 as the JS run loop is synced to the screen refresh rate. If you do not need precise scroll position tracking, set this value higher to limit the information being sent across the bridge. The default value is zero, which results in the scroll event being sent only once each time the view is scrolled. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `scrollIndicatorInsets` - -The amount by which the scroll view indicators are inset from the edges of the scroll view. This should normally be set to the same value as the `contentInset`. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `scrollsToTop` - -When true, the scroll view scrolls to top when the status bar is tapped. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `snapToAlignment` - -When `snapToInterval` is set, `snapToAlignment` will define the relationship of the snapping to the scroll view. - -- `start` (the default) will align the snap at the left (horizontal) or top (vertical) -- `center` will align the snap in the center -- `end` will align the snap at the right (horizontal) or bottom (vertical) - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| enum('start', 'center', 'end') | No | iOS | - ---- - -### `snapToInterval` - -When set, causes the scroll view to stop at multiples of the value of `snapToInterval`. This can be used for paginating through children that have lengths smaller than the scroll view. Used in combination with `snapToAlignment`. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `zoomScale` - -The current scale of the scroll view content. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `onRefreshStart` - -**Deprecated.** Use the `refreshControl` prop instead. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - -## Methods - -### `endRefreshing()` - -```jsx -endRefreshing(); -``` - ---- - -### `scrollTo()` - -```jsx -scrollTo( - ([y]: number), - object, - ([x]: number), - ([animated]: boolean) -); -``` - -Scrolls to a given x, y offset, either immediately or with a smooth animation. Syntax: - -scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true}) - -Note: The weird argument signature is due to the fact that, for historical reasons, the function also accepts separate arguments as as alternative to the options object. This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED. - ---- - -### `scrollWithoutAnimationTo()` - -```jsx -scrollWithoutAnimationTo(y, x); -``` - -Deprecated, do not use. - ---- - -### `handleScroll()` - -```jsx -handleScroll((e: Object)); -``` diff --git a/website/versioned_docs/version-0.24/slider.md b/website/versioned_docs/version-0.24/slider.md deleted file mode 100644 index 8b858cb1e09..00000000000 --- a/website/versioned_docs/version-0.24/slider.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: version-0.24-slider -title: Slider -original_id: slider ---- - -A component used to select a single value from a range of values. - -### Props - -- [View props...](view.md#props) - -* [`testID`](slider.md#testid) -* [`disabled`](slider.md#disabled) -* [`minimumValue`](slider.md#minimumvalue) -* [`onSlidingComplete`](slider.md#onslidingcomplete) -* [`onValueChange`](slider.md#onvaluechange) -* [`step`](slider.md#step) -* [`style`](slider.md#style) -* [`maximumValue`](slider.md#maximumvalue) -* [`value`](slider.md#value) -* [`maximumTrackImage`](slider.md#maximumtrackimage) -* [`maximumTrackTintColor`](slider.md#maximumtracktintcolor) -* [`minimumTrackImage`](slider.md#minimumtrackimage) -* [`minimumTrackTintColor`](slider.md#minimumtracktintcolor) -* [`thumbImage`](slider.md#thumbimage) -* [`trackImage`](slider.md#trackimage) - ---- - -# Reference - -## Props - -### `testID` - -Used to locate this view in UI automation tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `disabled` - -If true the user won't be able to move the slider. Default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `minimumValue` - -Initial minimum value of the slider. Default value is 0. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `onSlidingComplete` - -Callback called when the user finishes changing the value (e.g. when the slider is released). - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onValueChange` - -Callback continuously called while the user is dragging the slider. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `step` - -Step value of the slider. The value should be between 0 and (maximumValue - minimumValue). Default value is 0. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `style` - -Used to style and layout the `Slider`. See `StyleSheet.js` and `ViewStylePropTypes.js` for more info. - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `maximumValue` - -Initial maximum value of the slider. Default value is 1. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `value` - -Initial value of the slider. The value should be between minimumValue and maximumValue, which default to 0 and 1 respectively. Default value is 0. - -_This is not a controlled component_, you don't need to update the value during dragging. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `maximumTrackImage` - -Assigns a maximum track image. Only static images are supported. The leftmost pixel of the image will be stretched to fill the track. - -| Type | Required | Platform | -| ---------------------- | -------- | -------- | -| Image.propTypes.source | No | iOS | - ---- - -### `maximumTrackTintColor` - -The color used for the track to the right of the button. Overrides the default blue gradient image. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | iOS | - ---- - -### `minimumTrackImage` - -Assigns a minimum track image. Only static images are supported. The rightmost pixel of the image will be stretched to fill the track. - -| Type | Required | Platform | -| ---------------------- | -------- | -------- | -| Image.propTypes.source | No | iOS | - ---- - -### `minimumTrackTintColor` - -The color used for the track to the left of the button. Overrides the default blue gradient image. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | iOS | - ---- - -### `thumbImage` - -Sets an image for the thumb. Only static images are supported. - -| Type | Required | Platform | -| ---------------------- | -------- | -------- | -| Image.propTypes.source | No | iOS | - ---- - -### `trackImage` - -Assigns a single image for the track. Only static images are supported. The center pixel of the image will be stretched to fill the track. - -| Type | Required | Platform | -| ---------------------- | -------- | -------- | -| Image.propTypes.source | No | iOS | diff --git a/website/versioned_docs/version-0.24/statusbar.md b/website/versioned_docs/version-0.24/statusbar.md deleted file mode 100644 index b9b16a350ee..00000000000 --- a/website/versioned_docs/version-0.24/statusbar.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: version-0.24-statusbar -title: StatusBar -original_id: statusbar ---- - -Component to control the app status bar. - -### Usage with Navigator - -It is possible to have multiple `StatusBar` components mounted at the same time. The props will be merged in the order the `StatusBar` components were mounted. One use case is to specify status bar styles per route using `Navigator`. - -``` - - - - - - } - /> - -``` - -### Imperative API - -For cases where using a component is not ideal, there is also an imperative API exposed as static functions on the component. It is however not recommended to use the static API and the component for the same prop because any value set by the static API will get overriden by the one set by the component in the next render. - -### Props - -- [`animated`](statusbar.md#animated) -- [`hidden`](statusbar.md#hidden) -- [`backgroundColor`](statusbar.md#backgroundcolor) -- [`translucent`](statusbar.md#translucent) -- [`barStyle`](statusbar.md#barstyle) -- [`networkActivityIndicatorVisible`](statusbar.md#networkactivityindicatorvisible) -- [`showHideTransition`](statusbar.md#showhidetransition) - -### Methods - -- [`setHidden`](statusbar.md#sethidden) -- [`setBarStyle`](statusbar.md#setbarstyle) -- [`setNetworkActivityIndicatorVisible`](statusbar.md#setnetworkactivityindicatorvisible) -- [`setBackgroundColor`](statusbar.md#setbackgroundcolor) -- [`setTranslucent`](statusbar.md#settranslucent) - -### Type Definitions - -- [`StatusBarStyle`](statusbar.md#statusbarstyle) -- [`StatusBarAnimation`](statusbar.md#statusbaranimation) - ---- - -# Reference - -## Props - -### `animated` - -If the transition between status bar property changes should be animated. Supported for backgroundColor, barStyle and hidden. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `hidden` - -If the status bar is hidden. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `backgroundColor` - -The background color of the status bar. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `translucent` - -If the status bar is translucent. When translucent is set to true, the app will draw under the status bar. This is useful when using a semi transparent status bar color. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `barStyle` - -Sets the color of the status bar text. - -| Type | Required | Platform | -| -------------------------------- | -------- | -------- | -| enum('default', 'light-content') | No | iOS | - ---- - -### `networkActivityIndicatorVisible` - -If the network activity indicator should be visible. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `showHideTransition` - -The transition effect when showing and hiding the status bar using the `hidden` prop. Defaults to 'fade'. - -| Type | Required | Platform | -| --------------------- | -------- | -------- | -| enum('fade', 'slide') | No | iOS | - -## Methods - -### `setHidden()` - -```jsx -static setHidden(hidden: boolean, [animation]: StatusBarAnimation) -``` - ---- - -### `setBarStyle()` - -```jsx -static setBarStyle(style: StatusBarStyle, [animated]: boolean) -``` - ---- - -### `setNetworkActivityIndicatorVisible()` - -```jsx -static setNetworkActivityIndicatorVisible(visible: boolean) -``` - ---- - -### `setBackgroundColor()` - -```jsx -static setBackgroundColor(color, [animated]: boolean) -``` - ---- - -### `setTranslucent()` - -```jsx -static setTranslucent(translucent: boolean) -``` - -## Type Definitions - -### StatusBarStyle - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| ------------- | ----------- | -| default | | -| light-content | | - ---- - -### StatusBarAnimation - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| ----- | ----------- | -| none | | -| fade | | -| slide | | diff --git a/website/versioned_docs/version-0.24/switch.md b/website/versioned_docs/version-0.24/switch.md deleted file mode 100644 index 04157ddc031..00000000000 --- a/website/versioned_docs/version-0.24/switch.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: version-0.24-switch -title: Switch -original_id: switch ---- - -Renders a boolean input. - -This is a controlled component that requires an `onValueChange` callback that updates the `value` prop in order for the component to reflect user actions. If the `value` prop is not updated, the component will continue to render the supplied `value` prop instead of the expected result of any user actions. - -@keyword checkbox @keyword toggle - -### Props - -- [View props...](view.md#props) - -* [`disabled`](switch.md#disabled) -* [`onValueChange`](switch.md#onvaluechange) -* [`testID`](switch.md#testid) -* [`value`](switch.md#value) -* [`onTintColor`](switch.md#ontintcolor) -* [`thumbTintColor`](switch.md#thumbtintcolor) -* [`tintColor`](switch.md#tintcolor) - ---- - -# Reference - -## Props - -### `disabled` - -If true the user won't be able to toggle the switch. Default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onValueChange` - -Invoked with the new value when the value changes. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `value` - -The value of the switch. If true the switch will be turned on. Default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onTintColor` - -Background color when the switch is turned on. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | - ---- - -### `thumbTintColor` - -Color of the foreground switch grip. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | - ---- - -### `tintColor` - -Background color when the switch is turned off. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | diff --git a/website/versioned_docs/version-0.24/textinput.md b/website/versioned_docs/version-0.24/textinput.md deleted file mode 100644 index 3f0d5415166..00000000000 --- a/website/versioned_docs/version-0.24/textinput.md +++ /dev/null @@ -1,429 +0,0 @@ ---- -id: version-0.24-textinput -title: TextInput -original_id: textinput ---- - -A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. - -The clearest use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. An example: - -``` - this.setState({text})} - value={this.state.text} - /> -``` - -Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=false`. To achieve the same effect, you can wrap your `TextInput` in a `View`: - -``` - - - -``` - -### Props - -- [View props...](view.md#props) - -* [`onSubmitEditing`](textinput.md#onsubmitediting) -* [`autoCapitalize`](textinput.md#autocapitalize) -* [`autoFocus`](textinput.md#autofocus) -* [`blurOnSubmit`](textinput.md#bluronsubmit) -* [`defaultValue`](textinput.md#defaultvalue) -* [`editable`](textinput.md#editable) -* [`keyboardType`](textinput.md#keyboardtype) -* [`maxLength`](textinput.md#maxlength) -* [`multiline`](textinput.md#multiline) -* [`onBlur`](textinput.md#onblur) -* [`onChange`](textinput.md#onchange) -* [`onChangeText`](textinput.md#onchangetext) -* [`onEndEditing`](textinput.md#onendediting) -* [`onFocus`](textinput.md#onfocus) -* [`onLayout`](textinput.md#onlayout) -* [`onSelectionChange`](textinput.md#onselectionchange) -* [`autoCorrect`](textinput.md#autocorrect) -* [`placeholder`](textinput.md#placeholder) -* [`placeholderTextColor`](textinput.md#placeholdertextcolor) -* [`secureTextEntry`](textinput.md#securetextentry) -* [`selectTextOnFocus`](textinput.md#selecttextonfocus) -* [`selectionColor`](textinput.md#selectioncolor) -* [`style`](textinput.md#style) -* [`value`](textinput.md#value) -* [`numberOfLines`](textinput.md#numberoflines) -* [`underlineColorAndroid`](textinput.md#underlinecolorandroid) -* [`clearButtonMode`](textinput.md#clearbuttonmode) -* [`clearTextOnFocus`](textinput.md#cleartextonfocus) -* [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) -* [`keyboardAppearance`](textinput.md#keyboardappearance) -* [`onKeyPress`](textinput.md#onkeypress) -* [`returnKeyType`](textinput.md#returnkeytype) -* [`selectionState`](textinput.md#selectionstate) - -### Methods - -- [`isFocused`](textinput.md#isfocused) -- [`clear`](textinput.md#clear) - ---- - -# Reference - -## Props - -### `onSubmitEditing` - -Callback that is called when the text input's submit button is pressed. Invalid if multiline={true} is specified. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `autoCapitalize` - -Can tell TextInput to automatically capitalize certain characters. - -- characters: all characters, -- words: first letter of each word -- sentences: first letter of each sentence (default) -- none: don't auto capitalize anything - -| Type | Required | -| ------------------------------------------------ | -------- | -| enum('none', 'sentences', 'words', 'characters') | No | - ---- - -### `autoFocus` - -If true, focuses the input on componentDidMount. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `blurOnSubmit` - -If true, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting blurOnSubmit to true means that pressing return will blur the field and trigger the onSubmitEditing event instead of inserting a newline into the field. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `defaultValue` - -Provides an initial value that will change when the user starts typing. Useful for when you don't want to deal with listening to events and updating the value prop to keep the controlled state in sync. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `editable` - -If false, text is not editable. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `keyboardType` - -Determines which keyboard to open, e.g.`numeric`. - -The following values work across platforms: - -- default -- numeric -- email-address - -| Type | Required | -| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | - ---- - -### `maxLength` - -Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `multiline` - -If true, the text input can be multiple lines. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onBlur` - -Callback that is called when the text input is blurred - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChange` - -Callback that is called when the text input's text changes. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChangeText` - -Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onEndEditing` - -Callback that is called when text input ends. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onFocus` - -Callback that is called when the text input is focused - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{x, y, width, height}`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onSelectionChange` - -Callback that is called when the text input selection is changed - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `autoCorrect` - -If false, disables auto-correct. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `placeholder` - -The string that will be rendered before text input has been entered - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `placeholderTextColor` - -The text color of the placeholder string - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `secureTextEntry` - -If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `selectTextOnFocus` - -If true, all text will automatically be selected on focus - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `selectionColor` - -The highlight (and cursor on ios) color of the text input - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `style` - -Styles - -| Type | Required | -| --------------------- | -------- | -| [Text](text.md#style) | No | - ---- - -### `value` - -The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `numberOfLines` - -Sets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | Android | - ---- - -### `underlineColorAndroid` - -The color of the textInput underline. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `clearButtonMode` - -When the clear button should appear on the right side of the text view - -| Type | Required | Platform | -| ---------------------------------------------------------- | -------- | -------- | -| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | - ---- - -### `clearTextOnFocus` - -If true, clears the text field automatically when editing begins - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `enablesReturnKeyAutomatically` - -If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `keyboardAppearance` - -Determines the color of the keyboard. - -| Type | Required | Platform | -| -------------------------------- | -------- | -------- | -| enum('default', 'light', 'dark') | No | iOS | - ---- - -### `onKeyPress` - -Callback that is called when a key is pressed. Pressed key value is passed as an argument to the callback handler. Fires before onChange callbacks. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `returnKeyType` - -Determines how the return key should look. - -| Type | Required | Platform | -| ------------------------------------------------------------------------------------------------------------- | -------- | -------- | -| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | iOS | - ---- - -### `selectionState` - -See DocumentSelectionState.js, some state that is responsible for maintaining selection information for a document - -| Type | Required | Platform | -| ---------------------- | -------- | -------- | -| DocumentSelectionState | No | iOS | - -## Methods - -### `isFocused()` - -```jsx -isFocused(): -``` - ---- - -### `clear()` - -```jsx -clear(); -``` diff --git a/website/versioned_docs/version-0.24/vibration.md b/website/versioned_docs/version-0.24/vibration.md deleted file mode 100644 index e9011cb57fa..00000000000 --- a/website/versioned_docs/version-0.24/vibration.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: version-0.24-vibration -title: Vibration -original_id: vibration ---- - -The Vibration API is exposed at `Vibration.vibrate()`. The vibration is synchronous so this method will return immediately. - -There will be no effect on devices that do not support Vibration, eg. the simulator. - -Note for android add `` to `AndroidManifest.xml` - -Vibration patterns are currently unsupported. - -### Methods - -- [`vibrate`](vibration.md#vibrate) -- [`cancel`](vibration.md#cancel) - ---- - -# Reference - -## Methods - -### `vibrate()` - -```jsx -static vibrate(pattern, repeat) -``` - ---- - -### `cancel()` - -```jsx -static cancel() -``` - -Stop vibration - -@platform android diff --git a/website/versioned_docs/version-0.25/asyncstorage.md b/website/versioned_docs/version-0.25/asyncstorage.md deleted file mode 100644 index c9f28b7101c..00000000000 --- a/website/versioned_docs/version-0.25/asyncstorage.md +++ /dev/null @@ -1,263 +0,0 @@ ---- -id: version-0.25-asyncstorage -title: AsyncStorage -original_id: asyncstorage ---- - -AsyncStorage is an asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage. - -It is recommended that you use an abstraction on top of AsyncStorage instead of AsyncStorage directly for anything more than light usage since it operates globally. - -On iOS, AsyncStorage is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android, AsyncStorage will use either RocksDB or SQLite based on what is available. This JS code is a facade that provides a clear JS API, real Error objects, and non-multi functions. Each method returns a `Promise` object. - -### Methods - -- [`getItem`](asyncstorage.md#getitem) -- [`setItem`](asyncstorage.md#setitem) -- [`removeItem`](asyncstorage.md#removeitem) -- [`mergeItem`](asyncstorage.md#mergeitem) -- [`clear`](asyncstorage.md#clear) -- [`getAllKeys`](asyncstorage.md#getallkeys) -- [`flushGetRequests`](asyncstorage.md#flushgetrequests) -- [`multiGet`](asyncstorage.md#multiget) -- [`multiSet`](asyncstorage.md#multiset) -- [`multiRemove`](asyncstorage.md#multiremove) -- [`multiMerge`](asyncstorage.md#multimerge) - -### Properties - ---- - -# Reference - -## Methods - -### `getItem()` - -```jsx -static getItem(key, callback?) -``` - -Fetches `key` and passes the result to `callback`, along with an `Error` if there is any. Returns a `Promise` object. - ---- - -### `setItem()` - -```jsx -static setItem(key, value, callback?) -``` - -Sets `value` for `key` and calls `callback` on completion, along with an `Error` if there is any. Returns a `Promise` object. - ---- - -### `removeItem()` - -```jsx -static removeItem(key, callback?) -``` - -Returns a `Promise` object. - ---- - -### `mergeItem()` - -```jsx -static mergeItem(key, value, callback?) -``` - -Merges existing value with input value, assuming they are stringified json. Returns a `Promise` object. Not supported by all native implementations. - -Example: - -```jsx -let UID123_object = { - name: 'Chris', - age: 30, - traits: { hair: 'brown', eyes: 'brown' } -}; - -// need only define what will be added or updated -let UID123_delta = { - age: 31, - traits: { eyes: 'blue', shoe_size: 10 } -}; - -AsyncStorage.setItem( - store_key, - JSON.stringify(UID123_object), - () => { - AsyncStorage.mergeItem( - 'UID123', - JSON.stringify(UID123_delta), - () => { - AsyncStorage.getItem('UID123', (err, result) => { - console.log(result); - // => {'name':'Chris','age':31,'traits':{'shoe_size':10,'hair':'brown','eyes':'blue'}} - }); - } - ); - } -); -``` - ---- - -### `clear()` - -```jsx -static clear(callback?) -``` - -Erases _all_ AsyncStorage for all clients, libraries, etc. You probably don't want to call this - use removeItem or multiRemove to clear only your own keys instead. Returns a `Promise` object. - ---- - -### `getAllKeys()` - -```jsx -static getAllKeys(callback?) -``` - -Gets _all_ keys known to the app, for all callers, libraries, etc. Returns a `Promise` object. - -Example: see multiGet for example - ---- - -### `flushGetRequests()` - -```jsx -static flushGetRequests() -``` - -Flushes any pending requests using a single multiget - ---- - -### `multiGet()` - -```jsx -static multiGet(keys, callback?) -``` - -multiGet invokes callback with an array of key-value pair arrays that matches the input format of multiSet. Returns a `Promise` object. - -multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']]) - -Example: - -```jsx -AsyncStorage.getAllKeys((err, keys) => { - AsyncStorage.multiGet(keys, (err, stores) => { - stores.map((result, i, store) => { - // get at each store's key/value so you can work with it - let key = store[i][0]; - let value = store[i][1]; - }); - }); -}); -``` - ---- - -### `multiSet()` - -```jsx -static multiSet(keyValuePairs, callback?) -``` - -multiSet and multiMerge take arrays of key-value array pairs that match the output of multiGet, e.g. Returns a `Promise` object. - -multiSet([['k1', 'val1'], ['k2', 'val2']], cb); - -Example: see multiMerge for an example - ---- - -### `multiRemove()` - -```jsx -static multiRemove(keys, callback?) -``` - -Delete all the keys in the `keys` array. Returns a `Promise` object. - -Example: - -```jsx -let keys = ['k1', 'k2']; -AsyncStorage.multiRemove(keys, (err) => { - // keys k1 & k2 removed, if they existed - // do most stuff after removal (if you want) -}); -``` - ---- - -### `multiMerge()` - -```jsx -static multiMerge(keyValuePairs, callback?) -``` - -Merges existing values with input values, assuming they are stringified json. Returns a `Promise` object. - -Not supported by all native implementations. - -Example: - -```jsx -// first user, initial values -let UID234_object = { - name: 'Chris', - age: 30, - traits: { hair: 'brown', eyes: 'brown' } -}; - -// first user, delta values -let UID234_delta = { - age: 31, - traits: { eyes: 'blue', shoe_size: 10 } -}; - -// second user, initial values -let UID345_object = { - name: 'Marge', - age: 25, - traits: { hair: 'blonde', eyes: 'blue' } -}; - -// second user, delta values -let UID345_delta = { - age: 26, - traits: { eyes: 'green', shoe_size: 6 } -}; - -let multi_set_pairs = [ - ['UID234', JSON.stringify(UID234_object)], - ['UID345', JSON.stringify(UID345_object)] -]; -let multi_merge_pairs = [ - ['UID234', JSON.stringify(UID234_delta)], - ['UID345', JSON.stringify(UID345_delta)] -]; - -AsyncStorage.multiSet(multi_set_pairs, (err) => { - AsyncStorage.multiMerge(multi_merge_pairs, (err) => { - AsyncStorage.multiGet(['UID234', 'UID345'], (err, stores) => { - stores.map((result, i, store) => { - let key = store[i][0]; - let val = store[i][1]; - console.log(key, val); - // => UID234 {"name":"Chris","age":31,"traits":{"shoe_size":10,"hair":"brown","eyes":"blue"}} - // => UID345 {"name":"Marge","age":26,"traits":{"shoe_size":6,"hair":"blonde","eyes":"green"}} - }); - }); - }); -}); -``` - -## Properties diff --git a/website/versioned_docs/version-0.25/drawerlayoutandroid.md b/website/versioned_docs/version-0.25/drawerlayoutandroid.md deleted file mode 100644 index 58204b0341c..00000000000 --- a/website/versioned_docs/version-0.25/drawerlayoutandroid.md +++ /dev/null @@ -1,205 +0,0 @@ ---- -id: version-0.25-drawerlayoutandroid -title: DrawerLayoutAndroid -original_id: drawerlayoutandroid ---- - -React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop. - -Example: - -``` -render: function() { - var navigationView = ( - - I'm in the Drawer! - - ); - return ( - navigationView}> - - Hello - World! - - - ); -}, -``` - -### Props - -- [View props...](view.md#props) - -* [`renderNavigationView`](drawerlayoutandroid.md#rendernavigationview) -* [`onDrawerClose`](drawerlayoutandroid.md#ondrawerclose) -* [`drawerPosition`](drawerlayoutandroid.md#drawerposition) -* [`drawerWidth`](drawerlayoutandroid.md#drawerwidth) -* [`keyboardDismissMode`](drawerlayoutandroid.md#keyboarddismissmode) -* [`drawerLockMode`](drawerlayoutandroid.md#drawerlockmode) -* [`onDrawerOpen`](drawerlayoutandroid.md#ondraweropen) -* [`onDrawerSlide`](drawerlayoutandroid.md#ondrawerslide) -* [`onDrawerStateChanged`](drawerlayoutandroid.md#ondrawerstatechanged) -* [`drawerBackgroundColor`](drawerlayoutandroid.md#drawerbackgroundcolor) -* [`statusBarBackgroundColor`](drawerlayoutandroid.md#statusbarbackgroundcolor) - -### Methods - -- [`openDrawer`](drawerlayoutandroid.md#opendrawer) -- [`closeDrawer`](drawerlayoutandroid.md#closedrawer) - ---- - -# Reference - -## Props - -### `renderNavigationView` - -The navigation view that will be rendered to the side of the screen and can be pulled in. - -| Type | Required | -| -------- | -------- | -| function | Yes | - ---- - -### `onDrawerClose` - -Function called whenever the navigation view has been closed. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `drawerPosition` - -Specifies the side of the screen from which the drawer will slide in. - -| Type | Required | -| ------------------------------------------------------------------------- | -------- | -| enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) | No | - ---- - -### `drawerWidth` - -Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. - -| Type | Required | -| ----------------------- | -------- | -| enum('none', 'on-drag') | No | - ---- - -### `drawerLockMode` - -Specifies the lock mode of the drawer. The drawer can be locked in 3 states: - -- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures. -- locked-closed, meaning that the drawer will stay closed and not respond to gestures. -- locked-open, meaning that the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`). - -| Type | Required | -| ------------------------------------------------ | -------- | -| enum('unlocked', 'locked-closed', 'locked-open') | No | - ---- - -### `onDrawerOpen` - -Function called whenever the navigation view has been opened. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerSlide` - -Function called whenever there is an interaction with the navigation view. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerStateChanged` - -Function called when the drawer state has changed. The drawer can be in 3 states: - -- idle, meaning there is no interaction with the navigation view happening at the time -- dragging, meaning there is currently an interaction with the navigation view -- settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `drawerBackgroundColor` - - - -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: - -``` -return ( - - -); -``` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `statusBarBackgroundColor` - -Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar. It will only have an effect on API 21+. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - -## Methods - -### `openDrawer()` - -```jsx -openDrawer(); -``` - -Opens the drawer. - ---- - -### `closeDrawer()` - -```jsx -closeDrawer(); -``` - -Closes the drawer. diff --git a/website/versioned_docs/version-0.25/geolocation.md b/website/versioned_docs/version-0.25/geolocation.md deleted file mode 100644 index cb7a83d2f60..00000000000 --- a/website/versioned_docs/version-0.25/geolocation.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: version-0.25-geolocation -title: Geolocation -original_id: geolocation ---- - -The Geolocation API follows the web spec: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation - -### iOS - -You need to include the `NSLocationWhenInUseUsageDescription` key in Info.plist to enable geolocation. Geolocation is enabled by default when you create a project with `react-native init`. - -### Android - -To request access to location, you need to add the following line to your app's `AndroidManifest.xml`: - -`` - -### Methods - -- [`getCurrentPosition`](geolocation.md#getcurrentposition) -- [`watchPosition`](geolocation.md#watchposition) -- [`clearWatch`](geolocation.md#clearwatch) -- [`stopObserving`](geolocation.md#stopobserving) - ---- - -# Reference - -## Methods - -### `getCurrentPosition()` - -```jsx -static getCurrentPosition(geo_success, geo_error?, geo_options?) -``` - -Invokes the success callback once with the latest location info. Supported options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool) On Android, this can return almost immediately if the location is cached or request an update, which might take a while. - ---- - -### `watchPosition()` - -```jsx -static watchPosition(success, error?, options?) -``` - -Invokes the success callback whenever the location changes. Supported options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool), distanceFilter(m) - ---- - -### `clearWatch()` - -```jsx -static clearWatch(watchID) -``` - ---- - -### `stopObserving()` - -```jsx -static stopObserving() -``` - -Stops observing for device location changes. In addition, it removes all listeners previously registered. - -Notice that this method has only effect if the `geolocation.watchPosition(successCallback, errorCallback)` method was previously invoked. diff --git a/website/versioned_docs/version-0.25/image-style-props.md b/website/versioned_docs/version-0.25/image-style-props.md deleted file mode 100644 index 3feda0562f5..00000000000 --- a/website/versioned_docs/version-0.25/image-style-props.md +++ /dev/null @@ -1,149 +0,0 @@ ---- -id: version-0.25-image-style-props -title: Image Style Props -original_id: image-style-props ---- - -### Props - -- [`borderTopRightRadius`](image-style-props.md#bordertoprightradius) -- [`backfaceVisibility`](image-style-props.md#backfacevisibility) -- [`borderBottomLeftRadius`](image-style-props.md#borderbottomleftradius) -- [`borderBottomRightRadius`](image-style-props.md#borderbottomrightradius) -- [`borderColor`](image-style-props.md#bordercolor) -- [`borderRadius`](image-style-props.md#borderradius) -- [`borderTopLeftRadius`](image-style-props.md#bordertopleftradius) -- [`backgroundColor`](image-style-props.md#backgroundcolor) -- [`borderWidth`](image-style-props.md#borderwidth) -- [`opacity`](image-style-props.md#opacity) -- [`overflow`](image-style-props.md#overflow) -- [`resizeMode`](image-style-props.md#resizemode) -- [`overlayColor`](image-style-props.md#overlaycolor) -- [`tintColor`](image-style-props.md#tintcolor) - ---- - -# Reference - -## Props - -### `borderTopRightRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `backfaceVisibility` - -| Type | Required | -| ------------------------- | -------- | -| enum('visible', 'hidden') | No | - ---- - -### `borderBottomLeftRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderBottomRightRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderTopLeftRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `backgroundColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `opacity` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `overflow` - -| Type | Required | -| ------------------------- | -------- | -| enum('visible', 'hidden') | No | - ---- - -### `resizeMode` - -| Type | Required | -| ---------------------------- | -------- | -| Object.keys(ImageResizeMode) | No | - ---- - -### `overlayColor` - -When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners: - -- Certain resize modes, such as 'contain' -- Animated GIFs - -A typical way to use this prop is with images displayed on a solid background and setting the `overlayColor` to the same color as the background. - -For details of how this works under the hood, see http://frescolib.org/rounded-corners-and-circles.md - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `tintColor` - -iOS-Specific style to "tint" an image. Changes the color of all the non-transparent pixels to the tintColor. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | diff --git a/website/versioned_docs/version-0.25/image.md b/website/versioned_docs/version-0.25/image.md deleted file mode 100644 index 0cc28e9cee5..00000000000 --- a/website/versioned_docs/version-0.25/image.md +++ /dev/null @@ -1,274 +0,0 @@ ---- -id: version-0.25-image -title: Image -original_id: image ---- - -A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. - -Example usage: - -``` -renderImages: function() { - return ( - - - - - ); -}, -``` - -### Props - -- [`testID`](image.md#testid) -- [`onLayout`](image.md#onlayout) -- [`onLoadEnd`](image.md#onloadend) -- [`onLoadStart`](image.md#onloadstart) -- [`resizeMode`](image.md#resizemode) -- [`source`](image.md#source) -- [`style`](image.md#style) -- [`onLoad`](image.md#onload) -- [`accessibilityLabel`](image.md#accessibilitylabel) -- [`accessible`](image.md#accessible) -- [`blurRadius`](image.md#blurradius) -- [`capInsets`](image.md#capinsets) -- [`defaultSource`](image.md#defaultsource) -- [`onError`](image.md#onerror) -- [`onProgress`](image.md#onprogress) - -### Methods - -- [`getSize`](image.md#getsize) -- [`prefetch`](image.md#prefetch) - ---- - -# Reference - -## Props - -### `testID` - -A unique identifier for this element to be used in UI Automation testing scripts. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{nativeEvent: {layout: {x, y, width, height}}}`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadEnd` - -Invoked when load either succeeds or fails - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadStart` - -Invoked on load start - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `resizeMode` - -Determines how to resize the image when the frame doesn't match the raw image dimensions. - -'cover': Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding). - -'contain': Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). - -'stretch': Scale width and height independently, This may change the aspect ratio of the src. - -| Type | Required | -| ----------------------------------- | -------- | -| enum('cover', 'contain', 'stretch') | No | - ---- - -### `source` - -`uri` is a string representing the resource identifier for the image, which could be an http address, a local file path, or the name of a static image resource (which should be wrapped in the `require('./path/to/image.png')` function). - -| Type | Required | -| ------------------------------ | -------- | -| object: {uri: string}, ,number | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Shadow Props...](shadow-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderTopRightRadius`**: number - -- **`backfaceVisibility`**: enum('visible', 'hidden') - -- **`borderBottomLeftRadius`**: number - -- **`borderBottomRightRadius`**: number - -- **`borderColor`**: [color](colors.md) - -- **`borderRadius`**: number - -- **`borderTopLeftRadius`**: number - -- **`backgroundColor`**: [color](colors.md) - -- **`borderWidth`**: number - -- **`opacity`**: number - -- **`overflow`**: enum('visible', 'hidden') - -- **`resizeMode`**: Object.keys(ImageResizeMode) - -- **`overlayColor`**: string (_Android_) - - When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners: - - - Certain resize modes, such as 'contain' - - Animated GIFs - - A typical way to use this prop is with images displayed on a solid background and setting the `overlayColor` to the same color as the background. - - For details of how this works under the hood, see http://frescolib.org/rounded-corners-and-circles.md - -* **`tintColor`**: [color](colors.md) (_iOS_) - - iOS-Specific style to "tint" an image. Changes the color of all the non-transparent pixels to the tintColor. - ---- - -### `onLoad` - -Invoked when load completes successfully - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `accessibilityLabel` - -The text that's read by the screen reader when the user interacts with the image. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | iOS | - ---- - -### `accessible` - -When true, indicates the image is an accessibility element. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `blurRadius` - -blurRadius: the blur radius of the blur filter added to the image - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `capInsets` - -When the image is resized, the corners of the size specified by capInsets will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info on [Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets) - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `defaultSource` - -A static image to display while loading the image source. - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| object: {uri: string}, ,number | No | iOS | - ---- - -### `onError` - -Invoked on load error with `{nativeEvent: {error}}` - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `onProgress` - -Invoked on download progress with `{nativeEvent: {loaded, total}}` - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - -## Methods - -### `getSize()` - -```jsx -static getSize(uri: string, success: function, failure: function) -``` - -Retrieve the width and height (in pixels) of an image prior to displaying it. This method can fail if the image cannot be found, or fails to download. - -In order to retrieve the image dimensions, the image may first need to be loaded or downloaded, after which it will be cached. This means that in principle you could use this method to preload images, however it is not optimized for that purpose, and may in future be implemented in a way that does not fully load/download the image data. A proper, supported way to preload images will be provided as a separate API. - ---- - -### `prefetch()` - -```jsx -static prefetch(url: string) -``` - -Prefetches a remote image for later use by downloading it to the disk cache diff --git a/website/versioned_docs/version-0.25/navigatorios.md b/website/versioned_docs/version-0.25/navigatorios.md deleted file mode 100644 index e38cbbeb0c1..00000000000 --- a/website/versioned_docs/version-0.25/navigatorios.md +++ /dev/null @@ -1,277 +0,0 @@ ---- -id: version-0.25-navigatorios -title: NavigatorIOS -original_id: navigatorios ---- - -NavigatorIOS wraps UIKit navigation and allows you to add back-swipe functionality across your app. - -> **NOTE**: This Component is not maintained by Facebook -> -> This component is under community responsibility. If a pure JavaScript solution fits your needs you may try the `Navigator` component instead. - -#### Routes - -A route is an object used to describe each page in the navigator. The first route is provided to NavigatorIOS as `initialRoute`: - -``` -render: function() { - return ( - - ); -}, -``` - -Now MyView will be rendered by the navigator. It will receive the route object in the `route` prop, a navigator, and all of the props specified in `passProps`. - -See the initialRoute propType for a complete definition of a route. - -#### Navigator - -A `navigator` is an object of navigation functions that a view can call. It is passed as a prop to any component rendered by NavigatorIOS. - -``` -var MyView = React.createClass({ - _handleBackButtonPress: function() { - this.props.navigator.pop(); - }, - _handleNextButtonPress: function() { - this.props.navigator.push(nextRoute); - }, - ... -}); -``` - -Navigator functions are also available on the NavigatorIOS component: - -``` -var MyView = React.createClass({ - _handleNavigationRequest: function() { - this.refs.nav.push(otherRoute); - }, - render: () => ( - - ), -}); -``` - -Props passed to the NavigatorIOS component will set the default configuration for the navigation bar. Props passed as properties to a route object will set the configuration for that route's navigation bar, overriding any props passed to the NavigatorIOS component. - -### Props - -- [`initialRoute`](navigatorios.md#initialroute) -- [`barTintColor`](navigatorios.md#bartintcolor) -- [`itemWrapperStyle`](navigatorios.md#itemwrapperstyle) -- [`navigationBarHidden`](navigatorios.md#navigationbarhidden) -- [`shadowHidden`](navigatorios.md#shadowhidden) -- [`tintColor`](navigatorios.md#tintcolor) -- [`titleTextColor`](navigatorios.md#titletextcolor) -- [`translucent`](navigatorios.md#translucent) - -### Methods - -- [`push`](navigatorios.md#push) -- [`popN`](navigatorios.md#popn) -- [`pop`](navigatorios.md#pop) -- [`replaceAtIndex`](navigatorios.md#replaceatindex) -- [`replace`](navigatorios.md#replace) -- [`replacePrevious`](navigatorios.md#replaceprevious) -- [`popToTop`](navigatorios.md#poptotop) -- [`popToRoute`](navigatorios.md#poptoroute) -- [`replacePreviousAndPop`](navigatorios.md#replacepreviousandpop) -- [`resetTo`](navigatorios.md#resetto) - ---- - -# Reference - -## Props - -### `initialRoute` - -NavigatorIOS uses "route" objects to identify child views, their props, and navigation bar configuration. "push" and all the other navigation operations expect routes to be like this: - -| Type | Required | -| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| object: {component: function,title: string,passProps: object,backButtonIcon: Image.propTypes.source,backButtonTitle: string,leftButtonIcon: Image.propTypes.source,leftButtonTitle: string,onLeftButtonPress: function,rightButtonIcon: Image.propTypes.source,rightButtonTitle: string,onRightButtonPress: function,wrapperStyle: [View](view.md#style),navigationBarHidden: bool,shadowHidden: bool,tintColor: string,barTintColor: string,titleTextColor: string,translucent: bool} | Yes | - ---- - -### `barTintColor` - -The default background color of the navigation bar - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `itemWrapperStyle` - -The default wrapper style for components in the navigator. A common use case is to set the backgroundColor for every page - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `navigationBarHidden` - -A Boolean value that indicates whether the navigation bar is hidden by default - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `shadowHidden` - -A Boolean value that indicates whether to hide the 1px hairline shadow by default - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `tintColor` - -The default color used for buttons in the navigation bar - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `titleTextColor` - -The default text color of the navigation bar title - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `translucent` - -A Boolean value that indicates whether the navigation bar is translucent by default - -| Type | Required | -| ---- | -------- | -| bool | No | - -## Methods - -### `push()` - -```jsx -push((route: object)); -``` - -Navigate forward to a new route - ---- - -### `popN()` - -```jsx -popN((n: number)); -``` - -Go back N pages at once. When N=1, behavior matches `pop()` - ---- - -### `pop()` - -```jsx -pop(); -``` - -Go back one page - ---- - -### `replaceAtIndex()` - -```jsx -replaceAtIndex((route: object), (index: number)); -``` - -Replace a route in the navigation stack. - -`index` specifies the route in the stack that should be replaced. If it's negative, it counts from the back. - ---- - -### `replace()` - -```jsx -replace((route: object)); -``` - -Replace the route for the current page and immediately load the view for the new route. - ---- - -### `replacePrevious()` - -```jsx -replacePrevious((route: object)); -``` - -Replace the route/view for the previous page. - ---- - -### `popToTop()` - -```jsx -popToTop(); -``` - -Go back to the top item - ---- - -### `popToRoute()` - -```jsx -popToRoute((route: object)); -``` - -Go back to the item for a particular route object - ---- - -### `replacePreviousAndPop()` - -```jsx -replacePreviousAndPop((route: object)); -``` - -Replaces the previous route/view and transitions back to it. - ---- - -### `resetTo()` - -```jsx -resetTo((route: object)); -``` - -Replaces the top item and popToTop diff --git a/website/versioned_docs/version-0.25/refreshcontrol.md b/website/versioned_docs/version-0.25/refreshcontrol.md deleted file mode 100644 index 61b44293e89..00000000000 --- a/website/versioned_docs/version-0.25/refreshcontrol.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: version-0.25-refreshcontrol -title: RefreshControl -original_id: refreshcontrol ---- - -This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at `scrollY: 0`, swiping down triggers an `onRefresh` event. - -### Usage example - -```js -class RefreshableList extends Component { - constructor(props) { - super(props); - this.state = { - refreshing: false, - }; - } - - _onRefresh() { - this.setState({refreshing: true}); - fetchData().then(() => { - this.setState({refreshing: false}); - }); - } - - render() { - return ( - - } - ... - > - ... - - ); - } - ... -} -``` - -**Note:** `refreshing` is a controlled prop, this is why it needs to be set to true in the `onRefresh` function otherwise the refresh indicator will stop immediatly. - -### Props - -- [View props...](view.md#props) - -* [`onRefresh`](refreshcontrol.md#onrefresh) -* [`refreshing`](refreshcontrol.md#refreshing) -* [`colors`](refreshcontrol.md#colors) -* [`enabled`](refreshcontrol.md#enabled) -* [`progressBackgroundColor`](refreshcontrol.md#progressbackgroundcolor) -* [`size`](refreshcontrol.md#size) -* [`tintColor`](refreshcontrol.md#tintcolor) -* [`title`](refreshcontrol.md#title) -* [`titleColor`](refreshcontrol.md#titlecolor) - ---- - -# Reference - -## Props - -### `onRefresh` - -Called when the view starts refreshing. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `refreshing` - -Whether the view should be indicating an active refresh. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `colors` - -The colors (at least one) that will be used to draw the refresh indicator. - -| Type | Required | Platform | -| --------------------------- | -------- | -------- | -| array of [color](colors.md) | No | Android | - ---- - -### `enabled` - -Whether the pull to refresh functionality is enabled. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `progressBackgroundColor` - -The background color of the refresh indicator. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `size` - -Size of the refresh indicator, see RefreshControl.SIZE. - -| Type | Required | Platform | -| -------------------------------- | -------- | -------- | -| RefreshLayoutConsts.SIZE.DEFAULT | No | Android | - ---- - -### `tintColor` - -The color of the refresh indicator. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | - ---- - -### `title` - -The title displayed under the refresh indicator. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | iOS | - ---- - -### `titleColor` - -Title color. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | diff --git a/website/versioned_docs/version-0.25/scrollview.md b/website/versioned_docs/version-0.25/scrollview.md deleted file mode 100644 index b095ebf331a..00000000000 --- a/website/versioned_docs/version-0.25/scrollview.md +++ /dev/null @@ -1,543 +0,0 @@ ---- -id: version-0.25-scrollview -title: ScrollView -original_id: scrollview ---- - -Component that wraps platform ScrollView while providing integration with touch locking "responder" system. - -Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer `{flex: 1}` down the view stack can lead to errors here, which the element inspector will help to debug. - -Doesn't yet support other contained responders from blocking this scroll view from becoming the responder. - -### Props - -- [View props...](view.md#props) - -* [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) -* [`contentContainerStyle`](scrollview.md#contentcontainerstyle) -* [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) -* [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) -* [`onContentSizeChange`](scrollview.md#oncontentsizechange) -* [`onScroll`](scrollview.md#onscroll) -* [`refreshControl`](scrollview.md#refreshcontrol) -* [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) -* [`scrollEnabled`](scrollview.md#scrollenabled) -* [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) -* [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) -* [`style`](scrollview.md#style) -* [`endFillColor`](scrollview.md#endfillcolor) -* [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) -* [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) -* [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) -* [`bounces`](scrollview.md#bounces) -* [`bouncesZoom`](scrollview.md#bounceszoom) -* [`horizontal`](scrollview.md#horizontal) -* [`centerContent`](scrollview.md#centercontent) -* [`contentInset`](scrollview.md#contentinset) -* [`contentOffset`](scrollview.md#contentoffset) -* [`decelerationRate`](scrollview.md#decelerationrate) -* [`directionalLockEnabled`](scrollview.md#directionallockenabled) -* [`indicatorStyle`](scrollview.md#indicatorstyle) -* [`maximumZoomScale`](scrollview.md#maximumzoomscale) -* [`minimumZoomScale`](scrollview.md#minimumzoomscale) -* [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) -* [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) -* [`pagingEnabled`](scrollview.md#pagingenabled) -* [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) -* [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) -* [`scrollsToTop`](scrollview.md#scrollstotop) -* [`snapToAlignment`](scrollview.md#snaptoalignment) -* [`snapToInterval`](scrollview.md#snaptointerval) -* [`zoomScale`](scrollview.md#zoomscale) -* [`onRefreshStart`](scrollview.md#onrefreshstart) - -### Methods - -- [`endRefreshing`](scrollview.md#endrefreshing) -- [`scrollTo`](scrollview.md#scrollto) -- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) - ---- - -# Reference - -## Props - -### `canCancelContentTouches` - -When false, once tracking starts, won't try to drag if the touch moves. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `contentContainerStyle` - -These styles will be applied to the scroll view content container which wraps all of the child views. Example: - -return ( ); ... var styles = StyleSheet.create({ contentContainer: { paddingVertical: 20 } }); - -| Type | Required | -| ------------------------------------ | -------- | -| StyleSheetPropType(View Style props) | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. -- 'interactive', the keyboard is dismissed interactively with the drag and moves in synchrony with the touch; dragging upwards cancels the dismissal. On android this is not supported and it will have the same behavior as 'none'. - -| Type | Required | -| -------------------------------------- | -------- | -| enum('none', 'interactive', 'on-drag') | No | - ---- - -### `keyboardShouldPersistTaps` - -When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the scroll view will not catch taps, and the keyboard will not dismiss automatically. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onContentSizeChange` - -Called when scrollable content view of the ScrollView changes. It's implemented using onLayout handler attached to the content container which this ScrollView renders. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onScroll` - -Fires at most once per frame during scrolling. The frequency of the events can be controlled using the `scrollEventThrottle` prop. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `refreshControl` - -A RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView. - -See [RefreshControl](refreshcontrol.md). - -| Type | Required | -| ------- | -------- | -| element | No | - ---- - -### `removeClippedSubviews` - -Experimental: When true, offscreen child views (whose `overflow` value is `hidden`) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `scrollEnabled` - -When false, the content does not scroll. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsHorizontalScrollIndicator` - -When true, shows a horizontal scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsVerticalScrollIndicator` - -When true, shows a vertical scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Shadow Props...](shadow-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderRightColor`**: [color](colors.md) - -- **`backfaceVisibility`**: enum('visible', 'hidden') - -- **`borderBottomColor`**: [color](colors.md) - -- **`borderBottomLeftRadius`**: number - -- **`borderBottomRightRadius`**: number - -- **`borderBottomWidth`**: number - -- **`borderColor`**: [color](colors.md) - -- **`borderLeftColor`**: [color](colors.md) - -- **`borderLeftWidth`**: number - -- **`borderRadius`**: number - -- **`backgroundColor`**: [color](colors.md) - -- **`borderRightWidth`**: number - -- **`borderStyle`**: enum('solid', 'dotted', 'dashed') - -- **`borderTopColor`**: [color](colors.md) - -- **`borderTopLeftRadius`**: number - -- **`borderTopRightRadius`**: number - -- **`borderTopWidth`**: number - -- **`borderWidth`**: number - -- **`opacity`**: number - -- **`overflow`**: enum('visible', 'hidden') - -- **`elevation`**: number (_Android_) - - (Android-only) Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions. - ---- - -### `endFillColor` - -Sometimes a scrollview takes up more space than its content fills. When this is the case, this prop will fill the rest of the scrollview with a color to avoid setting a background and creating unnecessary overdraw. This is an advanced optimization that is not needed in the general case. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `alwaysBounceHorizontal` - -When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself. The default value is true when `horizontal={true}` and false otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `alwaysBounceVertical` - -When true, the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself. The default value is false when `horizontal={true}` and true otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `automaticallyAdjustContentInsets` - -Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/ toolbar. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bounces` - -When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. When false, it disables all bouncing even if the `alwaysBounce*` props are true. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bouncesZoom` - -When true, gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture end, otherwise the zoom will not exceed the limits. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `horizontal` - -When true, the scroll view's children are arranged horizontally in a row instead of vertically in a column. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `centerContent` - -When true, the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `contentInset` - -The amount by which the scroll view content is inset from the edges of the scroll view. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `contentOffset` - -Used to manually set the starting scroll offset. The default value is `{x: 0, y: 0}`. - -| Type | Required | Platform | -| ------------- | -------- | -------- | -| PointPropType | No | iOS | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use string shortcuts `"normal"` and `"fast"` which match the underlying iOS settings for `UIScrollViewDecelerationRateNormal` and `UIScrollViewDecelerationRateFast` respectively. - -- normal: 0.998 (the default) -- fast: 0.99 - -| Type | Required | Platform | -| ------------------------------- | -------- | -------- | -| enum('fast', 'normal'), ,number | No | iOS | - ---- - -### `directionalLockEnabled` - -When true, the ScrollView will try to lock to only vertical or horizontal scrolling while dragging. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `indicatorStyle` - -The style of the scroll indicators. - - - -- `default` (the default), same as `black`. -- `black`, scroll indicator is black. This style is good against a white content background. -- `white`, scroll indicator is white. This style is good against a black content background. - -| Type | Required | Platform | -| --------------------------------- | -------- | -------- | -| enum('default', 'black', 'white') | No | iOS | - ---- - -### `maximumZoomScale` - -The maximum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `minimumZoomScale` - -The minimum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `stickyHeaderIndices` - -An array of child indices determining which children get docked to the top of the screen when scrolling. For example, passing `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction with `horizontal={true}`. - -| Type | Required | Platform | -| --------------- | -------- | -------- | -| array of number | No | iOS | - ---- - -### `onScrollAnimationEnd` - -Called when a scrolling animation ends. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `pagingEnabled` - -When true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEventThrottle` - -This controls how often the scroll event will be fired while scrolling (as a time interval in ms). A lower number yields better accuracy for code that is tracking the scroll position, but can lead to scroll performance problems due to the volume of information being send over the bridge. You will not notice a difference between values set between 1-16 as the JS run loop is synced to the screen refresh rate. If you do not need precise scroll position tracking, set this value higher to limit the information being sent across the bridge. The default value is zero, which results in the scroll event being sent only once each time the view is scrolled. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `scrollIndicatorInsets` - -The amount by which the scroll view indicators are inset from the edges of the scroll view. This should normally be set to the same value as the `contentInset`. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `scrollsToTop` - -When true, the scroll view scrolls to top when the status bar is tapped. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `snapToAlignment` - -When `snapToInterval` is set, `snapToAlignment` will define the relationship of the snapping to the scroll view. - -- `start` (the default) will align the snap at the left (horizontal) or top (vertical) -- `center` will align the snap in the center -- `end` will align the snap at the right (horizontal) or bottom (vertical) - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| enum('start', 'center', 'end') | No | iOS | - ---- - -### `snapToInterval` - -When set, causes the scroll view to stop at multiples of the value of `snapToInterval`. This can be used for paginating through children that have lengths smaller than the scroll view. Used in combination with `snapToAlignment`. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `zoomScale` - -The current scale of the scroll view content. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `onRefreshStart` - -**Deprecated.** Use the `refreshControl` prop instead. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - -## Methods - -### `endRefreshing()` - -```jsx -endRefreshing(); -``` - -Deprecated. Use `RefreshControl` instead. - ---- - -### `scrollTo()` - -```jsx -scrollTo( - ([y]: number), - object, - ([x]: number), - ([animated]: boolean) -); -``` - -Scrolls to a given x, y offset, either immediately or with a smooth animation. - -Syntax: - -`scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})` - -Note: The weird argument signature is due to the fact that, for historical reasons, the function also accepts separate arguments as as alternative to the options object. This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED. - ---- - -### `scrollWithoutAnimationTo()` - -```jsx -scrollWithoutAnimationTo(y, x); -``` - -Deprecated, do not use. diff --git a/website/versioned_docs/version-0.25/statusbar.md b/website/versioned_docs/version-0.25/statusbar.md deleted file mode 100644 index a8912554cb8..00000000000 --- a/website/versioned_docs/version-0.25/statusbar.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: version-0.25-statusbar -title: StatusBar -original_id: statusbar ---- - -Component to control the app status bar. - -### Usage with Navigator - -It is possible to have multiple `StatusBar` components mounted at the same time. The props will be merged in the order the `StatusBar` components were mounted. One use case is to specify status bar styles per route using `Navigator`. - -``` - - - - - - } - /> - -``` - -### Imperative API - -For cases where using a component is not ideal, there is also an imperative API exposed as static functions on the component. It is however not recommended to use the static API and the component for the same prop because any value set by the static API will get overriden by the one set by the component in the next render. - -### Props - -- [`animated`](statusbar.md#animated) -- [`hidden`](statusbar.md#hidden) -- [`backgroundColor`](statusbar.md#backgroundcolor) -- [`translucent`](statusbar.md#translucent) -- [`barStyle`](statusbar.md#barstyle) -- [`networkActivityIndicatorVisible`](statusbar.md#networkactivityindicatorvisible) -- [`showHideTransition`](statusbar.md#showhidetransition) - -### Methods - -- [`setHidden`](statusbar.md#sethidden) -- [`setBarStyle`](statusbar.md#setbarstyle) -- [`setNetworkActivityIndicatorVisible`](statusbar.md#setnetworkactivityindicatorvisible) -- [`setBackgroundColor`](statusbar.md#setbackgroundcolor) -- [`setTranslucent`](statusbar.md#settranslucent) - -### Type Definitions - -- [`StatusBarStyle`](statusbar.md#statusbarstyle) -- [`StatusBarAnimation`](statusbar.md#statusbaranimation) - ---- - -# Reference - -## Props - -### `animated` - -If the transition between status bar property changes should be animated. Supported for backgroundColor, barStyle and hidden. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `hidden` - -If the status bar is hidden. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `backgroundColor` - -The background color of the status bar. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `translucent` - -If the status bar is translucent. When translucent is set to true, the app will draw under the status bar. This is useful when using a semi transparent status bar color. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `barStyle` - -Sets the color of the status bar text. - -| Type | Required | Platform | -| -------------------------------- | -------- | -------- | -| enum('default', 'light-content') | No | iOS | - ---- - -### `networkActivityIndicatorVisible` - -If the network activity indicator should be visible. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `showHideTransition` - -The transition effect when showing and hiding the status bar using the `hidden` prop. Defaults to 'fade'. - -| Type | Required | Platform | -| --------------------- | -------- | -------- | -| enum('fade', 'slide') | No | iOS | - -## Methods - -### `setHidden()` - -```jsx -static setHidden(hidden: boolean, [animation]: StatusBarAnimation) -``` - ---- - -### `setBarStyle()` - -```jsx -static setBarStyle(style: StatusBarStyle, [animated]: boolean) -``` - ---- - -### `setNetworkActivityIndicatorVisible()` - -```jsx -static setNetworkActivityIndicatorVisible(visible: boolean) -``` - ---- - -### `setBackgroundColor()` - -```jsx -static setBackgroundColor(color: string, [animated]: boolean) -``` - ---- - -### `setTranslucent()` - -```jsx -static setTranslucent(translucent: boolean) -``` - -## Type Definitions - -### StatusBarStyle - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| ------------- | ----------- | -| default | | -| light-content | | - ---- - -### StatusBarAnimation - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| ----- | ----------- | -| none | | -| fade | | -| slide | | diff --git a/website/versioned_docs/version-0.25/text-style-props.md b/website/versioned_docs/version-0.25/text-style-props.md deleted file mode 100644 index 64dab90a81b..00000000000 --- a/website/versioned_docs/version-0.25/text-style-props.md +++ /dev/null @@ -1,160 +0,0 @@ ---- -id: version-0.25-text-style-props -title: Text Style Props -original_id: text-style-props ---- - -### Props - -- [`textShadowColor`](text-style-props.md#textshadowcolor) -- [`color`](text-style-props.md#color) -- [`fontSize`](text-style-props.md#fontsize) -- [`fontStyle`](text-style-props.md#fontstyle) -- [`fontWeight`](text-style-props.md#fontweight) -- [`lineHeight`](text-style-props.md#lineheight) -- [`textAlign`](text-style-props.md#textalign) -- [`textDecorationLine`](text-style-props.md#textdecorationline) -- [`fontFamily`](text-style-props.md#fontfamily) -- [`textShadowOffset`](text-style-props.md#textshadowoffset) -- [`textShadowRadius`](text-style-props.md#textshadowradius) -- [`textAlignVertical`](text-style-props.md#textalignvertical) -- [`letterSpacing`](text-style-props.md#letterspacing) -- [`textDecorationColor`](text-style-props.md#textdecorationcolor) -- [`textDecorationStyle`](text-style-props.md#textdecorationstyle) -- [`writingDirection`](text-style-props.md#writingdirection) - ---- - -# Reference - -## Props - -### `textShadowColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `color` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `fontSize` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `fontStyle` - -| Type | Required | -| ------------------------ | -------- | -| enum('normal', 'italic') | No | - ---- - -### `fontWeight` - -Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen. - -| Type | Required | -| ------------------------------------------------------------------------------------- | -------- | -| enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') | No | - ---- - -### `lineHeight` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `textAlign` - -Specifies text alignment. The value 'justify' is only supported on iOS. - -| Type | Required | -| -------------------------------------------------- | -------- | -| enum('auto', 'left', 'right', 'center', 'justify') | No | - ---- - -### `textDecorationLine` - -| Type | Required | -| ------------------------------------------------------------------- | -------- | -| enum('none', 'underline', 'line-through', 'underline line-through') | No | - ---- - -### `fontFamily` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `textShadowOffset` - -| Type | Required | -| -------------------------------------- | -------- | -| object: {width: number,height: number} | No | - ---- - -### `textShadowRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `textAlignVertical` - -| Type | Required | Platform | -| --------------------------------------- | -------- | -------- | -| enum('auto', 'top', 'bottom', 'center') | No | Android | - ---- - -### `letterSpacing` - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `textDecorationColor` - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | - ---- - -### `textDecorationStyle` - -| Type | Required | Platform | -| ------------------------------------------- | -------- | -------- | -| enum('solid', 'double', 'dotted', 'dashed') | No | iOS | - ---- - -### `writingDirection` - -| Type | Required | Platform | -| -------------------------- | -------- | -------- | -| enum('auto', 'ltr', 'rtl') | No | iOS | diff --git a/website/versioned_docs/version-0.25/text.md b/website/versioned_docs/version-0.25/text.md deleted file mode 100644 index 3ebcdc9f629..00000000000 --- a/website/versioned_docs/version-0.25/text.md +++ /dev/null @@ -1,163 +0,0 @@ ---- -id: version-0.25-text -title: Text -original_id: text ---- - -A React component for displaying text which supports nesting, styling, and touch handling. In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines: - -``` -renderText: function() { - return ( - - - {this.state.titleText + '\n\n'} - - - {this.state.bodyText} - - - ); -}, -... -var styles = StyleSheet.create({ - baseText: { - fontFamily: 'Cochin', - }, - titleText: { - fontSize: 20, - fontWeight: 'bold', - }, -}; -``` - -### Props - -- [`accessible`](text.md#accessible) -- [`numberOfLines`](text.md#numberoflines) -- [`onLayout`](text.md#onlayout) -- [`onPress`](text.md#onpress) -- [`style`](text.md#style) -- [`testID`](text.md#testid) -- [`allowFontScaling`](text.md#allowfontscaling) -- [`suppressHighlighting`](text.md#suppresshighlighting) - ---- - -# Reference - -## Props - -### `accessible` - -| Type | Required | -| ---- | -------- | -| | No | - ---- - -### `numberOfLines` - -Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with - -`{nativeEvent: {layout: {x, y, width, height}}}` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPress` - -This function is called on press. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [View Style Props...](view-style-props.md#style) - -- **`textShadowColor`**: [color](colors.md) - -- **`color`**: [color](colors.md) - -- **`fontSize`**: number - -- **`fontStyle`**: enum('normal', 'italic') - -- **`fontWeight`**: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') - - Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen. - -- **`lineHeight`**: number - -- **`textAlign`**: enum('auto', 'left', 'right', 'center', 'justify') - - Specifies text alignment. The value 'justify' is only supported on iOS. - -- **`textDecorationLine`**: enum('none', 'underline', 'line-through', 'underline line-through') - -- **`fontFamily`**: string - -- **`textShadowOffset`**: object: {width: number,height: number} - -- **`textShadowRadius`**: number - -- **`textAlignVertical`**: enum('auto', 'top', 'bottom', 'center') (_Android_) - -- **`letterSpacing`**: number (_iOS_) - -- **`textDecorationColor`**: [color](colors.md) (_iOS_) - -- **`textDecorationStyle`**: enum('solid', 'double', 'dotted', 'dashed') (_iOS_) - -- **`writingDirection`**: enum('auto', 'ltr', 'rtl') (_iOS_) - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `allowFontScaling` - -Specifies should fonts scale to respect Text Size accessibility setting on iOS. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `suppressHighlighting` - -When true, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | diff --git a/website/versioned_docs/version-0.25/textinput.md b/website/versioned_docs/version-0.25/textinput.md deleted file mode 100644 index dc9b1a1106d..00000000000 --- a/website/versioned_docs/version-0.25/textinput.md +++ /dev/null @@ -1,433 +0,0 @@ ---- -id: version-0.25-textinput -title: TextInput -original_id: textinput ---- - -A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. - -One of the use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. Here's an example: - -``` - this.setState({text})} - value={this.state.text} - /> -``` - -Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=false`. To achieve the same effect, you can wrap your `TextInput` in a `View`: - -``` - - - -``` - -### Props - -- [View props...](view.md#props) - -* [`onSubmitEditing`](textinput.md#onsubmitediting) -* [`autoCapitalize`](textinput.md#autocapitalize) -* [`autoFocus`](textinput.md#autofocus) -* [`blurOnSubmit`](textinput.md#bluronsubmit) -* [`defaultValue`](textinput.md#defaultvalue) -* [`editable`](textinput.md#editable) -* [`keyboardType`](textinput.md#keyboardtype) -* [`maxLength`](textinput.md#maxlength) -* [`multiline`](textinput.md#multiline) -* [`onBlur`](textinput.md#onblur) -* [`onChange`](textinput.md#onchange) -* [`onChangeText`](textinput.md#onchangetext) -* [`onEndEditing`](textinput.md#onendediting) -* [`onFocus`](textinput.md#onfocus) -* [`onLayout`](textinput.md#onlayout) -* [`onSelectionChange`](textinput.md#onselectionchange) -* [`autoCorrect`](textinput.md#autocorrect) -* [`placeholder`](textinput.md#placeholder) -* [`placeholderTextColor`](textinput.md#placeholdertextcolor) -* [`secureTextEntry`](textinput.md#securetextentry) -* [`selectTextOnFocus`](textinput.md#selecttextonfocus) -* [`selectionColor`](textinput.md#selectioncolor) -* [`style`](textinput.md#style) -* [`value`](textinput.md#value) -* [`numberOfLines`](textinput.md#numberoflines) -* [`underlineColorAndroid`](textinput.md#underlinecolorandroid) -* [`clearButtonMode`](textinput.md#clearbuttonmode) -* [`clearTextOnFocus`](textinput.md#cleartextonfocus) -* [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) -* [`keyboardAppearance`](textinput.md#keyboardappearance) -* [`onKeyPress`](textinput.md#onkeypress) -* [`returnKeyType`](textinput.md#returnkeytype) -* [`selectionState`](textinput.md#selectionstate) - -### Methods - -- [`isFocused`](textinput.md#isfocused) -- [`clear`](textinput.md#clear) - ---- - -# Reference - -## Props - -### `onSubmitEditing` - -Callback that is called when the text input's submit button is pressed. Invalid if multiline={true} is specified. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `autoCapitalize` - -Can tell TextInput to automatically capitalize certain characters. - -- characters: all characters, -- words: first letter of each word -- sentences: first letter of each sentence (default) -- none: don't auto capitalize anything - -| Type | Required | -| ------------------------------------------------ | -------- | -| enum('none', 'sentences', 'words', 'characters') | No | - ---- - -### `autoFocus` - -If true, focuses the input on componentDidMount. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `blurOnSubmit` - -If true, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting blurOnSubmit to true means that pressing return will blur the field and trigger the onSubmitEditing event instead of inserting a newline into the field. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `defaultValue` - -Provides an initial value that will change when the user starts typing. Useful for use-cases where you don't want to deal with listening to events and updating the value prop to keep the controlled state in sync. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `editable` - -If false, text is not editable. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `keyboardType` - -Determines which keyboard to open, e.g.`numeric`. - -The following values work across platforms: - -- default -- numeric -- email-address - -| Type | Required | -| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | - ---- - -### `maxLength` - -Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `multiline` - -If true, the text input can be multiple lines. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onBlur` - -Callback that is called when the text input is blurred - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChange` - -Callback that is called when the text input's text changes. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChangeText` - -Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onEndEditing` - -Callback that is called when text input ends. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onFocus` - -Callback that is called when the text input is focused - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{x, y, width, height}`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onSelectionChange` - -Callback that is called when the text input selection is changed - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `autoCorrect` - -If false, disables auto-correct. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `placeholder` - -The string that will be rendered before text input has been entered - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `placeholderTextColor` - -The text color of the placeholder string - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `secureTextEntry` - -If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `selectTextOnFocus` - -If true, all text will automatically be selected on focus - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `selectionColor` - -The highlight (and cursor on ios) color of the text input - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `style` - -Styles - -| Type | Required | -| --------------------- | -------- | -| [Text](text.md#style) | No | - ---- - -### `value` - -The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `numberOfLines` - -Sets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | Android | - ---- - -### `underlineColorAndroid` - -The color of the textInput underline. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `clearButtonMode` - -When the clear button should appear on the right side of the text view - -| Type | Required | Platform | -| ---------------------------------------------------------- | -------- | -------- | -| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | - ---- - -### `clearTextOnFocus` - -If true, clears the text field automatically when editing begins - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `enablesReturnKeyAutomatically` - -If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `keyboardAppearance` - -Determines the color of the keyboard. - -| Type | Required | Platform | -| -------------------------------- | -------- | -------- | -| enum('default', 'light', 'dark') | No | iOS | - ---- - -### `onKeyPress` - -Callback that is called when a key is pressed. Pressed key value is passed as an argument to the callback handler. Fires before onChange callbacks. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `returnKeyType` - -Determines how the return key should look. - -| Type | Required | Platform | -| ------------------------------------------------------------------------------------------------------------- | -------- | -------- | -| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | iOS | - ---- - -### `selectionState` - -See DocumentSelectionState.js, some state that is responsible for maintaining selection information for a document - -| Type | Required | Platform | -| ---------------------- | -------- | -------- | -| DocumentSelectionState | No | iOS | - -## Methods - -### `isFocused()` - -```jsx -isFocused(): -``` - -Returns if the input is currently focused. - ---- - -### `clear()` - -```jsx -clear(); -``` - -Removes all text from the input. diff --git a/website/versioned_docs/version-0.25/timepickerandroid.md b/website/versioned_docs/version-0.25/timepickerandroid.md deleted file mode 100644 index e533b591a87..00000000000 --- a/website/versioned_docs/version-0.25/timepickerandroid.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -id: version-0.25-timepickerandroid -title: TimePickerAndroid -original_id: timepickerandroid ---- - -Opens the standard Android time picker dialog. - -### Example - -``` -try { - const {action, hour, minute} = await TimePickerAndroid.open({ - hour: 14, - minute: 0, - is24Hour: false, // Will display '2 PM' - }); - if (action !== TimePickerAndroid.dismissedAction) { - // Selected hour (0-23), minute (0-59) - } -} catch ({code, message}) { - console.warn('Cannot open time picker', message); -} -``` - -### Methods - -- [`open`](timepickerandroid.md#open) -- [`timeSetAction`](timepickerandroid.md#timesetaction) -- [`dismissedAction`](timepickerandroid.md#dismissedaction) - ---- - -# Reference - -## Methods - -### `open()` - -```jsx -static open(options) -``` - -Opens the standard Android time picker dialog. - -The available keys for the `options` object are: - -- `hour` (0-23) - the hour to show, defaults to the current time -- `minute` (0-59) - the minute to show, defaults to the current time -- `is24Hour` (boolean) - If `true`, the picker uses the 24-hour format. If `false`, the picker shows an AM/PM chooser. If undefined, the default for the current locale is used. - -Returns a Promise which will be invoked an object containing `action`, `hour` (0-23), `minute` (0-59) if the user picked a time. If the user dismissed the dialog, the Promise will still be resolved with action being `TimePickerAndroid.dismissedAction` and all the other keys being undefined. **Always** check whether the `action` before reading the values. - ---- - -### `timeSetAction()` - -```jsx -static timeSetAction() -``` - -A time has been selected. - ---- - -### `dismissedAction()` - -```jsx -static dismissedAction() -``` - -The dialog has been dismissed. diff --git a/website/versioned_docs/version-0.25/touchablehighlight.md b/website/versioned_docs/version-0.25/touchablehighlight.md deleted file mode 100644 index 9493b73c79e..00000000000 --- a/website/versioned_docs/version-0.25/touchablehighlight.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: version-0.25-touchablehighlight -title: TouchableHighlight -original_id: touchablehighlight ---- - -A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view. The underlay comes from adding a view to the view hierarchy, which can 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. - -Example: - -``` -renderButton: function() { - return ( - - - - ); -}, -``` - -> **NOTE**: TouchableHighlight supports only one child -> -> If you wish to have several child components, wrap them in a View. - -### Props - -- [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) - -* [`activeOpacity`](touchablehighlight.md#activeopacity) -* [`onHideUnderlay`](touchablehighlight.md#onhideunderlay) -* [`onShowUnderlay`](touchablehighlight.md#onshowunderlay) -* [`style`](touchablehighlight.md#style) -* [`underlayColor`](touchablehighlight.md#underlaycolor) - ---- - -# Reference - -## Props - -### `activeOpacity` - -Determines what the opacity of the wrapped view should be when touch is active. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `onHideUnderlay` - -Called immediately after the underlay is hidden - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onShowUnderlay` - -Called immediately after the underlay is shown - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `style` - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `underlayColor` - -The color of the underlay that will show through when the touch is active. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | diff --git a/website/versioned_docs/version-0.25/touchablenativefeedback.md b/website/versioned_docs/version-0.25/touchablenativefeedback.md deleted file mode 100644 index d325bc23222..00000000000 --- a/website/versioned_docs/version-0.25/touchablenativefeedback.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: version-0.25-touchablenativefeedback -title: TouchableNativeFeedback -original_id: touchablenativefeedback ---- - -A wrapper for making views respond properly to touches (Android only). On Android this component uses native state drawable to display touch feedback. At the moment it only supports having a single View instance as a child node, as it's implemented by replacing that View with another instance of RCTView node with some additional properties set. - -Background drawable of native feedback touchable can be customized with `background` property. - -Example: - -``` -renderButton: function() { - return ( - - - Button - - - ); -}, -``` - -### Props - -- [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) - -* [`background`](touchablenativefeedback.md#background) - -### Methods - -- [`SelectableBackground`](touchablenativefeedback.md#selectablebackground) -- [`SelectableBackgroundBorderless`](touchablenativefeedback.md#selectablebackgroundborderless) -- [`Ripple`](touchablenativefeedback.md#ripple) - ---- - -# Reference - -## Props - -### `background` - -Determines the type of background drawable that's going to be used to display feedback. It takes an object with `type` property and extra data depending on the `type`. It's recommended to use one of the static methods to generate that dictionary. - -| Type | Required | -| ------------------ | -------- | -| backgroundPropType | No | - -## Methods - -### `SelectableBackground()` - -```jsx -static SelectableBackground() -``` - -Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). - ---- - -### `SelectableBackgroundBorderless()` - -```jsx -static SelectableBackgroundBorderless() -``` - -Creates an object that represent android theme's default background for borderless selectable elements (?android:attr/selectableItemBackgroundBorderless). Available on android API level 21+. - ---- - -### `Ripple()` - -```jsx -static Ripple(color: string, borderless: boolean) -``` - -Creates an object that represents ripple drawable with specified color (as a string). If property `borderless` evaluates to true the ripple will render outside of the view bounds (see native actionbar buttons as an example of that behavior). This background type is available on Android API level 21+. - -**Parameters:** - -| Name | Type | Required | Description | -| ---------- | ------- | -------- | -------------------------------------------- | -| color | string | Yes | The ripple color | -| borderless | boolean | Yes | If the ripple can render outside it's bounds | diff --git a/website/versioned_docs/version-0.25/touchableopacity.md b/website/versioned_docs/version-0.25/touchableopacity.md deleted file mode 100644 index 630715ef2b1..00000000000 --- a/website/versioned_docs/version-0.25/touchableopacity.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: version-0.25-touchableopacity -title: TouchableOpacity -original_id: touchableopacity ---- - -A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it. This is done without actually changing the view hierarchy, and in general is an addition to the app without weird side-effects. - -Example: - -``` -renderButton: function() { - return ( - - - - ); -}, -``` - -### Props - -- [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) - -* [`activeOpacity`](touchableopacity.md#activeopacity) - -### Methods - -- [`setOpacityTo`](touchableopacity.md#setopacityto) - ---- - -# Reference - -## Props - -### `activeOpacity` - -Determines what the opacity of the wrapped view should be when touch is active. - -| Type | Required | -| ------ | -------- | -| number | No | - -## Methods - -### `setOpacityTo()` - -```jsx -setOpacityTo((value: number)); -``` - -Animate the touchable to a new opacity. diff --git a/website/versioned_docs/version-0.25/viewpagerandroid.md b/website/versioned_docs/version-0.25/viewpagerandroid.md deleted file mode 100644 index 9d456142d9f..00000000000 --- a/website/versioned_docs/version-0.25/viewpagerandroid.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -id: version-0.25-viewpagerandroid -title: ViewPagerAndroid -original_id: viewpagerandroid ---- - -Container that allows to flip left and right between child views. Each child view of the `ViewPagerAndroid` will be treated as a separate page and will be stretched to fill the `ViewPagerAndroid`. - -It is important all children are ``s and not composite components. You can set style properties like `padding` or `backgroundColor` for each child. - -Example: - -``` -render: function() { - return ( - - - First page - - - Second page - - - ); -} - -... - -var styles = { - ... - pageStyle: { - alignItems: 'center', - padding: 20, - } -} -``` - -### Props - -- [View props...](view.md#props) - -* [`initialPage`](viewpagerandroid.md#initialpage) -* [`keyboardDismissMode`](viewpagerandroid.md#keyboarddismissmode) -* [`onPageScroll`](viewpagerandroid.md#onpagescroll) -* [`onPageScrollStateChanged`](viewpagerandroid.md#onpagescrollstatechanged) -* [`onPageSelected`](viewpagerandroid.md#onpageselected) -* [`pageMargin`](viewpagerandroid.md#pagemargin) - -### Methods - -- [`setPage`](viewpagerandroid.md#setpage) -- [`setPageWithoutAnimation`](viewpagerandroid.md#setpagewithoutanimation) - -### Type Definitions - -- [`ViewPagerScrollState`](viewpagerandroid.md#viewpagerscrollstate) - ---- - -# Reference - -## Props - -### `initialPage` - -Index of initial page that should be selected. Use `setPage` method to update the page, and `onPageSelected` to monitor page changes - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. - -| Type | Required | -| ----------------------- | -------- | -| enum('none', 'on-drag') | No | - ---- - -### `onPageScroll` - -Executed when transitioning between pages (ether because of animation for the requested page change or when user is swiping/dragging between pages) The `event.nativeEvent` object for this callback will carry following data: - -- position - index of first page from the left that is currently visible -- offset - value from range [0,1) describing stage between page transitions. Value x means that (1 - x) fraction of the page at "position" index is visible, and x fraction of the next page is visible. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPageScrollStateChanged` - -Function called when the page scrolling state has changed. The page scrolling state can be in 3 states: - -- idle, meaning there is no interaction with the page scroller happening at the time -- dragging, meaning there is currently an interaction with the page scroller -- settling, meaning that there was an interaction with the page scroller, and the page scroller is now finishing its closing or opening animation - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPageSelected` - -This callback will be called once ViewPager finish navigating to selected page (when user swipes between pages). The `event.nativeEvent` object passed to this callback will have following fields: - -- position - index of page that has been selected - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `pageMargin` - -Blank space to show between pages. This is only visible while scrolling, pages are still edge-to-edge. - -| Type | Required | -| ------ | -------- | -| number | No | - -## Methods - -### `setPage()` - -```jsx -setPage((selectedPage: number)); -``` - -A helper function to scroll to a specific page in the ViewPager. The transition between pages will be animated. - ---- - -### `setPageWithoutAnimation()` - -```jsx -setPageWithoutAnimation((selectedPage: number)); -``` - -A helper function to scroll to a specific page in the ViewPager. The transition between pages will be _not_ be animated. - -## Type Definitions - -### ViewPagerScrollState - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| -------- | ----------- | -| idle | | -| dragging | | -| settling | | diff --git a/website/versioned_docs/version-0.25/webview.md b/website/versioned_docs/version-0.25/webview.md deleted file mode 100644 index 53e200ebd18..00000000000 --- a/website/versioned_docs/version-0.25/webview.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: version-0.25-webview -title: WebView -original_id: webview ---- - -Renders a native WebView. - -### Props - -- [View props...](view.md#props) - -* [`scalesPageToFit`](webview.md#scalespagetofit) -* [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) -* [`onShouldStartLoadWithRequest`](webview.md#onshouldstartloadwithrequest) -* [`injectedJavaScript`](webview.md#injectedjavascript) -* [`mediaPlaybackRequiresUserAction`](webview.md#mediaplaybackrequiresuseraction) -* [`onError`](webview.md#onerror) -* [`onLoad`](webview.md#onload) -* [`onLoadEnd`](webview.md#onloadend) -* [`onLoadStart`](webview.md#onloadstart) -* [`onNavigationStateChange`](webview.md#onnavigationstatechange) -* [`renderError`](webview.md#rendererror) -* [`renderLoading`](webview.md#renderloading) -* [`contentInset`](webview.md#contentinset) -* [`source`](webview.md#source) -* [`startInLoadingState`](webview.md#startinloadingstate) -* [`style`](webview.md#style) -* [`decelerationRate`](webview.md#decelerationrate) -* [`domStorageEnabled`](webview.md#domstorageenabled) -* [`javaScriptEnabled`](webview.md#javascriptenabled) -* [`allowsInlineMediaPlayback`](webview.md#allowsinlinemediaplayback) -* [`bounces`](webview.md#bounces) -* [`scrollEnabled`](webview.md#scrollenabled) -* [`url`](webview.md#url) -* [`html`](webview.md#html) - -### Methods - -- [`goForward`](webview.md#goforward) -- [`goBack`](webview.md#goback) -- [`reload`](webview.md#reload) -- [`getWebViewHandle`](webview.md#getwebviewhandle) - ---- - -# Reference - -## Props - -### `scalesPageToFit` - -Sets whether the webpage scales to fit the view and the user can change the scale. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `automaticallyAdjustContentInsets` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onShouldStartLoadWithRequest` - -Allows custom handling of any webview requests by a JS handler. Return true or false from this method to continue loading the request. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `injectedJavaScript` - -Sets the JS to be injected when the webpage loads. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `mediaPlaybackRequiresUserAction` - -Determines whether HTML5 audio & videos require the user to tap before they can start playing. The default value is `false`. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onError` - -Invoked when load fails - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoad` - -Invoked when load finish - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadEnd` - -Invoked when load either succeeds or fails - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadStart` - -Invoked on load start - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onNavigationStateChange` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `renderError` - -Function that returns a view to show if there's an error. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `renderLoading` - -Function that returns a loading indicator. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `contentInset` - -| Type | Required | -| ------------------------------------------------------------------ | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | - ---- - -### `source` - -Loads static html or a uri (with optional headers) in the WebView. - -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------- | -------- | -| object: {uri: string,method: string,headers: object,body: string}, ,object: {html: string,baseUrl: string}, ,number | No | - ---- - -### `startInLoadingState` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use string shortcuts `"normal"` and `"fast"` which match the underlying iOS settings for `UIScrollViewDecelerationRateNormal` and `UIScrollViewDecelerationRateFast` respectively. - -- normal: 0.998 -- fast: 0.99 (the default for iOS WebView) - -| Type | Required | Platform | -| ------------------------------------- | -------- | -------- | -| ScrollView.propTypes.decelerationRate | No | iOS | - ---- - -### `domStorageEnabled` - -Used on Android only, controls whether DOM Storage is enabled or not - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `javaScriptEnabled` - -Used on Android only, JS is enabled by default for WebView on iOS - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `allowsInlineMediaPlayback` - -Determines whether HTML5 videos play inline or use the native full-screen controller. default value `false` **NOTE** : "In order for video to play inline, not only does this property need to be set to true, but the video element in the HTML document must also include the webkit-playsinline attribute." - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bounces` - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEnabled` - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `url` - -**Deprecated.** Use the `source` prop instead. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `html` - -**Deprecated.** Use the `source` prop instead. - -| Type | Required | -| ------ | -------- | -| string | No | - -## Methods - -### `goForward()` - -```jsx -goForward(); -``` - -Go forward one page in the webview's history. - ---- - -### `goBack()` - -```jsx -goBack(); -``` - -Go back one page in the webview's history. - ---- - -### `reload()` - -```jsx -reload(); -``` - -Reloads the current page. - ---- - -### `getWebViewHandle()` - -```jsx -getWebViewHandle(): -``` - -Returns the native webview node. diff --git a/website/versioned_docs/version-0.26/linking.md b/website/versioned_docs/version-0.26/linking.md deleted file mode 100644 index 4d2b7da4da5..00000000000 --- a/website/versioned_docs/version-0.26/linking.md +++ /dev/null @@ -1,163 +0,0 @@ ---- -id: version-0.26-linking -title: Linking -original_id: linking ---- - -`Linking` gives you a general interface to interact with both incoming and outgoing app links. - -### Basic Usage - -#### Handling deep links - -If your app was launched from an external url registered to your app you can access and handle it from any component you want with - -``` -componentDidMount() { - var url = Linking.getInitialURL().then((url) => { - if (url) { - console.log('Initial url is: ' + url); - } - }).catch(err => console.error('An error occurred', err)); -} -``` - -NOTE: For instructions on how to add support for deep linking on Android, refer [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters). - -NOTE: On iOS you'll need to link `RCTLinking` to your project by following the steps described [here](linking-libraries-ios.md#manual-linking). In case you also want to listen to incoming app links during your app's execution you'll need to add the following lines to you `*AppDelegate.m`: - -``` -#import "RCTLinkingManager.h" - -- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url - sourceApplication:(NSString *)sourceApplication annotation:(id)annotation -{ - return [RCTLinkingManager application:application openURL:url - sourceApplication:sourceApplication annotation:annotation]; -} - -// Only if your app is using [Universal Links](https://developer.apple.com/library/prerelease/ios/documentation/General/Conceptual/AppSearch/UniversalLinks.html). -- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity - restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler -{ - return [RCTLinkingManager application:application - continueUserActivity:userActivity - restorationHandler:restorationHandler]; -} -``` - -And then on your React component you'll be able to listen to the events on `Linking` as follows - -``` -componentDidMount() { - Linking.addEventListener('url', this._handleOpenURL); -}, -componentWillUnmount() { - Linking.removeEventListener('url', this._handleOpenURL); -}, -_handleOpenURL(event) { - console.log(event.url); -} -``` - -Note that this is only supported on iOS. - -#### Opening external links - -To start the corresponding activity for a link (web URL, email, contact etc.), call - -``` -Linking.openURL(url).catch(err => console.error('An error occurred', err)); -``` - -If you want to check if any installed app can handle a given URL beforehand you can call - -``` -Linking.canOpenURL(url).then(supported => { - if (!supported) { - console.log('Can\'t handle url: ' + url); - } else { - return Linking.openURL(url); - } -}).catch(err => console.error('An error occurred', err)); -``` - -### Methods - -- [`addEventListener`](linking.md#addeventlistener) -- [`removeEventListener`](linking.md#removeeventlistener) -- [`openURL`](linking.md#openurl) -- [`canOpenURL`](linking.md#canopenurl) -- [`getInitialURL`](linking.md#getinitialurl) - ---- - -# Reference - -## Methods - -### `addEventListener()` - -```jsx -static addEventListener(type, handler) -``` - -Add a handler to Linking changes by listening to the `url` event type and providing the handler - -@platform ios - ---- - -### `removeEventListener()` - -```jsx -static removeEventListener(type, handler) -``` - -Remove a handler by passing the `url` event type and the handler - -@platform ios - ---- - -### `openURL()` - -```jsx -static openURL(url) -``` - -Try to open the given `url` with any of the installed apps. - -You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386"), a contact, or any other URL that can be opened with the installed apps. - -NOTE: This method will fail if the system doesn't know how to open the specified URL. If you're passing in a non-http(s) URL, it's best to check {@code canOpenURL} first. - -NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly! - ---- - -### `canOpenURL()` - -```jsx -static canOpenURL(url) -``` - -Determine whether or not an installed app can handle a given URL. - -NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly! - -NOTE: As of iOS 9, your app needs to provide the `LSApplicationQueriesSchemes` key inside `Info.plist`. - -@param URL the URL to open - ---- - -### `getInitialURL()` - -```jsx -static getInitialURL() -``` - -If the app launch was triggered by an app link with, it will give the link url, otherwise it will give `null` - -NOTE: To support deep linking on Android, refer http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents diff --git a/website/versioned_docs/version-0.26/modal.md b/website/versioned_docs/version-0.26/modal.md deleted file mode 100644 index 7b37f26cb27..00000000000 --- a/website/versioned_docs/version-0.26/modal.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: version-0.26-modal -title: Modal -original_id: modal ---- - -A Modal component covers the native view (e.g. UIViewController, Activity) that contains the React Native root. - -Use Modal in hybrid apps that embed React Native; Modal allows the portion of your app written in React Native to present content above the enclosing native view hierarchy. - -In apps written with React Native from the root view down, you should use Navigator instead of Modal. With a top-level Navigator, you have more control over how to present the modal scene over the rest of your app by using the configureScene property. - -### Props - -- [`animationType`](modal.md#animationtype) -- [`onRequestClose`](modal.md#onrequestclose) -- [`onShow`](modal.md#onshow) -- [`transparent`](modal.md#transparent) -- [`visible`](modal.md#visible) -- [`animated`](modal.md#animated) - ---- - -# Reference - -## Props - -### `animationType` - -| Type | Required | -| ----------------------------- | -------- | -| enum('none', 'slide', 'fade') | No | - ---- - -### `onRequestClose` - -| Type | Required | -| ---------------------------------------------------------------------- | -------- | -| Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func | No | - ---- - -### `onShow` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `transparent` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `visible` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `animated` - -**Deprecated.** Use the `animationType` prop instead. - -| Type | Required | -| ---- | -------- | -| bool | No | diff --git a/website/versioned_docs/version-0.26/panresponder.md b/website/versioned_docs/version-0.26/panresponder.md deleted file mode 100644 index aa0e7aaf13f..00000000000 --- a/website/versioned_docs/version-0.26/panresponder.md +++ /dev/null @@ -1,128 +0,0 @@ ---- -id: version-0.26-panresponder -title: PanResponder -original_id: panresponder ---- - -`PanResponder` reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures. - -By default, `PanResponder` holds an `InteractionManager handle to block long-running JS events from interrupting active gestures. - -It provides a predictable wrapper of the responder handlers provided by the [gesture responder system](gesture-responder-system.md). For each handler, it provides a new `gestureState` object alongside the native event object: - -``` -onPanResponderMove: (event, gestureState) => {} -``` - -A native event is a synthetic touch event with the following form: - -- `nativeEvent` - - `changedTouches` - Array of all touch events that have changed since the last event - - `identifier` - The ID of the touch - - `locationX` - The X position of the touch, relative to the element - - `locationY` - The Y position of the touch, relative to the element - - `pageX` - The X position of the touch, relative to the root element - - `pageY` - The Y position of the touch, relative to the root element - - `target` - The node id of the element receiving the touch event - - `timestamp` - A time identifier for the touch, useful for velocity calculation - - `touches` - Array of all current touches on the screen - -A `gestureState` object has the following: - -- `stateID` - ID of the gestureState- persisted as long as there at least one touch on screen -- `moveX` - the latest screen coordinates of the recently-moved touch -- `moveY` - the latest screen coordinates of the recently-moved touch -- `x0` - the screen coordinates of the responder grant -- `y0` - the screen coordinates of the responder grant -- `dx` - accumulated distance of the gesture since the touch started -- `dy` - accumulated distance of the gesture since the touch started -- `vx` - current velocity of the gesture -- `vy` - current velocity of the gesture -- `numberActiveTouches` - Number of touches currently on screen - -### Basic Usage - -``` - componentWillMount: function() { - this._panResponder = PanResponder.create({ - // Ask to be the responder: - onStartShouldSetPanResponder: (evt, gestureState) => true, - onStartShouldSetPanResponderCapture: (evt, gestureState) => true, - onMoveShouldSetPanResponder: (evt, gestureState) => true, - onMoveShouldSetPanResponderCapture: (evt, gestureState) => true, - - onPanResponderGrant: (evt, gestureState) => { - // The guesture has started. Show visual feedback so the user knows - // what is happening! - - // gestureState.{x,y}0 will be set to zero now - }, - onPanResponderMove: (evt, gestureState) => { - // The most recent move distance is gestureState.move{X,Y} - - // The accumulated gesture distance since becoming responder is - // gestureState.d{x,y} - }, - onPanResponderTerminationRequest: (evt, gestureState) => true, - onPanResponderRelease: (evt, gestureState) => { - // The user has released all touches while this view is the - // responder. This typically means a gesture has succeeded - }, - onPanResponderTerminate: (evt, gestureState) => { - // Another component has become the responder, so this gesture - // should be cancelled - }, - onShouldBlockNativeResponder: (evt, gestureState) => { - // Returns whether this component should block native components from becoming the JS - // responder. Returns true by default. Is currently only supported on android. - return true; - }, - }); - }, - - render: function() { - return ( - - ); - }, -``` - -### Working Example - -To see it in action, try the [PanResponder example in UIExplorer](https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/PanResponderExample.js) - -### Methods - -- [`create`](panresponder.md#create) - ---- - -# Reference - -## Methods - -### `create()` - -```jsx -static create(config) -``` - -@param {object} config Enhanced versions of all of the responder callbacks that provide not only the typical `ResponderSyntheticEvent`, but also the `PanResponder` gesture state. You only need to replace the word `Responder` with `PanResponder` in each of the typical `onResponder*` callbacks. For example, the `config` object would look like: - -- `onMoveShouldSetPanResponder: (e, gestureState) => {...}` -- `onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}` -- `onStartShouldSetPanResponder: (e, gestureState) => {...}` -- `onStartShouldSetPanResponderCapture: (e, gestureState) => {...}` -- `onPanResponderReject: (e, gestureState) => {...}` -- `onPanResponderGrant: (e, gestureState) => {...}` -- `onPanResponderStart: (e, gestureState) => {...}` -- `onPanResponderEnd: (e, gestureState) => {...}` -- `onPanResponderRelease: (e, gestureState) => {...}` -- `onPanResponderMove: (e, gestureState) => {...}` -- `onPanResponderTerminate: (e, gestureState) => {...}` -- `onPanResponderTerminationRequest: (e, gestureState) => {...}` -- `onShouldBlockNativeResponder: (e, gestureState) => {...}` - -In general, for events that have capture equivalents, we update the gestureState once in the capture phase and can use it in the bubble phase as well. - -Be careful with `onStartShould*` callbacks. They only reflect updated `gestureState` for start/end events that bubble/capture to the Node. Once the node is the responder, you can rely on every start/end event being processed by the gesture and `gestureState` being updated accordingly. (numberActiveTouches) may not be totally accurate unless you are the responder. diff --git a/website/versioned_docs/version-0.26/pickerios.md b/website/versioned_docs/version-0.26/pickerios.md deleted file mode 100644 index c8c16415e98..00000000000 --- a/website/versioned_docs/version-0.26/pickerios.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: version-0.26-pickerios -title: PickerIOS -original_id: pickerios ---- - -### Props - -- [View props...](view.md#props) - -* [`itemStyle`](pickerios.md#itemstyle) -* [`onValueChange`](pickerios.md#onvaluechange) -* [`selectedValue`](pickerios.md#selectedvalue) - ---- - -# Reference - -## Props - -### `itemStyle` - -| Type | Required | -| ---------------------------------- | -------- | -| [text styles](text-style-props.md) | No | - ---- - -### `onValueChange` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `selectedValue` - -| Type | Required | -| ---- | -------- | -| any | No | diff --git a/website/versioned_docs/version-0.26/pushnotificationios.md b/website/versioned_docs/version-0.26/pushnotificationios.md deleted file mode 100644 index 6085995b03f..00000000000 --- a/website/versioned_docs/version-0.26/pushnotificationios.md +++ /dev/null @@ -1,291 +0,0 @@ ---- -id: version-0.26-pushnotificationios -title: PushNotificationIOS -original_id: pushnotificationios ---- - -Handle push notifications for your app, including permission handling and icon badge number. - -To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). - -[Manually link](linking-libraries-ios.md#manual-linking) the PushNotificationIOS library - -- Be sure to add the following to your `Header Search Paths`: `$(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS` -- Set the search to `recursive` - -Finally, to enable support for `notification` and `register` events you need to augment your AppDelegate. - -At the top of your `AppDelegate.m`: - -`#import "RCTPushNotificationManager.h"` - -And then in your AppDelegate implementation add the following: - -``` - // Required to register for notifications - - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings - { - [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings]; - } - // Required for the register event. - - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken - { - [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; - } - // Required for the notification event. - - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification - { - [RCTPushNotificationManager didReceiveRemoteNotification:notification]; - } - // Required for the localNotification event. - - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification - { - [RCTPushNotificationManager didReceiveLocalNotification:notification]; - } -``` - -### Methods - -- [`presentLocalNotification`](pushnotificationios.md#presentlocalnotification) -- [`scheduleLocalNotification`](pushnotificationios.md#schedulelocalnotification) -- [`cancelAllLocalNotifications`](pushnotificationios.md#cancelalllocalnotifications) -- [`setApplicationIconBadgeNumber`](pushnotificationios.md#setapplicationiconbadgenumber) -- [`getApplicationIconBadgeNumber`](pushnotificationios.md#getapplicationiconbadgenumber) -- [`cancelLocalNotifications`](pushnotificationios.md#cancellocalnotifications) -- [`addEventListener`](pushnotificationios.md#addeventlistener) -- [`requestPermissions`](pushnotificationios.md#requestpermissions) -- [`abandonPermissions`](pushnotificationios.md#abandonpermissions) -- [`checkPermissions`](pushnotificationios.md#checkpermissions) -- [`removeEventListener`](pushnotificationios.md#removeeventlistener) -- [`popInitialNotification`](pushnotificationios.md#popinitialnotification) -- [`constructor`](pushnotificationios.md#constructor) -- [`getMessage`](pushnotificationios.md#getmessage) -- [`getSound`](pushnotificationios.md#getsound) -- [`getAlert`](pushnotificationios.md#getalert) -- [`getBadgeCount`](pushnotificationios.md#getbadgecount) -- [`getData`](pushnotificationios.md#getdata) - ---- - -# Reference - -## Methods - -### `presentLocalNotification()` - -```jsx -static presentLocalNotification(details) -``` - -Schedules the localNotification for immediate presentation. - -details is an object containing: - -- `alertBody` : The message displayed in the notification alert. -- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; -- `soundName` : The sound played when the notification is fired (optional). -- `category` : The category of this notification, required for actionable notifications (optional). -- `userInfo` : An optional object containing additional notification data. -- `applicationIconBadgeNumber` (optional) : The number to display as the app’s icon badge. The default value of this property is 0, which means that no badge is displayed. - ---- - -### `scheduleLocalNotification()` - -```jsx -static scheduleLocalNotification(details) -``` - -Schedules the localNotification for future presentation. - -details is an object containing: - -- `fireDate` : The date and time when the system should deliver the notification. -- `alertBody` : The message displayed in the notification alert. -- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; -- `soundName` : The sound played when the notification is fired (optional). -- `category` : The category of this notification, required for actionable notifications (optional). -- `userInfo` : An optional object containing additional notification data. -- `applicationIconBadgeNumber` (optional) : The number to display as the app’s icon badge. Setting the number to 0 removes the icon badge. - ---- - -### `cancelAllLocalNotifications()` - -```jsx -static cancelAllLocalNotifications() -``` - -Cancels all scheduled localNotifications - ---- - -### `setApplicationIconBadgeNumber()` - -```jsx -static setApplicationIconBadgeNumber(number) -``` - -Sets the badge number for the app icon on the home screen - ---- - -### `getApplicationIconBadgeNumber()` - -```jsx -static getApplicationIconBadgeNumber(callback) -``` - -Gets the current badge number for the app icon on the home screen - ---- - -### `cancelLocalNotifications()` - -```jsx -static cancelLocalNotifications(userInfo) -``` - -Cancel local notifications. - -Optionally restricts the set of canceled notifications to those notifications whose `userInfo` fields match the corresponding fields in the `userInfo` argument. - ---- - -### `addEventListener()` - -```jsx -static addEventListener(type, handler) -``` - -Attaches a listener to remote or local notification events while the app is running in the foreground or the background. - -Valid events are: - -- `notification` : Fired when a remote notification is received. The handler will be invoked with an instance of `PushNotificationIOS`. -- `localNotification` : Fired when a local notification is received. The handler will be invoked with an instance of `PushNotificationIOS`. -- `register`: Fired when the user registers for remote notifications. The handler will be invoked with a hex string representing the deviceToken. - ---- - -### `requestPermissions()` - -```jsx -static requestPermissions(permissions?) -``` - -Requests notification permissions from iOS, prompting the user's dialog box. By default, it will request all notification permissions, but a subset of these can be requested by passing a map of requested permissions. The following permissions are supported: - -- `alert` -- `badge` -- `sound` - -If a map is provided to the method, only the permissions with truthy values will be requested. - ---- - -### `abandonPermissions()` - -```jsx -static abandonPermissions() -``` - -Unregister for all remote notifications received via Apple Push Notification service. - -You should call this method in rare circumstances only, such as when a new version of the app removes support for all types of remote notifications. Users can temporarily prevent apps from receiving remote notifications through the Notifications section of the Settings app. Apps unregistered through this method can always re-register. - ---- - -### `checkPermissions()` - -```jsx -static checkPermissions(callback) -``` - -See what push permissions are currently enabled. `callback` will be invoked with a `permissions` object: - -- `alert` :boolean -- `badge` :boolean -- `sound` :boolean - ---- - -### `removeEventListener()` - -```jsx -static removeEventListener(type, handler) -``` - -Removes the event listener. Do this in `componentWillUnmount` to prevent memory leaks - ---- - -### `popInitialNotification()` - -```jsx -static popInitialNotification() -``` - -An initial notification will be available if the app was cold-launched from a notification. - -The first caller of `popInitialNotification` will get the initial notification object, or `null`. Subsequent invocations will return null. - ---- - -### `constructor()` - -```jsx -constructor(nativeNotif); -``` - -You will never need to instantiate `PushNotificationIOS` yourself. Listening to the `notification` event and invoking `popInitialNotification` is sufficient - ---- - -### `getMessage()` - -```jsx -getMessage(); -``` - -An alias for `getAlert` to get the notification's main message string - ---- - -### `getSound()` - -```jsx -getSound(); -``` - -Gets the sound string from the `aps` object - ---- - -### `getAlert()` - -```jsx -getAlert(); -``` - -Gets the notification's main message from the `aps` object - ---- - -### `getBadgeCount()` - -```jsx -getBadgeCount(); -``` - -Gets the badge count number from the `aps` object - ---- - -### `getData()` - -```jsx -getData(); -``` - -Gets the data object on the notif diff --git a/website/versioned_docs/version-0.26/scrollview.md b/website/versioned_docs/version-0.26/scrollview.md deleted file mode 100644 index 998164a0922..00000000000 --- a/website/versioned_docs/version-0.26/scrollview.md +++ /dev/null @@ -1,549 +0,0 @@ ---- -id: version-0.26-scrollview -title: ScrollView -original_id: scrollview ---- - -Component that wraps platform ScrollView while providing integration with touch locking "responder" system. - -Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer `{flex: 1}` down the view stack can lead to errors here, which the element inspector makes quick to debug. - -Doesn't yet support other contained responders from blocking this scroll view from becoming the responder. - -### Props - -- [View props...](view.md#props) - -* [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) -* [`contentContainerStyle`](scrollview.md#contentcontainerstyle) -* [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) -* [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) -* [`onContentSizeChange`](scrollview.md#oncontentsizechange) -* [`onScroll`](scrollview.md#onscroll) -* [`refreshControl`](scrollview.md#refreshcontrol) -* [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) -* [`scrollEnabled`](scrollview.md#scrollenabled) -* [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) -* [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) -* [`style`](scrollview.md#style) -* [`endFillColor`](scrollview.md#endfillcolor) -* [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) -* [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) -* [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) -* [`bounces`](scrollview.md#bounces) -* [`bouncesZoom`](scrollview.md#bounceszoom) -* [`horizontal`](scrollview.md#horizontal) -* [`centerContent`](scrollview.md#centercontent) -* [`contentInset`](scrollview.md#contentinset) -* [`contentOffset`](scrollview.md#contentoffset) -* [`decelerationRate`](scrollview.md#decelerationrate) -* [`directionalLockEnabled`](scrollview.md#directionallockenabled) -* [`indicatorStyle`](scrollview.md#indicatorstyle) -* [`maximumZoomScale`](scrollview.md#maximumzoomscale) -* [`minimumZoomScale`](scrollview.md#minimumzoomscale) -* [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) -* [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) -* [`pagingEnabled`](scrollview.md#pagingenabled) -* [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) -* [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) -* [`scrollsToTop`](scrollview.md#scrollstotop) -* [`snapToAlignment`](scrollview.md#snaptoalignment) -* [`snapToInterval`](scrollview.md#snaptointerval) -* [`zoomScale`](scrollview.md#zoomscale) -* [`onRefreshStart`](scrollview.md#onrefreshstart) - -### Methods - -- [`endRefreshing`](scrollview.md#endrefreshing) -- [`scrollTo`](scrollview.md#scrollto) -- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) - ---- - -# Reference - -## Props - -### `canCancelContentTouches` - -When false, once tracking starts, won't try to drag if the touch moves. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `contentContainerStyle` - -These styles will be applied to the scroll view content container which wraps all of the child views. Example: - -return ( ); ... var styles = StyleSheet.create({ contentContainer: { paddingVertical: 20 } }); - -| Type | Required | -| ------------------------------------ | -------- | -| StyleSheetPropType(View Style props) | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. -- 'interactive', the keyboard is dismissed interactively with the drag and moves in synchrony with the touch; dragging upwards cancels the dismissal. On android this is not supported and it will have the same behavior as 'none'. - -| Type | Required | -| -------------------------------------- | -------- | -| enum('none', 'interactive', 'on-drag') | No | - ---- - -### `keyboardShouldPersistTaps` - -When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the scroll view will not catch taps, and the keyboard will not dismiss automatically. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onContentSizeChange` - -Called when scrollable content view of the ScrollView changes. - -Handler function is passed the content width and content height as parameters: `(contentWidth, contentHeight)` - -It's implemented using onLayout handler attached to the content container which this ScrollView renders. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onScroll` - -Fires at most once per frame during scrolling. The frequency of the events can be controlled using the `scrollEventThrottle` prop. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `refreshControl` - -A RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView. - -See [RefreshControl](refreshcontrol.md). - -| Type | Required | -| ------- | -------- | -| element | No | - ---- - -### `removeClippedSubviews` - -Experimental: When true, offscreen child views (whose `overflow` value is `hidden`) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `scrollEnabled` - -When false, the content does not scroll. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsHorizontalScrollIndicator` - -When true, shows a horizontal scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsVerticalScrollIndicator` - -When true, shows a vertical scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Shadow Props...](shadow-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderRightColor`**: [color](colors.md) - -- **`backfaceVisibility`**: enum('visible', 'hidden') - -- **`borderBottomColor`**: [color](colors.md) - -- **`borderBottomLeftRadius`**: number - -- **`borderBottomRightRadius`**: number - -- **`borderBottomWidth`**: number - -- **`borderColor`**: [color](colors.md) - -- **`borderLeftColor`**: [color](colors.md) - -- **`borderLeftWidth`**: number - -- **`borderRadius`**: number - -- **`backgroundColor`**: [color](colors.md) - -- **`borderRightWidth`**: number - -- **`borderStyle`**: enum('solid', 'dotted', 'dashed') - -- **`borderTopColor`**: [color](colors.md) - -- **`borderTopLeftRadius`**: number - -- **`borderTopRightRadius`**: number - -- **`borderTopWidth`**: number - -- **`borderWidth`**: number - -- **`opacity`**: number - -- **`overflow`**: enum('visible', 'hidden') - -- **`elevation`**: number (_Android_) - - (Android-only) Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions. - ---- - -### `endFillColor` - -Sometimes a scrollview takes up more space than its content fills. When this is the case, this prop will fill the rest of the scrollview with a color to avoid setting a background and creating unnecessary overdraw. This is an advanced optimization that is not needed in the general case. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `alwaysBounceHorizontal` - -When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself. The default value is true when `horizontal={true}` and false otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `alwaysBounceVertical` - -When true, the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself. The default value is false when `horizontal={true}` and true otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `automaticallyAdjustContentInsets` - -Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/ toolbar. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bounces` - -When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. When false, it disables all bouncing even if the `alwaysBounce*` props are true. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bouncesZoom` - -When true, gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture end, otherwise the zoom will not exceed the limits. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `horizontal` - -When true, the scroll view's children are arranged horizontally in a row instead of vertically in a column. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `centerContent` - -When true, the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `contentInset` - -The amount by which the scroll view content is inset from the edges of the scroll view. Defaults to `{top: 0, left: 0, bottom: 0, right: 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `contentOffset` - -Used to manually set the starting scroll offset. The default value is `{x: 0, y: 0}`. - -| Type | Required | Platform | -| ------------- | -------- | -------- | -| PointPropType | No | iOS | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use string shortcuts `"normal"` and `"fast"` which match the underlying iOS settings for `UIScrollViewDecelerationRateNormal` and `UIScrollViewDecelerationRateFast` respectively. - -- normal: 0.998 (the default) -- fast: 0.99 - -| Type | Required | Platform | -| ------------------------------- | -------- | -------- | -| enum('fast', 'normal'), ,number | No | iOS | - ---- - -### `directionalLockEnabled` - -When true, the ScrollView will try to lock to only vertical or horizontal scrolling while dragging. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `indicatorStyle` - -The style of the scroll indicators. - - - -- `default` (the default), same as `black`. -- `black`, scroll indicator is black. This style is good against a white content background. -- `white`, scroll indicator is white. This style is good against a black content background. - -| Type | Required | Platform | -| --------------------------------- | -------- | -------- | -| enum('default', 'black', 'white') | No | iOS | - - - ---- - -### `maximumZoomScale` - -The maximum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `minimumZoomScale` - -The minimum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `stickyHeaderIndices` - -An array of child indices determining which children get docked to the top of the screen when scrolling. For example, passing `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction with `horizontal={true}`. - -| Type | Required | Platform | -| --------------- | -------- | -------- | -| array of number | No | iOS | - ---- - -### `onScrollAnimationEnd` - -Called when a scrolling animation ends. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `pagingEnabled` - -When true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEventThrottle` - -This controls how often the scroll event will be fired while scrolling (as a time interval in ms). A lower number yields better accuracy for code that is tracking the scroll position, but can lead to scroll performance problems due to the volume of information being send over the bridge. You will not notice a difference between values set between 1-16 as the JS run loop is synced to the screen refresh rate. If you do not need precise scroll position tracking, set this value higher to limit the information being sent across the bridge. The default value is zero, which results in the scroll event being sent only once each time the view is scrolled. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `scrollIndicatorInsets` - -The amount by which the scroll view indicators are inset from the edges of the scroll view. This should normally be set to the same value as the `contentInset`. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `scrollsToTop` - -When true, the scroll view scrolls to top when the status bar is tapped. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `snapToAlignment` - -When `snapToInterval` is set, `snapToAlignment` will define the relationship of the snapping to the scroll view. - -- `start` (the default) will align the snap at the left (horizontal) or top (vertical) -- `center` will align the snap in the center -- `end` will align the snap at the right (horizontal) or bottom (vertical) - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| enum('start', 'center', 'end') | No | iOS | - ---- - -### `snapToInterval` - -When set, causes the scroll view to stop at multiples of the value of `snapToInterval`. This can be used for paginating through children that have lengths smaller than the scroll view. Used in combination with `snapToAlignment`. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `zoomScale` - -The current scale of the scroll view content. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `onRefreshStart` - -**Deprecated.** Use the `refreshControl` prop instead. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - -## Methods - -### `endRefreshing()` - -```jsx -endRefreshing(); -``` - -Deprecated. Use `RefreshControl` instead. - ---- - -### `scrollTo()` - -```jsx -scrollTo( - ([y]: number), - object, - ([x]: number), - ([animated]: boolean) -); -``` - -Scrolls to a given x, y offset, either immediately or with a smooth animation. - -Syntax: - -`scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})` - -Note: The weird argument signature is due to the fact that, for historical reasons, the function also accepts separate arguments as as alternative to the options object. This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED. - ---- - -### `scrollWithoutAnimationTo()` - -```jsx -scrollWithoutAnimationTo(y, x); -``` - -Deprecated, do not use. diff --git a/website/versioned_docs/version-0.26/tabbarios-item.md b/website/versioned_docs/version-0.26/tabbarios-item.md deleted file mode 100644 index 924c052ebae..00000000000 --- a/website/versioned_docs/version-0.26/tabbarios-item.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -id: version-0.26-tabbarios-item -title: TabBarIOS.Item -original_id: tabbarios-item ---- - -### Props - -- [View props...](view.md#props) - -* [`badge`](tabbarios-item.md#badge) -* [`icon`](tabbarios-item.md#icon) -* [`onPress`](tabbarios-item.md#onpress) -* [`renderAsOriginal`](tabbarios-item.md#renderasoriginal) -* [`selected`](tabbarios-item.md#selected) -* [`selectedIcon`](tabbarios-item.md#selectedicon) -* [`style`](tabbarios-item.md#style) -* [`systemIcon`](tabbarios-item.md#systemicon) -* [`title`](tabbarios-item.md#title) - ---- - -# Reference - -## Props - -### `badge` - -Little red bubble that sits at the top right of the icon. - -| Type | Required | -| --------------- | -------- | -| string, ,number | No | - ---- - -### `icon` - -A custom icon for the tab. It is ignored when a system icon is defined. - -| Type | Required | -| ---------------------- | -------- | -| Image.propTypes.source | No | - ---- - -### `onPress` - -Callback when this tab is being selected, you should change the state of your component to set selected={true}. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `renderAsOriginal` - -If set to true it renders the image as original, it defaults to being displayed as a template - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `selected` - -It specifies whether the children are visible or not. If you see a blank content, you probably forgot to add a selected one. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `selectedIcon` - -A custom icon when the tab is selected. It is ignored when a system icon is defined. If left empty, the icon will be tinted in blue. - -| Type | Required | -| ---------------------- | -------- | -| Image.propTypes.source | No | - ---- - -### `style` - -React style object. - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `systemIcon` - -Items comes with a few predefined system icons. Note that if you are using them, the title and selectedIcon will be overridden with the system ones. - -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | -| enum('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated') | No | - ---- - -### `title` - -Text that appears under the icon. It is ignored when a system icon is defined. - -| Type | Required | -| ------ | -------- | -| string | No | diff --git a/website/versioned_docs/version-0.26/tabbarios.md b/website/versioned_docs/version-0.26/tabbarios.md deleted file mode 100644 index a128b09c368..00000000000 --- a/website/versioned_docs/version-0.26/tabbarios.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -id: version-0.26-tabbarios -title: TabBarIOS -original_id: tabbarios ---- - -### Props - -- [View props...](view.md#props) - -* [`barTintColor`](tabbarios.md#bartintcolor) -* [`style`](tabbarios.md#style) -* [`tintColor`](tabbarios.md#tintcolor) -* [`translucent`](tabbarios.md#translucent) -* [`unselectedTintColor`](tabbarios.md#unselectedtintcolor) - ---- - -# Reference - -## Props - -### `barTintColor` - -Background color of the tab bar - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `style` - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `tintColor` - -Color of the currently selected tab icon - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `translucent` - -A Boolean value that indicates whether the tab bar is translucent - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `unselectedTintColor` - -Color of text on unselected tabs - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | diff --git a/website/versioned_docs/version-0.26/text-style-props.md b/website/versioned_docs/version-0.26/text-style-props.md deleted file mode 100644 index 948b2ebc565..00000000000 --- a/website/versioned_docs/version-0.26/text-style-props.md +++ /dev/null @@ -1,160 +0,0 @@ ---- -id: version-0.26-text-style-props -title: Text Style Props -original_id: text-style-props ---- - -### Props - -- [`textShadowColor`](text-style-props.md#textshadowcolor) -- [`color`](text-style-props.md#color) -- [`fontSize`](text-style-props.md#fontsize) -- [`fontStyle`](text-style-props.md#fontstyle) -- [`fontWeight`](text-style-props.md#fontweight) -- [`lineHeight`](text-style-props.md#lineheight) -- [`textAlign`](text-style-props.md#textalign) -- [`textDecorationLine`](text-style-props.md#textdecorationline) -- [`fontFamily`](text-style-props.md#fontfamily) -- [`textShadowOffset`](text-style-props.md#textshadowoffset) -- [`textShadowRadius`](text-style-props.md#textshadowradius) -- [`textAlignVertical`](text-style-props.md#textalignvertical) -- [`letterSpacing`](text-style-props.md#letterspacing) -- [`textDecorationColor`](text-style-props.md#textdecorationcolor) -- [`textDecorationStyle`](text-style-props.md#textdecorationstyle) -- [`writingDirection`](text-style-props.md#writingdirection) - ---- - -# Reference - -## Props - -### `textShadowColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `color` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `fontSize` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `fontStyle` - -| Type | Required | -| ------------------------ | -------- | -| enum('normal', 'italic') | No | - ---- - -### `fontWeight` - -Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen. - -| Type | Required | -| ------------------------------------------------------------------------------------- | -------- | -| enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') | No | - ---- - -### `lineHeight` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `textAlign` - -Specifies text alignment. The value 'justify' is only supported on iOS and fallbacks to `left` on Android. - -| Type | Required | -| -------------------------------------------------- | -------- | -| enum('auto', 'left', 'right', 'center', 'justify') | No | - ---- - -### `textDecorationLine` - -| Type | Required | -| ------------------------------------------------------------------- | -------- | -| enum('none', 'underline', 'line-through', 'underline line-through') | No | - ---- - -### `fontFamily` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `textShadowOffset` - -| Type | Required | -| -------------------------------------- | -------- | -| object: {width: number,height: number} | No | - ---- - -### `textShadowRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `textAlignVertical` - -| Type | Required | Platform | -| --------------------------------------- | -------- | -------- | -| enum('auto', 'top', 'bottom', 'center') | No | Android | - ---- - -### `letterSpacing` - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `textDecorationColor` - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | - ---- - -### `textDecorationStyle` - -| Type | Required | Platform | -| ------------------------------------------- | -------- | -------- | -| enum('solid', 'double', 'dotted', 'dashed') | No | iOS | - ---- - -### `writingDirection` - -| Type | Required | Platform | -| -------------------------- | -------- | -------- | -| enum('auto', 'ltr', 'rtl') | No | iOS | diff --git a/website/versioned_docs/version-0.26/text.md b/website/versioned_docs/version-0.26/text.md deleted file mode 100644 index d359800a0ab..00000000000 --- a/website/versioned_docs/version-0.26/text.md +++ /dev/null @@ -1,174 +0,0 @@ ---- -id: version-0.26-text -title: Text -original_id: text ---- - -A React component for displaying text which supports nesting, styling, and touch handling. In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines: - -``` -renderText: function() { - return ( - - - {this.state.titleText + '\n\n'} - - - {this.state.bodyText} - - - ); -}, -... -var styles = StyleSheet.create({ - baseText: { - fontFamily: 'Cochin', - }, - titleText: { - fontSize: 20, - fontWeight: 'bold', - }, -}; -``` - -### Props - -- [`accessible`](text.md#accessible) -- [`numberOfLines`](text.md#numberoflines) -- [`onLayout`](text.md#onlayout) -- [`onLongPress`](text.md#onlongpress) -- [`onPress`](text.md#onpress) -- [`style`](text.md#style) -- [`testID`](text.md#testid) -- [`allowFontScaling`](text.md#allowfontscaling) -- [`suppressHighlighting`](text.md#suppresshighlighting) - ---- - -# Reference - -## Props - -### `accessible` - -| Type | Required | -| ---- | -------- | -| | No | - ---- - -### `numberOfLines` - -Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with - -`{nativeEvent: {layout: {x, y, width, height}}}` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLongPress` - -This function is called on long press. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPress` - -This function is called on press. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [View Style Props...](view-style-props.md#style) - -- **`textShadowColor`**: [color](colors.md) - -- **`color`**: [color](colors.md) - -- **`fontSize`**: number - -- **`fontStyle`**: enum('normal', 'italic') - -- **`fontWeight`**: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') - - Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen. - -- **`lineHeight`**: number - -- **`textAlign`**: enum('auto', 'left', 'right', 'center', 'justify') - - Specifies text alignment. The value 'justify' is only supported on iOS and fallbacks to `left` on Android. - -- **`textDecorationLine`**: enum('none', 'underline', 'line-through', 'underline line-through') - -- **`fontFamily`**: string - -- **`textShadowOffset`**: object: {width: number,height: number} - -- **`textShadowRadius`**: number - -- **`textAlignVertical`**: enum('auto', 'top', 'bottom', 'center') (_Android_) - -- **`letterSpacing`**: number (_iOS_) - -- **`textDecorationColor`**: [color](colors.md) (_iOS_) - -- **`textDecorationStyle`**: enum('solid', 'double', 'dotted', 'dashed') (_iOS_) - -- **`writingDirection`**: enum('auto', 'ltr', 'rtl') (_iOS_) - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `allowFontScaling` - -Specifies should fonts scale to respect Text Size accessibility setting on iOS. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `suppressHighlighting` - -When true, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | diff --git a/website/versioned_docs/version-0.26/touchableopacity.md b/website/versioned_docs/version-0.26/touchableopacity.md deleted file mode 100644 index 94ab6cfa8ff..00000000000 --- a/website/versioned_docs/version-0.26/touchableopacity.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: version-0.26-touchableopacity -title: TouchableOpacity -original_id: touchableopacity ---- - -A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it. This is done without actually changing the view hierarchy, and in general is quick to add to an app without weird side-effects. - -Example: - -``` -renderButton: function() { - return ( - - - - ); -}, -``` - -### Props - -- [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) - -* [`activeOpacity`](touchableopacity.md#activeopacity) - -### Methods - -- [`setOpacityTo`](touchableopacity.md#setopacityto) - ---- - -# Reference - -## Props - -### `activeOpacity` - -Determines what the opacity of the wrapped view should be when touch is active. Defaults to 0.2. - -| Type | Required | -| ------ | -------- | -| number | No | - -## Methods - -### `setOpacityTo()` - -```jsx -setOpacityTo((value: number)); -``` - -Animate the touchable to a new opacity. diff --git a/website/versioned_docs/version-0.26/transforms.md b/website/versioned_docs/version-0.26/transforms.md deleted file mode 100644 index 5adce7a995d..00000000000 --- a/website/versioned_docs/version-0.26/transforms.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: version-0.26-transforms -title: Transforms -original_id: transforms ---- - -### Props - -- [`decomposedMatrix`](transforms.md#decomposedmatrix) -- [`rotation`](transforms.md#rotation) -- [`scaleX`](transforms.md#scalex) -- [`scaleY`](transforms.md#scaley) -- [`transform`](transforms.md#transform) -- [`transformMatrix`](transforms.md#transformmatrix) -- [`translateX`](transforms.md#translatex) -- [`translateY`](transforms.md#translatey) - ---- - -# Reference - -## Props - -### `decomposedMatrix` - -| Type | Required | -| ------------------------ | -------- | -| DecomposedMatrixPropType | No | - ---- - -### `rotation` - -| Type | Required | -| ---------------------------------------------------------------------------- | -------- | -| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | - ---- - -### `scaleX` - -| Type | Required | -| ---------------------------------------------------------------------------- | -------- | -| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | - ---- - -### `scaleY` - -| Type | Required | -| ---------------------------------------------------------------------------- | -------- | -| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | - ---- - -### `transform` - -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| array of object: {perspective: number}, ,object: {rotate: string}, ,object: {rotateX: string}, ,object: {rotateY: string}, ,object: {rotateZ: string}, ,object: {scale: number}, ,object: {scaleX: number}, ,object: {scaleY: number}, ,object: {translateX: number}, ,object: {translateY: number}, ,object: {skewX: string}, ,object: {skewY: string} | No | - ---- - -### `transformMatrix` - -| Type | Required | -| ----------------------- | -------- | -| TransformMatrixPropType | No | - ---- - -### `translateX` - -| Type | Required | -| ---------------------------------------------------------------------------- | -------- | -| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | - ---- - -### `translateY` - -| Type | Required | -| ---------------------------------------------------------------------------- | -------- | -| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | diff --git a/website/versioned_docs/version-0.26/viewpagerandroid.md b/website/versioned_docs/version-0.26/viewpagerandroid.md deleted file mode 100644 index dfbf2d48903..00000000000 --- a/website/versioned_docs/version-0.26/viewpagerandroid.md +++ /dev/null @@ -1,181 +0,0 @@ ---- -id: version-0.26-viewpagerandroid -title: ViewPagerAndroid -original_id: viewpagerandroid ---- - -Container that allows to flip left and right between child views. Each child view of the `ViewPagerAndroid` will be treated as a separate page and will be stretched to fill the `ViewPagerAndroid`. - -It is important all children are ``s and not composite components. You can set style properties like `padding` or `backgroundColor` for each child. - -Example: - -``` -render: function() { - return ( - - - First page - - - Second page - - - ); -} - -... - -var styles = { - ... - pageStyle: { - alignItems: 'center', - padding: 20, - } -} -``` - -### Props - -- [View props...](view.md#props) - -* [`initialPage`](viewpagerandroid.md#initialpage) -* [`keyboardDismissMode`](viewpagerandroid.md#keyboarddismissmode) -* [`onPageScroll`](viewpagerandroid.md#onpagescroll) -* [`onPageScrollStateChanged`](viewpagerandroid.md#onpagescrollstatechanged) -* [`onPageSelected`](viewpagerandroid.md#onpageselected) -* [`pageMargin`](viewpagerandroid.md#pagemargin) -* [`scrollEnabled`](viewpagerandroid.md#scrollenabled) - -### Methods - -- [`setPage`](viewpagerandroid.md#setpage) -- [`setPageWithoutAnimation`](viewpagerandroid.md#setpagewithoutanimation) - -### Type Definitions - -- [`ViewPagerScrollState`](viewpagerandroid.md#viewpagerscrollstate) - ---- - -# Reference - -## Props - -### `initialPage` - -Index of initial page that should be selected. Use `setPage` method to update the page, and `onPageSelected` to monitor page changes - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. - -| Type | Required | -| ----------------------- | -------- | -| enum('none', 'on-drag') | No | - ---- - -### `onPageScroll` - -Executed when transitioning between pages (ether because of animation for the requested page change or when user is swiping/dragging between pages) The `event.nativeEvent` object for this callback will carry following data: - -- position - index of first page from the left that is currently visible -- offset - value from range [0,1) describing stage between page transitions. Value x means that (1 - x) fraction of the page at "position" index is visible, and x fraction of the next page is visible. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPageScrollStateChanged` - -Function called when the page scrolling state has changed. The page scrolling state can be in 3 states: - -- idle, meaning there is no interaction with the page scroller happening at the time -- dragging, meaning there is currently an interaction with the page scroller -- settling, meaning that there was an interaction with the page scroller, and the page scroller is now finishing it's closing or opening animation - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPageSelected` - -This callback will be called once ViewPager finish navigating to selected page (when user swipes between pages). The `event.nativeEvent` object passed to this callback will have following fields: - -- position - index of page that has been selected - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `pageMargin` - -Blank space to show between pages. This is only visible while scrolling, pages are still edge-to-edge. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `scrollEnabled` - -When false, the content does not scroll. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - -## Methods - -### `setPage()` - -```jsx -setPage((selectedPage: number)); -``` - -A helper function to scroll to a specific page in the ViewPager. The transition between pages will be animated. - ---- - -### `setPageWithoutAnimation()` - -```jsx -setPageWithoutAnimation((selectedPage: number)); -``` - -A helper function to scroll to a specific page in the ViewPager. The transition between pages will be _not_ be animated. - -## Type Definitions - -### ViewPagerScrollState - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| -------- | ----------- | -| idle | | -| dragging | | -| settling | | diff --git a/website/versioned_docs/version-0.26/webview.md b/website/versioned_docs/version-0.26/webview.md deleted file mode 100644 index 6cd71012a44..00000000000 --- a/website/versioned_docs/version-0.26/webview.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: version-0.26-webview -title: WebView -original_id: webview ---- - -Renders a native WebView. - -### Props - -- [View props...](view.md#props) - -* [`scalesPageToFit`](webview.md#scalespagetofit) -* [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) -* [`onShouldStartLoadWithRequest`](webview.md#onshouldstartloadwithrequest) -* [`injectedJavaScript`](webview.md#injectedjavascript) -* [`mediaPlaybackRequiresUserAction`](webview.md#mediaplaybackrequiresuseraction) -* [`onError`](webview.md#onerror) -* [`onLoad`](webview.md#onload) -* [`onLoadEnd`](webview.md#onloadend) -* [`onLoadStart`](webview.md#onloadstart) -* [`onNavigationStateChange`](webview.md#onnavigationstatechange) -* [`renderError`](webview.md#rendererror) -* [`renderLoading`](webview.md#renderloading) -* [`contentInset`](webview.md#contentinset) -* [`source`](webview.md#source) -* [`startInLoadingState`](webview.md#startinloadingstate) -* [`style`](webview.md#style) -* [`decelerationRate`](webview.md#decelerationrate) -* [`domStorageEnabled`](webview.md#domstorageenabled) -* [`javaScriptEnabled`](webview.md#javascriptenabled) -* [`allowsInlineMediaPlayback`](webview.md#allowsinlinemediaplayback) -* [`bounces`](webview.md#bounces) -* [`scrollEnabled`](webview.md#scrollenabled) -* [`url`](webview.md#url) -* [`html`](webview.md#html) - -### Methods - -- [`goForward`](webview.md#goforward) -- [`goBack`](webview.md#goback) -- [`reload`](webview.md#reload) -- [`stopLoading`](webview.md#stoploading) -- [`getWebViewHandle`](webview.md#getwebviewhandle) - ---- - -# Reference - -## Props - -### `scalesPageToFit` - -Sets whether the webpage scales to fit the view and the user can change the scale. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `automaticallyAdjustContentInsets` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onShouldStartLoadWithRequest` - -Allows custom handling of any webview requests by a JS handler. Return true or false from this method to continue loading the request. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `injectedJavaScript` - -Sets the JS to be injected when the webpage loads. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `mediaPlaybackRequiresUserAction` - -Determines whether HTML5 audio & videos require the user to tap before they can start playing. The default value is `false`. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onError` - -Invoked when load fails - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoad` - -Invoked when load finish - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadEnd` - -Invoked when load either succeeds or fails - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadStart` - -Invoked on load start - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onNavigationStateChange` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `renderError` - -Function that returns a view to show if there's an error. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `renderLoading` - -Function that returns a loading indicator. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `contentInset` - -| Type | Required | -| ------------------------------------------------------------------ | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | - ---- - -### `source` - -Loads static html or a uri (with optional headers) in the WebView. - -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------- | -------- | -| object: {uri: string,method: string,headers: object,body: string}, ,object: {html: string,baseUrl: string}, ,number | No | - ---- - -### `startInLoadingState` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use string shortcuts `"normal"` and `"fast"` which match the underlying iOS settings for `UIScrollViewDecelerationRateNormal` and `UIScrollViewDecelerationRateFast` respectively. - -- normal: 0.998 -- fast: 0.99 (the default for iOS WebView) - -| Type | Required | Platform | -| ------------------------------------- | -------- | -------- | -| ScrollView.propTypes.decelerationRate | No | iOS | - ---- - -### `domStorageEnabled` - -Used on Android only, controls whether DOM Storage is enabled or not - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `javaScriptEnabled` - -Used on Android only, JS is enabled by default for WebView on iOS - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `allowsInlineMediaPlayback` - -Determines whether HTML5 videos play inline or use the native full-screen controller. default value `false` **NOTE** : "In order for video to play inline, not only does this property need to be set to true, but the video element in the HTML document must also include the webkit-playsinline attribute." - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bounces` - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEnabled` - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `url` - -**Deprecated.** Use the `source` prop instead. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `html` - -**Deprecated.** Use the `source` prop instead. - -| Type | Required | -| ------ | -------- | -| string | No | - -## Methods - -### `goForward()` - -```jsx -goForward(); -``` - -Go forward one page in the webview's history. - ---- - -### `goBack()` - -```jsx -goBack(); -``` - -Go back one page in the webview's history. - ---- - -### `reload()` - -```jsx -reload(); -``` - -Reloads the current page. - ---- - -### `stopLoading()` - -```jsx -stopLoading(); -``` - ---- - -### `getWebViewHandle()` - -```jsx -getWebViewHandle(): -``` - -Returns the native webview node. diff --git a/website/versioned_docs/version-0.27/drawerlayoutandroid.md b/website/versioned_docs/version-0.27/drawerlayoutandroid.md deleted file mode 100644 index 92e333acf84..00000000000 --- a/website/versioned_docs/version-0.27/drawerlayoutandroid.md +++ /dev/null @@ -1,203 +0,0 @@ ---- -id: version-0.27-drawerlayoutandroid -title: DrawerLayoutAndroid -original_id: drawerlayoutandroid ---- - -React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop. - -Example: - -``` -render: function() { - var navigationView = ( - - I'm in the Drawer! - - ); - return ( - navigationView}> - - Hello - World! - - - ); -}, -``` - -### Props - -- [View props...](view.md#props) - -* [`renderNavigationView`](drawerlayoutandroid.md#rendernavigationview) -* [`onDrawerClose`](drawerlayoutandroid.md#ondrawerclose) -* [`drawerPosition`](drawerlayoutandroid.md#drawerposition) -* [`drawerWidth`](drawerlayoutandroid.md#drawerwidth) -* [`keyboardDismissMode`](drawerlayoutandroid.md#keyboarddismissmode) -* [`drawerLockMode`](drawerlayoutandroid.md#drawerlockmode) -* [`onDrawerOpen`](drawerlayoutandroid.md#ondraweropen) -* [`onDrawerSlide`](drawerlayoutandroid.md#ondrawerslide) -* [`onDrawerStateChanged`](drawerlayoutandroid.md#ondrawerstatechanged) -* [`drawerBackgroundColor`](drawerlayoutandroid.md#drawerbackgroundcolor) -* [`statusBarBackgroundColor`](drawerlayoutandroid.md#statusbarbackgroundcolor) - -### Methods - -- [`openDrawer`](drawerlayoutandroid.md#opendrawer) -- [`closeDrawer`](drawerlayoutandroid.md#closedrawer) - ---- - -# Reference - -## Props - -### `renderNavigationView` - -The navigation view that will be rendered to the side of the screen and can be pulled in. - -| Type | Required | -| -------- | -------- | -| function | Yes | - ---- - -### `onDrawerClose` - -Function called whenever the navigation view has been closed. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `drawerPosition` - -Specifies the side of the screen from which the drawer will slide in. - -| Type | Required | -| ------------------------------------------------------------------------- | -------- | -| enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) | No | - ---- - -### `drawerWidth` - -Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. - -| Type | Required | -| ----------------------- | -------- | -| enum('none', 'on-drag') | No | - ---- - -### `drawerLockMode` - -Specifies the lock mode of the drawer. The drawer can be locked in 3 states: - -- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures. -- locked-closed, meaning that the drawer will stay closed and not respond to gestures. -- locked-open, meaning that the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`). - -| Type | Required | -| ------------------------------------------------ | -------- | -| enum('unlocked', 'locked-closed', 'locked-open') | No | - ---- - -### `onDrawerOpen` - -Function called whenever the navigation view has been opened. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerSlide` - -Function called whenever there is an interaction with the navigation view. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onDrawerStateChanged` - -Function called when the drawer state has changed. The drawer can be in 3 states: - -- idle, meaning there is no interaction with the navigation view happening at the time -- dragging, meaning there is currently an interaction with the navigation view -- settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `drawerBackgroundColor` - -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: - -``` -return ( - - -); -``` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `statusBarBackgroundColor` - -Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar. It will only have an effect on API 21+. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - -## Methods - -### `openDrawer()` - -```jsx -openDrawer(); -``` - -Opens the drawer. - ---- - -### `closeDrawer()` - -```jsx -closeDrawer(); -``` - -Closes the drawer. diff --git a/website/versioned_docs/version-0.27/image-style-props.md b/website/versioned_docs/version-0.27/image-style-props.md deleted file mode 100644 index 4e4119b1388..00000000000 --- a/website/versioned_docs/version-0.27/image-style-props.md +++ /dev/null @@ -1,149 +0,0 @@ ---- -id: version-0.27-image-style-props -title: Image Style Props -original_id: image-style-props ---- - -### Props - -- [`borderTopRightRadius`](image-style-props.md#bordertoprightradius) -- [`backfaceVisibility`](image-style-props.md#backfacevisibility) -- [`borderBottomLeftRadius`](image-style-props.md#borderbottomleftradius) -- [`borderBottomRightRadius`](image-style-props.md#borderbottomrightradius) -- [`borderColor`](image-style-props.md#bordercolor) -- [`borderRadius`](image-style-props.md#borderradius) -- [`borderTopLeftRadius`](image-style-props.md#bordertopleftradius) -- [`backgroundColor`](image-style-props.md#backgroundcolor) -- [`borderWidth`](image-style-props.md#borderwidth) -- [`opacity`](image-style-props.md#opacity) -- [`overflow`](image-style-props.md#overflow) -- [`resizeMode`](image-style-props.md#resizemode) -- [`tintColor`](image-style-props.md#tintcolor) -- [`overlayColor`](image-style-props.md#overlaycolor) - ---- - -# Reference - -## Props - -### `borderTopRightRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `backfaceVisibility` - -| Type | Required | -| ------------------------- | -------- | -| enum('visible', 'hidden') | No | - ---- - -### `borderBottomLeftRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderBottomRightRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderTopLeftRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `backgroundColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderWidth` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `opacity` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `overflow` - -| Type | Required | -| ------------------------- | -------- | -| enum('visible', 'hidden') | No | - ---- - -### `resizeMode` - -| Type | Required | -| ---------------------------- | -------- | -| Object.keys(ImageResizeMode) | No | - ---- - -### `tintColor` - -Changes the color of all the non-transparent pixels to the tintColor. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `overlayColor` - -When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners: - -- Certain resize modes, such as 'contain' -- Animated GIFs - -A typical way to use this prop is with images displayed on a solid background and setting the `overlayColor` to the same color as the background. - -For details of how this works under the hood, see http://frescolib.org/rounded-corners-and-circles.md - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | diff --git a/website/versioned_docs/version-0.27/image.md b/website/versioned_docs/version-0.27/image.md deleted file mode 100644 index bb8b2f685d2..00000000000 --- a/website/versioned_docs/version-0.27/image.md +++ /dev/null @@ -1,274 +0,0 @@ ---- -id: version-0.27-image -title: Image -original_id: image ---- - -A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. - -Example usage: - -``` -renderImages: function() { - return ( - - - - - ); -}, -``` - -### Props - -- [`testID`](image.md#testid) -- [`onLayout`](image.md#onlayout) -- [`onLoadEnd`](image.md#onloadend) -- [`onLoadStart`](image.md#onloadstart) -- [`resizeMode`](image.md#resizemode) -- [`source`](image.md#source) -- [`style`](image.md#style) -- [`onLoad`](image.md#onload) -- [`accessibilityLabel`](image.md#accessibilitylabel) -- [`accessible`](image.md#accessible) -- [`blurRadius`](image.md#blurradius) -- [`capInsets`](image.md#capinsets) -- [`defaultSource`](image.md#defaultsource) -- [`onError`](image.md#onerror) -- [`onProgress`](image.md#onprogress) - -### Methods - -- [`getSize`](image.md#getsize) -- [`prefetch`](image.md#prefetch) - ---- - -# Reference - -## Props - -### `testID` - -A unique identifier for this element to be used in UI Automation testing scripts. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{nativeEvent: {layout: {x, y, width, height}}}`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadEnd` - -Invoked when load either succeeds or fails - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadStart` - -Invoked on load start - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `resizeMode` - -Determines how to resize the image when the frame doesn't match the raw image dimensions. - -'cover': Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding). - -'contain': Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). - -'stretch': Scale width and height independently, This may change the aspect ratio of the src. - -| Type | Required | -| ----------------------------------- | -------- | -| enum('cover', 'contain', 'stretch') | No | - ---- - -### `source` - -`uri` is a string representing the resource identifier for the image, which could be an http address, a local file path, or the name of a static image resource (which should be wrapped in the `require('./path/to/image.png')` function). - -| Type | Required | -| ------------------------------ | -------- | -| object: {uri: string}, ,number | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Shadow Props...](shadow-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderTopRightRadius`**: number - -- **`backfaceVisibility`**: enum('visible', 'hidden') - -- **`borderBottomLeftRadius`**: number - -- **`borderBottomRightRadius`**: number - -- **`borderColor`**: [color](colors.md) - -- **`borderRadius`**: number - -- **`borderTopLeftRadius`**: number - -- **`backgroundColor`**: [color](colors.md) - -- **`borderWidth`**: number - -- **`opacity`**: number - -- **`overflow`**: enum('visible', 'hidden') - -- **`resizeMode`**: Object.keys(ImageResizeMode) - -- **`tintColor`**: [color](colors.md) - - Changes the color of all the non-transparent pixels to the tintColor. - -- **`overlayColor`**: string (_Android_) - - When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners: - - - Certain resize modes, such as 'contain' - - Animated GIFs - - A typical way to use this prop is with images displayed on a solid background and setting the `overlayColor` to the same color as the background. - - For details of how this works under the hood, see http://frescolib.org/rounded-corners-and-circles.md - ---- - -### `onLoad` - -Invoked when load completes successfully - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `accessibilityLabel` - -The text that's read by the screen reader when the user interacts with the image. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | iOS | - ---- - -### `accessible` - -When true, indicates the image is an accessibility element. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `blurRadius` - -blurRadius: the blur radius of the blur filter added to the image - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `capInsets` - -When the image is resized, the corners of the size specified by capInsets will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info on [Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets) - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `defaultSource` - -A static image to display while loading the image source. - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| object: {uri: string}, ,number | No | iOS | - ---- - -### `onError` - -Invoked on load error with `{nativeEvent: {error}}` - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `onProgress` - -Invoked on download progress with `{nativeEvent: {loaded, total}}` - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - -## Methods - -### `getSize()` - -```jsx -static getSize(uri: string, success: function, failure: function) -``` - -Retrieve the width and height (in pixels) of an image prior to displaying it. This method can fail if the image cannot be found, or fails to download. - -In order to retrieve the image dimensions, the image may first need to be loaded or downloaded, after which it will be cached. This means that in principle you could use this method to preload images, however it is not optimized for that purpose, and may in future be implemented in a way that does not fully load/download the image data. A proper, supported way to preload images will be provided as a separate API. - ---- - -### `prefetch()` - -```jsx -static prefetch(url: string) -``` - -Prefetches a remote image for later use by downloading it to the disk cache diff --git a/website/versioned_docs/version-0.27/navigatorios.md b/website/versioned_docs/version-0.27/navigatorios.md deleted file mode 100644 index 0b52a5f271f..00000000000 --- a/website/versioned_docs/version-0.27/navigatorios.md +++ /dev/null @@ -1,290 +0,0 @@ ---- -id: version-0.27-navigatorios -title: NavigatorIOS -original_id: navigatorios ---- - -NavigatorIOS wraps UIKit navigation and allows you to add back-swipe functionality across your app. - -> **NOTE**: This Component is not maintained by Facebook -> -> This component is under community responsibility. If a pure JavaScript solution fits your needs you may try the `Navigator` component instead. - -#### Routes - -A route is an object used to describe each page in the navigator. The first route is provided to NavigatorIOS as `initialRoute`: - -``` -render: function() { - return ( - - ); -}, -``` - -Now MyView will be rendered by the navigator. It will receive the route object in the `route` prop, a navigator, and all of the props specified in `passProps`. - -See the initialRoute propType for a complete definition of a route. - -#### Navigator - -A `navigator` is an object of navigation functions that a view can call. It is passed as a prop to any component rendered by NavigatorIOS. - -``` -var MyView = React.createClass({ - _handleBackButtonPress: function() { - this.props.navigator.pop(); - }, - _handleNextButtonPress: function() { - this.props.navigator.push(nextRoute); - }, - ... -}); -``` - -Navigator functions are also available on the NavigatorIOS component: - -``` -var MyView = React.createClass({ - _handleNavigationRequest: function() { - this.refs.nav.push(otherRoute); - }, - render: () => ( - - ), -}); -``` - -Props passed to the NavigatorIOS component will set the default configuration for the navigation bar. Props passed as properties to a route object will set the configuration for that route's navigation bar, overriding any props passed to the NavigatorIOS component. - -### Props - -- [`initialRoute`](navigatorios.md#initialroute) -- [`barTintColor`](navigatorios.md#bartintcolor) -- [`interactivePopGestureEnabled`](navigatorios.md#interactivepopgestureenabled) -- [`itemWrapperStyle`](navigatorios.md#itemwrapperstyle) -- [`navigationBarHidden`](navigatorios.md#navigationbarhidden) -- [`shadowHidden`](navigatorios.md#shadowhidden) -- [`tintColor`](navigatorios.md#tintcolor) -- [`titleTextColor`](navigatorios.md#titletextcolor) -- [`translucent`](navigatorios.md#translucent) - -### Methods - -- [`push`](navigatorios.md#push) -- [`popN`](navigatorios.md#popn) -- [`pop`](navigatorios.md#pop) -- [`replaceAtIndex`](navigatorios.md#replaceatindex) -- [`replace`](navigatorios.md#replace) -- [`replacePrevious`](navigatorios.md#replaceprevious) -- [`popToTop`](navigatorios.md#poptotop) -- [`popToRoute`](navigatorios.md#poptoroute) -- [`replacePreviousAndPop`](navigatorios.md#replacepreviousandpop) -- [`resetTo`](navigatorios.md#resetto) - ---- - -# Reference - -## Props - -### `initialRoute` - -NavigatorIOS uses "route" objects to identify child views, their props, and navigation bar configuration. "push" and all the other navigation operations expect routes to be like this: - -| Type | Required | -| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| object: {component: function,title: string,passProps: object,backButtonIcon: Image.propTypes.source,backButtonTitle: string,leftButtonIcon: Image.propTypes.source,leftButtonTitle: string,onLeftButtonPress: function,rightButtonIcon: Image.propTypes.source,rightButtonTitle: string,onRightButtonPress: function,wrapperStyle: [View](view.md#style),navigationBarHidden: bool,shadowHidden: bool,tintColor: string,barTintColor: string,titleTextColor: string,translucent: bool} | Yes | - ---- - -### `barTintColor` - -The default background color of the navigation bar - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `interactivePopGestureEnabled` - - - -A Boolean value that indicates whether the interactive pop gesture is enabled. Useful for enabling/disabling the back swipe navigation gesture. If this prop is not provided, the default behavior is for the back swipe gesture to be enabled when the navigation bar is shown and disabled when the navigation bar is hidden. Once you've provided the interactivePopGestureEnabled prop, you can never restore the default behavior. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `itemWrapperStyle` - -The default wrapper style for components in the navigator. A common use case is to set the backgroundColor for every page - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `navigationBarHidden` - -A Boolean value that indicates whether the navigation bar is hidden by default - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `shadowHidden` - -A Boolean value that indicates whether to hide the 1px hairline shadow by default - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `tintColor` - -The default color used for buttons in the navigation bar - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `titleTextColor` - -The default text color of the navigation bar title - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `translucent` - -A Boolean value that indicates whether the navigation bar is translucent by default - -| Type | Required | -| ---- | -------- | -| bool | No | - -## Methods - -### `push()` - -```jsx -push((route: object)); -``` - -Navigate forward to a new route - ---- - -### `popN()` - -```jsx -popN((n: number)); -``` - -Go back N pages at once. When N=1, behavior matches `pop()` - ---- - -### `pop()` - -```jsx -pop(); -``` - -Go back one page - ---- - -### `replaceAtIndex()` - -```jsx -replaceAtIndex((route: object), (index: number)); -``` - -Replace a route in the navigation stack. - -`index` specifies the route in the stack that should be replaced. If it's negative, it counts from the back. - ---- - -### `replace()` - -```jsx -replace((route: object)); -``` - -Replace the route for the current page and immediately load the view for the new route. - ---- - -### `replacePrevious()` - -```jsx -replacePrevious((route: object)); -``` - -Replace the route/view for the previous page. - ---- - -### `popToTop()` - -```jsx -popToTop(); -``` - -Go back to the top item - ---- - -### `popToRoute()` - -```jsx -popToRoute((route: object)); -``` - -Go back to the item for a particular route object - ---- - -### `replacePreviousAndPop()` - -```jsx -replacePreviousAndPop((route: object)); -``` - -Replaces the previous route/view and transitions back to it. - ---- - -### `resetTo()` - -```jsx -resetTo((route: object)); -``` - -Replaces the top item and popToTop diff --git a/website/versioned_docs/version-0.27/netinfo.md b/website/versioned_docs/version-0.27/netinfo.md deleted file mode 100644 index e455bfcabe6..00000000000 --- a/website/versioned_docs/version-0.27/netinfo.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -id: version-0.27-netinfo -title: NetInfo -original_id: netinfo ---- - -NetInfo exposes info about online/offline status - -``` -NetInfo.fetch().done((reach) => { - console.log('Initial: ' + reach); -}); -function handleFirstConnectivityChange(reach) { - console.log('First change: ' + reach); - NetInfo.removeEventListener( - 'change', - handleFirstConnectivityChange - ); -} -NetInfo.addEventListener( - 'change', - handleFirstConnectivityChange -); -``` - -### IOS - -Asynchronously determine if the device is online and on a cellular network. - -- `none` - device is offline -- `wifi` - device is online and connected via wifi, or is the iOS simulator -- `cell` - device is connected via Edge, 3G, WiMax, or LTE -- `unknown` - error case and the network status is unknown - -### Android - -To request network info, you need to add the following line to your app's `AndroidManifest.xml`: - -`` Asynchronously determine if the device is connected and details about that connection. - -Android Connectivity Types. - -- `NONE` - device is offline -- `BLUETOOTH` - The Bluetooth data connection. -- `DUMMY` - Dummy data connection. -- `ETHERNET` - The Ethernet data connection. -- `MOBILE` - The Mobile data connection. -- `MOBILE_DUN` - A DUN-specific Mobile data connection. -- `MOBILE_HIPRI` - A High Priority Mobile data connection. -- `MOBILE_MMS` - An MMS-specific Mobile data connection. -- `MOBILE_SUPL` - A SUPL-specific Mobile data connection. -- `VPN` - A virtual network using one or more native bearers. Requires API Level 21 -- `WIFI` - The WIFI data connection. -- `WIMAX` - The WiMAX data connection. -- `UNKNOWN` - Unknown data connection. - -The rest ConnectivityStates are hidden by the Android API, but can be used if necessary. - -### isConnectionExpensive - -Available on Android. Detect if the current active connection is metered or not. A network is classified as metered when the user is sensitive to heavy data usage on that connection due to monetary costs, data limitations or battery/performance issues. - -``` -NetInfo.isConnectionExpensive() -.then(isConnectionExpensive => { - console.log('Connection is ' + (isConnectionExpensive ? 'Expensive' : 'Not Expensive')); -}) -.catch(error => { - console.error(error); -}); -``` - -### isConnected - -Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity. - -``` -NetInfo.isConnected.fetch().then(isConnected => { - console.log('First, is ' + (isConnected ? 'online' : 'offline')); -}); -function handleFirstConnectivityChange(isConnected) { - console.log('Then, is ' + (isConnected ? 'online' : 'offline')); - NetInfo.isConnected.removeEventListener( - 'change', - handleFirstConnectivityChange - ); -} -NetInfo.isConnected.addEventListener( - 'change', - handleFirstConnectivityChange -); -``` - -### Methods - -- [`addEventListener`](netinfo.md#addeventlistener) -- [`removeEventListener`](netinfo.md#removeeventlistener) -- [`fetch`](netinfo.md#fetch) -- [`isConnectionExpensive`](netinfo.md#isconnectionexpensive) - -### Properties - -- [`isConnected`](netinfo.md#isconnected) - ---- - -# Reference - -## Methods - -### `addEventListener()` - -```jsx -static addEventListener(eventName, handler) -``` - -Invokes the listener whenever network status changes. The listener receives one of the connectivity types listed above. - ---- - -### `removeEventListener()` - -```jsx -static removeEventListener(eventName, handler) -``` - -Removes the listener for network status changes. - ---- - -### `fetch()` - -```jsx -static fetch() -``` - -Returns a promise that resolves with one of the connectivity types listed above. - ---- - -### `isConnectionExpensive()` - -```jsx -static isConnectionExpensive() -``` - -## Properties diff --git a/website/versioned_docs/version-0.27/refreshcontrol.md b/website/versioned_docs/version-0.27/refreshcontrol.md deleted file mode 100644 index 98ed25190c5..00000000000 --- a/website/versioned_docs/version-0.27/refreshcontrol.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -id: version-0.27-refreshcontrol -title: RefreshControl -original_id: refreshcontrol ---- - -This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at `scrollY: 0`, swiping down triggers an `onRefresh` event. - -### Usage example - -```js -class RefreshableList extends Component { - constructor(props) { - super(props); - this.state = { - refreshing: false, - }; - } - - _onRefresh() { - this.setState({refreshing: true}); - fetchData().then(() => { - this.setState({refreshing: false}); - }); - } - - render() { - return ( - - } - ... - > - ... - - ); - } - ... -} -``` - -**Note:** `refreshing` is a controlled prop, this is why it needs to be set to true in the `onRefresh` function otherwise the refresh indicator will stop immediatly. - -### Props - -- [View props...](view.md#props) - -* [`refreshing`](refreshcontrol.md#refreshing) -* [`onRefresh`](refreshcontrol.md#onrefresh) -* [`colors`](refreshcontrol.md#colors) -* [`enabled`](refreshcontrol.md#enabled) -* [`progressBackgroundColor`](refreshcontrol.md#progressbackgroundcolor) -* [`progressViewOffset`](refreshcontrol.md#progressviewoffset) -* [`size`](refreshcontrol.md#size) -* [`tintColor`](refreshcontrol.md#tintcolor) -* [`title`](refreshcontrol.md#title) -* [`titleColor`](refreshcontrol.md#titlecolor) - ---- - -# Reference - -## Props - -### `refreshing` - -Whether the view should be indicating an active refresh. - -| Type | Required | -| ---- | -------- | -| bool | Yes | - ---- - -### `onRefresh` - -Called when the view starts refreshing. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `colors` - -The colors (at least one) that will be used to draw the refresh indicator. - -| Type | Required | Platform | -| --------------------------- | -------- | -------- | -| array of [color](colors.md) | No | Android | - ---- - -### `enabled` - -Whether the pull to refresh functionality is enabled. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `progressBackgroundColor` - -The background color of the refresh indicator. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `progressViewOffset` - -Progress view top offset - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | Android | - ---- - -### `size` - -Size of the refresh indicator, see RefreshControl.SIZE. - -| Type | Required | Platform | -| ---------------------------------------------------------------------- | -------- | -------- | -| enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE) | No | Android | - ---- - -### `tintColor` - -The color of the refresh indicator. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | - ---- - -### `title` - -The title displayed under the refresh indicator. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | iOS | - ---- - -### `titleColor` - -Title color. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | diff --git a/website/versioned_docs/version-0.27/scrollview.md b/website/versioned_docs/version-0.27/scrollview.md deleted file mode 100644 index addf0cef40c..00000000000 --- a/website/versioned_docs/version-0.27/scrollview.md +++ /dev/null @@ -1,558 +0,0 @@ ---- -id: version-0.27-scrollview -title: ScrollView -original_id: scrollview ---- - -Component that wraps platform ScrollView while providing integration with touch locking "responder" system. - -Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer `{flex: 1}` down the view stack can lead to errors here, which the element inspector makes quick to debug. - -Doesn't yet support other contained responders from blocking this scroll view from becoming the responder. - -### Props - -- [View props...](view.md#props) - -* [`bouncesZoom`](scrollview.md#bounceszoom) -* [`contentContainerStyle`](scrollview.md#contentcontainerstyle) -* [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) -* [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) -* [`onContentSizeChange`](scrollview.md#oncontentsizechange) -* [`onScroll`](scrollview.md#onscroll) -* [`pagingEnabled`](scrollview.md#pagingenabled) -* [`refreshControl`](scrollview.md#refreshcontrol) -* [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) -* [`scrollEnabled`](scrollview.md#scrollenabled) -* [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) -* [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) -* [`style`](scrollview.md#style) -* [`endFillColor`](scrollview.md#endfillcolor) -* [`scrollPerfTag`](scrollview.md#scrollperftag) -* [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) -* [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) -* [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) -* [`bounces`](scrollview.md#bounces) -* [`horizontal`](scrollview.md#horizontal) -* [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) -* [`centerContent`](scrollview.md#centercontent) -* [`contentInset`](scrollview.md#contentinset) -* [`contentOffset`](scrollview.md#contentoffset) -* [`decelerationRate`](scrollview.md#decelerationrate) -* [`directionalLockEnabled`](scrollview.md#directionallockenabled) -* [`indicatorStyle`](scrollview.md#indicatorstyle) -* [`maximumZoomScale`](scrollview.md#maximumzoomscale) -* [`minimumZoomScale`](scrollview.md#minimumzoomscale) -* [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) -* [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) -* [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) -* [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) -* [`scrollsToTop`](scrollview.md#scrollstotop) -* [`snapToAlignment`](scrollview.md#snaptoalignment) -* [`snapToInterval`](scrollview.md#snaptointerval) -* [`zoomScale`](scrollview.md#zoomscale) -* [`onRefreshStart`](scrollview.md#onrefreshstart) - -### Methods - -- [`endRefreshing`](scrollview.md#endrefreshing) -- [`scrollTo`](scrollview.md#scrollto) -- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) - ---- - -# Reference - -## Props - -### `bouncesZoom` - -When true, gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture end, otherwise the zoom will not exceed the limits. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `contentContainerStyle` - -These styles will be applied to the scroll view content container which wraps all of the child views. Example: - -return ( ); ... const styles = StyleSheet.create({ contentContainer: { paddingVertical: 20 } }); - -| Type | Required | -| ------------------------------------ | -------- | -| StyleSheetPropType(View Style props) | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. -- 'interactive', the keyboard is dismissed interactively with the drag and moves in synchrony with the touch; dragging upwards cancels the dismissal. On android this is not supported and it will have the same behavior as 'none'. - -| Type | Required | -| -------------------------------------- | -------- | -| enum('none', 'interactive', 'on-drag') | No | - ---- - -### `keyboardShouldPersistTaps` - -When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the scroll view will not catch taps, and the keyboard will not dismiss automatically. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onContentSizeChange` - -Called when scrollable content view of the ScrollView changes. - -Handler function is passed the content width and content height as parameters: `(contentWidth, contentHeight)` - -It's implemented using onLayout handler attached to the content container which this ScrollView renders. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onScroll` - -Fires at most once per frame during scrolling. The frequency of the events can be controlled using the `scrollEventThrottle` prop. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `pagingEnabled` - -When true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `refreshControl` - -A RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView. - -See [RefreshControl](refreshcontrol.md). - -| Type | Required | -| ------- | -------- | -| element | No | - ---- - -### `removeClippedSubviews` - -Experimental: When true, offscreen child views (whose `overflow` value is `hidden`) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `scrollEnabled` - -When false, the content does not scroll. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsHorizontalScrollIndicator` - -When true, shows a horizontal scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsVerticalScrollIndicator` - -When true, shows a vertical scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Shadow Props...](shadow-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderRightColor`**: [color](colors.md) - -- **`backfaceVisibility`**: enum('visible', 'hidden') - -- **`borderBottomColor`**: [color](colors.md) - -- **`borderBottomLeftRadius`**: number - -- **`borderBottomRightRadius`**: number - -- **`borderBottomWidth`**: number - -- **`borderColor`**: [color](colors.md) - -- **`borderLeftColor`**: [color](colors.md) - -- **`borderLeftWidth`**: number - -- **`borderRadius`**: number - -- **`backgroundColor`**: [color](colors.md) - -- **`borderRightWidth`**: number - -- **`borderStyle`**: enum('solid', 'dotted', 'dashed') - -- **`borderTopColor`**: [color](colors.md) - -- **`borderTopLeftRadius`**: number - -- **`borderTopRightRadius`**: number - -- **`borderTopWidth`**: number - -- **`borderWidth`**: number - -- **`opacity`**: number - -- **`overflow`**: enum('visible', 'hidden') - -- **`elevation`**: number (_Android_) - - (Android-only) Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions. - ---- - -### `endFillColor` - -Sometimes a scrollview takes up more space than its content fills. When this is the case, this prop will fill the rest of the scrollview with a color to avoid setting a background and creating unnecessary overdraw. This is an advanced optimization that is not needed in the general case. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `scrollPerfTag` - -Tag used to log scroll performance on this scroll view. Will force momentum events to be turned on (see sendMomentumEvents). This doesn't do anything out of the box and you need to implement a custom native FpsListener for it to be useful. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `alwaysBounceHorizontal` - -When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself. The default value is true when `horizontal={true}` and false otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `alwaysBounceVertical` - -When true, the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself. The default value is false when `horizontal={true}` and true otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `automaticallyAdjustContentInsets` - -Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/ toolbar. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bounces` - -When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. When false, it disables all bouncing even if the `alwaysBounce*` props are true. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `horizontal` - -When true, the scroll view's children are arranged horizontally in a row instead of vertically in a column. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `canCancelContentTouches` - -When false, once tracking starts, won't try to drag if the touch moves. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `centerContent` - -When true, the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `contentInset` - -The amount by which the scroll view content is inset from the edges of the scroll view. Defaults to `{top: 0, left: 0, bottom: 0, right: 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `contentOffset` - -Used to manually set the starting scroll offset. The default value is `{x: 0, y: 0}`. - -| Type | Required | Platform | -| ------------- | -------- | -------- | -| PointPropType | No | iOS | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use string shortcuts `"normal"` and `"fast"` which match the underlying iOS settings for `UIScrollViewDecelerationRateNormal` and `UIScrollViewDecelerationRateFast` respectively. - -- normal: 0.998 (the default) -- fast: 0.99 - -| Type | Required | Platform | -| ------------------------------- | -------- | -------- | -| enum('fast', 'normal'), ,number | No | iOS | - ---- - -### `directionalLockEnabled` - -When true, the ScrollView will try to lock to only vertical or horizontal scrolling while dragging. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `indicatorStyle` - -The style of the scroll indicators. - - - -- `default` (the default), same as `black`. -- `black`, scroll indicator is black. This style is good against a white content background. -- `white`, scroll indicator is white. This style is good against a black content background. - -| Type | Required | Platform | -| --------------------------------- | -------- | -------- | -| enum('default', 'black', 'white') | No | iOS | - ---- - -### `maximumZoomScale` - -The maximum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `minimumZoomScale` - -The minimum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `stickyHeaderIndices` - -An array of child indices determining which children get docked to the top of the screen when scrolling. For example, passing `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction with `horizontal={true}`. - -| Type | Required | Platform | -| --------------- | -------- | -------- | -| array of number | No | iOS | - ---- - -### `onScrollAnimationEnd` - -Called when a scrolling animation ends. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `scrollEventThrottle` - -This controls how often the scroll event will be fired while scrolling (as a time interval in ms). A lower number yields better accuracy for code that is tracking the scroll position, but can lead to scroll performance problems due to the volume of information being send over the bridge. You will not notice a difference between values set between 1-16 as the JS run loop is synced to the screen refresh rate. If you do not need precise scroll position tracking, set this value higher to limit the information being sent across the bridge. The default value is zero, which results in the scroll event being sent only once each time the view is scrolled. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `scrollIndicatorInsets` - -The amount by which the scroll view indicators are inset from the edges of the scroll view. This should normally be set to the same value as the `contentInset`. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `scrollsToTop` - -When true, the scroll view scrolls to top when the status bar is tapped. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `snapToAlignment` - -When `snapToInterval` is set, `snapToAlignment` will define the relationship of the snapping to the scroll view. - -- `start` (the default) will align the snap at the left (horizontal) or top (vertical) -- `center` will align the snap in the center -- `end` will align the snap at the right (horizontal) or bottom (vertical) - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| enum('start', 'center', 'end') | No | iOS | - ---- - -### `snapToInterval` - -When set, causes the scroll view to stop at multiples of the value of `snapToInterval`. This can be used for paginating through children that have lengths smaller than the scroll view. Used in combination with `snapToAlignment`. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `zoomScale` - -The current scale of the scroll view content. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `onRefreshStart` - -**Deprecated.** Use the `refreshControl` prop instead. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - -## Methods - -### `endRefreshing()` - -```jsx -endRefreshing(); -``` - -Deprecated. Use `RefreshControl` instead. - ---- - -### `scrollTo()` - -```jsx -scrollTo( - ([y]: number), - object, - ([x]: number), - ([animated]: boolean) -); -``` - -Scrolls to a given x, y offset, either immediately or with a smooth animation. - -Syntax: - -`scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})` - -Note: The weird argument signature is due to the fact that, for historical reasons, the function also accepts separate arguments as as alternative to the options object. This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED. - ---- - -### `scrollWithoutAnimationTo()` - -```jsx -scrollWithoutAnimationTo(y, x); -``` - -Deprecated, do not use. diff --git a/website/versioned_docs/version-0.27/statusbarios.md b/website/versioned_docs/version-0.27/statusbarios.md deleted file mode 100644 index deb58e3e425..00000000000 --- a/website/versioned_docs/version-0.27/statusbarios.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: version-0.27-statusbarios -title: StatusBarIOS -original_id: statusbarios ---- - -Deprecated. Use `StatusBar` instead. - -### Methods - -- [`setStyle`](statusbarios.md#setstyle) -- [`setHidden`](statusbarios.md#sethidden) -- [`setNetworkActivityIndicatorVisible`](statusbarios.md#setnetworkactivityindicatorvisible) - ---- - -# Reference - -## Methods - -### `setStyle()` - -```jsx -setStyle(style, animated?) -``` - ---- - -### `setHidden()` - -```jsx -setHidden(hidden, animation?) -``` - ---- - -### `setNetworkActivityIndicatorVisible()` - -```jsx -setNetworkActivityIndicatorVisible(visible); -``` diff --git a/website/versioned_docs/version-0.27/textinput.md b/website/versioned_docs/version-0.27/textinput.md deleted file mode 100644 index 92a9b6eed98..00000000000 --- a/website/versioned_docs/version-0.27/textinput.md +++ /dev/null @@ -1,466 +0,0 @@ ---- -id: version-0.27-textinput -title: TextInput -original_id: textinput ---- - -A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. - -The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example: - -``` - this.setState({text})} - value={this.state.text} - /> -``` - -Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=false`. To achieve the same effect, you can wrap your `TextInput` in a `View`: - -``` - - - -``` - -### Props - -- [View props...](view.md#props) - -* [`placeholder`](textinput.md#placeholder) -* [`autoCapitalize`](textinput.md#autocapitalize) -* [`autoFocus`](textinput.md#autofocus) -* [`blurOnSubmit`](textinput.md#bluronsubmit) -* [`defaultValue`](textinput.md#defaultvalue) -* [`editable`](textinput.md#editable) -* [`keyboardType`](textinput.md#keyboardtype) -* [`maxLength`](textinput.md#maxlength) -* [`multiline`](textinput.md#multiline) -* [`onBlur`](textinput.md#onblur) -* [`onChange`](textinput.md#onchange) -* [`onChangeText`](textinput.md#onchangetext) -* [`onEndEditing`](textinput.md#onendediting) -* [`onFocus`](textinput.md#onfocus) -* [`onLayout`](textinput.md#onlayout) -* [`onSelectionChange`](textinput.md#onselectionchange) -* [`onSubmitEditing`](textinput.md#onsubmitediting) -* [`autoCorrect`](textinput.md#autocorrect) -* [`placeholderTextColor`](textinput.md#placeholdertextcolor) -* [`returnKeyType`](textinput.md#returnkeytype) -* [`secureTextEntry`](textinput.md#securetextentry) -* [`selectTextOnFocus`](textinput.md#selecttextonfocus) -* [`selectionColor`](textinput.md#selectioncolor) -* [`style`](textinput.md#style) -* [`value`](textinput.md#value) -* [`numberOfLines`](textinput.md#numberoflines) -* [`returnKeyLabel`](textinput.md#returnkeylabel) -* [`underlineColorAndroid`](textinput.md#underlinecolorandroid) -* [`clearButtonMode`](textinput.md#clearbuttonmode) -* [`clearTextOnFocus`](textinput.md#cleartextonfocus) -* [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) -* [`keyboardAppearance`](textinput.md#keyboardappearance) -* [`onKeyPress`](textinput.md#onkeypress) -* [`selectionState`](textinput.md#selectionstate) - -### Methods - -- [`isFocused`](textinput.md#isfocused) -- [`clear`](textinput.md#clear) - ---- - -# Reference - -## Props - -### `placeholder` - -The string that will be rendered before text input has been entered - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `autoCapitalize` - -Can tell TextInput to automatically capitalize certain characters. - -- characters: all characters, -- words: first letter of each word -- sentences: first letter of each sentence (default) -- none: don't auto capitalize anything - -| Type | Required | -| ------------------------------------------------ | -------- | -| enum('none', 'sentences', 'words', 'characters') | No | - ---- - -### `autoFocus` - -If true, focuses the input on componentDidMount. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `blurOnSubmit` - -If true, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting blurOnSubmit to true means that pressing return will blur the field and trigger the onSubmitEditing event instead of inserting a newline into the field. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `defaultValue` - -Provides an initial value that will change when the user starts typing. Useful for use-cases where you don't want to deal with listening to events and updating the value prop to keep the controlled state in sync. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `editable` - -If false, text is not editable. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `keyboardType` - -Determines which keyboard to open, e.g.`numeric`. - -The following values work across platforms: - -- default -- numeric -- email-address - -| Type | Required | -| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | - ---- - -### `maxLength` - -Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `multiline` - -If true, the text input can be multiple lines. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onBlur` - -Callback that is called when the text input is blurred - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChange` - -Callback that is called when the text input's text changes. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChangeText` - -Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onEndEditing` - -Callback that is called when text input ends. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onFocus` - -Callback that is called when the text input is focused - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{x, y, width, height}`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onSelectionChange` - -Callback that is called when the text input selection is changed - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onSubmitEditing` - -Callback that is called when the text input's submit button is pressed. Invalid if multiline={true} is specified. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `autoCorrect` - -If false, disables auto-correct. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `placeholderTextColor` - -The text color of the placeholder string - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `returnKeyType` - -Determines how the return key should look. On Android you can also use `returnKeyLabel`. - -The following values work across platforms: - -- done -- go -- next -- search -- send - -The following values work on Android only: - -- none -- previous - -The following values work on iOS only: - -- default -- emergency-call -- google -- join -- route -- yahoo - -| Type | Required | -| --------------------------------------------------------------------------------------------------------------------------------- | -------- | -| enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') | No | - ---- - -### `secureTextEntry` - -If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `selectTextOnFocus` - -If true, all text will automatically be selected on focus - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `selectionColor` - -The highlight (and cursor on ios) color of the text input - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `style` - -Styles - -| Type | Required | -| --------------------- | -------- | -| [Text](text.md#style) | No | - ---- - -### `value` - -The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `numberOfLines` - -Sets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | Android | - ---- - -### `returnKeyLabel` - -Sets the return key to the label. Use it instead of `returnKeyType`. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `underlineColorAndroid` - -The color of the textInput underline. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `clearButtonMode` - -When the clear button should appear on the right side of the text view - -| Type | Required | Platform | -| ---------------------------------------------------------- | -------- | -------- | -| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | - ---- - -### `clearTextOnFocus` - -If true, clears the text field automatically when editing begins - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `enablesReturnKeyAutomatically` - -If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `keyboardAppearance` - -Determines the color of the keyboard. - -| Type | Required | Platform | -| -------------------------------- | -------- | -------- | -| enum('default', 'light', 'dark') | No | iOS | - ---- - -### `onKeyPress` - -Callback that is called when a key is pressed. Pressed key value is passed as an argument to the callback handler. Fires before onChange callbacks. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `selectionState` - -See DocumentSelectionState.js, some state that is responsible for maintaining selection information for a document - -| Type | Required | Platform | -| ---------------------- | -------- | -------- | -| DocumentSelectionState | No | iOS | - -## Methods - -### `isFocused()` - -```jsx -isFocused(): -``` - -Returns if the input is currently focused. - ---- - -### `clear()` - -```jsx -clear(); -``` - -Removes all text from the input. diff --git a/website/versioned_docs/version-0.27/viewpagerandroid.md b/website/versioned_docs/version-0.27/viewpagerandroid.md deleted file mode 100644 index 37771f90d78..00000000000 --- a/website/versioned_docs/version-0.27/viewpagerandroid.md +++ /dev/null @@ -1,181 +0,0 @@ ---- -id: version-0.27-viewpagerandroid -title: ViewPagerAndroid -original_id: viewpagerandroid ---- - -Container that allows to flip left and right between child views. Each child view of the `ViewPagerAndroid` will be treated as a separate page and will be stretched to fill the `ViewPagerAndroid`. - -It is important all children are ``s and not composite components. You can set style properties like `padding` or `backgroundColor` for each child. - -Example: - -``` -render: function() { - return ( - - - First page - - - Second page - - - ); -} - -... - -var styles = { - ... - pageStyle: { - alignItems: 'center', - padding: 20, - } -} -``` - -### Props - -- [View props...](view.md#props) - -* [`initialPage`](viewpagerandroid.md#initialpage) -* [`keyboardDismissMode`](viewpagerandroid.md#keyboarddismissmode) -* [`onPageScroll`](viewpagerandroid.md#onpagescroll) -* [`onPageScrollStateChanged`](viewpagerandroid.md#onpagescrollstatechanged) -* [`onPageSelected`](viewpagerandroid.md#onpageselected) -* [`pageMargin`](viewpagerandroid.md#pagemargin) -* [`scrollEnabled`](viewpagerandroid.md#scrollenabled) - -### Methods - -- [`setPage`](viewpagerandroid.md#setpage) -- [`setPageWithoutAnimation`](viewpagerandroid.md#setpagewithoutanimation) - -### Type Definitions - -- [`ViewPagerScrollState`](viewpagerandroid.md#viewpagerscrollstate) - ---- - -# Reference - -## Props - -### `initialPage` - -Index of initial page that should be selected. Use `setPage` method to update the page, and `onPageSelected` to monitor page changes - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. - -| Type | Required | -| ----------------------- | -------- | -| enum('none', 'on-drag') | No | - ---- - -### `onPageScroll` - -Executed when transitioning between pages (ether because of animation for the requested page change or when user is swiping/dragging between pages) The `event.nativeEvent` object for this callback will carry following data: - -- position - index of first page from the left that is currently visible -- offset - value from range [0,1) describing stage between page transitions. Value x means that (1 - x) fraction of the page at "position" index is visible, and x fraction of the next page is visible. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPageScrollStateChanged` - -Function called when the page scrolling state has changed. The page scrolling state can be in 3 states: - -- idle, meaning there is no interaction with the page scroller happening at the time -- dragging, meaning there is currently an interaction with the page scroller -- settling, meaning that there was an interaction with the page scroller, and the page scroller is now finishing it's closing or opening animation - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPageSelected` - -This callback will be called once ViewPager finish navigating to selected page (when user swipes between pages). The `event.nativeEvent` object passed to this callback will have following fields: - -- position - index of page that has been selected - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `pageMargin` - -Blank space to show between pages. This is only visible while scrolling, pages are still edge-to-edge. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `scrollEnabled` - -When false, the content does not scroll. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - -## Methods - -### `setPage()` - -```jsx -setPage((selectedPage: number)); -``` - -A helper function to scroll to a specific page in the ViewPager. The transition between pages will be animated. - ---- - -### `setPageWithoutAnimation()` - -```jsx -setPageWithoutAnimation((selectedPage: number)); -``` - -A helper function to scroll to a specific page in the ViewPager. The transition between pages will _not_ be animated. - -## Type Definitions - -### ViewPagerScrollState - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| -------- | ----------- | -| idle | | -| dragging | | -| settling | | diff --git a/website/versioned_docs/version-0.28/actionsheetios.md b/website/versioned_docs/version-0.28/actionsheetios.md deleted file mode 100644 index 0cf8a369f33..00000000000 --- a/website/versioned_docs/version-0.28/actionsheetios.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: version-0.28-actionsheetios -title: ActionSheetIOS -original_id: actionsheetios ---- - -### Methods - -- [`showActionSheetWithOptions`](actionsheetios.md#showactionsheetwithoptions) -- [`showShareActionSheetWithOptions`](actionsheetios.md#showshareactionsheetwithoptions) - ---- - -# Reference - -## Methods - -### `showActionSheetWithOptions()` - -```jsx -static showActionSheetWithOptions(options, callback) -``` - -Display an iOS action sheet. The `options` object must contain one or more of: - -- `options` (array of strings) - a list of button titles (required) -- `cancelButtonIndex` (int) - index of cancel button in `options` -- `destructiveButtonIndex` (int) - index of destructive button in `options` -- `title` (string) - a title to show above the action sheet -- `message` (string) - a message to show below the title - ---- - -### `showShareActionSheetWithOptions()` - -```jsx -static showShareActionSheetWithOptions(options, failureCallback, successCallback) -``` - -Display the iOS share sheet. The `options` object should contain one or both of `message` and `url` and can additionally have a `subject` or `excludedActivityTypes`: - -- `url` (string) - a URL to share -- `message` (string) - a message to share -- `subject` (string) - a subject for the message -- `excludedActivityTypes` (array) - the activites to exclude from the ActionSheet - -NOTE: if `url` points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc. diff --git a/website/versioned_docs/version-0.28/activityindicator.md b/website/versioned_docs/version-0.28/activityindicator.md deleted file mode 100644 index 421b7f827f6..00000000000 --- a/website/versioned_docs/version-0.28/activityindicator.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: version-0.28-activityindicator -title: ActivityIndicator -original_id: activityindicator ---- - -Displays a circular loading indicator. - -### Props - -- [View props...](view.md#props) - -* [`animating`](activityindicator.md#animating) -* [`color`](activityindicator.md#color) -* [`size`](activityindicator.md#size) -* [`hidesWhenStopped`](activityindicator.md#hideswhenstopped) - ---- - -# Reference - -## Props - -### `animating` - -Whether to show the indicator (true, the default) or hide it (false). - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `color` - -The foreground color of the spinner (default is gray). - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `size` - -Size of the indicator. Small has a height of 20, large has a height of 36. Other sizes can be obtained using a scale transform. - -| Type | Required | -| ---------------------- | -------- | -| enum('small', 'large') | No | - ---- - -### `hidesWhenStopped` - -Whether the indicator should hide when not animating (true by default). - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | diff --git a/website/versioned_docs/version-0.28/appstate.md b/website/versioned_docs/version-0.28/appstate.md deleted file mode 100644 index 1714de4298b..00000000000 --- a/website/versioned_docs/version-0.28/appstate.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: version-0.28-appstate -title: AppState -original_id: appstate ---- - -`AppState` can tell you if the app is in the foreground or background, and notify you when the state changes. - -AppState is frequently used to determine the intent and proper behavior when handling push notifications. - -### App States - -- `active` - The app is running in the foreground -- `background` - The app is running in the background. The user is either in another app or on the home screen -- `inactive` - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the Multitasking view or in the event of an incoming call - -For more information, see [Apple's documentation](https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/TheAppLifeCycle/TheAppLifeCycle.html) - -### Basic Usage - -To see the current state, you can check `AppState.currentState`, which will be kept up-to-date. However, `currentState` will be null at launch while `AppState` retrieves it over the bridge. - -``` -getInitialState: function() { - return { - currentAppState: AppState.currentState, - }; -}, -componentDidMount: function() { - AppState.addEventListener('change', this._handleAppStateChange); -}, -componentWillUnmount: function() { - AppState.removeEventListener('change', this._handleAppStateChange); -}, -_handleAppStateChange: function(currentAppState) { - this.setState({ currentAppState, }); -}, -render: function() { - return ( - Current state is: {this.state.currentAppState} - ); -}, -``` - -This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the `active` state, and the null state will happen only momentarily. - -### Methods - -- [`addEventListener`](appstate.md#addeventlistener) -- [`removeEventListener`](appstate.md#removeeventlistener) - -### Properties - -- [`currentState`](appstate.md#currentstate) - ---- - -# Reference - -## Methods - -### `addEventListener()` - -```jsx -addEventListener(type, handler); -``` - -Add a handler to AppState changes by listening to the `change` event type and providing the handler - -**Parameters:** - -| Name | Type | Required | Description | -| ------- | -------- | -------- | ----------- | -| type | string | Yes | | -| handler | function | Yes | | - - - ---- - -### `removeEventListener()` - -```jsx -removeEventListener(type, handler); -``` - -Remove a handler by passing the `change` event type and the handler - -**Parameters:** - -| Name | Type | Required | Description | -| ------- | -------- | -------- | ----------- | -| type | string | Yes | | -| handler | function | Yes | | - -## Properties - -### `currentState` - -```jsx -AppState.currentState; -``` diff --git a/website/versioned_docs/version-0.28/asyncstorage.md b/website/versioned_docs/version-0.28/asyncstorage.md deleted file mode 100644 index 28f9ebdc960..00000000000 --- a/website/versioned_docs/version-0.28/asyncstorage.md +++ /dev/null @@ -1,263 +0,0 @@ ---- -id: version-0.28-asyncstorage -title: AsyncStorage -original_id: asyncstorage ---- - -AsyncStorage is an asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage. - -It is recommended that you use an abstraction on top of AsyncStorage instead of AsyncStorage directly for anything more than light usage since it operates globally. - -On iOS, AsyncStorage is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android, AsyncStorage will use either RocksDB or SQLite based on what is available. This JS code is a facade that provides a clear JS API, real Error objects, and non-multi functions. Each method returns a `Promise` object. - -### Methods - -- [`getItem`](asyncstorage.md#getitem) -- [`setItem`](asyncstorage.md#setitem) -- [`removeItem`](asyncstorage.md#removeitem) -- [`mergeItem`](asyncstorage.md#mergeitem) -- [`clear`](asyncstorage.md#clear) -- [`getAllKeys`](asyncstorage.md#getallkeys) -- [`flushGetRequests`](asyncstorage.md#flushgetrequests) -- [`multiGet`](asyncstorage.md#multiget) -- [`multiSet`](asyncstorage.md#multiset) -- [`multiRemove`](asyncstorage.md#multiremove) -- [`multiMerge`](asyncstorage.md#multimerge) - -### Properties - ---- - -# Reference - -## Methods - -### `getItem()` - -```jsx -static getItem(key, callback?) -``` - -Fetches `key` and passes the result to `callback`, along with an `Error` if there is any. Returns a `Promise` object. - ---- - -### `setItem()` - -```jsx -static setItem(key, value, callback?) -``` - -Sets `value` for `key` and calls `callback` on completion, along with an `Error` if there is any. Returns a `Promise` object. - ---- - -### `removeItem()` - -```jsx -static removeItem(key, callback?) -``` - -Returns a `Promise` object. - ---- - -### `mergeItem()` - -```jsx -static mergeItem(key, value, callback?) -``` - -Merges existing value with input value, assuming they are stringified json. Returns a `Promise` object. Not supported by all native implementations. - -Example: - -```jsx -let UID123_object = { - name: 'Chris', - age: 30, - traits: { hair: 'brown', eyes: 'brown' } -}; - -// need only define what will be added or updated -let UID123_delta = { - age: 31, - traits: { eyes: 'blue', shoe_size: 10 } -}; - -AsyncStorage.setItem( - 'UID123', - JSON.stringify(UID123_object), - () => { - AsyncStorage.mergeItem( - 'UID123', - JSON.stringify(UID123_delta), - () => { - AsyncStorage.getItem('UID123', (err, result) => { - console.log(result); - // => {'name':'Chris','age':31,'traits':{'shoe_size':10,'hair':'brown','eyes':'blue'}} - }); - } - ); - } -); -``` - ---- - -### `clear()` - -```jsx -static clear(callback?) -``` - -Erases _all_ AsyncStorage for all clients, libraries, etc. You probably don't want to call this - use removeItem or multiRemove to clear only your own keys instead. Returns a `Promise` object. - ---- - -### `getAllKeys()` - -```jsx -static getAllKeys(callback?) -``` - -Gets _all_ keys known to the app, for all callers, libraries, etc. Returns a `Promise` object. - -Example: see multiGet for example - ---- - -### `flushGetRequests()` - -```jsx -static flushGetRequests() -``` - -Flushes any pending requests using a single multiget - ---- - -### `multiGet()` - -```jsx -static multiGet(keys, callback?) -``` - -multiGet invokes callback with an array of key-value pair arrays that matches the input format of multiSet. Returns a `Promise` object. - -multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']]) - -Example: - -```jsx -AsyncStorage.getAllKeys((err, keys) => { - AsyncStorage.multiGet(keys, (err, stores) => { - stores.map((result, i, store) => { - // get at each store's key/value so you can work with it - let key = store[i][0]; - let value = store[i][1]; - }); - }); -}); -``` - ---- - -### `multiSet()` - -```jsx -static multiSet(keyValuePairs, callback?) -``` - -multiSet and multiMerge take arrays of key-value array pairs that match the output of multiGet, e.g. Returns a `Promise` object. - -multiSet([['k1', 'val1'], ['k2', 'val2']], cb); - -Example: see multiMerge for an example - ---- - -### `multiRemove()` - -```jsx -static multiRemove(keys, callback?) -``` - -Delete all the keys in the `keys` array. Returns a `Promise` object. - -Example: - -```jsx -let keys = ['k1', 'k2']; -AsyncStorage.multiRemove(keys, (err) => { - // keys k1 & k2 removed, if they existed - // do most stuff after removal (if you want) -}); -``` - ---- - -### `multiMerge()` - -```jsx -static multiMerge(keyValuePairs, callback?) -``` - -Merges existing values with input values, assuming they are stringified json. Returns a `Promise` object. - -Not supported by all native implementations. - -Example: - -```jsx -// first user, initial values -let UID234_object = { - name: 'Chris', - age: 30, - traits: { hair: 'brown', eyes: 'brown' } -}; - -// first user, delta values -let UID234_delta = { - age: 31, - traits: { eyes: 'blue', shoe_size: 10 } -}; - -// second user, initial values -let UID345_object = { - name: 'Marge', - age: 25, - traits: { hair: 'blonde', eyes: 'blue' } -}; - -// second user, delta values -let UID345_delta = { - age: 26, - traits: { eyes: 'green', shoe_size: 6 } -}; - -let multi_set_pairs = [ - ['UID234', JSON.stringify(UID234_object)], - ['UID345', JSON.stringify(UID345_object)] -]; -let multi_merge_pairs = [ - ['UID234', JSON.stringify(UID234_delta)], - ['UID345', JSON.stringify(UID345_delta)] -]; - -AsyncStorage.multiSet(multi_set_pairs, (err) => { - AsyncStorage.multiMerge(multi_merge_pairs, (err) => { - AsyncStorage.multiGet(['UID234', 'UID345'], (err, stores) => { - stores.map((result, i, store) => { - let key = store[i][0]; - let val = store[i][1]; - console.log(key, val); - // => UID234 {"name":"Chris","age":31,"traits":{"shoe_size":10,"hair":"brown","eyes":"blue"}} - // => UID345 {"name":"Marge","age":26,"traits":{"shoe_size":6,"hair":"blonde","eyes":"green"}} - }); - }); - }); -}); -``` - -## Properties diff --git a/website/versioned_docs/version-0.28/image.md b/website/versioned_docs/version-0.28/image.md deleted file mode 100644 index 75475896a9e..00000000000 --- a/website/versioned_docs/version-0.28/image.md +++ /dev/null @@ -1,274 +0,0 @@ ---- -id: version-0.28-image -title: Image -original_id: image ---- - -A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. - -Example usage: - -``` -renderImages: function() { - return ( - - - - - ); -}, -``` - -### Props - -- [`testID`](image.md#testid) -- [`onLayout`](image.md#onlayout) -- [`onLoadEnd`](image.md#onloadend) -- [`onLoadStart`](image.md#onloadstart) -- [`resizeMode`](image.md#resizemode) -- [`source`](image.md#source) -- [`style`](image.md#style) -- [`onLoad`](image.md#onload) -- [`accessibilityLabel`](image.md#accessibilitylabel) -- [`accessible`](image.md#accessible) -- [`blurRadius`](image.md#blurradius) -- [`capInsets`](image.md#capinsets) -- [`defaultSource`](image.md#defaultsource) -- [`onError`](image.md#onerror) -- [`onProgress`](image.md#onprogress) - -### Methods - -- [`getSize`](image.md#getsize) -- [`prefetch`](image.md#prefetch) - ---- - -# Reference - -## Props - -### `testID` - -A unique identifier for this element to be used in UI Automation testing scripts. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{nativeEvent: {layout: {x, y, width, height}}}`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadEnd` - -Invoked when load either succeeds or fails - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadStart` - -Invoked on load start - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `resizeMode` - -Determines how to resize the image when the frame doesn't match the raw image dimensions. - -'cover': Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding). - -'contain': Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). - -'stretch': Scale width and height independently, This may change the aspect ratio of the src. - -| Type | Required | -| ----------------------------------- | -------- | -| enum('cover', 'contain', 'stretch') | No | - ---- - -### `source` - -The image source (either a remote URL or a local file resource). - -| Type | Required | -| ------------------- | -------- | -| ImageSourcePropType | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Shadow Props...](shadow-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderTopRightRadius`**: number - -- **`backfaceVisibility`**: enum('visible', 'hidden') - -- **`borderBottomLeftRadius`**: number - -- **`borderBottomRightRadius`**: number - -- **`borderColor`**: [color](colors.md) - -- **`borderRadius`**: number - -- **`borderTopLeftRadius`**: number - -- **`backgroundColor`**: [color](colors.md) - -- **`borderWidth`**: number - -- **`opacity`**: number - -- **`overflow`**: enum('visible', 'hidden') - -- **`resizeMode`**: Object.keys(ImageResizeMode) - -- **`tintColor`**: [color](colors.md) - - Changes the color of all the non-transparent pixels to the tintColor. - -- **`overlayColor`**: string (_Android_) - - When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners: - - - Certain resize modes, such as 'contain' - - Animated GIFs - - A typical way to use this prop is with images displayed on a solid background and setting the `overlayColor` to the same color as the background. - - For details of how this works under the hood, see http://frescolib.org/rounded-corners-and-circles.md - ---- - -### `onLoad` - -Invoked when load completes successfully - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `accessibilityLabel` - -The text that's read by the screen reader when the user interacts with the image. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | iOS | - ---- - -### `accessible` - -When true, indicates the image is an accessibility element. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `blurRadius` - -blurRadius: the blur radius of the blur filter added to the image - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `capInsets` - -When the image is resized, the corners of the size specified by capInsets will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info on [Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets) - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `defaultSource` - -A static image to display while loading the image source. - -| Type | Required | Platform | -| ------------------------------------------------------------------------- | -------- | -------- | -| object: {uri: string,width: number,height: number,scale: number}, ,number | No | iOS | - ---- - -### `onError` - -Invoked on load error with `{nativeEvent: {error}}` - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `onProgress` - -Invoked on download progress with `{nativeEvent: {loaded, total}}` - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - -## Methods - -### `getSize()` - -```jsx -static getSize(uri: string, success: function, failure: function) -``` - -Retrieve the width and height (in pixels) of an image prior to displaying it. This method can fail if the image cannot be found, or fails to download. - -In order to retrieve the image dimensions, the image may first need to be loaded or downloaded, after which it will be cached. This means that in principle you could use this method to preload images, however it is not optimized for that purpose, and may in future be implemented in a way that does not fully load/download the image data. A proper, supported way to preload images will be provided as a separate API. - ---- - -### `prefetch()` - -```jsx -static prefetch(url: string) -``` - -Prefetches a remote image for later use by downloading it to the disk cache diff --git a/website/versioned_docs/version-0.28/linking.md b/website/versioned_docs/version-0.28/linking.md deleted file mode 100644 index 466aa81b9f0..00000000000 --- a/website/versioned_docs/version-0.28/linking.md +++ /dev/null @@ -1,174 +0,0 @@ ---- -id: version-0.28-linking -title: Linking -original_id: linking ---- - -`Linking` gives you a general interface to interact with both incoming and outgoing app links. - -### Basic Usage - -#### Handling deep links - -If your app was launched from an external url registered to your app you can access and handle it from any component you want with - -``` -componentDidMount() { - var url = Linking.getInitialURL().then((url) => { - if (url) { - console.log('Initial url is: ' + url); - } - }).catch(err => console.error('An error occurred', err)); -} -``` - -NOTE: For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters). - -If you wish to receive the intent in an existing instance of MainActivity, you may set the `launchMode` of MainActivity to `singleTask` in `AndroidManifest.xml`. See [``](http://developer.android.com/guide/topics/manifest/activity-element.html) documentation for more information. - -``` - -``` - -NOTE: On iOS you'll need to link `RCTLinking` to your project by following the steps described [here](linking-libraries-ios.md#manual-linking). In case you also want to listen to incoming app links during your app's execution you'll need to add the following lines to you `*AppDelegate.m`: - -``` -#import "RCTLinkingManager.h" - -- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url - sourceApplication:(NSString *)sourceApplication annotation:(id)annotation -{ - return [RCTLinkingManager application:application openURL:url - sourceApplication:sourceApplication annotation:annotation]; -} - -// Only if your app is using [Universal Links](https://developer.apple.com/library/prerelease/ios/documentation/General/Conceptual/AppSearch/UniversalLinks.html). -- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity - restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler -{ - return [RCTLinkingManager application:application - continueUserActivity:userActivity - restorationHandler:restorationHandler]; -} -``` - -And then on your React component you'll be able to listen to the events on `Linking` as follows - -``` -componentDidMount() { - Linking.addEventListener('url', this._handleOpenURL); -}, -componentWillUnmount() { - Linking.removeEventListener('url', this._handleOpenURL); -}, -_handleOpenURL(event) { - console.log(event.url); -} -``` - -#### Opening external links - -To start the corresponding activity for a link (web URL, email, contact etc.), call - -``` -Linking.openURL(url).catch(err => console.error('An error occurred', err)); -``` - -If you want to check if any installed app can handle a given URL beforehand you can call - -``` -Linking.canOpenURL(url).then(supported => { - if (!supported) { - console.log('Can\'t handle url: ' + url); - } else { - return Linking.openURL(url); - } -}).catch(err => console.error('An error occurred', err)); -``` - -### Methods - -- [`constructor`](linking.md#constructor) -- [`addEventListener`](linking.md#addeventlistener) -- [`removeEventListener`](linking.md#removeeventlistener) -- [`openURL`](linking.md#openurl) -- [`canOpenURL`](linking.md#canopenurl) -- [`getInitialURL`](linking.md#getinitialurl) - ---- - -# Reference - -## Methods - -### `constructor()` - -```jsx -constructor(); -``` - ---- - -### `addEventListener()` - -```jsx -addEventListener(type, handler); -``` - -Add a handler to Linking changes by listening to the `url` event type and providing the handler - ---- - -### `removeEventListener()` - -```jsx -removeEventListener(type, handler); -``` - -Remove a handler by passing the `url` event type and the handler - ---- - -### `openURL()` - -```jsx -openURL(url); -``` - -Try to open the given `url` with any of the installed apps. - -You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386"), a contact, or any other URL that can be opened with the installed apps. - -NOTE: This method will fail if the system doesn't know how to open the specified URL. If you're passing in a non-http(s) URL, it's best to check {@code canOpenURL} first. - -NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly! - ---- - -### `canOpenURL()` - -```jsx -canOpenURL(url); -``` - -Determine whether or not an installed app can handle a given URL. - -NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly! - -NOTE: As of iOS 9, your app needs to provide the `LSApplicationQueriesSchemes` key inside `Info.plist` or canOpenURL will always return false. - -@param URL the URL to open - ---- - -### `getInitialURL()` - -```jsx -getInitialURL(); -``` - -If the app launch was triggered by an app link, it will give the link url, otherwise it will give `null` - -NOTE: To support deep linking on Android, refer http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents diff --git a/website/versioned_docs/version-0.28/pushnotificationios.md b/website/versioned_docs/version-0.28/pushnotificationios.md deleted file mode 100644 index 9412735fa57..00000000000 --- a/website/versioned_docs/version-0.28/pushnotificationios.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: version-0.28-pushnotificationios -title: PushNotificationIOS -original_id: pushnotificationios ---- - -Handle push notifications for your app, including permission handling and icon badge number. - -To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). - -[Manually link](linking-libraries-ios.md#manual-linking) the PushNotificationIOS library - -- Be sure to add the following to your `Header Search Paths`: `$(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS` -- Set the search to `recursive` - -Finally, to enable support for `notification` and `register` events you need to augment your AppDelegate. - -At the top of your `AppDelegate.m`: - -`#import "RCTPushNotificationManager.h"` - -And then in your AppDelegate implementation add the following: - -``` - // Required to register for notifications - - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings - { - [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings]; - } - // Required for the register event. - - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken - { - [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; - } - // Required for the notification event. - - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification - { - [RCTPushNotificationManager didReceiveRemoteNotification:notification]; - } - // Required for the localNotification event. - - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification - { - [RCTPushNotificationManager didReceiveLocalNotification:notification]; - } -``` - -### Methods - -- [`presentLocalNotification`](pushnotificationios.md#presentlocalnotification) -- [`scheduleLocalNotification`](pushnotificationios.md#schedulelocalnotification) -- [`cancelAllLocalNotifications`](pushnotificationios.md#cancelalllocalnotifications) -- [`setApplicationIconBadgeNumber`](pushnotificationios.md#setapplicationiconbadgenumber) -- [`getApplicationIconBadgeNumber`](pushnotificationios.md#getapplicationiconbadgenumber) -- [`cancelLocalNotifications`](pushnotificationios.md#cancellocalnotifications) -- [`addEventListener`](pushnotificationios.md#addeventlistener) -- [`removeEventListener`](pushnotificationios.md#removeeventlistener) -- [`requestPermissions`](pushnotificationios.md#requestpermissions) -- [`abandonPermissions`](pushnotificationios.md#abandonpermissions) -- [`checkPermissions`](pushnotificationios.md#checkpermissions) -- [`popInitialNotification`](pushnotificationios.md#popinitialnotification) -- [`getInitialNotification`](pushnotificationios.md#getinitialnotification) -- [`constructor`](pushnotificationios.md#constructor) -- [`getMessage`](pushnotificationios.md#getmessage) -- [`getSound`](pushnotificationios.md#getsound) -- [`getAlert`](pushnotificationios.md#getalert) -- [`getBadgeCount`](pushnotificationios.md#getbadgecount) -- [`getData`](pushnotificationios.md#getdata) - ---- - -# Reference - -## Methods - -### `presentLocalNotification()` - -```jsx -static presentLocalNotification(details) -``` - -Schedules the localNotification for immediate presentation. - -details is an object containing: - -- `alertBody` : The message displayed in the notification alert. -- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; -- `soundName` : The sound played when the notification is fired (optional). -- `category` : The category of this notification, required for actionable notifications (optional). -- `userInfo` : An optional object containing additional notification data. -- `applicationIconBadgeNumber` (optional) : The number to display as the app’s icon badge. The default value of this property is 0, which means that no badge is displayed. - ---- - -### `scheduleLocalNotification()` - -```jsx -static scheduleLocalNotification(details) -``` - -Schedules the localNotification for future presentation. - -details is an object containing: - -- `fireDate` : The date and time when the system should deliver the notification. -- `alertBody` : The message displayed in the notification alert. -- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; -- `soundName` : The sound played when the notification is fired (optional). -- `category` : The category of this notification, required for actionable notifications (optional). -- `userInfo` : An optional object containing additional notification data. -- `applicationIconBadgeNumber` (optional) : The number to display as the app’s icon badge. Setting the number to 0 removes the icon badge. - ---- - -### `cancelAllLocalNotifications()` - -```jsx -static cancelAllLocalNotifications() -``` - -Cancels all scheduled localNotifications - ---- - -### `setApplicationIconBadgeNumber()` - -```jsx -static setApplicationIconBadgeNumber(number) -``` - -Sets the badge number for the app icon on the home screen - ---- - -### `getApplicationIconBadgeNumber()` - -```jsx -static getApplicationIconBadgeNumber(callback) -``` - -Gets the current badge number for the app icon on the home screen - ---- - -### `cancelLocalNotifications()` - -```jsx -static cancelLocalNotifications(userInfo) -``` - -Cancel local notifications. - -Optionally restricts the set of canceled notifications to those notifications whose `userInfo` fields match the corresponding fields in the `userInfo` argument. - ---- - -### `addEventListener()` - -```jsx -static addEventListener(type, handler) -``` - -Attaches a listener to remote or local notification events while the app is running in the foreground or the background. - -Valid events are: - -- `notification` : Fired when a remote notification is received. The handler will be invoked with an instance of `PushNotificationIOS`. -- `localNotification` : Fired when a local notification is received. The handler will be invoked with an instance of `PushNotificationIOS`. -- `register`: Fired when the user registers for remote notifications. The handler will be invoked with a hex string representing the deviceToken. - ---- - -### `removeEventListener()` - -```jsx -static removeEventListener(type, handler) -``` - -Removes the event listener. Do this in `componentWillUnmount` to prevent memory leaks - ---- - -### `requestPermissions()` - -```jsx -static requestPermissions(permissions?) -``` - -Requests notification permissions from iOS, prompting the user's dialog box. By default, it will request all notification permissions, but a subset of these can be requested by passing a map of requested permissions. The following permissions are supported: - -- `alert` -- `badge` -- `sound` - -If a map is provided to the method, only the permissions with truthy values will be requested. - -This method returns a promise that will resolve when the user accepts, rejects, or if the permissions were previously rejected. The promise resolves to the current state of the permission. - ---- - -### `abandonPermissions()` - -```jsx -static abandonPermissions() -``` - -Unregister for all remote notifications received via Apple Push Notification service. - -You should call this method in rare circumstances only, such as when a new version of the app removes support for all types of remote notifications. Users can temporarily prevent apps from receiving remote notifications through the Notifications section of the Settings app. Apps unregistered through this method can always re-register. - ---- - -### `checkPermissions()` - -```jsx -static checkPermissions(callback) -``` - -See what push permissions are currently enabled. `callback` will be invoked with a `permissions` object: - -- `alert` :boolean -- `badge` :boolean -- `sound` :boolean - ---- - -### `popInitialNotification()` - -```jsx -static popInitialNotification() -``` - -DEPRECATED: An initial notification will be available if the app was cold-launched from a notification. - -The first caller of `popInitialNotification` will get the initial notification object, or `null`. Subsequent invocations will return null. - ---- - -### `getInitialNotification()` - -```jsx -static getInitialNotification() -``` - -If the app launch was triggered by a push notification, it will give the notification object, otherwise it will give `null` - ---- - -### `constructor()` - -```jsx -constructor(nativeNotif); -``` - -You will never need to instantiate `PushNotificationIOS` yourself. Listening to the `notification` event and invoking `popInitialNotification` is sufficient - ---- - -### `getMessage()` - -```jsx -getMessage(); -``` - -An alias for `getAlert` to get the notification's main message string - ---- - -### `getSound()` - -```jsx -getSound(); -``` - -Gets the sound string from the `aps` object - ---- - -### `getAlert()` - -```jsx -getAlert(); -``` - -Gets the notification's main message from the `aps` object - ---- - -### `getBadgeCount()` - -```jsx -getBadgeCount(); -``` - -Gets the badge count number from the `aps` object - ---- - -### `getData()` - -```jsx -getData(); -``` - -Gets the data object on the notif diff --git a/website/versioned_docs/version-0.28/scrollview.md b/website/versioned_docs/version-0.28/scrollview.md deleted file mode 100644 index 2fe170d3c31..00000000000 --- a/website/versioned_docs/version-0.28/scrollview.md +++ /dev/null @@ -1,534 +0,0 @@ ---- -id: version-0.28-scrollview -title: ScrollView -original_id: scrollview ---- - -Component that wraps platform ScrollView while providing integration with touch locking "responder" system. - -Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer `{flex: 1}` down the view stack can lead to errors here, which the element inspector can be utilized to debug. - -Doesn't yet support other contained responders from blocking this scroll view from becoming the responder. - -### Props - -- [View props...](view.md#props) - -* [`bounces`](scrollview.md#bounces) -* [`contentContainerStyle`](scrollview.md#contentcontainerstyle) -* [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) -* [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) -* [`onContentSizeChange`](scrollview.md#oncontentsizechange) -* [`onScroll`](scrollview.md#onscroll) -* [`pagingEnabled`](scrollview.md#pagingenabled) -* [`refreshControl`](scrollview.md#refreshcontrol) -* [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) -* [`scrollEnabled`](scrollview.md#scrollenabled) -* [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) -* [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) -* [`style`](scrollview.md#style) -* [`endFillColor`](scrollview.md#endfillcolor) -* [`scrollPerfTag`](scrollview.md#scrollperftag) -* [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) -* [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) -* [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) -* [`horizontal`](scrollview.md#horizontal) -* [`bouncesZoom`](scrollview.md#bounceszoom) -* [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) -* [`centerContent`](scrollview.md#centercontent) -* [`contentInset`](scrollview.md#contentinset) -* [`contentOffset`](scrollview.md#contentoffset) -* [`decelerationRate`](scrollview.md#decelerationrate) -* [`directionalLockEnabled`](scrollview.md#directionallockenabled) -* [`indicatorStyle`](scrollview.md#indicatorstyle) -* [`maximumZoomScale`](scrollview.md#maximumzoomscale) -* [`minimumZoomScale`](scrollview.md#minimumzoomscale) -* [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) -* [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) -* [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) -* [`scrollsToTop`](scrollview.md#scrollstotop) -* [`snapToAlignment`](scrollview.md#snaptoalignment) -* [`snapToInterval`](scrollview.md#snaptointerval) -* [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) -* [`zoomScale`](scrollview.md#zoomscale) - -### Methods - -- [`scrollTo`](scrollview.md#scrollto) -- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) - ---- - -# Reference - -## Props - -### `bounces` - -When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. When false, it disables all bouncing even if the `alwaysBounce*` props are true. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `contentContainerStyle` - -These styles will be applied to the scroll view content container which wraps all of the child views. Example: - -return ( ); ... const styles = StyleSheet.create({ contentContainer: { paddingVertical: 20 } }); - -| Type | Required | -| ------------------------------------ | -------- | -| StyleSheetPropType(View Style props) | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. -- 'interactive', the keyboard is dismissed interactively with the drag and moves in synchrony with the touch; dragging upwards cancels the dismissal. On android this is not supported and it will have the same behavior as 'none'. - -| Type | Required | -| -------------------------------------- | -------- | -| enum('none', 'interactive', 'on-drag') | No | - ---- - -### `keyboardShouldPersistTaps` - -When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the scroll view will not catch taps, and the keyboard will not dismiss automatically. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onContentSizeChange` - -Called when scrollable content view of the ScrollView changes. - -Handler function is passed the content width and content height as parameters: `(contentWidth, contentHeight)` - -It's implemented using onLayout handler attached to the content container which this ScrollView renders. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onScroll` - -Fires at most once per frame during scrolling. The frequency of the events can be controlled using the `scrollEventThrottle` prop. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `pagingEnabled` - -When true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `refreshControl` - -A RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView. - -See [RefreshControl](refreshcontrol.md). - -| Type | Required | -| ------- | -------- | -| element | No | - ---- - -### `removeClippedSubviews` - -Experimental: When true, offscreen child views (whose `overflow` value is `hidden`) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `scrollEnabled` - -When false, the content does not scroll. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsHorizontalScrollIndicator` - -When true, shows a horizontal scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsVerticalScrollIndicator` - -When true, shows a vertical scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Shadow Props...](shadow-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderRightColor`**: [color](colors.md) - -- **`backfaceVisibility`**: enum('visible', 'hidden') - -- **`borderBottomColor`**: [color](colors.md) - -- **`borderBottomLeftRadius`**: number - -- **`borderBottomRightRadius`**: number - -- **`borderBottomWidth`**: number - -- **`borderColor`**: [color](colors.md) - -- **`borderLeftColor`**: [color](colors.md) - -- **`borderLeftWidth`**: number - -- **`borderRadius`**: number - -- **`backgroundColor`**: [color](colors.md) - -- **`borderRightWidth`**: number - -- **`borderStyle`**: enum('solid', 'dotted', 'dashed') - -- **`borderTopColor`**: [color](colors.md) - -- **`borderTopLeftRadius`**: number - -- **`borderTopRightRadius`**: number - -- **`borderTopWidth`**: number - -- **`borderWidth`**: number - -- **`opacity`**: number - -- **`overflow`**: enum('visible', 'hidden') - -- **`elevation`**: number (_Android_) - - (Android-only) Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions. - ---- - -### `endFillColor` - -Sometimes a scrollview takes up more space than its content fills. When this is the case, this prop will fill the rest of the scrollview with a color to avoid setting a background and creating unnecessary overdraw. This is an advanced optimization that is not needed in the general case. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `scrollPerfTag` - -Tag used to log scroll performance on this scroll view. Will force momentum events to be turned on (see sendMomentumEvents). This doesn't do anything out of the box and you need to implement a custom native FpsListener for it to be useful. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `alwaysBounceHorizontal` - -When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself. The default value is true when `horizontal={true}` and false otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `alwaysBounceVertical` - -When true, the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself. The default value is false when `horizontal={true}` and true otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `automaticallyAdjustContentInsets` - -Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/ toolbar. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `horizontal` - -When true, the scroll view's children are arranged horizontally in a row instead of vertically in a column. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `bouncesZoom` - -When true, gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture end, otherwise the zoom will not exceed the limits. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `canCancelContentTouches` - -When false, once tracking starts, won't try to drag if the touch moves. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `centerContent` - -When true, the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `contentInset` - -The amount by which the scroll view content is inset from the edges of the scroll view. Defaults to `{top: 0, left: 0, bottom: 0, right: 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `contentOffset` - -Used to manually set the starting scroll offset. The default value is `{x: 0, y: 0}`. - -| Type | Required | Platform | -| ------------- | -------- | -------- | -| PointPropType | No | iOS | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use string shortcuts `"normal"` and `"fast"` which match the underlying iOS settings for `UIScrollViewDecelerationRateNormal` and `UIScrollViewDecelerationRateFast` respectively. - -- normal: 0.998 (the default) -- fast: 0.99 - -| Type | Required | Platform | -| ------------------------------- | -------- | -------- | -| enum('fast', 'normal'), ,number | No | iOS | - ---- - -### `directionalLockEnabled` - -When true, the ScrollView will try to lock to only vertical or horizontal scrolling while dragging. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `indicatorStyle` - -The style of the scroll indicators. - -- `default` (the default), same as `black`. -- `black`, scroll indicator is dark in color. This style is good against a light content background. -- `white`, scroll indicator is light in color. This style is good against a dark content background. - -| Type | Required | Platform | -| --------------------------------- | -------- | -------- | -| enum('default', 'black', 'white') | No | iOS | - ---- - -### `maximumZoomScale` - -The maximum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `minimumZoomScale` - -The minimum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `onScrollAnimationEnd` - -Called when a scrolling animation ends. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `scrollEventThrottle` - -This controls how often the scroll event will be fired while scrolling (as a time interval in ms). A lower number yields better accuracy for code that is tracking the scroll position, but can lead to scroll performance problems due to the volume of information being send over the bridge. You will not notice a difference between values set between 1-16 as the JS run loop is synced to the screen refresh rate. If you do not need precise scroll position tracking, set this value higher to limit the information being sent across the bridge. The default value is zero, which results in the scroll event being sent only once each time the view is scrolled. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `scrollIndicatorInsets` - -The amount by which the scroll view indicators are inset from the edges of the scroll view. This should normally be set to the same value as the `contentInset`. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `scrollsToTop` - -When true, the scroll view scrolls to top when the status bar is tapped. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `snapToAlignment` - -When `snapToInterval` is set, `snapToAlignment` will define the relationship of the snapping to the scroll view. - -- `start` (the default) will align the snap at the left (horizontal) or top (vertical) -- `center` will align the snap in the center -- `end` will align the snap at the right (horizontal) or bottom (vertical) - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| enum('start', 'center', 'end') | No | iOS | - ---- - -### `snapToInterval` - -When set, causes the scroll view to stop at multiples of the value of `snapToInterval`. This can be used for paginating through children that have lengths smaller than the scroll view. Used in combination with `snapToAlignment`. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `stickyHeaderIndices` - -An array of child indices determining which children get docked to the top of the screen when scrolling. For example, passing `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction with `horizontal={true}`. - -| Type | Required | Platform | -| --------------- | -------- | -------- | -| array of number | No | iOS | - ---- - -### `zoomScale` - -The current scale of the scroll view content. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - -## Methods - -### `scrollTo()` - -```jsx -scrollTo( - ([y]: number), - object, - ([x]: number), - ([animated]: boolean) -); -``` - -Scrolls to a given x, y offset, either immediately or with a smooth animation. - -Syntax: - -`scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})` - -Note: The weird argument signature is due to the fact that, for historical reasons, the function also accepts separate arguments as as alternative to the options object. This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED. - ---- - -### `scrollWithoutAnimationTo()` - -```jsx -scrollWithoutAnimationTo(y, x); -``` - -Deprecated, do not use. diff --git a/website/versioned_docs/version-0.28/tabbarios.md b/website/versioned_docs/version-0.28/tabbarios.md deleted file mode 100644 index 3c6cd1ede72..00000000000 --- a/website/versioned_docs/version-0.28/tabbarios.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: version-0.28-tabbarios -title: TabBarIOS -original_id: tabbarios ---- - -### Props - -- [View props...](view.md#props) - -* [`barTintColor`](tabbarios.md#bartintcolor) -* [`itemPositioning`](tabbarios.md#itempositioning) -* [`style`](tabbarios.md#style) -* [`tintColor`](tabbarios.md#tintcolor) -* [`translucent`](tabbarios.md#translucent) -* [`unselectedTintColor`](tabbarios.md#unselectedtintcolor) - ---- - -# Reference - -## Props - -### `barTintColor` - -Background color of the tab bar - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `itemPositioning` - -Specifies tab bar item positioning. Available values are: - -- fill - distributes items across the entire width of the tab bar -- center - centers item in the available tab bar space -- auto (default) - distributes items dynamically according to the user interface idiom. In a horizontally compact environment (e.g. iPhone 5) this value defaults to `fill`, in a horizontally regular one (e.g. iPad) it defaults to center. - -| Type | Required | -| ------------------------------ | -------- | -| enum('fill', 'center', 'auto') | No | - ---- - -### `style` - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `tintColor` - -Color of the currently selected tab icon - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `translucent` - -A Boolean value that indicates whether the tab bar is translucent - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `unselectedTintColor` - -Color of text on unselected tabs - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | diff --git a/website/versioned_docs/version-0.29/asyncstorage.md b/website/versioned_docs/version-0.29/asyncstorage.md deleted file mode 100644 index 7545f4da8d2..00000000000 --- a/website/versioned_docs/version-0.29/asyncstorage.md +++ /dev/null @@ -1,364 +0,0 @@ ---- -id: version-0.29-asyncstorage -title: AsyncStorage -original_id: asyncstorage ---- - -`AsyncStorage` is an asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage. - -It is recommended that you use an abstraction on top of `AsyncStorage` instead of `AsyncStorage` directly for anything more than light usage since it operates globally. - -On iOS, `AsyncStorage` is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android, `AsyncStorage` will use either [RocksDB](http://rocksdb.org/) or SQLite based on what is available. - -The `AsyncStorage` JavaScript code is a facade that provides a clear JavaScript API, real `Error` objects, and non-multi functions. Each method in the API returns a `Promise` object. - -Persisting data: - -``` -try { - await AsyncStorage.setItem('@MySuperStore:key', 'I like to save it.'); -} catch (error) { - // Error saving data -} -``` - -Fetching data: - -``` -try { - const value = await AsyncStorage.getItem('@MySuperStore:key'); - if (value !== null){ - // We have data!! - console.log(value); - } -} catch (error) { - // Error retrieving data -} -``` - -### Methods - -- [`getItem`](asyncstorage.md#getitem) -- [`setItem`](asyncstorage.md#setitem) -- [`removeItem`](asyncstorage.md#removeitem) -- [`mergeItem`](asyncstorage.md#mergeitem) -- [`clear`](asyncstorage.md#clear) -- [`getAllKeys`](asyncstorage.md#getallkeys) -- [`flushGetRequests`](asyncstorage.md#flushgetrequests) -- [`multiGet`](asyncstorage.md#multiget) -- [`multiSet`](asyncstorage.md#multiset) -- [`multiRemove`](asyncstorage.md#multiremove) -- [`multiMerge`](asyncstorage.md#multimerge) - ---- - -# Reference - -## Methods - -### `getItem()` - -```jsx -static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void) -``` - -Fetches an item for a `key` and invokes a callback upon completion. Returns a `Promise` object. - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | ------------------------------------------- | -------- | ----------------------------------------------------------------- | -| key | string | Yes | Key of the item to fetch. | -| callback | `?(error: ?Error, result: ?string) => void` | No | Function that will be called with a result if found or any error. | - ---- - -### `setItem()` - -```jsx -static setItem(key: string, value: string, [callback]: ?(error: ?Error) => void) -``` - -Sets the value for a `key` and invokes a callback upon completion. Returns a `Promise` object. - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | -------------------------- | -------- | -------------------------------------------- | -| key | string | Yes | Key of the item to set. | -| value | string | Yes | Value to set for the `key`. | -| callback | `?(error: ?Error) => void` | No | Function that will be called with any error. | - ---- - -### `removeItem()` - -```jsx -static removeItem(key: string, [callback]: ?(error: ?Error) => void) -``` - -Removes an item for a `key` and invokes a callback upon completion. Returns a `Promise` object. - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | -------------------------- | -------- | -------------------------------------------- | -| key | string | Yes | Key of the item to remove. | -| callback | `?(error: ?Error) => void` | No | Function that will be called with any error. | - ---- - -### `mergeItem()` - -```jsx -static mergeItem(key: string, value: string, [callback]: ?(error: ?Error) => void) -``` - -Merges an existing `key` value with an input value, assuming both values are stringified JSON. Returns a `Promise` object. - -**NOTE:** This is not supported by all native implementations. - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | -------------------------- | -------- | -------------------------------------------- | -| key | string | Yes | Key of the item to modify. | -| value | string | Yes | New value to merge for the `key`. | -| callback | `?(error: ?Error) => void` | No | Function that will be called with any error. | - -Example: - -```jsx -let UID123_object = { - name: 'Chris', - age: 30, - traits: { hair: 'brown', eyes: 'brown' } -}; -// You only need to define what will be added or updated -let UID123_delta = { - age: 31, - traits: { eyes: 'blue', shoe_size: 10 } -}; - -AsyncStorage.setItem( - 'UID123', - JSON.stringify(UID123_object), - () => { - AsyncStorage.mergeItem( - 'UID123', - JSON.stringify(UID123_delta), - () => { - AsyncStorage.getItem('UID123', (err, result) => { - console.log(result); - }); - } - ); - } -); - -// Console log result: -// => {'name':'Chris','age':31,'traits': -// {'shoe_size':10,'hair':'brown','eyes':'blue'}} -``` - ---- - -### `clear()` - -```jsx -static clear([callback]: ?(error: ?Error) => void) -``` - -Erases _all_ `AsyncStorage` for all clients, libraries, etc. You probably don't want to call this; use `removeItem` or `multiRemove` to clear only your app's keys. Returns a `Promise` object. - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | -------------------------- | -------- | -------------------------------------------- | -| callback | `?(error: ?Error) => void` | No | Function that will be called with any error. | - ---- - -### `getAllKeys()` - -```jsx -static getAllKeys([callback]: ?(error: ?Error, keys: ?Array) => void) -``` - -Gets _all_ keys known to your app; for all callers, libraries, etc. Returns a `Promise` object. - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | ------------------------------------------------ | -------- | ---------------------------------------------------------- | -| callback | `?(error: ?Error, keys: ?Array) => void` | No | Function that will be called the keys found and any error. | - ---- - -### `flushGetRequests()` - -```jsx -static flushGetRequests(): [object Object] -``` - -Flushes any pending requests using a single batch call to get the data. - ---- - -### `multiGet()` - -```jsx -static multiGet(keys: Array, [callback]: ?(errors: ?Array, result: ?Array>) => void) -``` - -This allows you to batch the fetching of items given an array of `key` inputs. Your callback will be invoked with an array of corresponding key-value pairs found: - -``` -multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']]) -``` - -The method returns a `Promise` object. - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | ----------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------- | -| keys | `Array` | Yes | Array of key for the items to get. | -| callback | `?(errors: ?Array, result: ?Array>) => void` | No | Function that will be called with a key-value array of the results, plus an array of any key-specific errors found. | - -Example: - -```jsx -AsyncStorage.getAllKeys((err, keys) => { - AsyncStorage.multiGet(keys, (err, stores) => { - stores.map((result, i, store) => { - // get at each store's key/value so you can work with it - let key = store[i][0]; - let value = store[i][1]; - }); - }); -}); -``` - ---- - -### `multiSet()` - -```jsx -static multiSet(keyValuePairs: Array>, [callback]: ?(errors: ?Array) => void) -``` - -Use this as a batch operation for storing multiple key-value pairs. When the operation completes you'll get a single callback with any errors: - -``` -multiSet([['k1', 'val1'], ['k2', 'val2']], cb); -``` - -The method returns a `Promise` object. - -**Parameters:** - -| Name | Type | Required | Description | -| ------------- | ---------------------------------- | -------- | ---------------------------------------------------------------------------- | -| keyValuePairs | `Array>` | Yes | Array of key-value array for the items to set. | -| callback | `?(errors: ?Array) => void` | No | Function that will be called with an array of any key-specific errors found. | - ---- - -### `multiRemove()` - -```jsx -static multiRemove(keys: Array, [callback]: ?(errors: ?Array) => void) -``` - -Call this to batch the deletion of all keys in the `keys` array. Returns a `Promise` object. - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | ---------------------------------- | -------- | ----------------------------------------------------------------------- | -| keys | `Array` | Yes | Array of key for the items to delete. | -| callback | `?(errors: ?Array) => void` | No | Function that will be called an array of any key-specific errors found. | - -Example: - -```jsx -let keys = ['k1', 'k2']; -AsyncStorage.multiRemove(keys, (err) => { - // keys k1 & k2 removed, if they existed - // do most stuff after removal (if you want) -}); -``` - ---- - -### `multiMerge()` - -```jsx -static multiMerge(keyValuePairs: Array>, [callback]: ?(errors: ?Array) => void) -``` - -Batch operation to merge in existing and new values for a given set of keys. This assumes that the values are stringified JSON. Returns a `Promise` object. - -**NOTE**: This is not supported by all native implementations. - -**Parameters:** - -| Name | Type | Required | Description | -| ------------- | ---------------------- | -------- | ------------------------------------------------ | -| keyValuePairs | `Array>` | Yes | Array of key-value array for the items to merge. | | callback | `?(errors: ?Array) => void` | No | Function that will be called with an array of any key-specific errors found. | - -Example: - -```jsx -// first user, initial values -let UID234_object = { - name: 'Chris', - age: 30, - traits: { hair: 'brown', eyes: 'brown' } -}; - -// first user, delta values -let UID234_delta = { - age: 31, - traits: { eyes: 'blue', shoe_size: 10 } -}; - -// second user, initial values -let UID345_object = { - name: 'Marge', - age: 25, - traits: { hair: 'blonde', eyes: 'blue' } -}; - -// second user, delta values -let UID345_delta = { - age: 26, - traits: { eyes: 'green', shoe_size: 6 } -}; - -let multi_set_pairs = [ - ['UID234', JSON.stringify(UID234_object)], - ['UID345', JSON.stringify(UID345_object)] -]; -let multi_merge_pairs = [ - ['UID234', JSON.stringify(UID234_delta)], - ['UID345', JSON.stringify(UID345_delta)] -]; - -AsyncStorage.multiSet(multi_set_pairs, (err) => { - AsyncStorage.multiMerge(multi_merge_pairs, (err) => { - AsyncStorage.multiGet(['UID234', 'UID345'], (err, stores) => { - stores.map((result, i, store) => { - let key = store[i][0]; - let val = store[i][1]; - console.log(key, val); - }); - }); - }); -}); - -// Console log results: -// => UID234 {"name":"Chris","age":31,"traits":{"shoe_size":10,"hair":"brown","eyes":"blue"}} -// => UID345 {"name":"Marge","age":26,"traits":{"shoe_size":6,"hair":"blonde","eyes":"green"}} -``` diff --git a/website/versioned_docs/version-0.29/cameraroll.md b/website/versioned_docs/version-0.29/cameraroll.md deleted file mode 100644 index 21fcba20893..00000000000 --- a/website/versioned_docs/version-0.29/cameraroll.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -id: version-0.29-cameraroll -title: CameraRoll -original_id: cameraroll ---- - -`CameraRoll` provides access to the local camera roll / gallery. - -### Methods - -- [`saveImageWithTag`](cameraroll.md#saveimagewithtag) -- [`saveToCameraRoll`](cameraroll.md#savetocameraroll) -- [`getPhotos`](cameraroll.md#getphotos) - ---- - -# Reference - -## Methods - -### `saveImageWithTag()` - -```jsx -static saveImageWithTag(tag) -``` - ---- - -### `saveToCameraRoll()` - -```jsx -static saveToCameraRoll(tag, type?) -``` - -Saves the photo or video to the camera roll / gallery. - -On Android, the tag must be a local image or video URI, such as `"file:///sdcard/img.png"`. - -On iOS, the tag can be any image URI (including local, remote asset-library and base64 data URIs) or a local video file URI (remote or data URIs are not supported for saving video at this time). - -If the tag has a file extension of .mov or .mp4, it will be inferred as a video. Otherwise it will be treated as a photo. To override the automatic choice, you can pass an optional `type` parameter that must be one of 'photo' or 'video'. - -Returns a Promise which will resolve with the new URI. - ---- - -### `getPhotos()` - -```jsx -static getPhotos(params) -``` - -Returns a Promise with photo identifier objects from the local camera roll of the device matching shape defined by `getPhotosReturnChecker`. - -@param {object} params See `getPhotosParamChecker`. - -Returns a Promise which when resolved will be of shape `getPhotosReturnChecker`. diff --git a/website/versioned_docs/version-0.29/image.md b/website/versioned_docs/version-0.29/image.md deleted file mode 100644 index c9761adbb90..00000000000 --- a/website/versioned_docs/version-0.29/image.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: version-0.29-image -title: Image -original_id: image ---- - -A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. - -This exmaples shows both fetching and displaying an image from local storage as well as on from network. - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, View, Image } from 'react-native'; - -class DisplayAnImage extends Component { - render() { - return ( - - - - - ); - } -} - -// App registration and rendering -AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage); -``` - -You can also add `style` to an image: - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, View, Image, StyleSheet} from 'react-native'; - -const styles = StyleSheet.create({ - stretch: { - width: 50, - height: 200 - } -}); - -class DisplayAnImageWithStyle extends Component { - render() { - return ( - - - - ); - } -} - -// App registration and rendering -AppRegistry.registerComponent( - 'DisplayAnImageWithStyle', - () => DisplayAnImageWithStyle -); -``` - -### Props - -- [`testID`](image.md#testid) -- [`onLayout`](image.md#onlayout) -- [`onLoadEnd`](image.md#onloadend) -- [`onLoadStart`](image.md#onloadstart) -- [`resizeMode`](image.md#resizemode) -- [`source`](image.md#source) -- [`style`](image.md#style) -- [`onLoad`](image.md#onload) -- [`accessibilityLabel`](image.md#accessibilitylabel) -- [`accessible`](image.md#accessible) -- [`blurRadius`](image.md#blurradius) -- [`capInsets`](image.md#capinsets) -- [`defaultSource`](image.md#defaultsource) -- [`onError`](image.md#onerror) -- [`onProgress`](image.md#onprogress) - -### Methods - -- [`getSize`](image.md#getsize) -- [`prefetch`](image.md#prefetch) - ---- - -# Reference - -## Props - -### `testID` - -A unique identifier for this element to be used in UI Automation testing scripts. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{nativeEvent: {layout: {x, y, width, height}}}`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadEnd` - -Invoked when load either succeeds or fails. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadStart` - -Invoked on load start. - -e.g., `onLoadStart={(e) => this.setState({loading: true})}` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `resizeMode` - -Determines how to resize the image when the frame doesn't match the raw image dimensions. - -- `cover`: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding). - -- `contain`: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). - -- `stretch`: Scale width and height independently, This may change the aspect ratio of the src. - -- `repeat`: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio. (iOS only) - -| Type | Required | -| ----------------------------------- | -------- | -| enum('cover', 'contain', 'stretch') | No | - ---- - -### `source` - -The image source (either a remote URL or a local file resource). - -| Type | Required | -| ------------------- | -------- | -| ImageSourcePropType | No | - ---- - -### `style` - -> `ImageResizeMode` is an `Enum` for different image resizing modes, set via the `resizeMode` style property on `Image` components. The values are `contain`, `cover`, `stretch`, `center`, `repeat`. - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Shadow Props...](shadow-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderTopRightRadius`**: number - -- **`backfaceVisibility`**: enum('visible', 'hidden') - -- **`borderBottomLeftRadius`**: number - -- **`borderBottomRightRadius`**: number - -- **`borderColor`**: [color](colors.md) - -- **`borderRadius`**: number - -- **`borderTopLeftRadius`**: number - -- **`backgroundColor`**: [color](colors.md) - -- **`borderWidth`**: number - -- **`opacity`**: number - -- **`overflow`**: enum('visible', 'hidden') - -- **`resizeMode`**: Object.keys(ImageResizeMode) - -- **`tintColor`**: [color](colors.md) - - Changes the color of all the non-transparent pixels to the tintColor. - -- **`overlayColor`**: string (_Android_) - - When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners: - - - Certain resize modes, such as 'contain' - - Animated GIFs - - A typical way to use this prop is with images displayed on a solid background and setting the `overlayColor` to the same color as the background. - - For details of how this works under the hood, see http://frescolib.org/rounded-corners-and-circles.md - ---- - -### `onLoad` - -Invoked when load completes successfully. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `accessibilityLabel` - -The text that's read by the screen reader when the user interacts with the image. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | iOS | - ---- - -### `accessible` - -When true, indicates the image is an accessibility element. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `blurRadius` - -blurRadius: the blur radius of the blur filter added to the image - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `capInsets` - -When the image is resized, the corners of the size specified by `capInsets` will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info in the [official Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets). - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `defaultSource` - -A static image to display while loading the image source. - -- `uri` - a string representing the resource identifier for the image, which should be either a local file path or the name of a static image resource (which should be wrapped in the `require('./path/to/image.png')` function). -- `width`, `height` - can be specified if known at build time, in which case these will be used to set the default `` component dimensions. -- `scale` - used to indicate the scale factor of the image. Defaults to 1.0 if unspecified, meaning that one image pixel equates to one display point / DIP. -- `number` - Opaque type returned by something like `require('./image.jpg')`. - -| Type | Required | Platform | -| ------------------------------------------------------------------------- | -------- | -------- | -| object: {uri: string,width: number,height: number,scale: number}, ,number | No | iOS | - ---- - -### `onError` - -Invoked on load error with `{nativeEvent: {error}}`. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `onProgress` - -Invoked on download progress with `{nativeEvent: {loaded, total}}`. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - -## Methods - -### `getSize()` - -```jsx -static getSize(uri: string, success: function, failure: function): -``` - -Retrieve the width and height (in pixels) of an image prior to displaying it. This method can fail if the image cannot be found, or fails to download. - -In order to retrieve the image dimensions, the image may first need to be loaded or downloaded, after which it will be cached. This means that in principle you could use this method to preload images, however it is not optimized for that purpose, and may in future be implemented in a way that does not fully load/download the image data. A proper, supported way to preload images will be provided as a separate API. - -**Parameters:** - -| Name | Type | Required | Description | -| ------- | -------- | -------- | -------------------------------------------------------------------------------------------------- | -| uri | string | Yes | The location of the image. | -| success | function | Yes | The function that will be called if the image was sucessfully found and widthand height retrieved. | -| failure | function | Yes | The function that will be called if there was an error, such as failing toto retrieve the image. | - ---- - -### `prefetch()` - -```jsx -static prefetch(url: string): -``` - -Prefetches a remote image for later use by downloading it to the disk cache - -**Parameters:** - -| Name | Type | Required | Description | -| ---- | ------ | -------- | --------------------------------- | -| url | string | Yes | The remote location of the image. | diff --git a/website/versioned_docs/version-0.29/interactionmanager.md b/website/versioned_docs/version-0.29/interactionmanager.md deleted file mode 100644 index 56d5ceb964a..00000000000 --- a/website/versioned_docs/version-0.29/interactionmanager.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: version-0.29-interactionmanager -title: InteractionManager -original_id: interactionmanager ---- - -InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly. - -Applications can schedule tasks to run after interactions with the following: - -``` -InteractionManager.runAfterInteractions(() => { - // ...long-running synchronous task... -}); -``` - -Compare this to other scheduling alternatives: - -- requestAnimationFrame(): for code that animates a view over time. -- setImmediate/setTimeout(): run code later, note this may delay animations. -- runAfterInteractions(): run code later, without delaying active animations. - -The touch handling system considers one or more active touches to be an 'interaction' and will delay `runAfterInteractions()` callbacks until all touches have ended or been cancelled. - -InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion: - -``` -var handle = InteractionManager.createInteractionHandle(); -// run animation... (`runAfterInteractions` tasks are queued) -// later, on animation completion: -InteractionManager.clearInteractionHandle(handle); -// queued tasks run if all handles were cleared -``` - -`runAfterInteractions` takes either a plain callback function, or a `PromiseTask` object with a `gen` method that returns a `Promise`. If a `PromiseTask` is supplied, then it is fully resolved (including asynchronous dependencies that also schedule more tasks via `runAfterInteractions`) before starting on the next task that might have been queued up synchronously earlier. - -By default, queued tasks are executed together in a loop in one `setImmediate` batch. If `setDeadline` is called with a positive number, then tasks will only be executed until the deadline (in terms of js event loop run time) approaches, at which point execution will yield via setTimeout, allowing events such as touches to start interactions and block queued tasks from executing, making apps more responsive. - -### Methods - -- [`runAfterInteractions`](interactionmanager.md#runafterinteractions) -- [`createInteractionHandle`](interactionmanager.md#createinteractionhandle) -- [`clearInteractionHandle`](interactionmanager.md#clearinteractionhandle) -- [`setDeadline`](interactionmanager.md#setdeadline) - -### Properties - -- [`Events`](interactionmanager.md#events) -- [`addListener`](interactionmanager.md#addlistener) - ---- - -# Reference - -## Methods - -### `runAfterInteractions()` - -```jsx -static runAfterInteractions(task) -``` - -Schedule a function to run after all interactions have completed. Returns a cancellable "promise". - ---- - -### `createInteractionHandle()` - -```jsx -static createInteractionHandle() -``` - -Notify manager that an interaction has started. - ---- - -### `clearInteractionHandle()` - -```jsx -static clearInteractionHandle(handle) -``` - -Notify manager that an interaction has completed. - ---- - -### `setDeadline()` - -```jsx -static setDeadline(deadline) -``` - -A positive number will use setTimeout to schedule any tasks after the eventLoopRunningTime hits the deadline value, otherwise all tasks will be executed in one setImmediate batch (default). - -## Properties - ---- diff --git a/website/versioned_docs/version-0.29/keyboardavoidingview.md b/website/versioned_docs/version-0.29/keyboardavoidingview.md deleted file mode 100644 index 061ef1590a9..00000000000 --- a/website/versioned_docs/version-0.29/keyboardavoidingview.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -id: version-0.29-keyboardavoidingview -title: KeyboardAvoidingView -original_id: keyboardavoidingview ---- - -### Props - -- [View props...](view.md#props) - -* [`keyboardVerticalOffset`](keyboardavoidingview.md#keyboardverticaloffset) -* [`behavior`](keyboardavoidingview.md#behavior) - -### Methods - -- [`relativeKeyboardHeight`](keyboardavoidingview.md#relativekeyboardheight) -- [`onKeyboardChange`](keyboardavoidingview.md#onkeyboardchange) -- [`onLayout`](keyboardavoidingview.md#onlayout) - ---- - -# Reference - -## Props - -### `keyboardVerticalOffset` - -This is the distance between the top of the user screen and the react native view, may be non-zero in some use cases. - -| Type | Required | -| ------ | -------- | -| number | Yes | - ---- - -### `behavior` - -| Type | Required | -| ------------------------------------- | -------- | -| enum('height', 'position', 'padding') | No | - -## Methods - -### `relativeKeyboardHeight()` - -```jsx -relativeKeyboardHeight(keyboardFrame: object): -``` - ---- - -### `onKeyboardChange()` - -```jsx -onKeyboardChange((event: object)); -``` - ---- - -### `onLayout()` - -```jsx -onLayout((event: object)); -``` diff --git a/website/versioned_docs/version-0.29/layout-props.md b/website/versioned_docs/version-0.29/layout-props.md deleted file mode 100644 index 5b11b94c8b7..00000000000 --- a/website/versioned_docs/version-0.29/layout-props.md +++ /dev/null @@ -1,471 +0,0 @@ ---- -id: version-0.29-layout-props -title: Layout Props -original_id: layout-props ---- - -### Props - -- [`marginRight`](layout-props.md#marginright) -- [`alignItems`](layout-props.md#alignitems) -- [`borderBottomWidth`](layout-props.md#borderbottomwidth) -- [`borderLeftWidth`](layout-props.md#borderleftwidth) -- [`borderRightWidth`](layout-props.md#borderrightwidth) -- [`borderTopWidth`](layout-props.md#bordertopwidth) -- [`borderWidth`](layout-props.md#borderwidth) -- [`bottom`](layout-props.md#bottom) -- [`flex`](layout-props.md#flex) -- [`flexDirection`](layout-props.md#flexdirection) -- [`flexWrap`](layout-props.md#flexwrap) -- [`height`](layout-props.md#height) -- [`justifyContent`](layout-props.md#justifycontent) -- [`left`](layout-props.md#left) -- [`margin`](layout-props.md#margin) -- [`marginBottom`](layout-props.md#marginbottom) -- [`marginHorizontal`](layout-props.md#marginhorizontal) -- [`marginLeft`](layout-props.md#marginleft) -- [`alignSelf`](layout-props.md#alignself) -- [`marginTop`](layout-props.md#margintop) -- [`marginVertical`](layout-props.md#marginvertical) -- [`maxHeight`](layout-props.md#maxheight) -- [`maxWidth`](layout-props.md#maxwidth) -- [`minHeight`](layout-props.md#minheight) -- [`minWidth`](layout-props.md#minwidth) -- [`padding`](layout-props.md#padding) -- [`paddingBottom`](layout-props.md#paddingbottom) -- [`paddingHorizontal`](layout-props.md#paddinghorizontal) -- [`paddingLeft`](layout-props.md#paddingleft) -- [`paddingRight`](layout-props.md#paddingright) -- [`paddingTop`](layout-props.md#paddingtop) -- [`paddingVertical`](layout-props.md#paddingvertical) -- [`position`](layout-props.md#position) -- [`right`](layout-props.md#right) -- [`top`](layout-props.md#top) -- [`width`](layout-props.md#width) -- [`zIndex`](layout-props.md#zindex) - ---- - -# Reference - -## Props - -### `marginRight` - -`marginRight` works like `margin-right` in CSS. See http://www.w3schools.com/cssref/pr_margin-right.asp for more details. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `alignItems` - -`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS, except the default value is `stretch` instead of `flex-start`. See https://css-tricks.com/almanac/properties/a/align-items/ for more detail. - -| Type | Required | -| --------------------------------------------------- | -------- | -| enum('flex-start', 'flex-end', 'center', 'stretch') | No | - ---- - -### `borderBottomWidth` - -`borderBottomWidth` works like `border-bottom-width` in CSS. See http://www.w3schools.com/cssref/pr_border-bottom_width.asp for more details. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderLeftWidth` - -`borderLeftWidth` works like `border-left-width` in CSS. See http://www.w3schools.com/cssref/pr_border-bottom_width.asp for more details. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderRightWidth` - -`borderRightWidth` works like `border-right-width` in CSS. See http://www.w3schools.com/cssref/pr_border-right_width.asp for more details. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderTopWidth` - -`borderTopWidth` works like `border-top-width` in CSS. See http://www.w3schools.com/cssref/pr_border-top_width.asp for more details. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderWidth` - -`borderWidth` works like `border-width` in CSS. See http://www.w3schools.com/cssref/pr_border-width.asp for more details. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `bottom` - -`bottom` is the number of logical pixels to offset the bottom edge of this component. - -It works similarly to `bottom` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of how `top` affects layout. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `flex` - -In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the `css-layout` library at https://github.com/facebook/css-layout . - -When `flex` is a positive number, it makes the component flexible and it will be sized proportional to its flex value. So a component with `flex` set to 2 will take twice the space as a component with `flex` set to 1. - -When `flex` is 0, the component is sized according to `width` and `height` and it is inflexible. - -When `flex` is -1, the component is normally sized according `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `flexDirection` - -`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`. See https://css-tricks.com/almanac/properties/f/flex-direction/ for more detail. - -| Type | Required | -| ------------------------------------------------------ | -------- | -| enum('row', 'row-reverse', 'column', 'column-reverse') | No | - ---- - -### `flexWrap` - -`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS. See https://css-tricks.com/almanac/properties/f/flex-wrap/ for more detail. - -| Type | Required | -| ---------------------- | -------- | -| enum('wrap', 'nowrap') | No | - ---- - -### `height` - -`height` sets the height of this component. - -It works similarly to `height` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See http://www.w3schools.com/cssref/pr_dim_width.asp for more details. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `justifyContent` - -`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS. See https://css-tricks.com/almanac/properties/j/justify-content/ for more detail. - -| Type | Required | -| ------------------------------------------------------------------------- | -------- | -| enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') | No | - ---- - -### `left` - -`left` is the number of logical pixels to offset the left edge of this component. - -It works similarly to `left` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of how `left` affects layout. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `margin` - -Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `marginBottom` - -`marginBottom` works like `margin-bottom` in CSS. See http://www.w3schools.com/cssref/pr_margin-bottom.asp for more details. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `marginHorizontal` - -Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `marginLeft` - -`marginLeft` works like `margin-left` in CSS. See http://www.w3schools.com/cssref/pr_margin-left.asp for more details. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `alignSelf` - -`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS. See https://css-tricks.com/almanac/properties/a/align-self/ for more detail. - -| Type | Required | -| ----------------------------------------------------------- | -------- | -| enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') | No | - ---- - -### `marginTop` - -`marginTop` works like `margin-top` in CSS. See http://www.w3schools.com/cssref/pr_margin-top.asp for more details. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `marginVertical` - -Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `maxHeight` - -`maxHeight` is the maximum height for this component, in logical pixels. - -It works similarly to `max-height` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See http://www.w3schools.com/cssref/pr_dim_max-height.asp for more details. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `maxWidth` - -`maxWidth` is the maximum width for this component, in logical pixels. - -It works similarly to `max-width` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See http://www.w3schools.com/cssref/pr_dim_max-width.asp for more details. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `minHeight` - -`minHeight` is the minimum height for this component, in logical pixels. - -It works similarly to `min-height` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See http://www.w3schools.com/cssref/pr_dim_min-height.asp for more details. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `minWidth` - -`minWidth` is the minimum width for this component, in logical pixels. - -It works similarly to `min-width` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See http://www.w3schools.com/cssref/pr_dim_min-width.asp for more details. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `padding` - -`padding` works like `padding` in CSS. It's like setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight` to the same thing. See http://www.w3schools.com/css/css_padding.asp for more details. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `paddingBottom` - -`paddingBottom` works like `padding-bottom` in CSS. See http://www.w3schools.com/cssref/pr_padding-bottom.asp for more details. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `paddingHorizontal` - -Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRight`. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `paddingLeft` - -`paddingLeft` works like `padding-left` in CSS. See http://www.w3schools.com/cssref/pr_padding-left.asp for more details. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `paddingRight` - -`paddingRight` works like `padding-right` in CSS. See http://www.w3schools.com/cssref/pr_padding-right.asp for more details. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `paddingTop` - -`paddingTop` works like `padding-top` in CSS. See http://www.w3schools.com/cssref/pr_padding-top.asp for more details. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `paddingVertical` - -Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBottom`. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `position` - -`position` in React Native is similar to regular CSS, but everything is set to `relative` by default, so `absolute` positioning is always relative to the parent. - -If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have `absolute` position. - -If you want to position a child relative to something that is not its parent, don't use styles for that. Use the component tree. - -See https://github.com/facebook/css-layout for more details on how `position` differs between React Native and CSS. - -| Type | Required | -| ---------------------------- | -------- | -| enum('absolute', 'relative') | No | - ---- - -### `right` - -`right` is the number of logical pixels to offset the right edge of this component. - -It works similarly to `right` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of how `right` affects layout. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `top` - -`top` is the number of logical pixels to offset the top edge of this component. - -It works similarly to `top` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how `top` affects layout. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `width` - -`width` sets the width of this component. - -It works similarly to `width` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See http://www.w3schools.com/cssref/pr_dim_width.asp for more details. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `zIndex` - -`zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior. - -It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for more detail. - -On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected. - -| Type | Required | -| ------ | -------- | -| number | No | diff --git a/website/versioned_docs/version-0.29/modal.md b/website/versioned_docs/version-0.29/modal.md deleted file mode 100644 index 485c3b4bbd1..00000000000 --- a/website/versioned_docs/version-0.29/modal.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -id: version-0.29-modal -title: Modal -original_id: modal ---- - -The Modal component is a way to present content above an enclosing view. - -_Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator. Go [here](navigator-comparison.md) to compare navigation options._ - -```jsx -import React, { Component } from 'react'; -import { - Modal, - Text, - TouchableHighlight, - View -} from 'react-native'; - -class ModalExample extends Component { - constructor(props) { - super(props); - this.state = { modalVisible: false }; - } - - setModalVisible(visible) { - this.setState({ modalVisible: visible }); - } - - render() { - return ( - - { - alert('Modal has been closed.'); - }}> - - - Hello World! - - { - this.setModalVisible(!this.state.modalVisible); - }}> - Hide Modal - - - - - - { - this.setModalVisible(true); - }}> - Show Modal - - - ); - } -} -``` - -### Props - -- [`animationType`](modal.md#animationtype) -- [`onRequestClose`](modal.md#onrequestclose) -- [`onShow`](modal.md#onshow) -- [`transparent`](modal.md#transparent) -- [`visible`](modal.md#visible) -- [`animated`](modal.md#animated) - ---- - -# Reference - -## Props - -### `animationType` - -The `animationType` prop controls how the modal animates. - -- `slide` slides in from the bottom -- `fade` fades into view -- `none` appears without an animation - -| Type | Required | -| ----------------------------- | -------- | -| enum('none', 'slide', 'fade') | No | - ---- - -### `onRequestClose` - -The `onRequestClose` prop allows passing a function that will be called once the modal has been dismissed. - -_On the Android platform, this is a required function._ - -| Type | Required | -| ---------------------------------------------------------------------- | -------- | -| Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func | No | - ---- - -### `onShow` - -The `onShow` prop allows passing a function that will be called once the modal has been shown. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `transparent` - -The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `visible` - -The `visible` prop determines whether your modal is visible. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `animated` - -**Deprecated.** Use the `animationType` prop instead. - -| Type | Required | -| ---- | -------- | -| bool | No | diff --git a/website/versioned_docs/version-0.29/navigatorios.md b/website/versioned_docs/version-0.29/navigatorios.md deleted file mode 100644 index 7840e19c9f1..00000000000 --- a/website/versioned_docs/version-0.29/navigatorios.md +++ /dev/null @@ -1,433 +0,0 @@ ---- -id: version-0.29-navigatorios -title: NavigatorIOS -original_id: navigatorios ---- - -`NavigatorIOS` is a wrapper around [`UINavigationController`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/), enabling you to implement a navigation stack. It works exactly the same as it would on a native app using `UINavigationController`, providing the same animations and behavior from UIKIt. - -As the name implies, it is only available on iOS. Take a look at [`Navigator`](/navigator.md) for a similar solution for your cross-platform needs, or check out [react-native-navigation](https://github.com/wix/react-native-navigation), a component that aims to provide native navigation on both Android and iOS. - -To set up the navigator, provide the `initialRoute` prop with a route object. A route object is used to describe each scene that your app navigates to. `initialRoute` represents the first route in your navigator. - -``` -import React, { Component } from 'react'; -import { NavigatorIOS, Text } from 'react-native'; - -export default class NavigatorIOSApp extends Component { - render() { - return ( - - ); - } -} - -class MyScene extends Component { - static propTypes = { - title: PropTypes.string.isRequired, - navigator: PropTypes.object.isRequired, - } - - constructor(props, context) { - super(props, context); - this._onForward = this._onForward.bind(this); - this._onBack = this._onBack.bind(this); - } - - _onForward() { - this.props.navigator.push({ - title: 'Scene ' + nextIndex, - }); - } - - render() { - return ( - - Current Scene: { this.props.title } - - Tap me to load the next scene - - - ) - } -} -``` - -In this code, the navigator renders the component specified in initialRoute, which in this case is `MyScene`. This component will receive a `route` prop and a `navigator` prop representing the navigator. The navigator's navigation bar will render the title for the current scene, "My Initial Scene". - -You can optionally pass in a `passProps` property to your `initialRoute`. `NavigatorIOS` passes this in as props to the rendered component: - -``` -initialRoute={{ - component: MyScene, - title: 'My Initial Scene', - passProps: { myProp: 'foo' } -}} -``` - -You can then access the props passed in via `{this.props.myProp}`. - -#### Handling Navigation - -To trigger navigation functionality such as pushing or popping a view, you have access to a `navigator` object. The object is passed in as a prop to any component that is rendered by `NavigatorIOS`. You can then call the relevant methods to perform the navigation action you need: - -``` -class MyView extends Component { - _handleBackPress() { - this.props.navigator.pop(); - } - - _handleNextPress(nextRoute) { - this.props.navigator.push(nextRoute); - } - - render() { - const nextRoute = { - component: MyView, - title: 'Bar That', - passProps: { myProp: 'bar' } - }; - return( - this._handleNextPress(nextRoute)}> - - See you on the other nav {this.props.myProp}! - - - ); - } -} -``` - -You can also trigger navigator functionality from the `NavigatorIOS` component: - -``` -class NavvyIOS extends Component { - _handleNavigationRequest() { - this.refs.nav.push({ - component: MyView, - title: 'Genius', - passProps: { myProp: 'genius' }, - }); - } - - render() { - return ( - this._handleNavigationRequest(), - }} - style={{flex: 1}} - /> - ); - } -} -``` - -The code above adds a `_handleNavigationRequest` private method that is invoked from the `NavigatorIOS` component when the right navigation bar item is pressed. To get access to the navigator functionality, a reference to it is saved in the `ref` prop and later referenced to push a new scene into the navigation stack. - -#### Navigation Bar Configuration - -Props passed to `NavigatorIOS` will set the default configuration for the navigation bar. Props passed as properties to a route object will set the configuration for that route's navigation bar, overriding any props passed to the `NavigatorIOS` component. - -``` -_handleNavigationRequest() { - this.refs.nav.push({ - //... - passProps: { myProp: 'genius' }, - barTintColor: '#996699', - }); -} - -render() { - return ( - - ); -} -``` - -In the example above the navigation bar color is changed when the new route is pushed. - -### Props - -- [`initialRoute`](navigatorios.md#initialroute) -- [`barTintColor`](navigatorios.md#bartintcolor) -- [`interactivePopGestureEnabled`](navigatorios.md#interactivepopgestureenabled) -- [`itemWrapperStyle`](navigatorios.md#itemwrapperstyle) -- [`navigationBarHidden`](navigatorios.md#navigationbarhidden) -- [`shadowHidden`](navigatorios.md#shadowhidden) -- [`tintColor`](navigatorios.md#tintcolor) -- [`titleTextColor`](navigatorios.md#titletextcolor) -- [`translucent`](navigatorios.md#translucent) - -### Methods - -- [`push`](navigatorios.md#push) -- [`popN`](navigatorios.md#popn) -- [`pop`](navigatorios.md#pop) -- [`replaceAtIndex`](navigatorios.md#replaceatindex) -- [`replace`](navigatorios.md#replace) -- [`replacePrevious`](navigatorios.md#replaceprevious) -- [`popToTop`](navigatorios.md#poptotop) -- [`popToRoute`](navigatorios.md#poptoroute) -- [`replacePreviousAndPop`](navigatorios.md#replacepreviousandpop) -- [`resetTo`](navigatorios.md#resetto) - ---- - -# Reference - -## Props - -### `initialRoute` - -NavigatorIOS uses `route` objects to identify child views, their props, and navigation bar configuration. Navigation operations such as push operations expect routes to look like this the `initialRoute`. - -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| object: {component: function,title: string,titleImage: Image.propTypes.source,passProps: object,backButtonIcon: Image.propTypes.source,backButtonTitle: string,leftButtonIcon: Image.propTypes.source,leftButtonTitle: string,onLeftButtonPress: function,rightButtonIcon: Image.propTypes.source,rightButtonTitle: string,onRightButtonPress: function,wrapperStyle: [View](view.md#style),navigationBarHidden: bool,shadowHidden: bool,tintColor: string,barTintColor: string,titleTextColor: string,translucent: bool} | Yes | - ---- - -### `barTintColor` - -The default background color of the navigation bar. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `interactivePopGestureEnabled` - -Boolean value that indicates whether the interactive `pop` gesture is enabled. This is useful for enabling/disabling the back swipe navigation gesture. - -If this prop is not provided, the default behavior is for the back swipe gesture to be enabled when the navigation bar is shown and disabled when the navigation bar is hidden. Once you've provided the `interactivePopGestureEnabled` prop, you can never restore the default behavior. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `itemWrapperStyle` - -The default wrapper style for components in the navigator. A common use case is to set the `backgroundColor` for every scene. - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `navigationBarHidden` - -Boolean value that indicates whether the navigation bar is hidden by default. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `shadowHidden` - -Boolean value that indicates whether to hide the 1px hairline shadow by default. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `tintColor` - -The default color used for the buttons in the navigation bar. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `titleTextColor` - -The default text color of the navigation bar title. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `translucent` - -Boolean value that indicates whether the navigation bar is translucent by default - -| Type | Required | -| ---- | -------- | -| bool | No | - -## Methods - -### `push()` - -```jsx -push((route: object)); -``` - -Navigate forward to a new route. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ----------------------------- | -| route | object | Yes | The new route to navigate to. | - ---- - -### `popN()` - -```jsx -popN((n: number)); -``` - -Go back N scenes at once. When N=1, behavior matches `pop()`. - -**Parameters:** - -| Name | Type | Required | Description | -| ---- | ------ | -------- | ---------------------------- | -| n | number | Yes | The number of scenes to pop. | - ---- - -### `pop()` - -```jsx -pop(); -``` - -`Pop` back to the previous scene. - ---- - -### `replaceAtIndex()` - -```jsx -replaceAtIndex((route: object), (index: number)); -``` - -Replace a route in the navigation stack. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ---------------------------------------------------------------------------------------------------------- | -| route | object | Yes | The new route that will replace the specified one. | -| index | number | Yes | The route into the stack that should be replaced. If it is negative, it counts from the back of the stack. | - ---- - -### `replace()` - -```jsx -replace((route: object)); -``` - -Replace the route for the current scene and immediately load the view for the new route. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ----------------------------- | -| route | object | Yes | The new route to navigate to. | - ---- - -### `replacePrevious()` - -```jsx -replacePrevious((route: object)); -``` - -Replace the route/view for the previous scene. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ------------------------------------------------- | -| route | object | Yes | The new route to will replace the previous scene. | - ---- - -### `popToTop()` - -```jsx -popToTop(); -``` - -Go back to the topmost item in the navigation stack. - ---- - -### `popToRoute()` - -```jsx -popToRoute((route: object)); -``` - -Go back to the item for a particular route object. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ----------------------------- | -| route | object | Yes | The new route to navigate to. | - ---- - -### `replacePreviousAndPop()` - -```jsx -replacePreviousAndPop((route: object)); -``` - -Replaces the previous route/view and transitions back to it. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ----------------------------------------------- | -| route | object | Yes | The new route that replaces the previous scene. | - ---- - -### `resetTo()` - -```jsx -resetTo((route: object)); -``` - -Replaces the top item and `pop` to it. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ------------------------------------------------- | -| route | object | Yes | The new route that will replace the topmost item. | diff --git a/website/versioned_docs/version-0.29/pushnotificationios.md b/website/versioned_docs/version-0.29/pushnotificationios.md deleted file mode 100644 index afc033b8511..00000000000 --- a/website/versioned_docs/version-0.29/pushnotificationios.md +++ /dev/null @@ -1,320 +0,0 @@ ---- -id: version-0.29-pushnotificationios -title: PushNotificationIOS -original_id: pushnotificationios ---- - -Handle push notifications for your app, including permission handling and icon badge number. - -To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). - -[Manually link](linking-libraries-ios.md#manual-linking) the PushNotificationIOS library - -- Add the following to your Project: `node_modules/react-native/Libraries/PushNotificationIOS/RCTPushNotification.xcodeproj` -- Add the following to `Link Binary With Libraries`: `libRCTPushNotification.a` -- Add the following to your `Header Search Paths`: `$(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS` and set the search to `recursive` - -Finally, to enable support for `notification` and `register` events you need to augment your AppDelegate. - -At the top of your `AppDelegate.m`: - -`#import "RCTPushNotificationManager.h"` - -And then in your AppDelegate implementation add the following: - -``` - // Required to register for notifications - - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings - { - [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings]; - } - // Required for the register event. - - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken - { - [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; - } - // Required for the notification event. - - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification - { - [RCTPushNotificationManager didReceiveRemoteNotification:notification]; - } - // Required for the localNotification event. - - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification - { - [RCTPushNotificationManager didReceiveLocalNotification:notification]; - } - - (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error - { - NSLog(@"%@", error); - } -``` - -### Methods - -- [`presentLocalNotification`](pushnotificationios.md#presentlocalnotification) -- [`scheduleLocalNotification`](pushnotificationios.md#schedulelocalnotification) -- [`cancelAllLocalNotifications`](pushnotificationios.md#cancelalllocalnotifications) -- [`setApplicationIconBadgeNumber`](pushnotificationios.md#setapplicationiconbadgenumber) -- [`getApplicationIconBadgeNumber`](pushnotificationios.md#getapplicationiconbadgenumber) -- [`cancelLocalNotifications`](pushnotificationios.md#cancellocalnotifications) -- [`getScheduledLocalNotifications`](pushnotificationios.md#getscheduledlocalnotifications) -- [`addEventListener`](pushnotificationios.md#addeventlistener) -- [`removeEventListener`](pushnotificationios.md#removeeventlistener) -- [`requestPermissions`](pushnotificationios.md#requestpermissions) -- [`abandonPermissions`](pushnotificationios.md#abandonpermissions) -- [`checkPermissions`](pushnotificationios.md#checkpermissions) -- [`popInitialNotification`](pushnotificationios.md#popinitialnotification) -- [`getInitialNotification`](pushnotificationios.md#getinitialnotification) -- [`constructor`](pushnotificationios.md#constructor) -- [`getMessage`](pushnotificationios.md#getmessage) -- [`getSound`](pushnotificationios.md#getsound) -- [`getAlert`](pushnotificationios.md#getalert) -- [`getBadgeCount`](pushnotificationios.md#getbadgecount) -- [`getData`](pushnotificationios.md#getdata) - ---- - -# Reference - -## Methods - -### `presentLocalNotification()` - -```jsx -static presentLocalNotification(details) -``` - -Schedules the localNotification for immediate presentation. - -details is an object containing: - -- `alertBody` : The message displayed in the notification alert. -- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; -- `soundName` : The sound played when the notification is fired (optional). -- `category` : The category of this notification, required for actionable notifications (optional). -- `userInfo` : An optional object containing additional notification data. -- `applicationIconBadgeNumber` (optional) : The number to display as the app’s icon badge. The default value of this property is 0, which means that no badge is displayed. - ---- - -### `scheduleLocalNotification()` - -```jsx -static scheduleLocalNotification(details) -``` - -Schedules the localNotification for future presentation. - -details is an object containing: - -- `fireDate` : The date and time when the system should deliver the notification. -- `alertBody` : The message displayed in the notification alert. -- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; -- `soundName` : The sound played when the notification is fired (optional). -- `category` : The category of this notification, required for actionable notifications (optional). -- `userInfo` : An optional object containing additional notification data. -- `applicationIconBadgeNumber` (optional) : The number to display as the app’s icon badge. Setting the number to 0 removes the icon badge. - ---- - -### `cancelAllLocalNotifications()` - -```jsx -static cancelAllLocalNotifications() -``` - -Cancels all scheduled localNotifications - ---- - -### `setApplicationIconBadgeNumber()` - -```jsx -static setApplicationIconBadgeNumber(number) -``` - -Sets the badge number for the app icon on the home screen - ---- - -### `getApplicationIconBadgeNumber()` - -```jsx -static getApplicationIconBadgeNumber(callback) -``` - -Gets the current badge number for the app icon on the home screen - ---- - -### `cancelLocalNotifications()` - -```jsx -static cancelLocalNotifications(userInfo) -``` - -Cancel local notifications. - -Optionally restricts the set of canceled notifications to those notifications whose `userInfo` fields match the corresponding fields in the `userInfo` argument. - ---- - -### `getScheduledLocalNotifications()` - -```jsx -static getScheduledLocalNotifications(callback) -``` - -Gets the local notifications that are currently scheduled. - ---- - -### `addEventListener()` - -```jsx -static addEventListener(type, handler) -``` - -Attaches a listener to remote or local notification events while the app is running in the foreground or the background. - -Valid events are: - -- `notification` : Fired when a remote notification is received. The handler will be invoked with an instance of `PushNotificationIOS`. -- `localNotification` : Fired when a local notification is received. The handler will be invoked with an instance of `PushNotificationIOS`. -- `register`: Fired when the user registers for remote notifications. The handler will be invoked with a hex string representing the deviceToken. - ---- - -### `removeEventListener()` - -```jsx -static removeEventListener(type, handler) -``` - -Removes the event listener. Do this in `componentWillUnmount` to prevent memory leaks - ---- - -### `requestPermissions()` - -```jsx -static requestPermissions(permissions?) -``` - -Requests notification permissions from iOS, prompting the user's dialog box. By default, it will request all notification permissions, but a subset of these can be requested by passing a map of requested permissions. The following permissions are supported: - -- `alert` -- `badge` -- `sound` - -If a map is provided to the method, only the permissions with truthy values will be requested. - -This method returns a promise that will resolve when the user accepts, rejects, or if the permissions were previously rejected. The promise resolves to the current state of the permission. - ---- - -### `abandonPermissions()` - -```jsx -static abandonPermissions() -``` - -Unregister for all remote notifications received via Apple Push Notification service. - -You should call this method in rare circumstances only, such as when a new version of the app removes support for all types of remote notifications. Users can temporarily prevent apps from receiving remote notifications through the Notifications section of the Settings app. Apps unregistered through this method can always re-register. - ---- - -### `checkPermissions()` - -```jsx -static checkPermissions(callback) -``` - -See what push permissions are currently enabled. `callback` will be invoked with a `permissions` object: - -- `alert` :boolean -- `badge` :boolean -- `sound` :boolean - ---- - -### `popInitialNotification()` - -```jsx -static popInitialNotification() -``` - -DEPRECATED: An initial notification will be available if the app was cold-launched from a notification. - -The first caller of `popInitialNotification` will get the initial notification object, or `null`. Subsequent invocations will return null. - ---- - -### `getInitialNotification()` - -```jsx -static getInitialNotification() -``` - -If the app launch was triggered by a push notification, it will give the notification object, otherwise it will give `null` - ---- - -### `constructor()` - -```jsx -constructor(nativeNotif); -``` - -You will never need to instantiate `PushNotificationIOS` yourself. Listening to the `notification` event and invoking `popInitialNotification` is sufficient - ---- - -### `getMessage()` - -```jsx -getMessage(); -``` - -An alias for `getAlert` to get the notification's main message string - ---- - -### `getSound()` - -```jsx -getSound(); -``` - -Gets the sound string from the `aps` object - ---- - -### `getAlert()` - -```jsx -getAlert(); -``` - -Gets the notification's main message from the `aps` object - ---- - -### `getBadgeCount()` - -```jsx -getBadgeCount(); -``` - -Gets the badge count number from the `aps` object - ---- - -### `getData()` - -```jsx -getData(); -``` - -Gets the data object on the notif diff --git a/website/versioned_docs/version-0.29/refreshcontrol.md b/website/versioned_docs/version-0.29/refreshcontrol.md deleted file mode 100644 index cd7bc349a03..00000000000 --- a/website/versioned_docs/version-0.29/refreshcontrol.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -id: version-0.29-refreshcontrol -title: RefreshControl -original_id: refreshcontrol ---- - -This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at `scrollY: 0`, swiping down triggers an `onRefresh` event. - -### Usage example - -```js -class RefreshableList extends Component { - constructor(props) { - super(props); - this.state = { - refreshing: false, - }; - } - - _onRefresh() { - this.setState({refreshing: true}); - fetchData().then(() => { - this.setState({refreshing: false}); - }); - } - - render() { - return ( - - } - ... - > - ... - - ); - } - ... -} -``` - -**Note:** `refreshing` is a controlled prop, this is why it needs to be set to true in the `onRefresh` function otherwise the refresh indicator will stop immediately. - -### Props - -- [View props...](view.md#props) - -* [`refreshing`](refreshcontrol.md#refreshing) -* [`onRefresh`](refreshcontrol.md#onrefresh) -* [`colors`](refreshcontrol.md#colors) -* [`enabled`](refreshcontrol.md#enabled) -* [`progressBackgroundColor`](refreshcontrol.md#progressbackgroundcolor) -* [`progressViewOffset`](refreshcontrol.md#progressviewoffset) -* [`size`](refreshcontrol.md#size) -* [`tintColor`](refreshcontrol.md#tintcolor) -* [`title`](refreshcontrol.md#title) -* [`titleColor`](refreshcontrol.md#titlecolor) - ---- - -# Reference - -## Props - -### `refreshing` - -Whether the view should be indicating an active refresh. - -| Type | Required | -| ---- | -------- | -| bool | Yes | - ---- - -### `onRefresh` - -Called when the view starts refreshing. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `colors` - -The colors (at least one) that will be used to draw the refresh indicator. - -| Type | Required | Platform | -| --------------------------- | -------- | -------- | -| array of [color](colors.md) | No | Android | - ---- - -### `enabled` - -Whether the pull to refresh functionality is enabled. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `progressBackgroundColor` - -The background color of the refresh indicator. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `progressViewOffset` - -Progress view top offset - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | Android | - ---- - -### `size` - -Size of the refresh indicator, see RefreshControl.SIZE. - -| Type | Required | Platform | -| ---------------------------------------------------------------------- | -------- | -------- | -| enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE) | No | Android | - ---- - -### `tintColor` - -The color of the refresh indicator. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | - ---- - -### `title` - -The title displayed under the refresh indicator. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | iOS | - ---- - -### `titleColor` - -Title color. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | diff --git a/website/versioned_docs/version-0.29/statusbar.md b/website/versioned_docs/version-0.29/statusbar.md deleted file mode 100644 index ea4f04c9756..00000000000 --- a/website/versioned_docs/version-0.29/statusbar.md +++ /dev/null @@ -1,248 +0,0 @@ ---- -id: version-0.29-statusbar -title: StatusBar -original_id: statusbar ---- - -Component to control the app status bar. - -### Usage with Navigator - -It is possible to have multiple `StatusBar` components mounted at the same time. The props will be merged in the order the `StatusBar` components were mounted. One use case is to specify status bar styles per route using `Navigator`. - -``` - - - - - - } - /> - -``` - -### Imperative API - -For cases where using a component is not ideal, there is also an imperative API exposed as static functions on the component. It is however not recommended to use the static API and the component for the same prop because any value set by the static API will get overriden by the one set by the component in the next render. - -### Props - -- [`animated`](statusbar.md#animated) -- [`hidden`](statusbar.md#hidden) -- [`backgroundColor`](statusbar.md#backgroundcolor) -- [`translucent`](statusbar.md#translucent) -- [`barStyle`](statusbar.md#barstyle) -- [`networkActivityIndicatorVisible`](statusbar.md#networkactivityindicatorvisible) -- [`showHideTransition`](statusbar.md#showhidetransition) - -### Methods - -- [`setHidden`](statusbar.md#sethidden) -- [`setBarStyle`](statusbar.md#setbarstyle) -- [`setNetworkActivityIndicatorVisible`](statusbar.md#setnetworkactivityindicatorvisible) -- [`setBackgroundColor`](statusbar.md#setbackgroundcolor) -- [`setTranslucent`](statusbar.md#settranslucent) - -### Type Definitions - -- [`StatusBarStyle`](statusbar.md#statusbarstyle) -- [`StatusBarAnimation`](statusbar.md#statusbaranimation) - ---- - -# Reference - -## Props - -### `animated` - -If the transition between status bar property changes should be animated. Supported for backgroundColor, barStyle and hidden. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `hidden` - -If the status bar is hidden. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `backgroundColor` - -The background color of the status bar. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `translucent` - -If the status bar is translucent. When translucent is set to true, the app will draw under the status bar. This is useful when using a semi transparent status bar color. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `barStyle` - -Sets the color of the status bar text. - -| Type | Required | Platform | -| -------------------------------- | -------- | -------- | -| enum('default', 'light-content') | No | iOS | - ---- - -### `networkActivityIndicatorVisible` - -If the network activity indicator should be visible. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `showHideTransition` - -The transition effect when showing and hiding the status bar using the `hidden` prop. Defaults to 'fade'. - -| Type | Required | Platform | -| --------------------- | -------- | -------- | -| enum('fade', 'slide') | No | iOS | - -## Methods - -### `setHidden()` - -```jsx -static setHidden(hidden: boolean, [animation]: StatusBarAnimation) -``` - -Show or hide the status bar - -**Parameters:** - -| Name | Type | Required | Description | -| --------- | ----------------------------------------------------- | -------- | ---------------------------------------------------------------- | -| hidden | boolean | Yes | The dialog's title. | -| animation | [StatusBarAnimation](statusbar.md#statusbaranimation) | No | Optional animation when changing the status bar hidden property. | - ---- - -### `setBarStyle()` - -```jsx -static setBarStyle(style: StatusBarStyle, [animated]: boolean) -``` - -Set the status bar style - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | --------------------------------------------- | -------- | ------------------------- | -| style | [StatusBarStyle](statusbar.md#statusbarstyle) | Yes | Status bar style to set | -| animated | boolean | No | Animate the style change. | - ---- - -### `setNetworkActivityIndicatorVisible()` - -```jsx -static setNetworkActivityIndicatorVisible(visible: boolean) -``` - -Control the visibility of the network activity indicator - -**Parameters:** - -| Name | Type | Required | Description | -| ------- | ------- | -------- | ------------------- | -| visible | boolean | Yes | Show the indicator. | - ---- - -### `setBackgroundColor()` - -```jsx -static setBackgroundColor(color: string, [animated]: boolean) -``` - -Set the background color for the status bar - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | ------- | -------- | ------------------------- | -| color | string | Yes | Background color. | -| animated | boolean | No | Animate the style change. | - ---- - -### `setTranslucent()` - -```jsx -static setTranslucent(translucent: boolean) -``` - -Control the translucency of the status bar - -**Parameters:** - -| Name | Type | Required | Description | -| ----------- | ------- | -------- | ------------------- | -| translucent | boolean | Yes | Set as translucent. | - -## Type Definitions - -### StatusBarStyle - -Status bar style - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| ------------- | ------------------------ | -| default | Default status bar style | -| light-content | Dark background style | - ---- - -### StatusBarAnimation - -Status bar animation - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| ----- | --------------- | -| none | No animation | -| fade | Fade animation | -| slide | Slide animation | diff --git a/website/versioned_docs/version-0.29/statusbarios.md b/website/versioned_docs/version-0.29/statusbarios.md deleted file mode 100644 index 7a57f9d0e6d..00000000000 --- a/website/versioned_docs/version-0.29/statusbarios.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -id: version-0.29-statusbarios -title: StatusBarIOS -original_id: statusbarios ---- - -Use `StatusBar` for mutating the status bar. - ---- - -# Reference diff --git a/website/versioned_docs/version-0.29/stylesheet.md b/website/versioned_docs/version-0.29/stylesheet.md deleted file mode 100644 index 582da239ccb..00000000000 --- a/website/versioned_docs/version-0.29/stylesheet.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -id: version-0.29-stylesheet -title: StyleSheet -original_id: stylesheet ---- - -A StyleSheet is an abstraction similar to CSS StyleSheets - -Create a new StyleSheet: - -``` -var styles = StyleSheet.create({ - container: { - borderRadius: 4, - borderWidth: 0.5, - borderColor: '#d6d7da', - }, - title: { - fontSize: 19, - fontWeight: 'bold', - }, - activeTitle: { - color: 'red', - }, -}); -``` - -Use a StyleSheet: - -``` - - - -``` - -Code quality: - -- By moving styles away from the render function, you're making the code easier to understand. -- Naming the styles is a good way to add meaning to the low level components in the render function. - -Performance: - -- Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time. -- It also allows to send the style only once through the bridge. All subsequent uses are going to refer an id (not implemented yet). - -### Methods - -- [`create`](stylesheet.md#create) - -### Properties - -- [`hairlineWidth`](stylesheet.md#hairlinewidth) -- [`absoluteFill`](stylesheet.md#absolutefill) -- [`absoluteFillObject`](stylesheet.md#absolutefillobject) -- [`flatten`](stylesheet.md#flatten) - ---- - -# Reference - -## Methods - -### `create()` - -```jsx -static create(obj) -``` - -Creates a StyleSheet style reference from the given object. - -## Properties - ---- - ---- - ---- diff --git a/website/versioned_docs/version-0.29/text.md b/website/versioned_docs/version-0.29/text.md deleted file mode 100644 index 8bb292b869a..00000000000 --- a/website/versioned_docs/version-0.29/text.md +++ /dev/null @@ -1,237 +0,0 @@ ---- -id: version-0.29-text -title: Text -original_id: text ---- - -A React component for displaying text. - -`Text` supports nesting, styling, and touch handling. - -In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines: - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, Text, StyleSheet } from 'react-native'; - -class TextInANest extends Component { - constructor(props) { - super(props); - this.state = { - titleText: "Bird's Nest", - bodyText: 'This is not really a bird nest.' - }; - } - - render() { - return ( - - - {this.state.titleText}

- - - {this.state.bodyText} - - - ); - } -} - -const styles = StyleSheet.create({ - baseText: { - fontFamily: 'Cochin', - }, - titleText: { - fontSize: 20, - fontWeight: 'bold', - }, -}); - -// App registration and rendering -AppRegistry.registerComponent('TextInANest', () => TextInANest); -``` - -### Props - -- [`onPress`](text.md#onpress) -- [`accessible`](text.md#accessible) -- [`numberOfLines`](text.md#numberoflines) -- [`onLayout`](text.md#onlayout) -- [`onLongPress`](text.md#onlongpress) -- [`lineBreakMode`](text.md#linebreakmode) -- [`style`](text.md#style) -- [`testID`](text.md#testid) -- [`selectable`](text.md#selectable) -- [`allowFontScaling`](text.md#allowfontscaling) -- [`suppressHighlighting`](text.md#suppresshighlighting) - ---- - -# Reference - -## Props - -### `onPress` - -This function is called on press. - -e.g., `onPress={() => console.log('1st')}`` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `accessible` - -When set to `true`, indicates that the view is an accessibility element. The default value for a `Text` element is `true`. - -See the [Accessibility guide](accessibility.md#accessible-ios-android) for more information. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `numberOfLines` - -Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. - -This prop is commonly used with `lineBreakMode`. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with - -`{nativeEvent: {layout: {x, y, width, height}}}` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLongPress` - -This function is called on long press. - -e.g., `onLongPress={this.increaseSize}>`` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `lineBreakMode` - -Line Break mode. This can be one of the following values: - -- `head` - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz" -- `middle` - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. "ab...yz" -- `tail` - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..." -- `clip` - Lines are not drawn past the edge of the text container. - -The default is `tail`. - -`numberOfLines` must be set in conjunction with this prop. - -> `clip` is working only for iOS - -| Type | Required | -| -------------------------------------- | -------- | -| enum('head', 'middle', 'tail', 'clip') | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [View Style Props...](view-style-props.md#style) - -- **`textShadowColor`**: [color](colors.md) - -- **`color`**: [color](colors.md) - -- **`fontSize`**: number - -- **`fontStyle`**: enum('normal', 'italic') - -- **`fontWeight`**: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') - - Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen. - -- **`lineHeight`**: number - -- **`textAlign`**: enum('auto', 'left', 'right', 'center', 'justify') - - Specifies text alignment. The value 'justify' is only supported on iOS and fallbacks to `left` on Android. - -- **`textDecorationLine`**: enum('none', 'underline', 'line-through', 'underline line-through') - -- **`fontFamily`**: string - -- **`textShadowOffset`**: object: {width: number,height: number} - -- **`textShadowRadius`**: number - -- **`textAlignVertical`**: enum('auto', 'top', 'bottom', 'center') (_Android_) - -- **`letterSpacing`**: number (_iOS_) - -- **`textDecorationColor`**: [color](colors.md) (_iOS_) - -- **`textDecorationStyle`**: enum('solid', 'double', 'dotted', 'dashed') (_iOS_) - -- **`writingDirection`**: enum('auto', 'ltr', 'rtl') (_iOS_) - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `selectable` - -Lets the user select text, to use the native copy and paste functionality. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `allowFontScaling` - -Specifies whether fonts should scale to respect Text Size accessibility setting on iOS. The default is `true`. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `suppressHighlighting` - -When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | diff --git a/website/versioned_docs/version-0.29/textinput.md b/website/versioned_docs/version-0.29/textinput.md deleted file mode 100644 index 76c87fcd983..00000000000 --- a/website/versioned_docs/version-0.29/textinput.md +++ /dev/null @@ -1,544 +0,0 @@ ---- -id: version-0.29-textinput -title: TextInput -original_id: textinput ---- - -A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. - -An example use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, TextInput } from 'react-native'; - -class UselessTextInput extends Component { - constructor(props) { - super(props); - this.state = { text: 'Useless Placeholder' }; - } - - render() { - return ( - this.setState({text})} - value={this.state.text} - /> - ); - } -} - -// App registration and rendering -AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput); -``` - -Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=false`. To achieve the same effect, you can wrap your `TextInput` in a `View`: - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, View, TextInput } from 'react-native'; - -class UselessTextInput extends Component { - render() { - return ( - - ); - } -} - -class UselessTextInputMultiline extends Component { - constructor(props) { - super(props); - this.state = { - text: 'Useless Multiline Placeholder', - }; - } - - // If you type something in the text box that is a color, the background will change to that - // color. - render() { - return ( - - this.setState({text})} - value={this.state.text} - /> - - ); - } -} - -// App registration and rendering -AppRegistry.registerComponent( - 'AwesomeProject', - () => UselessTextInputMultiline -); -``` - -`TextInput` has by default a border at the bottom of its view. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this is to either not set height explicitly, case in which the system will take care of displaying the border in the correct position, or to not display the border by setting `underlineColorAndroid` to transparent. - -### Props - -- [View props...](view.md#props) - -* [`placeholder`](textinput.md#placeholder) -* [`autoCapitalize`](textinput.md#autocapitalize) -* [`autoFocus`](textinput.md#autofocus) -* [`blurOnSubmit`](textinput.md#bluronsubmit) -* [`defaultValue`](textinput.md#defaultvalue) -* [`editable`](textinput.md#editable) -* [`keyboardType`](textinput.md#keyboardtype) -* [`maxLength`](textinput.md#maxlength) -* [`multiline`](textinput.md#multiline) -* [`onBlur`](textinput.md#onblur) -* [`onChange`](textinput.md#onchange) -* [`onChangeText`](textinput.md#onchangetext) -* [`onEndEditing`](textinput.md#onendediting) -* [`onFocus`](textinput.md#onfocus) -* [`onLayout`](textinput.md#onlayout) -* [`onSelectionChange`](textinput.md#onselectionchange) -* [`onSubmitEditing`](textinput.md#onsubmitediting) -* [`autoCorrect`](textinput.md#autocorrect) -* [`placeholderTextColor`](textinput.md#placeholdertextcolor) -* [`returnKeyType`](textinput.md#returnkeytype) -* [`secureTextEntry`](textinput.md#securetextentry) -* [`selectTextOnFocus`](textinput.md#selecttextonfocus) -* [`selectionColor`](textinput.md#selectioncolor) -* [`style`](textinput.md#style) -* [`value`](textinput.md#value) -* [`numberOfLines`](textinput.md#numberoflines) -* [`returnKeyLabel`](textinput.md#returnkeylabel) -* [`underlineColorAndroid`](textinput.md#underlinecolorandroid) -* [`clearButtonMode`](textinput.md#clearbuttonmode) -* [`clearTextOnFocus`](textinput.md#cleartextonfocus) -* [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) -* [`keyboardAppearance`](textinput.md#keyboardappearance) -* [`onKeyPress`](textinput.md#onkeypress) -* [`selectionState`](textinput.md#selectionstate) - -### Methods - -- [`isFocused`](textinput.md#isfocused) -- [`clear`](textinput.md#clear) - ---- - -# Reference - -## Props - -### `placeholder` - -The string that will be rendered before text input has been entered. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `autoCapitalize` - -Can tell `TextInput` to automatically capitalize certain characters. - -- `characters`: all characters. -- `words`: first letter of each word. -- `sentences`: first letter of each sentence (_default_). -- `none`: don't auto capitalize anything. - -| Type | Required | -| ------------------------------------------------ | -------- | -| enum('none', 'sentences', 'words', 'characters') | No | - ---- - -### `autoFocus` - -If `true`, focuses the input on `componentDidMount`. The default value is `false`. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `blurOnSubmit` - -If `true`, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting `blurOnSubmit` to `true` means that pressing return will blur the field and trigger the `onSubmitEditing` event instead of inserting a newline into the field. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `defaultValue` - -Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `editable` - -If `false`, text is not editable. The default value is `true`. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `keyboardType` - -Determines which keyboard to open, e.g.`numeric`. - -The following values work across platforms: - -- `default` -- `numeric` -- `email-address` - -| Type | Required | -| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | - ---- - -### `maxLength` - -Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `multiline` - -If `true`, the text input can be multiple lines. The default value is `false`. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onBlur` - -Callback that is called when the text input is blurred. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChange` - -Callback that is called when the text input's text changes. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChangeText` - -Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onEndEditing` - -Callback that is called when text input ends. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onFocus` - -Callback that is called when the text input is focused. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{x, y, width, height}`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onSelectionChange` - -Callback that is called when the text input selection is changed. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onSubmitEditing` - -Callback that is called when the text input's submit button is pressed. Invalid if `multiline={true}` is specified. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `autoCorrect` - -If `false`, disables auto-correct. The default value is `true`. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `placeholderTextColor` - -The text color of the placeholder string. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `returnKeyType` - -Determines how the return key should look. On Android you can also use `returnKeyLabel`. - -_Cross platform_ - -The following values work across platforms: - -- `done` -- `go` -- `next` -- `search` -- `send` - -_Android Only_ - -The following values work on Android only: - -- `none` -- `previous` - -_iOS Only_ - -The following values work on iOS only: - -- `default` -- `emergency-call` -- `google` -- `join` -- `route` -- `yahoo` - -| Type | Required | -| --------------------------------------------------------------------------------------------------------------------------------- | -------- | -| enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') | No | - ---- - -### `secureTextEntry` - -If `true`, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is `false`. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `selectTextOnFocus` - -If `true`, all text will automatically be selected on focus. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `selectionColor` - -The highlight (and cursor on iOS) color of the text input. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `style` - -[Styles](style.md) - -| Type | Required | -| --------------------- | -------- | -| [Text](text.md#style) | No | - ---- - -### `value` - -The value to show for the text input. `TextInput` is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `numberOfLines` - -Sets the number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | Android | - ---- - -### `returnKeyLabel` - -Sets the return key to the label. Use it instead of `returnKeyType`. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `underlineColorAndroid` - -The color of the `TextInput` underline. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `clearButtonMode` - -When the clear button should appear on the right side of the text view. - -| Type | Required | Platform | -| ---------------------------------------------------------- | -------- | -------- | -| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | - ---- - -### `clearTextOnFocus` - -If `true`, clears the text field automatically when editing begins. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `enablesReturnKeyAutomatically` - -If `true`, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is `false`. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `keyboardAppearance` - -Determines the color of the keyboard. - -| Type | Required | Platform | -| -------------------------------- | -------- | -------- | -| enum('default', 'light', 'dark') | No | iOS | - ---- - -### `onKeyPress` - -Callback that is called when a key is pressed. Pressed key value is passed as an argument to the callback handler. Fires before `onChange` callbacks. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `selectionState` - -An instance of `DocumentSelectionState`, this is some state that is responsible for maintaining selection information for a document. - -Some functionality that can be performed with this instance is: - -- `blur()` -- `focus()` -- `update()` - -> You can reference `DocumentSelectionState` in [`vendor/document/selection/DocumentSelectionState.js`](https://github.com/facebook/react-native/blob/master/Libraries/vendor/document/selection/DocumentSelectionState.js) - -| Type | Required | Platform | -| ---------------------- | -------- | -------- | -| DocumentSelectionState | No | iOS | - -## Methods - -### `isFocused()` - -```jsx -isFocused(): -``` - -Returns `true` if the input is currently focused; `false` otherwise. - ---- - -### `clear()` - -```jsx -clear(); -``` - -Removes all text from the `TextInput`. diff --git a/website/versioned_docs/version-0.29/webview.md b/website/versioned_docs/version-0.29/webview.md deleted file mode 100644 index 3560e15b917..00000000000 --- a/website/versioned_docs/version-0.29/webview.md +++ /dev/null @@ -1,372 +0,0 @@ ---- -id: version-0.29-webview -title: WebView -original_id: webview ---- - -`WebView` renders web content in a native view. - -``` -import React, { Component } from 'react'; -import { WebView } from 'react-native'; - -class MyWeb extends Component { - render() { - return ( - - ); - } -} -``` - -You can use this component to navigate back and forth in the web view's history and configure various properties for the web content. - -### Props - -- [View props...](view.md#props) - -* [`scalesPageToFit`](webview.md#scalespagetofit) -* [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) -* [`onShouldStartLoadWithRequest`](webview.md#onshouldstartloadwithrequest) -* [`injectedJavaScript`](webview.md#injectedjavascript) -* [`mediaPlaybackRequiresUserAction`](webview.md#mediaplaybackrequiresuseraction) -* [`onError`](webview.md#onerror) -* [`onLoad`](webview.md#onload) -* [`onLoadEnd`](webview.md#onloadend) -* [`onLoadStart`](webview.md#onloadstart) -* [`onNavigationStateChange`](webview.md#onnavigationstatechange) -* [`renderError`](webview.md#rendererror) -* [`renderLoading`](webview.md#renderloading) -* [`contentInset`](webview.md#contentinset) -* [`source`](webview.md#source) -* [`startInLoadingState`](webview.md#startinloadingstate) -* [`style`](webview.md#style) -* [`decelerationRate`](webview.md#decelerationrate) -* [`domStorageEnabled`](webview.md#domstorageenabled) -* [`javaScriptEnabled`](webview.md#javascriptenabled) -* [`userAgent`](webview.md#useragent) -* [`allowsInlineMediaPlayback`](webview.md#allowsinlinemediaplayback) -* [`bounces`](webview.md#bounces) -* [`scrollEnabled`](webview.md#scrollenabled) -* [`url`](webview.md#url) -* [`html`](webview.md#html) - -### Methods - -- [`goForward`](webview.md#goforward) -- [`goBack`](webview.md#goback) -- [`reload`](webview.md#reload) -- [`stopLoading`](webview.md#stoploading) -- [`getWebViewHandle`](webview.md#getwebviewhandle) - ---- - -# Reference - -## Props - -### `scalesPageToFit` - -Boolean that controls whether the web content is scaled to fit the view and enables the user to change the scale. The default value is `true`. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `automaticallyAdjustContentInsets` - -Controls whether to adjust the content inset for web views that are placed behind a navigation bar, tab bar, or toolbar. The default value is `true`. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onShouldStartLoadWithRequest` - -Function that allows custom handling of any web view requests. Return `true` from the function to continue loading the request and `false` to stop loading. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `injectedJavaScript` - -Set this to provide JavaScript that will be injected into the web page when the view loads. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `mediaPlaybackRequiresUserAction` - -Boolean that determines whether HTML5 audio and video requires the user to tap them before they start playing. The default value is `false`. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onError` - -Function that is invoked when the `WebView` load fails. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoad` - -Function that is invoked when the `WebView` has finished loading. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadEnd` - -Function that is invoked when the `WebView` load succeeds or fails. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadStart` - -Function that is invoked when the `WebView` starts loading. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onNavigationStateChange` - -Function that is invoked when the `WebView` loading starts or ends. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `renderError` - -Function that returns a view to show if there's an error. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `renderLoading` - -Function that returns a loading indicator. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `contentInset` - -The amount by which the web view content is inset from the edges of the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}. - -| Type | Required | -| ------------------------------------------------------------------ | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | - ---- - -### `source` - -Loads static html or a uri (with optional headers) in the WebView. - -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------- | -------- | -| object: {uri: string,method: string,headers: object,body: string}, ,object: {html: string,baseUrl: string}, ,number | No | - ---- - -### `startInLoadingState` - -Boolean value that forces the `WebView` to show the loading view on the first load. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -The style to apply to the `WebView`. - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use the string shortcuts `"normal"` and `"fast"` which match the underlying iOS settings for `UIScrollViewDecelerationRateNormal` and `UIScrollViewDecelerationRateFast` respectively: - -- normal: 0.998 -- fast: 0.99 (the default for iOS web view) - -| Type | Required | Platform | -| ------------------------------------- | -------- | -------- | -| ScrollView.propTypes.decelerationRate | No | iOS | - ---- - -### `domStorageEnabled` - -Boolean value to control whether DOM Storage is enabled. Used only in Android. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `javaScriptEnabled` - -Boolean value to enable JavaScript in the `WebView`. Used on Android only as JavaScript is enabled by default on iOS. The default value is `true`. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `userAgent` - -Sets the user-agent for the `WebView`. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `allowsInlineMediaPlayback` - -Boolean that determines whether HTML5 videos play inline or use the native full-screen controller. The default value is `false`. - -**NOTE** : In order for video to play inline, not only does this property need to be set to `true`, but the video element in the HTML document must also include the `webkit-playsinline` attribute. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bounces` - -Boolean value that determines whether the web view bounces when it reaches the edge of the content. The default value is `true`. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `scrollEnabled` - -Boolean value that determines whether scrolling is enabled in the `WebView`. The default value is `true`. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `url` - -**Deprecated.** Use the `source` prop instead. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `html` - -**Deprecated.** Use the `source` prop instead. - -| Type | Required | -| ------ | -------- | -| string | No | - -## Methods - -### `goForward()` - -```jsx -goForward(); -``` - -Go forward one page in the web view's history. - ---- - -### `goBack()` - -```jsx -goBack(); -``` - -Go back one page in the web view's history. - ---- - -### `reload()` - -```jsx -reload(); -``` - -Reloads the current page. - ---- - -### `stopLoading()` - -```jsx -stopLoading(); -``` - -Stop loading the current page. - ---- - -### `getWebViewHandle()` - -```jsx -getWebViewHandle(): -``` - -Returns the native `WebView` node. diff --git a/website/versioned_docs/version-0.30/activityindicator.md b/website/versioned_docs/version-0.30/activityindicator.md deleted file mode 100644 index fd9da5fd596..00000000000 --- a/website/versioned_docs/version-0.30/activityindicator.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -id: version-0.30-activityindicator -title: ActivityIndicator -original_id: activityindicator ---- - -Displays a circular loading indicator. - -### Props - -- [View props...](view.md#props) - -* [`animating`](activityindicator.md#animating) -* [`color`](activityindicator.md#color) -* [`size`](activityindicator.md#size) -* [`hidesWhenStopped`](activityindicator.md#hideswhenstopped) - ---- - -# Reference - -## Props - -### `animating` - -Whether to show the indicator (true, the default) or hide it (false). - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `color` - -The foreground color of the spinner (default is gray). - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `size` - -Size of the indicator. Small has a height of 20, large has a height of 36. Other sizes can be obtained using a scale transform. - -| Type | Required | -| ---- | -------- | - - -| PropTypes.oneOf([ 'small', 'large', ]) | No | - ---- - -### `hidesWhenStopped` - -Whether the indicator should hide when not animating (true by default). - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.bool | No | iOS | diff --git a/website/versioned_docs/version-0.30/datepickerios.md b/website/versioned_docs/version-0.30/datepickerios.md deleted file mode 100644 index bf5d860b1e0..00000000000 --- a/website/versioned_docs/version-0.30/datepickerios.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -id: version-0.30-datepickerios -title: DatePickerIOS -original_id: datepickerios ---- - -Use `DatePickerIOS` to render a date/time picker (selector) on iOS. This is a controlled component, so you must hook in to the `onDateChange` callback and update the `date` prop in order for the component to update, otherwise the user's change will be reverted immediately to reflect `props.date` as the source of truth. - -### Props - -- [View props...](view.md#props) - -* [`date`](datepickerios.md#date) -* [`maximumDate`](datepickerios.md#maximumdate) -* [`minimumDate`](datepickerios.md#minimumdate) -* [`minuteInterval`](datepickerios.md#minuteinterval) -* [`mode`](datepickerios.md#mode) -* [`onDateChange`](datepickerios.md#ondatechange) -* [`timeZoneOffsetInMinutes`](datepickerios.md#timezoneoffsetinminutes) - ---- - -# Reference - -## Props - -### `date` - -The currently selected date. - -| Type | Required | -| ------------------------------------- | -------- | -| PropTypes.instanceOf(Date).isRequired | No | - ---- - -### `maximumDate` - -Maximum date. - -Restricts the range of possible date/time values. - -| Type | Required | -| -------------------------- | -------- | -| PropTypes.instanceOf(Date) | No | - ---- - -### `minimumDate` - -Minimum date. - -Restricts the range of possible date/time values. - -| Type | Required | -| -------------------------- | -------- | -| PropTypes.instanceOf(Date) | No | - ---- - -### `minuteInterval` - -The interval at which minutes can be selected. - -| Type | Required | -| ------------------------------------------------------- | -------- | -| PropTypes.oneOf([1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30]) | No | - ---- - -### `mode` - -The date picker mode. - -| Type | Required | -| --------------------------------------------- | -------- | -| PropTypes.oneOf(['date', 'time', 'datetime']) | No | - ---- - -### `onDateChange` - -Date change handler. - -This is called when the user changes the date or time in the UI. The first and only argument is a Date object representing the new date and time. - -| Type | Required | -| ------------------------- | -------- | -| PropTypes.func.isRequired | No | - ---- - -### `timeZoneOffsetInMinutes` - -Timezone offset in minutes. - -By default, the date picker will use the device's timezone. With this parameter, it is possible to force a certain timezone offset. For instance, to show times in Pacific Standard Time, pass -7 \* 60. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.number | No | diff --git a/website/versioned_docs/version-0.30/drawerlayoutandroid.md b/website/versioned_docs/version-0.30/drawerlayoutandroid.md deleted file mode 100644 index 0de839c8c4b..00000000000 --- a/website/versioned_docs/version-0.30/drawerlayoutandroid.md +++ /dev/null @@ -1,209 +0,0 @@ ---- -id: version-0.30-drawerlayoutandroid -title: DrawerLayoutAndroid -original_id: drawerlayoutandroid ---- - -React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop. - -Example: - -``` -render: function() { - var navigationView = ( - - I'm in the Drawer! - - ); - return ( - navigationView}> - - Hello - World! - - - ); -}, -``` - -### Props - -- [View props...](view.md#props) - -* [`onDrawerClose`](drawerlayoutandroid.md#ondrawerclose) -* [`drawerBackgroundColor`](drawerlayoutandroid.md#drawerbackgroundcolor) -* [`drawerPosition`](drawerlayoutandroid.md#drawerposition) -* [`drawerWidth`](drawerlayoutandroid.md#drawerwidth) -* [`keyboardDismissMode`](drawerlayoutandroid.md#keyboarddismissmode) -* [`drawerLockMode`](drawerlayoutandroid.md#drawerlockmode) -* [`onDrawerOpen`](drawerlayoutandroid.md#ondraweropen) -* [`onDrawerSlide`](drawerlayoutandroid.md#ondrawerslide) -* [`onDrawerStateChanged`](drawerlayoutandroid.md#ondrawerstatechanged) -* [`renderNavigationView`](drawerlayoutandroid.md#rendernavigationview) -* [`statusBarBackgroundColor`](drawerlayoutandroid.md#statusbarbackgroundcolor) - -### Methods - -- [`openDrawer`](drawerlayoutandroid.md#opendrawer) -- [`closeDrawer`](drawerlayoutandroid.md#closedrawer) - ---- - -# Reference - -## Props - -### `onDrawerClose` - -Function called whenever the navigation view has been closed. - -| Type | Required | -| ------------------- | -------- | -| ReactPropTypes.func | No | - ---- - -### `drawerBackgroundColor` - -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: - -``` -return ( - - -); -``` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `drawerPosition` - -Specifies the side of the screen from which the drawer will slide in. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right ]) | No | - ---- - -### `drawerWidth` - -Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'none', // default 'on-drag', ]) | No | - ---- - -### `drawerLockMode` - -Specifies the lock mode of the drawer. The drawer can be locked in 3 states: - -- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures. -- locked-closed, meaning that the drawer will stay closed and not respond to gestures. -- locked-open, meaning that the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`). - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'unlocked', 'locked-closed', 'locked-open' ]) | No | - ---- - -### `onDrawerOpen` - -Function called whenever the navigation view has been opened. - -| Type | Required | -| ------------------- | -------- | -| ReactPropTypes.func | No | - ---- - -### `onDrawerSlide` - -Function called whenever there is an interaction with the navigation view. - -| Type | Required | -| ------------------- | -------- | -| ReactPropTypes.func | No | - ---- - -### `onDrawerStateChanged` - -Function called when the drawer state has changed. The drawer can be in 3 states: - -- idle, meaning there is no interaction with the navigation view happening at the time -- dragging, meaning there is currently an interaction with the navigation view -- settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation - -| Type | Required | -| ------------------- | -------- | -| ReactPropTypes.func | No | - ---- - -### `renderNavigationView` - -The navigation view that will be rendered to the side of the screen and can be pulled in. - -| Type | Required | -| ------------------------------ | -------- | -| ReactPropTypes.func.isRequired | No | - ---- - -### `statusBarBackgroundColor` - -Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar. It will only have an effect on API 21+. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - -## Methods - -### `openDrawer()` - -```jsx -openDrawer(); -``` - -Opens the drawer. - ---- - -### `closeDrawer()` - -```jsx -closeDrawer(); -``` - -Closes the drawer. diff --git a/website/versioned_docs/version-0.30/image-style-props.md b/website/versioned_docs/version-0.30/image-style-props.md deleted file mode 100644 index a4f1527fa05..00000000000 --- a/website/versioned_docs/version-0.30/image-style-props.md +++ /dev/null @@ -1,149 +0,0 @@ ---- -id: version-0.30-image-style-props -title: Image Style Props -original_id: image-style-props ---- - -### Props - -- [`borderTopRightRadius`](image-style-props.md#bordertoprightradius) -- [`backfaceVisibility`](image-style-props.md#backfacevisibility) -- [`borderBottomLeftRadius`](image-style-props.md#borderbottomleftradius) -- [`borderBottomRightRadius`](image-style-props.md#borderbottomrightradius) -- [`borderColor`](image-style-props.md#bordercolor) -- [`borderRadius`](image-style-props.md#borderradius) -- [`borderTopLeftRadius`](image-style-props.md#bordertopleftradius) -- [`backgroundColor`](image-style-props.md#backgroundcolor) -- [`borderWidth`](image-style-props.md#borderwidth) -- [`opacity`](image-style-props.md#opacity) -- [`overflow`](image-style-props.md#overflow) -- [`resizeMode`](image-style-props.md#resizemode) -- [`tintColor`](image-style-props.md#tintcolor) -- [`overlayColor`](image-style-props.md#overlaycolor) - ---- - -# Reference - -## Props - -### `borderTopRightRadius` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `backfaceVisibility` - -| Type | Required | -| ------------------------------------------- | -------- | -| ReactPropTypes.oneOf(['visible', 'hidden']) | No | - ---- - -### `borderBottomLeftRadius` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderBottomRightRadius` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderRadius` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderTopLeftRadius` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `backgroundColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderWidth` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `opacity` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `overflow` - -| Type | Required | -| ------------------------------------------- | -------- | -| ReactPropTypes.oneOf(['visible', 'hidden']) | No | - ---- - -### `resizeMode` - -| Type | Required | -| -------------------------------------------------- | -------- | -| ReactPropTypes.oneOf(Object.keys(ImageResizeMode)) | No | - ---- - -### `tintColor` - -Changes the color of all the non-transparent pixels to the tintColor. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `overlayColor` - -When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners: - -- Certain resize modes, such as 'contain' -- Animated GIFs - -A typical way to use this prop is with images displayed on a solid background and setting the `overlayColor` to the same color as the background. - -For details of how this works under the hood, see http://frescolib.org/rounded-corners-and-circles.md - -| Type | Required | Platform | -| --------------------- | -------- | -------- | -| ReactPropTypes.string | No | Android | diff --git a/website/versioned_docs/version-0.30/image.md b/website/versioned_docs/version-0.30/image.md deleted file mode 100644 index 8a1239d6df7..00000000000 --- a/website/versioned_docs/version-0.30/image.md +++ /dev/null @@ -1,341 +0,0 @@ ---- -id: version-0.30-image -title: Image -original_id: image ---- - -A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. - -This example shows both fetching and displaying an image from local storage as well as on from network. - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, View, Image } from 'react-native'; - -class DisplayAnImage extends Component { - render() { - return ( - - - - - ); - } -} - -// App registration and rendering -AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage); -``` - -You can also add `style` to an image: - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, View, Image, StyleSheet} from 'react-native'; - -const styles = StyleSheet.create({ - stretch: { - width: 50, - height: 200 - } -}); - -class DisplayAnImageWithStyle extends Component { - render() { - return ( - - - - ); - } -} - -// App registration and rendering -AppRegistry.registerComponent( - 'DisplayAnImageWithStyle', - () => DisplayAnImageWithStyle -); -``` - -### Props - -- [`testID`](image.md#testid) -- [`onLayout`](image.md#onlayout) -- [`onLoadEnd`](image.md#onloadend) -- [`onLoadStart`](image.md#onloadstart) -- [`resizeMode`](image.md#resizemode) -- [`source`](image.md#source) -- [`style`](image.md#style) -- [`onLoad`](image.md#onload) -- [`accessibilityLabel`](image.md#accessibilitylabel) -- [`accessible`](image.md#accessible) -- [`blurRadius`](image.md#blurradius) -- [`capInsets`](image.md#capinsets) -- [`defaultSource`](image.md#defaultsource) -- [`onError`](image.md#onerror) -- [`onProgress`](image.md#onprogress) - -### Methods - -- [`getSize`](image.md#getsize) -- [`prefetch`](image.md#prefetch) - ---- - -# Reference - -## Props - -### `testID` - -A unique identifier for this element to be used in UI Automation testing scripts. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.string | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{nativeEvent: {layout: {x, y, width, height}}}`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onLoadEnd` - -Invoked when load either succeeds or fails. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onLoadStart` - -Invoked on load start. - -e.g., `onLoadStart={(e) => this.setState({loading: true})}` - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `resizeMode` - -Determines how to resize the image when the frame doesn't match the raw image dimensions. - -- `cover`: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding). - -- `contain`: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). - -- `stretch`: Scale width and height independently, This may change the aspect ratio of the src. - -- `repeat`: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio. (iOS only) - -| Type | Required | -| ---------------------------------------------------------- | -------- | -| PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat']) | No | - ---- - -### `source` - -The image source (either a remote URL or a local file resource). - -| Type | Required | -| ------------------- | -------- | -| ImageSourcePropType | No | - ---- - -### `style` - -> `ImageResizeMode` is an `Enum` for different image resizing modes, set via the `resizeMode` style property on `Image` components. The values are `contain`, `cover`, `stretch`, `center`, `repeat`. - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Shadow Props...](shadow-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderTopRightRadius`**: ReactPropTypes.number - -- **`backfaceVisibility`**: ReactPropTypes.oneOf(['visible', 'hidden']) - -- **`borderBottomLeftRadius`**: ReactPropTypes.number - -- **`borderBottomRightRadius`**: ReactPropTypes.number - -- **`borderColor`**: [color](colors.md) - -- **`borderRadius`**: ReactPropTypes.number - -- **`borderTopLeftRadius`**: ReactPropTypes.number - -- **`backgroundColor`**: [color](colors.md) - -- **`borderWidth`**: ReactPropTypes.number - -- **`opacity`**: ReactPropTypes.number - -- **`overflow`**: ReactPropTypes.oneOf(['visible', 'hidden']) - -- **`resizeMode`**: ReactPropTypes.oneOf(Object.keys(ImageResizeMode)) - -- **`tintColor`**: [color](colors.md) - - Changes the color of all the non-transparent pixels to the tintColor. - -- **`overlayColor`**: ReactPropTypes.string (_Android_) - - When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners: - - - Certain resize modes, such as 'contain' - - Animated GIFs - - A typical way to use this prop is with images displayed on a solid background and setting the `overlayColor` to the same color as the background. - - For details of how this works under the hood, see http://frescolib.org/rounded-corners-and-circles.md - ---- - -### `onLoad` - -Invoked when load completes successfully. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `accessibilityLabel` - -The text that's read by the screen reader when the user interacts with the image. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.string | No | iOS | - ---- - -### `accessible` - -When true, indicates the image is an accessibility element. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.bool | No | iOS | - ---- - -### `blurRadius` - -blurRadius: the blur radius of the blur filter added to the image - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.number | No | iOS | - ---- - -### `capInsets` - -When the image is resized, the corners of the size specified by `capInsets` will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info in the [official Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets). - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `defaultSource` - -A static image to display while loading the image source. - -- `uri` - a string representing the resource identifier for the image, which should be either a local file path or the name of a static image resource (which should be wrapped in the `require('./path/to/image.png')` function). -- `width`, `height` - can be specified if known at build time, in which case these will be used to set the default `` component dimensions. -- `scale` - used to indicate the scale factor of the image. Defaults to 1.0 if unspecified, meaning that one image pixel equates to one display point / DIP. -- `number` - Opaque type returned by something like `require('./image.jpg')`. - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| PropTypes.oneOfType([ // TODO: Tooling to support documenting these directly and having them display in the docs. PropTypes.shape({ uri: PropTypes.string, width: PropTypes.number, height: PropTypes.number, scale: PropTypes.number, }), PropTypes.number, ]) | No | iOS | - ---- - -### `onError` - -Invoked on load error with `{nativeEvent: {error}}`. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.func | No | iOS | - ---- - -### `onProgress` - -Invoked on download progress with `{nativeEvent: {loaded, total}}`. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.func | No | iOS | - -## Methods - -### `getSize()` - -```jsx -static getSize(uri: string, success: function, failure: function): -``` - -Retrieve the width and height (in pixels) of an image prior to displaying it. This method can fail if the image cannot be found, or fails to download. - -In order to retrieve the image dimensions, the image may first need to be loaded or downloaded, after which it will be cached. This means that in principle you could use this method to preload images, however it is not optimized for that purpose, and may in future be implemented in a way that does not fully load/download the image data. A proper, supported way to preload images will be provided as a separate API. - -**Parameters:** - -| Name | Type | Required | Description | -| ------- | -------- | -------- | -------------------------------------------------------------------------------------------------- | -| uri | string | Yes | The location of the image. | -| success | function | Yes | The function that will be called if the image was sucessfully found and widthand height retrieved. | -| failure | function | Yes | The function that will be called if there was an error, such as failing toto retrieve the image. | - ---- - -### `prefetch()` - -```jsx -static prefetch(url: string): -``` - -Prefetches a remote image for later use by downloading it to the disk cache - -**Parameters:** - -| Name | Type | Required | Description | -| ---- | ------ | -------- | --------------------------------- | -| url | string | Yes | The remote location of the image. | diff --git a/website/versioned_docs/version-0.30/keyboardavoidingview.md b/website/versioned_docs/version-0.30/keyboardavoidingview.md deleted file mode 100644 index 7885d15ce0f..00000000000 --- a/website/versioned_docs/version-0.30/keyboardavoidingview.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -id: version-0.30-keyboardavoidingview -title: KeyboardAvoidingView -original_id: keyboardavoidingview ---- - -### Props - -- [View props...](view.md#props) - -* [`behavior`](keyboardavoidingview.md#behavior) -* [`keyboardVerticalOffset`](keyboardavoidingview.md#keyboardverticaloffset) - -### Methods - -- [`relativeKeyboardHeight`](keyboardavoidingview.md#relativekeyboardheight) -- [`onKeyboardChange`](keyboardavoidingview.md#onkeyboardchange) -- [`onLayout`](keyboardavoidingview.md#onlayout) - ---- - -# Reference - -## Props - -### `behavior` - -| Type | Required | -| -------------------------------------------------- | -------- | -| PropTypes.oneOf(['height', 'position', 'padding']) | No | - ---- - -### `keyboardVerticalOffset` - -This is the distance between the top of the user screen and the react native view, may be non-zero in some use cases. - -| Type | Required | -| --------------------------- | -------- | -| PropTypes.number.isRequired | No | - -## Methods - -### `relativeKeyboardHeight()` - -```jsx -relativeKeyboardHeight(keyboardFrame: object): -``` - ---- - -### `onKeyboardChange()` - -```jsx -onKeyboardChange((event: object)); -``` - ---- - -### `onLayout()` - -```jsx -onLayout((event: object)); -``` diff --git a/website/versioned_docs/version-0.30/layout-props.md b/website/versioned_docs/version-0.30/layout-props.md deleted file mode 100644 index e527bf1a762..00000000000 --- a/website/versioned_docs/version-0.30/layout-props.md +++ /dev/null @@ -1,483 +0,0 @@ ---- -id: version-0.30-layout-props -title: Layout Props -original_id: layout-props ---- - -### Props - -- [`marginRight`](layout-props.md#marginright) -- [`alignItems`](layout-props.md#alignitems) -- [`borderBottomWidth`](layout-props.md#borderbottomwidth) -- [`borderLeftWidth`](layout-props.md#borderleftwidth) -- [`borderRightWidth`](layout-props.md#borderrightwidth) -- [`borderTopWidth`](layout-props.md#bordertopwidth) -- [`borderWidth`](layout-props.md#borderwidth) -- [`bottom`](layout-props.md#bottom) -- [`flex`](layout-props.md#flex) -- [`flexDirection`](layout-props.md#flexdirection) -- [`flexWrap`](layout-props.md#flexwrap) -- [`height`](layout-props.md#height) -- [`justifyContent`](layout-props.md#justifycontent) -- [`left`](layout-props.md#left) -- [`margin`](layout-props.md#margin) -- [`marginBottom`](layout-props.md#marginbottom) -- [`marginHorizontal`](layout-props.md#marginhorizontal) -- [`marginLeft`](layout-props.md#marginleft) -- [`alignSelf`](layout-props.md#alignself) -- [`marginTop`](layout-props.md#margintop) -- [`marginVertical`](layout-props.md#marginvertical) -- [`maxHeight`](layout-props.md#maxheight) -- [`maxWidth`](layout-props.md#maxwidth) -- [`minHeight`](layout-props.md#minheight) -- [`minWidth`](layout-props.md#minwidth) -- [`padding`](layout-props.md#padding) -- [`paddingBottom`](layout-props.md#paddingbottom) -- [`paddingHorizontal`](layout-props.md#paddinghorizontal) -- [`paddingLeft`](layout-props.md#paddingleft) -- [`paddingRight`](layout-props.md#paddingright) -- [`paddingTop`](layout-props.md#paddingtop) -- [`paddingVertical`](layout-props.md#paddingvertical) -- [`position`](layout-props.md#position) -- [`right`](layout-props.md#right) -- [`top`](layout-props.md#top) -- [`width`](layout-props.md#width) -- [`zIndex`](layout-props.md#zindex) - ---- - -# Reference - -## Props - -### `marginRight` - -`marginRight` works like `margin-right` in CSS. See http://www.w3schools.com/cssref/pr_margin-right.asp for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `alignItems` - -`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS, except the default value is `stretch` instead of `flex-start`. See https://css-tricks.com/almanac/properties/a/align-items/ for more detail. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'flex-start', 'flex-end', 'center', 'stretch' ]) | No | - ---- - -### `borderBottomWidth` - -`borderBottomWidth` works like `border-bottom-width` in CSS. See http://www.w3schools.com/cssref/pr_border-bottom_width.asp for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderLeftWidth` - -`borderLeftWidth` works like `border-left-width` in CSS. See http://www.w3schools.com/cssref/pr_border-bottom_width.asp for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderRightWidth` - -`borderRightWidth` works like `border-right-width` in CSS. See http://www.w3schools.com/cssref/pr_border-right_width.asp for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderTopWidth` - -`borderTopWidth` works like `border-top-width` in CSS. See http://www.w3schools.com/cssref/pr_border-top_width.asp for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderWidth` - -`borderWidth` works like `border-width` in CSS. See http://www.w3schools.com/cssref/pr_border-width.asp for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `bottom` - -`bottom` is the number of logical pixels to offset the bottom edge of this component. - -It works similarly to `bottom` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of how `top` affects layout. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `flex` - -In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the `css-layout` library at https://github.com/facebook/css-layout . - -When `flex` is a positive number, it makes the component flexible and it will be sized proportional to its flex value. So a component with `flex` set to 2 will take twice the space as a component with `flex` set to 1. - -When `flex` is 0, the component is sized according to `width` and `height` and it is inflexible. - -When `flex` is -1, the component is normally sized according `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `flexDirection` - -`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`. See https://css-tricks.com/almanac/properties/f/flex-direction/ for more detail. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'row', 'row-reverse', 'column', 'column-reverse' ]) | No | - ---- - -### `flexWrap` - -`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS. See https://css-tricks.com/almanac/properties/f/flex-wrap/ for more detail. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'wrap', 'nowrap' ]) | No | - ---- - -### `height` - -`height` sets the height of this component. - -It works similarly to `height` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See http://www.w3schools.com/cssref/pr_dim_width.asp for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `justifyContent` - -`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS. See https://css-tricks.com/almanac/properties/j/justify-content/ for more detail. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'flex-start', 'flex-end', 'center', 'space-between', 'space-around' ]) | No | - ---- - -### `left` - -`left` is the number of logical pixels to offset the left edge of this component. - -It works similarly to `left` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of how `left` affects layout. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `margin` - -Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `marginBottom` - -`marginBottom` works like `margin-bottom` in CSS. See http://www.w3schools.com/cssref/pr_margin-bottom.asp for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `marginHorizontal` - -Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `marginLeft` - -`marginLeft` works like `margin-left` in CSS. See http://www.w3schools.com/cssref/pr_margin-left.asp for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `alignSelf` - -`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS. See https://css-tricks.com/almanac/properties/a/align-self/ for more detail. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'auto', 'flex-start', 'flex-end', 'center', 'stretch' ]) | No | - ---- - -### `marginTop` - -`marginTop` works like `margin-top` in CSS. See http://www.w3schools.com/cssref/pr_margin-top.asp for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `marginVertical` - -Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `maxHeight` - -`maxHeight` is the maximum height for this component, in logical pixels. - -It works similarly to `max-height` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See http://www.w3schools.com/cssref/pr_dim_max-height.asp for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `maxWidth` - -`maxWidth` is the maximum width for this component, in logical pixels. - -It works similarly to `max-width` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See http://www.w3schools.com/cssref/pr_dim_max-width.asp for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `minHeight` - -`minHeight` is the minimum height for this component, in logical pixels. - -It works similarly to `min-height` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See http://www.w3schools.com/cssref/pr_dim_min-height.asp for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `minWidth` - -`minWidth` is the minimum width for this component, in logical pixels. - -It works similarly to `min-width` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See http://www.w3schools.com/cssref/pr_dim_min-width.asp for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `padding` - -`padding` works like `padding` in CSS. It's like setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight` to the same thing. See http://www.w3schools.com/css/css_padding.asp for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingBottom` - -`paddingBottom` works like `padding-bottom` in CSS. See http://www.w3schools.com/cssref/pr_padding-bottom.asp for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingHorizontal` - -Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRight`. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingLeft` - -`paddingLeft` works like `padding-left` in CSS. See http://www.w3schools.com/cssref/pr_padding-left.asp for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingRight` - -`paddingRight` works like `padding-right` in CSS. See http://www.w3schools.com/cssref/pr_padding-right.asp for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingTop` - -`paddingTop` works like `padding-top` in CSS. See http://www.w3schools.com/cssref/pr_padding-top.asp for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingVertical` - -Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBottom`. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `position` - -`position` in React Native is similar to regular CSS, but everything is set to `relative` by default, so `absolute` positioning is always relative to the parent. - -If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have `absolute` position. - -If you want to position a child relative to something that is not its parent, don't use styles for that. Use the component tree. - -See https://github.com/facebook/css-layout for more details on how `position` differs between React Native and CSS. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'absolute', 'relative' ]) | No | - ---- - -### `right` - -`right` is the number of logical pixels to offset the right edge of this component. - -It works similarly to `right` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of how `right` affects layout. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `top` - -`top` is the number of logical pixels to offset the top edge of this component. - -It works similarly to `top` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how `top` affects layout. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `width` - -`width` sets the width of this component. - -It works similarly to `width` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See http://www.w3schools.com/cssref/pr_dim_width.asp for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `zIndex` - -`zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior. - -It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for more detail. - -On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | diff --git a/website/versioned_docs/version-0.30/modal.md b/website/versioned_docs/version-0.30/modal.md deleted file mode 100644 index 828e4cb1b7f..00000000000 --- a/website/versioned_docs/version-0.30/modal.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -id: version-0.30-modal -title: Modal -original_id: modal ---- - -The Modal component is a way to present content above an enclosing view. - -_Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator. Go [here](navigator-comparison.md) to compare navigation options._ - -```jsx -import React, { Component } from 'react'; -import { - Modal, - Text, - TouchableHighlight, - View -} from 'react-native'; - -class ModalExample extends Component { - constructor(props) { - super(props); - this.state = { modalVisible: false }; - } - - setModalVisible(visible) { - this.setState({ modalVisible: visible }); - } - - render() { - return ( - - { - alert('Modal has been closed.'); - }}> - - - Hello World! - - { - this.setModalVisible(!this.state.modalVisible); - }}> - Hide Modal - - - - - - { - this.setModalVisible(true); - }}> - Show Modal - - - ); - } -} -``` - -### Props - -- [`animationType`](modal.md#animationtype) -- [`onRequestClose`](modal.md#onrequestclose) -- [`onShow`](modal.md#onshow) -- [`transparent`](modal.md#transparent) -- [`visible`](modal.md#visible) -- [`animated`](modal.md#animated) - ---- - -# Reference - -## Props - -### `animationType` - -The `animationType` prop controls how the modal animates. - -- `slide` slides in from the bottom -- `fade` fades into view -- `none` appears without an animation - -| Type | Required | -| ------------------------------------------ | -------- | -| PropTypes.oneOf(['none', 'slide', 'fade']) | No | - ---- - -### `onRequestClose` - -The `onRequestClose` prop allows passing a function that will be called once the modal has been dismissed. - -_On the Android platform, this is a required function._ - -| Type | Required | -| ---------------------------------------------------------------------- | -------- | -| Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func | No | - ---- - -### `onShow` - -The `onShow` prop allows passing a function that will be called once the modal has been shown. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `transparent` - -The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `visible` - -The `visible` prop determines whether your modal is visible. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `animated` - -**Deprecated.** Use the `animationType` prop instead. - -| Type | Required | -| ---- | -------- | -| bool | No | diff --git a/website/versioned_docs/version-0.30/progressbarandroid.md b/website/versioned_docs/version-0.30/progressbarandroid.md deleted file mode 100644 index dd555f1c845..00000000000 --- a/website/versioned_docs/version-0.30/progressbarandroid.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: version-0.30-progressbarandroid -title: ProgressBarAndroid -original_id: progressbarandroid ---- - -React component that wraps the Android-only `ProgressBar`. This component is used to indicate that the app is loading or there is some activity in the app. - -Example: - -``` -render: function() { - var progressBar = - - - ; - - return ( - - ); -}, -``` - -### Props - -- [View props...](view.md#props) - -* [`color`](progressbarandroid.md#color) -* [`indeterminate`](progressbarandroid.md#indeterminate) -* [`progress`](progressbarandroid.md#progress) -* [`styleAttr`](progressbarandroid.md#styleattr) -* [`testID`](progressbarandroid.md#testid) - ---- - -# Reference - -## Props - -### `color` - -Color of the progress bar. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `indeterminate` - -If the progress bar will show indeterminate progress. Note that this can only be false if styleAttr is Horizontal. - -| Type | Required | -| ----------------- | -------- | -| indeterminateType | No | - ---- - -### `progress` - -The progress value (between 0 and 1). - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `styleAttr` - -Style of the ProgressBar. One of: - -- Horizontal -- Normal (default) -- Small -- Large -- Inverse -- SmallInverse -- LargeInverse - -| Type | Required | -| -------------------------------------- | -------- | -| ReactPropTypes.oneOf(STYLE_ATTRIBUTES) | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.string | No | diff --git a/website/versioned_docs/version-0.30/progressviewios.md b/website/versioned_docs/version-0.30/progressviewios.md deleted file mode 100644 index f06d5b80356..00000000000 --- a/website/versioned_docs/version-0.30/progressviewios.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: version-0.30-progressviewios -title: ProgressViewIOS -original_id: progressviewios ---- - -Use `ProgressViewIOS` to render a UIProgressView on iOS. - -### Props - -- [View props...](view.md#props) - -* [`progress`](progressviewios.md#progress) -* [`progressImage`](progressviewios.md#progressimage) -* [`progressTintColor`](progressviewios.md#progresstintcolor) -* [`progressViewStyle`](progressviewios.md#progressviewstyle) -* [`trackImage`](progressviewios.md#trackimage) -* [`trackTintColor`](progressviewios.md#tracktintcolor) - ---- - -# Reference - -## Props - -### `progress` - -The progress value (between 0 and 1). - -| Type | Required | -| ---------------- | -------- | -| PropTypes.number | No | - ---- - -### `progressImage` - -A stretchable image to display as the progress bar. - -| Type | Required | -| ---------------------- | -------- | -| Image.propTypes.source | No | - ---- - -### `progressTintColor` - -The tint color of the progress bar itself. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.string | No | - ---- - -### `progressViewStyle` - -The progress bar style. - -| Type | Required | -| ----------------------------------- | -------- | -| PropTypes.oneOf(['default', 'bar']) | No | - ---- - -### `trackImage` - -A stretchable image to display behind the progress bar. - -| Type | Required | -| ---------------------- | -------- | -| Image.propTypes.source | No | - ---- - -### `trackTintColor` - -The tint color of the progress bar track. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.string | No | diff --git a/website/versioned_docs/version-0.30/scrollview.md b/website/versioned_docs/version-0.30/scrollview.md deleted file mode 100644 index 310daca6bf9..00000000000 --- a/website/versioned_docs/version-0.30/scrollview.md +++ /dev/null @@ -1,534 +0,0 @@ ---- -id: version-0.30-scrollview -title: ScrollView -original_id: scrollview ---- - -Component that wraps platform ScrollView while providing integration with touch locking "responder" system. - -Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer `{flex: 1}` down the view stack can lead to errors here, which the element inspector can help to debug. - -Doesn't yet support other contained responders from blocking this scroll view from becoming the responder. - -### Props - -- [View props...](view.md#props) - -* [`bounces`](scrollview.md#bounces) -* [`contentContainerStyle`](scrollview.md#contentcontainerstyle) -* [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) -* [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) -* [`onContentSizeChange`](scrollview.md#oncontentsizechange) -* [`onScroll`](scrollview.md#onscroll) -* [`pagingEnabled`](scrollview.md#pagingenabled) -* [`refreshControl`](scrollview.md#refreshcontrol) -* [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) -* [`scrollEnabled`](scrollview.md#scrollenabled) -* [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) -* [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) -* [`style`](scrollview.md#style) -* [`endFillColor`](scrollview.md#endfillcolor) -* [`scrollPerfTag`](scrollview.md#scrollperftag) -* [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) -* [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) -* [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) -* [`horizontal`](scrollview.md#horizontal) -* [`bouncesZoom`](scrollview.md#bounceszoom) -* [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) -* [`centerContent`](scrollview.md#centercontent) -* [`contentInset`](scrollview.md#contentinset) -* [`contentOffset`](scrollview.md#contentoffset) -* [`decelerationRate`](scrollview.md#decelerationrate) -* [`directionalLockEnabled`](scrollview.md#directionallockenabled) -* [`indicatorStyle`](scrollview.md#indicatorstyle) -* [`maximumZoomScale`](scrollview.md#maximumzoomscale) -* [`minimumZoomScale`](scrollview.md#minimumzoomscale) -* [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) -* [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) -* [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) -* [`scrollsToTop`](scrollview.md#scrollstotop) -* [`snapToAlignment`](scrollview.md#snaptoalignment) -* [`snapToInterval`](scrollview.md#snaptointerval) -* [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) -* [`zoomScale`](scrollview.md#zoomscale) - -### Methods - -- [`scrollTo`](scrollview.md#scrollto) -- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) - ---- - -# Reference - -## Props - -### `bounces` - -When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. When false, it disables all bouncing even if the `alwaysBounce*` props are true. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `contentContainerStyle` - -These styles will be applied to the scroll view content container which wraps all of the child views. Example: - -return ( ); ... const styles = StyleSheet.create({ contentContainer: { paddingVertical: 20 } }); - -| Type | Required | -| ------------------------------------ | -------- | -| StyleSheetPropType(View Style props) | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. -- 'interactive', the keyboard is dismissed interactively with the drag and moves in synchrony with the touch; dragging upwards cancels the dismissal. On android this is not supported and it will have the same behavior as 'none'. - -| Type | Required | -| -------------------------------------- | -------- | -| enum('none', 'interactive', 'on-drag') | No | - ---- - -### `keyboardShouldPersistTaps` - -When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the scroll view will not catch taps, and the keyboard will not dismiss automatically. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onContentSizeChange` - -Called when scrollable content view of the ScrollView changes. - -Handler function is passed the content width and content height as parameters: `(contentWidth, contentHeight)` - -It's implemented using onLayout handler attached to the content container which this ScrollView renders. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onScroll` - -Fires at most once per frame during scrolling. The frequency of the events can be controlled using the `scrollEventThrottle` prop. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `pagingEnabled` - -When true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `refreshControl` - -A RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView. - -See [RefreshControl](refreshcontrol.md). - -| Type | Required | -| ------- | -------- | -| element | No | - ---- - -### `removeClippedSubviews` - -Experimental: When true, offscreen child views (whose `overflow` value is `hidden`) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `scrollEnabled` - -When false, the content does not scroll. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsHorizontalScrollIndicator` - -When true, shows a horizontal scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsVerticalScrollIndicator` - -When true, shows a vertical scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Shadow Props...](shadow-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderRightColor`**: [color](colors.md) - -- **`backfaceVisibility`**: ReactPropTypes.oneOf(['visible', 'hidden']) - -- **`borderBottomColor`**: [color](colors.md) - -- **`borderBottomLeftRadius`**: ReactPropTypes.number - -- **`borderBottomRightRadius`**: ReactPropTypes.number - -- **`borderBottomWidth`**: ReactPropTypes.number - -- **`borderColor`**: [color](colors.md) - -- **`borderLeftColor`**: [color](colors.md) - -- **`borderLeftWidth`**: ReactPropTypes.number - -- **`borderRadius`**: ReactPropTypes.number - -- **`backgroundColor`**: [color](colors.md) - -- **`borderRightWidth`**: ReactPropTypes.number - -- **`borderStyle`**: ReactPropTypes.oneOf(['solid', 'dotted', 'dashed']) - -- **`borderTopColor`**: [color](colors.md) - -- **`borderTopLeftRadius`**: ReactPropTypes.number - -- **`borderTopRightRadius`**: ReactPropTypes.number - -- **`borderTopWidth`**: ReactPropTypes.number - -- **`borderWidth`**: ReactPropTypes.number - -- **`opacity`**: ReactPropTypes.number - -- **`overflow`**: ReactPropTypes.oneOf(['visible', 'hidden']) - -- **`elevation`**: ReactPropTypes.number (_Android_) - - (Android-only) Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions. - ---- - -### `endFillColor` - -Sometimes a scrollview takes up more space than its content fills. When this is the case, this prop will fill the rest of the scrollview with a color to avoid setting a background and creating unnecessary overdraw. This is an advanced optimization that is not needed in the general case. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `scrollPerfTag` - -Tag used to log scroll performance on this scroll view. Will force momentum events to be turned on (see sendMomentumEvents). This doesn't do anything out of the box and you need to implement a custom native FpsListener for it to be useful. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `alwaysBounceHorizontal` - -When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself. The default value is true when `horizontal={true}` and false otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `alwaysBounceVertical` - -When true, the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself. The default value is false when `horizontal={true}` and true otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `automaticallyAdjustContentInsets` - -Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/ toolbar. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `horizontal` - -When true, the scroll view's children are arranged horizontally in a row instead of vertically in a column. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `bouncesZoom` - -When true, gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture end, otherwise the zoom will not exceed the limits. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `canCancelContentTouches` - -When false, once tracking starts, won't try to drag if the touch moves. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `centerContent` - -When true, the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `contentInset` - -The amount by which the scroll view content is inset from the edges of the scroll view. Defaults to `{top: 0, left: 0, bottom: 0, right: 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `contentOffset` - -Used to manually set the starting scroll offset. The default value is `{x: 0, y: 0}`. - -| Type | Required | Platform | -| ------------- | -------- | -------- | -| PointPropType | No | iOS | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use string shortcuts `"normal"` and `"fast"` which match the underlying iOS settings for `UIScrollViewDecelerationRateNormal` and `UIScrollViewDecelerationRateFast` respectively. - -- normal: 0.998 (the default) -- fast: 0.99 - -| Type | Required | Platform | -| ------------------------------- | -------- | -------- | -| enum('fast', 'normal'), ,number | No | iOS | - ---- - -### `directionalLockEnabled` - -When true, the ScrollView will try to lock to only vertical or horizontal scrolling while dragging. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `indicatorStyle` - -The style of the scroll indicators. - -- `default` (the default), same as `black`. -- `black`, scroll indicator is `black`. This style is good against a light content background. -- `white`, scroll indicator is `white`. This style is good against a dark content background. - -| Type | Required | Platform | -| --------------------------------- | -------- | -------- | -| enum('default', 'black', 'white') | No | iOS | - ---- - -### `maximumZoomScale` - -The maximum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `minimumZoomScale` - -The minimum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `onScrollAnimationEnd` - -Called when a scrolling animation ends. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `scrollEventThrottle` - -This controls how often the scroll event will be fired while scrolling (as a time interval in ms). A lower number yields better accuracy for code that is tracking the scroll position, but can lead to scroll performance problems due to the volume of information being send over the bridge. You will not notice a difference between values set between 1-16 as the JS run loop is synced to the screen refresh rate. If you do not need precise scroll position tracking, set this value higher to limit the information being sent across the bridge. The default value is zero, which results in the scroll event being sent only once each time the view is scrolled. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `scrollIndicatorInsets` - -The amount by which the scroll view indicators are inset from the edges of the scroll view. This should normally be set to the same value as the `contentInset`. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `scrollsToTop` - -When true, the scroll view scrolls to top when the status bar is tapped. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `snapToAlignment` - -When `snapToInterval` is set, `snapToAlignment` will define the relationship of the snapping to the scroll view. - -- `start` (the default) will align the snap at the left (horizontal) or top (vertical) -- `center` will align the snap in the center -- `end` will align the snap at the right (horizontal) or bottom (vertical) - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| enum('start', 'center', 'end') | No | iOS | - ---- - -### `snapToInterval` - -When set, causes the scroll view to stop at multiples of the value of `snapToInterval`. This can be used for paginating through children that have lengths smaller than the scroll view. Used in combination with `snapToAlignment`. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `stickyHeaderIndices` - -An array of child indices determining which children get docked to the top of the screen when scrolling. For example, passing `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction with `horizontal={true}`. - -| Type | Required | Platform | -| --------------- | -------- | -------- | -| array of number | No | iOS | - ---- - -### `zoomScale` - -The current scale of the scroll view content. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - -## Methods - -### `scrollTo()` - -```jsx -scrollTo( - ([y]: number), - object, - ([x]: number), - ([animated]: boolean) -); -``` - -Scrolls to a given x, y offset, either immediately or with a smooth animation. - -Syntax: - -`scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})` - -Note: The weird argument signature is due to the fact that, for historical reasons, the function also accepts separate arguments as as alternative to the options object. This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED. - ---- - -### `scrollWithoutAnimationTo()` - -```jsx -scrollWithoutAnimationTo(y, x); -``` - -Deprecated, do not use. diff --git a/website/versioned_docs/version-0.30/segmentedcontrolios.md b/website/versioned_docs/version-0.30/segmentedcontrolios.md deleted file mode 100644 index 906a49139da..00000000000 --- a/website/versioned_docs/version-0.30/segmentedcontrolios.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: version-0.30-segmentedcontrolios -title: SegmentedControlIOS -original_id: segmentedcontrolios ---- - -Use `SegmentedControlIOS` to render a UISegmentedControl iOS. - -#### Programmatically changing selected index - -The selected index can be changed on the fly by assigning the selectIndex prop to a state variable, then changing that variable. Note that the state variable would need to be updated as the user selects a value and changes the index, as shown in the example below. - -``` - { - this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex}); - }} -/> -``` - -### Props - -- [View props...](view.md#props) - -* [`enabled`](segmentedcontrolios.md#enabled) -* [`momentary`](segmentedcontrolios.md#momentary) -* [`onChange`](segmentedcontrolios.md#onchange) -* [`onValueChange`](segmentedcontrolios.md#onvaluechange) -* [`selectedIndex`](segmentedcontrolios.md#selectedindex) -* [`tintColor`](segmentedcontrolios.md#tintcolor) -* [`values`](segmentedcontrolios.md#values) - ---- - -# Reference - -## Props - -### `enabled` - -If false the user won't be able to interact with the control. Default value is true. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `momentary` - -If true, then selecting a segment won't persist visually. The `onValueChange` callback will still work as expected. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `onChange` - -Callback that is called when the user taps a segment; passes the event as an argument - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onValueChange` - -Callback that is called when the user taps a segment; passes the segment's value as an argument - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `selectedIndex` - -The index in `props.values` of the segment to be (pre)selected. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.number | No | - ---- - -### `tintColor` - -Accent color of the control. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.string | No | - ---- - -### `values` - -The labels for the control's segment buttons, in order. - -| Type | Required | -| ----------------------------------- | -------- | -| PropTypes.arrayOf(PropTypes.string) | No | diff --git a/website/versioned_docs/version-0.30/shadow-props.md b/website/versioned_docs/version-0.30/shadow-props.md deleted file mode 100644 index 07340d232e4..00000000000 --- a/website/versioned_docs/version-0.30/shadow-props.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -id: version-0.30-shadow-props -title: Shadow Props -original_id: shadow-props ---- - -### Props - -- [`shadowColor`](shadow-props.md#shadowcolor) -- [`shadowOffset`](shadow-props.md#shadowoffset) -- [`shadowOpacity`](shadow-props.md#shadowopacity) -- [`shadowRadius`](shadow-props.md#shadowradius) - ---- - -# Reference - -## Props - -### `shadowColor` - -Sets the drop shadow color - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | - ---- - -### `shadowOffset` - -Sets the drop shadow offset - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| ReactPropTypes.shape( {width: ReactPropTypes.number, height: ReactPropTypes.number} ) | No | iOS | - ---- - -### `shadowOpacity` - -Sets the drop shadow opacity (multiplied by the color's alpha component) - -| Type | Required | Platform | -| --------------------- | -------- | -------- | -| ReactPropTypes.number | No | iOS | - ---- - -### `shadowRadius` - -Sets the drop shadow blur radius - -| Type | Required | Platform | -| --------------------- | -------- | -------- | -| ReactPropTypes.number | No | iOS | diff --git a/website/versioned_docs/version-0.30/slider.md b/website/versioned_docs/version-0.30/slider.md deleted file mode 100644 index 75a8c358d3a..00000000000 --- a/website/versioned_docs/version-0.30/slider.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: version-0.30-slider -title: Slider -original_id: slider ---- - -A component used to select a single value from a range of values. - -### Props - -- [View props...](view.md#props) - -* [`testID`](slider.md#testid) -* [`disabled`](slider.md#disabled) -* [`minimumValue`](slider.md#minimumvalue) -* [`onSlidingComplete`](slider.md#onslidingcomplete) -* [`onValueChange`](slider.md#onvaluechange) -* [`step`](slider.md#step) -* [`style`](slider.md#style) -* [`maximumValue`](slider.md#maximumvalue) -* [`value`](slider.md#value) -* [`maximumTrackImage`](slider.md#maximumtrackimage) -* [`maximumTrackTintColor`](slider.md#maximumtracktintcolor) -* [`minimumTrackImage`](slider.md#minimumtrackimage) -* [`minimumTrackTintColor`](slider.md#minimumtracktintcolor) -* [`thumbImage`](slider.md#thumbimage) -* [`trackImage`](slider.md#trackimage) - ---- - -# Reference - -## Props - -### `testID` - -Used to locate this view in UI automation tests. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.string | No | - ---- - -### `disabled` - -If true the user won't be able to move the slider. Default value is false. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `minimumValue` - -Initial minimum value of the slider. Default value is 0. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.number | No | - ---- - -### `onSlidingComplete` - -Callback called when the user finishes changing the value (e.g. when the slider is released). - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onValueChange` - -Callback continuously called while the user is dragging the slider. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `step` - -Step value of the slider. The value should be between 0 and (maximumValue - minimumValue). Default value is 0. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.number | No | - ---- - -### `style` - -Used to style and layout the `Slider`. See `StyleSheet.js` and `ViewStylePropTypes.js` for more info. - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `maximumValue` - -Initial maximum value of the slider. Default value is 1. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.number | No | - ---- - -### `value` - -Initial value of the slider. The value should be between minimumValue and maximumValue, which default to 0 and 1 respectively. Default value is 0. - -_This is not a controlled component_, you don't need to update the value during dragging. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.number | No | - ---- - -### `maximumTrackImage` - -Assigns a maximum track image. Only static images are supported. The leftmost pixel of the image will be stretched to fill the track. - -| Type | Required | Platform | -| ---------------------- | -------- | -------- | -| Image.propTypes.source | No | iOS | - ---- - -### `maximumTrackTintColor` - -The color used for the track to the right of the button. Overrides the default blue gradient image. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.string | No | iOS | - ---- - -### `minimumTrackImage` - -Assigns a minimum track image. Only static images are supported. The rightmost pixel of the image will be stretched to fill the track. - -| Type | Required | Platform | -| ---------------------- | -------- | -------- | -| Image.propTypes.source | No | iOS | - ---- - -### `minimumTrackTintColor` - -The color used for the track to the left of the button. Overrides the default blue gradient image. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.string | No | iOS | - ---- - -### `thumbImage` - -Sets an image for the thumb. Only static images are supported. - -| Type | Required | Platform | -| ---------------------- | -------- | -------- | -| Image.propTypes.source | No | iOS | - ---- - -### `trackImage` - -Assigns a single image for the track. Only static images are supported. The center pixel of the image will be stretched to fill the track. - -| Type | Required | Platform | -| ---------------------- | -------- | -------- | -| Image.propTypes.source | No | iOS | diff --git a/website/versioned_docs/version-0.30/text-style-props.md b/website/versioned_docs/version-0.30/text-style-props.md deleted file mode 100644 index ac86d162157..00000000000 --- a/website/versioned_docs/version-0.30/text-style-props.md +++ /dev/null @@ -1,174 +0,0 @@ ---- -id: version-0.30-text-style-props -title: Text Style Props -original_id: text-style-props ---- - -### Props - -- [`textShadowColor`](text-style-props.md#textshadowcolor) -- [`color`](text-style-props.md#color) -- [`fontSize`](text-style-props.md#fontsize) -- [`fontStyle`](text-style-props.md#fontstyle) -- [`fontWeight`](text-style-props.md#fontweight) -- [`lineHeight`](text-style-props.md#lineheight) -- [`textAlign`](text-style-props.md#textalign) -- [`textDecorationLine`](text-style-props.md#textdecorationline) -- [`fontFamily`](text-style-props.md#fontfamily) -- [`textShadowOffset`](text-style-props.md#textshadowoffset) -- [`textShadowRadius`](text-style-props.md#textshadowradius) -- [`textAlignVertical`](text-style-props.md#textalignvertical) -- [`letterSpacing`](text-style-props.md#letterspacing) -- [`textDecorationColor`](text-style-props.md#textdecorationcolor) -- [`textDecorationStyle`](text-style-props.md#textdecorationstyle) -- [`writingDirection`](text-style-props.md#writingdirection) - ---- - -# Reference - -## Props - -### `textShadowColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `color` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `fontSize` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `fontStyle` - -| Type | Required | -| ------------------------------------------ | -------- | -| ReactPropTypes.oneOf(['normal', 'italic']) | No | - ---- - -### `fontWeight` - -Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf( ['normal' /*default*/, 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'] ) | No | - ---- - -### `lineHeight` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `textAlign` - -Specifies text alignment. The value 'justify' is only supported on iOS and fallbacks to `left` on Android. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf( ['auto' /*default*/, 'left', 'right', 'center', 'justify'] ) | No | - ---- - -### `textDecorationLine` - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf( ['none' /*default*/, 'underline', 'line-through', 'underline line-through'] ) | No | - ---- - -### `fontFamily` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.string | No | - ---- - -### `textShadowOffset` - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.shape( {width: ReactPropTypes.number, height: ReactPropTypes.number} ) | No | - ---- - -### `textShadowRadius` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `textAlignVertical` - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| ReactPropTypes.oneOf( ['auto' /*default*/, 'top', 'bottom', 'center'] ) | No | Android | - ---- - -### `letterSpacing` - -| Type | Required | Platform | -| --------------------- | -------- | -------- | -| ReactPropTypes.number | No | iOS | - ---- - -### `textDecorationColor` - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | - ---- - -### `textDecorationStyle` - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| ReactPropTypes.oneOf( ['solid' /*default*/, 'double', 'dotted','dashed'] ) | No | iOS | - ---- - -### `writingDirection` - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| ReactPropTypes.oneOf( ['auto' /*default*/, 'ltr', 'rtl'] ) | No | iOS | diff --git a/website/versioned_docs/version-0.30/text.md b/website/versioned_docs/version-0.30/text.md deleted file mode 100644 index 84dad96088f..00000000000 --- a/website/versioned_docs/version-0.30/text.md +++ /dev/null @@ -1,240 +0,0 @@ ---- -id: version-0.30-text -title: Text -original_id: text ---- - -A React component for displaying text. - -`Text` supports nesting, styling, and touch handling. - -In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines: - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, Text, StyleSheet } from 'react-native'; - -class TextInANest extends Component { - constructor(props) { - super(props); - this.state = { - titleText: "Bird's Nest", - bodyText: 'This is not really a bird nest.' - }; - } - - render() { - return ( - - - {this.state.titleText}

- - - {this.state.bodyText} - - - ); - } -} - -const styles = StyleSheet.create({ - baseText: { - fontFamily: 'Cochin', - }, - titleText: { - fontSize: 20, - fontWeight: 'bold', - }, -}); - -// App registration and rendering -AppRegistry.registerComponent('TextInANest', () => TextInANest); -``` - -### Props - -- [`onPress`](text.md#onpress) -- [`accessible`](text.md#accessible) -- [`numberOfLines`](text.md#numberoflines) -- [`onLayout`](text.md#onlayout) -- [`onLongPress`](text.md#onlongpress) -- [`lineBreakMode`](text.md#linebreakmode) -- [`style`](text.md#style) -- [`testID`](text.md#testid) -- [`selectable`](text.md#selectable) -- [`allowFontScaling`](text.md#allowfontscaling) -- [`suppressHighlighting`](text.md#suppresshighlighting) - ---- - -# Reference - -## Props - -### `onPress` - -This function is called on press. - -e.g., `onPress={() => console.log('1st')}`` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `accessible` - -When set to `true`, indicates that the view is an accessibility element. The default value for a `Text` element is `true`. - -See the [Accessibility guide](accessibility.md#accessible-ios-android) for more information. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `numberOfLines` - -Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. - -This prop is commonly used with `lineBreakMode`. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with - -`{nativeEvent: {layout: {x, y, width, height}}}` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLongPress` - -This function is called on long press. - -e.g., `onLongPress={this.increaseSize}>`` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `lineBreakMode` - -Line Break mode. This can be one of the following values: - -- `head` - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz" -- `middle` - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. "ab...yz" -- `tail` - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..." -- `clip` - Lines are not drawn past the edge of the text container. - -The default is `tail`. - -`numberOfLines` must be set in conjunction with this prop. - -> `clip` is working only for iOS - -| Type | Required | -| -------------------------------------- | -------- | -| enum('head', 'middle', 'tail', 'clip') | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [View Style Props...](view-style-props.md#style) - -- **`textShadowColor`**: [color](colors.md) - -- **`color`**: [color](colors.md) - -- **`fontSize`**: ReactPropTypes.number - -- **`fontStyle`**: ReactPropTypes.oneOf(['normal', 'italic']) - -- **`fontWeight`**: ReactPropTypes.oneOf( ['normal' /*default*/, 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'] ) - - Specifies font weight. The values 'normal' and 'bold' are supported for - most fonts. Not all fonts have a variant for each of the numeric values, - in that case the closest one is chosen. - -- **`lineHeight`**: ReactPropTypes.number - -- **`textAlign`**: ReactPropTypes.oneOf( ['auto' /*default*/, 'left', 'right', 'center', 'justify'] ) - - Specifies text alignment. The value 'justify' is only supported on iOS and - fallbacks to `left` on Android. - -- **`textDecorationLine`**: ReactPropTypes.oneOf( ['none' /*default*/, 'underline', 'line-through', 'underline line-through'] ) - -- **`fontFamily`**: ReactPropTypes.string - -- **`textShadowOffset`**: ReactPropTypes.shape( {width: ReactPropTypes.number, height: ReactPropTypes.number} ) - -- **`textShadowRadius`**: ReactPropTypes.number - -- **`textAlignVertical`**: ReactPropTypes.oneOf( ['auto' /*default*/, 'top', 'bottom', 'center'] ) (_Android_) - -- **`letterSpacing`**: ReactPropTypes.number (_iOS_) - -- **`textDecorationColor`**: [color](colors.md) (_iOS_) - -- **`textDecorationStyle`**: ReactPropTypes.oneOf( ['solid' /*default*/, 'double', 'dotted','dashed'] ) (_iOS_) - -- **`writingDirection`**: ReactPropTypes.oneOf( ['auto' /*default*/, 'ltr', 'rtl'] ) (_iOS_) - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `selectable` - -Lets the user select text, to use the native copy and paste functionality. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `allowFontScaling` - -Specifies whether fonts should scale to respect Text Size accessibility setting on iOS. The default is `true`. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `suppressHighlighting` - -When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | diff --git a/website/versioned_docs/version-0.30/textinput.md b/website/versioned_docs/version-0.30/textinput.md deleted file mode 100644 index bcb0a764479..00000000000 --- a/website/versioned_docs/version-0.30/textinput.md +++ /dev/null @@ -1,577 +0,0 @@ ---- -id: version-0.30-textinput -title: TextInput -original_id: textinput ---- - -A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. - -A nice use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. For example: - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, TextInput } from 'react-native'; - -class UselessTextInput extends Component { - constructor(props) { - super(props); - this.state = { text: 'Useless Placeholder' }; - } - - render() { - return ( - this.setState({text})} - value={this.state.text} - /> - ); - } -} - -// App registration and rendering -AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput); -``` - -Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=false`. To achieve the same effect, you can wrap your `TextInput` in a `View`: - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, View, TextInput } from 'react-native'; - -class UselessTextInput extends Component { - render() { - return ( - - ); - } -} - -class UselessTextInputMultiline extends Component { - constructor(props) { - super(props); - this.state = { - text: 'Useless Multiline Placeholder', - }; - } - - // If you type something in the text box that is a color, the background will change to that - // color. - render() { - return ( - - this.setState({text})} - value={this.state.text} - /> - - ); - } -} - -// App registration and rendering -AppRegistry.registerComponent( - 'AwesomeProject', - () => UselessTextInputMultiline -); -``` - -`TextInput` has by default a border at the bottom of its view. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this is to either not set height explicitly, case in which the system will take care of displaying the border in the correct position, or to not display the border by setting `underlineColorAndroid` to transparent. - -### Props - -- [View props...](view.md#props) - -* [`placeholderTextColor`](textinput.md#placeholdertextcolor) -* [`autoCapitalize`](textinput.md#autocapitalize) -* [`autoFocus`](textinput.md#autofocus) -* [`blurOnSubmit`](textinput.md#bluronsubmit) -* [`defaultValue`](textinput.md#defaultvalue) -* [`editable`](textinput.md#editable) -* [`keyboardType`](textinput.md#keyboardtype) -* [`maxLength`](textinput.md#maxlength) -* [`multiline`](textinput.md#multiline) -* [`onBlur`](textinput.md#onblur) -* [`onChange`](textinput.md#onchange) -* [`onChangeText`](textinput.md#onchangetext) -* [`onEndEditing`](textinput.md#onendediting) -* [`onFocus`](textinput.md#onfocus) -* [`onLayout`](textinput.md#onlayout) -* [`onSelectionChange`](textinput.md#onselectionchange) -* [`onSubmitEditing`](textinput.md#onsubmitediting) -* [`placeholder`](textinput.md#placeholder) -* [`autoCorrect`](textinput.md#autocorrect) -* [`returnKeyType`](textinput.md#returnkeytype) -* [`secureTextEntry`](textinput.md#securetextentry) -* [`selectTextOnFocus`](textinput.md#selecttextonfocus) -* [`selectionColor`](textinput.md#selectioncolor) -* [`style`](textinput.md#style) -* [`value`](textinput.md#value) -* [`inlineImageLeft`](textinput.md#inlineimageleft) -* [`inlineImagePadding`](textinput.md#inlineimagepadding) -* [`numberOfLines`](textinput.md#numberoflines) -* [`returnKeyLabel`](textinput.md#returnkeylabel) -* [`underlineColorAndroid`](textinput.md#underlinecolorandroid) -* [`clearButtonMode`](textinput.md#clearbuttonmode) -* [`clearTextOnFocus`](textinput.md#cleartextonfocus) -* [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) -* [`keyboardAppearance`](textinput.md#keyboardappearance) -* [`onKeyPress`](textinput.md#onkeypress) -* [`selectionState`](textinput.md#selectionstate) - -### Methods - -- [`isFocused`](textinput.md#isfocused) -- [`clear`](textinput.md#clear) - ---- - -# Reference - -## Props - -### `placeholderTextColor` - -The text color of the placeholder string. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `autoCapitalize` - -Can tell `TextInput` to automatically capitalize certain characters. - -- `characters`: all characters. -- `words`: first letter of each word. -- `sentences`: first letter of each sentence (_default_). -- `none`: don't auto capitalize anything. - -| Type | Required | -| ---- | -------- | - - -| PropTypes.oneOf([ 'none', 'sentences', 'words', 'characters', ]) | No | - ---- - -### `autoFocus` - -If `true`, focuses the input on `componentDidMount`. The default value is `false`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `blurOnSubmit` - -If `true`, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting `blurOnSubmit` to `true` means that pressing return will blur the field and trigger the `onSubmitEditing` event instead of inserting a newline into the field. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `defaultValue` - -Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.string | No | - ---- - -### `editable` - -If `false`, text is not editable. The default value is `true`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `keyboardType` - -Determines which keyboard to open, e.g.`numeric`. - -The following values work across platforms: - -- `default` -- `numeric` -- `email-address` -- `phone-pad` - -| Type | Required | -| ---- | -------- | - - -| PropTypes.oneOf([ // Cross-platform 'default', 'email-address', 'numeric', 'phone-pad', // iOS-only 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', ]) | No | - ---- - -### `maxLength` - -Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.number | No | - ---- - -### `multiline` - -If `true`, the text input can be multiple lines. The default value is `false`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `onBlur` - -Callback that is called when the text input is blurred. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onChange` - -Callback that is called when the text input's text changes. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onChangeText` - -Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onEndEditing` - -Callback that is called when text input ends. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onFocus` - -Callback that is called when the text input is focused. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{x, y, width, height}`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onSelectionChange` - -Callback that is called when the text input selection is changed. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onSubmitEditing` - -Callback that is called when the text input's submit button is pressed. Invalid if `multiline={true}` is specified. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `placeholder` - -The string that will be rendered before text input has been entered. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.string | No | - ---- - -### `autoCorrect` - -If `false`, disables auto-correct. The default value is `true`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `returnKeyType` - -Determines how the return key should look. On Android you can also use `returnKeyLabel`. - -_Cross platform_ - -The following values work across platforms: - -- `done` -- `go` -- `next` -- `search` -- `send` - -_Android Only_ - -The following values work on Android only: - -- `none` -- `previous` - -_iOS Only_ - -The following values work on iOS only: - -- `default` -- `emergency-call` -- `google` -- `join` -- `route` -- `yahoo` - -| Type | Required | -| ---- | -------- | - - -| PropTypes.oneOf([ // Cross-platform 'done', 'go', 'next', 'search', 'send', // Android-only 'none', 'previous', // iOS-only 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo', ]) | No | - ---- - -### `secureTextEntry` - -If `true`, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is `false`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `selectTextOnFocus` - -If `true`, all text will automatically be selected on focus. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `selectionColor` - -The highlight (and cursor on iOS) color of the text input. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `style` - -[Styles](style.md) - -| Type | Required | -| --------------------- | -------- | -| [Text](text.md#style) | No | - ---- - -### `value` - -The value to show for the text input. `TextInput` is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to set the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.string | No | - ---- - -### `inlineImageLeft` - -If defined, the provided image resource will be rendered on the left. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.string | No | Android | - ---- - -### `inlineImagePadding` - -Padding between the inline image, if any, and the text input itself. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.number | No | Android | - ---- - -### `numberOfLines` - -Sets the number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.number | No | Android | - ---- - -### `returnKeyLabel` - -Sets the return key to the label. Use it instead of `returnKeyType`. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.string | No | Android | - ---- - -### `underlineColorAndroid` - -The color of the `TextInput` underline. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `clearButtonMode` - -When the clear button should appear on the right side of the text view. - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| PropTypes.oneOf([ 'never', 'while-editing', 'unless-editing', 'always', ]) | No | iOS | - ---- - -### `clearTextOnFocus` - -If `true`, clears the text field automatically when editing begins. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.bool | No | iOS | - ---- - -### `enablesReturnKeyAutomatically` - -If `true`, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is `false`. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.bool | No | iOS | - ---- - -### `keyboardAppearance` - -Determines the color of the keyboard. - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| PropTypes.oneOf([ 'default', 'light', 'dark', ]) | No | iOS | - ---- - -### `onKeyPress` - -Callback that is called when a key is pressed. Pressed key value is passed as an argument to the callback handler. Fires before `onChange` callbacks. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.func | No | iOS | - ---- - -### `selectionState` - -An instance of `DocumentSelectionState`, this is some state that is responsible for maintaining selection information for a document. - -Some functionality that can be performed with this instance is: - -- `blur()` -- `focus()` -- `update()` - -> You can reference `DocumentSelectionState` in [`vendor/document/selection/DocumentSelectionState.js`](https://github.com/facebook/react-native/blob/master/Libraries/vendor/document/selection/DocumentSelectionState.js) - -| Type | Required | Platform | -| -------------------------------------------- | -------- | -------- | -| PropTypes.instanceOf(DocumentSelectionState) | No | iOS | - -## Methods - -### `isFocused()` - -```jsx -isFocused(): -``` - -Returns `true` if the input is currently focused; `false` otherwise. - ---- - -### `clear()` - -```jsx -clear(); -``` - -Removes all text from the `TextInput`. diff --git a/website/versioned_docs/version-0.30/toolbarandroid.md b/website/versioned_docs/version-0.30/toolbarandroid.md deleted file mode 100644 index 96ecc65cbfe..00000000000 --- a/website/versioned_docs/version-0.30/toolbarandroid.md +++ /dev/null @@ -1,212 +0,0 @@ ---- -id: version-0.30-toolbarandroid -title: ToolbarAndroid -original_id: toolbarandroid ---- - -React component that wraps the Android-only [`Toolbar` widget][0]. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right. - -If the toolbar has an only child, it will be displayed between the title and actions. - -Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where `require('./some_icon.png')` translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using `require('./some_icon.png')` will do this automatically for you, so as long as you don't explicitly use e.g. `{uri: 'http://...'}`, you will be good. - -Example: - -``` -render: function() { - return ( - - ) -}, -onActionSelected: function(position) { - if (position === 0) { // index of 'Settings' - showSettings(); - } -} -``` - -[0]: https://developer.android.com/reference/android/support/v7/widget/Toolbar.html - -### Props - -- [View props...](view.md#props) - -* [`overflowIcon`](toolbarandroid.md#overflowicon) -* [`actions`](toolbarandroid.md#actions) -* [`contentInsetStart`](toolbarandroid.md#contentinsetstart) -* [`logo`](toolbarandroid.md#logo) -* [`navIcon`](toolbarandroid.md#navicon) -* [`onActionSelected`](toolbarandroid.md#onactionselected) -* [`onIconClicked`](toolbarandroid.md#oniconclicked) -* [`contentInsetEnd`](toolbarandroid.md#contentinsetend) -* [`rtl`](toolbarandroid.md#rtl) -* [`subtitle`](toolbarandroid.md#subtitle) -* [`subtitleColor`](toolbarandroid.md#subtitlecolor) -* [`testID`](toolbarandroid.md#testid) -* [`title`](toolbarandroid.md#title) -* [`titleColor`](toolbarandroid.md#titlecolor) - ---- - -# Reference - -## Props - -### `overflowIcon` - -Sets the overflow icon. - -| Type | Required | -| ------------------- | -------- | -| optionalImageSource | No | - ---- - -### `actions` - -Sets possible actions on the toolbar as part of the action menu. These are displayed as icons or text on the right side of the widget. If they don't fit they are placed in an 'overflow' menu. - -This property takes an array of objects, where each object has the following keys: - -- `title`: **required**, the title of this action -- `icon`: the icon for this action, e.g. `require('./some_icon.png')` -- `show`: when to show this action as an icon or hide it in the overflow menu: `always`, `ifRoom` or `never` -- `showWithText`: boolean, whether to show text alongside the icon or not - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.arrayOf(ReactPropTypes.shape({ title: ReactPropTypes.string.isRequired, icon: optionalImageSource, show: ReactPropTypes.oneOf(['always', 'ifRoom', 'never']), showWithText: ReactPropTypes.bool })) | No | - ---- - -### `contentInsetStart` - -Sets the content inset for the toolbar starting edge. - -The content inset affects the valid area for Toolbar content other than the navigation button and menu. Insets define the minimum margin for these components and can be used to effectively align Toolbar content along well-known gridlines. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `logo` - -Sets the toolbar logo. - -| Type | Required | -| ------------------- | -------- | -| optionalImageSource | No | - ---- - -### `navIcon` - -Sets the navigation icon. - -| Type | Required | -| ------------------- | -------- | -| optionalImageSource | No | - ---- - -### `onActionSelected` - -Callback that is called when an action is selected. The only argument that is passed to the callback is the position of the action in the actions array. - -| Type | Required | -| ------------------- | -------- | -| ReactPropTypes.func | No | - ---- - -### `onIconClicked` - -Callback called when the icon is selected. - -| Type | Required | -| ------------------- | -------- | -| ReactPropTypes.func | No | - ---- - -### `contentInsetEnd` - -Sets the content inset for the toolbar ending edge. - -The content inset affects the valid area for Toolbar content other than the navigation button and menu. Insets define the minimum margin for these components and can be used to effectively align Toolbar content along well-known gridlines. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `rtl` - -Used to set the toolbar direction to RTL. In addition to this property you need to add - -android:supportsRtl="true" - -to your application AndroidManifest.xml and then call `setLayoutDirection(LayoutDirection.RTL)` in your MainActivity `onCreate` method. - -| Type | Required | -| ------------------- | -------- | -| ReactPropTypes.bool | No | - ---- - -### `subtitle` - -Sets the toolbar subtitle. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.string | No | - ---- - -### `subtitleColor` - -Sets the toolbar subtitle color. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.string | No | - ---- - -### `title` - -Sets the toolbar title. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.string | No | - ---- - -### `titleColor` - -Sets the toolbar title color. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | diff --git a/website/versioned_docs/version-0.30/transforms.md b/website/versioned_docs/version-0.30/transforms.md deleted file mode 100644 index efb79cdff9e..00000000000 --- a/website/versioned_docs/version-0.30/transforms.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -id: version-0.30-transforms -title: Transforms -original_id: transforms ---- - -### Props - -- [`decomposedMatrix`](transforms.md#decomposedmatrix) -- [`rotation`](transforms.md#rotation) -- [`scaleX`](transforms.md#scalex) -- [`scaleY`](transforms.md#scaley) -- [`transform`](transforms.md#transform) -- [`transformMatrix`](transforms.md#transformmatrix) -- [`translateX`](transforms.md#translatex) -- [`translateY`](transforms.md#translatey) - ---- - -# Reference - -## Props - -### `decomposedMatrix` - -| Type | Required | -| ------------------------ | -------- | -| DecomposedMatrixPropType | No | - ---- - -### `rotation` - -| Type | Required | -| ---------------------------------------------------------------------------- | -------- | -| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | - ---- - -### `scaleX` - -| Type | Required | -| ---------------------------------------------------------------------------- | -------- | -| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | - ---- - -### `scaleY` - -| Type | Required | -| ---------------------------------------------------------------------------- | -------- | -| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | - ---- - -### `transform` - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.arrayOf( ReactPropTypes.oneOfType([ ReactPropTypes.shape({perspective: ReactPropTypes.number}), ReactPropTypes.shape({rotate: ReactPropTypes.string}), ReactPropTypes.shape({rotateX: ReactPropTypes.string}), ReactPropTypes.shape({rotateY: ReactPropTypes.string}), ReactPropTypes.shape({rotateZ: ReactPropTypes.string}), ReactPropTypes.shape({scale: ReactPropTypes.number}), ReactPropTypes.shape({scaleX: ReactPropTypes.number}), ReactPropTypes.shape({scaleY: ReactPropTypes.number}), ReactPropTypes.shape({translateX: ReactPropTypes.number}), ReactPropTypes.shape({translateY: ReactPropTypes.number}), ReactPropTypes.shape({skewX: ReactPropTypes.string}), ReactPropTypes.shape({skewY: ReactPropTypes.string}) ]) ) | No | - ---- - -### `transformMatrix` - -| Type | Required | -| ----------------------- | -------- | -| TransformMatrixPropType | No | - ---- - -### `translateX` - -| Type | Required | -| ---------------------------------------------------------------------------- | -------- | -| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | - ---- - -### `translateY` - -| Type | Required | -| ---------------------------------------------------------------------------- | -------- | -| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | diff --git a/website/versioned_docs/version-0.30/view-style-props.md b/website/versioned_docs/version-0.30/view-style-props.md deleted file mode 100644 index 3e3cb75d296..00000000000 --- a/website/versioned_docs/version-0.30/view-style-props.md +++ /dev/null @@ -1,203 +0,0 @@ ---- -id: version-0.30-view-style-props -title: View Style Props -original_id: view-style-props ---- - -### Props - -- [`borderRightColor`](view-style-props.md#borderrightcolor) -- [`backfaceVisibility`](view-style-props.md#backfacevisibility) -- [`borderBottomColor`](view-style-props.md#borderbottomcolor) -- [`borderBottomLeftRadius`](view-style-props.md#borderbottomleftradius) -- [`borderBottomRightRadius`](view-style-props.md#borderbottomrightradius) -- [`borderBottomWidth`](view-style-props.md#borderbottomwidth) -- [`borderColor`](view-style-props.md#bordercolor) -- [`borderLeftColor`](view-style-props.md#borderleftcolor) -- [`borderLeftWidth`](view-style-props.md#borderleftwidth) -- [`borderRadius`](view-style-props.md#borderradius) -- [`backgroundColor`](view-style-props.md#backgroundcolor) -- [`borderRightWidth`](view-style-props.md#borderrightwidth) -- [`borderStyle`](view-style-props.md#borderstyle) -- [`borderTopColor`](view-style-props.md#bordertopcolor) -- [`borderTopLeftRadius`](view-style-props.md#bordertopleftradius) -- [`borderTopRightRadius`](view-style-props.md#bordertoprightradius) -- [`borderTopWidth`](view-style-props.md#bordertopwidth) -- [`borderWidth`](view-style-props.md#borderwidth) -- [`opacity`](view-style-props.md#opacity) -- [`overflow`](view-style-props.md#overflow) -- [`elevation`](view-style-props.md#elevation) - ---- - -# Reference - -## Props - -### `borderRightColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `backfaceVisibility` - -| Type | Required | -| ------------------------------------------- | -------- | -| ReactPropTypes.oneOf(['visible', 'hidden']) | No | - ---- - -### `borderBottomColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderBottomLeftRadius` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderBottomRightRadius` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderBottomWidth` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderLeftColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderLeftWidth` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderRadius` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `backgroundColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderRightWidth` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderStyle` - -| Type | Required | -| --------------------------------------------------- | -------- | -| ReactPropTypes.oneOf(['solid', 'dotted', 'dashed']) | No | - ---- - -### `borderTopColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderTopLeftRadius` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderTopRightRadius` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderTopWidth` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderWidth` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `opacity` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `overflow` - -| Type | Required | -| ------------------------------------------- | -------- | -| ReactPropTypes.oneOf(['visible', 'hidden']) | No | - ---- - -### `elevation` - -(Android-only) Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions. - -| Type | Required | Platform | -| --------------------- | -------- | -------- | -| ReactPropTypes.number | No | Android | diff --git a/website/versioned_docs/version-0.30/viewpagerandroid.md b/website/versioned_docs/version-0.30/viewpagerandroid.md deleted file mode 100644 index 99f55aba5b2..00000000000 --- a/website/versioned_docs/version-0.30/viewpagerandroid.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: version-0.30-viewpagerandroid -title: ViewPagerAndroid -original_id: viewpagerandroid ---- - -Container that allows to flip left and right between child views. Each child view of the `ViewPagerAndroid` will be treated as a separate page and will be stretched to fill the `ViewPagerAndroid`. - -It is important all children are ``s and not composite components. You can set style properties like `padding` or `backgroundColor` for each child. - -Example: - -``` -render: function() { - return ( - - - First page - - - Second page - - - ); -} - -... - -var styles = { - ... - pageStyle: { - alignItems: 'center', - padding: 20, - } -} -``` - -### Props - -- [View props...](view.md#props) - -* [`initialPage`](viewpagerandroid.md#initialpage) -* [`keyboardDismissMode`](viewpagerandroid.md#keyboarddismissmode) -* [`onPageScroll`](viewpagerandroid.md#onpagescroll) -* [`onPageScrollStateChanged`](viewpagerandroid.md#onpagescrollstatechanged) -* [`onPageSelected`](viewpagerandroid.md#onpageselected) -* [`pageMargin`](viewpagerandroid.md#pagemargin) -* [`scrollEnabled`](viewpagerandroid.md#scrollenabled) - -### Methods - -- [`setPage`](viewpagerandroid.md#setpage) -- [`setPageWithoutAnimation`](viewpagerandroid.md#setpagewithoutanimation) - -### Type Definitions - -- [`ViewPagerScrollState`](viewpagerandroid.md#viewpagerscrollstate) - ---- - -# Reference - -## Props - -### `initialPage` - -Index of initial page that should be selected. Use `setPage` method to update the page, and `onPageSelected` to monitor page changes - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'none', // default 'on-drag', ]) | No | - ---- - -### `onPageScroll` - -Executed when transitioning between pages (ether because of animation for the requested page change or when user is swiping/dragging between pages) The `event.nativeEvent` object for this callback will carry following data: - -- position - index of first page from the left that is currently visible -- offset - value from range [0,1) describing stage between page transitions. Value x means that (1 - x) fraction of the page at "position" index is visible, and x fraction of the next page is visible. - -| Type | Required | -| ------------------- | -------- | -| ReactPropTypes.func | No | - ---- - -### `onPageScrollStateChanged` - -Function called when the page scrolling state has changed. The page scrolling state can be in 3 states: - -- idle, meaning there is no interaction with the page scroller happening at the time -- dragging, meaning there is currently an interaction with the page scroller -- settling, meaning that there was an interaction with the page scroller, and the page scroller is now finishing its closing or opening animation - -| Type | Required | -| ------------------- | -------- | -| ReactPropTypes.func | No | - ---- - -### `onPageSelected` - -This callback will be called once ViewPager finish navigating to selected page (when user swipes between pages). The `event.nativeEvent` object passed to this callback will have following fields: - -- position - index of page that has been selected - -| Type | Required | -| ------------------- | -------- | -| ReactPropTypes.func | No | - ---- - -### `pageMargin` - -Blank space to show between pages. This is only visible while scrolling, pages are still edge-to-edge. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `scrollEnabled` - -When false, the content does not scroll. The default value is true. - -| Type | Required | -| ------------------- | -------- | -| ReactPropTypes.bool | No | - -## Methods - -### `setPage()` - -```jsx -setPage((selectedPage: number)); -``` - -A helper function to scroll to a specific page in the ViewPager. The transition between pages will be animated. - ---- - -### `setPageWithoutAnimation()` - -```jsx -setPageWithoutAnimation((selectedPage: number)); -``` - -A helper function to scroll to a specific page in the ViewPager. The transition between pages will _not_ be animated. - -## Type Definitions - -### ViewPagerScrollState - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| -------- | ----------- | -| idle | | -| dragging | | -| settling | | diff --git a/website/versioned_docs/version-0.31/asyncstorage.md b/website/versioned_docs/version-0.31/asyncstorage.md deleted file mode 100644 index ad34947a163..00000000000 --- a/website/versioned_docs/version-0.31/asyncstorage.md +++ /dev/null @@ -1,365 +0,0 @@ ---- -id: version-0.31-asyncstorage -title: AsyncStorage -original_id: asyncstorage ---- - -`AsyncStorage` is an unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage. - -It is recommended that you use an abstraction on top of `AsyncStorage` instead of `AsyncStorage` directly for anything more than light usage since it operates globally. - -On iOS, `AsyncStorage` is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android, `AsyncStorage` will use either [RocksDB](http://rocksdb.org/) or SQLite based on what is available. - -The `AsyncStorage` JavaScript code is a facade that provides a clear JavaScript API, real `Error` objects, and non-multi functions. Each method in the API returns a `Promise` object. - -Persisting data: - -``` -try { - await AsyncStorage.setItem('@MySuperStore:key', 'I like to save it.'); -} catch (error) { - // Error saving data -} -``` - -Fetching data: - -``` -try { - const value = await AsyncStorage.getItem('@MySuperStore:key'); - if (value !== null){ - // We have data!! - console.log(value); - } -} catch (error) { - // Error retrieving data -} -``` - -### Methods - -- [`getItem`](asyncstorage.md#getitem) -- [`setItem`](asyncstorage.md#setitem) -- [`removeItem`](asyncstorage.md#removeitem) -- [`mergeItem`](asyncstorage.md#mergeitem) -- [`clear`](asyncstorage.md#clear) -- [`getAllKeys`](asyncstorage.md#getallkeys) -- [`flushGetRequests`](asyncstorage.md#flushgetrequests) -- [`multiGet`](asyncstorage.md#multiget) -- [`multiSet`](asyncstorage.md#multiset) -- [`multiRemove`](asyncstorage.md#multiremove) -- [`multiMerge`](asyncstorage.md#multimerge) - ---- - -# Reference - -## Methods - -### `getItem()` - -```jsx -static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void) -``` - -Fetches an item for a `key` and invokes a callback upon completion. Returns a `Promise` object. - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | ------------------------------------------- | -------- | ----------------------------------------------------------------- | -| key | string | Yes | Key of the item to fetch. | -| callback | `?(error: ?Error, result: ?string) => void` | No | Function that will be called with a result if found or any error. | - ---- - -### `setItem()` - -```jsx -static setItem(key: string, value: string, [callback]: ?(error: ?Error) => void) -``` - -Sets the value for a `key` and invokes a callback upon completion. Returns a `Promise` object. - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | -------------------------- | -------- | -------------------------------------------- | -| key | string | Yes | Key of the item to set. | -| value | string | Yes | Value to set for the `key`. | -| callback | `?(error: ?Error) => void` | No | Function that will be called with any error. | - ---- - -### `removeItem()` - -```jsx -static removeItem(key: string, [callback]: ?(error: ?Error) => void) -``` - -Removes an item for a `key` and invokes a callback upon completion. Returns a `Promise` object. - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | -------------------------- | -------- | -------------------------------------------- | -| key | string | Yes | Key of the item to remove. | -| callback | `?(error: ?Error) => void` | No | Function that will be called with any error. | - ---- - -### `mergeItem()` - -```jsx -static mergeItem(key: string, value: string, [callback]: ?(error: ?Error) => void) -``` - -Merges an existing `key` value with an input value, assuming both values are stringified JSON. Returns a `Promise` object. - -**NOTE:** This is not supported by all native implementations. - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | -------------------------- | -------- | -------------------------------------------- | -| key | string | Yes | Key of the item to modify. | -| value | string | Yes | New value to merge for the `key`. | -| callback | `?(error: ?Error) => void` | No | Function that will be called with any error. | - -Example: - -```jsx -let UID123_object = { - name: 'Chris', - age: 30, - traits: { hair: 'brown', eyes: 'brown' } -}; -// You only need to define what will be added or updated -let UID123_delta = { - age: 31, - traits: { eyes: 'blue', shoe_size: 10 } -}; - -AsyncStorage.setItem( - 'UID123', - JSON.stringify(UID123_object), - () => { - AsyncStorage.mergeItem( - 'UID123', - JSON.stringify(UID123_delta), - () => { - AsyncStorage.getItem('UID123', (err, result) => { - console.log(result); - }); - } - ); - } -); - -// Console log result: -// => {'name':'Chris','age':31,'traits': -// {'shoe_size':10,'hair':'brown','eyes':'blue'}} -``` - ---- - -### `clear()` - -```jsx -static clear([callback]: ?(error: ?Error) => void) -``` - -Erases _all_ `AsyncStorage` for all clients, libraries, etc. You probably don't want to call this; use `removeItem` or `multiRemove` to clear only your app's keys. Returns a `Promise` object. - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | -------------------------- | -------- | -------------------------------------------- | -| callback | `?(error: ?Error) => void` | No | Function that will be called with any error. | - ---- - -### `getAllKeys()` - -```jsx -static getAllKeys([callback]: ?(error: ?Error, keys: ?Array) => void) -``` - -Gets _all_ keys known to your app; for all callers, libraries, etc. Returns a `Promise` object. - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | ------------------------------------------------ | -------- | ---------------------------------------------------------- | -| callback | `?(error: ?Error, keys: ?Array) => void` | No | Function that will be called the keys found and any error. | - ---- - -### `flushGetRequests()` - -```jsx -static flushGetRequests(): [object Object] -``` - -Flushes any pending requests using a single batch call to get the data. - ---- - -### `multiGet()` - -```jsx -static multiGet(keys: Array, [callback]: ?(errors: ?Array, result: ?Array>) => void) -``` - -This allows you to batch the fetching of items given an array of `key` inputs. Your callback will be invoked with an array of corresponding key-value pairs found: - -``` -multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']]) -``` - -The method returns a `Promise` object. - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | ----------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------- | -| keys | `Array` | Yes | Array of key for the items to get. | -| callback | `?(errors: ?Array, result: ?Array>) => void` | No | Function that will be called with a key-value array of the results, plus an array of any key-specific errors found. | - -Example: - -```jsx -AsyncStorage.getAllKeys((err, keys) => { - AsyncStorage.multiGet(keys, (err, stores) => { - stores.map((result, i, store) => { - // get at each store's key/value so you can work with it - let key = store[i][0]; - let value = store[i][1]; - }); - }); -}); -``` - ---- - -### `multiSet()` - -```jsx -static multiSet(keyValuePairs: Array>, [callback]: ?(errors: ?Array) => void) -``` - -Use this as a batch operation for storing multiple key-value pairs. When the operation completes you'll get a single callback with any errors: - -``` -multiSet([['k1', 'val1'], ['k2', 'val2']], cb); -``` - -The method returns a `Promise` object. - -**Parameters:** - -| Name | Type | Required | Description | -| ------------- | ---------------------------------- | -------- | ---------------------------------------------------------------------------- | -| keyValuePairs | `Array>` | Yes | Array of key-value array for the items to set. | -| callback | `?(errors: ?Array) => void` | No | Function that will be called with an array of any key-specific errors found. | - ---- - -### `multiRemove()` - -```jsx -static multiRemove(keys: Array, [callback]: ?(errors: ?Array) => void) -``` - -Call this to batch the deletion of all keys in the `keys` array. Returns a `Promise` object. - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | ---------------------------------- | -------- | ----------------------------------------------------------------------- | -| keys | `Array` | Yes | Array of key for the items to delete. | -| callback | `?(errors: ?Array) => void` | No | Function that will be called an array of any key-specific errors found. | - -Example: - -```jsx -let keys = ['k1', 'k2']; -AsyncStorage.multiRemove(keys, (err) => { - // keys k1 & k2 removed, if they existed - // do most stuff after removal (if you want) -}); -``` - ---- - -### `multiMerge()` - -```jsx -static multiMerge(keyValuePairs: Array>, [callback]: ?(errors: ?Array) => void) -``` - -Batch operation to merge in existing and new values for a given set of keys. This assumes that the values are stringified JSON. Returns a `Promise` object. - -**NOTE**: This is not supported by all native implementations. - -**Parameters:** - -| Name | Type | Required | Description | -| ------------- | ---------------------------------- | -------- | ---------------------------------------------------------------------------- | -| keyValuePairs | `Array>` | Yes | Array of key-value array for the items to merge. | -| callback | `?(errors: ?Array) => void` | No | Function that will be called with an array of any key-specific errors found. | - -Example: - -```jsx -// first user, initial values -let UID234_object = { - name: 'Chris', - age: 30, - traits: { hair: 'brown', eyes: 'brown' } -}; - -// first user, delta values -let UID234_delta = { - age: 31, - traits: { eyes: 'blue', shoe_size: 10 } -}; - -// second user, initial values -let UID345_object = { - name: 'Marge', - age: 25, - traits: { hair: 'blonde', eyes: 'blue' } -}; - -// second user, delta values -let UID345_delta = { - age: 26, - traits: { eyes: 'green', shoe_size: 6 } -}; - -let multi_set_pairs = [ - ['UID234', JSON.stringify(UID234_object)], - ['UID345', JSON.stringify(UID345_object)] -]; -let multi_merge_pairs = [ - ['UID234', JSON.stringify(UID234_delta)], - ['UID345', JSON.stringify(UID345_delta)] -]; - -AsyncStorage.multiSet(multi_set_pairs, (err) => { - AsyncStorage.multiMerge(multi_merge_pairs, (err) => { - AsyncStorage.multiGet(['UID234', 'UID345'], (err, stores) => { - stores.map((result, i, store) => { - let key = store[i][0]; - let val = store[i][1]; - console.log(key, val); - }); - }); - }); -}); - -// Console log results: -// => UID234 {"name":"Chris","age":31,"traits":{"shoe_size":10,"hair":"brown","eyes":"blue"}} -// => UID345 {"name":"Marge","age":26,"traits":{"shoe_size":6,"hair":"blonde","eyes":"green"}} -``` diff --git a/website/versioned_docs/version-0.31/image.md b/website/versioned_docs/version-0.31/image.md deleted file mode 100644 index 4f6053b8dfe..00000000000 --- a/website/versioned_docs/version-0.31/image.md +++ /dev/null @@ -1,341 +0,0 @@ ---- -id: version-0.31-image -title: Image -original_id: image ---- - -A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. - -This exmaples shows both fetching and displaying an image from local storage as well as on from network. - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, View, Image } from 'react-native'; - -class DisplayAnImage extends Component { - render() { - return ( - - - - - ); - } -} - -// App registration and rendering -AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage); -``` - -You can also add `style` to an image: - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, View, Image, StyleSheet} from 'react-native'; - -const styles = StyleSheet.create({ - stretch: { - width: 50, - height: 200 - } -}); - -class DisplayAnImageWithStyle extends Component { - render() { - return ( - - - - ); - } -} - -// App registration and rendering -AppRegistry.registerComponent( - 'DisplayAnImageWithStyle', - () => DisplayAnImageWithStyle -); -``` - -### Props - -- [`testID`](image.md#testid) -- [`onLayout`](image.md#onlayout) -- [`onLoadEnd`](image.md#onloadend) -- [`onLoadStart`](image.md#onloadstart) -- [`resizeMode`](image.md#resizemode) -- [`source`](image.md#source) -- [`style`](image.md#style) -- [`onLoad`](image.md#onload) -- [`accessibilityLabel`](image.md#accessibilitylabel) -- [`accessible`](image.md#accessible) -- [`blurRadius`](image.md#blurradius) -- [`capInsets`](image.md#capinsets) -- [`defaultSource`](image.md#defaultsource) -- [`onError`](image.md#onerror) -- [`onProgress`](image.md#onprogress) - -### Methods - -- [`getSize`](image.md#getsize) -- [`prefetch`](image.md#prefetch) - ---- - -# Reference - -## Props - -### `testID` - -A unique identifier for this element to be used in UI Automation testing scripts. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.string | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{nativeEvent: {layout: {x, y, width, height}}}`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onLoadEnd` - -Invoked when load either succeeds or fails. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onLoadStart` - -Invoked on load start. - -e.g., `onLoadStart={(e) => this.setState({loading: true})}` - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `resizeMode` - -Determines how to resize the image when the frame doesn't match the raw image dimensions. - -- `cover`: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding). - -- `contain`: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). - -- `stretch`: Scale width and height independently, This may change the aspect ratio of the src. - -- `repeat`: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio. (iOS only) - -| Type | Required | -| -------------------------------------------------------------------- | -------- | -| PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']) | No | - ---- - -### `source` - -The image source (either a remote URL or a local file resource). - -| Type | Required | -| ------------------- | -------- | -| ImageSourcePropType | No | - ---- - -### `style` - -> `ImageResizeMode` is an `Enum` for different image resizing modes, set via the `resizeMode` style property on `Image` components. The values are `contain`, `cover`, `stretch`, `center`, `repeat`. - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Shadow Props...](shadow-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderTopRightRadius`**: ReactPropTypes.number - -- **`backfaceVisibility`**: ReactPropTypes.oneOf(['visible', 'hidden']) - -- **`borderBottomLeftRadius`**: ReactPropTypes.number - -- **`borderBottomRightRadius`**: ReactPropTypes.number - -- **`borderColor`**: [color](colors.md) - -- **`borderRadius`**: ReactPropTypes.number - -- **`borderTopLeftRadius`**: ReactPropTypes.number - -- **`backgroundColor`**: [color](colors.md) - -- **`borderWidth`**: ReactPropTypes.number - -- **`opacity`**: ReactPropTypes.number - -- **`overflow`**: ReactPropTypes.oneOf(['visible', 'hidden']) - -- **`resizeMode`**: ReactPropTypes.oneOf(Object.keys(ImageResizeMode)) - -- **`tintColor`**: [color](colors.md) - - Changes the color of all the non-transparent pixels to the tintColor. - -- **`overlayColor`**: ReactPropTypes.string (_Android_) - - When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners: - - - Certain resize modes, such as 'contain' - - Animated GIFs - - A typical way to use this prop is with images displayed on a solid background and setting the `overlayColor` to the same color as the background. - - For details of how this works under the hood, see http://frescolib.org/rounded-corners-and-circles.md - ---- - -### `onLoad` - -Invoked when load completes successfully. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `accessibilityLabel` - -The text that's read by the screen reader when the user interacts with the image. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.string | No | iOS | - ---- - -### `accessible` - -When true, indicates the image is an accessibility element. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.bool | No | iOS | - ---- - -### `blurRadius` - -blurRadius: the blur radius of the blur filter added to the image - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.number | No | iOS | - ---- - -### `capInsets` - -When the image is resized, the corners of the size specified by `capInsets` will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info in the [official Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets). - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `defaultSource` - -A static image to display while loading the image source. - -- `uri` - a string representing the resource identifier for the image, which should be either a local file path or the name of a static image resource (which should be wrapped in the `require('./path/to/image.png')` function). -- `width`, `height` - can be specified if known at build time, in which case these will be used to set the default `` component dimensions. -- `scale` - used to indicate the scale factor of the image. Defaults to 1.0 if unspecified, meaning that one image pixel equates to one display point / DIP. -- `number` - Opaque type returned by something like `require('./image.jpg')`. - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| PropTypes.oneOfType([ // TODO: Tooling to support documenting these directly and having them display in the docs. PropTypes.shape({ uri: PropTypes.string, width: PropTypes.number, height: PropTypes.number, scale: PropTypes.number, }), PropTypes.number, ]) | No | iOS | - ---- - -### `onError` - -Invoked on load error with `{nativeEvent: {error}}`. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.func | No | iOS | - ---- - -### `onProgress` - -Invoked on download progress with `{nativeEvent: {loaded, total}}`. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.func | No | iOS | - -## Methods - -### `getSize()` - -```jsx -static getSize(uri: string, success: function, failure: function): -``` - -Retrieve the width and height (in pixels) of an image prior to displaying it. This method can fail if the image cannot be found, or fails to download. - -In order to retrieve the image dimensions, the image may first need to be loaded or downloaded, after which it will be cached. This means that in principle you could use this method to preload images, however it is not optimized for that purpose, and may in future be implemented in a way that does not fully load/download the image data. A proper, supported way to preload images will be provided as a separate API. - -**Parameters:** - -| Name | Type | Required | Description | -| ------- | -------- | -------- | -------------------------------------------------------------------------------------------------- | -| uri | string | Yes | The location of the image. | -| success | function | Yes | The function that will be called if the image was sucessfully found and widthand height retrieved. | -| failure | function | Yes | The function that will be called if there was an error, such as failing toto retrieve the image. | - ---- - -### `prefetch()` - -```jsx -static prefetch(url: string): -``` - -Prefetches a remote image for later use by downloading it to the disk cache - -**Parameters:** - -| Name | Type | Required | Description | -| ---- | ------ | -------- | --------------------------------- | -| url | string | Yes | The remote location of the image. | diff --git a/website/versioned_docs/version-0.31/panresponder.md b/website/versioned_docs/version-0.31/panresponder.md deleted file mode 100644 index 67112d6f70f..00000000000 --- a/website/versioned_docs/version-0.31/panresponder.md +++ /dev/null @@ -1,128 +0,0 @@ ---- -id: version-0.31-panresponder -title: PanResponder -original_id: panresponder ---- - -`PanResponder` reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures. - -By default, `PanResponder` holds an `InteractionManager handle to block long-running JS events from interrupting active gestures. - -It provides a predictable wrapper of the responder handlers provided by the [gesture responder system](gesture-responder-system.md). For each handler, it provides a new `gestureState` object alongside the native event object: - -``` -onPanResponderMove: (event, gestureState) => {} -``` - -A native event is a synthetic touch event with the following form: - -- `nativeEvent` - - `changedTouches` - Array of all touch events that have changed since the last event - - `identifier` - The ID of the touch - - `locationX` - The X position of the touch, relative to the element - - `locationY` - The Y position of the touch, relative to the element - - `pageX` - The X position of the touch, relative to the root element - - `pageY` - The Y position of the touch, relative to the root element - - `target` - The node id of the element receiving the touch event - - `timestamp` - A time identifier for the touch, useful for velocity calculation - - `touches` - Array of all current touches on the screen - -A `gestureState` object has the following: - -- `stateID` - ID of the gestureState- persisted as long as there at least one touch on screen -- `moveX` - the latest screen coordinates of the recently-moved touch -- `moveY` - the latest screen coordinates of the recently-moved touch -- `x0` - the screen coordinates of the responder grant -- `y0` - the screen coordinates of the responder grant -- `dx` - accumulated distance of the gesture since the touch started -- `dy` - accumulated distance of the gesture since the touch started -- `vx` - current velocity of the gesture -- `vy` - current velocity of the gesture -- `numberActiveTouches` - Number of touches currently on screen - -### Basic Usage - -``` - componentWillMount: function() { - this._panResponder = PanResponder.create({ - // Ask to be the responder: - onStartShouldSetPanResponder: (evt, gestureState) => true, - onStartShouldSetPanResponderCapture: (evt, gestureState) => true, - onMoveShouldSetPanResponder: (evt, gestureState) => true, - onMoveShouldSetPanResponderCapture: (evt, gestureState) => true, - - onPanResponderGrant: (evt, gestureState) => { - // The guesture has started. Show visual feedback so the user knows - // what is happening! - - // gestureState.{x,y}0 will be set to zero now - }, - onPanResponderMove: (evt, gestureState) => { - // The most recent move distance is gestureState.move{X,Y} - - // The accumulated gesture distance since becoming responder is - // gestureState.d{x,y} - }, - onPanResponderTerminationRequest: (evt, gestureState) => true, - onPanResponderRelease: (evt, gestureState) => { - // The user has released all touches while this view is the - // responder. This typically means a gesture has succeeded - }, - onPanResponderTerminate: (evt, gestureState) => { - // Another component has become the responder, so this gesture - // should be cancelled - }, - onShouldBlockNativeResponder: (evt, gestureState) => { - // Returns whether this component should block native components from becoming the JS - // responder. Returns true by default. Is currently only supported on android. - return true; - }, - }); - }, - - render: function() { - return ( - - ); - }, -``` - -### Working Example - -To see it in action, try the [PanResponder example in UIExplorer](https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/PanResponderExample.js) - -### Methods - -- [`create`](panresponder.md#create) - ---- - -# Reference - -## Methods - -### `create()` - -```jsx -static create(config) -``` - -@param {object} config Enhanced versions of all of the responder callbacks that provide not only the typical `ResponderSyntheticEvent`, but also the `PanResponder` gesture state, by replacing the word `Responder` with `PanResponder` in each of the typical `onResponder*` callbacks. For example, the `config` object would look like: - -- `onMoveShouldSetPanResponder: (e, gestureState) => {...}` -- `onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}` -- `onStartShouldSetPanResponder: (e, gestureState) => {...}` -- `onStartShouldSetPanResponderCapture: (e, gestureState) => {...}` -- `onPanResponderReject: (e, gestureState) => {...}` -- `onPanResponderGrant: (e, gestureState) => {...}` -- `onPanResponderStart: (e, gestureState) => {...}` -- `onPanResponderEnd: (e, gestureState) => {...}` -- `onPanResponderRelease: (e, gestureState) => {...}` -- `onPanResponderMove: (e, gestureState) => {...}` -- `onPanResponderTerminate: (e, gestureState) => {...}` -- `onPanResponderTerminationRequest: (e, gestureState) => {...}` -- `onShouldBlockNativeResponder: (e, gestureState) => {...}` - -In general, for events that have capture equivalents, we update the gestureState once in the capture phase and can use it in the bubble phase as well. - -Be careful with `onStartShould*` callbacks. They only reflect updated `gestureState` for start/end events that bubble/capture to the Node. Once the node is the responder, you can rely on every start/end event being processed by the gesture and `gestureState` being updated accordingly. (numberActiveTouches) may not be totally accurate unless you are the responder. diff --git a/website/versioned_docs/version-0.31/pushnotificationios.md b/website/versioned_docs/version-0.31/pushnotificationios.md deleted file mode 100644 index 758cb7fb3e8..00000000000 --- a/website/versioned_docs/version-0.31/pushnotificationios.md +++ /dev/null @@ -1,307 +0,0 @@ ---- -id: version-0.31-pushnotificationios -title: PushNotificationIOS -original_id: pushnotificationios ---- - -Handle push notifications for your app, including permission handling and icon badge number. - -To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). - -[Manually link](linking-libraries-ios.md#manual-linking) the PushNotificationIOS library - -- Add the following to your Project: `node_modules/react-native/Libraries/PushNotificationIOS/RCTPushNotification.xcodeproj` -- Add the following to `Link Binary With Libraries`: `libRCTPushNotification.a` -- Add the following to your `Header Search Paths`: `$(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS` and set the search to `recursive` - -Finally, to enable support for `notification` and `register` events you need to augment your AppDelegate. - -At the top of your `AppDelegate.m`: - -`#import "RCTPushNotificationManager.h"` - -And then in your AppDelegate implementation add the following: - -``` - // Required to register for notifications - - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings - { - [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings]; - } - // Required for the register event. - - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken - { - [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; - } - // Required for the notification event. - - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification - { - [RCTPushNotificationManager didReceiveRemoteNotification:notification]; - } - // Required for the localNotification event. - - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification - { - [RCTPushNotificationManager didReceiveLocalNotification:notification]; - } - - (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error - { - NSLog(@"%@", error); - } -``` - -### Methods - -- [`presentLocalNotification`](pushnotificationios.md#presentlocalnotification) -- [`scheduleLocalNotification`](pushnotificationios.md#schedulelocalnotification) -- [`cancelAllLocalNotifications`](pushnotificationios.md#cancelalllocalnotifications) -- [`setApplicationIconBadgeNumber`](pushnotificationios.md#setapplicationiconbadgenumber) -- [`getApplicationIconBadgeNumber`](pushnotificationios.md#getapplicationiconbadgenumber) -- [`cancelLocalNotifications`](pushnotificationios.md#cancellocalnotifications) -- [`getScheduledLocalNotifications`](pushnotificationios.md#getscheduledlocalnotifications) -- [`addEventListener`](pushnotificationios.md#addeventlistener) -- [`removeEventListener`](pushnotificationios.md#removeeventlistener) -- [`requestPermissions`](pushnotificationios.md#requestpermissions) -- [`abandonPermissions`](pushnotificationios.md#abandonpermissions) -- [`checkPermissions`](pushnotificationios.md#checkpermissions) -- [`getInitialNotification`](pushnotificationios.md#getinitialnotification) -- [`constructor`](pushnotificationios.md#constructor) -- [`getMessage`](pushnotificationios.md#getmessage) -- [`getSound`](pushnotificationios.md#getsound) -- [`getAlert`](pushnotificationios.md#getalert) -- [`getBadgeCount`](pushnotificationios.md#getbadgecount) -- [`getData`](pushnotificationios.md#getdata) - ---- - -# Reference - -## Methods - -### `presentLocalNotification()` - -```jsx -static presentLocalNotification(details) -``` - -Schedules the localNotification for immediate presentation. - -details is an object containing: - -- `alertBody` : The message displayed in the notification alert. -- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; -- `soundName` : The sound played when the notification is fired (optional). -- `category` : The category of this notification, required for actionable notifications (optional). -- `userInfo` : An optional object containing additional notification data. -- `applicationIconBadgeNumber` (optional) : The number to display as the app's icon badge. The default value of this property is 0, which means that no badge is displayed. - ---- - -### `scheduleLocalNotification()` - -```jsx -static scheduleLocalNotification(details) -``` - -Schedules the localNotification for future presentation. - -details is an object containing: - -- `fireDate` : The date and time when the system should deliver the notification. -- `alertBody` : The message displayed in the notification alert. -- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; -- `soundName` : The sound played when the notification is fired (optional). -- `category` : The category of this notification, required for actionable notifications (optional). -- `userInfo` : An optional object containing additional notification data. -- `applicationIconBadgeNumber` (optional) : The number to display as the app's icon badge. Setting the number to 0 removes the icon badge. - ---- - -### `cancelAllLocalNotifications()` - -```jsx -static cancelAllLocalNotifications() -``` - -Cancels all scheduled localNotifications - ---- - -### `setApplicationIconBadgeNumber()` - -```jsx -static setApplicationIconBadgeNumber(number) -``` - -Sets the badge number for the app icon on the home screen - ---- - -### `getApplicationIconBadgeNumber()` - -```jsx -static getApplicationIconBadgeNumber(callback) -``` - -Gets the current badge number for the app icon on the home screen - ---- - -### `cancelLocalNotifications()` - -```jsx -static cancelLocalNotifications(userInfo) -``` - -Cancel local notifications. - -Optionally restricts the set of canceled notifications to those notifications whose `userInfo` fields match the corresponding fields in the `userInfo` argument. - ---- - -### `getScheduledLocalNotifications()` - -```jsx -static getScheduledLocalNotifications(callback) -``` - -Gets the local notifications that are currently scheduled. - ---- - -### `addEventListener()` - -```jsx -static addEventListener(type, handler) -``` - -Attaches a listener to remote or local notification events while the app is running in the foreground or the background. - -Valid events are: - -- `notification` : Fired when a remote notification is received. The handler will be invoked with an instance of `PushNotificationIOS`. -- `localNotification` : Fired when a local notification is received. The handler will be invoked with an instance of `PushNotificationIOS`. -- `register`: Fired when the user registers for remote notifications. The handler will be invoked with a hex string representing the deviceToken. - ---- - -### `removeEventListener()` - -```jsx -static removeEventListener(type, handler) -``` - -Removes the event listener. Do this in `componentWillUnmount` to prevent memory leaks - ---- - -### `requestPermissions()` - -```jsx -static requestPermissions(permissions?) -``` - -Requests notification permissions from iOS, prompting the user's dialog box. By default, it will request all notification permissions, but a subset of these can be requested by passing a map of requested permissions. The following permissions are supported: - -- `alert` -- `badge` -- `sound` - -If a map is provided to the method, only the permissions with truthy values will be requested. - -This method returns a promise that will resolve when the user accepts, rejects, or if the permissions were previously rejected. The promise resolves to the current state of the permission. - ---- - -### `abandonPermissions()` - -```jsx -static abandonPermissions() -``` - -Unregister for all remote notifications received via Apple Push Notification service. - -You should call this method in rare circumstances only, such as when a new version of the app removes support for all types of remote notifications. Users can temporarily prevent apps from receiving remote notifications through the Notifications section of the Settings app. Apps unregistered through this method can always re-register. - ---- - -### `checkPermissions()` - -```jsx -static checkPermissions(callback) -``` - -See what push permissions are currently enabled. `callback` will be invoked with a `permissions` object: - -- `alert` :boolean -- `badge` :boolean -- `sound` :boolean - ---- - -### `getInitialNotification()` - -```jsx -static getInitialNotification() -``` - -If the app launch was triggered by a push notification, it will give the notification object, otherwise it will give `null` - ---- - -### `constructor()` - -```jsx -constructor(nativeNotif); -``` - -You will never need to instantiate `PushNotificationIOS` yourself. Listening to the `notification` event and invoking `getInitialNotification` is sufficient - ---- - -### `getMessage()` - -```jsx -getMessage(); -``` - -An alias for `getAlert` to get the notification's main message string - ---- - -### `getSound()` - -```jsx -getSound(); -``` - -Gets the sound string from the `aps` object - ---- - -### `getAlert()` - -```jsx -getAlert(); -``` - -Gets the notification's main message from the `aps` object - ---- - -### `getBadgeCount()` - -```jsx -getBadgeCount(); -``` - -Gets the badge count number from the `aps` object - ---- - -### `getData()` - -```jsx -getData(); -``` - -Gets the data object on the notif diff --git a/website/versioned_docs/version-0.31/text.md b/website/versioned_docs/version-0.31/text.md deleted file mode 100644 index 714b572152e..00000000000 --- a/website/versioned_docs/version-0.31/text.md +++ /dev/null @@ -1,240 +0,0 @@ ---- -id: version-0.31-text -title: Text -original_id: text ---- - -A React component for displaying text. - -`Text` supports nesting, styling, and touch handling. - -In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines: - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, Text, StyleSheet } from 'react-native'; - -class TextInANest extends Component { - constructor(props) { - super(props); - this.state = { - titleText: "Bird's Nest", - bodyText: 'This is not really a bird nest.' - }; - } - - render() { - return ( - - - {this.state.titleText}

- - - {this.state.bodyText} - - - ); - } -} - -const styles = StyleSheet.create({ - baseText: { - fontFamily: 'Cochin', - }, - titleText: { - fontSize: 20, - fontWeight: 'bold', - }, -}); - -// App registration and rendering -AppRegistry.registerComponent('TextInANest', () => TextInANest); -``` - -### Props - -- [`onPress`](text.md#onpress) -- [`accessible`](text.md#accessible) -- [`numberOfLines`](text.md#numberoflines) -- [`onLayout`](text.md#onlayout) -- [`onLongPress`](text.md#onlongpress) -- [`ellipsizeMode`](text.md#ellipsizemode) -- [`style`](text.md#style) -- [`testID`](text.md#testid) -- [`selectable`](text.md#selectable) -- [`allowFontScaling`](text.md#allowfontscaling) -- [`suppressHighlighting`](text.md#suppresshighlighting) - ---- - -# Reference - -## Props - -### `onPress` - -This function is called on press. - -e.g., `onPress={() => console.log('1st')}`` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `accessible` - -When set to `true`, indicates that the view is an accessibility element. The default value for a `Text` element is `true`. - -See the [Accessibility guide](accessibility.md#accessible-ios-android) for more information. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `numberOfLines` - -Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. - -This prop is commonly used with `ellipsizeMode`. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with - -`{nativeEvent: {layout: {x, y, width, height}}}` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLongPress` - -This function is called on long press. - -e.g., `onLongPress={this.increaseSize}>`` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `ellipsizeMode` - -This can be one of the following values: - -- `head` - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz" -- `middle` - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. "ab...yz" -- `tail` - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..." -- `clip` - Lines are not drawn past the edge of the text container. - -The default is `tail`. - -`numberOfLines` must be set in conjunction with this prop. - -> `clip` is working only for iOS - -| Type | Required | -| -------------------------------------- | -------- | -| enum('head', 'middle', 'tail', 'clip') | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [View Style Props...](view-style-props.md#style) - -- **`textShadowColor`**: [color](colors.md) - -- **`color`**: [color](colors.md) - -- **`fontSize`**: ReactPropTypes.number - -- **`fontStyle`**: ReactPropTypes.oneOf(['normal', 'italic']) - -- **`fontWeight`**: ReactPropTypes.oneOf( ['normal' /*default*/, 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'] ) - - Specifies font weight. The values 'normal' and 'bold' are supported for - most fonts. Not all fonts have a variant for each of the numeric values, - in that case the closest one is chosen. - -- **`lineHeight`**: ReactPropTypes.number - -- **`textAlign`**: ReactPropTypes.oneOf( ['auto' /*default*/, 'left', 'right', 'center', 'justify'] ) - - Specifies text alignment. The value 'justify' is only supported on iOS and - fallbacks to `left` on Android. - -- **`textDecorationLine`**: ReactPropTypes.oneOf( ['none' /*default*/, 'underline', 'line-through', 'underline line-through'] ) - -- **`fontFamily`**: ReactPropTypes.string - -- **`textShadowOffset`**: ReactPropTypes.shape( {width: ReactPropTypes.number, height: ReactPropTypes.number} ) - -- **`textShadowRadius`**: ReactPropTypes.number - -- **`textAlignVertical`**: ReactPropTypes.oneOf( ['auto' /*default*/, 'top', 'bottom', 'center'] ) (_Android_) - -- **`letterSpacing`**: ReactPropTypes.number (_iOS_) - -- **`textDecorationColor`**: [color](colors.md) (_iOS_) - -- **`textDecorationStyle`**: ReactPropTypes.oneOf( ['solid' /*default*/, 'double', 'dotted','dashed'] ) (_iOS_) - -- **`writingDirection`**: ReactPropTypes.oneOf( ['auto' /*default*/, 'ltr', 'rtl'] ) (_iOS_) - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `selectable` - -Lets the user select text, to use the native copy and paste functionality. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `allowFontScaling` - -Specifies whether fonts should scale to respect Text Size accessibility setting on iOS. The default is `true`. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `suppressHighlighting` - -When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | diff --git a/website/versioned_docs/version-0.31/textinput.md b/website/versioned_docs/version-0.31/textinput.md deleted file mode 100644 index 820229bf28f..00000000000 --- a/website/versioned_docs/version-0.31/textinput.md +++ /dev/null @@ -1,590 +0,0 @@ ---- -id: version-0.31-textinput -title: TextInput -original_id: textinput ---- - -A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. - -One use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example: - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, TextInput } from 'react-native'; - -class UselessTextInput extends Component { - constructor(props) { - super(props); - this.state = { text: 'Useless Placeholder' }; - } - - render() { - return ( - this.setState({text})} - value={this.state.text} - /> - ); - } -} - -// App registration and rendering -AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput); -``` - -Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=false`. To achieve the same effect, you can wrap your `TextInput` in a `View`: - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, View, TextInput } from 'react-native'; - -class UselessTextInput extends Component { - render() { - return ( - - ); - } -} - -class UselessTextInputMultiline extends Component { - constructor(props) { - super(props); - this.state = { - text: 'Useless Multiline Placeholder', - }; - } - - // If you type something in the text box that is a color, the background will change to that - // color. - render() { - return ( - - this.setState({text})} - value={this.state.text} - /> - - ); - } -} - -// App registration and rendering -AppRegistry.registerComponent( - 'AwesomeProject', - () => UselessTextInputMultiline -); -``` - -`TextInput` has by default a border at the bottom of its view. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this is to either not set height explicitly, case in which the system will take care of displaying the border in the correct position, or to not display the border by setting `underlineColorAndroid` to transparent. - -### Props - -- [View props...](view.md#props) - -* [`placeholder`](textinput.md#placeholder) -* [`autoCapitalize`](textinput.md#autocapitalize) -* [`autoFocus`](textinput.md#autofocus) -* [`blurOnSubmit`](textinput.md#bluronsubmit) -* [`defaultValue`](textinput.md#defaultvalue) -* [`editable`](textinput.md#editable) -* [`keyboardType`](textinput.md#keyboardtype) -* [`maxLength`](textinput.md#maxlength) -* [`multiline`](textinput.md#multiline) -* [`onBlur`](textinput.md#onblur) -* [`onChange`](textinput.md#onchange) -* [`onChangeText`](textinput.md#onchangetext) -* [`onContentSizeChange`](textinput.md#oncontentsizechange) -* [`onEndEditing`](textinput.md#onendediting) -* [`onFocus`](textinput.md#onfocus) -* [`onLayout`](textinput.md#onlayout) -* [`onSelectionChange`](textinput.md#onselectionchange) -* [`onSubmitEditing`](textinput.md#onsubmitediting) -* [`autoCorrect`](textinput.md#autocorrect) -* [`placeholderTextColor`](textinput.md#placeholdertextcolor) -* [`returnKeyType`](textinput.md#returnkeytype) -* [`secureTextEntry`](textinput.md#securetextentry) -* [`selectTextOnFocus`](textinput.md#selecttextonfocus) -* [`selectionColor`](textinput.md#selectioncolor) -* [`style`](textinput.md#style) -* [`value`](textinput.md#value) -* [`inlineImageLeft`](textinput.md#inlineimageleft) -* [`inlineImagePadding`](textinput.md#inlineimagepadding) -* [`numberOfLines`](textinput.md#numberoflines) -* [`returnKeyLabel`](textinput.md#returnkeylabel) -* [`underlineColorAndroid`](textinput.md#underlinecolorandroid) -* [`clearButtonMode`](textinput.md#clearbuttonmode) -* [`clearTextOnFocus`](textinput.md#cleartextonfocus) -* [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) -* [`keyboardAppearance`](textinput.md#keyboardappearance) -* [`onKeyPress`](textinput.md#onkeypress) -* [`selectionState`](textinput.md#selectionstate) - -### Methods - -- [`isFocused`](textinput.md#isfocused) -- [`clear`](textinput.md#clear) - ---- - -# Reference - -## Props - -### `placeholder` - -The string that will be rendered before text input has been entered. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.string | No | - ---- - -### `autoCapitalize` - -Can tell `TextInput` to automatically capitalize certain characters. - -- `characters`: all characters. -- `words`: first letter of each word. -- `sentences`: first letter of each sentence (_default_). -- `none`: don't auto capitalize anything. - -| Type | Required | -| ---- | -------- | - - -| PropTypes.oneOf([ 'none', 'sentences', 'words', 'characters', ]) | No | - ---- - -### `autoFocus` - -If `true`, focuses the input on `componentDidMount`. The default value is `false`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `blurOnSubmit` - -If `true`, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting `blurOnSubmit` to `true` means that pressing return will blur the field and trigger the `onSubmitEditing` event instead of inserting a newline into the field. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `defaultValue` - -Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.string | No | - ---- - -### `editable` - -If `false`, text is not editable. The default value is `true`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `keyboardType` - -Determines which keyboard to open, e.g.`numeric`. - -The following values work across platforms: - -- `default` -- `numeric` -- `email-address` -- `phone-pad` - -| Type | Required | -| ---- | -------- | - - -| PropTypes.oneOf([ // Cross-platform 'default', 'email-address', 'numeric', 'phone-pad', // iOS-only 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', ]) | No | - ---- - -### `maxLength` - -Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.number | No | - ---- - -### `multiline` - -If `true`, the text input can be multiple lines. The default value is `false`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `onBlur` - -Callback that is called when the text input is blurred. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onChange` - -Callback that is called when the text input's text changes. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onChangeText` - -Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onContentSizeChange` - -Callback that is called when the text input's content size changes. This will be called with `{ nativeEvent: { contentSize: { width, height } } }`. - -Only called for multiline text inputs. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onEndEditing` - -Callback that is called when text input ends. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onFocus` - -Callback that is called when the text input is focused. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{x, y, width, height}`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onSelectionChange` - -Callback that is called when the text input selection is changed. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onSubmitEditing` - -Callback that is called when the text input's submit button is pressed. Invalid if `multiline={true}` is specified. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `autoCorrect` - -If `false`, disables auto-correct. The default value is `true`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `placeholderTextColor` - -The text color of the placeholder string. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `returnKeyType` - -Determines how the return key should look. On Android you can also use `returnKeyLabel`. - -_Cross platform_ - -The following values work across platforms: - -- `done` -- `go` -- `next` -- `search` -- `send` - -_Android Only_ - -The following values work on Android only: - -- `none` -- `previous` - -_iOS Only_ - -The following values work on iOS only: - -- `default` -- `emergency-call` -- `google` -- `join` -- `route` -- `yahoo` - -| Type | Required | -| ---- | -------- | - - -| PropTypes.oneOf([ // Cross-platform 'done', 'go', 'next', 'search', 'send', // Android-only 'none', 'previous', // iOS-only 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo', ]) | No | - ---- - -### `secureTextEntry` - -If `true`, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is `false`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `selectTextOnFocus` - -If `true`, all text will automatically be selected on focus. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `selectionColor` - -The highlight (and cursor on iOS) color of the text input. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `style` - -[Styles](style.md) - -| Type | Required | -| --------------------- | -------- | -| [Text](text.md#style) | No | - ---- - -### `value` - -The value to show for the text input. `TextInput` is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.string | No | - ---- - -### `inlineImageLeft` - -If defined, the provided image resource will be rendered on the left. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.string | No | Android | - ---- - -### `inlineImagePadding` - -Padding between the inline image, if any, and the text input itself. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.number | No | Android | - ---- - -### `numberOfLines` - -Sets the number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.number | No | Android | - ---- - -### `returnKeyLabel` - -Sets the return key to the label. Use it instead of `returnKeyType`. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.string | No | Android | - ---- - -### `underlineColorAndroid` - -The color of the `TextInput` underline. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `clearButtonMode` - -When the clear button should appear on the right side of the text view. - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| PropTypes.oneOf([ 'never', 'while-editing', 'unless-editing', 'always', ]) | No | iOS | - ---- - -### `clearTextOnFocus` - -If `true`, clears the text field automatically when editing begins. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.bool | No | iOS | - ---- - -### `enablesReturnKeyAutomatically` - -If `true`, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is `false`. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.bool | No | iOS | - ---- - -### `keyboardAppearance` - -Determines the color of the keyboard. - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| PropTypes.oneOf([ 'default', 'light', 'dark', ]) | No | iOS | - ---- - -### `onKeyPress` - -Callback that is called when a key is pressed. Pressed key value is passed as an argument to the callback handler. Fires before `onChange` callbacks. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.func | No | iOS | - ---- - -### `selectionState` - -An instance of `DocumentSelectionState`, this is some state that is responsible for maintaining selection information for a document. - -Some functionality that can be performed with this instance is: - -- `blur()` -- `focus()` -- `update()` - -> You can reference `DocumentSelectionState` in [`vendor/document/selection/DocumentSelectionState.js`](https://github.com/facebook/react-native/blob/master/Libraries/vendor/document/selection/DocumentSelectionState.js) - -| Type | Required | Platform | -| -------------------------------------------- | -------- | -------- | -| PropTypes.instanceOf(DocumentSelectionState) | No | iOS | - -## Methods - -### `isFocused()` - -```jsx -isFocused(): -``` - -Returns `true` if the input is currently focused; `false` otherwise. - ---- - -### `clear()` - -```jsx -clear(); -``` - -Removes all text from the `TextInput`. diff --git a/website/versioned_docs/version-0.31/toastandroid.md b/website/versioned_docs/version-0.31/toastandroid.md deleted file mode 100644 index af9c1368e99..00000000000 --- a/website/versioned_docs/version-0.31/toastandroid.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -id: version-0.31-toastandroid -title: ToastAndroid -original_id: toastandroid ---- - -This exposes the native ToastAndroid module as a JS module. This has a function 'show' which takes the following parameters: - -1. String message: A string with the text to toast -2. int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG - -There is also a function `showWithGravity` to specify the layout gravity. May be ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER - -### Methods - -- [`show`](toastandroid.md#show) -- [`showWithGravity`](toastandroid.md#showwithgravity) - -### Properties - -- [`SHORT`](toastandroid.md#short) -- [`LONG`](toastandroid.md#long) -- [`TOP`](toastandroid.md#top) -- [`BOTTOM`](toastandroid.md#bottom) -- [`CENTER`](toastandroid.md#center) - ---- - -# Reference - -## Methods - -### `show()` - -```jsx -static show(message, duration) -``` - ---- - -### `showWithGravity()` - -```jsx -static showWithGravity(message, duration, gravity) -``` - -## Properties - -### `SHORT` - -```jsx -ToastAndroid.SHORT; -``` - ---- - -### `LONG` - -```jsx -ToastAndroid.LONG; -``` - ---- - -### `TOP` - -```jsx -ToastAndroid.TOP; -``` - ---- - -### `BOTTOM` - -```jsx -ToastAndroid.BOTTOM; -``` - ---- - -### `CENTER` - -```jsx -ToastAndroid.CENTER; -``` diff --git a/website/versioned_docs/version-0.31/touchablehighlight.md b/website/versioned_docs/version-0.31/touchablehighlight.md deleted file mode 100644 index 472a49cc8bf..00000000000 --- a/website/versioned_docs/version-0.31/touchablehighlight.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: version-0.31-touchablehighlight -title: TouchableHighlight -original_id: touchablehighlight ---- - -A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view. The underlay comes from adding a view to the view hierarchy, which can 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. - -Example: - -``` -renderButton: function() { - return ( - - - - ); -}, -``` - -> **NOTE**: TouchableHighlight supports only one child -> -> If you wish to have several child components, wrap them in a View. - -### Props - -- [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) - -* [`activeOpacity`](touchablehighlight.md#activeopacity) -* [`onHideUnderlay`](touchablehighlight.md#onhideunderlay) -* [`onShowUnderlay`](touchablehighlight.md#onshowunderlay) -* [`style`](touchablehighlight.md#style) -* [`underlayColor`](touchablehighlight.md#underlaycolor) - ---- - -# Reference - -## Props - -### `activeOpacity` - -Determines what the opacity of the wrapped view should be when touch is active. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `onHideUnderlay` - -Called immediately after the underlay is hidden - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onShowUnderlay` - -Called immediately after the underlay is shown - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `style` - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `underlayColor` - -The color of the underlay that will show through when the touch is active. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | diff --git a/website/versioned_docs/version-0.31/touchableopacity.md b/website/versioned_docs/version-0.31/touchableopacity.md deleted file mode 100644 index 20740f8f3d7..00000000000 --- a/website/versioned_docs/version-0.31/touchableopacity.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: version-0.31-touchableopacity -title: TouchableOpacity -original_id: touchableopacity ---- - -A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it. This is done without actually changing the view hierarchy, and in general it can be added to an app without weird side-effects. - -Example: - -``` -renderButton: function() { - return ( - - - - ); -}, -``` - -### Props - -- [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) - -* [`activeOpacity`](touchableopacity.md#activeopacity) - -### Methods - -- [`setOpacityTo`](touchableopacity.md#setopacityto) - ---- - -# Reference - -## Props - -### `activeOpacity` - -Determines what the opacity of the wrapped view should be when touch is active. Defaults to 0.2. - -| Type | Required | -| ------ | -------- | -| number | No | - -## Methods - -### `setOpacityTo()` - -```jsx -setOpacityTo((value: number)); -``` - -Animate the touchable to a new opacity. diff --git a/website/versioned_docs/version-0.31/webview.md b/website/versioned_docs/version-0.31/webview.md deleted file mode 100644 index e462ab87afb..00000000000 --- a/website/versioned_docs/version-0.31/webview.md +++ /dev/null @@ -1,394 +0,0 @@ ---- -id: version-0.31-webview -title: WebView -original_id: webview ---- - -`WebView` renders web content in a native view. - -``` -import React, { Component } from 'react'; -import { WebView } from 'react-native'; - -class MyWeb extends Component { - render() { - return ( - - ); - } -} -``` - -You can use this component to navigate back and forth in the web view's history and configure various properties for the web content. - -### Props - -- [View props...](view.md#props) - -* [`source`](webview.md#source) -* [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) -* [`onShouldStartLoadWithRequest`](webview.md#onshouldstartloadwithrequest) -* [`injectedJavaScript`](webview.md#injectedjavascript) -* [`mediaPlaybackRequiresUserAction`](webview.md#mediaplaybackrequiresuseraction) -* [`onError`](webview.md#onerror) -* [`onLoad`](webview.md#onload) -* [`onLoadEnd`](webview.md#onloadend) -* [`onLoadStart`](webview.md#onloadstart) -* [`onNavigationStateChange`](webview.md#onnavigationstatechange) -* [`renderError`](webview.md#rendererror) -* [`renderLoading`](webview.md#renderloading) -* [`scalesPageToFit`](webview.md#scalespagetofit) -* [`contentInset`](webview.md#contentinset) -* [`startInLoadingState`](webview.md#startinloadingstate) -* [`style`](webview.md#style) -* [`decelerationRate`](webview.md#decelerationrate) -* [`domStorageEnabled`](webview.md#domstorageenabled) -* [`javaScriptEnabled`](webview.md#javascriptenabled) -* [`userAgent`](webview.md#useragent) -* [`allowsInlineMediaPlayback`](webview.md#allowsinlinemediaplayback) -* [`bounces`](webview.md#bounces) -* [`dataDetectorTypes`](webview.md#datadetectortypes) -* [`scrollEnabled`](webview.md#scrollenabled) -* [`url`](webview.md#url) -* [`html`](webview.md#html) - -### Methods - -- [`goForward`](webview.md#goforward) -- [`goBack`](webview.md#goback) -- [`reload`](webview.md#reload) -- [`stopLoading`](webview.md#stoploading) -- [`getWebViewHandle`](webview.md#getwebviewhandle) - ---- - -# Reference - -## Props - -### `source` - -Loads static html or a uri (with optional headers) in the WebView. - -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------- | -------- | -| object: {uri: string,method: string,headers: object,body: string}, ,object: {html: string,baseUrl: string}, ,number | No | - ---- - -### `automaticallyAdjustContentInsets` - -Controls whether to adjust the content inset for web views that are placed behind a navigation bar, tab bar, or toolbar. The default value is `true`. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onShouldStartLoadWithRequest` - -Function that allows custom handling of any web view requests. Return `true` from the function to continue loading the request and `false` to stop loading. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `injectedJavaScript` - -Set this to provide JavaScript that will be injected into the web page when the view loads. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `mediaPlaybackRequiresUserAction` - -Boolean that determines whether HTML5 audio and video requires the user to tap them before they start playing. The default value is `false`. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onError` - -Function that is invoked when the `WebView` load fails. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoad` - -Function that is invoked when the `WebView` has finished loading. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadEnd` - -Function that is invoked when the `WebView` load succeeds or fails. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadStart` - -Function that is invoked when the `WebView` starts loading. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onNavigationStateChange` - -Function that is invoked when the `WebView` loading starts or ends. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `renderError` - -Function that returns a view to show if there's an error. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `renderLoading` - -Function that returns a loading indicator. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `scalesPageToFit` - -Boolean that controls whether the web content is scaled to fit the view and enables the user to change the scale. The default value is `true`. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `contentInset` - -The amount by which the web view content is inset from the edges of the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}. - -| Type | Required | -| ------------------------------------------------------------------ | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | - ---- - -### `startInLoadingState` - -Boolean value that forces the `WebView` to show the loading view on the first load. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -The style to apply to the `WebView`. - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use the string shortcuts `"normal"` and `"fast"` which match the underlying iOS settings for `UIScrollViewDecelerationRateNormal` and `UIScrollViewDecelerationRateFast` respectively: - -- normal: 0.998 -- fast: 0.99 (the default for iOS web view) - -| Type | Required | Platform | -| ------------------------------------- | -------- | -------- | -| ScrollView.propTypes.decelerationRate | No | iOS | - ---- - -### `domStorageEnabled` - -Boolean value to control whether DOM Storage is enabled. Used only in Android. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `javaScriptEnabled` - -Boolean value to enable JavaScript in the `WebView`. Used on Android only as JavaScript is enabled by default on iOS. The default value is `true`. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `userAgent` - -Sets the user-agent for the `WebView`. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `allowsInlineMediaPlayback` - -Boolean that determines whether HTML5 videos play inline or use the native full-screen controller. The default value is `false`. - -**NOTE** : In order for video to play inline, not only does this property need to be set to `true`, but the video element in the HTML document must also include the `webkit-playsinline` attribute. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bounces` - -Boolean value that determines whether the web view bounces when it reaches the edge of the content. The default value is `true`. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `dataDetectorTypes` - -Determines the types of data converted to clickable URLs in the web view’s content. By default only phone numbers are detected. - -You can provide one type or an array of many types. - -Possible values for `dataDetectorTypes` are: - -- `'phoneNumber'` -- `'link'` -- `'address'` -- `'calendarEvent'` -- `'none'` -- `'all'` - -| Type | Required | Platform | -| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all') | No | iOS | - ---- - -### `scrollEnabled` - -Boolean value that determines whether scrolling is enabled in the `WebView`. The default value is `true`. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `url` - -**Deprecated.** Use the `source` prop instead. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `html` - -**Deprecated.** Use the `source` prop instead. - -| Type | Required | -| ------ | -------- | -| string | No | - -## Methods - -### `goForward()` - -```jsx -goForward(); -``` - -Go forward one page in the web view's history. - ---- - -### `goBack()` - -```jsx -goBack(); -``` - -Go back one page in the web view's history. - ---- - -### `reload()` - -```jsx -reload(); -``` - -Reloads the current page. - ---- - -### `stopLoading()` - -```jsx -stopLoading(); -``` - -Stop loading the current page. - ---- - -### `getWebViewHandle()` - -```jsx -getWebViewHandle(): -``` - -Returns the native `WebView` node. diff --git a/website/versioned_docs/version-0.32/activityindicator.md b/website/versioned_docs/version-0.32/activityindicator.md deleted file mode 100644 index 4515fd7e868..00000000000 --- a/website/versioned_docs/version-0.32/activityindicator.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -id: version-0.32-activityindicator -title: ActivityIndicator -original_id: activityindicator ---- - -Displays a circular loading indicator. - -### Props - -- [View props...](view.md#props) - -* [`animating`](activityindicator.md#animating) -* [`color`](activityindicator.md#color) -* [`size`](activityindicator.md#size) -* [`hidesWhenStopped`](activityindicator.md#hideswhenstopped) - ---- - -# Reference - -## Props - -### `animating` - -Whether to show the indicator (true, the default) or hide it (false). - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `color` - -The foreground color of the spinner (default is gray). - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `size` - -Size of the indicator (default is 'small'). Passing a number to the size prop is only supported on Android. - -| Type | Required | -| ---- | -------- | - - -| PropTypes.oneOfType([ PropTypes.oneOf([ 'small', 'large' ]), PropTypes.number, ]) | No | - ---- - -### `hidesWhenStopped` - -Whether the indicator should hide when not animating (true by default). - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.bool | No | iOS | diff --git a/website/versioned_docs/version-0.32/image.md b/website/versioned_docs/version-0.32/image.md deleted file mode 100644 index 2b6b14ce306..00000000000 --- a/website/versioned_docs/version-0.32/image.md +++ /dev/null @@ -1,374 +0,0 @@ ---- -id: version-0.32-image -title: Image -original_id: image ---- - -A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. - -This example shows both fetching and displaying an image from local storage as well as on from network. - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, View, Image } from 'react-native'; - -class DisplayAnImage extends Component { - render() { - return ( - - - - - ); - } -} - -// App registration and rendering -AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage); -``` - -You can also add `style` to an image: - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, View, Image, StyleSheet} from 'react-native'; - -const styles = StyleSheet.create({ - stretch: { - width: 50, - height: 200 - } -}); - -class DisplayAnImageWithStyle extends Component { - render() { - return ( - - - - ); - } -} - -// App registration and rendering -AppRegistry.registerComponent( - 'DisplayAnImageWithStyle', - () => DisplayAnImageWithStyle -); -``` - -### GIF and WebP support on Android - -By default, GIF and WebP are not supported on Android. - -You will need to add some optional modules in `android/app/build.gradle`, depending on the needs of your app. - -``` -dependencies { - // If your app supports Android versions before Ice Cream Sandwich (API level 14) - compile 'com.facebook.fresco:animated-base-support:0.11.0' - - // For animated GIF support - compile 'com.facebook.fresco:animated-gif:0.11.0' - - // For WebP support, including animated WebP - compile 'com.facebook.fresco:animated-webp:0.11.0' - compile 'com.facebook.fresco:webpsupport:0.11.0' - - // For WebP support, without animations - compile 'com.facebook.fresco:webpsupport:0.11.0' -} -``` - -Also, if you use GIF with ProGuard, you will need to add this rule in `proguard-rules.pro` : - -``` --keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl { - public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier); -} -``` - -### Props - -- [`testID`](image.md#testid) -- [`onLayout`](image.md#onlayout) -- [`onLoadEnd`](image.md#onloadend) -- [`onLoadStart`](image.md#onloadstart) -- [`resizeMode`](image.md#resizemode) -- [`source`](image.md#source) -- [`style`](image.md#style) -- [`onLoad`](image.md#onload) -- [`accessibilityLabel`](image.md#accessibilitylabel) -- [`accessible`](image.md#accessible) -- [`blurRadius`](image.md#blurradius) -- [`capInsets`](image.md#capinsets) -- [`defaultSource`](image.md#defaultsource) -- [`onError`](image.md#onerror) -- [`onProgress`](image.md#onprogress) - -### Methods - -- [`getSize`](image.md#getsize) -- [`prefetch`](image.md#prefetch) - ---- - -# Reference - -## Props - -### `testID` - -A unique identifier for this element to be used in UI Automation testing scripts. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.string | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{nativeEvent: {layout: {x, y, width, height}}}`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onLoadEnd` - -Invoked when load either succeeds or fails. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onLoadStart` - -Invoked on load start. - -e.g., `onLoadStart={(e) => this.setState({loading: true})}` - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `resizeMode` - -Determines how to resize the image when the frame doesn't match the raw image dimensions. - -- `cover`: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding). - -- `contain`: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). - -- `stretch`: Scale width and height independently, This may change the aspect ratio of the src. - -- `repeat`: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio. (iOS only) - -| Type | Required | -| -------------------------------------------------------------------- | -------- | -| PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']) | No | - ---- - -### `source` - -The image source (either a remote URL or a local file resource). - -This prop can also contain several remote URLs, specified together with their width and height and potentially with scale/other URI arguments. The native side will then choose the best `uri` to display based on the measured size of the image container. - -| Type | Required | -| ------------------- | -------- | -| ImageSourcePropType | No | - ---- - -### `style` - -> `ImageResizeMode` is an `Enum` for different image resizing modes, set via the `resizeMode` style property on `Image` components. The values are `contain`, `cover`, `stretch`, `center`, `repeat`. - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Shadow Props...](shadow-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderTopRightRadius`**: ReactPropTypes.number - -- **`backfaceVisibility`**: ReactPropTypes.oneOf(['visible', 'hidden']) - -- **`borderBottomLeftRadius`**: ReactPropTypes.number - -- **`borderBottomRightRadius`**: ReactPropTypes.number - -- **`borderColor`**: [color](colors.md) - -- **`borderRadius`**: ReactPropTypes.number - -- **`borderTopLeftRadius`**: ReactPropTypes.number - -- **`backgroundColor`**: [color](colors.md) - -- **`borderWidth`**: ReactPropTypes.number - -- **`opacity`**: ReactPropTypes.number - -- **`overflow`**: ReactPropTypes.oneOf(['visible', 'hidden']) - -- **`resizeMode`**: ReactPropTypes.oneOf(Object.keys(ImageResizeMode)) - -- **`tintColor`**: [color](colors.md) - - Changes the color of all the non-transparent pixels to the tintColor. - -- **`overlayColor`**: ReactPropTypes.string (_Android_) - - When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners: - - - Certain resize modes, such as 'contain' - - Animated GIFs - - A typical way to use this prop is with images displayed on a solid background and setting the `overlayColor` to the same color as the background. - - For details of how this works under the hood, see http://frescolib.org/rounded-corners-and-circles.md - ---- - -### `onLoad` - -Invoked when load completes successfully. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `accessibilityLabel` - -The text that's read by the screen reader when the user interacts with the image. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.string | No | iOS | - ---- - -### `accessible` - -When true, indicates the image is an accessibility element. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.bool | No | iOS | - ---- - -### `blurRadius` - -blurRadius: the blur radius of the blur filter added to the image - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.number | No | iOS | - ---- - -### `capInsets` - -When the image is resized, the corners of the size specified by `capInsets` will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info in the [official Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets). - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `defaultSource` - -A static image to display while loading the image source. - -- `uri` - a string representing the resource identifier for the image, which should be either a local file path or the name of a static image resource (which should be wrapped in the `require('./path/to/image.png')` function). -- `width`, `height` - can be specified if known at build time, in which case these will be used to set the default `` component dimensions. -- `scale` - used to indicate the scale factor of the image. Defaults to 1.0 if unspecified, meaning that one image pixel equates to one display point / DIP. -- `number` - Opaque type returned by something like `require('./image.jpg')`. - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| PropTypes.oneOfType([ // TODO: Tooling to support documenting these directly and having them display in the docs. PropTypes.shape({ uri: PropTypes.string, width: PropTypes.number, height: PropTypes.number, scale: PropTypes.number, }), PropTypes.number, ]) | No | iOS | - ---- - -### `onError` - -Invoked on load error with `{nativeEvent: {error}}`. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.func | No | iOS | - ---- - -### `onProgress` - -Invoked on download progress with `{nativeEvent: {loaded, total}}`. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.func | No | iOS | - -## Methods - -### `getSize()` - -```jsx -static getSize(uri: string, success: function, failure: function): -``` - -Retrieve the width and height (in pixels) of an image prior to displaying it. This method can fail if the image cannot be found, or fails to download. - -In order to retrieve the image dimensions, the image may first need to be loaded or downloaded, after which it will be cached. This means that in principle you could use this method to preload images, however it is not optimized for that purpose, and may in future be implemented in a way that does not fully load/download the image data. A proper, supported way to preload images will be provided as a separate API. - -**Parameters:** - -| Name | Type | Required | Description | -| ------- | -------- | -------- | -------------------------------------------------------------------------------------------------- | -| uri | string | Yes | The location of the image. | -| success | function | Yes | The function that will be called if the image was sucessfully found and widthand height retrieved. | -| failure | function | Yes | The function that will be called if there was an error, such as failing toto retrieve the image. | - ---- - -### `prefetch()` - -```jsx -static prefetch(url: string): -``` - -Prefetches a remote image for later use by downloading it to the disk cache - -**Parameters:** - -| Name | Type | Required | Description | -| ---- | ------ | -------- | --------------------------------- | -| url | string | Yes | The remote location of the image. | diff --git a/website/versioned_docs/version-0.32/keyboardavoidingview.md b/website/versioned_docs/version-0.32/keyboardavoidingview.md deleted file mode 100644 index d5122e5e927..00000000000 --- a/website/versioned_docs/version-0.32/keyboardavoidingview.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -id: version-0.32-keyboardavoidingview -title: KeyboardAvoidingView -original_id: keyboardavoidingview ---- - -### Props - -- [View props...](view.md#props) - -* [`behavior`](keyboardavoidingview.md#behavior) -* [`contentContainerStyle`](keyboardavoidingview.md#contentcontainerstyle) -* [`keyboardVerticalOffset`](keyboardavoidingview.md#keyboardverticaloffset) - -### Methods - -- [`relativeKeyboardHeight`](keyboardavoidingview.md#relativekeyboardheight) -- [`onKeyboardChange`](keyboardavoidingview.md#onkeyboardchange) -- [`onLayout`](keyboardavoidingview.md#onlayout) - ---- - -# Reference - -## Props - -### `behavior` - -| Type | Required | -| -------------------------------------------------- | -------- | -| PropTypes.oneOf(['height', 'position', 'padding']) | No | - ---- - -### `contentContainerStyle` - -The style of the content container(View) when behavior is 'position'. - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `keyboardVerticalOffset` - -This is the distance between the top of the user screen and the react native view, may be non-zero in some use cases. - -| Type | Required | -| --------------------------- | -------- | -| PropTypes.number.isRequired | No | - -## Methods - -### `relativeKeyboardHeight()` - -```jsx -relativeKeyboardHeight(keyboardFrame: object): -``` - ---- - -### `onKeyboardChange()` - -```jsx -onKeyboardChange((event: object)); -``` - ---- - -### `onLayout()` - -```jsx -onLayout((event: object)); -``` diff --git a/website/versioned_docs/version-0.32/layout-props.md b/website/versioned_docs/version-0.32/layout-props.md deleted file mode 100644 index 014b35594b1..00000000000 --- a/website/versioned_docs/version-0.32/layout-props.md +++ /dev/null @@ -1,483 +0,0 @@ ---- -id: version-0.32-layout-props -title: Layout Props -original_id: layout-props ---- - -### Props - -- [`marginRight`](layout-props.md#marginright) -- [`alignItems`](layout-props.md#alignitems) -- [`borderBottomWidth`](layout-props.md#borderbottomwidth) -- [`borderLeftWidth`](layout-props.md#borderleftwidth) -- [`borderRightWidth`](layout-props.md#borderrightwidth) -- [`borderTopWidth`](layout-props.md#bordertopwidth) -- [`borderWidth`](layout-props.md#borderwidth) -- [`bottom`](layout-props.md#bottom) -- [`flex`](layout-props.md#flex) -- [`flexDirection`](layout-props.md#flexdirection) -- [`flexWrap`](layout-props.md#flexwrap) -- [`height`](layout-props.md#height) -- [`justifyContent`](layout-props.md#justifycontent) -- [`left`](layout-props.md#left) -- [`margin`](layout-props.md#margin) -- [`marginBottom`](layout-props.md#marginbottom) -- [`marginHorizontal`](layout-props.md#marginhorizontal) -- [`marginLeft`](layout-props.md#marginleft) -- [`alignSelf`](layout-props.md#alignself) -- [`marginTop`](layout-props.md#margintop) -- [`marginVertical`](layout-props.md#marginvertical) -- [`maxHeight`](layout-props.md#maxheight) -- [`maxWidth`](layout-props.md#maxwidth) -- [`minHeight`](layout-props.md#minheight) -- [`minWidth`](layout-props.md#minwidth) -- [`padding`](layout-props.md#padding) -- [`paddingBottom`](layout-props.md#paddingbottom) -- [`paddingHorizontal`](layout-props.md#paddinghorizontal) -- [`paddingLeft`](layout-props.md#paddingleft) -- [`paddingRight`](layout-props.md#paddingright) -- [`paddingTop`](layout-props.md#paddingtop) -- [`paddingVertical`](layout-props.md#paddingvertical) -- [`position`](layout-props.md#position) -- [`right`](layout-props.md#right) -- [`top`](layout-props.md#top) -- [`width`](layout-props.md#width) -- [`zIndex`](layout-props.md#zindex) - ---- - -# Reference - -## Props - -### `marginRight` - -`marginRight` works like `margin-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `alignItems` - -`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS, except the default value is `stretch` instead of `flex-start`. See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items for more details. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'flex-start', 'flex-end', 'center', 'stretch' ]) | No | - ---- - -### `borderBottomWidth` - -`borderBottomWidth` works like `border-bottom-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderLeftWidth` - -`borderLeftWidth` works like `border-left-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderRightWidth` - -`borderRightWidth` works like `border-right-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderTopWidth` - -`borderTopWidth` works like `border-top-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderWidth` - -`borderWidth` works like `border-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `bottom` - -`bottom` is the number of logical pixels to offset the bottom edge of this component. - -It works similarly to `bottom` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of how `top` affects layout. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `flex` - -In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the `css-layout` library at https://github.com/facebook/css-layout. - -When `flex` is a positive number, it makes the component flexible and it will be sized proportional to its flex value. So a component with `flex` set to 2 will take twice the space as a component with `flex` set to 1. - -When `flex` is 0, the component is sized according to `width` and `height` and it is inflexible. - -When `flex` is -1, the component is normally sized according `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `flexDirection` - -`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`. See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction for more details. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'row', 'row-reverse', 'column', 'column-reverse' ]) | No | - ---- - -### `flexWrap` - -`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap for more details. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'wrap', 'nowrap' ]) | No | - ---- - -### `height` - -`height` sets the height of this component. - -It works similarly to `height` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `justifyContent` - -`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content for more details. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'flex-start', 'flex-end', 'center', 'space-between', 'space-around' ]) | No | - ---- - -### `left` - -`left` is the number of logical pixels to offset the left edge of this component. - -It works similarly to `left` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of how `left` affects layout. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `margin` - -Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `marginBottom` - -`marginBottom` works like `margin-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `marginHorizontal` - -Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `marginLeft` - -`marginLeft` works like `margin-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `alignSelf` - -`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/align-self for more details. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'auto', 'flex-start', 'flex-end', 'center', 'stretch' ]) | No | - ---- - -### `marginTop` - -`marginTop` works like `margin-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `marginVertical` - -Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `maxHeight` - -`maxHeight` is the maximum height for this component, in logical pixels. - -It works similarly to `max-height` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `maxWidth` - -`maxWidth` is the maximum width for this component, in logical pixels. - -It works similarly to `max-width` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `minHeight` - -`minHeight` is the minimum height for this component, in logical pixels. - -It works similarly to `min-height` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `minWidth` - -`minWidth` is the minimum width for this component, in logical pixels. - -It works similarly to `min-width` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `padding` - -Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingBottom` - -`paddingBottom` works like `padding-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingHorizontal` - -Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRight`. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingLeft` - -`paddingLeft` works like `padding-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingRight` - -`paddingRight` works like `padding-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingTop` - -`paddingTop` works like `padding-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingVertical` - -Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBottom`. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `position` - -`position` in React Native is similar to regular CSS, but everything is set to `relative` by default, so `absolute` positioning is always relative to the parent. - -If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have `absolute` position. - -If you want to position a child relative to something that is not its parent, don't use styles for that. Use the component tree. - -See https://github.com/facebook/css-layout for more details on how `position` differs between React Native and CSS. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'absolute', 'relative' ]) | No | - ---- - -### `right` - -`right` is the number of logical pixels to offset the right edge of this component. - -It works similarly to `right` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of how `right` affects layout. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `top` - -`top` is the number of logical pixels to offset the top edge of this component. - -It works similarly to `top` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how `top` affects layout. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `width` - -`width` sets the width of this component. - -It works similarly to `width` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `zIndex` - -`zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior. - -It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for more details. - -On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | diff --git a/website/versioned_docs/version-0.32/navigatorios.md b/website/versioned_docs/version-0.32/navigatorios.md deleted file mode 100644 index 3f3e8e32e87..00000000000 --- a/website/versioned_docs/version-0.32/navigatorios.md +++ /dev/null @@ -1,433 +0,0 @@ ---- -id: version-0.32-navigatorios -title: NavigatorIOS -original_id: navigatorios ---- - -`NavigatorIOS` is a wrapper around [`UINavigationController`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/), enabling you to implement a navigation stack. It works exactly the same as it would on a native app using `UINavigationController`, providing the same animations and behavior from UIKIt. - -As the name implies, it is only available on iOS. Take a look at [`Navigator`](navigator.md) for a similar solution for your cross-platform needs, or check out [react-native-navigation](https://github.com/wix/react-native-navigation), a component that aims to provide native navigation on both Android and iOS. - -To set up the navigator, provide the `initialRoute` prop with a route object. A route object is used to describe each scene that your app navigates to. `initialRoute` represents the first route in your navigator. - -``` -import React, { Component, PropTypes } from 'react'; -import { NavigatorIOS, Text } from 'react-native'; - -export default class NavigatorIOSApp extends Component { - render() { - return ( - - ); - } -} - -class MyScene extends Component { - static propTypes = { - title: PropTypes.string.isRequired, - navigator: PropTypes.object.isRequired, - } - - constructor(props, context) { - super(props, context); - this._onForward = this._onForward.bind(this); - this._onBack = this._onBack.bind(this); - } - - _onForward() { - this.props.navigator.push({ - title: 'Scene ' + nextIndex, - }); - } - - render() { - return ( - - Current Scene: { this.props.title } - - Tap me to load the next scene - - - ) - } -} -``` - -In this code, the navigator renders the component specified in initialRoute, which in this case is `MyScene`. This component will receive a `route` prop and a `navigator` prop representing the navigator. The navigator's navigation bar will render the title for the current scene, "My Initial Scene". - -You can optionally pass in a `passProps` property to your `initialRoute`. `NavigatorIOS` passes this in as props to the rendered component: - -``` -initialRoute={{ - component: MyScene, - title: 'My Initial Scene', - passProps: { myProp: 'foo' } -}} -``` - -You can then access the props passed in via `{this.props.myProp}`. - -#### Handling Navigation - -To trigger navigation functionality such as pushing or popping a view, you have access to a `navigator` object. The object is passed in as a prop to any component that is rendered by `NavigatorIOS`. You can then call the relevant methods to perform the navigation action you need: - -``` -class MyView extends Component { - _handleBackPress() { - this.props.navigator.pop(); - } - - _handleNextPress(nextRoute) { - this.props.navigator.push(nextRoute); - } - - render() { - const nextRoute = { - component: MyView, - title: 'Bar That', - passProps: { myProp: 'bar' } - }; - return( - this._handleNextPress(nextRoute)}> - - See you on the other nav {this.props.myProp}! - - - ); - } -} -``` - -You can also trigger navigator functionality from the `NavigatorIOS` component: - -``` -class NavvyIOS extends Component { - _handleNavigationRequest() { - this.refs.nav.push({ - component: MyView, - title: 'Genius', - passProps: { myProp: 'genius' }, - }); - } - - render() { - return ( - this._handleNavigationRequest(), - }} - style={{flex: 1}} - /> - ); - } -} -``` - -The code above adds a `_handleNavigationRequest` private method that is invoked from the `NavigatorIOS` component when the right navigation bar item is pressed. To get access to the navigator functionality, a reference to it is saved in the `ref` prop and later referenced to push a new scene into the navigation stack. - -#### Navigation Bar Configuration - -Props passed to `NavigatorIOS` will set the default configuration for the navigation bar. Props passed as properties to a route object will set the configuration for that route's navigation bar, overriding any props passed to the `NavigatorIOS` component. - -``` -_handleNavigationRequest() { - this.refs.nav.push({ - //... - passProps: { myProp: 'genius' }, - barTintColor: '#996699', - }); -} - -render() { - return ( - - ); -} -``` - -In the example above the navigation bar color is changed when the new route is pushed. - -### Props - -- [`initialRoute`](navigatorios.md#initialroute) -- [`barTintColor`](navigatorios.md#bartintcolor) -- [`interactivePopGestureEnabled`](navigatorios.md#interactivepopgestureenabled) -- [`itemWrapperStyle`](navigatorios.md#itemwrapperstyle) -- [`navigationBarHidden`](navigatorios.md#navigationbarhidden) -- [`shadowHidden`](navigatorios.md#shadowhidden) -- [`tintColor`](navigatorios.md#tintcolor) -- [`titleTextColor`](navigatorios.md#titletextcolor) -- [`translucent`](navigatorios.md#translucent) - -### Methods - -- [`push`](navigatorios.md#push) -- [`popN`](navigatorios.md#popn) -- [`pop`](navigatorios.md#pop) -- [`replaceAtIndex`](navigatorios.md#replaceatindex) -- [`replace`](navigatorios.md#replace) -- [`replacePrevious`](navigatorios.md#replaceprevious) -- [`popToTop`](navigatorios.md#poptotop) -- [`popToRoute`](navigatorios.md#poptoroute) -- [`replacePreviousAndPop`](navigatorios.md#replacepreviousandpop) -- [`resetTo`](navigatorios.md#resetto) - ---- - -# Reference - -## Props - -### `initialRoute` - -NavigatorIOS uses `route` objects to identify child views, their props, and navigation bar configuration. Navigation operations such as push operations expect routes to look like this the `initialRoute`. - -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| object: {component: function,title: string,titleImage: Image.propTypes.source,passProps: object,backButtonIcon: Image.propTypes.source,backButtonTitle: string,leftButtonIcon: Image.propTypes.source,leftButtonTitle: string,onLeftButtonPress: function,rightButtonIcon: Image.propTypes.source,rightButtonTitle: string,onRightButtonPress: function,wrapperStyle: [View](view.md#style),navigationBarHidden: bool,shadowHidden: bool,tintColor: string,barTintColor: string,titleTextColor: string,translucent: bool} | Yes | - ---- - -### `barTintColor` - -The default background color of the navigation bar. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `interactivePopGestureEnabled` - -Boolean value that indicates whether the interactive `pop` gesture is enabled. This is useful for enabling/disabling the back swipe navigation gesture. - -If this prop is not provided, the default behavior is for the back swipe gesture to be enabled when the navigation bar is shown and disabled when the navigation bar is hidden. Once you've provided the `interactivePopGestureEnabled` prop, you can never restore the default behavior. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `itemWrapperStyle` - -The default wrapper style for components in the navigator. A common use case is to set the `backgroundColor` for every scene. - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `navigationBarHidden` - -Boolean value that indicates whether the navigation bar is hidden by default. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `shadowHidden` - -Boolean value that indicates whether to hide the 1px hairline shadow by default. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `tintColor` - -The default color used for the buttons in the navigation bar. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `titleTextColor` - -The default text color of the navigation bar title. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `translucent` - -Boolean value that indicates whether the navigation bar is translucent by default - -| Type | Required | -| ---- | -------- | -| bool | No | - -## Methods - -### `push()` - -```jsx -push((route: object)); -``` - -Navigate forward to a new route. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ----------------------------- | -| route | object | Yes | The new route to navigate to. | - ---- - -### `popN()` - -```jsx -popN((n: number)); -``` - -Go back N scenes at once. When N=1, behavior matches `pop()`. - -**Parameters:** - -| Name | Type | Required | Description | -| ---- | ------ | -------- | ---------------------------- | -| n | number | Yes | The number of scenes to pop. | - ---- - -### `pop()` - -```jsx -pop(); -``` - -Go back to the previous scene by its route. - ---- - -### `replaceAtIndex()` - -```jsx -replaceAtIndex((route: object), (index: number)); -``` - -Replace a route in the navigation stack. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ---------------------------------------------------------------------------------------------------------- | -| route | object | Yes | The new route that will replace the specified one. | -| index | number | Yes | The route into the stack that should be replaced. If it is negative, it counts from the back of the stack. | - ---- - -### `replace()` - -```jsx -replace((route: object)); -``` - -Replace the route for the current scene and immediately load the view for the new route. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ----------------------------- | -| route | object | Yes | The new route to navigate to. | - ---- - -### `replacePrevious()` - -```jsx -replacePrevious((route: object)); -``` - -Replace the route/view for the previous scene. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ------------------------------------------------- | -| route | object | Yes | The new route to will replace the previous scene. | - ---- - -### `popToTop()` - -```jsx -popToTop(); -``` - -Go back to the topmost item in the navigation stack. - ---- - -### `popToRoute()` - -```jsx -popToRoute((route: object)); -``` - -Go back to the item for a particular route object. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ----------------------------- | -| route | object | Yes | The new route to navigate to. | - ---- - -### `replacePreviousAndPop()` - -```jsx -replacePreviousAndPop((route: object)); -``` - -Replaces the previous route/view and transitions back to it. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ----------------------------------------------- | -| route | object | Yes | The new route that replaces the previous scene. | - ---- - -### `resetTo()` - -```jsx -resetTo((route: object)); -``` - -Replaces the top item and `pop` to it. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ------------------------------------------------- | -| route | object | Yes | The new route that will replace the topmost item. | diff --git a/website/versioned_docs/version-0.32/picker.md b/website/versioned_docs/version-0.32/picker.md deleted file mode 100644 index 11aeaa3736e..00000000000 --- a/website/versioned_docs/version-0.32/picker.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: version-0.32-picker -title: Picker -original_id: picker ---- - -Renders the native picker component on Android and iOS. Example: - - this.setState({language: lang})}> - - - - -### Props - -- [View props...](view.md#props) - -* [`onValueChange`](picker.md#onvaluechange) -* [`selectedValue`](picker.md#selectedvalue) -* [`style`](picker.md#style) -* [`testID`](picker.md#testid) -* [`enabled`](picker.md#enabled) -* [`mode`](picker.md#mode) -* [`prompt`](picker.md#prompt) -* [`itemStyle`](picker.md#itemstyle) - ---- - -# Reference - -## Props - -### `onValueChange` - -Callback for when an item is selected. This is called with the following parameters: - -- `itemValue`: the `value` prop of the item that was selected -- `itemPosition`: the index of the selected item in this picker - -| Type | Required | -| -------- | -------- | -| Function | No | - ---- - -### `selectedValue` - -Value matching value of one of the items. Can be a string or an integer. - -| Type | Required | -| ---- | -------- | -| any | No | - ---- - -### `style` - -| Type | Required | -| ----------- | -------- | -| \$FlowFixMe | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `enabled` - -If set to false, the picker will be disabled, i.e. the user will not be able to make a selection. - -| Type | Required | Platform | -| ------- | -------- | -------- | -| boolean | No | Android | - ---- - -### `mode` - -On Android, specifies how to display the selection items when the user taps on the picker: - -- 'dialog': Show a modal dialog. This is the default. -- 'dropdown': Shows a dropdown anchored to the picker view - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| literal ‖ ,literal | No | Android | - ---- - -### `prompt` - -Prompt string for this picker, used on Android in dialog mode as the title of the dialog. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `itemStyle` - -Style to apply to each of the item labels. - -| Type | Required | Platform | -| ----------- | -------- | -------- | -| \$FlowFixMe | No | iOS | diff --git a/website/versioned_docs/version-0.32/pushnotificationios.md b/website/versioned_docs/version-0.32/pushnotificationios.md deleted file mode 100644 index cfd84840a88..00000000000 --- a/website/versioned_docs/version-0.32/pushnotificationios.md +++ /dev/null @@ -1,307 +0,0 @@ ---- -id: version-0.32-pushnotificationios -title: PushNotificationIOS -original_id: pushnotificationios ---- - -Handle push notifications for your app, including permission handling and icon badge number. - -To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). - -[Manually link](linking-libraries-ios.md#manual-linking) the PushNotificationIOS library - -- Add the following to your Project: `node_modules/react-native/Libraries/PushNotificationIOS/RCTPushNotification.xcodeproj` -- Add the following to `Link Binary With Libraries`: `libRCTPushNotification.a` -- Add the following to your `Header Search Paths`: `$(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS` and set the search to `recursive` - -Finally, to enable support for `notification` and `register` events you need to augment your AppDelegate. - -At the top of your `AppDelegate.m`: - -`#import "RCTPushNotificationManager.h"` - -And then in your AppDelegate implementation add the following: - -``` - // Required to register for notifications - - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings - { - [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings]; - } - // Required for the register event. - - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken - { - [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; - } - // Required for the notification event. - - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification - { - [RCTPushNotificationManager didReceiveRemoteNotification:notification]; - } - // Required for the localNotification event. - - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification - { - [RCTPushNotificationManager didReceiveLocalNotification:notification]; - } - - (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error - { - NSLog(@"%@", error); - } -``` - -### Methods - -- [`presentLocalNotification`](pushnotificationios.md#presentlocalnotification) -- [`scheduleLocalNotification`](pushnotificationios.md#schedulelocalnotification) -- [`cancelAllLocalNotifications`](pushnotificationios.md#cancelalllocalnotifications) -- [`setApplicationIconBadgeNumber`](pushnotificationios.md#setapplicationiconbadgenumber) -- [`getApplicationIconBadgeNumber`](pushnotificationios.md#getapplicationiconbadgenumber) -- [`cancelLocalNotifications`](pushnotificationios.md#cancellocalnotifications) -- [`getScheduledLocalNotifications`](pushnotificationios.md#getscheduledlocalnotifications) -- [`addEventListener`](pushnotificationios.md#addeventlistener) -- [`removeEventListener`](pushnotificationios.md#removeeventlistener) -- [`requestPermissions`](pushnotificationios.md#requestpermissions) -- [`abandonPermissions`](pushnotificationios.md#abandonpermissions) -- [`checkPermissions`](pushnotificationios.md#checkpermissions) -- [`getInitialNotification`](pushnotificationios.md#getinitialnotification) -- [`constructor`](pushnotificationios.md#constructor) -- [`getMessage`](pushnotificationios.md#getmessage) -- [`getSound`](pushnotificationios.md#getsound) -- [`getAlert`](pushnotificationios.md#getalert) -- [`getBadgeCount`](pushnotificationios.md#getbadgecount) -- [`getData`](pushnotificationios.md#getdata) - ---- - -# Reference - -## Methods - -### `presentLocalNotification()` - -```jsx -static presentLocalNotification(details) -``` - -Schedules the localNotification for immediate presentation. - -details is an object containing: - -- `alertBody` : The message displayed in the notification alert. -- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; -- `soundName` : The sound played when the notification is fired (optional). -- `category` : The category of this notification, required for actionable notifications (optional). -- `userInfo` : An optional object containing additional notification data. -- `applicationIconBadgeNumber` (optional) : The number to display as the app's icon badge. The default value of this property is 0, which means that no badge is displayed. - ---- - -### `scheduleLocalNotification()` - -```jsx -static scheduleLocalNotification(details) -``` - -Schedules the localNotification for future presentation. - -details is an object containing: - -- `fireDate` : The date and time when the system should deliver the notification. -- `alertBody` : The message displayed in the notification alert. -- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; -- `soundName` : The sound played when the notification is fired (optional). -- `category` : The category of this notification, required for actionable notifications (optional). -- `userInfo` : An optional object containing additional notification data. -- `applicationIconBadgeNumber` (optional) : The number to display as the app's icon badge. Setting the number to 0 removes the icon badge. - ---- - -### `cancelAllLocalNotifications()` - -```jsx -static cancelAllLocalNotifications() -``` - -Cancels all scheduled localNotifications - ---- - -### `setApplicationIconBadgeNumber()` - -```jsx -static setApplicationIconBadgeNumber(number) -``` - -Sets the badge number for the app icon on the home screen - ---- - -### `getApplicationIconBadgeNumber()` - -```jsx -static getApplicationIconBadgeNumber(callback) -``` - -Gets the current badge number for the app icon on the home screen - ---- - -### `cancelLocalNotifications()` - -```jsx -static cancelLocalNotifications(userInfo) -``` - -Cancel local notifications. - -Optionally restricts the set of canceled notifications to those notifications whose `userInfo` fields match the corresponding fields in the `userInfo` argument. - ---- - -### `getScheduledLocalNotifications()` - -```jsx -static getScheduledLocalNotifications(callback) -``` - -Gets the local notifications that are currently scheduled. - ---- - -### `addEventListener()` - -```jsx -static addEventListener(type, handler) -``` - -Attaches a listener to remote or local notification events while the app is running in the foreground or the background. - -Valid events are: - -- `notification` : Fired when a remote notification is received. The handler will be invoked with an instance of `PushNotificationIOS`. -- `localNotification` : Fired when a local notification is received. The handler will be invoked with an instance of `PushNotificationIOS`. -- `register`: Fired when the user registers for remote notifications. The handler will be invoked with a hex string representing the deviceToken. - ---- - -### `removeEventListener()` - -```jsx -static removeEventListener(type, handler) -``` - -Removes the event listener. Do this in `componentWillUnmount` to prevent memory leaks - ---- - -### `requestPermissions()` - -```jsx -static requestPermissions(permissions?) -``` - -Requests notification permissions from iOS, prompting the user's dialog box. By default, it will request all notification permissions, but a subset of these can be requested by passing a map of requested permissions. The following permissions are supported: - -- `alert` -- `badge` -- `sound` - -If a map is provided to the method, only the permissions with truthy values will be requested. - -This method returns a promise that will resolve when the user accepts, rejects, or if the permissions were previously rejected. The promise resolves to the current state of the permission. - ---- - -### `abandonPermissions()` - -```jsx -static abandonPermissions() -``` - -Unregister for all remote notifications received via Apple Push Notification service. - -You should call this method in rare circumstances only, such as when a new version of the app removes support for all types of remote notifications. Users can temporarily prevent apps from receiving remote notifications through the Notifications section of the Settings app. Apps unregistered through this method can always re-register. - ---- - -### `checkPermissions()` - -```jsx -static checkPermissions(callback) -``` - -See what push permissions are currently enabled. `callback` will be invoked with a `permissions` object: - -- `alert` :boolean -- `badge` :boolean -- `sound` :boolean - ---- - -### `getInitialNotification()` - -```jsx -static getInitialNotification() -``` - -This method returns a promise that resolves to either the notification object if the app was launched by a push notification, or `null` otherwise. - ---- - -### `constructor()` - -```jsx -constructor(nativeNotif); -``` - -You will never need to instantiate `PushNotificationIOS` yourself. Listening to the `notification` event and invoking `getInitialNotification` is sufficient - ---- - -### `getMessage()` - -```jsx -getMessage(); -``` - -An alias for `getAlert` to get the notification's main message string - ---- - -### `getSound()` - -```jsx -getSound(); -``` - -Gets the sound string from the `aps` object - ---- - -### `getAlert()` - -```jsx -getAlert(); -``` - -Gets the notification's main message from the `aps` object - ---- - -### `getBadgeCount()` - -```jsx -getBadgeCount(); -``` - -Gets the badge count number from the `aps` object - ---- - -### `getData()` - -```jsx -getData(); -``` - -Gets the data object on the notif diff --git a/website/versioned_docs/version-0.32/scrollview.md b/website/versioned_docs/version-0.32/scrollview.md deleted file mode 100644 index fb9f87e87d1..00000000000 --- a/website/versioned_docs/version-0.32/scrollview.md +++ /dev/null @@ -1,535 +0,0 @@ ---- -id: version-0.32-scrollview -title: ScrollView -original_id: scrollview ---- - -Component that wraps platform ScrollView while providing integration with touch locking "responder" system. - -Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer `{flex: 1}` down the view stack can lead to errors here, which the element inspector can help to debug. - -Doesn't yet support other contained responders from blocking this scroll view from becoming the responder. - -### Props - -- [View props...](view.md#props) - -* [`bounces`](scrollview.md#bounces) -* [`contentContainerStyle`](scrollview.md#contentcontainerstyle) -* [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) -* [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) -* [`onContentSizeChange`](scrollview.md#oncontentsizechange) -* [`onScroll`](scrollview.md#onscroll) -* [`pagingEnabled`](scrollview.md#pagingenabled) -* [`refreshControl`](scrollview.md#refreshcontrol) -* [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) -* [`scrollEnabled`](scrollview.md#scrollenabled) -* [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) -* [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) -* [`style`](scrollview.md#style) -* [`endFillColor`](scrollview.md#endfillcolor) -* [`scrollPerfTag`](scrollview.md#scrollperftag) -* [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) -* [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) -* [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) -* [`horizontal`](scrollview.md#horizontal) -* [`bouncesZoom`](scrollview.md#bounceszoom) -* [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) -* [`centerContent`](scrollview.md#centercontent) -* [`contentInset`](scrollview.md#contentinset) -* [`contentOffset`](scrollview.md#contentoffset) -* [`decelerationRate`](scrollview.md#decelerationrate) -* [`directionalLockEnabled`](scrollview.md#directionallockenabled) -* [`indicatorStyle`](scrollview.md#indicatorstyle) -* [`maximumZoomScale`](scrollview.md#maximumzoomscale) -* [`minimumZoomScale`](scrollview.md#minimumzoomscale) -* [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) -* [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) -* [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) -* [`scrollsToTop`](scrollview.md#scrollstotop) -* [`snapToAlignment`](scrollview.md#snaptoalignment) -* [`snapToInterval`](scrollview.md#snaptointerval) -* [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) -* [`zoomScale`](scrollview.md#zoomscale) - -### Methods - -- [`scrollTo`](scrollview.md#scrollto) -- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) - ---- - -# Reference - -## Props - -### `bounces` - -When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. When false, it disables all bouncing even if the `alwaysBounce*` props are true. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `contentContainerStyle` - -These styles will be applied to the scroll view content container which wraps all of the child views. Example: - -return ( ); ... const styles = StyleSheet.create({ contentContainer: { paddingVertical: 20 } }); - -| Type | Required | -| ------------------------------------ | -------- | -| StyleSheetPropType(View Style props) | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. -- 'interactive', the keyboard is dismissed interactively with the drag and moves in synchrony with the touch; dragging upwards cancels the dismissal. On android this is not supported and it will have the same behavior as 'none'. - -| Type | Required | -| -------------------------------------- | -------- | -| enum('none', 'interactive', 'on-drag') | No | - ---- - -### `keyboardShouldPersistTaps` - -When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the keyboard will not dismiss automatically, and the scroll view will not catch taps, but children of the scroll view can catch taps. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onContentSizeChange` - -Called when scrollable content view of the ScrollView changes. - -Handler function is passed the content width and content height as parameters: `(contentWidth, contentHeight)` - -It's implemented using onLayout handler attached to the content container which this ScrollView renders. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onScroll` - -Fires at most once per frame during scrolling. The frequency of the events can be controlled using the `scrollEventThrottle` prop. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `pagingEnabled` - -When true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `refreshControl` - -A RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView. - -See [RefreshControl](refreshcontrol.md). - -| Type | Required | -| ------- | -------- | -| element | No | - ---- - -### `removeClippedSubviews` - -Experimental: When true, offscreen child views (whose `overflow` value is `hidden`) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `scrollEnabled` - -When false, the content does not scroll. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsHorizontalScrollIndicator` - -When true, shows a horizontal scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsVerticalScrollIndicator` - -When true, shows a vertical scroll indicator. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Shadow Props...](shadow-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderRightColor`**: [color](colors.md) - -- **`backfaceVisibility`**: ReactPropTypes.oneOf(['visible', 'hidden']) - -- **`borderBottomColor`**: [color](colors.md) - -- **`borderBottomLeftRadius`**: ReactPropTypes.number - -- **`borderBottomRightRadius`**: ReactPropTypes.number - -- **`borderBottomWidth`**: ReactPropTypes.number - -- **`borderColor`**: [color](colors.md) - -- **`borderLeftColor`**: [color](colors.md) - -- **`borderLeftWidth`**: ReactPropTypes.number - -- **`borderRadius`**: ReactPropTypes.number - -- **`backgroundColor`**: [color](colors.md) - -- **`borderRightWidth`**: ReactPropTypes.number - -- **`borderStyle`**: ReactPropTypes.oneOf(['solid', 'dotted', 'dashed']) - -- **`borderTopColor`**: [color](colors.md) - -- **`borderTopLeftRadius`**: ReactPropTypes.number - -- **`borderTopRightRadius`**: ReactPropTypes.number - -- **`borderTopWidth`**: ReactPropTypes.number - -- **`borderWidth`**: ReactPropTypes.number - -- **`opacity`**: ReactPropTypes.number - -- **`overflow`**: ReactPropTypes.oneOf(['visible', 'hidden']) - -- **`elevation`**: ReactPropTypes.number (_Android_) - - (Android-only) Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions. - ---- - -### `endFillColor` - -Sometimes a scrollview takes up more space than its content fills. When this is the case, this prop will fill the rest of the scrollview with a color to avoid setting a background and creating unnecessary overdraw. This is an advanced optimization that is not needed in the general case. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `scrollPerfTag` - -Tag used to log scroll performance on this scroll view. Will force momentum events to be turned on (see sendMomentumEvents). This doesn't do anything out of the box and you need to implement a custom native FpsListener for it to be useful. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `alwaysBounceHorizontal` - -When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself. The default value is true when `horizontal={true}` and false otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `alwaysBounceVertical` - -When true, the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself. The default value is false when `horizontal={true}` and true otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `automaticallyAdjustContentInsets` - -Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/ toolbar. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `horizontal` - -When true, the scroll view's children are arranged horizontally in a row instead of vertically in a column. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `bouncesZoom` - -When true, gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture end, otherwise the zoom will not exceed the limits. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `canCancelContentTouches` - -When false, once tracking starts, won't try to drag if the touch moves. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `centerContent` - -When true, the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `contentInset` - -The amount by which the scroll view content is inset from the edges of the scroll view. Defaults to `{top: 0, left: 0, bottom: 0, right: 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `contentOffset` - -Used to manually set the starting scroll offset. The default value is `{x: 0, y: 0}`. - -| Type | Required | Platform | -| ------------- | -------- | -------- | -| PointPropType | No | iOS | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use string shortcuts `"normal"` and `"fast"` which match the underlying iOS settings for `UIScrollViewDecelerationRateNormal` and `UIScrollViewDecelerationRateFast` respectively. - -- normal: 0.998 (the default) -- fast: 0.99 - -| Type | Required | Platform | -| ------------------------------- | -------- | -------- | -| enum('fast', 'normal'), ,number | No | iOS | - ---- - -### `directionalLockEnabled` - -When true, the ScrollView will try to lock to only vertical or horizontal scrolling while dragging. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `indicatorStyle` - -The style of the scroll indicators. - -- `default` (the default), same as `black`. - -- `black`, scroll indicator is black. This style is good against a white content background. -- `white`, scroll indicator is white. This style is good against a black content background. - -| Type | Required | Platform | -| --------------------------------- | -------- | -------- | -| enum('default', 'black', 'white') | No | iOS | - ---- - -### `maximumZoomScale` - -The maximum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `minimumZoomScale` - -The minimum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `onScrollAnimationEnd` - -Called when a scrolling animation ends. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `scrollEventThrottle` - -This controls how often the scroll event will be fired while scrolling (as a time interval in ms). A lower number yields better accuracy for code that is tracking the scroll position, but can lead to scroll performance problems due to the volume of information being send over the bridge. You will not notice a difference between values set between 1-16 as the JS run loop is synced to the screen refresh rate. If you do not need precise scroll position tracking, set this value higher to limit the information being sent across the bridge. The default value is zero, which results in the scroll event being sent only once each time the view is scrolled. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `scrollIndicatorInsets` - -The amount by which the scroll view indicators are inset from the edges of the scroll view. This should normally be set to the same value as the `contentInset`. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `scrollsToTop` - -When true, the scroll view scrolls to top when the status bar is tapped. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `snapToAlignment` - -When `snapToInterval` is set, `snapToAlignment` will define the relationship of the snapping to the scroll view. - -- `start` (the default) will align the snap at the left (horizontal) or top (vertical) -- `center` will align the snap in the center -- `end` will align the snap at the right (horizontal) or bottom (vertical) - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| enum('start', 'center', 'end') | No | iOS | - ---- - -### `snapToInterval` - -When set, causes the scroll view to stop at multiples of the value of `snapToInterval`. This can be used for paginating through children that have lengths smaller than the scroll view. Used in combination with `snapToAlignment`. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `stickyHeaderIndices` - -An array of child indices determining which children get docked to the top of the screen when scrolling. For example, passing `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction with `horizontal={true}`. - -| Type | Required | Platform | -| --------------- | -------- | -------- | -| array of number | No | iOS | - ---- - -### `zoomScale` - -The current scale of the scroll view content. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - -## Methods - -### `scrollTo()` - -```jsx -scrollTo( - ([y]: number), - object, - ([x]: number), - ([animated]: boolean) -); -``` - -Scrolls to a given x, y offset, either immediately or with a smooth animation. - -Syntax: - -`scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})` - -Note: The weird argument signature is due to the fact that, for historical reasons, the function also accepts separate arguments as as alternative to the options object. This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED. - ---- - -### `scrollWithoutAnimationTo()` - -```jsx -scrollWithoutAnimationTo(y, x); -``` - -Deprecated, do not use. diff --git a/website/versioned_docs/version-0.32/share.md b/website/versioned_docs/version-0.32/share.md deleted file mode 100644 index e7046d685c0..00000000000 --- a/website/versioned_docs/version-0.32/share.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: version-0.32-share -title: Share -original_id: share ---- - -### Methods - -- [`share`](share.md#share) -- [`sharedAction`](share.md#sharedaction) -- [`dismissedAction`](share.md#dismissedaction) - ---- - -# Reference - -## Methods - -### `share()` - -```jsx -static share(content, options) -``` - -Open a dialog to share text content. - -In iOS, Returns a Promise which will be invoked an object containing `action`, `activityType`. If the user dismissed the dialog, the Promise will still be resolved with action being `Share.dismissedAction` and all the other keys being undefined. - -In Android, Returns a Promise which always be resolved with action being `Share.sharedAction`. - -### Content - -- `message` - a message to share -- `title` - title of the message - -#### iOS - -- `url` - an URL to share - -At least one of URL and message is required. - -### Options - -#### iOS - -- `excludedActivityTypes` -- `tintColor` - -#### Android - -- `dialogTitle` - ---- - -### `sharedAction()` - -```jsx -static sharedAction() -``` - -The content was successfully shared. - ---- - -### `dismissedAction()` - -```jsx -static dismissedAction() -``` - -The dialog has been dismissed. @platform ios diff --git a/website/versioned_docs/version-0.32/snapshotviewios.md b/website/versioned_docs/version-0.32/snapshotviewios.md deleted file mode 100644 index f9d52c576e8..00000000000 --- a/website/versioned_docs/version-0.32/snapshotviewios.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -id: version-0.32-snapshotviewios -title: SnapshotViewIOS -original_id: snapshotviewios ---- - -### Props - -- [View props...](view.md#props) - -* [`onSnapshotReady`](snapshotviewios.md#onsnapshotready) -* [`testIdentifier`](snapshotviewios.md#testidentifier) - ---- - -# Reference - -## Props - -### `onSnapshotReady` - -| Type | Required | -| -------- | -------- | -| Function | No | - ---- - -### `testIdentifier` - -| Type | Required | -| ------ | -------- | -| string | No | diff --git a/website/versioned_docs/version-0.32/statusbar.md b/website/versioned_docs/version-0.32/statusbar.md deleted file mode 100644 index 7d6e566238d..00000000000 --- a/website/versioned_docs/version-0.32/statusbar.md +++ /dev/null @@ -1,248 +0,0 @@ ---- -id: version-0.32-statusbar -title: StatusBar -original_id: statusbar ---- - -Component to control the app status bar. - -### Usage with Navigator - -It is possible to have multiple `StatusBar` components mounted at the same time. The props will be merged in the order the `StatusBar` components were mounted. One use case is to specify status bar styles per route using `Navigator`. - -``` - - - - - - } - /> - -``` - -### Imperative API - -For cases where using a component is not ideal, there is also an imperative API exposed as static functions on the component. It is however not recommended to use the static API and the component for the same prop because any value set by the static API will get overriden by the one set by the component in the next render. - -### Props - -- [`animated`](statusbar.md#animated) -- [`hidden`](statusbar.md#hidden) -- [`backgroundColor`](statusbar.md#backgroundcolor) -- [`translucent`](statusbar.md#translucent) -- [`barStyle`](statusbar.md#barstyle) -- [`networkActivityIndicatorVisible`](statusbar.md#networkactivityindicatorvisible) -- [`showHideTransition`](statusbar.md#showhidetransition) - -### Methods - -- [`setHidden`](statusbar.md#sethidden) -- [`setBarStyle`](statusbar.md#setbarstyle) -- [`setNetworkActivityIndicatorVisible`](statusbar.md#setnetworkactivityindicatorvisible) -- [`setBackgroundColor`](statusbar.md#setbackgroundcolor) -- [`setTranslucent`](statusbar.md#settranslucent) - -### Type Definitions - -- [`StatusBarStyle`](statusbar.md#statusbarstyle) -- [`StatusBarAnimation`](statusbar.md#statusbaranimation) - ---- - -# Reference - -## Props - -### `animated` - -If the transition between status bar property changes should be animated. Supported for backgroundColor, barStyle and hidden. - -| Type | Required | -| ------- | -------- | -| boolean | No | - ---- - -### `hidden` - -If the status bar is hidden. - -| Type | Required | -| ------- | -------- | -| boolean | No | - ---- - -### `backgroundColor` - -The background color of the status bar. - -| Type | Required | Platform | -| ----------- | -------- | -------- | -| \$FlowFixMe | No | Android | - ---- - -### `translucent` - -If the status bar is translucent. When translucent is set to true, the app will draw under the status bar. This is useful when using a semi transparent status bar color. - -| Type | Required | Platform | -| ------- | -------- | -------- | -| boolean | No | Android | - ---- - -### `barStyle` - -Sets the color of the status bar text. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| literal ‖ ,literal | No | iOS | - ---- - -### `networkActivityIndicatorVisible` - -If the network activity indicator should be visible. - -| Type | Required | Platform | -| ------- | -------- | -------- | -| boolean | No | iOS | - ---- - -### `showHideTransition` - -The transition effect when showing and hiding the status bar using the `hidden` prop. Defaults to 'fade'. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| literal ‖ ,literal | No | iOS | - -## Methods - -### `setHidden()` - -```jsx -static setHidden(hidden: boolean, [animation]: StatusBarAnimation) -``` - -Show or hide the status bar - -**Parameters:** - -| Name | Type | Required | Description | -| --------- | ----------------------------------------------------- | -------- | ---------------------------------------------------------------- | -| hidden | boolean | Yes | The dialog's title. | -| animation | [StatusBarAnimation](statusbar.md#statusbaranimation) | No | Optional animation when changing the status bar hidden property. | - ---- - -### `setBarStyle()` - -```jsx -static setBarStyle(style: StatusBarStyle, [animated]: boolean) -``` - -Set the status bar style - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | --------------------------------------------- | -------- | ------------------------- | -| style | [StatusBarStyle](statusbar.md#statusbarstyle) | Yes | Status bar style to set | -| animated | boolean | No | Animate the style change. | - ---- - -### `setNetworkActivityIndicatorVisible()` - -```jsx -static setNetworkActivityIndicatorVisible(visible: boolean) -``` - -Control the visibility of the network activity indicator - -**Parameters:** - -| Name | Type | Required | Description | -| ------- | ------- | -------- | ------------------- | -| visible | boolean | Yes | Show the indicator. | - ---- - -### `setBackgroundColor()` - -```jsx -static setBackgroundColor(color: string, [animated]: boolean) -``` - -Set the background color for the status bar - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | ------- | -------- | ------------------------- | -| color | string | Yes | Background color. | -| animated | boolean | No | Animate the style change. | - ---- - -### `setTranslucent()` - -```jsx -static setTranslucent(translucent: boolean) -``` - -Control the translucency of the status bar - -**Parameters:** - -| Name | Type | Required | Description | -| ----------- | ------- | -------- | ------------------- | -| translucent | boolean | Yes | Set as translucent. | - -## Type Definitions - -### StatusBarStyle - -Status bar style - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| ------------- | ------------------------ | -| default | Default status bar style | -| light-content | Dark background style | - ---- - -### StatusBarAnimation - -Status bar animation - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| ----- | --------------- | -| none | No animation | -| fade | Fade animation | -| slide | Slide animation | diff --git a/website/versioned_docs/version-0.32/tabbarios.md b/website/versioned_docs/version-0.32/tabbarios.md deleted file mode 100644 index a052b86f2eb..00000000000 --- a/website/versioned_docs/version-0.32/tabbarios.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: version-0.32-tabbarios -title: TabBarIOS -original_id: tabbarios ---- - -### Props - -- [View props...](view.md#props) - -* [`barTintColor`](tabbarios.md#bartintcolor) -* [`itemPositioning`](tabbarios.md#itempositioning) -* [`style`](tabbarios.md#style) -* [`tintColor`](tabbarios.md#tintcolor) -* [`translucent`](tabbarios.md#translucent) -* [`unselectedTintColor`](tabbarios.md#unselectedtintcolor) - ---- - -# Reference - -## Props - -### `barTintColor` - -Background color of the tab bar - -| Type | Required | -| ----------- | -------- | -| \$FlowFixMe | No | - ---- - -### `itemPositioning` - -Specifies tab bar item positioning. Available values are: - -- fill - distributes items across the entire width of the tab bar -- center - centers item in the available tab bar space -- auto (default) - distributes items dynamically according to the user interface idiom. In a horizontally compact environment (e.g. iPhone 5) this value defaults to `fill`, in a horizontally regular one (e.g. iPad) it defaults to center. - -| Type | Required | -| ----------------------------- | -------- | -| literal ‖ ,literal ‖ ,literal | No | - ---- - -### `style` - -| Type | Required | -| ----------- | -------- | -| \$FlowFixMe | No | - ---- - -### `tintColor` - -Color of the currently selected tab icon - -| Type | Required | -| ----------- | -------- | -| \$FlowFixMe | No | - ---- - -### `translucent` - -A Boolean value that indicates whether the tab bar is translucent - -| Type | Required | -| ------- | -------- | -| boolean | No | - ---- - -### `unselectedTintColor` - -Color of text on unselected tabs - -| Type | Required | -| ----------- | -------- | -| \$FlowFixMe | No | diff --git a/website/versioned_docs/version-0.32/textinput.md b/website/versioned_docs/version-0.32/textinput.md deleted file mode 100644 index a93d969e52d..00000000000 --- a/website/versioned_docs/version-0.32/textinput.md +++ /dev/null @@ -1,614 +0,0 @@ ---- -id: version-0.32-textinput -title: TextInput -original_id: textinput ---- - -A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. - -The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A brief example: - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, TextInput } from 'react-native'; - -class UselessTextInput extends Component { - constructor(props) { - super(props); - this.state = { text: 'Useless Placeholder' }; - } - - render() { - return ( - this.setState({text})} - value={this.state.text} - /> - ); - } -} - -// App registration and rendering -AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput); -``` - -Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=false`. To achieve the same effect, you can wrap your `TextInput` in a `View`: - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, View, TextInput } from 'react-native'; - -class UselessTextInput extends Component { - render() { - return ( - - ); - } -} - -class UselessTextInputMultiline extends Component { - constructor(props) { - super(props); - this.state = { - text: 'Useless Multiline Placeholder', - }; - } - - // If you type something in the text box that is a color, the background will change to that - // color. - render() { - return ( - - this.setState({text})} - value={this.state.text} - /> - - ); - } -} - -// App registration and rendering -AppRegistry.registerComponent( - 'AwesomeProject', - () => UselessTextInputMultiline -); -``` - -`TextInput` has by default a border at the bottom of its view. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this is to either not set height explicitly, case in which the system will take care of displaying the border in the correct position, or to not display the border by setting `underlineColorAndroid` to transparent. - -### Props - -- [View props...](view.md#props) - -* [`placeholderTextColor`](textinput.md#placeholdertextcolor) -* [`autoCapitalize`](textinput.md#autocapitalize) -* [`autoFocus`](textinput.md#autofocus) -* [`blurOnSubmit`](textinput.md#bluronsubmit) -* [`defaultValue`](textinput.md#defaultvalue) -* [`editable`](textinput.md#editable) -* [`keyboardType`](textinput.md#keyboardtype) -* [`maxLength`](textinput.md#maxlength) -* [`multiline`](textinput.md#multiline) -* [`onBlur`](textinput.md#onblur) -* [`onChange`](textinput.md#onchange) -* [`onChangeText`](textinput.md#onchangetext) -* [`onContentSizeChange`](textinput.md#oncontentsizechange) -* [`onEndEditing`](textinput.md#onendediting) -* [`onFocus`](textinput.md#onfocus) -* [`onLayout`](textinput.md#onlayout) -* [`onSelectionChange`](textinput.md#onselectionchange) -* [`onSubmitEditing`](textinput.md#onsubmitediting) -* [`placeholder`](textinput.md#placeholder) -* [`autoCorrect`](textinput.md#autocorrect) -* [`returnKeyType`](textinput.md#returnkeytype) -* [`secureTextEntry`](textinput.md#securetextentry) -* [`selectTextOnFocus`](textinput.md#selecttextonfocus) -* [`selectionColor`](textinput.md#selectioncolor) -* [`style`](textinput.md#style) -* [`value`](textinput.md#value) -* [`inlineImageLeft`](textinput.md#inlineimageleft) -* [`inlineImagePadding`](textinput.md#inlineimagepadding) -* [`numberOfLines`](textinput.md#numberoflines) -* [`returnKeyLabel`](textinput.md#returnkeylabel) -* [`underlineColorAndroid`](textinput.md#underlinecolorandroid) -* [`clearButtonMode`](textinput.md#clearbuttonmode) -* [`clearTextOnFocus`](textinput.md#cleartextonfocus) -* [`dataDetectorTypes`](textinput.md#datadetectortypes) -* [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) -* [`keyboardAppearance`](textinput.md#keyboardappearance) -* [`onKeyPress`](textinput.md#onkeypress) -* [`selectionState`](textinput.md#selectionstate) - -### Methods - -- [`isFocused`](textinput.md#isfocused) -- [`clear`](textinput.md#clear) - ---- - -# Reference - -## Props - -### `placeholderTextColor` - -The text color of the placeholder string. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `autoCapitalize` - -Can tell `TextInput` to automatically capitalize certain characters. - -- `characters`: all characters. -- `words`: first letter of each word. -- `sentences`: first letter of each sentence (_default_). -- `none`: don't auto capitalize anything. - -| Type | Required | -| ---- | -------- | - - -| PropTypes.oneOf([ 'none', 'sentences', 'words', 'characters', ]) | No | - ---- - -### `autoFocus` - -If `true`, focuses the input on `componentDidMount`. The default value is `false`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `blurOnSubmit` - -If `true`, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting `blurOnSubmit` to `true` means that pressing return will blur the field and trigger the `onSubmitEditing` event instead of inserting a newline into the field. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `defaultValue` - -Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.string | No | - ---- - -### `editable` - -If `false`, text is not editable. The default value is `true`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `keyboardType` - -Determines which keyboard to open, e.g.`numeric`. - -The following values work across platforms: - -- `default` -- `numeric` -- `email-address` -- `phone-pad` - -| Type | Required | -| ---- | -------- | - - -| PropTypes.oneOf([ // Cross-platform 'default', 'email-address', 'numeric', 'phone-pad', // iOS-only 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', ]) | No | - ---- - -### `maxLength` - -Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.number | No | - ---- - -### `multiline` - -If `true`, the text input can be multiple lines. The default value is `false`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `onBlur` - -Callback that is called when the text input is blurred. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onChange` - -Callback that is called when the text input's text changes. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onChangeText` - -Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onContentSizeChange` - -Callback that is called when the text input's content size changes. This will be called with `{ nativeEvent: { contentSize: { width, height } } }`. - -Only called for multiline text inputs. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onEndEditing` - -Callback that is called when text input ends. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onFocus` - -Callback that is called when the text input is focused. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{x, y, width, height}`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onSelectionChange` - -Callback that is called when the text input selection is changed. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onSubmitEditing` - -Callback that is called when the text input's submit button is pressed. Invalid if `multiline={true}` is specified. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `placeholder` - -The string that will be rendered before text input has been entered. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.string | No | - ---- - -### `autoCorrect` - -If `false`, disables auto-correct. The default value is `true`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `returnKeyType` - -Determines how the return key should look. On Android you can also use `returnKeyLabel`. - -_Cross platform_ - -The following values work across platforms: - -- `done` -- `go` -- `next` -- `search` -- `send` - -_Android Only_ - -The following values work on Android only: - -- `none` -- `previous` - -_iOS Only_ - -The following values work on iOS only: - -- `default` -- `emergency-call` -- `google` -- `join` -- `route` -- `yahoo` - -| Type | Required | -| ---- | -------- | - - -| PropTypes.oneOf([ // Cross-platform 'done', 'go', 'next', 'search', 'send', // Android-only 'none', 'previous', // iOS-only 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo', ]) | No | - ---- - -### `secureTextEntry` - -If `true`, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is `false`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `selectTextOnFocus` - -If `true`, all text will automatically be selected on focus. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `selectionColor` - -The highlight (and cursor on iOS) color of the text input. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `style` - -[Styles](style.md) - -| Type | Required | -| --------------------- | -------- | -| [Text](text.md#style) | No | - ---- - -### `value` - -The value to show for the text input. `TextInput` is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.string | No | - ---- - -### `inlineImageLeft` - -If defined, the provided image resource will be rendered on the left. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.string | No | Android | - ---- - -### `inlineImagePadding` - -Padding between the inline image, if any, and the text input itself. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.number | No | Android | - ---- - -### `numberOfLines` - -Sets the number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.number | No | Android | - ---- - -### `returnKeyLabel` - -Sets the return key to the label. Use it instead of `returnKeyType`. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.string | No | Android | - ---- - -### `underlineColorAndroid` - -The color of the `TextInput` underline. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `clearButtonMode` - -When the clear button should appear on the right side of the text view. - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| PropTypes.oneOf([ 'never', 'while-editing', 'unless-editing', 'always', ]) | No | iOS | - ---- - -### `clearTextOnFocus` - -If `true`, clears the text field automatically when editing begins. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.bool | No | iOS | - ---- - -### `dataDetectorTypes` - -Determines the types of data converted to clickable URLs in the text input. Only valid if `multiline={true}` and `editable={false}`. By default no data types are detected. - -You can provide one type or an array of many types. - -Possible values for `dataDetectorTypes` are: - -- `'phoneNumber'` -- `'link'` -- `'address'` -- `'calendarEvent'` -- `'none'` -- `'all'` - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| PropTypes.oneOfType([ PropTypes.oneOf(DataDetectorTypes), PropTypes.arrayOf(PropTypes.oneOf(DataDetectorTypes)), ]) | No | iOS | - ---- - -### `enablesReturnKeyAutomatically` - -If `true`, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is `false`. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.bool | No | iOS | - ---- - -### `keyboardAppearance` - -Determines the color of the keyboard. - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| PropTypes.oneOf([ 'default', 'light', 'dark', ]) | No | iOS | - ---- - -### `onKeyPress` - -Callback that is called when a key is pressed. Pressed key value is passed as an argument to the callback handler. Fires before `onChange` callbacks. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.func | No | iOS | - ---- - -### `selectionState` - -An instance of `DocumentSelectionState`, this is some state that is responsible for maintaining selection information for a document. - -Some functionality that can be performed with this instance is: - -- `blur()` -- `focus()` -- `update()` - -> You can reference `DocumentSelectionState` in [`vendor/document/selection/DocumentSelectionState.js`](https://github.com/facebook/react-native/blob/master/Libraries/vendor/document/selection/DocumentSelectionState.js) - -| Type | Required | Platform | -| -------------------------------------------- | -------- | -------- | -| PropTypes.instanceOf(DocumentSelectionState) | No | iOS | - -## Methods - -### `isFocused()` - -```jsx -isFocused(): -``` - -Returns `true` if the input is currently focused; `false` otherwise. - ---- - -### `clear()` - -```jsx -clear(); -``` - -Removes all text from the `TextInput`. diff --git a/website/versioned_docs/version-0.32/viewpagerandroid.md b/website/versioned_docs/version-0.32/viewpagerandroid.md deleted file mode 100644 index c6ec3ca9e35..00000000000 --- a/website/versioned_docs/version-0.32/viewpagerandroid.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: version-0.32-viewpagerandroid -title: ViewPagerAndroid -original_id: viewpagerandroid ---- - -Container that allows to flip left and right between child views. Each child view of the `ViewPagerAndroid` will be treated as a separate page and will be stretched to fill the `ViewPagerAndroid`. - -It is important all children are ``s and not composite components. You can set style properties like `padding` or `backgroundColor` for each child. - -Example: - -``` -render: function() { - return ( - - - First page - - - Second page - - - ); -} - -... - -var styles = { - ... - pageStyle: { - alignItems: 'center', - padding: 20, - } -} -``` - -### Props - -- [View props...](view.md#props) - -* [`initialPage`](viewpagerandroid.md#initialpage) -* [`keyboardDismissMode`](viewpagerandroid.md#keyboarddismissmode) -* [`onPageScroll`](viewpagerandroid.md#onpagescroll) -* [`onPageScrollStateChanged`](viewpagerandroid.md#onpagescrollstatechanged) -* [`onPageSelected`](viewpagerandroid.md#onpageselected) -* [`pageMargin`](viewpagerandroid.md#pagemargin) -* [`scrollEnabled`](viewpagerandroid.md#scrollenabled) - -### Type Definitions - -- [`ViewPagerScrollState`](viewpagerandroid.md#viewpagerscrollstate) - ---- - -# Reference - -## Props - -### `initialPage` - -Index of initial page that should be selected. Use `setPage` method to update the page, and `onPageSelected` to monitor page changes - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. - -| Type | Required | -| ------------------ | -------- | -| literal ‖ ,literal | No | - ---- - -### `onPageScroll` - -Executed when transitioning between pages (ether because of animation for the requested page change or when user is swiping/dragging between pages) The `event.nativeEvent` object for this callback will carry following data: - -- position - index of first page from the left that is currently visible -- offset - value from range [0,1) describing stage between page transitions. Value x means that (1 - x) fraction of the page at "position" index is visible, and x fraction of the next page is visible. - -| Type | Required | -| -------- | -------- | -| Function | No | - ---- - -### `onPageScrollStateChanged` - -Function called when the page scrolling state has changed. The page scrolling state can be in 3 states: - -- idle, meaning there is no interaction with the page scroller happening at the time -- dragging, meaning there is currently an interaction with the page scroller -- settling, meaning that there was an interaction with the page scroller, and the page scroller is now finishing its closing or opening animation - -| Type | Required | -| -------- | -------- | -| Function | No | - ---- - -### `onPageSelected` - -This callback will be called once ViewPager finish navigating to selected page (when user swipes between pages). The `event.nativeEvent` object passed to this callback will have following fields: - -- position - index of page that has been selected - -| Type | Required | -| -------- | -------- | -| Function | No | - ---- - -### `pageMargin` - -Blank space to show between pages. This is only visible while scrolling, pages are still edge-to-edge. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `scrollEnabled` - -When false, the content does not scroll. The default value is true. - -| Type | Required | -| ------- | -------- | -| boolean | No | - -## Type Definitions - -### ViewPagerScrollState - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| -------- | ----------- | -| idle | | -| dragging | | -| settling | | diff --git a/website/versioned_docs/version-0.32/webview.md b/website/versioned_docs/version-0.32/webview.md deleted file mode 100644 index 4d2e5b635e2..00000000000 --- a/website/versioned_docs/version-0.32/webview.md +++ /dev/null @@ -1,336 +0,0 @@ ---- -id: version-0.32-webview -title: WebView -original_id: webview ---- - -`WebView` renders web content in a native view. - -``` -import React, { Component } from 'react'; -import { WebView } from 'react-native'; - -class MyWeb extends Component { - render() { - return ( - - ); - } -} -``` - -You can use this component to navigate back and forth in the web view's history and configure various properties for the web content. - -### Props - -- [View props...](view.md#props) - -* [`source`](webview.md#source) -* [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) -* [`onShouldStartLoadWithRequest`](webview.md#onshouldstartloadwithrequest) -* [`injectedJavaScript`](webview.md#injectedjavascript) -* [`mediaPlaybackRequiresUserAction`](webview.md#mediaplaybackrequiresuseraction) -* [`onError`](webview.md#onerror) -* [`onLoad`](webview.md#onload) -* [`onLoadEnd`](webview.md#onloadend) -* [`onLoadStart`](webview.md#onloadstart) -* [`onNavigationStateChange`](webview.md#onnavigationstatechange) -* [`renderError`](webview.md#rendererror) -* [`renderLoading`](webview.md#renderloading) -* [`scalesPageToFit`](webview.md#scalespagetofit) -* [`contentInset`](webview.md#contentinset) -* [`startInLoadingState`](webview.md#startinloadingstate) -* [`style`](webview.md#style) -* [`decelerationRate`](webview.md#decelerationrate) -* [`domStorageEnabled`](webview.md#domstorageenabled) -* [`javaScriptEnabled`](webview.md#javascriptenabled) -* [`userAgent`](webview.md#useragent) -* [`allowsInlineMediaPlayback`](webview.md#allowsinlinemediaplayback) -* [`bounces`](webview.md#bounces) -* [`dataDetectorTypes`](webview.md#datadetectortypes) -* [`scrollEnabled`](webview.md#scrollenabled) -* [`url`](webview.md#url) -* [`html`](webview.md#html) - ---- - -# Reference - -## Props - -### `source` - -Loads static html or a uri (with optional headers) in the WebView. - -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------- | -------- | -| object: {uri: string,method: string,headers: object,body: string}, ,object: {html: string,baseUrl: string}, ,number | No | - ---- - -### `automaticallyAdjustContentInsets` - -Controls whether to adjust the content inset for web views that are placed behind a navigation bar, tab bar, or toolbar. The default value is `true`. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onShouldStartLoadWithRequest` - -Function that allows custom handling of any web view requests. Return `true` from the function to continue loading the request and `false` to stop loading. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `injectedJavaScript` - -Set this to provide JavaScript that will be injected into the web page when the view loads. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `mediaPlaybackRequiresUserAction` - -Boolean that determines whether HTML5 audio and video requires the user to tap them before they start playing. The default value is `true`. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onError` - -Function that is invoked when the `WebView` load fails. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoad` - -Function that is invoked when the `WebView` has finished loading. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadEnd` - -Function that is invoked when the `WebView` load succeeds or fails. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLoadStart` - -Function that is invoked when the `WebView` starts loading. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onNavigationStateChange` - -Function that is invoked when the `WebView` loading starts or ends. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `renderError` - -Function that returns a view to show if there's an error. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `renderLoading` - -Function that returns a loading indicator. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `scalesPageToFit` - -Boolean that controls whether the web content is scaled to fit the view and enables the user to change the scale. The default value is `true`. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `contentInset` - -The amount by which the web view content is inset from the edges of the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}. - -| Type | Required | -| ------------------------------------------------------------------ | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | - ---- - -### `startInLoadingState` - -Boolean value that forces the `WebView` to show the loading view on the first load. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -The style to apply to the `WebView`. - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use the string shortcuts `"normal"` and `"fast"` which match the underlying iOS settings for `UIScrollViewDecelerationRateNormal` and `UIScrollViewDecelerationRateFast` respectively: - -- normal: 0.998 -- fast: 0.99 (the default for iOS web view) - -| Type | Required | Platform | -| ------------------------------------- | -------- | -------- | -| ScrollView.propTypes.decelerationRate | No | iOS | - ---- - -### `domStorageEnabled` - -Boolean value to control whether DOM Storage is enabled. Used only in Android. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `javaScriptEnabled` - -Boolean value to enable JavaScript in the `WebView`. Used on Android only as JavaScript is enabled by default on iOS. The default value is `true`. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `userAgent` - -Sets the user-agent for the `WebView`. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `allowsInlineMediaPlayback` - -Boolean that determines whether HTML5 videos play inline or use the native full-screen controller. The default value is `false`. - -**NOTE** : In order for video to play inline, not only does this property need to be set to `true`, but the video element in the HTML document must also include the `webkit-playsinline` attribute. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `bounces` - -Boolean value that determines whether the web view bounces when it reaches the edge of the content. The default value is `true`. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `dataDetectorTypes` - -Determines the types of data converted to clickable URLs in the web view’s content. By default only phone numbers are detected. - -You can provide one type or an array of many types. - -Possible values for `dataDetectorTypes` are: - -- `'phoneNumber'` -- `'link'` -- `'address'` -- `'calendarEvent'` -- `'none'` -- `'all'` - -| Type | Required | Platform | -| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all') | No | iOS | - ---- - -### `scrollEnabled` - -Boolean value that determines whether scrolling is enabled in the `WebView`. The default value is `true`. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `url` - -**Deprecated.** Use the `source` prop instead. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `html` - -**Deprecated.** Use the `source` prop instead. - -| Type | Required | -| ------ | -------- | -| string | No | diff --git a/website/versioned_docs/version-0.33/image.md b/website/versioned_docs/version-0.33/image.md deleted file mode 100644 index 5b577491b0c..00000000000 --- a/website/versioned_docs/version-0.33/image.md +++ /dev/null @@ -1,375 +0,0 @@ ---- -id: version-0.33-image -title: Image -original_id: image ---- - -A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. - -This example shows both fetching and displaying an image from local storage as well as on from network. - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, View, Image } from 'react-native'; - -class DisplayAnImage extends Component { - render() { - return ( - - - - - ); - } -} - -// App registration and rendering -AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage); -``` - -You can also add `style` to an image: - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, View, Image, StyleSheet} from 'react-native'; - -const styles = StyleSheet.create({ - stretch: { - width: 50, - height: 200 - } -}); - -class DisplayAnImageWithStyle extends Component { - render() { - return ( - - - - ); - } -} - -// App registration and rendering -AppRegistry.registerComponent( - 'DisplayAnImageWithStyle', - () => DisplayAnImageWithStyle -); -``` - -### GIF and WebP support on Android - -By default, GIF and WebP are not supported on Android. - -You will need to add some optional modules in `android/app/build.gradle`, depending on the needs of your app. - -``` -dependencies { - // If your app supports Android versions before Ice Cream Sandwich (API level 14) - compile 'com.facebook.fresco:animated-base-support:0.11.0' - - // For animated GIF support - compile 'com.facebook.fresco:animated-gif:0.11.0' - - // For WebP support, including animated WebP - compile 'com.facebook.fresco:animated-webp:0.11.0' - compile 'com.facebook.fresco:webpsupport:0.11.0' - - // For WebP support, without animations - compile 'com.facebook.fresco:webpsupport:0.11.0' -} -``` - -Also, if you use GIF with ProGuard, you will need to add this rule in `proguard-rules.pro` : - -``` --keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl { - public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier); -} -``` - -### Props - -- [`testID`](image.md#testid) -- [`onLayout`](image.md#onlayout) -- [`onLoadEnd`](image.md#onloadend) -- [`onLoadStart`](image.md#onloadstart) -- [`resizeMode`](image.md#resizemode) -- [`source`](image.md#source) -- [`style`](image.md#style) -- [`onLoad`](image.md#onload) -- [`accessibilityLabel`](image.md#accessibilitylabel) -- [`accessible`](image.md#accessible) -- [`blurRadius`](image.md#blurradius) -- [`capInsets`](image.md#capinsets) -- [`defaultSource`](image.md#defaultsource) -- [`onError`](image.md#onerror) -- [`onProgress`](image.md#onprogress) - -### Methods - -- [`getSize`](image.md#getsize) -- [`prefetch`](image.md#prefetch) - ---- - -# Reference - -## Props - -### `testID` - -A unique identifier for this element to be used in UI Automation testing scripts. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.string | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{nativeEvent: {layout: {x, y, width, height}}}`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onLoadEnd` - -Invoked when load either succeeds or fails. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onLoadStart` - -Invoked on load start. - -e.g., `onLoadStart={(e) => this.setState({loading: true})}` - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `resizeMode` - -Determines how to resize the image when the frame doesn't match the raw image dimensions. - -- `cover`: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding). - -- `contain`: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). - -- `stretch`: Scale width and height independently, This may change the aspect ratio of the src. - -- `repeat`: Repeat the image to cover the frame of the view. The image will keep it's size and aspect ratio. (iOS only) - -| Type | Required | -| -------------------------------------------------------------------- | -------- | -| PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']) | No | - ---- - -### `source` - -The image source (either a remote URL or a local file resource). - -This prop can also contain several remote URLs, specified together with their width and height and potentially with scale/other URI arguments. The native side will then choose the best `uri` to display based on the measured size of the image container. - -| Type | Required | -| ------------------- | -------- | -| ImageSourcePropType | No | - ---- - -### `style` - -> `ImageResizeMode` is an `Enum` for different image resizing modes, set via the `resizeMode` style property on `Image` components. The values are `contain`, `cover`, `stretch`, `center`, `repeat`. - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Shadow Props...](shadow-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderTopRightRadius`**: ReactPropTypes.number - -- **`backfaceVisibility`**: ReactPropTypes.oneOf(['visible', 'hidden']) - -- **`borderBottomLeftRadius`**: ReactPropTypes.number - -- **`borderBottomRightRadius`**: ReactPropTypes.number - -- **`borderColor`**: [color](colors.md) - -- **`borderRadius`**: ReactPropTypes.number - -- **`borderTopLeftRadius`**: ReactPropTypes.number - -- **`backgroundColor`**: [color](colors.md) - -- **`borderWidth`**: ReactPropTypes.number - -- **`opacity`**: ReactPropTypes.number - -- **`overflow`**: ReactPropTypes.oneOf(['visible', 'hidden']) - -- **`resizeMode`**: ReactPropTypes.oneOf(Object.keys(ImageResizeMode)) - -- **`tintColor`**: [color](colors.md) - - Changes the color of all the non-transparent pixels to the tintColor. - -- **`overlayColor`**: ReactPropTypes.string (_Android_) - - When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners: - - - Certain resize modes, such as 'contain' - - Animated GIFs - - A typical way to use this prop is with images displayed on a solid background and setting the `overlayColor` to the same color as the background. - - For details of how this works under the hood, see http://frescolib.org/rounded-corners-and-circles.md - ---- - -### `onLoad` - -Invoked when load completes successfully. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `accessibilityLabel` - -The text that's read by the screen reader when the user interacts with the image. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.string | No | iOS | - ---- - -### `accessible` - -When true, indicates the image is an accessibility element. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.bool | No | iOS | - ---- - -### `blurRadius` - -blurRadius: the blur radius of the blur filter added to the image - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.number | No | iOS | - ---- - -### `capInsets` - -When the image is resized, the corners of the size specified by `capInsets` will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info in the [official Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets). - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `defaultSource` - -A static image to display while loading the image source. - -- `uri` - a string representing the resource identifier for the image, which should be either a local file path or the name of a static image resource (which should be wrapped in the `require('./path/to/image.png')` function). -- `width`, `height` - can be specified if known at build time, in which case these will be used to set the default `` component dimensions. -- `scale` - used to indicate the scale factor of the image. Defaults to 1.0 if unspecified, meaning that one image pixel equates to one display point / DIP. -- `number` - Opaque type returned by something like `require('./image.jpg')`. - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| PropTypes.oneOfType([ // TODO: Tooling to support documenting these directly and having them display in the docs. PropTypes.shape({ uri: PropTypes.string, width: PropTypes.number, height: PropTypes.number, scale: PropTypes.number, }), PropTypes.number, ]) | No | iOS | - ---- - -### `onError` - -Invoked on load error with `{nativeEvent: {error}}`. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.func | No | iOS | - ---- - -### `onProgress` - -Invoked on download progress with `{nativeEvent: {loaded, total}}`. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.func | No | iOS | - -## Methods - -### `getSize()` - -```jsx -static getSize(uri: string, success: function, failure: function): -``` - -Retrieve the width and height (in pixels) of an image prior to displaying it. This method can fail if the image cannot be found, or fails to download. - -In order to retrieve the image dimensions, the image may first need to be loaded or downloaded, after which it will be cached. This means that in principle you could use this method to preload images, however it is not optimized for that purpose, and may in future be implemented in a way that does not fully load/download the image data. A proper, supported way to preload images will be provided as a separate API. - -**Parameters:** - -| Name | Type | Required | Description | -| ------- | -------- | -------- | -------------------------------------------------------------------------------------------------- | -| uri | string | Yes | The location of the image. | -| success | function | Yes | The function that will be called if the image was sucessfully found and widthand height retrieved. | -| failure | function | Yes | The function that will be called if there was an error, such as failing toto retrieve the image. | - ---- - -### `prefetch()` - -```jsx -static prefetch(url: string): -``` - -Prefetches a remote image for later use by downloading it to the disk cache - -**Parameters:** - -| Name | Type | Required | Description | -| ---- | ------ | -------- | --------------------------------- | -| url | string | Yes | The remote location of the image. | diff --git a/website/versioned_docs/version-0.33/layout-props.md b/website/versioned_docs/version-0.33/layout-props.md deleted file mode 100644 index 1d321a40e85..00000000000 --- a/website/versioned_docs/version-0.33/layout-props.md +++ /dev/null @@ -1,483 +0,0 @@ ---- -id: version-0.33-layout-props -title: Layout Props -original_id: layout-props ---- - -### Props - -- [`marginRight`](layout-props.md#marginright) -- [`alignItems`](layout-props.md#alignitems) -- [`borderBottomWidth`](layout-props.md#borderbottomwidth) -- [`borderLeftWidth`](layout-props.md#borderleftwidth) -- [`borderRightWidth`](layout-props.md#borderrightwidth) -- [`borderTopWidth`](layout-props.md#bordertopwidth) -- [`borderWidth`](layout-props.md#borderwidth) -- [`bottom`](layout-props.md#bottom) -- [`flex`](layout-props.md#flex) -- [`flexDirection`](layout-props.md#flexdirection) -- [`flexWrap`](layout-props.md#flexwrap) -- [`height`](layout-props.md#height) -- [`justifyContent`](layout-props.md#justifycontent) -- [`left`](layout-props.md#left) -- [`margin`](layout-props.md#margin) -- [`marginBottom`](layout-props.md#marginbottom) -- [`marginHorizontal`](layout-props.md#marginhorizontal) -- [`marginLeft`](layout-props.md#marginleft) -- [`alignSelf`](layout-props.md#alignself) -- [`marginTop`](layout-props.md#margintop) -- [`marginVertical`](layout-props.md#marginvertical) -- [`maxHeight`](layout-props.md#maxheight) -- [`maxWidth`](layout-props.md#maxwidth) -- [`minHeight`](layout-props.md#minheight) -- [`minWidth`](layout-props.md#minwidth) -- [`padding`](layout-props.md#padding) -- [`paddingBottom`](layout-props.md#paddingbottom) -- [`paddingHorizontal`](layout-props.md#paddinghorizontal) -- [`paddingLeft`](layout-props.md#paddingleft) -- [`paddingRight`](layout-props.md#paddingright) -- [`paddingTop`](layout-props.md#paddingtop) -- [`paddingVertical`](layout-props.md#paddingvertical) -- [`position`](layout-props.md#position) -- [`right`](layout-props.md#right) -- [`top`](layout-props.md#top) -- [`width`](layout-props.md#width) -- [`zIndex`](layout-props.md#zindex) - ---- - -# Reference - -## Props - -### `marginRight` - -`marginRight` works like `margin-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `alignItems` - -`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items for more details. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'flex-start', 'flex-end', 'center', 'stretch' ]) | No | - ---- - -### `borderBottomWidth` - -`borderBottomWidth` works like `border-bottom-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderLeftWidth` - -`borderLeftWidth` works like `border-left-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderRightWidth` - -`borderRightWidth` works like `border-right-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderTopWidth` - -`borderTopWidth` works like `border-top-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderWidth` - -`borderWidth` works like `border-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `bottom` - -`bottom` is the number of logical pixels to offset the bottom edge of this component. - -It works similarly to `bottom` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of how `top` affects layout. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `flex` - -In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the `css-layout` library at https://github.com/facebook/css-layout. - -When `flex` is a positive number, it makes the component flexible and it will be sized proportional to its flex value. So a component with `flex` set to 2 will take twice the space as a component with `flex` set to 1. - -When `flex` is 0, the component is sized according to `width` and `height` and it is inflexible. - -When `flex` is -1, the component is normally sized according `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `flexDirection` - -`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`. See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction for more details. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'row', 'row-reverse', 'column', 'column-reverse' ]) | No | - ---- - -### `flexWrap` - -`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap). See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap for more details. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'wrap', 'nowrap' ]) | No | - ---- - -### `height` - -`height` sets the height of this component. - -It works similarly to `height` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `justifyContent` - -`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start). See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content for more details. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'flex-start', 'flex-end', 'center', 'space-between', 'space-around' ]) | No | - ---- - -### `left` - -`left` is the number of logical pixels to offset the left edge of this component. - -It works similarly to `left` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of how `left` affects layout. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `margin` - -Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `marginBottom` - -`marginBottom` works like `margin-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `marginHorizontal` - -Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `marginLeft` - -`marginLeft` works like `margin-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `alignSelf` - -`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-self for more details. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'auto', 'flex-start', 'flex-end', 'center', 'stretch' ]) | No | - ---- - -### `marginTop` - -`marginTop` works like `margin-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `marginVertical` - -Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `maxHeight` - -`maxHeight` is the maximum height for this component, in logical pixels. - -It works similarly to `max-height` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `maxWidth` - -`maxWidth` is the maximum width for this component, in logical pixels. - -It works similarly to `max-width` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `minHeight` - -`minHeight` is the minimum height for this component, in logical pixels. - -It works similarly to `min-height` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `minWidth` - -`minWidth` is the minimum width for this component, in logical pixels. - -It works similarly to `min-width` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `padding` - -Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingBottom` - -`paddingBottom` works like `padding-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingHorizontal` - -Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRight`. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingLeft` - -`paddingLeft` works like `padding-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingRight` - -`paddingRight` works like `padding-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingTop` - -`paddingTop` works like `padding-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingVertical` - -Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBottom`. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `position` - -`position` in React Native is similar to regular CSS, but everything is set to `relative` by default, so `absolute` positioning is always relative to the parent. - -If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have `absolute` position. - -If you want to position a child relative to something that is not its parent, don't use styles for that. Use the component tree. - -See https://github.com/facebook/css-layout for more details on how `position` differs between React Native and CSS. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'absolute', 'relative' ]) | No | - ---- - -### `right` - -`right` is the number of logical pixels to offset the right edge of this component. - -It works similarly to `right` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of how `right` affects layout. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `top` - -`top` is the number of logical pixels to offset the top edge of this component. - -It works similarly to `top` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how `top` affects layout. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `width` - -`width` sets the width of this component. - -It works similarly to `width` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `zIndex` - -`zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior. - -It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for more details. - -On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | diff --git a/website/versioned_docs/version-0.33/permissionsandroid.md b/website/versioned_docs/version-0.33/permissionsandroid.md deleted file mode 100644 index 4a637dbb61f..00000000000 --- a/website/versioned_docs/version-0.33/permissionsandroid.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -id: version-0.33-permissionsandroid -title: PermissionsAndroid -original_id: permissionsandroid ---- - -`PermissionsAndroid` provides access to Android M's new permissions model. Some permissions are granted by default when the application is installed so long as they appear in `AndroidManifest.xml`. However, "dangerous" permissions require a dialog prompt. You should use this module for those permissions. - -On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so `checkPermission` and `requestPermission` should always be true. - -If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional `rationale` argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear. - -### Example - -``` -async function requestCameraPermission() { - try { - const granted = await AndroidPermissions.requestPermission( - AndroidPermissions.PERMISSIONS.CAMERA, - { - 'title': 'Cool Photo App Camera Permission', - 'message': 'Cool Photo App needs access to your camera ' + - 'so you can take awesome pictures.' - } - ) - if (granted) { - console.log("You can use the camera") - } else { - console.log("Camera permission denied") - } - } catch (err) { - console.warn(err) - } -} -``` - -### Methods - -- [`constructor`](permissionsandroid.md#constructor) -- [`checkPermission`](permissionsandroid.md#checkpermission) -- [`requestPermission`](permissionsandroid.md#requestpermission) - ---- - -# Reference - -## Methods - -### `constructor()` - -```jsx -constructor(); -``` - ---- - -### `checkPermission()` - -```jsx -checkPermission(permission); -``` - -Returns a promise resolving to a boolean value as to whether the specified permissions has been granted - ---- - -### `requestPermission()` - -```jsx -requestPermission(permission, rationale?) -``` - -Prompts the user to enable a permission and returns a promise resolving to a boolean value indicating whether the user allowed or denied the request - -If the optional rationale argument is included (which is an object with a `title` and `message`), this function checks with the OS whether it is necessary to show a dialog explaining why the permission is needed (https://developer.android.com/training/permissions/requesting.html#explain) and then shows the system permission dialog diff --git a/website/versioned_docs/version-0.33/text-style-props.md b/website/versioned_docs/version-0.33/text-style-props.md deleted file mode 100644 index ba1964625ab..00000000000 --- a/website/versioned_docs/version-0.33/text-style-props.md +++ /dev/null @@ -1,185 +0,0 @@ ---- -id: version-0.33-text-style-props -title: Text Style Props -original_id: text-style-props ---- - -### Props - -- [`textDecorationLine`](text-style-props.md#textdecorationline) -- [`color`](text-style-props.md#color) -- [`fontSize`](text-style-props.md#fontsize) -- [`fontStyle`](text-style-props.md#fontstyle) -- [`fontVariant`](text-style-props.md#fontvariant) -- [`fontWeight`](text-style-props.md#fontweight) -- [`lineHeight`](text-style-props.md#lineheight) -- [`textAlign`](text-style-props.md#textalign) -- [`fontFamily`](text-style-props.md#fontfamily) -- [`textShadowColor`](text-style-props.md#textshadowcolor) -- [`textShadowOffset`](text-style-props.md#textshadowoffset) -- [`textShadowRadius`](text-style-props.md#textshadowradius) -- [`textAlignVertical`](text-style-props.md#textalignvertical) -- [`letterSpacing`](text-style-props.md#letterspacing) -- [`textDecorationColor`](text-style-props.md#textdecorationcolor) -- [`textDecorationStyle`](text-style-props.md#textdecorationstyle) -- [`writingDirection`](text-style-props.md#writingdirection) - ---- - -# Reference - -## Props - -### `textDecorationLine` - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf( ['none' /*default*/, 'underline', 'line-through', 'underline line-through'] ) | No | - ---- - -### `color` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `fontSize` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `fontStyle` - -| Type | Required | -| ------------------------------------------ | -------- | -| ReactPropTypes.oneOf(['normal', 'italic']) | No | - ---- - -### `fontVariant` - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.arrayOf( ReactPropTypes.oneOf([ 'small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums', ]) ) | No | - ---- - -### `fontWeight` - -Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf( ['normal' /*default*/, 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'] ) | No | - ---- - -### `lineHeight` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `textAlign` - -Specifies text alignment. The value 'justify' is only supported on iOS and fallbacks to `left` on Android. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf( ['auto' /*default*/, 'left', 'right', 'center', 'justify'] ) | No | - ---- - -### `fontFamily` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.string | No | - ---- - -### `textShadowColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `textShadowOffset` - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.shape( {width: ReactPropTypes.number, height: ReactPropTypes.number} ) | No | - ---- - -### `textShadowRadius` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `textAlignVertical` - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| ReactPropTypes.oneOf( ['auto' /*default*/, 'top', 'bottom', 'center'] ) | No | Android | - ---- - -### `letterSpacing` - -| Type | Required | Platform | -| --------------------- | -------- | -------- | -| ReactPropTypes.number | No | iOS | - ---- - -### `textDecorationColor` - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | - ---- - -### `textDecorationStyle` - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| ReactPropTypes.oneOf( ['solid' /*default*/, 'double', 'dotted','dashed'] ) | No | iOS | - ---- - -### `writingDirection` - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| ReactPropTypes.oneOf( ['auto' /*default*/, 'ltr', 'rtl'] ) | No | iOS | diff --git a/website/versioned_docs/version-0.33/text.md b/website/versioned_docs/version-0.33/text.md deleted file mode 100644 index d4318b4b274..00000000000 --- a/website/versioned_docs/version-0.33/text.md +++ /dev/null @@ -1,264 +0,0 @@ ---- -id: version-0.33-text -title: Text -original_id: text ---- - -A React component for displaying text. - -`Text` supports nesting, styling, and touch handling. - -In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines: - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, Text, StyleSheet } from 'react-native'; - -class TextInANest extends Component { - constructor(props) { - super(props); - this.state = { - titleText: "Bird's Nest", - bodyText: 'This is not really a bird nest.' - }; - } - - render() { - return ( - - - {this.state.titleText}

- - - {this.state.bodyText} - - - ); - } -} - -const styles = StyleSheet.create({ - baseText: { - fontFamily: 'Cochin', - }, - titleText: { - fontSize: 20, - fontWeight: 'bold', - }, -}); - -// App registration and rendering -AppRegistry.registerComponent('TextInANest', () => TextInANest); -``` - -### Props - -- [`style`](text.md#style) -- [`accessible`](text.md#accessible) -- [`numberOfLines`](text.md#numberoflines) -- [`onLayout`](text.md#onlayout) -- [`onLongPress`](text.md#onlongpress) -- [`onPress`](text.md#onpress) -- [`ellipsizeMode`](text.md#ellipsizemode) -- [`testID`](text.md#testid) -- [`selectable`](text.md#selectable) -- [`adjustsFontSizeToFit`](text.md#adjustsfontsizetofit) -- [`allowFontScaling`](text.md#allowfontscaling) -- [`minimumFontScale`](text.md#minimumfontscale) -- [`suppressHighlighting`](text.md#suppresshighlighting) - ---- - -# Reference - -## Props - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [View Style Props...](view-style-props.md#style) - -- **`textDecorationLine`**: ReactPropTypes.oneOf( ['none' /*default*/, 'underline', 'line-through', 'underline line-through'] ) - -- **`color`**: [color](colors.md) - -- **`fontSize`**: ReactPropTypes.number - -- **`fontStyle`**: ReactPropTypes.oneOf(['normal', 'italic']) - -- **`fontVariant`**: ReactPropTypes.arrayOf( ReactPropTypes.oneOf([ 'small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums', ]) ) - -- **`fontWeight`**: ReactPropTypes.oneOf( ['normal' /*default*/, 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'] ) - - Specifies font weight. The values 'normal' and 'bold' are supported for - most fonts. Not all fonts have a variant for each of the numeric values, - in that case the closest one is chosen. - -- **`lineHeight`**: ReactPropTypes.number - -- **`textAlign`**: ReactPropTypes.oneOf( ['auto' /*default*/, 'left', 'right', 'center', 'justify'] ) - - Specifies text alignment. The value 'justify' is only supported on iOS and - fallbacks to `left` on Android. - -- **`fontFamily`**: ReactPropTypes.string - -- **`textShadowColor`**: [color](colors.md) - -- **`textShadowOffset`**: ReactPropTypes.shape( {width: ReactPropTypes.number, height: ReactPropTypes.number} ) - -- **`textShadowRadius`**: ReactPropTypes.number - -- **`textAlignVertical`**: ReactPropTypes.oneOf( ['auto' /*default*/, 'top', 'bottom', 'center'] ) (_Android_) - -- **`letterSpacing`**: ReactPropTypes.number (_iOS_) - -- **`textDecorationColor`**: [color](colors.md) (_iOS_) - -- **`textDecorationStyle`**: ReactPropTypes.oneOf( ['solid' /*default*/, 'double', 'dotted','dashed'] ) (_iOS_) - -- **`writingDirection`**: ReactPropTypes.oneOf( ['auto' /*default*/, 'ltr', 'rtl'] ) (_iOS_) - ---- - -### `accessible` - -When set to `true`, indicates that the view is an accessibility element. The default value for a `Text` element is `true`. - -See the [Accessibility guide](accessibility.md#accessible-ios-android) for more information. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `numberOfLines` - -Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. - -This prop is commonly used with `ellipsizeMode`. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with - -`{nativeEvent: {layout: {x, y, width, height}}}` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLongPress` - -This function is called on long press. - -e.g., `onLongPress={this.increaseSize}>`` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPress` - -This function is called on press. - -e.g., `onPress={() => console.log('1st')}`` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `ellipsizeMode` - -This can be one of the following values: - -- `head` - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz" -- `middle` - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. "ab...yz" -- `tail` - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..." -- `clip` - Lines are not drawn past the edge of the text container. - -The default is `tail`. - -`numberOfLines` must be set in conjunction with this prop. - -> `clip` is working only for iOS - -| Type | Required | -| -------------------------------------- | -------- | -| enum('head', 'middle', 'tail', 'clip') | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `selectable` - -Lets the user select text, to use the native copy and paste functionality. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `adjustsFontSizeToFit` - -Specifies whether font should be scaled down automatically to fit given style constraints. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `allowFontScaling` - -Specifies whether fonts should scale to respect Text Size accessibility setting on iOS. The default is `true`. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `minimumFontScale` - -Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0). - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `suppressHighlighting` - -When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | diff --git a/website/versioned_docs/version-0.34/actionsheetios.md b/website/versioned_docs/version-0.34/actionsheetios.md deleted file mode 100644 index b605e49b918..00000000000 --- a/website/versioned_docs/version-0.34/actionsheetios.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: version-0.34-actionsheetios -title: ActionSheetIOS -original_id: actionsheetios ---- - -### Methods - -- [`showActionSheetWithOptions`](actionsheetios.md#showactionsheetwithoptions) -- [`showShareActionSheetWithOptions`](actionsheetios.md#showshareactionsheetwithoptions) - ---- - -# Reference - -## Methods - -### `showActionSheetWithOptions()` - -```jsx -static showActionSheetWithOptions(options, callback) -``` - -Display an iOS action sheet. The `options` object must contain one or more of: - -- `options` (array of strings) - a list of button titles (required) -- `cancelButtonIndex` (int) - index of cancel button in `options` -- `destructiveButtonIndex` (int) - index of destructive button in `options` -- `title` (string) - a title to show above the action sheet -- `message` (string) - a message to show below the title - ---- - -### `showShareActionSheetWithOptions()` - -```jsx -static showShareActionSheetWithOptions(options, failureCallback, successCallback) -``` - -Display the iOS share sheet. The `options` object should contain one or both of `message` and `url` and can additionally have a `subject` or `excludedActivityTypes`: - -- `url` (string) - a URL to share -- `message` (string) - a message to share -- `subject` (string) - a subject for the message -- `excludedActivityTypes` (array) - the activities to exclude from the ActionSheet - -NOTE: if `url` points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc. diff --git a/website/versioned_docs/version-0.34/animated.md b/website/versioned_docs/version-0.34/animated.md deleted file mode 100644 index 4c1875e4d3a..00000000000 --- a/website/versioned_docs/version-0.34/animated.md +++ /dev/null @@ -1,494 +0,0 @@ ---- -id: version-0.34-animated -title: Animated -original_id: animated ---- - -Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and painless to build and maintain. - -The most basic workflow is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates either via animations, such as `Animated.timing`, or by hooking into gestures like panning or scrolling via `Animated.event`. `Animated.Value` can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted: - -```jsx -class FadeInView extends React.Component { - constructor(props) { - super(props); - this.state = { - fadeAnim: new Animated.Value(0) // init opacity 0 - }; - } - componentDidMount() { - Animated.timing( - // Uses easing functions - this.state.fadeAnim, // The value to drive - { toValue: 1 } // Configuration - ).start(); // Don't forget start! - } - render() { - return ( - - {' '} - // Binds - {this.props.children} - - ); - } -} -``` - -Note that only animatable components can be animated. `View`, `Text`, and `Image` are already provided, and you can create custom ones with `createAnimatedComponent`. These unique components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default. - -Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation. - -A single `Animated.Value` can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value. - -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` in the example above like so: - -```jsx - style={{ - opacity: this.state.fadeAnim, // Binds directly - transform: [{ - translateY: this.state.fadeAnim.interpolate({ - inputRange: [0, 1], - outputRange: [150, 0] // 0 : 150, 0.5 : 75, 1 : 0 - }), - }], - }}> -``` - -Animations can also be combined in complex ways using composition functions such as `sequence` and `parallel`, and can also be chained together by setting the `toValue` of one animation to be another `Animated.Value`. - -`Animated.ValueXY` is handy for 2D animations, like panning, and there are other helpful additions like `setOffset` and `getLayout` to aid with typical interaction patterns, like drag-and-drop. - -You can see more example usage in `AnimationExample.js`, the Gratuitous Animation App, and [Animations documentation guide](animations.md). - -Note that `Animated` is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout `Animated.Value.addListener` as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future. - -### Methods - -- [`decay`](animated.md#decay) -- [`timing`](animated.md#timing) -- [`spring`](animated.md#spring) -- [`add`](animated.md#add) -- [`multiply`](animated.md#multiply) -- [`modulo`](animated.md#modulo) -- [`diffClamp`](animated.md#diffclamp) -- [`delay`](animated.md#delay) -- [`sequence`](animated.md#sequence) -- [`parallel`](animated.md#parallel) -- [`stagger`](animated.md#stagger) -- [`event`](animated.md#event) -- [`createAnimatedComponent`](animated.md#createanimatedcomponent) - -### Properties - -- [`Value`](animated.md#value) -- [`ValueXY`](animated.md#valuexy) - -### Classes - -- [`AnimatedValue`](animated.md#animatedvalue) -- [`AnimatedValueXY`](animated.md#animatedvaluexy) -- [`AnimatedProps`](animated.md#animatedprops) - ---- - -# Reference - -## Methods - -### `decay()` - -```jsx -static decay(value, config) -``` - -Animates a value from an initial velocity to zero based on a decay coefficient. - ---- - -### `timing()` - -```jsx -static timing(value, config) -``` - -Animates a value along a timed easing curve. The `Easing` module has tons of pre-defined curves, or you can use your own function. - ---- - -### `spring()` - -```jsx -static spring(value, config) -``` - -Spring animation based on Rebound and Origami. Tracks velocity state to create fluid motions as the `toValue` updates, and can be chained together. - ---- - -### `add()` - -```jsx -static add(a, b) -``` - -Creates a new Animated value composed from two Animated values added together. - ---- - -### `multiply()` - -```jsx -static multiply(a, b) -``` - -Creates a new Animated value composed from two Animated values multiplied together. - ---- - -### `modulo()` - -```jsx -static modulo(a, modulus) -``` - -Creates a new Animated value that is the (non-negative) modulo of the provided Animated value - ---- - -### `diffClamp()` - -```jsx -static diffClamp(a, min, max) -``` - -Create a new Animated value that is limited between 2 values. It uses the difference between the last value so even if the value is far from the bounds it will start changing when the value starts getting closer again. (`value = clamp(value + diff, min, max)`). - -This is useful with scroll events, for example, to show the navbar when scrolling up and to hide it when scrolling down. - ---- - -### `delay()` - -```jsx -static delay(time) -``` - -Starts an animation after the given delay. - ---- - -### `sequence()` - -```jsx -static sequence(animations) -``` - -Starts an array of animations in order, waiting for each to complete before starting the next. If the current running animation is stopped, no following animations will be started. - ---- - -### `parallel()` - -```jsx -static parallel(animations, config?) -``` - -Starts an array of animations all at the same time. By default, if one of the animations is stopped, they will all be stopped. You can override this with the `stopTogether` flag. - ---- - -### `stagger()` - -```jsx -static stagger(time, animations) -``` - -Array of animations may run in parallel (overlap), but are started in sequence with successive delays. Nice for doing trailing effects. - ---- - -### `event()` - -```jsx -static event(argMapping, config?) -``` - -Takes an array of mappings and extracts values from each arg accordingly, then calls `setValue` on the mapped outputs. e.g. - -```jsx - onScroll={Animated.event( - [{nativeEvent: {contentOffset: {x: this._scrollX}}}] - {listener}, // Optional async listener - ) - ... - onPanResponderMove: Animated.event([ - null, // raw event arg ignored - {dx: this._panX}, // gestureState arg - ]), -``` - ---- - -### `createAnimatedComponent()` - -```jsx -static createAnimatedComponent(Component) -``` - -Make any React component Animatable. Used to create `Animated.View`, etc. - -## Properties - ---- - -## Classes - -## class AnimatedValue - -Standard value for driving animations. One `Animated.Value` can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling `setValue`) will stop any previous ones. - -### Methods - -### `constructor()` - -```jsx -constructor(value); -``` - ---- - -### `setValue()` - -```jsx -setValue(value); -``` - -Directly set the value. This will stop any animations running on the value and update all the bound properties. - ---- - -### `setOffset()` - -```jsx -setOffset(offset); -``` - -Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture. - ---- - -### `flattenOffset()` - -```jsx -flattenOffset(); -``` - -Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged. - ---- - -### `addListener()` - -```jsx -addListener(callback); -``` - -Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively. - ---- - -### `removeListener()` - -```jsx -removeListener(id); -``` - ---- - -### `removeAllListeners()` - -```jsx -removeAllListeners(); -``` - ---- - -### `stopAnimation()` - -```jsx -stopAnimation(callback?) -``` - -Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout. - ---- - -### `interpolate()` - -```jsx -interpolate(config); -``` - -Interpolates the value before updating the property, e.g. mapping 0-1 to 0-10. - ---- - -### `animate()` - -```jsx -animate(animation, callback); -``` - -Typically only used internally, but could be used by a custom Animation class. - ---- - -### `stopTracking()` - -```jsx -stopTracking(); -``` - -Typically only used internally. - ---- - -### `track()` - -```jsx -track(tracking); -``` - -Typically only used internally. - ---- - -## class AnimatedValueXY - -2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal `Animated.Value`, but multiplexed. Contains two regular `Animated.Value`s under the hood. Example: - -```jsx -class DraggableView extends React.Component { - constructor(props) { - super(props); - this.state = { - pan: new Animated.ValueXY() // inits to zero - }; - this.state.panResponder = PanResponder.create({ - onStartShouldSetPanResponder: () => true, - onPanResponderMove: Animated.event([ - null, - { - dx: this.state.pan.x, // x,y are Animated.Value - dy: this.state.pan.y - } - ]), - onPanResponderRelease: () => { - Animated.spring( - this.state.pan, // Auto-multiplexed - { toValue: { x: 0, y: 0 } } // Back to zero - ).start(); - } - }); - } - render() { - return ( - - {this.props.children} - - ); - } -} -``` - -### Methods - -### `constructor()` - -```jsx -constructor(valueIn?) -``` - ---- - -### `setValue()` - -```jsx -setValue(value); -``` - ---- - -### `setOffset()` - -```jsx -setOffset(offset); -``` - ---- - -### `flattenOffset()` - -```jsx -flattenOffset(); -``` - ---- - -### `stopAnimation()` - -```jsx -stopAnimation(callback?) -``` - ---- - -### `addListener()` - -```jsx -addListener(callback); -``` - ---- - -### `removeListener()` - -```jsx -removeListener(id); -``` - ---- - -### `getLayout()` - -```jsx -getLayout(); -``` - -Converts `{x, y}` into `{left, top}` for use in style, e.g. - -```jsx - style={this.state.anim.getLayout()} -``` - ---- - -### `getTranslateTransform()` - -```jsx -getTranslateTransform(); -``` - -Converts `{x, y}` into a useable translation transform, e.g. - -```jsx - style={{ - transform: this.state.anim.getTranslateTransform() - }} -``` diff --git a/website/versioned_docs/version-0.34/cameraroll.md b/website/versioned_docs/version-0.34/cameraroll.md deleted file mode 100644 index 4b987f7e9f4..00000000000 --- a/website/versioned_docs/version-0.34/cameraroll.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -id: version-0.34-cameraroll -title: CameraRoll -original_id: cameraroll ---- - -`CameraRoll` provides access to the local camera roll / gallery. Before using this you must link the `RCTCameraRoll` library. You can refer to (Linking)[linking-libraries-ios] for help. - -### Methods - -- [`saveImageWithTag`](cameraroll.md#saveimagewithtag) -- [`saveToCameraRoll`](cameraroll.md#savetocameraroll) -- [`getPhotos`](cameraroll.md#getphotos) - ---- - -# Reference - -## Methods - -### `saveImageWithTag()` - -```jsx -static saveImageWithTag(tag) -``` - ---- - -### `saveToCameraRoll()` - -```jsx -static saveToCameraRoll(tag, type?) -``` - -Saves the photo or video to the camera roll / gallery. - -On Android, the tag must be a local image or video URI, such as `"file:///sdcard/img.png"`. - -On iOS, the tag can be any image URI (including local, remote asset-library and base64 data URIs) or a local video file URI (remote or data URIs are not supported for saving video at this time). - -If the tag has a file extension of .mov or .mp4, it will be inferred as a video. Otherwise it will be treated as a photo. To override the automatic choice, you can pass an optional `type` parameter that must be one of 'photo' or 'video'. - -Returns a Promise which will resolve with the new URI. - ---- - -### `getPhotos()` - -```jsx -static getPhotos(params) -``` - -Returns a Promise with photo identifier objects from the local camera roll of the device matching shape defined by `getPhotosReturnChecker`. - -@param {object} params See `getPhotosParamChecker`. - -Returns a Promise which when resolved will be of shape `getPhotosReturnChecker`. diff --git a/website/versioned_docs/version-0.34/geolocation.md b/website/versioned_docs/version-0.34/geolocation.md deleted file mode 100644 index 2009d6df938..00000000000 --- a/website/versioned_docs/version-0.34/geolocation.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: version-0.34-geolocation -title: Geolocation -original_id: geolocation ---- - -The Geolocation API follows the web spec: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation - -As a browser polyfill, this API is available through the `navigator.geolocation` global - you do not need to `import` it. - -### iOS - -You need to include the `NSLocationWhenInUseUsageDescription` key in Info.plist to enable geolocation. Geolocation is enabled by default when you create a project with `react-native init`. - -### Android - -To request access to location, you need to add the following line to your app's `AndroidManifest.xml`: - -`` - -### Methods - -- [`getCurrentPosition`](geolocation.md#getcurrentposition) -- [`watchPosition`](geolocation.md#watchposition) -- [`clearWatch`](geolocation.md#clearwatch) -- [`stopObserving`](geolocation.md#stopobserving) - ---- - -# Reference - -## Methods - -### `getCurrentPosition()` - -```jsx -static getCurrentPosition(geo_success, geo_error?, geo_options?) -``` - -Invokes the success callback once with the latest location info. Supported options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool) On Android, this can return almost immediately if the location is cached or request an update, which might take a while. - ---- - -### `watchPosition()` - -```jsx -static watchPosition(success, error?, options?) -``` - -Invokes the success callback whenever the location changes. Supported options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool), distanceFilter(m) - ---- - -### `clearWatch()` - -```jsx -static clearWatch(watchID) -``` - ---- - -### `stopObserving()` - -```jsx -static stopObserving() -``` - -Stops observing for device location changes. In addition, it removes all listeners previously registered. - -Notice that this method has only effect if the `geolocation.watchPosition(successCallback, errorCallback)` method was previously invoked. diff --git a/website/versioned_docs/version-0.34/image.md b/website/versioned_docs/version-0.34/image.md deleted file mode 100644 index 16c5f6eaf37..00000000000 --- a/website/versioned_docs/version-0.34/image.md +++ /dev/null @@ -1,394 +0,0 @@ ---- -id: version-0.34-image -title: Image -original_id: image ---- - -A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. - -This example shows both fetching and displaying an image from local storage as well as on from network. - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, View, Image } from 'react-native'; - -class DisplayAnImage extends Component { - render() { - return ( - - - - - ); - } -} - -// App registration and rendering -AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage); -``` - -You can also add `style` to an image: - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, View, Image, StyleSheet} from 'react-native'; - -const styles = StyleSheet.create({ - stretch: { - width: 50, - height: 200 - } -}); - -class DisplayAnImageWithStyle extends Component { - render() { - return ( - - - - ); - } -} - -// App registration and rendering -AppRegistry.registerComponent( - 'DisplayAnImageWithStyle', - () => DisplayAnImageWithStyle -); -``` - -### GIF and WebP support on Android - -By default, GIF and WebP are not supported on Android. - -You will need to add some optional modules in `android/app/build.gradle`, depending on the needs of your app. - -``` -dependencies { - // If your app supports Android versions before Ice Cream Sandwich (API level 14) - compile 'com.facebook.fresco:animated-base-support:0.11.0' - - // For animated GIF support - compile 'com.facebook.fresco:animated-gif:0.11.0' - - // For WebP support, including animated WebP - compile 'com.facebook.fresco:animated-webp:0.11.0' - compile 'com.facebook.fresco:webpsupport:0.11.0' - - // For WebP support, without animations - compile 'com.facebook.fresco:webpsupport:0.11.0' -} -``` - -Also, if you use GIF with ProGuard, you will need to add this rule in `proguard-rules.pro` : - -``` --keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl { - public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier); -} -``` - -### Props - -- [`resizeMethod`](image.md#resizemethod) -- [`onLayout`](image.md#onlayout) -- [`onLoadEnd`](image.md#onloadend) -- [`onLoadStart`](image.md#onloadstart) -- [`resizeMode`](image.md#resizemode) -- [`source`](image.md#source) -- [`style`](image.md#style) -- [`testID`](image.md#testid) -- [`onLoad`](image.md#onload) -- [`accessibilityLabel`](image.md#accessibilitylabel) -- [`accessible`](image.md#accessible) -- [`blurRadius`](image.md#blurradius) -- [`capInsets`](image.md#capinsets) -- [`defaultSource`](image.md#defaultsource) -- [`onError`](image.md#onerror) -- [`onProgress`](image.md#onprogress) - -### Methods - -- [`getSize`](image.md#getsize) -- [`prefetch`](image.md#prefetch) - ---- - -# Reference - -## Props - -### `resizeMethod` - -The mechanism that should be used to resize the image when the image's dimensions differ from the image view's dimensions. Defaults to `auto`. - -- `auto`: Use heuristics to pick between `resize` and `scale`. - -- `resize`: A software operation which changes the encoded image in memory before it gets decoded. This should be used instead of `scale` when the image is much larger than the view. - -- `scale`: The image gets drawn downscaled or upscaled. Compared to `resize`, `scale` is faster (usually hardware accelerated) and produces higher quality images. This should be used if the image is smaller than the view. It should also be used if the image is slightly bigger than the view. - -More details about `resize` and `scale` can be found at http://frescolib.org/resizing-rotating.md. - -| Type | Required | Platform | -| -------------------------------------------- | -------- | -------- | -| PropTypes.oneOf(['auto', 'resize', 'scale']) | No | Android | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{nativeEvent: {layout: {x, y, width, height}}}`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onLoadEnd` - -Invoked when load either succeeds or fails. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onLoadStart` - -Invoked on load start. - -e.g., `onLoadStart={(e) => this.setState({loading: true})}` - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `resizeMode` - -Determines how to resize the image when the frame doesn't match the raw image dimensions. - -- `cover`: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding). - -- `contain`: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). - -- `stretch`: Scale width and height independently, This may change the aspect ratio of the src. - -- `repeat`: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio. (iOS only) - -| Type | Required | -| -------------------------------------------------------------------- | -------- | -| PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']) | No | - ---- - -### `source` - -The image source (either a remote URL or a local file resource). - -This prop can also contain several remote URLs, specified together with their width and height and potentially with scale/other URI arguments. The native side will then choose the best `uri` to display based on the measured size of the image container. - -| Type | Required | -| ------------------- | -------- | -| ImageSourcePropType | No | - ---- - -### `style` - -> `ImageResizeMode` is an `Enum` for different image resizing modes, set via the `resizeMode` style property on `Image` components. The values are `contain`, `cover`, `stretch`, `center`, `repeat`. - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Shadow Props...](shadow-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderTopRightRadius`**: ReactPropTypes.number - -- **`backfaceVisibility`**: ReactPropTypes.oneOf(['visible', 'hidden']) - -- **`borderBottomLeftRadius`**: ReactPropTypes.number - -- **`borderBottomRightRadius`**: ReactPropTypes.number - -- **`borderColor`**: [color](colors.md) - -- **`borderRadius`**: ReactPropTypes.number - -- **`borderTopLeftRadius`**: ReactPropTypes.number - -- **`backgroundColor`**: [color](colors.md) - -- **`borderWidth`**: ReactPropTypes.number - -- **`opacity`**: ReactPropTypes.number - -- **`overflow`**: ReactPropTypes.oneOf(['visible', 'hidden']) - -- **`resizeMode`**: ReactPropTypes.oneOf(Object.keys(ImageResizeMode)) - -- **`tintColor`**: [color](colors.md) - - Changes the color of all the non-transparent pixels to the tintColor. - -- **`overlayColor`**: ReactPropTypes.string (_Android_) - - When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners: - - - Certain resize modes, such as 'contain' - - Animated GIFs - - A typical way to use this prop is with images displayed on a solid background and setting the `overlayColor` to the same color as the background. - - For details of how this works under the hood, see http://frescolib.org/rounded-corners-and-circles.md - ---- - -### `testID` - -A unique identifier for this element to be used in UI Automation testing scripts. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.string | No | - ---- - -### `onLoad` - -Invoked when load completes successfully. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `accessibilityLabel` - -The text that's read by the screen reader when the user interacts with the image. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.string | No | iOS | - ---- - -### `accessible` - -When true, indicates the image is an accessibility element. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.bool | No | iOS | - ---- - -### `blurRadius` - -blurRadius: the blur radius of the blur filter added to the image - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.number | No | iOS | - ---- - -### `capInsets` - -When the image is resized, the corners of the size specified by `capInsets` will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info in the [official Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets). - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `defaultSource` - -A static image to display while loading the image source. - -- `uri` - a string representing the resource identifier for the image, which should be either a local file path or the name of a static image resource (which should be wrapped in the `require('./path/to/image.png')` function). -- `width`, `height` - can be specified if known at build time, in which case these will be used to set the default `` component dimensions. -- `scale` - used to indicate the scale factor of the image. Defaults to 1.0 if unspecified, meaning that one image pixel equates to one display point / DIP. -- `number` - Opaque type returned by something like `require('./image.jpg')`. - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| PropTypes.oneOfType([ // TODO: Tooling to support documenting these directly and having them display in the docs. PropTypes.shape({ uri: PropTypes.string, width: PropTypes.number, height: PropTypes.number, scale: PropTypes.number, }), PropTypes.number, ]) | No | iOS | - ---- - -### `onError` - -Invoked on load error with `{nativeEvent: {error}}`. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.func | No | iOS | - ---- - -### `onProgress` - -Invoked on download progress with `{nativeEvent: {loaded, total}}`. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.func | No | iOS | - -## Methods - -### `getSize()` - -```jsx -static getSize(uri: string, success: function, failure: function): -``` - -Retrieve the width and height (in pixels) of an image prior to displaying it. This method can fail if the image cannot be found, or fails to download. - -In order to retrieve the image dimensions, the image may first need to be loaded or downloaded, after which it will be cached. This means that in principle you could use this method to preload images, however it is not optimized for that purpose, and may in future be implemented in a way that does not fully load/download the image data. A proper, supported way to preload images will be provided as a separate API. - -**Parameters:** - -| Name | Type | Required | Description | -| ------- | -------- | -------- | -------------------------------------------------------------------------------------------------- | -| uri | string | Yes | The location of the image. | -| success | function | Yes | The function that will be called if the image was sucessfully found and widthand height retrieved. | -| failure | function | Yes | The function that will be called if there was an error, such as failing toto retrieve the image. | - ---- - -### `prefetch()` - -```jsx -static prefetch(url: string): -``` - -Prefetches a remote image for later use by downloading it to the disk cache - -**Parameters:** - -| Name | Type | Required | Description | -| ---- | ------ | -------- | --------------------------------- | -| url | string | Yes | The remote location of the image. | diff --git a/website/versioned_docs/version-0.34/keyboardavoidingview.md b/website/versioned_docs/version-0.34/keyboardavoidingview.md deleted file mode 100644 index 09ea4632a21..00000000000 --- a/website/versioned_docs/version-0.34/keyboardavoidingview.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -id: version-0.34-keyboardavoidingview -title: KeyboardAvoidingView -original_id: keyboardavoidingview ---- - -It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its position or bottom padding based on the position of the keyboard. - -### Props - -- [View props...](view.md#props) - -* [`behavior`](keyboardavoidingview.md#behavior) -* [`contentContainerStyle`](keyboardavoidingview.md#contentcontainerstyle) -* [`keyboardVerticalOffset`](keyboardavoidingview.md#keyboardverticaloffset) - -### Methods - -- [`relativeKeyboardHeight`](keyboardavoidingview.md#relativekeyboardheight) -- [`onKeyboardChange`](keyboardavoidingview.md#onkeyboardchange) -- [`onLayout`](keyboardavoidingview.md#onlayout) - ---- - -# Reference - -## Props - -### `behavior` - -| Type | Required | -| -------------------------------------------------- | -------- | -| PropTypes.oneOf(['height', 'position', 'padding']) | No | - ---- - -### `contentContainerStyle` - -The style of the content container(View) when behavior is 'position'. - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `keyboardVerticalOffset` - -This is the distance between the top of the user screen and the react native view, may be non-zero in some use cases. - -| Type | Required | -| --------------------------- | -------- | -| PropTypes.number.isRequired | No | - -## Methods - -### `relativeKeyboardHeight()` - -```jsx -relativeKeyboardHeight(keyboardFrame: object): -``` - ---- - -### `onKeyboardChange()` - -```jsx -onKeyboardChange((event: object)); -``` - ---- - -### `onLayout()` - -```jsx -onLayout((event: object)); -``` diff --git a/website/versioned_docs/version-0.34/layout-props.md b/website/versioned_docs/version-0.34/layout-props.md deleted file mode 100644 index 702981dd5f3..00000000000 --- a/website/versioned_docs/version-0.34/layout-props.md +++ /dev/null @@ -1,512 +0,0 @@ ---- -id: version-0.34-layout-props -title: Layout Props -original_id: layout-props ---- - -### Props - -- [`marginLeft`](layout-props.md#marginleft) -- [`alignItems`](layout-props.md#alignitems) -- [`borderBottomWidth`](layout-props.md#borderbottomwidth) -- [`borderLeftWidth`](layout-props.md#borderleftwidth) -- [`borderRightWidth`](layout-props.md#borderrightwidth) -- [`borderTopWidth`](layout-props.md#bordertopwidth) -- [`borderWidth`](layout-props.md#borderwidth) -- [`bottom`](layout-props.md#bottom) -- [`flex`](layout-props.md#flex) -- [`flexBasis`](layout-props.md#flexbasis) -- [`flexDirection`](layout-props.md#flexdirection) -- [`flexGrow`](layout-props.md#flexgrow) -- [`flexShrink`](layout-props.md#flexshrink) -- [`flexWrap`](layout-props.md#flexwrap) -- [`height`](layout-props.md#height) -- [`justifyContent`](layout-props.md#justifycontent) -- [`left`](layout-props.md#left) -- [`margin`](layout-props.md#margin) -- [`marginBottom`](layout-props.md#marginbottom) -- [`marginHorizontal`](layout-props.md#marginhorizontal) -- [`alignSelf`](layout-props.md#alignself) -- [`marginRight`](layout-props.md#marginright) -- [`marginTop`](layout-props.md#margintop) -- [`marginVertical`](layout-props.md#marginvertical) -- [`maxHeight`](layout-props.md#maxheight) -- [`maxWidth`](layout-props.md#maxwidth) -- [`minHeight`](layout-props.md#minheight) -- [`minWidth`](layout-props.md#minwidth) -- [`padding`](layout-props.md#padding) -- [`paddingBottom`](layout-props.md#paddingbottom) -- [`paddingHorizontal`](layout-props.md#paddinghorizontal) -- [`paddingLeft`](layout-props.md#paddingleft) -- [`paddingRight`](layout-props.md#paddingright) -- [`paddingTop`](layout-props.md#paddingtop) -- [`paddingVertical`](layout-props.md#paddingvertical) -- [`position`](layout-props.md#position) -- [`right`](layout-props.md#right) -- [`top`](layout-props.md#top) -- [`width`](layout-props.md#width) -- [`zIndex`](layout-props.md#zindex) - ---- - -# Reference - -## Props - -### `marginLeft` - -`marginLeft` works like `margin-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `alignItems` - -`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items for more details. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'flex-start', 'flex-end', 'center', 'stretch' ]) | No | - ---- - -### `borderBottomWidth` - -`borderBottomWidth` works like `border-bottom-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderLeftWidth` - -`borderLeftWidth` works like `border-left-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderRightWidth` - -`borderRightWidth` works like `border-right-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderTopWidth` - -`borderTopWidth` works like `border-top-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderWidth` - -`borderWidth` works like `border-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `bottom` - -`bottom` is the number of logical pixels to offset the bottom edge of this component. - -It works similarly to `bottom` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of how `top` affects layout. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `flex` - -In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the `css-layout` library at https://github.com/facebook/css-layout. - -When `flex` is a positive number, it makes the component flexible and it will be sized proportional to its flex value. So a component with `flex` set to 2 will take twice the space as a component with `flex` set to 1. - -When `flex` is 0, the component is sized according to `width` and `height` and it is inflexible. - -When `flex` is -1, the component is normally sized according `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`. - -flexGrow, flexShrink, and flexBasis work the same as in CSS. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `flexBasis` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `flexDirection` - -`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`. See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction for more details. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'row', 'row-reverse', 'column', 'column-reverse' ]) | No | - ---- - -### `flexGrow` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `flexShrink` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `flexWrap` - -`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap). See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap for more details. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'wrap', 'nowrap' ]) | No | - ---- - -### `height` - -`height` sets the height of this component. - -It works similarly to `height` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `justifyContent` - -`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start). See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content for more details. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'flex-start', 'flex-end', 'center', 'space-between', 'space-around' ]) | No | - ---- - -### `left` - -`left` is the number of logical pixels to offset the left edge of this component. - -It works similarly to `left` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of how `left` affects layout. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `margin` - -Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `marginBottom` - -`marginBottom` works like `margin-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `marginHorizontal` - -Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `alignSelf` - -`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-self for more details. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'auto', 'flex-start', 'flex-end', 'center', 'stretch' ]) | No | - ---- - -### `marginRight` - -`marginRight` works like `margin-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `marginTop` - -`marginTop` works like `margin-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `marginVertical` - -Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `maxHeight` - -`maxHeight` is the maximum height for this component, in logical pixels. - -It works similarly to `max-height` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `maxWidth` - -`maxWidth` is the maximum width for this component, in logical pixels. - -It works similarly to `max-width` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `minHeight` - -`minHeight` is the minimum height for this component, in logical pixels. - -It works similarly to `min-height` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `minWidth` - -`minWidth` is the minimum width for this component, in logical pixels. - -It works similarly to `min-width` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `padding` - -Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingBottom` - -`paddingBottom` works like `padding-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingHorizontal` - -Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRight`. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingLeft` - -`paddingLeft` works like `padding-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingRight` - -`paddingRight` works like `padding-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingTop` - -`paddingTop` works like `padding-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingVertical` - -Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBottom`. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `position` - -`position` in React Native is similar to regular CSS, but everything is set to `relative` by default, so `absolute` positioning is always relative to the parent. - -If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have `absolute` position. - -If you want to position a child relative to something that is not its parent, don't use styles for that. Use the component tree. - -See https://github.com/facebook/css-layout for more details on how `position` differs between React Native and CSS. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'absolute', 'relative' ]) | No | - ---- - -### `right` - -`right` is the number of logical pixels to offset the right edge of this component. - -It works similarly to `right` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of how `right` affects layout. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `top` - -`top` is the number of logical pixels to offset the top edge of this component. - -It works similarly to `top` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how `top` affects layout. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `width` - -`width` sets the width of this component. - -It works similarly to `width` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `zIndex` - -`zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior. - -It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for more details. - -On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | diff --git a/website/versioned_docs/version-0.34/modal.md b/website/versioned_docs/version-0.34/modal.md deleted file mode 100644 index 0458a3e05f2..00000000000 --- a/website/versioned_docs/version-0.34/modal.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -id: version-0.34-modal -title: Modal -original_id: modal ---- - -The Modal component is a basic way to present content above an enclosing view. - -_Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator. Go [here](navigator-comparison.md) to compare navigation options._ - -```jsx -import React, { Component } from 'react'; -import { - Modal, - Text, - TouchableHighlight, - View -} from 'react-native'; - -class ModalExample extends Component { - constructor(props) { - super(props); - this.state = { modalVisible: false }; - } - - setModalVisible(visible) { - this.setState({ modalVisible: visible }); - } - - render() { - return ( - - { - alert('Modal has been closed.'); - }}> - - - Hello World! - - { - this.setModalVisible(!this.state.modalVisible); - }}> - Hide Modal - - - - - - { - this.setModalVisible(true); - }}> - Show Modal - - - ); - } -} -``` - -### Props - -- [`animationType`](modal.md#animationtype) -- [`onRequestClose`](modal.md#onrequestclose) -- [`onShow`](modal.md#onshow) -- [`transparent`](modal.md#transparent) -- [`visible`](modal.md#visible) -- [`onOrientationChange`](modal.md#onorientationchange) -- [`supportedOrientations`](modal.md#supportedorientations) -- [`animated`](modal.md#animated) - ---- - -# Reference - -## Props - -### `animationType` - -The `animationType` prop controls how the modal animates. - -- `slide` slides in from the bottom -- `fade` fades into view -- `none` appears without an animation - -| Type | Required | -| ------------------------------------------ | -------- | -| PropTypes.oneOf(['none', 'slide', 'fade']) | No | - ---- - -### `onRequestClose` - -The `onRequestClose` prop allows passing a function that will be called once the modal has been dismissed. - -_On the Android platform, this is a required function._ - -| Type | Required | -| ---------------------------------------------------------------------- | -------- | -| Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func | No | - ---- - -### `onShow` - -The `onShow` prop allows passing a function that will be called once the modal has been shown. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `transparent` - -The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `visible` - -The `visible` prop determines whether your modal is visible. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `onOrientationChange` - -The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed. The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.func | No | iOS | - ---- - -### `supportedOrientations` - -The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations. On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field. - -| Type | Required | Platform | -| -------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -| PropTypes.arrayOf(PropTypes.oneOf(['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right'])) | No | iOS | - ---- - -### `animated` - -**Deprecated.** Use the `animationType` prop instead. - -| Type | Required | -| ---- | -------- | -| bool | No | diff --git a/website/versioned_docs/version-0.34/navigatorios.md b/website/versioned_docs/version-0.34/navigatorios.md deleted file mode 100644 index 23c4b021297..00000000000 --- a/website/versioned_docs/version-0.34/navigatorios.md +++ /dev/null @@ -1,433 +0,0 @@ ---- -id: version-0.34-navigatorios -title: NavigatorIOS -original_id: navigatorios ---- - -`NavigatorIOS` is a wrapper around [`UINavigationController`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/), enabling you to implement a navigation stack. It works exactly the same as it would on a native app using `UINavigationController`, providing the same animations and behavior from UIKIt. - -As the name implies, it is only available on iOS. Take a look at [`Navigator`](navigator.md) for a similar solution for your cross-platform needs, or check out [react-native-navigation](https://github.com/wix/react-native-navigation), a component that aims to provide native navigation on both Android and iOS. - -To set up the navigator, provide the `initialRoute` prop with a route object. A route object is used to describe each scene that your app navigates to. `initialRoute` represents the first route in your navigator. - -``` -import React, { Component, PropTypes } from 'react'; -import { NavigatorIOS, Text } from 'react-native'; - -export default class NavigatorIOSApp extends Component { - render() { - return ( - - ); - } -} - -class MyScene extends Component { - static propTypes = { - title: PropTypes.string.isRequired, - navigator: PropTypes.object.isRequired, - } - - constructor(props, context) { - super(props, context); - this._onForward = this._onForward.bind(this); - this._onBack = this._onBack.bind(this); - } - - _onForward() { - this.props.navigator.push({ - title: 'Scene ' + nextIndex, - }); - } - - render() { - return ( - - Current Scene: { this.props.title } - - Tap me to load the next scene - - - ) - } -} -``` - -In this code, the navigator renders the component specified in initialRoute, which in this case is `MyScene`. This component will receive a `route` prop and a `navigator` prop representing the navigator. The navigator's navigation bar will render the title for the current scene, "My Initial Scene". - -You can optionally pass in a `passProps` property to your `initialRoute`. `NavigatorIOS` passes this in as props to the rendered component: - -``` -initialRoute={{ - component: MyScene, - title: 'My Initial Scene', - passProps: { myProp: 'foo' } -}} -``` - -You can then access the props passed in via `{this.props.myProp}`. - -#### Handling Navigation - -To trigger navigation functionality such as pushing or popping a view, you have access to a `navigator` object. The object is passed in as a prop to any component that is rendered by `NavigatorIOS`. You can then call the relevant methods to perform the navigation action you need: - -``` -class MyView extends Component { - _handleBackPress() { - this.props.navigator.pop(); - } - - _handleNextPress(nextRoute) { - this.props.navigator.push(nextRoute); - } - - render() { - const nextRoute = { - component: MyView, - title: 'Bar That', - passProps: { myProp: 'bar' } - }; - return( - this._handleNextPress(nextRoute)}> - - See you on the other nav {this.props.myProp}! - - - ); - } -} -``` - -You can also trigger navigator functionality from the `NavigatorIOS` component: - -``` -class NavvyIOS extends Component { - _handleNavigationRequest() { - this.refs.nav.push({ - component: MyView, - title: 'Genius', - passProps: { myProp: 'genius' }, - }); - } - - render() { - return ( - this._handleNavigationRequest(), - }} - style={{flex: 1}} - /> - ); - } -} -``` - -The code above adds a `_handleNavigationRequest` private method that is invoked from the `NavigatorIOS` component when the right navigation bar item is pressed. To get access to the navigator functionality, a reference to it is saved in the `ref` prop and later referenced to push a new scene into the navigation stack. - -#### Navigation Bar Configuration - -Props passed to `NavigatorIOS` will set the default configuration for the navigation bar. Props passed as properties to a route object will set the configuration for that route's navigation bar, overriding any props passed to the `NavigatorIOS` component. - -``` -_handleNavigationRequest() { - this.refs.nav.push({ - //... - passProps: { myProp: 'genius' }, - barTintColor: '#996699', - }); -} - -render() { - return ( - - ); -} -``` - -In the example above the navigation bar color is changed when the new route is pushed. - -### Props - -- [`initialRoute`](navigatorios.md#initialroute) -- [`barTintColor`](navigatorios.md#bartintcolor) -- [`interactivePopGestureEnabled`](navigatorios.md#interactivepopgestureenabled) -- [`itemWrapperStyle`](navigatorios.md#itemwrapperstyle) -- [`navigationBarHidden`](navigatorios.md#navigationbarhidden) -- [`shadowHidden`](navigatorios.md#shadowhidden) -- [`tintColor`](navigatorios.md#tintcolor) -- [`titleTextColor`](navigatorios.md#titletextcolor) -- [`translucent`](navigatorios.md#translucent) - -### Methods - -- [`push`](navigatorios.md#push) -- [`popN`](navigatorios.md#popn) -- [`pop`](navigatorios.md#pop) -- [`replaceAtIndex`](navigatorios.md#replaceatindex) -- [`replace`](navigatorios.md#replace) -- [`replacePrevious`](navigatorios.md#replaceprevious) -- [`popToTop`](navigatorios.md#poptotop) -- [`popToRoute`](navigatorios.md#poptoroute) -- [`replacePreviousAndPop`](navigatorios.md#replacepreviousandpop) -- [`resetTo`](navigatorios.md#resetto) - ---- - -# Reference - -## Props - -### `initialRoute` - -NavigatorIOS uses `route` objects to identify child views, their props, and navigation bar configuration. Navigation operations such as push operations expect routes to look like this the `initialRoute`. - -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | -| object: {component: function,title: string,titleImage: Image.propTypes.source,passProps: object,backButtonIcon: Image.propTypes.source,backButtonTitle: string,leftButtonIcon: Image.propTypes.source,leftButtonTitle: string,leftButtonSystemIcon: Object.keys(SystemIcons),onLeftButtonPress: function,rightButtonIcon: Image.propTypes.source,rightButtonTitle: string,rightButtonSystemIcon: Object.keys(SystemIcons),onRightButtonPress: function,wrapperStyle: [View](view.md#style),navigationBarHidden: bool,shadowHidden: bool,tintColor: string,barTintColor: string,titleTextColor: string,translucent: bool} | Yes | - ---- - -### `barTintColor` - -The default background color of the navigation bar. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `interactivePopGestureEnabled` - -Boolean value that indicates whether the interactive `pop` gesture is enabled. This is useful for enabling/disabling the back swipe navigation gesture. - -If this prop is not provided, the default behavior is for the back swipe gesture to be enabled when the navigation bar is shown and disabled when the navigation bar is hidden. Once you've provided the `interactivePopGestureEnabled` prop, you can never restore the default behavior. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `itemWrapperStyle` - -The default wrapper style for components in the navigator. A common use case is to set the `backgroundColor` for every scene. - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `navigationBarHidden` - -Boolean value that indicates whether the navigation bar is hidden by default. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `shadowHidden` - -Boolean value that indicates whether to hide the 1px hairline shadow by default. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `tintColor` - -The default color used for the buttons in the navigation bar. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `titleTextColor` - -The default text color of the navigation bar title. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `translucent` - -Boolean value that indicates whether the navigation bar is translucent by default - -| Type | Required | -| ---- | -------- | -| bool | No | - -## Methods - -### `push()` - -```jsx -push((route: object)); -``` - -Navigate forward to a new route. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ----------------------------- | -| route | object | Yes | The new route to navigate to. | - ---- - -### `popN()` - -```jsx -popN((n: number)); -``` - -Go back N scenes at once. When N=1, behavior matches `pop()`. - -**Parameters:** - -| Name | Type | Required | Description | -| ---- | ------ | -------- | ---------------------------- | -| n | number | Yes | The number of scenes to pop. | - ---- - -### `pop()` - -```jsx -pop(); -``` - -`Pop` back to the previous scene. - ---- - -### `replaceAtIndex()` - -```jsx -replaceAtIndex((route: object), (index: number)); -``` - -Replace a route in the navigation stack. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ---------------------------------------------------------------------------------------------------------- | -| route | object | Yes | The new route that will replace the specified one. | -| index | number | Yes | The route into the stack that should be replaced. If it is negative, it counts from the back of the stack. | - ---- - -### `replace()` - -```jsx -replace((route: object)); -``` - -Replace the route for the current scene and immediately load the view for the new route. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ----------------------------- | -| route | object | Yes | The new route to navigate to. | - ---- - -### `replacePrevious()` - -```jsx -replacePrevious((route: object)); -``` - -Replace the route/view for the previous scene. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ------------------------------------------------- | -| route | object | Yes | The new route to will replace the previous scene. | - ---- - -### `popToTop()` - -```jsx -popToTop(); -``` - -Go back to the topmost item in the navigation stack. - ---- - -### `popToRoute()` - -```jsx -popToRoute((route: object)); -``` - -Go back to the item for a particular route object. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ----------------------------- | -| route | object | Yes | The new route to navigate to. | - ---- - -### `replacePreviousAndPop()` - -```jsx -replacePreviousAndPop((route: object)); -``` - -Replaces the previous route/view and transitions back to it. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ----------------------------------------------- | -| route | object | Yes | The new route that replaces the previous scene. | - ---- - -### `resetTo()` - -```jsx -resetTo((route: object)); -``` - -Replaces the top item and `pop` to it. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ------------------------------------------------- | -| route | object | Yes | The new route that will replace the topmost item. | diff --git a/website/versioned_docs/version-0.34/pushnotificationios.md b/website/versioned_docs/version-0.34/pushnotificationios.md deleted file mode 100644 index dd8ef294e71..00000000000 --- a/website/versioned_docs/version-0.34/pushnotificationios.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: version-0.34-pushnotificationios -title: PushNotificationIOS -original_id: pushnotificationios ---- - -Handle push notifications for your app, including permission handling and icon badge number. - -To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). - -[Manually link](linking-libraries-ios.md#manual-linking) the PushNotificationIOS library - -- Add the following to your Project: `node_modules/react-native/Libraries/PushNotificationIOS/RCTPushNotification.xcodeproj` -- Add the following to `Link Binary With Libraries`: `libRCTPushNotification.a` -- Add the following to your `Header Search Paths`: `$(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS` and set the search to `recursive` - -Finally, to enable support for `notification` and `register` events you need to augment your AppDelegate. - -At the top of your `AppDelegate.m`: - -`#import "RCTPushNotificationManager.h"` - -And then in your AppDelegate implementation add the following: - -``` - // Required to register for notifications - - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings - { - [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings]; - } - // Required for the register event. - - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken - { - [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; - } - // Required for the registrationError event. - - (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error - { - [RCTPushNotificationManager didFailToRegisterForRemoteNotificationsWithError:error]; - } - // Required for the notification event. - - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification - { - [RCTPushNotificationManager didReceiveRemoteNotification:notification]; - } - // Required for the localNotification event. - - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification - { - [RCTPushNotificationManager didReceiveLocalNotification:notification]; - } -``` - -### Methods - -- [`presentLocalNotification`](pushnotificationios.md#presentlocalnotification) -- [`scheduleLocalNotification`](pushnotificationios.md#schedulelocalnotification) -- [`cancelAllLocalNotifications`](pushnotificationios.md#cancelalllocalnotifications) -- [`setApplicationIconBadgeNumber`](pushnotificationios.md#setapplicationiconbadgenumber) -- [`getApplicationIconBadgeNumber`](pushnotificationios.md#getapplicationiconbadgenumber) -- [`cancelLocalNotifications`](pushnotificationios.md#cancellocalnotifications) -- [`getScheduledLocalNotifications`](pushnotificationios.md#getscheduledlocalnotifications) -- [`addEventListener`](pushnotificationios.md#addeventlistener) -- [`removeEventListener`](pushnotificationios.md#removeeventlistener) -- [`requestPermissions`](pushnotificationios.md#requestpermissions) -- [`abandonPermissions`](pushnotificationios.md#abandonpermissions) -- [`checkPermissions`](pushnotificationios.md#checkpermissions) -- [`getInitialNotification`](pushnotificationios.md#getinitialnotification) -- [`constructor`](pushnotificationios.md#constructor) -- [`getMessage`](pushnotificationios.md#getmessage) -- [`getSound`](pushnotificationios.md#getsound) -- [`getAlert`](pushnotificationios.md#getalert) -- [`getBadgeCount`](pushnotificationios.md#getbadgecount) -- [`getData`](pushnotificationios.md#getdata) - ---- - -# Reference - -## Methods - -### `presentLocalNotification()` - -```jsx -static presentLocalNotification(details) -``` - -Schedules the localNotification for immediate presentation. - -details is an object containing: - -- `alertBody` : The message displayed in the notification alert. -- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; -- `soundName` : The sound played when the notification is fired (optional). -- `category` : The category of this notification, required for actionable notifications (optional). -- `userInfo` : An optional object containing additional notification data. -- `applicationIconBadgeNumber` (optional) : The number to display as the app's icon badge. The default value of this property is 0, which means that no badge is displayed. - ---- - -### `scheduleLocalNotification()` - -```jsx -static scheduleLocalNotification(details) -``` - -Schedules the localNotification for future presentation. - -details is an object containing: - -- `fireDate` : The date and time when the system should deliver the notification. -- `alertBody` : The message displayed in the notification alert. -- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; -- `soundName` : The sound played when the notification is fired (optional). -- `category` : The category of this notification, required for actionable notifications (optional). -- `userInfo` : An optional object containing additional notification data. -- `applicationIconBadgeNumber` (optional) : The number to display as the app's icon badge. Setting the number to 0 removes the icon badge. - ---- - -### `cancelAllLocalNotifications()` - -```jsx -static cancelAllLocalNotifications() -``` - -Cancels all scheduled localNotifications - ---- - -### `setApplicationIconBadgeNumber()` - -```jsx -static setApplicationIconBadgeNumber(number) -``` - -Sets the badge number for the app icon on the home screen - ---- - -### `getApplicationIconBadgeNumber()` - -```jsx -static getApplicationIconBadgeNumber(callback) -``` - -Gets the current badge number for the app icon on the home screen - ---- - -### `cancelLocalNotifications()` - -```jsx -static cancelLocalNotifications(userInfo) -``` - -Cancel local notifications. - -Optionally restricts the set of canceled notifications to those notifications whose `userInfo` fields match the corresponding fields in the `userInfo` argument. - ---- - -### `getScheduledLocalNotifications()` - -```jsx -static getScheduledLocalNotifications(callback) -``` - -Gets the local notifications that are currently scheduled. - ---- - -### `addEventListener()` - -```jsx -static addEventListener(type, handler) -``` - -Attaches a listener to remote or local notification events while the app is running in the foreground or the background. - -Valid events are: - -- `notification` : Fired when a remote notification is received. The handler will be invoked with an instance of `PushNotificationIOS`. -- `localNotification` : Fired when a local notification is received. The handler will be invoked with an instance of `PushNotificationIOS`. -- `register`: Fired when the user registers for remote notifications. The handler will be invoked with a hex string representing the deviceToken. -- `registrationError`: Fired when the user fails to register for remote notifications. Typically occurs when APNS is having issues, or the device is a simulator. The handler will be invoked with {message: string, code: number, details: any}. - ---- - -### `removeEventListener()` - -```jsx -static removeEventListener(type, handler) -``` - -Removes the event listener. Do this in `componentWillUnmount` to prevent memory leaks - ---- - -### `requestPermissions()` - -```jsx -static requestPermissions(permissions?) -``` - -Requests notification permissions from iOS, prompting the user's dialog box. By default, it will request all notification permissions, but a subset of these can be requested by passing a map of requested permissions. The following permissions are supported: - -- `alert` -- `badge` -- `sound` - -If a map is provided to the method, only the permissions with truthy values will be requested. - -This method returns a promise that will resolve when the user accepts, rejects, or if the permissions were previously rejected. The promise resolves to the current state of the permission. - ---- - -### `abandonPermissions()` - -```jsx -static abandonPermissions() -``` - -Unregister for all remote notifications received via Apple Push Notification service. - -You should call this method in rare circumstances only, such as when a new version of the app removes support for all types of remote notifications. Users can temporarily prevent apps from receiving remote notifications through the Notifications section of the Settings app. Apps unregistered through this method can always re-register. - ---- - -### `checkPermissions()` - -```jsx -static checkPermissions(callback) -``` - -See what push permissions are currently enabled. `callback` will be invoked with a `permissions` object: - -- `alert` :boolean -- `badge` :boolean -- `sound` :boolean - ---- - -### `getInitialNotification()` - -```jsx -static getInitialNotification() -``` - -This method returns a promise that resolves to either the notification object if the app was launched by a push notification, or `null` otherwise. - ---- - -### `constructor()` - -```jsx -constructor(nativeNotif); -``` - -You will never need to instantiate `PushNotificationIOS` yourself. Listening to the `notification` event and invoking `getInitialNotification` is sufficient - ---- - -### `getMessage()` - -```jsx -getMessage(); -``` - -An alias for `getAlert` to get the notification's main message string - ---- - -### `getSound()` - -```jsx -getSound(); -``` - -Gets the sound string from the `aps` object - ---- - -### `getAlert()` - -```jsx -getAlert(); -``` - -Gets the notification's main message from the `aps` object - ---- - -### `getBadgeCount()` - -```jsx -getBadgeCount(); -``` - -Gets the badge count number from the `aps` object - ---- - -### `getData()` - -```jsx -getData(); -``` - -Gets the data object on the notif diff --git a/website/versioned_docs/version-0.34/switch.md b/website/versioned_docs/version-0.34/switch.md deleted file mode 100644 index a086cc30788..00000000000 --- a/website/versioned_docs/version-0.34/switch.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: version-0.34-switch -title: Switch -original_id: switch ---- - -Renders a boolean input. - -This is a controlled component that requires an `onValueChange` callback that updates the `value` prop in order for the component to reflect user actions. If the `value` prop is not updated, the component will continue to render the supplied `value` prop instead of the expected result of any user actions. - -@keyword checkbox @keyword toggle - -### Props - -- [View props...](view.md#props) - -* [`disabled`](switch.md#disabled) -* [`onValueChange`](switch.md#onvaluechange) -* [`testID`](switch.md#testid) -* [`value`](switch.md#value) -* [`onTintColor`](switch.md#ontintcolor) -* [`thumbTintColor`](switch.md#thumbtintcolor) -* [`tintColor`](switch.md#tintcolor) - ---- - -# Reference - -## Props - -### `disabled` - -If true the user won't be able to toggle the switch. Default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onValueChange` - -Invoked with the new value when the value changes. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `value` - -The value of the switch. If true the switch will be turned on. Default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onTintColor` - -Background color when the switch is turned on. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | - ---- - -### `thumbTintColor` - -Color of the foreground switch grip. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | - ---- - -### `tintColor` - -Border color when the switch is turned off. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | diff --git a/website/versioned_docs/version-0.34/text-style-props.md b/website/versioned_docs/version-0.34/text-style-props.md deleted file mode 100644 index 956eabd7b23..00000000000 --- a/website/versioned_docs/version-0.34/text-style-props.md +++ /dev/null @@ -1,185 +0,0 @@ ---- -id: version-0.34-text-style-props -title: Text Style Props -original_id: text-style-props ---- - -### Props - -- [`textShadowColor`](text-style-props.md#textshadowcolor) -- [`color`](text-style-props.md#color) -- [`fontSize`](text-style-props.md#fontsize) -- [`fontStyle`](text-style-props.md#fontstyle) -- [`fontWeight`](text-style-props.md#fontweight) -- [`lineHeight`](text-style-props.md#lineheight) -- [`textAlign`](text-style-props.md#textalign) -- [`textDecorationLine`](text-style-props.md#textdecorationline) -- [`fontFamily`](text-style-props.md#fontfamily) -- [`textShadowOffset`](text-style-props.md#textshadowoffset) -- [`textShadowRadius`](text-style-props.md#textshadowradius) -- [`textAlignVertical`](text-style-props.md#textalignvertical) -- [`fontVariant`](text-style-props.md#fontvariant) -- [`letterSpacing`](text-style-props.md#letterspacing) -- [`textDecorationColor`](text-style-props.md#textdecorationcolor) -- [`textDecorationStyle`](text-style-props.md#textdecorationstyle) -- [`writingDirection`](text-style-props.md#writingdirection) - ---- - -# Reference - -## Props - -### `textShadowColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `color` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `fontSize` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `fontStyle` - -| Type | Required | -| ------------------------------------------ | -------- | -| ReactPropTypes.oneOf(['normal', 'italic']) | No | - ---- - -### `fontWeight` - -Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf( ['normal' /*default*/, 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'] ) | No | - ---- - -### `lineHeight` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `textAlign` - -Specifies text alignment. The value 'justify' is only supported on iOS and fallbacks to `left` on Android. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf( ['auto' /*default*/, 'left', 'right', 'center', 'justify'] ) | No | - ---- - -### `textDecorationLine` - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf( ['none' /*default*/, 'underline', 'line-through', 'underline line-through'] ) | No | - ---- - -### `fontFamily` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.string | No | - ---- - -### `textShadowOffset` - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.shape( {width: ReactPropTypes.number, height: ReactPropTypes.number} ) | No | - ---- - -### `textShadowRadius` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `textAlignVertical` - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| ReactPropTypes.oneOf( ['auto' /*default*/, 'top', 'bottom', 'center'] ) | No | Android | - ---- - -### `fontVariant` - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| ReactPropTypes.arrayOf( ReactPropTypes.oneOf([ 'small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums', ]) ) | No | iOS | - ---- - -### `letterSpacing` - -| Type | Required | Platform | -| --------------------- | -------- | -------- | -| ReactPropTypes.number | No | iOS | - ---- - -### `textDecorationColor` - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | - ---- - -### `textDecorationStyle` - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| ReactPropTypes.oneOf( ['solid' /*default*/, 'double', 'dotted','dashed'] ) | No | iOS | - ---- - -### `writingDirection` - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| ReactPropTypes.oneOf( ['auto' /*default*/, 'ltr', 'rtl'] ) | No | iOS | diff --git a/website/versioned_docs/version-0.34/text.md b/website/versioned_docs/version-0.34/text.md deleted file mode 100644 index 92602d86e5c..00000000000 --- a/website/versioned_docs/version-0.34/text.md +++ /dev/null @@ -1,264 +0,0 @@ ---- -id: version-0.34-text -title: Text -original_id: text ---- - -A React component for displaying text. - -`Text` supports nesting, styling, and touch handling. - -In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines: - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, Text, StyleSheet } from 'react-native'; - -class TextInANest extends Component { - constructor(props) { - super(props); - this.state = { - titleText: "Bird's Nest", - bodyText: 'This is not really a bird nest.' - }; - } - - render() { - return ( - - - {this.state.titleText}

- - - {this.state.bodyText} - - - ); - } -} - -const styles = StyleSheet.create({ - baseText: { - fontFamily: 'Cochin', - }, - titleText: { - fontSize: 20, - fontWeight: 'bold', - }, -}); - -// App registration and rendering -AppRegistry.registerComponent('TextInANest', () => TextInANest); -``` - -### Props - -- [`style`](text.md#style) -- [`accessible`](text.md#accessible) -- [`numberOfLines`](text.md#numberoflines) -- [`onLayout`](text.md#onlayout) -- [`onLongPress`](text.md#onlongpress) -- [`onPress`](text.md#onpress) -- [`ellipsizeMode`](text.md#ellipsizemode) -- [`testID`](text.md#testid) -- [`selectable`](text.md#selectable) -- [`adjustsFontSizeToFit`](text.md#adjustsfontsizetofit) -- [`allowFontScaling`](text.md#allowfontscaling) -- [`minimumFontScale`](text.md#minimumfontscale) -- [`suppressHighlighting`](text.md#suppresshighlighting) - ---- - -# Reference - -## Props - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [View Style Props...](view-style-props.md#style) - -- **`textShadowColor`**: [color](colors.md) - -- **`color`**: [color](colors.md) - -- **`fontSize`**: ReactPropTypes.number - -- **`fontStyle`**: ReactPropTypes.oneOf(['normal', 'italic']) - -- **`fontWeight`**: ReactPropTypes.oneOf( ['normal' /*default*/, 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'] ) - - Specifies font weight. The values 'normal' and 'bold' are supported for - most fonts. Not all fonts have a variant for each of the numeric values, - in that case the closest one is chosen. - -- **`lineHeight`**: ReactPropTypes.number - -- **`textAlign`**: ReactPropTypes.oneOf( ['auto' /*default*/, 'left', 'right', 'center', 'justify'] ) - - Specifies text alignment. The value 'justify' is only supported on iOS and - fallbacks to `left` on Android. - -- **`textDecorationLine`**: ReactPropTypes.oneOf( ['none' /*default*/, 'underline', 'line-through', 'underline line-through'] ) - -- **`fontFamily`**: ReactPropTypes.string - -- **`textShadowOffset`**: ReactPropTypes.shape( {width: ReactPropTypes.number, height: ReactPropTypes.number} ) - -- **`textShadowRadius`**: ReactPropTypes.number - -- **`textAlignVertical`**: ReactPropTypes.oneOf( ['auto' /*default*/, 'top', 'bottom', 'center'] ) (_Android_) - -- **`fontVariant`**: ReactPropTypes.arrayOf( ReactPropTypes.oneOf([ 'small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums', ]) ) (_iOS_) - -- **`letterSpacing`**: ReactPropTypes.number (_iOS_) - -- **`textDecorationColor`**: [color](colors.md) (_iOS_) - -- **`textDecorationStyle`**: ReactPropTypes.oneOf( ['solid' /*default*/, 'double', 'dotted','dashed'] ) (_iOS_) - -- **`writingDirection`**: ReactPropTypes.oneOf( ['auto' /*default*/, 'ltr', 'rtl'] ) (_iOS_) - ---- - -### `accessible` - -When set to `true`, indicates that the view is an accessibility element. The default value for a `Text` element is `true`. - -See the [Accessibility guide](accessibility.md#accessible-ios-android) for more information. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `numberOfLines` - -Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. - -This prop is commonly used with `ellipsizeMode`. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with - -`{nativeEvent: {layout: {x, y, width, height}}}` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLongPress` - -This function is called on long press. - -e.g., `onLongPress={this.increaseSize}>`` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPress` - -This function is called on press. - -e.g., `onPress={() => console.log('1st')}`` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `ellipsizeMode` - -This can be one of the following values: - -- `head` - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz" -- `middle` - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. "ab...yz" -- `tail` - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..." -- `clip` - Lines are not drawn past the edge of the text container. - -The default is `tail`. - -`numberOfLines` must be set in conjunction with this prop. - -> `clip` is working only for iOS - -| Type | Required | -| -------------------------------------- | -------- | -| enum('head', 'middle', 'tail', 'clip') | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `selectable` - -Lets the user select text, to use the native copy and paste functionality. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `adjustsFontSizeToFit` - -Specifies whether font should be scaled down automatically to fit given style constraints. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `allowFontScaling` - -Specifies whether fonts should scale to respect Text Size accessibility setting on iOS. The default is `true`. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `minimumFontScale` - -Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0). - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `suppressHighlighting` - -When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | diff --git a/website/versioned_docs/version-0.34/textinput.md b/website/versioned_docs/version-0.34/textinput.md deleted file mode 100644 index 54b8d5ebeb7..00000000000 --- a/website/versioned_docs/version-0.34/textinput.md +++ /dev/null @@ -1,627 +0,0 @@ ---- -id: version-0.34-textinput -title: TextInput -original_id: textinput ---- - -A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. - -The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A basic example: - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, TextInput } from 'react-native'; - -class UselessTextInput extends Component { - constructor(props) { - super(props); - this.state = { text: 'Useless Placeholder' }; - } - - render() { - return ( - this.setState({text})} - value={this.state.text} - /> - ); - } -} - -// App registration and rendering -AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput); -``` - -Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=false`. To achieve the same effect, you can wrap your `TextInput` in a `View`: - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, View, TextInput } from 'react-native'; - -class UselessTextInput extends Component { - render() { - return ( - - ); - } -} - -class UselessTextInputMultiline extends Component { - constructor(props) { - super(props); - this.state = { - text: 'Useless Multiline Placeholder', - }; - } - - // If you type something in the text box that is a color, the background will change to that - // color. - render() { - return ( - - this.setState({text})} - value={this.state.text} - /> - - ); - } -} - -// App registration and rendering -AppRegistry.registerComponent( - 'AwesomeProject', - () => UselessTextInputMultiline -); -``` - -`TextInput` has by default a border at the bottom of its view. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this is to either not set height explicitly, case in which the system will take care of displaying the border in the correct position, or to not display the border by setting `underlineColorAndroid` to transparent. - -### Props - -- [View props...](view.md#props) - -* [`placeholderTextColor`](textinput.md#placeholdertextcolor) -* [`autoCapitalize`](textinput.md#autocapitalize) -* [`autoFocus`](textinput.md#autofocus) -* [`blurOnSubmit`](textinput.md#bluronsubmit) -* [`defaultValue`](textinput.md#defaultvalue) -* [`editable`](textinput.md#editable) -* [`keyboardType`](textinput.md#keyboardtype) -* [`maxLength`](textinput.md#maxlength) -* [`multiline`](textinput.md#multiline) -* [`onBlur`](textinput.md#onblur) -* [`onChange`](textinput.md#onchange) -* [`onChangeText`](textinput.md#onchangetext) -* [`onContentSizeChange`](textinput.md#oncontentsizechange) -* [`onEndEditing`](textinput.md#onendediting) -* [`onFocus`](textinput.md#onfocus) -* [`onLayout`](textinput.md#onlayout) -* [`onSelectionChange`](textinput.md#onselectionchange) -* [`onSubmitEditing`](textinput.md#onsubmitediting) -* [`placeholder`](textinput.md#placeholder) -* [`autoCorrect`](textinput.md#autocorrect) -* [`returnKeyType`](textinput.md#returnkeytype) -* [`secureTextEntry`](textinput.md#securetextentry) -* [`selectTextOnFocus`](textinput.md#selecttextonfocus) -* [`selection`](textinput.md#selection) -* [`selectionColor`](textinput.md#selectioncolor) -* [`style`](textinput.md#style) -* [`value`](textinput.md#value) -* [`inlineImageLeft`](textinput.md#inlineimageleft) -* [`inlineImagePadding`](textinput.md#inlineimagepadding) -* [`numberOfLines`](textinput.md#numberoflines) -* [`returnKeyLabel`](textinput.md#returnkeylabel) -* [`underlineColorAndroid`](textinput.md#underlinecolorandroid) -* [`clearButtonMode`](textinput.md#clearbuttonmode) -* [`clearTextOnFocus`](textinput.md#cleartextonfocus) -* [`dataDetectorTypes`](textinput.md#datadetectortypes) -* [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) -* [`keyboardAppearance`](textinput.md#keyboardappearance) -* [`onKeyPress`](textinput.md#onkeypress) -* [`selectionState`](textinput.md#selectionstate) - -### Methods - -- [`isFocused`](textinput.md#isfocused) -- [`clear`](textinput.md#clear) - ---- - -# Reference - -## Props - -### `placeholderTextColor` - -The text color of the placeholder string. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `autoCapitalize` - -Can tell `TextInput` to automatically capitalize certain characters. - -- `characters`: all characters. -- `words`: first letter of each word. -- `sentences`: first letter of each sentence (_default_). -- `none`: don't auto capitalize anything. - -| Type | Required | -| ---- | -------- | - - -| PropTypes.oneOf([ 'none', 'sentences', 'words', 'characters', ]) | No | - ---- - -### `autoFocus` - -If `true`, focuses the input on `componentDidMount`. The default value is `false`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `blurOnSubmit` - -If `true`, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting `blurOnSubmit` to `true` means that pressing return will blur the field and trigger the `onSubmitEditing` event instead of inserting a newline into the field. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `defaultValue` - -Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.string | No | - ---- - -### `editable` - -If `false`, text is not editable. The default value is `true`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `keyboardType` - -Determines which keyboard to open, e.g.`numeric`. - -The following values work across platforms: - -- `default` -- `numeric` -- `email-address` -- `phone-pad` - -| Type | Required | -| ---- | -------- | - - -| PropTypes.oneOf([ // Cross-platform 'default', 'email-address', 'numeric', 'phone-pad', // iOS-only 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', ]) | No | - ---- - -### `maxLength` - -Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.number | No | - ---- - -### `multiline` - -If `true`, the text input can be multiple lines. The default value is `false`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `onBlur` - -Callback that is called when the text input is blurred. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onChange` - -Callback that is called when the text input's text changes. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onChangeText` - -Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onContentSizeChange` - -Callback that is called when the text input's content size changes. This will be called with `{ nativeEvent: { contentSize: { width, height } } }`. - -Only called for multiline text inputs. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onEndEditing` - -Callback that is called when text input ends. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onFocus` - -Callback that is called when the text input is focused. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{x, y, width, height}`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onSelectionChange` - -Callback that is called when the text input selection is changed. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onSubmitEditing` - -Callback that is called when the text input's submit button is pressed. Invalid if `multiline={true}` is specified. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `placeholder` - -The string that will be rendered before text input has been entered. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.string | No | - ---- - -### `autoCorrect` - -If `false`, disables auto-correct. The default value is `true`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `returnKeyType` - -Determines how the return key should look. On Android you can also use `returnKeyLabel`. - -_Cross platform_ - -The following values work across platforms: - -- `done` -- `go` -- `next` -- `search` -- `send` - -_Android Only_ - -The following values work on Android only: - -- `none` -- `previous` - -_iOS Only_ - -The following values work on iOS only: - -- `default` -- `emergency-call` -- `google` -- `join` -- `route` -- `yahoo` - -| Type | Required | -| ---- | -------- | - - -| PropTypes.oneOf([ // Cross-platform 'done', 'go', 'next', 'search', 'send', // Android-only 'none', 'previous', // iOS-only 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo', ]) | No | - ---- - -### `secureTextEntry` - -If `true`, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is `false`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `selectTextOnFocus` - -If `true`, all text will automatically be selected on focus. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `selection` - -The start and end of the text input's selection. Set start and end to the same value to position the cursor. - -| Type | Required | -| ---- | -------- | - - -| PropTypes.shape({ start: PropTypes.number.isRequired, end: PropTypes.number, }) | No | - ---- - -### `selectionColor` - -The highlight (and cursor on iOS) color of the text input. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `style` - -[Styles](style.md) - -| Type | Required | -| --------------------- | -------- | -| [Text](text.md#style) | No | - ---- - -### `value` - -The value to show for the text input. `TextInput` is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.string | No | - ---- - -### `inlineImageLeft` - -If defined, the provided image resource will be rendered on the left. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.string | No | Android | - ---- - -### `inlineImagePadding` - -Padding between the inline image, if any, and the text input itself. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.number | No | Android | - ---- - -### `numberOfLines` - -Sets the number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.number | No | Android | - ---- - -### `returnKeyLabel` - -Sets the return key to the label. Use it instead of `returnKeyType`. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.string | No | Android | - ---- - -### `underlineColorAndroid` - -The color of the `TextInput` underline. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `clearButtonMode` - -When the clear button should appear on the right side of the text view. - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| PropTypes.oneOf([ 'never', 'while-editing', 'unless-editing', 'always', ]) | No | iOS | - ---- - -### `clearTextOnFocus` - -If `true`, clears the text field automatically when editing begins. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.bool | No | iOS | - ---- - -### `dataDetectorTypes` - -Determines the types of data converted to clickable URLs in the text input. Only valid if `multiline={true}` and `editable={false}`. By default no data types are detected. - -You can provide one type or an array of many types. - -Possible values for `dataDetectorTypes` are: - -- `'phoneNumber'` -- `'link'` -- `'address'` -- `'calendarEvent'` -- `'none'` -- `'all'` - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| PropTypes.oneOfType([ PropTypes.oneOf(DataDetectorTypes), PropTypes.arrayOf(PropTypes.oneOf(DataDetectorTypes)), ]) | No | iOS | - ---- - -### `enablesReturnKeyAutomatically` - -If `true`, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is `false`. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.bool | No | iOS | - ---- - -### `keyboardAppearance` - -Determines the color of the keyboard. - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| PropTypes.oneOf([ 'default', 'light', 'dark', ]) | No | iOS | - ---- - -### `onKeyPress` - -Callback that is called when a key is pressed. Pressed key value is passed as an argument to the callback handler. Fires before `onChange` callbacks. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.func | No | iOS | - ---- - -### `selectionState` - -An instance of `DocumentSelectionState`, this is some state that is responsible for maintaining selection information for a document. - -Some functionality that can be performed with this instance is: - -- `blur()` -- `focus()` -- `update()` - -> You can reference `DocumentSelectionState` in [`vendor/document/selection/DocumentSelectionState.js`](https://github.com/facebook/react-native/blob/master/Libraries/vendor/document/selection/DocumentSelectionState.js) - -| Type | Required | Platform | -| -------------------------------------------- | -------- | -------- | -| PropTypes.instanceOf(DocumentSelectionState) | No | iOS | - -## Methods - -### `isFocused()` - -```jsx -isFocused(): -``` - -Returns `true` if the input is currently focused; `false` otherwise. - ---- - -### `clear()` - -```jsx -clear(); -``` - -Removes all text from the `TextInput`. diff --git a/website/versioned_docs/version-0.34/vibration.md b/website/versioned_docs/version-0.34/vibration.md deleted file mode 100644 index 5acda32f778..00000000000 --- a/website/versioned_docs/version-0.34/vibration.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -id: version-0.34-vibration -title: Vibration -original_id: vibration ---- - -### Methods - -- [`vibrate`](vibration.md#vibrate) -- [`cancel`](vibration.md#cancel) - ---- - -# Reference - -## Methods - -### `vibrate()` - -```jsx -static vibrate(pattern, repeat) -``` - ---- - -### `cancel()` - -```jsx -static cancel() -``` - -Stop vibration diff --git a/website/versioned_docs/version-0.35/geolocation.md b/website/versioned_docs/version-0.35/geolocation.md deleted file mode 100644 index d1041cd5bc2..00000000000 --- a/website/versioned_docs/version-0.35/geolocation.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -id: version-0.35-geolocation -title: Geolocation -original_id: geolocation ---- - -The Geolocation API extends the web spec: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation - -As a browser polyfill, this API is available through the `navigator.geolocation` global - you do not need to `import` it. - -### iOS - -You need to include the `NSLocationWhenInUseUsageDescription` key in Info.plist to enable geolocation. Geolocation is enabled by default when you create a project with `react-native init`. - -### Android - -To request access to location, you need to add the following line to your app's `AndroidManifest.xml`: - -`` - -Android API >= 18 Positions will also contain a `mocked` boolean to indicate if position was created from a mock provider. - -### Methods - -- [`getCurrentPosition`](geolocation.md#getcurrentposition) -- [`watchPosition`](geolocation.md#watchposition) -- [`clearWatch`](geolocation.md#clearwatch) -- [`stopObserving`](geolocation.md#stopobserving) - ---- - -# Reference - -## Methods - -### `getCurrentPosition()` - -```jsx -static getCurrentPosition(geo_success, geo_error?, geo_options?) -``` - -Invokes the success callback once with the latest location info. Supported options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool) On Android, this can return almost immediately if the location is cached or request an update, which might take a while. - ---- - -### `watchPosition()` - -```jsx -static watchPosition(success, error?, options?) -``` - -Invokes the success callback whenever the location changes. Supported options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool), distanceFilter(m) - ---- - -### `clearWatch()` - -```jsx -static clearWatch(watchID) -``` - ---- - -### `stopObserving()` - -```jsx -static stopObserving() -``` - -Stops observing for device location changes. In addition, it removes all listeners previously registered. - -Notice that this method has only effect if the `geolocation.watchPosition(successCallback, errorCallback)` method was previously invoked. diff --git a/website/versioned_docs/version-0.35/image.md b/website/versioned_docs/version-0.35/image.md deleted file mode 100644 index ded5db979e9..00000000000 --- a/website/versioned_docs/version-0.35/image.md +++ /dev/null @@ -1,405 +0,0 @@ ---- -id: version-0.35-image -title: Image -original_id: image ---- - -A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. - -This example shows both fetching and displaying an image from local storage as well as on from network. - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, View, Image } from 'react-native'; - -class DisplayAnImage extends Component { - render() { - return ( - - - - - ); - } -} - -// App registration and rendering -AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage); -``` - -You can also add `style` to an image: - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, View, Image, StyleSheet} from 'react-native'; - -const styles = StyleSheet.create({ - stretch: { - width: 50, - height: 200 - } -}); - -class DisplayAnImageWithStyle extends Component { - render() { - return ( - - - - ); - } -} - -// App registration and rendering -AppRegistry.registerComponent( - 'DisplayAnImageWithStyle', - () => DisplayAnImageWithStyle -); -``` - -### GIF and WebP support on Android - -By default, GIF and WebP are not supported on Android. - -You will need to add some optional modules in `android/app/build.gradle`, depending on the needs of your app. - -``` -dependencies { - // If your app supports Android versions before Ice Cream Sandwich (API level 14) - compile 'com.facebook.fresco:animated-base-support:0.11.0' - - // For animated GIF support - compile 'com.facebook.fresco:animated-gif:0.11.0' - - // For WebP support, including animated WebP - compile 'com.facebook.fresco:animated-webp:0.11.0' - compile 'com.facebook.fresco:webpsupport:0.11.0' - - // For WebP support, without animations - compile 'com.facebook.fresco:webpsupport:0.11.0' -} -``` - -Also, if you use GIF with ProGuard, you will need to add this rule in `proguard-rules.pro` : - -``` --keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl { - public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier); -} -``` - -### Props - -- [`resizeMethod`](image.md#resizemethod) -- [`onLayout`](image.md#onlayout) -- [`onLoadEnd`](image.md#onloadend) -- [`onLoadStart`](image.md#onloadstart) -- [`resizeMode`](image.md#resizemode) -- [`source`](image.md#source) -- [`style`](image.md#style) -- [`testID`](image.md#testid) -- [`onLoad`](image.md#onload) -- [`accessibilityLabel`](image.md#accessibilitylabel) -- [`accessible`](image.md#accessible) -- [`blurRadius`](image.md#blurradius) -- [`capInsets`](image.md#capinsets) -- [`defaultSource`](image.md#defaultsource) -- [`onError`](image.md#onerror) -- [`onPartialLoad`](image.md#onpartialload) -- [`onProgress`](image.md#onprogress) - -### Methods - -- [`getSize`](image.md#getsize) -- [`prefetch`](image.md#prefetch) - ---- - -# Reference - -## Props - -### `resizeMethod` - -The mechanism that should be used to resize the image when the image's dimensions differ from the image view's dimensions. Defaults to `auto`. - -- `auto`: Use heuristics to pick between `resize` and `scale`. - -- `resize`: A software operation which changes the encoded image in memory before it gets decoded. This should be used instead of `scale` when the image is much larger than the view. - -- `scale`: The image gets drawn downscaled or upscaled. Compared to `resize`, `scale` is faster (usually hardware accelerated) and produces higher quality images. This should be used if the image is smaller than the view. It should also be used if the image is slightly bigger than the view. - -More details about `resize` and `scale` can be found at http://frescolib.org/resizing-rotating.md. - -| Type | Required | Platform | -| -------------------------------------------- | -------- | -------- | -| PropTypes.oneOf(['auto', 'resize', 'scale']) | No | Android | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{nativeEvent: {layout: {x, y, width, height}}}`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onLoadEnd` - -Invoked when load either succeeds or fails. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onLoadStart` - -Invoked on load start. - -e.g., `onLoadStart={(e) => this.setState({loading: true})}` - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `resizeMode` - -Determines how to resize the image when the frame doesn't match the raw image dimensions. - -- `cover`: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding). - -- `contain`: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). - -- `stretch`: Scale width and height independently, This may change the aspect ratio of the src. - -- `repeat`: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio. (iOS only) - -| Type | Required | -| -------------------------------------------------------------------- | -------- | -| PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']) | No | - ---- - -### `source` - -The image source (either a remote URL or a local file resource). - -This prop can also contain several remote URLs, specified together with their width and height and potentially with scale/other URI arguments. The native side will then choose the best `uri` to display based on the measured size of the image container. - -| Type | Required | -| ------------------- | -------- | -| ImageSourcePropType | No | - ---- - -### `style` - -> `ImageResizeMode` is an `Enum` for different image resizing modes, set via the `resizeMode` style property on `Image` components. The values are `contain`, `cover`, `stretch`, `center`, `repeat`. - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Shadow Props...](shadow-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderTopRightRadius`**: ReactPropTypes.number - -- **`backfaceVisibility`**: ReactPropTypes.oneOf(['visible', 'hidden']) - -- **`borderBottomLeftRadius`**: ReactPropTypes.number - -- **`borderBottomRightRadius`**: ReactPropTypes.number - -- **`borderColor`**: [color](colors.md) - -- **`borderRadius`**: ReactPropTypes.number - -- **`borderTopLeftRadius`**: ReactPropTypes.number - -- **`backgroundColor`**: [color](colors.md) - -- **`borderWidth`**: ReactPropTypes.number - -- **`opacity`**: ReactPropTypes.number - -- **`overflow`**: ReactPropTypes.oneOf(['visible', 'hidden']) - -- **`resizeMode`**: ReactPropTypes.oneOf(Object.keys(ImageResizeMode)) - -- **`tintColor`**: [color](colors.md) - - Changes the color of all the non-transparent pixels to the tintColor. - -- **`overlayColor`**: ReactPropTypes.string (_Android_) - - When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners: - - - Certain resize modes, such as 'contain' - - Animated GIFs - - A typical way to use this prop is with images displayed on a solid background and setting the `overlayColor` to the same color as the background. - - For details of how this works under the hood, see http://frescolib.org/rounded-corners-and-circles.md - ---- - -### `testID` - -A unique identifier for this element to be used in UI Automation testing scripts. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.string | No | - ---- - -### `onLoad` - -Invoked when load completes successfully. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `accessibilityLabel` - -The text that's read by the screen reader when the user interacts with the image. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.string | No | iOS | - ---- - -### `accessible` - -When true, indicates the image is an accessibility element. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.bool | No | iOS | - ---- - -### `blurRadius` - -blurRadius: the blur radius of the blur filter added to the image - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.number | No | iOS | - ---- - -### `capInsets` - -When the image is resized, the corners of the size specified by `capInsets` will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info in the [official Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets). - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `defaultSource` - -A static image to display while loading the image source. - -- `uri` - a string representing the resource identifier for the image, which should be either a local file path or the name of a static image resource (which should be wrapped in the `require('./path/to/image.png')` function). -- `width`, `height` - can be specified if known at build time, in which case these will be used to set the default `` component dimensions. -- `scale` - used to indicate the scale factor of the image. Defaults to 1.0 if unspecified, meaning that one image pixel equates to one display point / DIP. -- `number` - Opaque type returned by something like `require('./image.jpg')`. - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| PropTypes.oneOfType([ // TODO: Tooling to support documenting these directly and having them display in the docs. PropTypes.shape({ uri: PropTypes.string, width: PropTypes.number, height: PropTypes.number, scale: PropTypes.number, }), PropTypes.number, ]) | No | iOS | - ---- - -### `onError` - -Invoked on load error with `{nativeEvent: {error}}`. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.func | No | iOS | - ---- - -### `onPartialLoad` - -Invoked when a partial load of the image is complete. The definition of what constitutes a "partial load" is loader specific though this is meant for progressive JPEG loads. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.func | No | iOS | - ---- - -### `onProgress` - -Invoked on download progress with `{nativeEvent: {loaded, total}}`. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.func | No | iOS | - -## Methods - -### `getSize()` - -```jsx -static getSize(uri: string, success: function, failure: function): -``` - -Retrieve the width and height (in pixels) of an image prior to displaying it. This method can fail if the image cannot be found, or fails to download. - -In order to retrieve the image dimensions, the image may first need to be loaded or downloaded, after which it will be cached. This means that in principle you could use this method to preload images, however it is not optimized for that purpose, and may in future be implemented in a way that does not fully load/download the image data. A proper, supported way to preload images will be provided as a separate API. - -**Parameters:** - -| Name | Type | Required | Description | -| ------- | -------- | -------- | -------------------------------------------------------------------------------------------------- | -| uri | string | Yes | The location of the image. | -| success | function | Yes | The function that will be called if the image was sucessfully found and widthand height retrieved. | -| failure | function | Yes | The function that will be called if there was an error, such as failing toto retrieve the image. | - ---- - -### `prefetch()` - -```jsx -static prefetch(url: string): -``` - -Prefetches a remote image for later use by downloading it to the disk cache - -**Parameters:** - -| Name | Type | Required | Description | -| ---- | ------ | -------- | --------------------------------- | -| url | string | Yes | The remote location of the image. | diff --git a/website/versioned_docs/version-0.35/permissionsandroid.md b/website/versioned_docs/version-0.35/permissionsandroid.md deleted file mode 100644 index 22ba3e27064..00000000000 --- a/website/versioned_docs/version-0.35/permissionsandroid.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -id: version-0.35-permissionsandroid -title: PermissionsAndroid -original_id: permissionsandroid ---- - -`PermissionsAndroid` provides access to Android M's new permissions model. Some permissions are granted by default when the application is installed so long as they appear in `AndroidManifest.xml`. However, "dangerous" permissions require a dialog prompt. You should use this module for those permissions. - -On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so `checkPermission` and `requestPermission` should always be true. - -If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional `rationale` argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear. - -### Example - -``` -async function requestCameraPermission() { - try { - const granted = await PermissionsAndroid.requestPermission( - PermissionsAndroid.PERMISSIONS.CAMERA, - { - 'title': 'Cool Photo App Camera Permission', - 'message': 'Cool Photo App needs access to your camera ' + - 'so you can take awesome pictures.' - } - ) - if (granted) { - console.log("You can use the camera") - } else { - console.log("Camera permission denied") - } - } catch (err) { - console.warn(err) - } -} -``` - -### Methods - -- [`constructor`](permissionsandroid.md#constructor) -- [`checkPermission`](permissionsandroid.md#checkpermission) -- [`requestPermission`](permissionsandroid.md#requestpermission) - ---- - -# Reference - -## Methods - -### `constructor()` - -```jsx -constructor(); -``` - ---- - -### `checkPermission()` - -```jsx -checkPermission(permission); -``` - -Returns a promise resolving to a boolean value as to whether the specified permissions has been granted - ---- - -### `requestPermission()` - -```jsx -requestPermission(permission, rationale?) -``` - -Prompts the user to enable a permission and returns a promise resolving to a boolean value indicating whether the user allowed or denied the request - -If the optional rationale argument is included (which is an object with a `title` and `message`), this function checks with the OS whether it is necessary to show a dialog explaining why the permission is needed (https://developer.android.com/training/permissions/requesting.html#explain) and then shows the system permission dialog diff --git a/website/versioned_docs/version-0.35/toastandroid.md b/website/versioned_docs/version-0.35/toastandroid.md deleted file mode 100644 index 71f7ce6e1b9..00000000000 --- a/website/versioned_docs/version-0.35/toastandroid.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: version-0.35-toastandroid -title: ToastAndroid -original_id: toastandroid ---- - -This exposes the native ToastAndroid module as a JS module. This has a function 'show' which takes the following parameters: - -1. String message: A string with the text to toast -2. int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG - -There is also a function `showWithGravity` to specify the layout gravity. May be ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER. - -Basic usage: - -```jsx -ToastAndroid.show( - 'A pikachu appeared nearby !', - ToastAndroid.SHORT -); -ToastAndroid.showWithGravity( - 'All Your Base Are Belong To Us', - ToastAndroid.SHORT, - ToastAndroid.CENTER -); -``` - -### Methods - -- [`show`](toastandroid.md#show) -- [`showWithGravity`](toastandroid.md#showwithgravity) - -### Properties - -- [`SHORT`](toastandroid.md#short) -- [`LONG`](toastandroid.md#long) -- [`TOP`](toastandroid.md#top) -- [`BOTTOM`](toastandroid.md#bottom) -- [`CENTER`](toastandroid.md#center) - ---- - -# Reference - -## Methods - -### `show()` - -```jsx -static show(message, duration) -``` - ---- - -### `showWithGravity()` - -```jsx -static showWithGravity(message, duration, gravity) -``` - -## Properties - ---- - ---- - ---- - ---- diff --git a/website/versioned_docs/version-0.36/animated.md b/website/versioned_docs/version-0.36/animated.md deleted file mode 100644 index 04ea071800b..00000000000 --- a/website/versioned_docs/version-0.36/animated.md +++ /dev/null @@ -1,505 +0,0 @@ ---- -id: version-0.36-animated -title: Animated -original_id: animated ---- - -Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and painless to build and maintain. - -The most basic workflow is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates either via animations, such as `Animated.timing`, or by hooking into gestures like panning or scrolling via `Animated.event`. `Animated.Value` can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted: - -```jsx -class FadeInView extends React.Component { - constructor(props) { - super(props); - this.state = { - fadeAnim: new Animated.Value(0) // init opacity 0 - }; - } - componentDidMount() { - Animated.timing( - // Uses easing functions - this.state.fadeAnim, // The value to drive - { toValue: 1 } // Configuration - ).start(); // Don't forget start! - } - render() { - return ( - - {' '} - // Binds - {this.props.children} - - ); - } -} -``` - -Note that only animatable components can be animated. `View`, `Text`, and `Image` are already provided, and you can create custom ones with `createAnimatedComponent`. These unique components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default. - -Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation. - -A single `Animated.Value` can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value. - -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` in the example above like so: - -```jsx - style={{ - opacity: this.state.fadeAnim, // Binds directly - transform: [{ - translateY: this.state.fadeAnim.interpolate({ - inputRange: [0, 1], - outputRange: [150, 0] // 0 : 150, 0.5 : 75, 1 : 0 - }), - }], - }}> -``` - -Animations can also be combined in complex ways using composition functions such as `sequence` and `parallel`, and can also be chained together by setting the `toValue` of one animation to be another `Animated.Value`. - -`Animated.ValueXY` is handy for 2D animations, like panning, and there are other helpful additions like `setOffset` and `getLayout` to aid with typical interaction patterns, like drag-and-drop. - -You can see more example usage in `AnimationExample.js`, the Gratuitous Animation App, and [Animations documentation guide](animations.md). - -Note that `Animated` is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout `Animated.Value.addListener` as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future. - -### Methods - -- [`decay`](animated.md#decay) -- [`timing`](animated.md#timing) -- [`spring`](animated.md#spring) -- [`add`](animated.md#add) -- [`divide`](animated.md#divide) -- [`multiply`](animated.md#multiply) -- [`modulo`](animated.md#modulo) -- [`diffClamp`](animated.md#diffclamp) -- [`delay`](animated.md#delay) -- [`sequence`](animated.md#sequence) -- [`parallel`](animated.md#parallel) -- [`stagger`](animated.md#stagger) -- [`event`](animated.md#event) -- [`createAnimatedComponent`](animated.md#createanimatedcomponent) - -### Properties - -- [`Value`](animated.md#value) -- [`ValueXY`](animated.md#valuexy) - -### Classes - -- [`AnimatedValue`](animated.md#animatedvalue) -- [`AnimatedValueXY`](animated.md#animatedvaluexy) -- [`AnimatedProps`](animated.md#animatedprops) - ---- - -# Reference - -## Methods - -### `decay()` - -```jsx -static decay(value, config) -``` - -Animates a value from an initial velocity to zero based on a decay coefficient. - ---- - -### `timing()` - -```jsx -static timing(value, config) -``` - -Animates a value along a timed easing curve. The `Easing` module has tons of pre-defined curves, or you can use your own function. - ---- - -### `spring()` - -```jsx -static spring(value, config) -``` - -Spring animation based on Rebound and Origami. Tracks velocity state to create fluid motions as the `toValue` updates, and can be chained together. - ---- - -### `add()` - -```jsx -static add(a, b) -``` - -Creates a new Animated value composed from two Animated values added together. - ---- - -### `divide()` - -```jsx -static divide(a, b) -``` - -Creates a new Animated value composed by dividing the first Animated value by the second Animated value. - ---- - -### `multiply()` - -```jsx -static multiply(a, b) -``` - -Creates a new Animated value composed from two Animated values multiplied together. - ---- - -### `modulo()` - -```jsx -static modulo(a, modulus) -``` - -Creates a new Animated value that is the (non-negative) modulo of the provided Animated value - ---- - -### `diffClamp()` - -```jsx -static diffClamp(a, min, max) -``` - -Create a new Animated value that is limited between 2 values. It uses the difference between the last value so even if the value is far from the bounds it will start changing when the value starts getting closer again. (`value = clamp(value + diff, min, max)`). - -This is useful with scroll events, for example, to show the navbar when scrolling up and to hide it when scrolling down. - ---- - -### `delay()` - -```jsx -static delay(time) -``` - -Starts an animation after the given delay. - ---- - -### `sequence()` - -```jsx -static sequence(animations) -``` - -Starts an array of animations in order, waiting for each to complete before starting the next. If the current running animation is stopped, no following animations will be started. - ---- - -### `parallel()` - -```jsx -static parallel(animations, config?) -``` - -Starts an array of animations all at the same time. By default, if one of the animations is stopped, they will all be stopped. You can override this with the `stopTogether` flag. - ---- - -### `stagger()` - -```jsx -static stagger(time, animations) -``` - -Array of animations may run in parallel (overlap), but are started in sequence with successive delays. Nice for doing trailing effects. - ---- - -### `event()` - -```jsx -static event(argMapping, config?) -``` - -Takes an array of mappings and extracts values from each arg accordingly, then calls `setValue` on the mapped outputs. e.g. - -```jsx - onScroll={Animated.event( - [{nativeEvent: {contentOffset: {x: this._scrollX}}}] - {listener}, // Optional async listener - ) - ... - onPanResponderMove: Animated.event([ - null, // raw event arg ignored - {dx: this._panX}, // gestureState arg - ]), -``` - ---- - -### `createAnimatedComponent()` - -```jsx -static createAnimatedComponent(Component) -``` - -Make any React component Animatable. Used to create `Animated.View`, etc. - -## Properties - ---- - -## Classes - -## class AnimatedValue - -Standard value for driving animations. One `Animated.Value` can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling `setValue`) will stop any previous ones. - -### Methods - -### `constructor()` - -```jsx -constructor(value); -``` - ---- - -### `setValue()` - -```jsx -setValue(value); -``` - -Directly set the value. This will stop any animations running on the value and update all the bound properties. - ---- - -### `setOffset()` - -```jsx -setOffset(offset); -``` - -Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture. - ---- - -### `flattenOffset()` - -```jsx -flattenOffset(); -``` - -Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged. - ---- - -### `addListener()` - -```jsx -addListener(callback); -``` - -Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively. - ---- - -### `removeListener()` - -```jsx -removeListener(id); -``` - ---- - -### `removeAllListeners()` - -```jsx -removeAllListeners(); -``` - ---- - -### `stopAnimation()` - -```jsx -stopAnimation(callback?) -``` - -Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout. - ---- - -### `interpolate()` - -```jsx -interpolate(config); -``` - -Interpolates the value before updating the property, e.g. mapping 0-1 to 0-10. - ---- - -### `animate()` - -```jsx -animate(animation, callback); -``` - -Typically only used internally, but could be used by a custom Animation class. - ---- - -### `stopTracking()` - -```jsx -stopTracking(); -``` - -Typically only used internally. - ---- - -### `track()` - -```jsx -track(tracking); -``` - -Typically only used internally. - ---- - -## class AnimatedValueXY - -2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal `Animated.Value`, but multiplexed. Contains two regular `Animated.Value`s under the hood. Example: - -```jsx -class DraggableView extends React.Component { - constructor(props) { - super(props); - this.state = { - pan: new Animated.ValueXY() // inits to zero - }; - this.state.panResponder = PanResponder.create({ - onStartShouldSetPanResponder: () => true, - onPanResponderMove: Animated.event([ - null, - { - dx: this.state.pan.x, // x,y are Animated.Value - dy: this.state.pan.y - } - ]), - onPanResponderRelease: () => { - Animated.spring( - this.state.pan, // Auto-multiplexed - { toValue: { x: 0, y: 0 } } // Back to zero - ).start(); - } - }); - } - render() { - return ( - - {this.props.children} - - ); - } -} -``` - -### Methods - -### `constructor()` - -```jsx -constructor(valueIn?) -``` - ---- - -### `setValue()` - -```jsx -setValue(value); -``` - ---- - -### `setOffset()` - -```jsx -setOffset(offset); -``` - ---- - -### `flattenOffset()` - -```jsx -flattenOffset(); -``` - ---- - -### `stopAnimation()` - -```jsx -stopAnimation(callback?) -``` - ---- - -### `addListener()` - -```jsx -addListener(callback); -``` - ---- - -### `removeListener()` - -```jsx -removeListener(id); -``` - ---- - -### `getLayout()` - -```jsx -getLayout(); -``` - -Converts `{x, y}` into `{left, top}` for use in style, e.g. - -```jsx - style={this.state.anim.getLayout()} -``` - ---- - -### `getTranslateTransform()` - -```jsx -getTranslateTransform(); -``` - -Converts `{x, y}` into a useable translation transform, e.g. - -```jsx - style={{ - transform: this.state.anim.getTranslateTransform() - }} -``` diff --git a/website/versioned_docs/version-0.36/keyboard.md b/website/versioned_docs/version-0.36/keyboard.md deleted file mode 100644 index 09d24d318f6..00000000000 --- a/website/versioned_docs/version-0.36/keyboard.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: version-0.36-keyboard -title: Keyboard -original_id: keyboard ---- - -`Keyboard` module to control keyboard events. - -### Usage - -The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it. - -``` -import React, { Component } from 'react'; -import { Keyboard, TextInput } from 'react-native'; - -class Example extends Component { - componentWillMount () { - this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow); - this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide); - } - - componentWillUnmount () { - this.keyboardDidShowListener.remove(); - this.keyboardDidHideListener.remove(); - } - - _keyboardDidShow () { - alert('Keyboard Shown'); - } - - _keyboardDidHide () { - alert('Keyboard Hidden'); - } - - render() { - return ( - - ); - } -} -``` - -### Methods - -- [`addListener`](keyboard.md#addlistener) -- [`removeListener`](keyboard.md#removelistener) -- [`removeAllListeners`](keyboard.md#removealllisteners) -- [`dismiss`](keyboard.md#dismiss) - ---- - -# Reference - -## Methods - -### `addListener()` - -```jsx -static addListener(eventName, callback) -``` - -The `addListener` function connects a JavaScript function to an identified native keyboard notification event. - -This function then returns the reference to the listener. - -@param {string} eventName The `nativeEvent` is the string that identifies the event you're listening for. This can be any of the following: - -- `keyboardWillShow` -- `keyboardDidShow` -- `keyboardWillHide` -- `keyboardDidHide` -- `keyboardWillChangeFrame` -- `keyboardDidChangeFrame` - -@param {function} callback function to be called when the event fires. - ---- - -### `removeListener()` - -```jsx -static removeListener(eventName, callback) -``` - -Removes a specific listener. - -@param {string} eventName The `nativeEvent` is the string that identifies the event you're listening for. @param {function} callback function to be called when the event fires. - ---- - -### `removeAllListeners()` - -```jsx -static removeAllListeners(eventName) -``` - -Removes all listeners for a specific event type. - -@param {string} eventType The native event string listeners are watching which will be removed. - ---- - -### `dismiss()` - -```jsx -static dismiss() -``` - -Dismisses the active keyboard and removes focus. diff --git a/website/versioned_docs/version-0.36/layout-props.md b/website/versioned_docs/version-0.36/layout-props.md deleted file mode 100644 index 20da7e16fb9..00000000000 --- a/website/versioned_docs/version-0.36/layout-props.md +++ /dev/null @@ -1,525 +0,0 @@ ---- -id: version-0.36-layout-props -title: Layout Props -original_id: layout-props ---- - -### Props - -- [`marginLeft`](layout-props.md#marginleft) -- [`alignItems`](layout-props.md#alignitems) -- [`borderBottomWidth`](layout-props.md#borderbottomwidth) -- [`borderLeftWidth`](layout-props.md#borderleftwidth) -- [`borderRightWidth`](layout-props.md#borderrightwidth) -- [`borderTopWidth`](layout-props.md#bordertopwidth) -- [`borderWidth`](layout-props.md#borderwidth) -- [`bottom`](layout-props.md#bottom) -- [`flex`](layout-props.md#flex) -- [`flexBasis`](layout-props.md#flexbasis) -- [`flexDirection`](layout-props.md#flexdirection) -- [`flexGrow`](layout-props.md#flexgrow) -- [`flexShrink`](layout-props.md#flexshrink) -- [`flexWrap`](layout-props.md#flexwrap) -- [`height`](layout-props.md#height) -- [`justifyContent`](layout-props.md#justifycontent) -- [`left`](layout-props.md#left) -- [`margin`](layout-props.md#margin) -- [`marginBottom`](layout-props.md#marginbottom) -- [`marginHorizontal`](layout-props.md#marginhorizontal) -- [`alignSelf`](layout-props.md#alignself) -- [`marginRight`](layout-props.md#marginright) -- [`marginTop`](layout-props.md#margintop) -- [`marginVertical`](layout-props.md#marginvertical) -- [`maxHeight`](layout-props.md#maxheight) -- [`maxWidth`](layout-props.md#maxwidth) -- [`minHeight`](layout-props.md#minheight) -- [`minWidth`](layout-props.md#minwidth) -- [`overflow`](layout-props.md#overflow) -- [`padding`](layout-props.md#padding) -- [`paddingBottom`](layout-props.md#paddingbottom) -- [`paddingHorizontal`](layout-props.md#paddinghorizontal) -- [`paddingLeft`](layout-props.md#paddingleft) -- [`paddingRight`](layout-props.md#paddingright) -- [`paddingTop`](layout-props.md#paddingtop) -- [`paddingVertical`](layout-props.md#paddingvertical) -- [`position`](layout-props.md#position) -- [`right`](layout-props.md#right) -- [`top`](layout-props.md#top) -- [`width`](layout-props.md#width) -- [`zIndex`](layout-props.md#zindex) - ---- - -# Reference - -## Props - -### `marginLeft` - -`marginLeft` works like `margin-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `alignItems` - -`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items for more details. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'flex-start', 'flex-end', 'center', 'stretch' ]) | No | - ---- - -### `borderBottomWidth` - -`borderBottomWidth` works like `border-bottom-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderLeftWidth` - -`borderLeftWidth` works like `border-left-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderRightWidth` - -`borderRightWidth` works like `border-right-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderTopWidth` - -`borderTopWidth` works like `border-top-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderWidth` - -`borderWidth` works like `border-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `bottom` - -`bottom` is the number of logical pixels to offset the bottom edge of this component. - -It works similarly to `bottom` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of how `bottom` affects layout. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `flex` - -In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the `css-layout` library at https://github.com/facebook/css-layout. - -When `flex` is a positive number, it makes the component flexible and it will be sized proportional to its flex value. So a component with `flex` set to 2 will take twice the space as a component with `flex` set to 1. - -When `flex` is 0, the component is sized according to `width` and `height` and it is inflexible. - -When `flex` is -1, the component is normally sized according `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`. - -flexGrow, flexShrink, and flexBasis work the same as in CSS. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `flexBasis` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `flexDirection` - -`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`. See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction for more details. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'row', 'row-reverse', 'column', 'column-reverse' ]) | No | - ---- - -### `flexGrow` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `flexShrink` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `flexWrap` - -`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap). See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap for more details. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'wrap', 'nowrap' ]) | No | - ---- - -### `height` - -`height` sets the height of this component. - -It works similarly to `height` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `justifyContent` - -`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start). See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content for more details. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'flex-start', 'flex-end', 'center', 'space-between', 'space-around' ]) | No | - ---- - -### `left` - -`left` is the number of logical pixels to offset the left edge of this component. - -It works similarly to `left` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of how `left` affects layout. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `margin` - -Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `marginBottom` - -`marginBottom` works like `margin-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `marginHorizontal` - -Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `alignSelf` - -`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-self for more details. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'auto', 'flex-start', 'flex-end', 'center', 'stretch' ]) | No | - ---- - -### `marginRight` - -`marginRight` works like `margin-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `marginTop` - -`marginTop` works like `margin-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `marginVertical` - -Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `maxHeight` - -`maxHeight` is the maximum height for this component, in logical pixels. - -It works similarly to `max-height` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `maxWidth` - -`maxWidth` is the maximum width for this component, in logical pixels. - -It works similarly to `max-width` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `minHeight` - -`minHeight` is the minimum height for this component, in logical pixels. - -It works similarly to `min-height` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `minWidth` - -`minWidth` is the minimum width for this component, in logical pixels. - -It works similarly to `min-width` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `overflow` - -`overflow` controls how a children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents main axis.`It works like`overflow` in CSS (default: visible). See https://developer.mozilla.org/en/docs/Web/CSS/overflow for more details. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'visible', 'hidden', 'scroll', ]) | No | - ---- - -### `padding` - -Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingBottom` - -`paddingBottom` works like `padding-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingHorizontal` - -Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRight`. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingLeft` - -`paddingLeft` works like `padding-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingRight` - -`paddingRight` works like `padding-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingTop` - -`paddingTop` works like `padding-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `paddingVertical` - -Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBottom`. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `position` - -`position` in React Native is similar to regular CSS, but everything is set to `relative` by default, so `absolute` positioning is always relative to the parent. - -If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have `absolute` position. - -If you want to position a child relative to something that is not its parent, don't use styles for that. Use the component tree. - -See https://github.com/facebook/css-layout for more details on how `position` differs between React Native and CSS. - -| Type | Required | -| ---- | -------- | - - -| ReactPropTypes.oneOf([ 'absolute', 'relative' ]) | No | - ---- - -### `right` - -`right` is the number of logical pixels to offset the right edge of this component. - -It works similarly to `right` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of how `right` affects layout. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `top` - -`top` is the number of logical pixels to offset the top edge of this component. - -It works similarly to `top` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - -See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how `top` affects layout. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `width` - -`width` sets the width of this component. - -It works similarly to `width` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `zIndex` - -`zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior. - -It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for more details. - -On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected. - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | diff --git a/website/versioned_docs/version-0.36/modal.md b/website/versioned_docs/version-0.36/modal.md deleted file mode 100644 index 1f371eb099a..00000000000 --- a/website/versioned_docs/version-0.36/modal.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -id: version-0.36-modal -title: Modal -original_id: modal ---- - -The Modal component is a basic way to present content above an enclosing view. - -_Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator._ - -```jsx -import React, { Component } from 'react'; -import { - Modal, - Text, - TouchableHighlight, - View -} from 'react-native'; - -class ModalExample extends Component { - constructor(props) { - super(props); - this.state = { modalVisible: false }; - } - - setModalVisible(visible) { - this.setState({ modalVisible: visible }); - } - - render() { - return ( - - { - alert('Modal has been closed.'); - }}> - - - Hello World! - - { - this.setModalVisible(!this.state.modalVisible); - }}> - Hide Modal - - - - - - { - this.setModalVisible(true); - }}> - Show Modal - - - ); - } -} -``` - -### Props - -- [`animationType`](modal.md#animationtype) -- [`onRequestClose`](modal.md#onrequestclose) -- [`onShow`](modal.md#onshow) -- [`transparent`](modal.md#transparent) -- [`visible`](modal.md#visible) -- [`onOrientationChange`](modal.md#onorientationchange) -- [`supportedOrientations`](modal.md#supportedorientations) -- [`animated`](modal.md#animated) - ---- - -# Reference - -## Props - -### `animationType` - -The `animationType` prop controls how the modal animates. - -- `slide` slides in from the bottom -- `fade` fades into view -- `none` appears without an animation - -| Type | Required | -| ------------------------------------------ | -------- | -| PropTypes.oneOf(['none', 'slide', 'fade']) | No | - ---- - -### `onRequestClose` - -The `onRequestClose` prop allows passing a function that will be called once the modal has been dismissed. - -_On the Android platform, this is a required function._ - -| Type | Required | -| ---------------------------------------------------------------------- | -------- | -| Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func | No | - ---- - -### `onShow` - -The `onShow` prop allows passing a function that will be called once the modal has been shown. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `transparent` - -The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `visible` - -The `visible` prop determines whether your modal is visible. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `onOrientationChange` - -The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed. The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.func | No | iOS | - ---- - -### `supportedOrientations` - -The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations. On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field. - -| Type | Required | Platform | -| -------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -| PropTypes.arrayOf(PropTypes.oneOf(['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right'])) | No | iOS | - ---- - -### `animated` - -**Deprecated.** Use the `animationType` prop instead. - -| Type | Required | -| ---- | -------- | -| bool | No | diff --git a/website/versioned_docs/version-0.36/scrollview.md b/website/versioned_docs/version-0.36/scrollview.md deleted file mode 100644 index d89071f5f50..00000000000 --- a/website/versioned_docs/version-0.36/scrollview.md +++ /dev/null @@ -1,532 +0,0 @@ ---- -id: version-0.36-scrollview -title: ScrollView -original_id: scrollview ---- - -Component that wraps platform ScrollView while providing integration with touch locking "responder" system. - -Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer `{flex: 1}` down the view stack can lead to errors here, which the element inspector makes quick to debug. - -Doesn't yet support other contained responders from blocking this scroll view from becoming the responder. - -### Props - -- [View props...](view.md#props) - -* [`bounces`](scrollview.md#bounces) -* [`contentContainerStyle`](scrollview.md#contentcontainerstyle) -* [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) -* [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) -* [`onContentSizeChange`](scrollview.md#oncontentsizechange) -* [`onScroll`](scrollview.md#onscroll) -* [`pagingEnabled`](scrollview.md#pagingenabled) -* [`refreshControl`](scrollview.md#refreshcontrol) -* [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) -* [`scrollEnabled`](scrollview.md#scrollenabled) -* [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) -* [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) -* [`style`](scrollview.md#style) -* [`endFillColor`](scrollview.md#endfillcolor) -* [`scrollPerfTag`](scrollview.md#scrollperftag) -* [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) -* [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) -* [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) -* [`horizontal`](scrollview.md#horizontal) -* [`bouncesZoom`](scrollview.md#bounceszoom) -* [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) -* [`centerContent`](scrollview.md#centercontent) -* [`contentInset`](scrollview.md#contentinset) -* [`contentOffset`](scrollview.md#contentoffset) -* [`decelerationRate`](scrollview.md#decelerationrate) -* [`directionalLockEnabled`](scrollview.md#directionallockenabled) -* [`indicatorStyle`](scrollview.md#indicatorstyle) -* [`maximumZoomScale`](scrollview.md#maximumzoomscale) -* [`minimumZoomScale`](scrollview.md#minimumzoomscale) -* [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) -* [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) -* [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) -* [`scrollsToTop`](scrollview.md#scrollstotop) -* [`snapToAlignment`](scrollview.md#snaptoalignment) -* [`snapToInterval`](scrollview.md#snaptointerval) -* [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) -* [`zoomScale`](scrollview.md#zoomscale) - -### Methods - -- [`scrollTo`](scrollview.md#scrollto) -- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) - ---- - -# Reference - -## Props - -### `bounces` - -When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. When false, it disables all bouncing even if the `alwaysBounce*` props are true. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `contentContainerStyle` - -These styles will be applied to the scroll view content container which wraps all of the child views. Example: - -return ( ); ... const styles = StyleSheet.create({ contentContainer: { paddingVertical: 20 } }); - -| Type | Required | -| ------------------------------------ | -------- | -| StyleSheetPropType(View Style props) | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. -- 'interactive', the keyboard is dismissed interactively with the drag and moves in synchrony with the touch; dragging upwards cancels the dismissal. On android this is not supported and it will have the same behavior as 'none'. - -| Type | Required | -| -------------------------------------- | -------- | -| enum('none', 'interactive', 'on-drag') | No | - ---- - -### `keyboardShouldPersistTaps` - -When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the keyboard will not dismiss automatically, and the scroll view will not catch taps, but children of the scroll view can catch taps. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onContentSizeChange` - -Called when scrollable content view of the ScrollView changes. - -Handler function is passed the content width and content height as parameters: `(contentWidth, contentHeight)` - -It's implemented using onLayout handler attached to the content container which this ScrollView renders. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onScroll` - -Fires at most once per frame during scrolling. The frequency of the events can be controlled using the `scrollEventThrottle` prop. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `pagingEnabled` - -When true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `refreshControl` - -A RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView. - -See [RefreshControl](refreshcontrol.md). - -| Type | Required | -| ------- | -------- | -| element | No | - ---- - -### `removeClippedSubviews` - -Experimental: When true, offscreen child views (whose `overflow` value is `hidden`) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `scrollEnabled` - -When false, the content does not scroll. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsHorizontalScrollIndicator` - -When true, shows a horizontal scroll indicator. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsVerticalScrollIndicator` - -When true, shows a vertical scroll indicator. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Shadow Props...](shadow-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderRightColor`**: [color](colors.md) - -- **`backfaceVisibility`**: ReactPropTypes.oneOf(['visible', 'hidden']) - -- **`borderBottomColor`**: [color](colors.md) - -- **`borderBottomLeftRadius`**: ReactPropTypes.number - -- **`borderBottomRightRadius`**: ReactPropTypes.number - -- **`borderBottomWidth`**: ReactPropTypes.number - -- **`borderColor`**: [color](colors.md) - -- **`borderLeftColor`**: [color](colors.md) - -- **`borderLeftWidth`**: ReactPropTypes.number - -- **`borderRadius`**: ReactPropTypes.number - -- **`backgroundColor`**: [color](colors.md) - -- **`borderRightWidth`**: ReactPropTypes.number - -- **`borderStyle`**: ReactPropTypes.oneOf(['solid', 'dotted', 'dashed']) - -- **`borderTopColor`**: [color](colors.md) - -- **`borderTopLeftRadius`**: ReactPropTypes.number - -- **`borderTopRightRadius`**: ReactPropTypes.number - -- **`borderTopWidth`**: ReactPropTypes.number - -- **`borderWidth`**: ReactPropTypes.number - -- **`opacity`**: ReactPropTypes.number - -- **`elevation`**: ReactPropTypes.number (_Android_) - - (Android-only) Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions. - ---- - -### `endFillColor` - -Sometimes a scrollview takes up more space than its content fills. When this is the case, this prop will fill the rest of the scrollview with a color to avoid setting a background and creating unnecessary overdraw. This is an advanced optimization that is not needed in the general case. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `scrollPerfTag` - -Tag used to log scroll performance on this scroll view. Will force momentum events to be turned on (see sendMomentumEvents). This doesn't do anything out of the box and you need to implement a custom native FpsListener for it to be useful. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `alwaysBounceHorizontal` - -When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself. The default value is true when `horizontal={true}` and false otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `alwaysBounceVertical` - -When true, the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself. The default value is false when `horizontal={true}` and true otherwise. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `automaticallyAdjustContentInsets` - -Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/ toolbar. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `horizontal` - -When true, the scroll view's children are arranged horizontally in a row instead of vertically in a column. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `bouncesZoom` - -When true, gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture end, otherwise the zoom will not exceed the limits. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `canCancelContentTouches` - -When false, once tracking starts, won't try to drag if the touch moves. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `centerContent` - -When true, the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `contentInset` - -The amount by which the scroll view content is inset from the edges of the scroll view. Defaults to `{top: 0, left: 0, bottom: 0, right: 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `contentOffset` - -Used to manually set the starting scroll offset. The default value is `{x: 0, y: 0}`. - -| Type | Required | Platform | -| ------------- | -------- | -------- | -| PointPropType | No | iOS | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use string shortcuts `"normal"` and `"fast"` which match the underlying iOS settings for `UIScrollViewDecelerationRateNormal` and `UIScrollViewDecelerationRateFast` respectively. - -- normal: 0.998 (the default) -- fast: 0.99 - -| Type | Required | Platform | -| ------------------------------- | -------- | -------- | -| enum('fast', 'normal'), ,number | No | iOS | - ---- - -### `directionalLockEnabled` - -When true, the ScrollView will try to lock to only vertical or horizontal scrolling while dragging. The default value is false. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `indicatorStyle` - -The style of the scroll indicators. - -- `default` (the default), same as `black`. -- `black`, scroll indicator is `black`. This style is good against a light content background. -- `white`, scroll indicator is `white`. This style is good against a dark content background. - -| Type | Required | Platform | -| --------------------------------- | -------- | -------- | -| enum('default', 'black', 'white') | No | iOS | - ---- - -### `maximumZoomScale` - -The maximum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `minimumZoomScale` - -The minimum allowed zoom scale. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `onScrollAnimationEnd` - -Called when a scrolling animation ends. - -| Type | Required | Platform | -| -------- | -------- | -------- | -| function | No | iOS | - ---- - -### `scrollEventThrottle` - -This controls how often the scroll event will be fired while scrolling (as a time interval in ms). A lower number yields better accuracy for code that is tracking the scroll position, but can lead to scroll performance problems due to the volume of information being send over the bridge. You will not notice a difference between values set between 1-16 as the JS run loop is synced to the screen refresh rate. If you do not need precise scroll position tracking, set this value higher to limit the information being sent across the bridge. The default value is zero, which results in the scroll event being sent only once each time the view is scrolled. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `scrollIndicatorInsets` - -The amount by which the scroll view indicators are inset from the edges of the scroll view. This should normally be set to the same value as the `contentInset`. Defaults to `{0, 0, 0, 0}`. - -| Type | Required | Platform | -| ------------------------------------------------------------------ | -------- | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | iOS | - ---- - -### `scrollsToTop` - -When true, the scroll view scrolls to top when the status bar is tapped. The default value is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `snapToAlignment` - -When `snapToInterval` is set, `snapToAlignment` will define the relationship of the snapping to the scroll view. - -- `start` (the default) will align the snap at the left (horizontal) or top (vertical) -- `center` will align the snap in the center -- `end` will align the snap at the right (horizontal) or bottom (vertical) - -| Type | Required | Platform | -| ------------------------------ | -------- | -------- | -| enum('start', 'center', 'end') | No | iOS | - ---- - -### `snapToInterval` - -When set, causes the scroll view to stop at multiples of the value of `snapToInterval`. This can be used for paginating through children that have lengths smaller than the scroll view. Used in combination with `snapToAlignment`. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `stickyHeaderIndices` - -An array of child indices determining which children get docked to the top of the screen when scrolling. For example, passing `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction with `horizontal={true}`. - -| Type | Required | Platform | -| --------------- | -------- | -------- | -| array of number | No | iOS | - ---- - -### `zoomScale` - -The current scale of the scroll view content. The default value is 1.0. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - -## Methods - -### `scrollTo()` - -```jsx -scrollTo( - ([y]: number), - object, - ([x]: number), - ([animated]: boolean) -); -``` - -Scrolls to a given x, y offset, either immediately or with a smooth animation. - -Syntax: - -`scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})` - -Note: The weird argument signature is due to the fact that, for historical reasons, the function also accepts separate arguments as as alternative to the options object. This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED. - ---- - -### `scrollWithoutAnimationTo()` - -```jsx -scrollWithoutAnimationTo(y, x); -``` - -Deprecated, do not use. diff --git a/website/versioned_docs/version-0.36/statusbar.md b/website/versioned_docs/version-0.36/statusbar.md deleted file mode 100644 index 571c6bc5b80..00000000000 --- a/website/versioned_docs/version-0.36/statusbar.md +++ /dev/null @@ -1,249 +0,0 @@ ---- -id: version-0.36-statusbar -title: StatusBar -original_id: statusbar ---- - -Component to control the app status bar. - -### Usage with Navigator - -It is possible to have multiple `StatusBar` components mounted at the same time. The props will be merged in the order the `StatusBar` components were mounted. One use case is to specify status bar styles per route using `Navigator`. - -``` - - - - - - } - /> - -``` - -### Imperative API - -For cases where using a component is not ideal, there is also an imperative API exposed as static functions on the component. It is however not recommended to use the static API and the component for the same prop because any value set by the static API will get overriden by the one set by the component in the next render. - -### Props - -- [`animated`](statusbar.md#animated) -- [`hidden`](statusbar.md#hidden) -- [`backgroundColor`](statusbar.md#backgroundcolor) -- [`translucent`](statusbar.md#translucent) -- [`barStyle`](statusbar.md#barstyle) -- [`networkActivityIndicatorVisible`](statusbar.md#networkactivityindicatorvisible) -- [`showHideTransition`](statusbar.md#showhidetransition) - -### Methods - -- [`setHidden`](statusbar.md#sethidden) -- [`setBarStyle`](statusbar.md#setbarstyle) -- [`setNetworkActivityIndicatorVisible`](statusbar.md#setnetworkactivityindicatorvisible) -- [`setBackgroundColor`](statusbar.md#setbackgroundcolor) -- [`setTranslucent`](statusbar.md#settranslucent) - -### Type Definitions - -- [`StatusBarStyle`](statusbar.md#statusbarstyle) -- [`StatusBarAnimation`](statusbar.md#statusbaranimation) - ---- - -# Reference - -## Props - -### `animated` - -If the transition between status bar property changes should be animated. Supported for backgroundColor, barStyle and hidden. - -| Type | Required | -| ------- | -------- | -| boolean | No | - ---- - -### `hidden` - -If the status bar is hidden. - -| Type | Required | -| ------- | -------- | -| boolean | No | - ---- - -### `backgroundColor` - -The background color of the status bar. - -| Type | Required | Platform | -| ----------- | -------- | -------- | -| \$FlowFixMe | No | Android | - ---- - -### `translucent` - -If the status bar is translucent. When translucent is set to true, the app will draw under the status bar. This is useful when using a semi transparent status bar color. - -| Type | Required | Platform | -| ------- | -------- | -------- | -| boolean | No | Android | - ---- - -### `barStyle` - -Sets the color of the status bar text. - -| Type | Required | Platform | -| ----------------------------- | -------- | -------- | -| literal ‖ ,literal ‖ ,literal | No | iOS | - ---- - -### `networkActivityIndicatorVisible` - -If the network activity indicator should be visible. - -| Type | Required | Platform | -| ------- | -------- | -------- | -| boolean | No | iOS | - ---- - -### `showHideTransition` - -The transition effect when showing and hiding the status bar using the `hidden` prop. Defaults to 'fade'. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| literal ‖ ,literal | No | iOS | - -## Methods - -### `setHidden()` - -```jsx -static setHidden(hidden: boolean, [animation]: StatusBarAnimation) -``` - -Show or hide the status bar - -**Parameters:** - -| Name | Type | Required | Description | -| --------- | ----------------------------------------------------- | -------- | ---------------------------------------------------------------- | -| hidden | boolean | Yes | The dialog's title. | -| animation | [StatusBarAnimation](statusbar.md#statusbaranimation) | No | Optional animation when changing the status bar hidden property. | - ---- - -### `setBarStyle()` - -```jsx -static setBarStyle(style: StatusBarStyle, [animated]: boolean) -``` - -Set the status bar style - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | --------------------------------------------- | -------- | ------------------------- | -| style | [StatusBarStyle](statusbar.md#statusbarstyle) | Yes | Status bar style to set | -| animated | boolean | No | Animate the style change. | - ---- - -### `setNetworkActivityIndicatorVisible()` - -```jsx -static setNetworkActivityIndicatorVisible(visible: boolean) -``` - -Control the visibility of the network activity indicator - -**Parameters:** - -| Name | Type | Required | Description | -| ------- | ------- | -------- | ------------------- | -| visible | boolean | Yes | Show the indicator. | - ---- - -### `setBackgroundColor()` - -```jsx -static setBackgroundColor(color: string, [animated]: boolean) -``` - -Set the background color for the status bar - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | ------- | -------- | ------------------------- | -| color | string | Yes | Background color. | -| animated | boolean | No | Animate the style change. | - ---- - -### `setTranslucent()` - -```jsx -static setTranslucent(translucent: boolean) -``` - -Control the translucency of the status bar - -**Parameters:** - -| Name | Type | Required | Description | -| ----------- | ------- | -------- | ------------------- | -| translucent | boolean | Yes | Set as translucent. | - -## Type Definitions - -### StatusBarStyle - -Status bar style - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| ------------- | ---------------------------------------------------------- | -| default | Default status bar style (dark for iOS, light for Android) | -| light-content | Dark background, white texts and icons | -| dark-content | Light background, dark texts and icons | - ---- - -### StatusBarAnimation - -Status bar animation - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| ----- | --------------- | -| none | No animation | -| fade | Fade animation | -| slide | Slide animation | diff --git a/website/versioned_docs/version-0.36/textinput.md b/website/versioned_docs/version-0.36/textinput.md deleted file mode 100644 index 7b303983c24..00000000000 --- a/website/versioned_docs/version-0.36/textinput.md +++ /dev/null @@ -1,627 +0,0 @@ ---- -id: version-0.36-textinput -title: TextInput -original_id: textinput ---- - -A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. - -The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A basic example: - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, TextInput } from 'react-native'; - -class UselessTextInput extends Component { - constructor(props) { - super(props); - this.state = { text: 'Useless Placeholder' }; - } - - render() { - return ( - this.setState({text})} - value={this.state.text} - /> - ); - } -} - -// App registration and rendering -AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput); -``` - -Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=false`. To achieve the same effect, you can wrap your `TextInput` in a `View`: - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, View, TextInput } from 'react-native'; - -class UselessTextInput extends Component { - render() { - return ( - - ); - } -} - -class UselessTextInputMultiline extends Component { - constructor(props) { - super(props); - this.state = { - text: 'Useless Multiline Placeholder', - }; - } - - // If you type something in the text box that is a color, the background will change to that - // color. - render() { - return ( - - this.setState({text})} - value={this.state.text} - /> - - ); - } -} - -// App registration and rendering -AppRegistry.registerComponent( - 'AwesomeProject', - () => UselessTextInputMultiline -); -``` - -`TextInput` has by default a border at the bottom of its view. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this is to either not set height explicitly, case in which the system will take care of displaying the border in the correct position, or to not display the border by setting `underlineColorAndroid` to transparent. - -### Props - -- [View props...](view.md#props) - -* [`placeholderTextColor`](textinput.md#placeholdertextcolor) -* [`autoCapitalize`](textinput.md#autocapitalize) -* [`autoFocus`](textinput.md#autofocus) -* [`blurOnSubmit`](textinput.md#bluronsubmit) -* [`defaultValue`](textinput.md#defaultvalue) -* [`editable`](textinput.md#editable) -* [`keyboardType`](textinput.md#keyboardtype) -* [`maxLength`](textinput.md#maxlength) -* [`multiline`](textinput.md#multiline) -* [`onBlur`](textinput.md#onblur) -* [`onChange`](textinput.md#onchange) -* [`onChangeText`](textinput.md#onchangetext) -* [`onContentSizeChange`](textinput.md#oncontentsizechange) -* [`onEndEditing`](textinput.md#onendediting) -* [`onFocus`](textinput.md#onfocus) -* [`onLayout`](textinput.md#onlayout) -* [`onSelectionChange`](textinput.md#onselectionchange) -* [`onSubmitEditing`](textinput.md#onsubmitediting) -* [`placeholder`](textinput.md#placeholder) -* [`autoCorrect`](textinput.md#autocorrect) -* [`returnKeyType`](textinput.md#returnkeytype) -* [`secureTextEntry`](textinput.md#securetextentry) -* [`selectTextOnFocus`](textinput.md#selecttextonfocus) -* [`selection`](textinput.md#selection) -* [`selectionColor`](textinput.md#selectioncolor) -* [`style`](textinput.md#style) -* [`value`](textinput.md#value) -* [`inlineImageLeft`](textinput.md#inlineimageleft) -* [`inlineImagePadding`](textinput.md#inlineimagepadding) -* [`numberOfLines`](textinput.md#numberoflines) -* [`returnKeyLabel`](textinput.md#returnkeylabel) -* [`underlineColorAndroid`](textinput.md#underlinecolorandroid) -* [`clearButtonMode`](textinput.md#clearbuttonmode) -* [`clearTextOnFocus`](textinput.md#cleartextonfocus) -* [`dataDetectorTypes`](textinput.md#datadetectortypes) -* [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) -* [`keyboardAppearance`](textinput.md#keyboardappearance) -* [`onKeyPress`](textinput.md#onkeypress) -* [`selectionState`](textinput.md#selectionstate) - -### Methods - -- [`isFocused`](textinput.md#isfocused) -- [`clear`](textinput.md#clear) - ---- - -# Reference - -## Props - -### `placeholderTextColor` - -The text color of the placeholder string. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `autoCapitalize` - -Can tell `TextInput` to automatically capitalize certain characters. - -- `characters`: all characters. -- `words`: first letter of each word. -- `sentences`: first letter of each sentence (_default_). -- `none`: don't auto capitalize anything. - -| Type | Required | -| ---- | -------- | - - -| PropTypes.oneOf([ 'none', 'sentences', 'words', 'characters', ]) | No | - ---- - -### `autoFocus` - -If `true`, focuses the input on `componentDidMount`. The default value is `false`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `blurOnSubmit` - -If `true`, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting `blurOnSubmit` to `true` means that pressing return will blur the field and trigger the `onSubmitEditing` event instead of inserting a newline into the field. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `defaultValue` - -Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync. - -| Type | Required | -| -------------- | -------- | -| PropTypes.node | No | - ---- - -### `editable` - -If `false`, text is not editable. The default value is `true`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `keyboardType` - -Determines which keyboard to open, e.g.`numeric`. - -The following values work across platforms: - -- `default` -- `numeric` -- `email-address` -- `phone-pad` - -| Type | Required | -| ---- | -------- | - - -| PropTypes.oneOf([ // Cross-platform 'default', 'email-address', 'numeric', 'phone-pad', // iOS-only 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', ]) | No | - ---- - -### `maxLength` - -Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.number | No | - ---- - -### `multiline` - -If `true`, the text input can be multiple lines. The default value is `false`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `onBlur` - -Callback that is called when the text input is blurred. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onChange` - -Callback that is called when the text input's text changes. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onChangeText` - -Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onContentSizeChange` - -Callback that is called when the text input's content size changes. This will be called with `{ nativeEvent: { contentSize: { width, height } } }`. - -Only called for multiline text inputs. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onEndEditing` - -Callback that is called when text input ends. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onFocus` - -Callback that is called when the text input is focused. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{x, y, width, height}`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onSelectionChange` - -Callback that is called when the text input selection is changed. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `onSubmitEditing` - -Callback that is called when the text input's submit button is pressed. Invalid if `multiline={true}` is specified. - -| Type | Required | -| -------------- | -------- | -| PropTypes.func | No | - ---- - -### `placeholder` - -The string that will be rendered before text input has been entered. - -| Type | Required | -| -------------- | -------- | -| PropTypes.node | No | - ---- - -### `autoCorrect` - -If `false`, disables auto-correct. The default value is `true`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `returnKeyType` - -Determines how the return key should look. On Android you can also use `returnKeyLabel`. - -_Cross platform_ - -The following values work across platforms: - -- `done` -- `go` -- `next` -- `search` -- `send` - -_Android Only_ - -The following values work on Android only: - -- `none` -- `previous` - -_iOS Only_ - -The following values work on iOS only: - -- `default` -- `emergency-call` -- `google` -- `join` -- `route` -- `yahoo` - -| Type | Required | -| ---- | -------- | - - -| PropTypes.oneOf([ // Cross-platform 'done', 'go', 'next', 'search', 'send', // Android-only 'none', 'previous', // iOS-only 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo', ]) | No | - ---- - -### `secureTextEntry` - -If `true`, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is `false`. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `selectTextOnFocus` - -If `true`, all text will automatically be selected on focus. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - ---- - -### `selection` - -The start and end of the text input's selection. Set start and end to the same value to position the cursor. - -| Type | Required | -| ---- | -------- | - - -| PropTypes.shape({ start: PropTypes.number.isRequired, end: PropTypes.number, }) | No | - ---- - -### `selectionColor` - -The highlight (and cursor on iOS) color of the text input. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `style` - -[Styles](style.md) - -| Type | Required | -| --------------------- | -------- | -| [Text](text.md#style) | No | - ---- - -### `value` - -The value to show for the text input. `TextInput` is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker. - -| Type | Required | -| ---------------- | -------- | -| PropTypes.string | No | - ---- - -### `inlineImageLeft` - -If defined, the provided image resource will be rendered on the left. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.string | No | Android | - ---- - -### `inlineImagePadding` - -Padding between the inline image, if any, and the text input itself. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.number | No | Android | - ---- - -### `numberOfLines` - -Sets the number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.number | No | Android | - ---- - -### `returnKeyLabel` - -Sets the return key to the label. Use it instead of `returnKeyType`. - -| Type | Required | Platform | -| ---------------- | -------- | -------- | -| PropTypes.string | No | Android | - ---- - -### `underlineColorAndroid` - -The color of the `TextInput` underline. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `clearButtonMode` - -When the clear button should appear on the right side of the text view. - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| PropTypes.oneOf([ 'never', 'while-editing', 'unless-editing', 'always', ]) | No | iOS | - ---- - -### `clearTextOnFocus` - -If `true`, clears the text field automatically when editing begins. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.bool | No | iOS | - ---- - -### `dataDetectorTypes` - -Determines the types of data converted to clickable URLs in the text input. Only valid if `multiline={true}` and `editable={false}`. By default no data types are detected. - -You can provide one type or an array of many types. - -Possible values for `dataDetectorTypes` are: - -- `'phoneNumber'` -- `'link'` -- `'address'` -- `'calendarEvent'` -- `'none'` -- `'all'` - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| PropTypes.oneOfType([ PropTypes.oneOf(DataDetectorTypes), PropTypes.arrayOf(PropTypes.oneOf(DataDetectorTypes)), ]) | No | iOS | - ---- - -### `enablesReturnKeyAutomatically` - -If `true`, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is `false`. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.bool | No | iOS | - ---- - -### `keyboardAppearance` - -Determines the color of the keyboard. - -| Type | Required | Platform | -| ---- | -------- | -------- | - - -| PropTypes.oneOf([ 'default', 'light', 'dark', ]) | No | iOS | - ---- - -### `onKeyPress` - -Callback that is called when a key is pressed. Pressed key value is passed as an argument to the callback handler. Fires before `onChange` callbacks. - -| Type | Required | Platform | -| -------------- | -------- | -------- | -| PropTypes.func | No | iOS | - ---- - -### `selectionState` - -An instance of `DocumentSelectionState`, this is some state that is responsible for maintaining selection information for a document. - -Some functionality that can be performed with this instance is: - -- `blur()` -- `focus()` -- `update()` - -> You can reference `DocumentSelectionState` in [`vendor/document/selection/DocumentSelectionState.js`](https://github.com/facebook/react-native/blob/master/Libraries/vendor/document/selection/DocumentSelectionState.js) - -| Type | Required | Platform | -| -------------------------------------------- | -------- | -------- | -| PropTypes.instanceOf(DocumentSelectionState) | No | iOS | - -## Methods - -### `isFocused()` - -```jsx -isFocused(): -``` - -Returns `true` if the input is currently focused; `false` otherwise. - ---- - -### `clear()` - -```jsx -clear(); -``` - -Removes all text from the `TextInput`. diff --git a/website/versioned_docs/version-0.36/touchablehighlight.md b/website/versioned_docs/version-0.36/touchablehighlight.md deleted file mode 100644 index 934c12cb230..00000000000 --- a/website/versioned_docs/version-0.36/touchablehighlight.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: version-0.36-touchablehighlight -title: TouchableHighlight -original_id: touchablehighlight ---- - -A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view. The underlay comes from adding a view to the view hierarchy, which can 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. - -Example: - -``` -renderButton: function() { - return ( - - - - ); -}, -``` - -> **NOTE**: TouchableHighlight must have one child (not zero or more than one) -> -> If you wish to have several child components, wrap them in a View. - -### Props - -- [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) - -* [`activeOpacity`](touchablehighlight.md#activeopacity) -* [`onHideUnderlay`](touchablehighlight.md#onhideunderlay) -* [`onShowUnderlay`](touchablehighlight.md#onshowunderlay) -* [`style`](touchablehighlight.md#style) -* [`underlayColor`](touchablehighlight.md#underlaycolor) - ---- - -# Reference - -## Props - -### `activeOpacity` - -Determines what the opacity of the wrapped view should be when touch is active. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `onHideUnderlay` - -Called immediately after the underlay is hidden - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onShowUnderlay` - -Called immediately after the underlay is shown - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `style` - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `underlayColor` - -The color of the underlay that will show through when the touch is active. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | diff --git a/website/versioned_docs/version-0.36/touchablenativefeedback.md b/website/versioned_docs/version-0.36/touchablenativefeedback.md deleted file mode 100644 index f778ec64a7a..00000000000 --- a/website/versioned_docs/version-0.36/touchablenativefeedback.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -id: version-0.36-touchablenativefeedback -title: TouchableNativeFeedback -original_id: touchablenativefeedback ---- - -A wrapper for making views respond properly to touches (Android only). On Android this component uses native state drawable to display touch feedback. At the moment it only supports having a single View instance as a child node, as it's implemented by replacing that View with another instance of RCTView node with some additional properties set. - -Background drawable of native feedback touchable can be customized with `background` property. - -Example: - -``` -renderButton: function() { - return ( - - - Button - - - ); -}, -``` - -### Props - -- [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) - -* [`background`](touchablenativefeedback.md#background) -* [`useForeground`](touchablenativefeedback.md#useforeground) - -### Methods - -- [`SelectableBackground`](touchablenativefeedback.md#selectablebackground) -- [`SelectableBackgroundBorderless`](touchablenativefeedback.md#selectablebackgroundborderless) -- [`Ripple`](touchablenativefeedback.md#ripple) -- [`canUseNativeForeground`](touchablenativefeedback.md#canusenativeforeground) - ---- - -# Reference - -## Props - -### `background` - -Determines the type of background drawable that's going to be used to display feedback. It takes an object with `type` property and extra data depending on the `type`. It's recommended to use one of the static methods to generate that dictionary. - -| Type | Required | -| ------------------ | -------- | -| backgroundPropType | No | - ---- - -### `useForeground` - -Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them. - -Check TouchableNativeFeedback.canUseNativeForeground() first, as this is only available on Android 6.0 and above. If you try to use this on older versions you will get a warning and fallback to background. - -| Type | Required | -| -------------- | -------- | -| PropTypes.bool | No | - -## Methods - -### `SelectableBackground()` - -```jsx -static SelectableBackground() -``` - -Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). - ---- - -### `SelectableBackgroundBorderless()` - -```jsx -static SelectableBackgroundBorderless() -``` - -Creates an object that represent android theme's default background for borderless selectable elements (?android:attr/selectableItemBackgroundBorderless). Available on android API level 21+. - ---- - -### `Ripple()` - -```jsx -static Ripple(color: string, borderless: boolean) -``` - -Creates an object that represents ripple drawable with specified color (as a string). If property `borderless` evaluates to true the ripple will render outside of the view bounds (see native actionbar buttons as an example of that behavior). This background type is available on Android API level 21+. - -**Parameters:** - -| Name | Type | Required | Description | -| ---------- | ------- | -------- | -------------------------------------------- | -| color | string | Yes | The ripple color | -| borderless | boolean | Yes | If the ripple can render outside it's bounds | - ---- - -### `canUseNativeForeground()` - -```jsx -static canUseNativeForeground() -``` diff --git a/website/versioned_docs/version-0.36/view-style-props.md b/website/versioned_docs/version-0.36/view-style-props.md deleted file mode 100644 index 3e6e5b51387..00000000000 --- a/website/versioned_docs/version-0.36/view-style-props.md +++ /dev/null @@ -1,194 +0,0 @@ ---- -id: version-0.36-view-style-props -title: View Style Props -original_id: view-style-props ---- - -### Props - -- [`borderRightColor`](view-style-props.md#borderrightcolor) -- [`backfaceVisibility`](view-style-props.md#backfacevisibility) -- [`borderBottomColor`](view-style-props.md#borderbottomcolor) -- [`borderBottomLeftRadius`](view-style-props.md#borderbottomleftradius) -- [`borderBottomRightRadius`](view-style-props.md#borderbottomrightradius) -- [`borderBottomWidth`](view-style-props.md#borderbottomwidth) -- [`borderColor`](view-style-props.md#bordercolor) -- [`borderLeftColor`](view-style-props.md#borderleftcolor) -- [`borderLeftWidth`](view-style-props.md#borderleftwidth) -- [`borderRadius`](view-style-props.md#borderradius) -- [`backgroundColor`](view-style-props.md#backgroundcolor) -- [`borderRightWidth`](view-style-props.md#borderrightwidth) -- [`borderStyle`](view-style-props.md#borderstyle) -- [`borderTopColor`](view-style-props.md#bordertopcolor) -- [`borderTopLeftRadius`](view-style-props.md#bordertopleftradius) -- [`borderTopRightRadius`](view-style-props.md#bordertoprightradius) -- [`borderTopWidth`](view-style-props.md#bordertopwidth) -- [`borderWidth`](view-style-props.md#borderwidth) -- [`opacity`](view-style-props.md#opacity) -- [`elevation`](view-style-props.md#elevation) - ---- - -# Reference - -## Props - -### `borderRightColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `backfaceVisibility` - -| Type | Required | -| ------------------------------------------- | -------- | -| ReactPropTypes.oneOf(['visible', 'hidden']) | No | - ---- - -### `borderBottomColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderBottomLeftRadius` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderBottomRightRadius` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderBottomWidth` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderLeftColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderLeftWidth` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderRadius` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `backgroundColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderRightWidth` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderStyle` - -| Type | Required | -| --------------------------------------------------- | -------- | -| ReactPropTypes.oneOf(['solid', 'dotted', 'dashed']) | No | - ---- - -### `borderTopColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `borderTopLeftRadius` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderTopRightRadius` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderTopWidth` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `borderWidth` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `opacity` - -| Type | Required | -| --------------------- | -------- | -| ReactPropTypes.number | No | - ---- - -### `elevation` - -(Android-only) Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions. - -| Type | Required | Platform | -| --------------------- | -------- | -------- | -| ReactPropTypes.number | No | Android | diff --git a/website/versioned_docs/version-0.37/activityindicator.md b/website/versioned_docs/version-0.37/activityindicator.md deleted file mode 100644 index 0347856f20f..00000000000 --- a/website/versioned_docs/version-0.37/activityindicator.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: version-0.37-activityindicator -title: ActivityIndicator -original_id: activityindicator ---- - -Displays a circular loading indicator. - -### Props - -- [View props...](view.md#props) - -* [`animating`](activityindicator.md#animating) -* [`color`](activityindicator.md#color) -* [`size`](activityindicator.md#size) -* [`hidesWhenStopped`](activityindicator.md#hideswhenstopped) - ---- - -# Reference - -## Props - -### `animating` - -Whether to show the indicator (true, the default) or hide it (false). - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `color` - -The foreground color of the spinner (default is gray). - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `size` - -Size of the indicator (default is 'small'). Passing a number to the size prop is only supported on Android. - -| Type | Required | -| ------------------------------- | -------- | -| enum('small', 'large'), ,number | No | - ---- - -### `hidesWhenStopped` - -Whether the indicator should hide when not animating (true by default). - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | diff --git a/website/versioned_docs/version-0.37/alert.md b/website/versioned_docs/version-0.37/alert.md deleted file mode 100644 index 9565eba181f..00000000000 --- a/website/versioned_docs/version-0.37/alert.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: version-0.37-alert -title: Alert -original_id: alert ---- - -Launches an alert dialog with the specified title and message. - -Optionally provide a list of buttons. Tapping any button will fire the respective onPress callback and dismiss the alert. By default, the only button will be an 'OK' button. - -This is an API that works both on Android and iOS and can show static alerts. To show an alert that prompts the user to enter some information, see `AlertIOS`; entering text in an alert is common on iOS only. - -## iOS - -On iOS you can specify any number of buttons. Each button can optionally specify a style, which is one of 'default', 'cancel' or 'destructive'. - -## Android - -On Android at most three buttons can be specified. Android has a concept of a neutral, negative and a positive button: - -- If you specify one button, it will be the 'positive' one (such as 'OK') -- Two buttons mean 'negative', 'positive' (such as 'Cancel', 'OK') -- Three buttons mean 'neutral', 'negative', 'positive' (such as 'Later', 'Cancel', 'OK') - -``` -// Works on both Android and iOS -Alert.alert( - 'Alert Title', - 'My Alert Msg', - [ - {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')}, - {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, - {text: 'OK', onPress: () => console.log('OK Pressed')}, - ] -) -``` - -### Methods - -- [`alert`](alert.md#alert) - ---- - -# Reference - -## Methods - -### `alert()` - -```jsx -static alert(title, message?, buttons?, options?, type?) -``` diff --git a/website/versioned_docs/version-0.37/alertios.md b/website/versioned_docs/version-0.37/alertios.md deleted file mode 100644 index 5fa99e1d14c..00000000000 --- a/website/versioned_docs/version-0.37/alertios.md +++ /dev/null @@ -1,193 +0,0 @@ ---- -id: version-0.37-alertios -title: AlertIOS -original_id: alertios ---- - -`AlertIOS` provides functionality to create an iOS alert dialog with a message or create a prompt for user input. - -Creating an iOS alert: - -``` -AlertIOS.alert( - 'Sync Complete', - 'All your data are belong to us.' -); -``` - -Creating an iOS prompt: - -``` -AlertIOS.prompt( - 'Enter a value', - null, - text => console.log("You entered "+text) -); -``` - -We recommend using the [`Alert.alert`](/alert.md) method for cross-platform support if you don't need to create iOS-only prompts. - -### Methods - -- [`alert`](alertios.md#alert) -- [`prompt`](alertios.md#prompt) - -### Type Definitions - -- [`AlertType`](alertios.md#alerttype) -- [`AlertButtonStyle`](alertios.md#alertbuttonstyle) -- [`ButtonsArray`](alertios.md#buttonsarray) - ---- - -# Reference - -## Methods - -### `alert()` - -```jsx -static alert(title: string, [message]: string, [callbackOrButtons]: ?(() => void), ButtonsArray, [type]: AlertType): [object Object] -``` - -Create and display a popup alert. - -**Parameters:** - -| Name | Type | Required | Description | -| ----------------- | ------------------------------------------------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| title | string | Yes | The dialog's title. | -| message | string | No | An optional message that appears below the dialog's title. | -| callbackOrButtons | ?(() => void),[ButtonsArray](alertios.md#buttonsarray) | No | This optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called when the user taps 'OK'. If passed an array of button configurations, each button should include a `text` key, as well as optional `onPress` and `style` keys. `style` should be one of 'default', 'cancel' or 'destructive'. | -| type | [AlertType](alertios.md#alerttype) | No | Deprecated, do not use. | - -Example with custom buttons: - -```jsx -AlertIOS.alert( - 'Update available', - 'Keep your app up to date to enjoy the latest features', - [ - { - text: 'Cancel', - onPress: () => console.log('Cancel Pressed'), - style: 'cancel' - }, - { - text: 'Install', - onPress: () => console.log('Install Pressed') - } - ] -); -``` - ---- - -### `prompt()` - -```jsx -static prompt(title: string, [message]: string, [callbackOrButtons]: ?((text: string) => void), ButtonsArray, [type]: AlertType, [defaultValue]: string): [object Object] -``` - -Create and display a prompt to enter some text. - -**Parameters:** - -| Name | Type | Required | Description | -| ----------------- | ------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| title | string | Yes | The dialog's title. | -| message | string | No | An optional message that appears above the text input. | -| callbackOrButtons | ?((text: string) => void),[ButtonsArray](alertios.md#buttonsarray) | No | This optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called with the prompt's value when the user taps 'OK'. If passed an array of button configurations, each button should include a `text` key, as well as optional `onPress` and `style` keys (see example). `style` should be one of 'default', 'cancel' or 'destructive'. | -| type | [AlertType](alertios.md#alerttype) | No | This configures the text input. One of 'plain-text', 'secure-text' or 'login-password'. | -| defaultValue | string | No | The default text in text input. | - -Example with custom buttons: - -```jsx -AlertIOS.prompt( - 'Enter password', - 'Enter your password to claim your $1.5B in lottery winnings', - [ - { - text: 'Cancel', - onPress: () => console.log('Cancel Pressed'), - style: 'cancel' - }, - { - text: 'OK', - onPress: (password) => - console.log('OK Pressed, password: ' + password) - } - ], - 'secure-text' -); -``` - -, - -Example with the default button and a custom callback: - -```jsx -AlertIOS.prompt( - 'Update username', - null, - (text) => console.log('Your username is ' + text), - null, - 'default' -); -``` - -## Type Definitions - -### AlertType - -An Alert button type - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| -------------- | ---------------------------- | -| default | Default alert with no inputs | -| plain-text | Plain text input alert | -| secure-text | Secure text input alert | -| login-password | Login and password alert | - ---- - -### AlertButtonStyle - -An Alert button style - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| ----------- | ------------------------ | -| default | Default button style | -| cancel | Cancel button style | -| destructive | Destructive button style | - ---- - -### ButtonsArray - -Array or buttons - -| Type | -| ----- | -| Array | - -**Properties:** - -| Name | Type | Description | -| --------- | ------------------------------------------------ | ------------------------------------- | -| [text] | string | Button label | -| [onPress] | function | Callback function when button pressed | -| [style] | [AlertButtonStyle](alertios.md#alertbuttonstyle) | Button style | diff --git a/website/versioned_docs/version-0.37/appregistry.md b/website/versioned_docs/version-0.37/appregistry.md deleted file mode 100644 index fd9726544b6..00000000000 --- a/website/versioned_docs/version-0.37/appregistry.md +++ /dev/null @@ -1,96 +0,0 @@ ---- -id: version-0.37-appregistry -title: AppRegistry -original_id: appregistry ---- - -`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`. - -To "stop" an application when a view should be destroyed, call `AppRegistry.unmountApplicationComponentAtRootTag` with the tag that was pass into `runApplication`. These should always be used as a pair. - -`AppRegistry` should be `require`d early in the `require` sequence to make sure the JS execution environment is setup before other modules are `require`d. - -### Methods - -- [`registerConfig`](appregistry.md#registerconfig) -- [`registerComponent`](appregistry.md#registercomponent) -- [`registerRunnable`](appregistry.md#registerrunnable) -- [`getAppKeys`](appregistry.md#getappkeys) -- [`runApplication`](appregistry.md#runapplication) -- [`unmountApplicationComponentAtRootTag`](appregistry.md#unmountapplicationcomponentatroottag) -- [`registerHeadlessTask`](appregistry.md#registerheadlesstask) -- [`startHeadlessTask`](appregistry.md#startheadlesstask) - ---- - -# Reference - -## Methods - -### `registerConfig()` - -```jsx -static registerConfig(config) -``` - ---- - -### `registerComponent()` - -```jsx -static registerComponent(appKey, getComponentFunc) -``` - ---- - -### `registerRunnable()` - -```jsx -static registerRunnable(appKey, func) -``` - ---- - -### `getAppKeys()` - -```jsx -static getAppKeys() -``` - ---- - -### `runApplication()` - -```jsx -static runApplication(appKey, appParameters) -``` - ---- - -### `unmountApplicationComponentAtRootTag()` - -```jsx -static unmountApplicationComponentAtRootTag(rootTag) -``` - ---- - -### `registerHeadlessTask()` - -```jsx -static registerHeadlessTask(taskKey, task) -``` - -Register a headless task. A headless task is a bit of code that runs without a UI. @param taskKey the key associated with this task @param task a promise returning function that takes some data passed from the native side as the only argument; when the promise is resolved or rejected the native side is notified of this event and it may decide to destroy the JS context. - ---- - -### `startHeadlessTask()` - -```jsx -static startHeadlessTask(taskId, taskKey, data) -``` - -Only called from native code. Starts a headless task. - -@param taskId the native id for this task instance to keep track of its execution @param taskKey the key for the task to start @param data the data to pass to the task diff --git a/website/versioned_docs/version-0.37/button.md b/website/versioned_docs/version-0.37/button.md deleted file mode 100644 index f4da86850d3..00000000000 --- a/website/versioned_docs/version-0.37/button.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: version-0.37-button -title: Button -original_id: button ---- - -A basic button component that should render nicely on any platform. Supports a minimal level of customization. - -
- -If this button doesn't look right for your app, you can build your own button using [TouchableOpacity](touchableopacity) or [TouchableNativeFeedback](touchablenativefeedback). For inspiration, look at the [source code for this button component](https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js). Or, take a look at the [wide variety of button components built by the community](https://js.coach/?menu%5Bcollections%5D=React%20Native&page=1&query=button). - -Example usage: - -``` - - - - - - -
- Target OS: - - - - -
- - - -

Unsupported

- -

A Mac is required to build projects with native code for iOS. You can follow the Quick Start to learn how to build your app using Expo instead.

- - - -

Installing dependencies

- -You will need Node, Watchman, the React Native command line interface, and Xcode. - -While you can use any editor of your choice to develop your app, you will need to install Xcode in order to set up the necessary tooling to build your React Native app for iOS. - - - -

Installing dependencies

- -You will need Node, Watchman, the React Native command line interface, a JDK, and Android Studio. - - - -

Installing dependencies

- -You will need Node, the React Native command line interface, a JDK, and Android Studio. - - - -

Installing dependencies

- -You will need Node, the React Native command line interface, Python2, a JDK, and Android Studio. - - - -While you can use any editor of your choice to develop your app, you will need to install Android Studio in order to set up the necessary tooling to build your React Native app for Android. - - - -

Node, Watchman, JDK

- -We recommend installing Node, Watchman, and JDK using [Homebrew](http://brew.sh/). Run the following commands in a Terminal after installing Homebrew: - -``` -brew install yarn -brew install node -brew install watchman -brew tap AdoptOpenJDK/openjdk -brew cask install adoptopenjdk8 -``` - -If you have already installed Node on your system, make sure it is Node 8.3 or newer. - -[Watchman](https://facebook.github.io/watchman) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance. - -If you have already installed JDK on your system, make sure it is JDK 8 or newer. - - - -

Node

- -Follow the [installation instructions for your Linux distribution](https://nodejs.org/en/download/package-manager/) to install Node 8.3 or newer. - - - -

Node, Python2, JDK

- -We recommend installing Node and Python2 via [Chocolatey](https://chocolatey.org), a popular package manager for Windows. - -React Native also requires a recent version of the [Java SE Development Kit (JDK)](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html), as well as Python 2. Both can be installed using Chocolatey. - -Open an Administrator Command Prompt (right click Command Prompt and select "Run as Administrator"), then run the following command: - -```powershell -choco install -y nodejs.install python2 jdk8 -``` - -If you have already installed Node on your system, make sure it is Node 8.3 or newer. If you already have a JDK on your system, make sure it is version 8 or newer. - -> You can find additional installation options on [Node's Downloads page](https://nodejs.org/en/download/). - - - -

The React Native CLI

- -Node comes with npm, which lets you install the React Native command line interface. - -Run the following command in a Terminal: - -``` -npm install -g react-native-cli -``` - -> If you get an error like `Cannot find module 'npmlog'`, try installing npm directly: `curl -0 -L https://npmjs.org/install.sh | sudo sh`. - - - -

The React Native CLI

- -Node comes with npm, which lets you install the React Native command line interface. - -Run the following command in a Command Prompt or shell: - -```powershell -npm install -g react-native-cli -``` - -> If you get an error like `Cannot find module 'npmlog'`, try installing npm directly: `curl -0 -L https://npmjs.org/install.sh | sudo sh`. - - - -

Xcode

- -The easiest way to install Xcode is via the [Mac App Store](https://itunes.apple.com/us/app/xcode/id497799835?mt=12). Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app. - -If you have already installed Xcode on your system, make sure it is version 9.4 or newer. - -

Command Line Tools

- -You will also need to install the Xcode Command Line Tools. Open Xcode, then choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown. - -![Xcode Command Line Tools](/docs/assets/GettingStartedXcodeCommandLineTools.png) - - - -

Java Development Kit

- -React Native requires version 8 of the Java SE Development Kit (JDK). You may download and install [OpenJDK](http://openjdk.java.net) from [AdoptOpenJDK](https://adoptopenjdk.net/) or your system packager. You may also [Download and install Oracle JDK 8](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) if desired. - - - -

Android development environment

- -Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps. - - - -

1. Install Android Studio

- -[Download and install Android Studio](https://developer.android.com/studio/index.html). Choose a "Custom" setup when prompted to select an installation type. Make sure the boxes next to all of the following are checked: - - - -- `Android SDK` -- `Android SDK Platform` -- `Performance (Intel ® HAXM)` ([See here for AMD](https://android-developers.googleblog.com/2018/07/android-emulator-amd-processor-hyper-v.html)) -- `Android Virtual Device` - - - -- `Android SDK` -- `Android SDK Platform` -- `Android Virtual Device` - - - -Then, click "Next" to install all of these components. - -> If the checkboxes are grayed out, you will have a chance to install these components later on. - -Once setup has finalized and you're presented with the Welcome screen, proceed to the next step. - -

2. Install the Android SDK

- -Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 9 (Pie)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio. - -The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager". - - - -![Android Studio Welcome](/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png) - - - -![Android Studio Welcome](/docs/assets/GettingStartedAndroidStudioWelcomeWindows.png) - - - -> The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. - -Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 9 (Pie)` entry, then make sure the following items are checked: - -- `Android SDK Platform 28` -- `Intel x86 Atom_64 System Image` or `Google APIs Intel x86 Atom System Image` - -Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that `28.0.3` is selected. - -Finally, click "Apply" to download and install the Android SDK and related build tools. - -

3. Configure the ANDROID_HOME environment variable

- -The React Native tools require some environment variables to be set up in order to build apps with native code. - - - -Add the following lines to your `$HOME/.bash_profile` or `$HOME/.bashrc` config file: - - - -``` -export ANDROID_HOME=$HOME/Library/Android/sdk -export PATH=$PATH:$ANDROID_HOME/emulator -export PATH=$PATH:$ANDROID_HOME/tools -export PATH=$PATH:$ANDROID_HOME/tools/bin -export PATH=$PATH:$ANDROID_HOME/platform-tools -``` - - - -``` -export ANDROID_HOME=$HOME/Android/Sdk -export PATH=$PATH:$ANDROID_HOME/emulator -export PATH=$PATH:$ANDROID_HOME/tools -export PATH=$PATH:$ANDROID_HOME/tools/bin -export PATH=$PATH:$ANDROID_HOME/platform-tools -``` - - - -> `.bash_profile` is specific to `bash`. If you're using another shell, you will need to edit the appropriate shell-specific config file. - -Type `source $HOME/.bash_profile` to load the config into your current shell. Verify that ANDROID_HOME has been added to your path by running `echo $PATH`. - -> Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. - - - -Open the System pane under **System and Security** in the Windows Control Panel, then click on **Change settings...**. Open the **Advanced** tab and click on **Environment Variables...**. Click on **New...** to create a new `ANDROID_HOME` user variable that points to the path to your Android SDK: - -![ANDROID_HOME Environment Variable](/docs/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png) - -The SDK is installed, by default, at the following location: - -```powershell -c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk -``` - -You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. - -Open a new Command Prompt window to ensure the new environment variable is loaded before proceeding to the next step. - -

4. Add platform-tools to Path

- -Open the System pane under **System and Security** in the Windows Control Panel, then click on **Change settings...**. Open the **Advanced** tab and click on **Environment Variables...**. Select the **Path** variable, then click **Edit**. Click **New** and add the path to platform-tools to the list. - -The default location for this folder is: - -```powershell -c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk\platform-tools -``` - - - -

Watchman

- -Follow the [Watchman installation guide](https://facebook.github.io/watchman/docs/install#buildinstall) to compile and install Watchman from source. - -> [Watchman](https://facebook.github.io/watchman/docs/install) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance and increased compatibility in certain edge cases (translation: you may be able to get by without installing this, but your mileage may vary; installing this now may save you from a headache later). - - - -

Creating a new application

- -Use the React Native command line interface to generate a new React Native project called "AwesomeProject": - -``` -react-native init AwesomeProject -``` - -This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Expo (or Create React Native App), or if you're adding iOS support to an existing React Native project (see [Platform Specific Code](platform-specific-code.md)). You can also use a third-party CLI to init your React Native app, such as [Ignite CLI](https://github.com/infinitered/ignite). - -

[Optional] Using a specific version

- -If you want to start a new project with a specific React Native version, you can use the `--version` argument: - -``` -react-native init AwesomeProject --version X.XX.X -``` - -``` -react-native init AwesomeProject --version react-native@next -``` - - - -

Creating a new application

- -Use the React Native command line interface to generate a new React Native project called "AwesomeProject": - -``` -react-native init AwesomeProject -``` - -This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Create React Native App, or if you're adding Android support to an existing React Native project (see [Platform Specific Code](platform-specific-code.md)). You can also use a third-party CLI to init your React Native app, such as [Ignite CLI](https://github.com/infinitered/ignite). - -

[Optional] Using a specific version

- -If you want to start a new project with a specific React Native version, you can use the `--version` argument: - -``` -react-native init AwesomeProject --version X.XX.X -``` - -``` -react-native init AwesomeProject --version react-native@next -``` - - - -

Preparing the Android device

- -You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer. - -Either way, you will need to prepare the device to run Android apps for development. - -

Using a physical device

- -If you have a physical Android device, you can use it for development in place of an AVD by plugging it in to your computer using a USB cable and following the instructions [here](running-on-device.md). - -

Using a virtual device

- -If you use Android Studio to open `./AwesomeProject/android`, you can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this: - -![Android Studio AVD Manager](/docs/assets/GettingStartedAndroidStudioAVD.png) - -If you have recently installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the **Pie** API Level 28 image. - - - -> We recommend configuring [VM acceleration](https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux) on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager. - - - -> If you don't have HAXM installed, click on "Install HAXM" or follow [these instructions](https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows) to set it up, then go back to the AVD Manager. - - - -> If you don't have HAXM installed, follow [these instructions](https://github.com/intel/haxm/wiki/Installation-Instructions-on-macOS) to set it up, then go back to the AVD Manager. - - - -Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step. - - - -

Running your React Native application

- -Run `react-native run-ios` inside your React Native project folder: - -``` -cd AwesomeProject -react-native run-ios -``` - -You should see your new app running in the iOS Simulator shortly. - -![AwesomeProject on iOS](/docs/assets/GettingStartediOSSuccess.png) - -`react-native run-ios` is one way to run your app. You can also run it directly from within Xcode. - -> If you can't get this to work, see the [Troubleshooting](troubleshooting.md#content) page. - -

Running on a device

- -The above command will automatically run your app on the iOS Simulator by default. If you want to run the app on an actual physical iOS device, please follow the instructions [here](running-on-device.md). - - - -

Running your React Native application

- -Run `react-native run-android` inside your React Native project folder: - -``` -cd AwesomeProject -react-native run-android -``` - -If everything is set up correctly, you should see your new app running in your Android emulator shortly. - - - -![AwesomeProject on Android](/docs/assets/GettingStartedAndroidSuccessMacOS.png) - - - -![AwesomeProject on Android](/docs/assets/GettingStartedAndroidSuccessWindows.png) - - - -`react-native run-android` is one way to run your app - you can also run it directly from within Android Studio. - -> If you can't get this to work, see the [Troubleshooting](troubleshooting.md#content) page. - - - -

Modifying your app

- -Now that you have successfully run the app, let's modify it. - - - -- Open `App.js` in your text editor of choice and edit some lines. -- Hit `⌘R` in your iOS Simulator to reload the app and see your changes! - - - -- Open `App.js` in your text editor of choice and edit some lines. -- Press the `R` key twice or select `Reload` from the Developer Menu (`⌘M`) to see your changes! - - - -

Modifying your app

- -Now that you have successfully run the app, let's modify it. - -- Open `App.js` in your text editor of choice and edit some lines. -- Press the `R` key twice or select `Reload` from the Developer Menu (`Ctrl + M`) to see your changes! - - - -

That's it!

- -Congratulations! You've successfully run and modified your first React Native app. - -
- - - -

That's it!

- -Congratulations! You've successfully run and modified your first React Native app. - -
- - - -

Now what?

- -- Turn on [Live Reload](debugging.md#reloading-javascript) in the Developer Menu. Your app will now reload automatically whenever you save any changes! - -- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). - -If you're curious to learn more about React Native, continue on to the [Tutorial](tutorial.md). - - - -

Now what?

- -- Turn on [Live Reload](debugging.md#reloading-javascript) in the Developer Menu. Your app will now reload automatically whenever you save any changes! - -- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). - -If you're curious to learn more about React Native, continue on to the [Tutorial](tutorial.md). diff --git a/website/versioned_docs/version-0.5/handling-text-input.md b/website/versioned_docs/version-0.5/handling-text-input.md deleted file mode 100644 index 7b6344525db..00000000000 --- a/website/versioned_docs/version-0.5/handling-text-input.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: version-0.5-handling-text-input -title: Handling Text Input -original_id: handling-text-input ---- - -[`TextInput`](textinput#content) is a [Core Component](intro-react-native-components) that allows the user to enter text. It has an `onChangeText` prop that takes a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted. - -For example, let's say that as the user types, you're translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated as "🍕🍕🍕". - -```SnackPlayer name=Handling%20Text%20Input -import React, { Component } from 'react'; -import { Text, TextInput, View } from 'react-native'; - -export default class PizzaTranslator extends Component { - constructor(props) { - super(props); - this.state = {text: ''}; - } - - render() { - return ( - - this.setState({text})} - value={this.state.text} - /> - - {this.state.text.split(' ').map((word) => word && '🍕').join(' ')} - - - ); - } -} -``` - -In this example, we store `text` in the state, because it changes over time. - -There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the [React docs on controlled components](https://reactjs.org/docs/forms.html#controlled-components), or the [reference docs for TextInput](textinput.md). - -Text input is one of the ways the user interacts with the app. Next, let's look at another type of input and [learn how to handle touches](handling-touches.md). diff --git a/website/versioned_docs/version-0.5/handling-touches.md b/website/versioned_docs/version-0.5/handling-touches.md deleted file mode 100644 index e78be2bc29e..00000000000 --- a/website/versioned_docs/version-0.5/handling-touches.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -id: version-0.5-handling-touches -title: Handling Touches -original_id: handling-touches ---- - -Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. React Native provides components to handle all sorts of common gestures, as well as a comprehensive [gesture responder system](gesture-responder-system.md) to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button. - -## Displaying a basic button - -[Button](button.md) provides a basic button component that is rendered nicely on all platforms. The minimal example to display a button looks like this: - -```jsx - - - - - - - - -A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the [Quick Start instructions](getting-started.md) to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app. - - - -### 1. Plug in your device via USB - -Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the `ios` folder in your project, then open the `.xcodeproj` file, or if you are using CocoaPods open `.xcworkspace`, within it using Xcode. - -If this is your first time running an app on your iOS device, you may need to register your device for development. Open the **Product** menu from Xcode's menubar, then go to **Destination**. Look for and select your device from the list. Xcode will then register your device for development. - -### 2. Configure code signing - -Register for an [Apple developer account](https://developer.apple.com/) if you don't have one yet. - -Select your project in the Xcode Project Navigator, then select your main target (it should share the same name as your project). Look for the "General" tab. Go to "Signing" and make sure your Apple developer account or team is selected under the Team dropdown. Do the same for the tests target (it ends with Tests, and is below your main target). - -![](/docs/assets/RunningOnDeviceCodeSigning.png) - -Repeat this step for the Tests target in your project. - -### 3. Build and Run your app - -If everything is set up correctly, your device will be listed as the build target in the Xcode toolbar, and it will also appear in the Devices pane (`⇧⌘2`). You can now press the **Build and run** button (`⌘R`) or select **Run** from the **Product** menu. Your app will launch on your device shortly. - -![](/docs/assets/RunningOnDeviceReady.png) - -> If you run into any issues, please take a look at Apple's [Launching Your App on a Device](https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/LaunchingYourApponDevices/LaunchingYourApponDevices.html#//apple_ref/doc/uid/TP40012582-CH27-SW4) docs. - - - -### 1. Enable Debugging over USB - -Most Android devices can only install and run apps downloaded from Google Play, by default. You will need to enable USB Debugging on your device in order to install your app during development. - -To enable USB debugging on your device, you will first need to enable the "Developer options" menu by going to **Settings** → **About phone** → **Software information** and then tapping the `Build number` row at the bottom seven times. You can then go back to **Settings** → **Developer options** to enable "USB debugging". - -### 2. Plug in your device via USB - -Let's now set up an Android device to run our React Native projects. Go ahead and plug in your device via USB to your development machine. - - - -Next, check the manufacturer code by using `lsusb` (on mac, you must first [install lsusb](https://github.com/jlhonora/lsusb)). `lsusb` should output something like this: - -```bash -$ lsusb -Bus 002 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub -Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub -Bus 001 Device 003: ID 22b8:2e76 Motorola PCS -Bus 001 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub -Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub -Bus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub -Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub -``` - -These lines represent the USB devices currently connected to your machine. - -You want the line that represents your phone. If you're in doubt, try unplugging your phone and running the command again: - -```bash -$ lsusb -Bus 002 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub -Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub -Bus 001 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub -Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub -Bus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub -Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub -``` - -You'll see that after removing the phone, the line which has the phone model ("Motorola PCS" in this case) disappeared from the list. This is the line that we care about. - -`Bus 001 Device 003: ID 22b8:2e76 Motorola PCS` - -From the above line, you want to grab the first four digits from the device ID: - -`22b8:2e76` - -In this case, it's `22b8`. That's the identifier for Motorola. - -You'll need to input this into your udev rules in order to get up and running: - -```sh -echo 'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"' | sudo tee /etc/udev/rules.d/51-android-usb.rules -``` - -Make sure that you replace `22b8` with the identifier you get in the above command. - - - -Now check that your device is properly connecting to ADB, the Android Debug Bridge, by running `adb devices`. - -``` -$ adb devices -List of devices attached -emulator-5554 offline # Google emulator -14ed2fcc device # Physical device -``` - -Seeing `device` in the right column means the device is connected. You must have **only one device connected** at a time. - -### 3. Run your app - -Type the following in your command prompt to install and launch your app on the device: - -``` -$ react-native run-android -``` - -> If you get a "bridge configuration isn't available" error, see [Using adb reverse](running-on-device.md#method-1-using-adb-reverse-recommended). - -> Hint -> -> You can also use the `React Native CLI` to generate and run a `Release` build (e.g. `react-native run-android --variant=release`). - - - - - -## Connecting to the development server - -You can also iterate quickly on a device using the development server. You only have to be on the same Wi-Fi network as your computer. Shake your device to open the [Developer menu](debugging.md#accessing-the-in-app-developer-menu), then enable Live Reload. Your app will reload whenever your JavaScript code has changed. - -![](/docs/assets/DeveloperMenu.png) - -### Troubleshooting - -> If you have any issues, ensure that your Mac and device are on the same network and can reach each other. Many open wireless networks with captive portals are configured to prevent devices from reaching other devices on the network. You may use your device's Personal Hotspot feature in this case. - -When trying to connect to the development server you might get a [red screen with an error](debugging.md#in-app-errors-and-warnings) saying: - -> Connection to [http://localhost:8081/debugger-proxy?role=client]() timed out. Are you running node proxy? If you are running on the device, check if you have the right IP address in `RCTWebSocketExecutor.m`. - -To solve this issue check the following points. - -#### 1. Wi-Fi network. - -Make sure your laptop and your phone are on the **same** Wi-Fi network. - -#### 2. IP address - -Make sure that the build script detected the IP address of your machine correctly (e.g. 10.0.1.123). - -![](/docs/assets/XcodeBuildIP.png) - -Open the **Report navigator** tab, select the last **Build** and search for `xip.io`. The IP address which gets embedded in the app should match your machines IP address plus the domain `.xip.io` (e.g. 10.0.1.123.xip.io) - -#### 3. Network/router configuration - -React Native uses the wildcard DNS service **xip.io** to address your device, as Apple ATS prohibits URLs with IP addresses instead of domain names, and developers' networks are often not set up to resolve local hostnames. Some routers have security features to prevent DNS Servers from resolving to anything in the local IP range. - -Now check if you are able to resolve the xip.io address, by running `nslookup`. - -```bash -$ nslookup 10.0.1.123.xip.io -``` - -If it doesn't resolve your local IP address either the **xip.io** service is down or more likely your router prevents it. - -To still use xip.io behind your router: - -- configure your phone to use Google DNS (8.8.8.8) -- disable the appropriate security feature in your router - - - -## Connecting to the development server - -You can also iterate quickly on a device by connecting to the development server running on your development machine. There are several ways of accomplishing this, depending on whether you have access to a USB cable or a Wi-Fi network. - -### Method 1: Using adb reverse (recommended) - - - -You can use this method if your device is running Android 5.0 (Lollipop) or newer, it has USB debugging enabled, and it is connected via USB to your development machine. - - - -Run the following in a command prompt: - -``` -$ adb -s reverse tcp:8081 tcp:8081 -``` - -To find the device name, run the following adb command: - -``` -$ adb devices -``` - -You can now enable Live reloading from the [Developer menu](debugging.md#accessing-the-in-app-developer-menu). Your app will reload whenever your JavaScript code has changed. - -### Method 2: Connect via Wi-Fi - -You can also connect to the development server over Wi-Fi. You'll first need to install the app on your device using a USB cable, but once that has been done you can debug wirelessly by following these instructions. You'll need your development machine's current IP address before proceeding. - - - -You can find the IP address in **System Preferences** → **Network**. - - - -Open the command prompt and type `ipconfig` to find your machine's IP address ([more info](http://windows.microsoft.com/en-us/windows/using-command-line-tools-networking-information)). - - - -Open a terminal and type `/sbin/ifconfig` to find your machine's IP address. - - - - - -1. Make sure your laptop and your phone are on the **same** Wi-Fi network. -2. Open your React Native app on your device. -3. You'll see a [red screen with an error](debugging.md#in-app-errors-and-warnings). This is OK. The following steps will fix that. -4. Open the in-app [Developer menu](debugging.md#accessing-the-in-app-developer-menu). -5. Go to **Dev Settings** → **Debug server host & port for device**. -6. Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081). -7. Go back to the **Developer menu** and select **Reload JS**. - -You can now enable Live reloading from the [Developer menu](debugging.md#accessing-the-in-app-developer-menu). Your app will reload whenever your JavaScript code has changed. - - - -## Building your app for production - -You have built a great app using React Native, and you are now itching to release it in the App Store. The process is the same as any other native iOS app, with some additional considerations to take into account. - -> If you are using Expo then read the Expo Guide for [Building Standalone Apps](https://docs.expo.io/versions/latest/distribution/building-standalone-apps/). - -### 1. Enable App Transport Security - -App Transport Security is a security feature introduced in iOS 9 that rejects all HTTP requests that are not sent over HTTPS. This can result in HTTP traffic being blocked, including the developer React Native server. ATS is disabled for `localhost` by default in React Native projects in order to make development easier. - -You should re-enable ATS prior to building your app for production by removing the `localhost` entry from the `NSExceptionDomains` dictionary in your `Info.plist` file in the `ios/` folder. You can also re-enable ATS from within Xcode by opening your target properties under the Info pane and editing the App Transport Security Settings entry. - -> If your application needs to access HTTP resources on production, see [this post](http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/) to learn how to configure ATS on your project. - -### 2. Configure release scheme - -Building an app for distribution in the App Store requires using the `Release` scheme in Xcode. Apps built for `Release` will automatically disable the in-app Developer menu, which will prevent your users from inadvertently accessing the menu in production. It will also bundle the JavaScript locally, so you can put the app on a device and test whilst not connected to the computer. - -To configure your app to be built using the `Release` scheme, go to **Product** → **Scheme** → **Edit Scheme**. Select the **Run** tab in the sidebar, then set the Build Configuration dropdown to `Release`. - -![](/docs/assets/ConfigureReleaseScheme.png) - -#### Pro Tips - -As your App Bundle grows in size, you may start to see a blank screen flash between your splash screen and the display of your root application view. If this is the case, you can add the following code to `AppDelegate.m` in order to keep your splash screen displayed during the transition. - -```objc - // Place this code after "[self.window makeKeyAndVisible]" and before "return YES;" - UIView* launchScreenView = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0]; - launchScreenView.frame = self.window.bounds; - rootView.loadingView = launchScreenView; -``` - -The static bundle is built every time you target a physical device, even in Debug. If you want to save time, turn off bundle generation in Debug by adding the following to your shell script in the Xcode Build Phase `Bundle React Native code and images`: - -```shell - if [ "${CONFIGURATION}" == "Debug" ]; then - export SKIP_BUNDLING=true - fi -``` - -### 3. Build app for release - -You can now build your app for release by tapping `⌘B` or selecting **Product** → **Build** from the menu bar. Once built for release, you'll be able to distribute the app to beta testers and submit the app to the App Store. - -> You can also use the `React Native CLI` to perform this operation using the option `--configuration` with the value `Release` (e.g. `react-native run-ios --configuration Release`). - - - -## Building your app for production - -You have built a great app using React Native, and you are now itching to release it in the Play Store. The process is the same as any other native Android app, with some additional considerations to take into account. Follow the guide for [generating a signed APK](signed-apk-android.md) to learn more. diff --git a/website/versioned_docs/version-0.5/running-on-simulator-ios.md b/website/versioned_docs/version-0.5/running-on-simulator-ios.md deleted file mode 100644 index 85ad500eb07..00000000000 --- a/website/versioned_docs/version-0.5/running-on-simulator-ios.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: version-0.5-running-on-simulator-ios -title: Running On Simulator -original_id: running-on-simulator-ios ---- - -## Starting the simulator - -Once you have your React Native project initialized, you can run `react-native run-ios` inside the newly created project directory. If everything is set up correctly, you should see your new app running in the iOS Simulator shortly. - -## Specifying a device - -You can specify the device the simulator should run with the `--simulator` flag, followed by the device name as a string. The default is `"iPhone X"`. If you wish to run your app on an iPhone 5s, run `react-native run-ios --simulator="iPhone 5s"`. - -The device names correspond to the list of devices available in Xcode. You can check your available devices by running `xcrun simctl list devices` from the console. diff --git a/website/versioned_docs/version-0.5/scrollview.md b/website/versioned_docs/version-0.5/scrollview.md deleted file mode 100644 index f2cdf5c4c7d..00000000000 --- a/website/versioned_docs/version-0.5/scrollview.md +++ /dev/null @@ -1,392 +0,0 @@ ---- -id: version-0.5-scrollview -title: ScrollView -original_id: scrollview ---- - -Component that wraps platform ScrollView while providing integration with touch locking "responder" system. - -Doesn't yet support other contained responders from blocking this scroll view from becoming the responder. - -### Props - -- [`maximumZoomScale`](scrollview.md#maximumzoomscale) -- [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) -- [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) -- [`bounces`](scrollview.md#bounces) -- [`bouncesZoom`](scrollview.md#bounceszoom) -- [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) -- [`centerContent`](scrollview.md#centercontent) -- [`contentContainerStyle`](scrollview.md#contentcontainerstyle) -- [`contentInset`](scrollview.md#contentinset) -- [`contentOffset`](scrollview.md#contentoffset) -- [`decelerationRate`](scrollview.md#decelerationrate) -- [`directionalLockEnabled`](scrollview.md#directionallockenabled) -- [`horizontal`](scrollview.md#horizontal) -- [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) -- [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) -- [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) -- [`minimumZoomScale`](scrollview.md#minimumzoomscale) -- [`onScroll`](scrollview.md#onscroll) -- [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) -- [`pagingEnabled`](scrollview.md#pagingenabled) -- [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) -- [`scrollEnabled`](scrollview.md#scrollenabled) -- [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) -- [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) -- [`scrollsToTop`](scrollview.md#scrollstotop) -- [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) -- [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) -- [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) -- [`style`](scrollview.md#style) -- [`zoomScale`](scrollview.md#zoomscale) - -### Methods - -- [`scrollTo`](scrollview.md#scrollto) -- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) - ---- - -# Reference - -## Props - -### `maximumZoomScale` - -The maximum allowed zoom scale. The default value is 1.0. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `alwaysBounceHorizontal` - -When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself. The default value is true when `horizontal={true}` and false otherwise. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `automaticallyAdjustContentInsets` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `bounces` - -When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. When false, it disables all bouncing even if the `alwaysBounce*` props are true. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `bouncesZoom` - -When true, gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture end, otherwise the zoom will not exceed the limits. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `canCancelContentTouches` - -When false, once tracking starts, won't try to drag if the touch moves. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `centerContent` - -When true, the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `contentContainerStyle` - -These styles will be applied to the scroll view content container which wraps all of the child views. Example: - -return ( ); ... var styles = StyleSheet.create({ contentContainer: { paddingVertical: 20 } }); - -| Type | Required | -| ------------------------------------ | -------- | -| StyleSheetPropType(View Style props) | No | - ---- - -### `contentInset` - -| Type | Required | -| ------------------------------------------------------------------ | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | - ---- - -### `contentOffset` - -| Type | Required | -| ------------- | -------- | -| PointPropType | No | - ---- - -### `decelerationRate` - -A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. Reasonable choices include - -- Normal: 0.998 (the default) -- Fast: 0.9 - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `directionalLockEnabled` - -When true, the ScrollView will try to lock to only vertical or horizontal scrolling while dragging. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `horizontal` - -When true, the scroll view's children are arranged horizontally in a row instead of vertically in a column. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'onDrag', the keyboard is dismissed when a drag begins. -- 'interactive', the keyboard is dismissed interactively with the drag and moves in synchrony with the touch; dragging upwards cancels the dismissal. - -| Type | Required | -| ------------------------------------- | -------- | -| enum('none', 'interactive', 'onDrag') | No | - ---- - -### `keyboardShouldPersistTaps` - -When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the scroll view will not catch taps, and the keyboard will not dismiss automatically. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `alwaysBounceVertical` - -When true, the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself. The default value is false when `horizontal={true}` and true otherwise. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `minimumZoomScale` - -The minimum allowed zoom scale. The default value is 1.0. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `onScroll` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onScrollAnimationEnd` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `pagingEnabled` - -When true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `removeClippedSubviews` - -Experimental: When true, offscreen child views (whose `overflow` value is `hidden`) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `scrollEnabled` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `scrollEventThrottle` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `scrollIndicatorInsets` - -| Type | Required | -| ------------------------------------------------------------------ | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | - ---- - -### `scrollsToTop` - -When true, the scroll view scrolls to top when the status bar is tapped. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsHorizontalScrollIndicator` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `showsVerticalScrollIndicator` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `stickyHeaderIndices` - -An array of child indices determining which children get docked to the top of the screen when scrolling. For example, passing `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction with `horizontal={true}`. - -| Type | Required | -| --------------- | -------- | -| array of number | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [Layout Props...](layout-props.md#props) - -- [Transforms...](transforms.md#props) - -- **`borderTopColor`**: string - -- **`backgroundColor`**: string - -- **`borderBottomLeftRadius`**: number - -- **`borderBottomRightRadius`**: number - -- **`borderColor`**: string - -- **`borderLeftColor`**: string - -- **`borderRadius`**: number - -- **`borderRightColor`**: string - -- **`borderBottomColor`**: string - -- **`borderTopLeftRadius`**: number - -- **`borderTopRightRadius`**: number - -- **`opacity`**: number - -- **`overflow`**: enum('visible', 'hidden') - -- **`shadowColor`**: string - -- **`shadowOffset`**: object: {width: number,height: number} - -- **`shadowOpacity`**: number - -- **`shadowRadius`**: number - ---- - -### `zoomScale` - -The current scale of the scroll view content. The default value is 1.0. - -| Type | Required | -| ------ | -------- | -| number | No | - -## Methods - -### `scrollTo()` - -```jsx -scrollTo(([destY]: number), ([destX]: number)); -``` - ---- - -### `scrollWithoutAnimationTo()` - -```jsx -scrollWithoutAnimationTo(([destY]: number), ([destX]: number)); -``` diff --git a/website/versioned_docs/version-0.5/sectionlist.md b/website/versioned_docs/version-0.5/sectionlist.md deleted file mode 100644 index 8501c138b92..00000000000 --- a/website/versioned_docs/version-0.5/sectionlist.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: version-0.5-sectionlist -title: SectionList -original_id: sectionlist ---- - -A performant interface for rendering sectioned lists, supporting the most handy features: - -- Fully cross-platform. -- Configurable viewability callbacks. -- List header support. -- List footer support. -- Item separator support. -- Section header support. -- Section separator support. -- Heterogeneous data and item rendering support. -- Pull to Refresh. -- Scroll loading. - -If you don't need section support and want a simpler interface, use [``](flatlist.md). - -### Examples - -```jsx - } - renderSectionHeader={({section}) =>
} - sections={[ // homogeneous rendering between sections - {data: [...], title: ...}, - {data: [...], title: ...}, - {data: [...], title: ...}, - ]} -/> - - -``` - -This is a convenience wrapper around [`VirtualizedList`](virtualizedlist.md), and thus inherits its props (as well as those of `ScrollView`) that aren't explicitly listed here, along with the following caveats: - -- Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay. -- This is a `PureComponent` which means that it will not re-render if `props` remain shallow-equal. Make sure that everything your `renderItem` function depends on is passed as a prop (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on changes. This includes the `data` prop and parent component state. -- In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes. -- By default, the list looks for a `key` prop on each item and uses that for the React key. Alternatively, you can provide a custom `keyExtractor` prop. - -### Props - -- [`ScrollView` props...](scrollview.md#props) -- [`VirtualizedList` props...](virtualizedlist.md#props) -- [`sections`](virtualizedlist.md#sections) -- [`renderItem`](virtualizedlist.md#renderitem) -- [`ItemSeparatorComponent`](virtualizedlist.md#itemseparatorcomponent) -- [`ListEmptyComponent`](virtualizedlist.md#listemptycomponent) -- [`ListFooterComponent`](virtualizedlist.md#listfootercomponent) SectionSeparatorComponent -- [`extradata`](virtualizedlist.md#extradata) -- [`initialNumToRender`](virtualizedlist.md#initialnumtorender) -- [`inverted`](virtualizedlist.md#inverted) -- [`keyExtractor`](virtualizedlist.md#keyextractor) -- [`onEndReached`](virtualizedlist.md#onendreached) -- [`onEndReachedThreshold`](virtualizedlist.md#onendreachedthreshold) -- [`onRefresh`](virtualizedlist.md#onrefresh) -- [`onViewableItemsChanged`](virtualizedlist.md#onviewableitemschanged) -- [`refreshing`](virtualizedlist.md#refreshing) -- [`removeClippedSubviews`](virtualizedlist.md#removeclippedsubviews) -- [`renderSectionHeader`](virtualizedlist.md#removeclippedsubviews) -- [`renderSectionFooter`](virtualizedlist.md#rendersectionfooter) -- [`stickySectionHeadersEnabled`](sectionlist.md#stickysectionheadersenabled) -- [`legacyImplementation`](virtualizedlist.md#legacyimplementation) - -### Methods - -- [`scrollToLocation`](sectionlist.md#scrolltolocation) -- [`recordInteraction`](sectionlist.md#recordinteraction) -- [`flashScrollIndicators`](sectionlist.md#flashscrollindicators) - -### Type Definitions - -- [`SectionBase`](sectionlist.md#sectionbase) -- [`Props`](sectionlist.md#props) - ---- - -# Reference - -## Props - -### `sections` - -The actual data to render, akin to the `data` prop in [`FlatList`](/flatlist.md#data). - -**General shape:** - -``` -sections: [{ - data: array, - [renderItem]: ({item: SectionItem, ...}) => element, - [ItemSeparatorComponent]: React Class Component | function | element, -}] -``` - -| Type | Required | -| ---------------- | -------- | -| array of objects | Yes | - ---- - -### `renderItem` - -```jsx -renderItem({ item: object, index: number, section: object, separators: { highlight: function, unhighlight: function, updateProps: function(select: string, newProps: object) } }): [element] -``` - -Default renderer for every item in every section. Can be over-ridden on a per-section basis. - -Provides additional metadata like `index` if you need it, as well as a more generic `separators.updateProps` function which let's you set whatever props you want to change the rendering of either the leading separator or trailing separator in case the more common `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for your use case. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `ItemSeparatorComponent` - -Rendered in between each item, but not at the top or bottom. By default, `highlighted`, `section`, and `[leading/trailing][Item/Separator]` props are provided. `renderItem` provides `separators.highlight`/`unhighlight` which will update the `highlighted` prop, but you can also add custom props with `separators.updateProps`. - -| Type | Required | -| --------- | -------- | -| component | No | - ---- - -### `ListHeaderComponent` - -Rendered at the top of all the items. Can be a React Component Class, a render function, or a rendered element. - -| Type | Required | -| ---------------------------- | -------- | -| component, function, element | No | - ---- - -### `ListEmptyComponent` - -Rendered when the list is empty. Can be a React Component Class, a render function, or a rendered element. - -| Type | Required | -| ---------------------------- | -------- | -| component, function, element | No | - ---- - -### `ListFooterComponent` - -Rendered at the very end of the list. Can be a React Component Class, a render function, or a rendered element. - -| Type | Required | -| ---------------------------- | -------- | -| component, function, element | No | - ---- - -### `SectionSeparatorComponent` - -Rendered at the top and bottom of each section (note this is different from `ItemSeparatorComponent` which is only rendered between items). These are intended to separate sections from the headers above and below and typically have the same highlight response as `ItemSeparatorComponent`. Also receives `highlighted`, `[leading/trailing][Item/Separator]`, and any custom props from `separators.updateProps`. - -| Type | Required | -| ---- | -------- | -| any | No | - ---- - -### `extraData` - -A marker property for telling the list to re-render (since it implements `PureComponent`). If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop, stick it here and treat it immutably. - -| Type | Required | -| ---- | -------- | -| any | No | - ---- - -### `initialNumToRender` - -How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `inverted` - -Reverses the direction of scroll. Uses scale transforms of `-1`. - -| Type | Required | -| ------- | -------- | -| boolean | No | - ---- - -### `keyExtractor` - -```jsx -(item: object, index: number) => string; -``` - -Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks `item.key`, then falls back to using the index, like react does. Note that this sets keys for each item, but each overall section still needs its own key. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onEndReached` - -```jsx -(info: {distanceFromEnd: number}) => void -``` - -Called once when the scroll position gets within `onEndReachedThreshold` of the rendered content. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onEndReachedThreshold` - -How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the `onEndReached` callback. Thus a value of 0.5 will trigger `onEndReached` when the end of the content is within half the visible length of the list. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `onRefresh` - -```jsx -() => void -``` - -If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the `refreshing` prop correctly. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onViewableItemsChanged` - -```jsx -(info: { - viewableItems: array, - changed: array, - }) => void -``` - -Called when the viewability of rows changes, as defined by the `viewabilityConfig` prop. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `refreshing` - -Set this true while waiting for new data from a refresh. - -| Type | Required | -| ------- | -------- | -| boolean | No | - ---- - -### `removeClippedSubviews` - -This may improve scroll performance for large lists. - -> Note: May have bugs (missing content) in some circumstances - use at your own risk. - -| Type | Required | -| ------- | -------- | -| boolean | No | - ---- - -### `renderSectionHeader` - -``` -(info: {section}) => [element] -``` - -Rendered at the top of each section. These stick to the top of the `ScrollView` by default on iOS. See `stickySectionHeadersEnabled`. - -| Type | Required | -| ------- | -------- | -| element | No | - ---- - -### `renderSectionFooter` - -``` -(info: {section}) => [element] -``` - -React element rendered at the bottom of each section. - -| Type | Required | -| ------- | -------- | -| element | No | - ---- - -### `stickySectionHeadersEnabled` - -Makes section headers stick to the top of the screen until the next one pushes it off. Only enabled by default on iOS because that is the platform standard there. - -| Type | Required | -| ---- | -------- | -| | No | - -## Methods - -### `scrollToLocation()` - -```jsx -scrollToLocation((params: object)); -``` - -Scrolls to the item at the specified `sectionIndex` and `itemIndex` (within the section) positioned in the viewable area such that `viewPosition` 0 places it at the top (and may be covered by a sticky header), 1 at the bottom, and 0.5 centered in the middle. `viewOffset` is a fixed number of pixels to offset the final target position, e.g. to compensate for sticky headers. - -Note: cannot scroll to locations outside the render window without specifying the `getItemLayout` prop. - ---- - -### `recordInteraction()` - -```jsx -recordInteraction(); -``` - -Tells the list an interaction has occured, which should trigger viewability calculations, e.g. if `waitForInteractions` is true and the user has not scrolled. This is typically called by taps on items or by navigation actions. - ---- - -### `flashScrollIndicators()` - -```jsx -flashScrollIndicators(); -``` - -Displays the scroll indicators momentarily. - -## Type Definitions - -### SectionBase - -| Type | -| -------------------- | -| ObjectTypeAnnotation | - ---- - -### Props - -| Type | -| -------------------------- | -| IntersectionTypeAnnotation | diff --git a/website/versioned_docs/version-0.5/segmentedcontrolios.md b/website/versioned_docs/version-0.5/segmentedcontrolios.md deleted file mode 100644 index 51335d26391..00000000000 --- a/website/versioned_docs/version-0.5/segmentedcontrolios.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: version-0.5-segmentedcontrolios -title: SegmentedControlIOS -original_id: segmentedcontrolios ---- - -Use `SegmentedControlIOS` to render a UISegmentedControl iOS. - -### Props - -- [`enabled`](segmentedcontrolios.md#enabled) -- [`momentary`](segmentedcontrolios.md#momentary) -- [`onChange`](segmentedcontrolios.md#onchange) -- [`onValueChange`](segmentedcontrolios.md#onvaluechange) -- [`selectedIndex`](segmentedcontrolios.md#selectedindex) -- [`tintColor`](segmentedcontrolios.md#tintcolor) -- [`values`](segmentedcontrolios.md#values) - ---- - -# Reference - -## Props - -### `enabled` - -If false the user won't be able to interact with the control. Default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `momentary` - -If true, then selecting a segment won't persist visually. The `onValueChange` callback will still work as expected. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onChange` - -Callback that is called when the user taps a segment; passes the event as an argument - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onValueChange` - -Callback that is called when the user taps a segment; passes the segment's value as an argument - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `selectedIndex` - -The index in `props.values` of the segment to be pre-selected - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `tintColor` - -Accent color of the control. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `values` - -The labels for the control's segment buttons, in order. - -| Type | Required | -| --------------- | -------- | -| array of string | No | diff --git a/website/versioned_docs/version-0.5/settings.md b/website/versioned_docs/version-0.5/settings.md deleted file mode 100644 index 702d79961f9..00000000000 --- a/website/versioned_docs/version-0.5/settings.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -id: version-0.5-settings -title: Settings -original_id: settings ---- - -`Settings` serves as a wrapper for [`NSUserDefaults`](https://developer.apple.com/documentation/foundation/nsuserdefaults), a persistent key-value store available only on iOS. - -### Methods - -- [`get`](settings.md#get) -- [`set`](settings.md#set) -- [`watchKeys`](settings.md#watchkeys) -- [`clearWatch`](settings.md#clearwatch) - ---- - -# Reference - -## Methods - -### `get()` - -```jsx -static get(key) -``` - -Get the current value for a key in `NSUserDefaults`. - ---- - -### `set()` - -```jsx -static set(settings) -``` - -Set one or more values in `NSUserDefaults`. - ---- - -### `watchKeys()` - -```jsx -static watchKeys(keys, callback) -``` - -Subscribe to be notified when the value for any of the keys specified by the `keys` array changes in `NSUserDefaults`. Returns a `watchId` number that may be used with `clearWatch()` to unsubscribe. - ---- - -### `clearWatch()` - -```jsx -static clearWatch(watchId) -``` - -`watchId` is the number returned by `watchKeys()` when the subscription was originally configured. diff --git a/website/versioned_docs/version-0.5/shadow-props.md b/website/versioned_docs/version-0.5/shadow-props.md deleted file mode 100644 index 634549d241f..00000000000 --- a/website/versioned_docs/version-0.5/shadow-props.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: version-0.5-shadow-props -title: Shadow Props -original_id: shadow-props ---- - -### Props - -- [`shadowColor`](shadow-props.md#shadowcolor) -- [`shadowOffset`](shadow-props.md#shadowoffset) -- [`shadowOpacity`](shadow-props.md#shadowopacity) -- [`shadowRadius`](shadow-props.md#shadowradius) - ---- - -# Reference - -## Props - -### `shadowColor` - -Sets the drop shadow color - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | - ---- - -### `shadowOffset` - -Sets the drop shadow offset - -| Type | Required | Platform | -| -------------------------------------- | -------- | -------- | -| object: {width: number,height: number} | No | iOS | - ---- - -### `shadowOpacity` - -Sets the drop shadow opacity (multiplied by the color's alpha component) - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `shadowRadius` - -Sets the drop shadow blur radius - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | diff --git a/website/versioned_docs/version-0.5/share.md b/website/versioned_docs/version-0.5/share.md deleted file mode 100644 index fdeb0bb65b0..00000000000 --- a/website/versioned_docs/version-0.5/share.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -id: version-0.5-share -title: Share -original_id: share ---- - -### Methods - -- [`share`](share.md#share) -- [`sharedAction`](share.md#sharedaction) -- [`dismissedAction`](share.md#dismissedaction) - ---- - -# Reference - -## Methods - -### `share()` - -```jsx -Share.share(content, options); -``` - -Open a dialog to share text content. - -In iOS, Returns a Promise which will be invoked an object containing `action`, `activityType`. If the user dismissed the dialog, the Promise will still be resolved with action being `Share.dismissedAction` and all the other keys being undefined. - -In Android, Returns a Promise which always be resolved with action being `Share.sharedAction`. - -### Content - -- `message` - a message to share -- `title` - title of the message - -#### iOS - -- `url` - an URL to share - -At least one of URL and message is required. - -### Options - -#### iOS - -- `subject` - a subject to share via email -- `excludedActivityTypes` -- `tintColor` - -#### Android - -- `dialogTitle` - ---- - -### `sharedAction()` - -```jsx -Share.sharedAction(); -``` - -The content was successfully shared. - ---- - -### `dismissedAction()` - -```jsx -Share.dismissedAction(); -``` - -The dialog has been dismissed. - -| Platform | -| -------- | -| iOS | diff --git a/website/versioned_docs/version-0.5/signed-apk-android.md b/website/versioned_docs/version-0.5/signed-apk-android.md deleted file mode 100644 index 93f33821ad1..00000000000 --- a/website/versioned_docs/version-0.5/signed-apk-android.md +++ /dev/null @@ -1,145 +0,0 @@ ---- -id: version-0.5-signed-apk-android -title: Publishing to Google Play Store -original_id: signed-apk-android ---- - -Android requires that all apps be digitally signed with a certificate before they can be installed. In order to distribute your Android application via [Google Play store](https://play.google.com/store) it needs to be signed with a release key that then needs to be used for all future updates. Since 2017 it is possible for Google Play to manage signing releases automatically thanks to [App Signing by Google Play](https://developer.android.com/studio/publish/app-signing#app-signing-google-play) functionality. However, before your application binary is uploaded to Google Play it needs to be signed with an upload key. The [Signing Your Applications](https://developer.android.com/tools/publishing/app-signing.html) page on Android Developers documentation describes the topic in detail. This guide covers the process in brief, as well as lists the steps required to package the JavaScript bundle. - -### Generating an upload key - -You can generate a private signing key using `keytool`. On Windows `keytool` must be run from `C:\Program Files\Java\jdkx.x.x_x\bin`. - - $ keytool -genkeypair -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 - -This command prompts you for passwords for the keystore and key and for the Distinguished Name fields for your key. It then generates the keystore as a file called `my-upload-key.keystore`. - -The keystore contains a single key, valid for 10000 days. The alias is a name that you will use later when signing your app, so remember to take note of the alias. - -On Mac, if you're not sure where your JDK bin folder is, then perform the following command to find it: - - $ /usr/libexec/java_home - -It will output the directory of the JDK, which will look something like this: - - /Library/Java/JavaVirtualMachines/jdkX.X.X_XXX.jdk/Contents/Home - -Navigate to that directory by using the command `$ cd /your/jdk/path` and use the keytool command with sudo permission as shown below. - - $ sudo keytool -genkey -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 - -_Note: Remember to keep the keystore file private. In case you've lost upload key or it's been compromised you should [follow these instructions](https://support.google.com/googleplay/android-developer/answer/7384423#reset)._ - -### Setting up Gradle variables - -1. Place the `my-upload-key.keystore` file under the `android/app` directory in your project folder. -2. Edit the file `~/.gradle/gradle.properties` or `android/gradle.properties`, and add the following (replace `*****` with the correct keystore password, alias and key password), - -``` -MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore -MYAPP_UPLOAD_KEY_ALIAS=my-key-alias -MYAPP_UPLOAD_STORE_PASSWORD=***** -MYAPP_UPLOAD_KEY_PASSWORD=***** -``` - -These are going to be global Gradle variables, which we can later use in our Gradle config to sign our app. - -_Note about security: If you are not keen on storing your passwords in plaintext, and you are running OSX, you can also [store your credentials in the Keychain Access app](https://pilloxa.gitlab.io/posts/safer-passwords-in-gradle/). Then you can skip the two last rows in `~/.gradle/gradle.properties`._ - -### Adding signing config to your app's Gradle config - -The last configuration step that needs to be done is to setup release builds to be signed using upload key. Edit the file `android/app/build.gradle` in your project folder, and add the signing config, - -```gradle -... -android { - ... - defaultConfig { ... } - signingConfigs { - release { - if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) { - storeFile file(MYAPP_UPLOAD_STORE_FILE) - storePassword MYAPP_UPLOAD_STORE_PASSWORD - keyAlias MYAPP_UPLOAD_KEY_ALIAS - keyPassword MYAPP_UPLOAD_KEY_PASSWORD - } - } - } - buildTypes { - release { - ... - signingConfig signingConfigs.release - } - } -} -... -``` - -### Generating the release APK - -Run the following in a terminal: - -```sh -$ cd android -$ ./gradlew bundleRelease -``` - -Gradle's `bundleRelease` will bundle all the JavaScript needed to run your app into the AAB ([Android App Bundle](https://developer.android.com/guide/app-bundle)). If you need to change the way the JavaScript bundle and/or drawable resources are bundled (e.g. if you changed the default file/folder names or the general structure of the project), have a look at `android/app/build.gradle` to see how you can update it to reflect these changes. - -> Note: Make sure gradle.properties does not include _org.gradle.configureondemand=true_ as that will make the release build skip bundling JS and assets into the app binary. - -The generated AAB can be found under `android/app/build/outputs/bundle/release/app.aab`, and is ready to be uploaded to Google Play. - -_Note: In order for Google Play to accept AAB format the App Signing by Google Play needs to be configured for your application on the Google Play Console. If you are updating an existing app that doesn't use App Signing by Google Play, please check our [migration section](#migrating-old-android-react-native-apps-to-use-app-signing-by-google-play) to learn how to perform that configuration change._ - -### Testing the release build of your app - -Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using: - -```sh -$ react-native run-android --variant=release -``` - -Note that `--variant=release` is only available if you've set up signing as described above. - -You can terminate any running bundler instances, since all your framework and JavaScript code is bundled in the APK's assets. - -### Publishing to other stores - -By default, the generated APK has the native code for both x86 and ARMv7a CPU architectures. This makes it easier to share APKs that run on almost all Android devices. However, this has the downside that there will be some unused native code on any device, leading to unnecessarily bigger APKs. - -You can create an APK for each CPU by changing the following line in android/app/build.gradle: - -```diff -- ndk { -- abiFilters "armeabi-v7a", "x86" -- } -- def enableSeparateBuildPerCPUArchitecture = false -+ def enableSeparateBuildPerCPUArchitecture = true -``` - -Upload both these files to markets which support device targeting, such as [Google Play](https://developer.android.com/google/play/publishing/multiple-apks.html) and [Amazon AppStore](https://developer.amazon.com/docs/app-submission/device-filtering-and-compatibility.html), and the users will automatically get the appropriate APK. If you want to upload to other markets, such as [APKFiles](https://www.apkfiles.com/), which do not support multiple APKs for a single app, change the following line as well to create the default universal APK with binaries for both CPUs. - -```diff -- universalApk false // If true, also generate a universal APK -+ universalApk true // If true, also generate a universal APK -``` - -### Enabling Proguard to reduce the size of the APK (optional) - -Proguard is a tool that can slightly reduce the size of the APK. It does this by stripping parts of the React Native Java bytecode (and its dependencies) that your app is not using. - -_**IMPORTANT**: Make sure to thoroughly test your app if you've enabled Proguard. Proguard often requires configuration specific to each native library you're using. See `app/proguard-rules.pro`._ - -To enable Proguard, edit `android/app/build.gradle`: - -```gradle -/** - * Run Proguard to shrink the Java bytecode in release builds. - */ -def enableProguardInReleaseBuilds = true -``` - -### Migrating old Android React Native apps to use App Signing by Google Play - -If you are migrating from previous version of React Native chances are your app does not use App Signing by Google Play feature. We recommend you enable that in order to take advantage from things like automatic app splitting. In order to migrate from the old way of signing you need to start by [generating new upload key](#generating-an-upload-key) and then replacing release signing config in `android/app/build.gradle` to use the upload key instead of the release one (see section about [adding signing config to gradle](#adding-signing-config-to-your-app-s-gradle-config)). Once that's done you should follow the [instructions from Google Play Help website](https://support.google.com/googleplay/android-developer/answer/7384423) in order to send your original release key to Google Play. diff --git a/website/versioned_docs/version-0.5/slider.md b/website/versioned_docs/version-0.5/slider.md deleted file mode 100644 index 21af368deda..00000000000 --- a/website/versioned_docs/version-0.5/slider.md +++ /dev/null @@ -1,246 +0,0 @@ ---- -id: version-0.5-slider -title: Slider -original_id: slider ---- - -A component used to select a single value from a range of values. - -### Usage - -The example below shows how to use `Slider` to change a value used by `Text`. The value is stored using the state of the root component (`App`). The same component subscribes to the `onValueChange` of `Slider` and changes the value using `setState`. - -```jsx -import React from 'react'; -import { StyleSheet, Text, View, Slider } from 'react-native'; - -export default class App extends React.Component { - constructor(props) { - super(props); - this.state = { - value: 50 - }; - } - - change(value) { - this.setState(() => { - return { - value: parseFloat(value) - }; - }); - } - - render() { - const { value } = this.state; - return ( - - {String(value)} - - - ); - } -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - flexDirection: 'column', - justifyContent: 'center' - }, - text: { - fontSize: 50, - textAlign: 'center' - } -}); -``` - -### Props - -- [View props...](view.md#props) -- [`style`](slider.md#style) -- [`disabled`](slider.md#disabled) -- [`maximumValue`](slider.md#maximumvalue) -- [`minimumTrackTintColor`](slider.md#minimumtracktintcolor) -- [`minimumValue`](slider.md#minimumvalue) -- [`onSlidingComplete`](slider.md#onslidingcomplete) -- [`onValueChange`](slider.md#onvaluechange) -- [`step`](slider.md#step) -- [`maximumTrackTintColor`](slider.md#maximumtracktintcolor) -- [`testID`](slider.md#testid) -- [`value`](slider.md#value) -- [`thumbTintColor`](slider.md#thumbtintcolor) -- [`maximumTrackImage`](slider.md#maximumtrackimage) -- [`minimumTrackImage`](slider.md#minimumtrackimage) -- [`thumbImage`](slider.md#thumbimage) -- [`trackImage`](slider.md#trackimage) - ---- - -# Reference - -## Props - -### `style` - -Used to style and layout the `Slider`. See `StyleSheet.js` and `ViewStylePropTypes.js` for more info. - -| Type | Required | -| --------------------------- | -------- | -| [View.style](view.md#style) | No | - ---- - -### `disabled` - -If true the user won't be able to move the slider. Default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `maximumValue` - -Initial maximum value of the slider. Default value is 1. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `minimumTrackTintColor` - -The color used for the track to the left of the button. Overrides the default blue gradient image on iOS. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `minimumValue` - -Initial minimum value of the slider. Default value is 0. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `onSlidingComplete` - -Callback that is called when the user releases the slider, regardless if the value has changed. The current value is passed as an argument to the callback handler. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onValueChange` - -Callback continuously called while the user is dragging the slider. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `step` - -Step value of the slider. The value should be between 0 and (maximumValue - minimumValue). Default value is 0. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `maximumTrackTintColor` - -The color used for the track to the right of the button. Overrides the default blue gradient image on iOS. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `testID` - -Used to locate this view in UI automation tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `value` - -Initial value of the slider. The value should be between minimumValue and maximumValue, which default to 0 and 1 respectively. Default value is 0. - -_This is not a controlled component_, you don't need to update the value during dragging. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `thumbTintColor` - -Color of the foreground switch grip. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `maximumTrackImage` - -Assigns a maximum track image. Only static images are supported. The leftmost pixel of the image will be stretched to fill the track. - -| Type | Required | Platform | -| ----------------------------------------- | -------- | -------- | -| [Image.propTypes.source](image.md#source) | No | iOS | - ---- - -### `minimumTrackImage` - -Assigns a minimum track image. Only static images are supported. The rightmost pixel of the image will be stretched to fill the track. - -| Type | Required | Platform | -| ----------------------------------------- | -------- | -------- | -| [Image.propTypes.source](image.md#source) | No | iOS | - ---- - -### `thumbImage` - -Sets an image for the thumb. Only static images are supported. - -| Type | Required | Platform | -| ----------------------------------------- | -------- | -------- | -| [Image.propTypes.source](image.md#source) | No | iOS | - ---- - -### `trackImage` - -Assigns a single image for the track. Only static images are supported. The center pixel of the image will be stretched to fill the track. - -| Type | Required | Platform | -| ----------------------------------------- | -------- | -------- | -| [Image.propTypes.source](image.md#source) | No | iOS | diff --git a/website/versioned_docs/version-0.5/snapshotviewios.md b/website/versioned_docs/version-0.5/snapshotviewios.md deleted file mode 100644 index d93a7b29cd0..00000000000 --- a/website/versioned_docs/version-0.5/snapshotviewios.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -id: version-0.5-snapshotviewios -title: SnapshotViewIOS -original_id: snapshotviewios ---- - -### Props - -- [View props...](view.md#props) -- [`onSnapshotReady`](snapshotviewios.md#onsnapshotready) -- [`testIdentifier`](snapshotviewios.md#testidentifier) - ---- - -# Reference - -## Props - -### `onSnapshotReady` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `testIdentifier` - -| Type | Required | -| ------ | -------- | -| string | No | diff --git a/website/versioned_docs/version-0.5/state.md b/website/versioned_docs/version-0.5/state.md deleted file mode 100644 index d41b26767d4..00000000000 --- a/website/versioned_docs/version-0.5/state.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: version-0.5-state -title: State -original_id: state ---- - -There are two types of data that control a component: `props` and `state`. `props` are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use `state`. - -In general, you should initialize `state` in the constructor, and then call `setState` when you want to change it. - -For example, let's say we want to make text that blinks all the time. The text itself gets set once when the blinking component gets created, so the text itself is a `prop`. The "whether the text is currently on or off" changes over time, so that should be kept in `state`. - -```SnackPlayer name=State -import React, { Component } from 'react'; -import { Text, View } from 'react-native'; - -class Blink extends Component { - - componentDidMount(){ - // Toggle the state every second - setInterval(() => ( - this.setState(previousState => ( - { isShowingText: !previousState.isShowingText } - )) - ), 1000); - } - - //state object - state = { isShowingText: true }; - - render() { - if (!this.state.isShowingText) { - return null; - } - - return ( - {this.props.text} - ); - } -} - -export default class BlinkApp extends Component { - render() { - return ( - - - - - - - ); - } -} -``` - -In a real application, you probably won't be setting state with a timer. You might set state when you have new data from the server, or from user input. You can also use a state container like [Redux](https://redux.js.org/) or [Mobx](https://mobx.js.org/) to control your data flow. In that case you would use Redux or Mobx to modify your state rather than calling `setState` directly. - -When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks. - -State works the same way as it does in React, so for more details on handling state, you can look at the [React.Component API](https://reactjs.org/docs/react-component.html#setstate). At this point, you might be annoyed that most of our examples so far use the default text color. To customize the text color, you will have to [learn about Style](style.md). diff --git a/website/versioned_docs/version-0.5/statusbar.md b/website/versioned_docs/version-0.5/statusbar.md deleted file mode 100644 index 3da93e233ae..00000000000 --- a/website/versioned_docs/version-0.5/statusbar.md +++ /dev/null @@ -1,262 +0,0 @@ ---- -id: version-0.5-statusbar -title: StatusBar -original_id: statusbar ---- - -Component to control the app status bar. - -### Usage with Navigator - -It is possible to have multiple `StatusBar` components mounted at the same time. The props will be merged in the order the `StatusBar` components were mounted. One use case is to specify status bar styles per route using `Navigator`. - -``` - - - - - - } - /> - -``` - -### Imperative API - -For cases where using a component is not ideal, there is also an imperative API exposed as static functions on the component. It is however not recommended to use the static API and the component for the same prop because any value set by the static API will get overriden by the one set by the component in the next render. - -### Constants - -`currentHeight` (Android only) The current height of the status bar on the device. - -### Props - -- [`animated`](statusbar.md#animated) -- [`barStyle`](statusbar.md#barstyle) -- [`hidden`](statusbar.md#hidden) -- [`backgroundColor`](statusbar.md#backgroundcolor) -- [`translucent`](statusbar.md#translucent) -- [`networkActivityIndicatorVisible`](statusbar.md#networkactivityindicatorvisible) -- [`showHideTransition`](statusbar.md#showhidetransition) - -### Methods - -- [`setHidden`](statusbar.md#sethidden) -- [`setBarStyle`](statusbar.md#setbarstyle) -- [`setNetworkActivityIndicatorVisible`](statusbar.md#setnetworkactivityindicatorvisible) -- [`setBackgroundColor`](statusbar.md#setbackgroundcolor) -- [`setTranslucent`](statusbar.md#settranslucent) - -### Type Definitions - -- [`StatusBarStyle`](statusbar.md#statusbarstyle) -- [`StatusBarAnimation`](statusbar.md#statusbaranimation) - ---- - -# Reference - -## Props - -### `animated` - -If the transition between status bar property changes should be animated. Supported for backgroundColor, barStyle and hidden. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `barStyle` - -Sets the color of the status bar text. - -| Type | Required | -| ------------------------------------------------ | -------- | -| enum('default', 'light-content', 'dark-content') | No | - ---- - -### `hidden` - -If the status bar is hidden. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `backgroundColor` - -The background color of the status bar. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `translucent` - -If the status bar is translucent. When translucent is set to true, the app will draw under the status bar. This is useful when using a semi transparent status bar color. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `networkActivityIndicatorVisible` - -If the network activity indicator should be visible. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `showHideTransition` - -The transition effect when showing and hiding the status bar using the `hidden` prop. Defaults to 'fade'. - -| Type | Required | Platform | -| --------------------- | -------- | -------- | -| enum('fade', 'slide') | No | iOS | - -## Methods - -### `setHidden()` - -```jsx -StatusBar.setHidden( - (hidden: boolean), - ([animation]: StatusBarAnimation) -); -``` - -Show or hide the status bar. - -**Parameters:** - -| Name | Type | Required | Description | -| --------- | ----------------------------------------------------- | -------- | ---------------------------------------------------------------- | -| hidden | boolean | Yes | Hide the status bar. | -| animation | [StatusBarAnimation](statusbar.md#statusbaranimation) | No | Optional animation when changing the status bar hidden property. | - ---- - -### `setBarStyle()` - -```jsx -StatusBar.setBarStyle( - (style: StatusBarStyle), - ([animated]: boolean) -); -``` - -Set the status bar style. - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | --------------------------------------------- | -------- | ------------------------- | -| style | [StatusBarStyle](statusbar.md#statusbarstyle) | Yes | Status bar style to set | -| animated | boolean | No | Animate the style change. | - ---- - -### `setNetworkActivityIndicatorVisible()` - -```jsx -StatusBar.setNetworkActivityIndicatorVisible((visible: boolean)); -``` - -Control the visibility of the network activity indicator. - -**Parameters:** - -| Name | Type | Required | Description | -| ------- | ------- | -------- | ------------------- | -| visible | boolean | Yes | Show the indicator. | - ---- - -### `setBackgroundColor()` - -```jsx -StatusBar.setBackgroundColor( - (color: string), - ([animated]: boolean) -); -``` - -Set the background color for the status bar. - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | ------- | -------- | ------------------------- | -| color | string | Yes | Background color. | -| animated | boolean | No | Animate the style change. | - ---- - -### `setTranslucent()` - -```jsx -StatusBar.setTranslucent((translucent: boolean)); -``` - -Control the translucency of the status bar. - -**Parameters:** - -| Name | Type | Required | Description | -| ----------- | ------- | -------- | ------------------- | -| translucent | boolean | Yes | Set as translucent. | - -## Type Definitions - -### StatusBarStyle - -Status bar style - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| ------------- | ---------------------------------------------------------- | -| default | Default status bar style (dark for iOS, light for Android) | -| light-content | Dark background, white texts and icons | -| dark-content | Light background, dark texts and icons | - ---- - -### StatusBarAnimation - -Status bar animation. - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| ----- | --------------- | -| none | No animation | -| fade | Fade animation | -| slide | Slide animation | diff --git a/website/versioned_docs/version-0.5/statusbarios.md b/website/versioned_docs/version-0.5/statusbarios.md deleted file mode 100644 index 4b4509fd223..00000000000 --- a/website/versioned_docs/version-0.5/statusbarios.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -id: version-0.5-statusbarios -title: StatusBarIOS -original_id: statusbarios ---- - -### Methods - -- [`setStyle`](statusbarios.md#setstyle) -- [`setHidden`](statusbarios.md#sethidden) - -### Properties - -- [`Style`](statusbarios.md#style) -- [`Animation`](statusbarios.md#animation) - ---- - -# Reference - -## Methods - -### `setStyle()` - -```jsx -static setStyle(style, animated?) -``` - ---- - -### `setHidden()` - -```jsx -static setHidden(hidden, animation) -``` - -## Properties - ---- diff --git a/website/versioned_docs/version-0.5/style.md b/website/versioned_docs/version-0.5/style.md deleted file mode 100644 index bfc4733e1f8..00000000000 --- a/website/versioned_docs/version-0.5/style.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -id: version-0.5-style -title: Style -original_id: style ---- - -With React Native, you style your application using JavaScript. All of the core components accept a prop named `style`. The style names and [values](colors.md) usually match how CSS works on the web, except names are written using camel casing, e.g. `backgroundColor` rather than `background-color`. - -The `style` prop can be a plain old JavaScript object. That's the simplest and what we usually use for example code. You can also pass an array of styles - the last style in the array has precedence, so you can use this to inherit styles. - -As a component grows in complexity, it is often cleaner to use `StyleSheet.create` to define several styles in one place. Here's an example: - -```SnackPlayer name=Style -import React, { Component } from 'react'; -import { StyleSheet, Text, View } from 'react-native'; - -const styles = StyleSheet.create({ - bigBlue: { - color: 'blue', - fontWeight: 'bold', - fontSize: 30, - }, - red: { - color: 'red', - }, -}); - -export default class LotsOfStyles extends Component { - render() { - return ( - - just red - just bigBlue - bigBlue, then red - red, then bigBlue - - ); - } -} -``` - -One common pattern is to make your component accept a `style` prop which in turn is used to style subcomponents. You can use this to make styles "cascade" the way they do in CSS. - -There are a lot more ways to customize text style. Check out the [Text component reference](text.md) for a complete list. - -Now you can make your text beautiful. The next step in becoming a style master is to [learn how to control component size](height-and-width.md). diff --git a/website/versioned_docs/version-0.5/stylesheet.md b/website/versioned_docs/version-0.5/stylesheet.md deleted file mode 100644 index 54381f43441..00000000000 --- a/website/versioned_docs/version-0.5/stylesheet.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: version-0.5-stylesheet -title: StyleSheet -original_id: stylesheet ---- - -A StyleSheet is an abstraction similar to CSS StyleSheets - -Create a new StyleSheet: - -``` -var styles = StyleSheet.create({ - container: { - borderRadius: 4, - borderWidth: 0.5, - borderColor: '#d6d7da', - }, - title: { - fontSize: 19, - fontWeight: 'bold', - }, - activeTitle: { - color: 'red', - }, -}); -``` - -Use a StyleSheet: - -``` - - - -``` - -Code quality: - -- By moving styles away from the render function, you're making the code easier to understand. -- Naming the styles is a good way to add meaning to the low level components in the render function. - -Performance: - -- Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time. -- It also allows to send the style only once through the bridge. All subsequent uses are going to refer an id (not implemented yet). - -### Methods - -- [`create`](stylesheet.md#create) - ---- - -# Reference - -## Methods - -### `create()` - -```jsx -static create(obj) -``` diff --git a/website/versioned_docs/version-0.5/switch.md b/website/versioned_docs/version-0.5/switch.md deleted file mode 100644 index 91774a68780..00000000000 --- a/website/versioned_docs/version-0.5/switch.md +++ /dev/null @@ -1,96 +0,0 @@ ---- -id: version-0.5-switch -title: Switch -original_id: switch ---- - -Renders a boolean input. - -This is a controlled component that requires an `onValueChange` callback that updates the `value` prop in order for the component to reflect user actions. If the `value` prop is not updated, the component will continue to render the supplied `value` prop instead of the expected result of any user actions. - -@keyword checkbox @keyword toggle - -### Props - -- [View props...](view.md#props) -- [`disabled`](switch.md#disabled) -- [`onTintColor`](switch.md#ontintcolor) -- [`onValueChange`](switch.md#onvaluechange) -- [`testID`](switch.md#testid) -- [`thumbTintColor`](switch.md#thumbtintcolor) -- [`tintColor`](switch.md#tintcolor) -- [`value`](switch.md#value) - ---- - -# Reference - -## Props - -### `disabled` - -If true the user won't be able to toggle the switch. Default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onTintColor` - -Background color when the switch is turned on. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `onValueChange` - -Invoked with the new value when the value changes. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `thumbTintColor` - -Color of the foreground switch grip. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `tintColor` - -Border color on iOS and background color on Android when the switch is turned off. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `value` - -The value of the switch. If true the switch will be turned on. Default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | diff --git a/website/versioned_docs/version-0.5/systrace.md b/website/versioned_docs/version-0.5/systrace.md deleted file mode 100644 index 4429a6243ea..00000000000 --- a/website/versioned_docs/version-0.5/systrace.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: version-0.5-systrace -title: Systrace -original_id: systrace ---- - -### Methods - -- [`installReactHook`](systrace.md#installreacthook) -- [`setEnabled`](systrace.md#setenabled) -- [`isEnabled`](systrace.md#isenabled) -- [`beginEvent`](systrace.md#beginevent) -- [`endEvent`](systrace.md#endevent) -- [`beginAsyncEvent`](systrace.md#beginasyncevent) -- [`endAsyncEvent`](systrace.md#endasyncevent) -- [`counterEvent`](systrace.md#counterevent) -- [`attachToRelayProfiler`](systrace.md#attachtorelayprofiler) -- [`swizzleJSON`](systrace.md#swizzlejson) -- [`measureMethods`](systrace.md#measuremethods) -- [`measure`](systrace.md#measure) - ---- - -# Reference - -## Methods - -### `installReactHook()` - -```jsx -static installReactHook(useFiber) -``` - ---- - -### `setEnabled()` - -```jsx -static setEnabled(enabled) -``` - ---- - -### `isEnabled()` - -```jsx -static isEnabled() -``` - ---- - -### `beginEvent()` - -```jsx -static beginEvent(profileName?, args?) -``` - -beginEvent/endEvent for starting and then ending a profile within the same call stack frame - ---- - -### `endEvent()` - -```jsx -static endEvent() -``` - ---- - -### `beginAsyncEvent()` - -```jsx -static beginAsyncEvent(profileName?) -``` - -beginAsyncEvent/endAsyncEvent for starting and then ending a profile where the end can either occur on another thread or out of the current stack frame, eg await the returned cookie variable should be used as input into the endAsyncEvent call to end the profile - ---- - -### `endAsyncEvent()` - -```jsx -static endAsyncEvent(profileName?, cookie?) -``` - ---- - -### `counterEvent()` - -```jsx -static counterEvent(profileName?, value?) -``` - -counterEvent registers the value to the profileName on the systrace timeline - ---- - -### `attachToRelayProfiler()` - -```jsx -static attachToRelayProfiler(relayProfiler) -``` - -Relay profiles use await calls, so likely occur out of current stack frame therefore async variant of profiling is used - ---- - -### `swizzleJSON()` - -```jsx -static swizzleJSON() -``` - -This is not called by default due to perf overhead but it's useful if you want to find traces which spend too much time in JSON. - ---- - -### `measureMethods()` - -```jsx -static measureMethods(object, objectName, methodNames) -``` - -Measures multiple methods of a class. For example, you can do: - -```jsx -Systrace.measureMethods(JSON, 'JSON', ['parse', 'stringify']); -``` - -**Parameters:** - -| Name | Type | Required | Description | -| ----------- | ------ | -------- | ---------------------------------------------- | -| object | any | Yes | | -| objectName | string | Yes | | -| methodNames | array | Yes | Map from method names to method display names. | - ---- - -### `measure()` - -```jsx -static measure(objName, fnName, func) -``` - -Returns an profiled version of the input function. For example, you can: - -```jsx -JSON.parse = Systrace.measure('JSON', 'parse', JSON.parse); -``` - -**Parameters:** - -| Name | Type | Required | Description | -| ------- | -------- | -------- | ----------- | -| objName | string | Yes | | -| fnName | string | Yes | | -| func | function | Yes | | diff --git a/website/versioned_docs/version-0.5/tabbarios-item.md b/website/versioned_docs/version-0.5/tabbarios-item.md deleted file mode 100644 index c790be3ea7f..00000000000 --- a/website/versioned_docs/version-0.5/tabbarios-item.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: version-0.5-tabbarios-item -title: TabBarIOS.Item -original_id: tabbarios-item ---- - -### Props - -- [`badge`](tabbarios-item.md#badge) -- [`icon`](tabbarios-item.md#icon) -- [`onPress`](tabbarios-item.md#onpress) -- [`selected`](tabbarios-item.md#selected) -- [`selectedIcon`](tabbarios-item.md#selectedicon) -- [`style`](tabbarios-item.md#style) -- [`systemIcon`](tabbarios-item.md#systemicon) -- [`title`](tabbarios-item.md#title) - ---- - -# Reference - -## Props - -### `badge` - -Little red bubble that sits at the top right of the icon. - -| Type | Required | -| --------------- | -------- | -| string, ,number | No | - ---- - -### `icon` - -A custom icon for the tab. It is ignored when a system icon is defined. - -| Type | Required | -| ---------------------- | -------- | -| Image.propTypes.source | No | - ---- - -### `onPress` - -Callback when this tab is being selected, you should change the state of your component to set selected={true}. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `selected` - -It specifies whether the children are visible or not. If you see a blank content, you probably forgot to add a selected one. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `selectedIcon` - -A custom icon when the tab is selected. It is ignored when a system icon is defined. If left empty, the icon will be tinted in blue. - -| Type | Required | -| ---------------------- | -------- | -| Image.propTypes.source | No | - ---- - -### `style` - -React style object. - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `systemIcon` - -Items comes with a few predefined system icons. Note that if you are using them, the title and selectedIcon will be overriden with the system ones. - -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | -| enum('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated') | No | - ---- - -### `title` - -Text that appears under the icon. It is ignored when a system icon is defined. - -| Type | Required | -| ------ | -------- | -| string | No | diff --git a/website/versioned_docs/version-0.5/tabbarios.md b/website/versioned_docs/version-0.5/tabbarios.md deleted file mode 100644 index e29416f502e..00000000000 --- a/website/versioned_docs/version-0.5/tabbarios.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -id: version-0.5-tabbarios -title: TabBarIOS -original_id: tabbarios ---- - -### Props - -- [`style`](tabbarios.md#style) - ---- - -# Reference - -## Props - -### `style` - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | diff --git a/website/versioned_docs/version-0.5/text-style-props.md b/website/versioned_docs/version-0.5/text-style-props.md deleted file mode 100644 index 3cee21c7911..00000000000 --- a/website/versioned_docs/version-0.5/text-style-props.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: version-0.5-text-style-props -title: Text Style Props -original_id: text-style-props ---- - -### Props - -- [`color`](text-style-props.md#color) -- [`containerBackgroundColor`](text-style-props.md#containerbackgroundcolor) -- [`fontFamily`](text-style-props.md#fontfamily) -- [`fontSize`](text-style-props.md#fontsize) -- [`fontStyle`](text-style-props.md#fontstyle) -- [`fontWeight`](text-style-props.md#fontweight) -- [`letterSpacing`](text-style-props.md#letterspacing) -- [`lineHeight`](text-style-props.md#lineheight) -- [`textAlign`](text-style-props.md#textalign) -- [`writingDirection`](text-style-props.md#writingdirection) - ---- - -# Reference - -## Props - -### `color` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `containerBackgroundColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `fontFamily` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `fontSize` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `fontStyle` - -| Type | Required | -| ------------------------ | -------- | -| enum('normal', 'italic') | No | - ---- - -### `fontWeight` - -| Type | Required | -| ------------------------------------------------------------------------------------- | -------- | -| enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') | No | - ---- - -### `letterSpacing` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `lineHeight` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `textAlign` - -| Type | Required | -| --------------------------------------- | -------- | -| enum('auto', 'left', 'right', 'center') | No | - ---- - -### `writingDirection` - -| Type | Required | -| -------------------------- | -------- | -| enum('auto', 'ltr', 'rtl') | No | diff --git a/website/versioned_docs/version-0.5/text.md b/website/versioned_docs/version-0.5/text.md deleted file mode 100644 index c73596f5f15..00000000000 --- a/website/versioned_docs/version-0.5/text.md +++ /dev/null @@ -1,184 +0,0 @@ ---- -id: version-0.5-text -title: Text -original_id: text ---- - -A React component for displaying text which supports nesting, styling, and touch handling. In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines: - -``` -renderText: function() { - return ( - - - {this.state.titleText + '\n\n'} - - - {this.state.bodyText} - - - ); -}, -... -var styles = StyleSheet.create({ - baseText: { - fontFamily: 'Cochin', - }, - titleText: { - fontSize: 20, - fontWeight: 'bold', - }, -}; -``` - -### Props - -- [`numberOfLines`](text.md#numberoflines) -- [`onLayout`](text.md#onlayout) -- [`onPress`](text.md#onpress) -- [`style`](text.md#style) -- [`suppressHighlighting`](text.md#suppresshighlighting) -- [`testID`](text.md#testid) - -### Methods - -- [`onStartShouldSetResponder`](text.md#onstartshouldsetresponder) -- [`handleResponderTerminationRequest`](text.md#handleresponderterminationrequest) -- [`handleResponderGrant`](text.md#handlerespondergrant) -- [`handleResponderMove`](text.md#handlerespondermove) -- [`handleResponderRelease`](text.md#handleresponderrelease) -- [`handleResponderTerminate`](text.md#handleresponderterminate) - ---- - -# Reference - -## Props - -### `numberOfLines` - -Used to truncate the text with an elipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with - -{nativeEvent: { layout: {x, y, width, height}}}. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPress` - -This function is called on press. Text intrinsically supports press handling with a default highlight state (which can be disabled with `suppressHighlighting`). - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [View Style Props...](view-style-props.md#style) - -- **`color`**: string - -- **`containerBackgroundColor`**: string - -- **`fontFamily`**: string - -- **`fontSize`**: number - -- **`fontStyle`**: enum('normal', 'italic') - -- **`fontWeight`**: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') - -- **`letterSpacing`**: number - -- **`lineHeight`**: number - -- **`textAlign`**: enum('auto', 'left', 'right', 'center') - -- **`writingDirection`**: enum('auto', 'ltr', 'rtl') - ---- - -### `suppressHighlighting` - -When true, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - -## Methods - -### `onStartShouldSetResponder()` - -```jsx -onStartShouldSetResponder(): -``` - ---- - -### `handleResponderTerminationRequest()` - -```jsx -handleResponderTerminationRequest(): -``` - ---- - -### `handleResponderGrant()` - -```jsx -handleResponderGrant((e: SyntheticEvent), (dispatchID: string)); -``` - ---- - -### `handleResponderMove()` - -```jsx -handleResponderMove((e: SyntheticEvent)); -``` - ---- - -### `handleResponderRelease()` - -```jsx -handleResponderRelease((e: SyntheticEvent)); -``` - ---- - -### `handleResponderTerminate()` - -```jsx -handleResponderTerminate((e: SyntheticEvent)); -``` diff --git a/website/versioned_docs/version-0.5/textinput.md b/website/versioned_docs/version-0.5/textinput.md deleted file mode 100644 index 2283692a602..00000000000 --- a/website/versioned_docs/version-0.5/textinput.md +++ /dev/null @@ -1,342 +0,0 @@ ---- -id: version-0.5-textinput -title: TextInput -original_id: textinput ---- - -A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto- correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. - -The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example: - -``` - - this.setState({input: text})} - /> - {'user input: ' + this.state.input} - -``` - -The `value` prop can be used to set the value of the input in order to make the state of the component clear, but does not behave as a true controlled component by default because all operations are asynchronous. Setting `value` once is like setting the default value, but you can change it continuously based on `onChangeText` events as well. If you really want to force the component to always revert to the value you are setting, you can set `controlled={true}`. - -The `multiline` prop is not supported in all releases, and some props are multiline only. - -### Props - -- [`onChangeText`](textinput.md#onchangetext) -- [`autoCapitalize`](textinput.md#autocapitalize) -- [`autoFocus`](textinput.md#autofocus) -- [`bufferDelay`](textinput.md#bufferdelay) -- [`clearButtonMode`](textinput.md#clearbuttonmode) -- [`clearTextOnFocus`](textinput.md#cleartextonfocus) -- [`controlled`](textinput.md#controlled) -- [`editable`](textinput.md#editable) -- [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) -- [`keyboardType`](textinput.md#keyboardtype) -- [`multiline`](textinput.md#multiline) -- [`onBlur`](textinput.md#onblur) -- [`onChange`](textinput.md#onchange) -- [`autoCorrect`](textinput.md#autocorrect) -- [`onEndEditing`](textinput.md#onendediting) -- [`onFocus`](textinput.md#onfocus) -- [`onLayout`](textinput.md#onlayout) -- [`onSubmitEditing`](textinput.md#onsubmitediting) -- [`password`](textinput.md#password) -- [`placeholder`](textinput.md#placeholder) -- [`placeholderTextColor`](textinput.md#placeholdertextcolor) -- [`returnKeyType`](textinput.md#returnkeytype) -- [`selectTextOnFocus`](textinput.md#selecttextonfocus) -- [`selectionState`](textinput.md#selectionstate) -- [`style`](textinput.md#style) -- [`testID`](textinput.md#testid) -- [`value`](textinput.md#value) - -### Methods - -- [`isFocused`](textinput.md#isfocused) - ---- - -# Reference - -## Props - -### `onChangeText` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `autoCapitalize` - -Can tell TextInput to automatically capitalize certain characters. - -- characters: all characters, -- words: first letter of each word -- sentences: first letter of each sentence (default) -- none: don't auto capitalize anything - -| Type | Required | -| ------------------------------------------------ | -------- | -| enum('none', 'sentences', 'words', 'characters') | No | - ---- - -### `autoFocus` - -If true, focuses the input on componentDidMount. Default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `bufferDelay` - -This helps avoid drops characters due to race conditions between JS and the native text input. The default should be fine, but if you're potentially doing very slow operations on every keystroke then you may want to try increasing this. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `clearButtonMode` - -When the clear button should appear on the right side of the text view - -| Type | Required | -| ---------------------------------------------------------- | -------- | -| enum('never', 'while-editing', 'unless-editing', 'always') | No | - ---- - -### `clearTextOnFocus` - -If true, clears the text field automatically when editing begins - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `controlled` - -If you really want this to behave as a controlled component, you can set this true, but you will probably see flickering, dropped keystrokes, and/or laggy typing, depending on how you process onChange events. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `editable` - -If false, text is not editable. Default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `enablesReturnKeyAutomatically` - -If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. Default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `keyboardType` - -Determines which keyboard to open, e.g.`numeric`. - -| Type | Required | -| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| enum('default', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'numeric', 'email-address') | No | - ---- - -### `multiline` - -If true, the text input can be multiple lines. Default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onBlur` - -Callback that is called when the text input is blurred - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChange` - -Callback that is called when the text input's text changes. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `autoCorrect` - -If false, disables auto-correct. Default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onEndEditing` - -Callback that is called when text input ends. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onFocus` - -Callback that is called when the text input is focused - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with {x, y, width, height}. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onSubmitEditing` - -Callback that is called when the text input's submit button is pressed. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `password` - -If true, the text input obscures the text entered so that sensitive text like passwords stay secure. Default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `placeholder` - -The string that will be rendered before text input has been entered - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `placeholderTextColor` - -The text color of the placeholder string - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `returnKeyType` - -Determines how the return key should look. - -| Type | Required | -| ------------------------------------------------------------------------------------------------------------- | -------- | -| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | - ---- - -### `selectTextOnFocus` - -If true, selected the text automatically when editing begins - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `selectionState` - -See DocumentSelectionState.js, some state that is responsible for maintaining selection information for a document - -| Type | Required | -| ---------------------- | -------- | -| DocumentSelectionState | No | - ---- - -### `style` - -Styles - -| Type | Required | -| --------------------- | -------- | -| [Text](text.md#style) | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `value` - -The default value for the text input - -| Type | Required | -| ------ | -------- | -| string | No | - -## Methods - -### `isFocused()` - -```jsx -isFocused(): -``` diff --git a/website/versioned_docs/version-0.5/timepickerandroid.md b/website/versioned_docs/version-0.5/timepickerandroid.md deleted file mode 100644 index 32a44801f41..00000000000 --- a/website/versioned_docs/version-0.5/timepickerandroid.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -id: version-0.5-timepickerandroid -title: TimePickerAndroid -original_id: timepickerandroid ---- - -Opens the standard Android time picker dialog. - -### Example - -``` -try { - const {action, hour, minute} = await TimePickerAndroid.open({ - hour: 14, - minute: 0, - is24Hour: false, // Will display '2 PM' - }); - if (action !== TimePickerAndroid.dismissedAction) { - // Selected hour (0-23), minute (0-59) - } -} catch ({code, message}) { - console.warn('Cannot open time picker', message); -} -``` - -### Methods - -- [`open`](timepickerandroid.md#open) -- [`timeSetAction`](timepickerandroid.md#timesetaction) -- [`dismissedAction`](timepickerandroid.md#dismissedaction) - ---- - -# Reference - -## Methods - -### `open()` - -```jsx -TimePickerAndroid.open(options); -``` - -Opens the standard Android time picker dialog. - -The available keys for the `options` object are: - -- `hour` (0-23) - the hour to show, defaults to the current time -- `minute` (0-59) - the minute to show, defaults to the current time -- `is24Hour` (boolean) - If `true`, the picker uses the 24-hour format. If `false`, the picker shows an AM/PM chooser. If undefined, the default for the current locale is used. -- `mode` (`enum('clock', 'spinner', 'default')`) - set the time picker mode - - 'clock': Show a time picker in clock mode. - - 'spinner': Show a time picker in spinner mode. - - 'default': Show a default time picker based on Android versions. - -Returns a Promise which will be invoked an object containing `action`, `hour` (0-23), `minute` (0-59) if the user picked a time. If the user dismissed the dialog, the Promise will still be resolved with action being `TimePickerAndroid.dismissedAction` and all the other keys being undefined. **Always** check whether the `action` before reading the values. - ---- - -### `timeSetAction()` - -```jsx -TimePickerAndroid.timeSetAction(); -``` - -A time has been selected. - ---- - -### `dismissedAction()` - -```jsx -TimePickerAndroid.dismissedAction(); -``` - -The dialog has been dismissed. diff --git a/website/versioned_docs/version-0.5/timers.md b/website/versioned_docs/version-0.5/timers.md deleted file mode 100644 index 27fb762fe33..00000000000 --- a/website/versioned_docs/version-0.5/timers.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: version-0.5-timers -title: Timers -original_id: timers ---- - -Timers are an important part of an application and React Native implements the [browser timers](https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Timers). - -## Timers - -- setTimeout, clearTimeout -- setInterval, clearInterval -- setImmediate, clearImmediate -- requestAnimationFrame, cancelAnimationFrame - -`requestAnimationFrame(fn)` is not the same as `setTimeout(fn, 0)` - the former will fire after all the frame has flushed, whereas the latter will fire as quickly as possible (over 1000x per second on a iPhone 5S). - -`setImmediate` is executed at the end of the current JavaScript execution block, right before sending the batched response back to native. Note that if you call `setImmediate` within a `setImmediate` callback, it will be executed right away, it won't yield back to native in between. - -The `Promise` implementation uses `setImmediate` as its asynchronicity implementation. - -## InteractionManager - -One reason why well-built native apps feel so smooth is by avoiding expensive operations during interactions and animations. In React Native, we currently have a limitation that there is only a single JS execution thread, but you can use `InteractionManager` to make sure long-running work is scheduled to start after any interactions/animations have completed. - -Applications can schedule tasks to run after interactions with the following: - -```jsx -InteractionManager.runAfterInteractions(() => { - // ...long-running synchronous task... -}); -``` - -Compare this to other scheduling alternatives: - -- requestAnimationFrame(): for code that animates a view over time. -- setImmediate/setTimeout/setInterval(): run code later, note this may delay animations. -- runAfterInteractions(): run code later, without delaying active animations. - -The touch handling system considers one or more active touches to be an 'interaction' and will delay `runAfterInteractions()` callbacks until all touches have ended or been cancelled. - -InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion: - -```jsx -var handle = InteractionManager.createInteractionHandle(); -// run animation... (`runAfterInteractions` tasks are queued) -// later, on animation completion: -InteractionManager.clearInteractionHandle(handle); -// queued tasks run if all handles were cleared -``` diff --git a/website/versioned_docs/version-0.5/toastandroid.md b/website/versioned_docs/version-0.5/toastandroid.md deleted file mode 100644 index 9bf0befda1f..00000000000 --- a/website/versioned_docs/version-0.5/toastandroid.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: version-0.5-toastandroid -title: ToastAndroid -original_id: toastandroid ---- - -This exposes the native ToastAndroid module as a JS module. This has a function 'show' which takes the following parameters: - -1. String message: A string with the text to toast -2. int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG - -There is also a function `showWithGravity` to specify the layout gravity. May be ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER. - -The 'showWithGravityAndOffset' function adds on the ability to specify offset These offset values will translate to pixels. - -Basic usage: - -```jsx -ToastAndroid.show( - 'A pikachu appeared nearby !', - ToastAndroid.SHORT -); -ToastAndroid.showWithGravity( - 'All Your Base Are Belong To Us', - ToastAndroid.SHORT, - ToastAndroid.CENTER -); -ToastAndroid.showWithGravityAndOffset( - 'A wild toast appeared!', - ToastAndroid.LONG, - ToastAndroid.BOTTOM, - 25, - 50 -); -``` - -### Methods - -- [`show`](toastandroid.md#show) -- [`showWithGravity`](toastandroid.md#showwithgravity) -- [`showWithGravityAndOffset`](toastandroid.md#showwithgravityandoffset) - -### Properties - -- [`SHORT`](toastandroid.md#short) -- [`LONG`](toastandroid.md#long) -- [`TOP`](toastandroid.md#top) -- [`BOTTOM`](toastandroid.md#bottom) -- [`CENTER`](toastandroid.md#center) - ---- - -# Reference - -## Methods - -### `show()` - -```jsx -ToastAndroid.show(message, duration); -``` - ---- - -### `showWithGravity()` - -```jsx -ToastAndroid.showWithGravity(message, duration, gravity); -``` - ---- - -### `showWithGravityAndOffset()` - -```jsx -ToastAndroid.showWithGravityAndOffset( - message, - duration, - gravity, - xOffset, - yOffset -); -``` - -## Properties - -### `SHORT` - -```jsx -ToastAndroid.SHORT; -``` - ---- - -### `LONG` - -```jsx -ToastAndroid.LONG; -``` - ---- - -### `TOP` - -```jsx -ToastAndroid.TOP; -``` - ---- - -### `BOTTOM` - -```jsx -ToastAndroid.BOTTOM; -``` - ---- - -### `CENTER` - -```jsx -ToastAndroid.CENTER; -``` diff --git a/website/versioned_docs/version-0.5/toolbarandroid.md b/website/versioned_docs/version-0.5/toolbarandroid.md deleted file mode 100644 index 2a48b979152..00000000000 --- a/website/versioned_docs/version-0.5/toolbarandroid.md +++ /dev/null @@ -1,209 +0,0 @@ ---- -id: version-0.5-toolbarandroid -title: ToolbarAndroid -original_id: toolbarandroid ---- - -React component that wraps the Android-only [`Toolbar` widget][0]. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right. - -If the toolbar has an only child, it will be displayed between the title and actions. - -Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where `require('./some_icon.png')` translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using `require('./some_icon.png')` will do this automatically for you, so as long as you don't explicitly use e.g. `{uri: 'http://...'}`, you will be good. - -Example: - -``` -render: function() { - return ( - - ) -}, -onActionSelected: function(position) { - if (position === 0) { // index of 'Settings' - showSettings(); - } -} -``` - -[0]: https://developer.android.com/reference/android/support/v7/widget/Toolbar.html - -### Props - -- [View props...](view.md#props) -- [`overflowIcon`](toolbarandroid.md#overflowicon) -- [`actions`](toolbarandroid.md#actions) -- [`contentInsetStart`](toolbarandroid.md#contentinsetstart) -- [`logo`](toolbarandroid.md#logo) -- [`navIcon`](toolbarandroid.md#navicon) -- [`onActionSelected`](toolbarandroid.md#onactionselected) -- [`onIconClicked`](toolbarandroid.md#oniconclicked) -- [`contentInsetEnd`](toolbarandroid.md#contentinsetend) -- [`rtl`](toolbarandroid.md#rtl) -- [`subtitle`](toolbarandroid.md#subtitle) -- [`subtitleColor`](toolbarandroid.md#subtitlecolor) -- [`testID`](toolbarandroid.md#testid) -- [`title`](toolbarandroid.md#title) -- [`titleColor`](toolbarandroid.md#titlecolor) - ---- - -# Reference - -## Props - -### `overflowIcon` - -Sets the overflow icon. - -| Type | Required | -| ------------------- | -------- | -| optionalImageSource | No | - ---- - -### `actions` - -Sets possible actions on the toolbar as part of the action menu. These are displayed as icons or text on the right side of the widget. If they don't fit they are placed in an 'overflow' menu. - -This property takes an array of objects, where each object has the following keys: - -- `title`: **required**, the title of this action -- `icon`: the icon for this action, e.g. `require('./some_icon.png')` -- `show`: when to show this action as an icon or hide it in the overflow menu: `always`, `ifRoom` or `never` -- `showWithText`: boolean, whether to show text alongside the icon or not - -| Type | Required | -| --------------------------------------------------------------------------------------------------------------------- | -------- | -| array of object: {title: string,icon: optionalImageSource,show: enum('always', 'ifRoom', 'never'),showWithText: bool} | No | - ---- - -### `contentInsetStart` - -Sets the content inset for the toolbar starting edge. - -The content inset affects the valid area for Toolbar content other than the navigation button and menu. Insets define the minimum margin for these components and can be used to effectively align Toolbar content along well-known gridlines. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `logo` - -Sets the toolbar logo. - -| Type | Required | -| ------------------- | -------- | -| optionalImageSource | No | - ---- - -### `navIcon` - -Sets the navigation icon. - -| Type | Required | -| ------------------- | -------- | -| optionalImageSource | No | - ---- - -### `onActionSelected` - -Callback that is called when an action is selected. The only argument that is passed to the callback is the position of the action in the actions array. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onIconClicked` - -Callback called when the icon is selected. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `contentInsetEnd` - -Sets the content inset for the toolbar ending edge. - -The content inset affects the valid area for Toolbar content other than the navigation button and menu. Insets define the minimum margin for these components and can be used to effectively align Toolbar content along well-known gridlines. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `rtl` - -Used to set the toolbar direction to RTL. In addition to this property you need to add - -android:supportsRtl="true" - -to your application AndroidManifest.xml and then call `setLayoutDirection(LayoutDirection.RTL)` in your MainActivity `onCreate` method. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `subtitle` - -Sets the toolbar subtitle. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `subtitleColor` - -Sets the toolbar subtitle color. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `title` - -Sets the toolbar title. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `titleColor` - -Sets the toolbar title color. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | diff --git a/website/versioned_docs/version-0.5/touchablehighlight.md b/website/versioned_docs/version-0.5/touchablehighlight.md deleted file mode 100644 index 78c1c63f395..00000000000 --- a/website/versioned_docs/version-0.5/touchablehighlight.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: version-0.5-touchablehighlight -title: TouchableHighlight -original_id: touchablehighlight ---- - -A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view. The underlay comes from adding a view to the view hierarchy, which can 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. - -Example: - -``` -renderButton: function() { - return ( - - - - ); -}, -``` - -### Props - -- [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) - -* [`activeOpacity`](touchablehighlight.md#activeopacity) -* [`style`](touchablehighlight.md#style) -* [`underlayColor`](touchablehighlight.md#underlaycolor) - -### Methods - -- [`computeSyntheticState`](touchablehighlight.md#computesyntheticstate) - ---- - -# Reference - -## Props - -### `activeOpacity` - -Determines what the opacity of the wrapped view should be when touch is active. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `style` - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `underlayColor` - -The color of the underlay that will show through when the touch is active. - -| Type | Required | -| ------ | -------- | -| string | No | - -## Methods - -### `computeSyntheticState()` - -```jsx -computeSyntheticState(props); -``` diff --git a/website/versioned_docs/version-0.5/touchablenativefeedback.md b/website/versioned_docs/version-0.5/touchablenativefeedback.md deleted file mode 100644 index 6b7e9b5b853..00000000000 --- a/website/versioned_docs/version-0.5/touchablenativefeedback.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -id: version-0.5-touchablenativefeedback -title: TouchableNativeFeedback -original_id: touchablenativefeedback ---- - -A wrapper for making views respond properly to touches (Android only). On Android this component uses native state drawable to display touch feedback. - -At the moment it only supports having a single View instance as a child node, as it's implemented by replacing that View with another instance of RCTView node with some additional properties set. - -Background drawable of native feedback touchable can be customized with `background` property. - -Example: - -``` -renderButton: function() { - return ( - - - Button - - - ); -}, -``` - -### Props - -- [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) - -* [`background`](touchablenativefeedback.md#background) -* [`useForeground`](touchablenativefeedback.md#useforeground) - -### Methods - -- [`SelectableBackground`](touchablenativefeedback.md#selectablebackground) -- [`SelectableBackgroundBorderless`](touchablenativefeedback.md#selectablebackgroundborderless) -- [`Ripple`](touchablenativefeedback.md#ripple) -- [`canUseNativeForeground`](touchablenativefeedback.md#canusenativeforeground) - ---- - -# Reference - -## Props - -### `background` - -Determines the type of background drawable that's going to be used to display feedback. It takes an object with `type` property and extra data depending on the `type`. It's recommended to use one of the static methods to generate that dictionary. - -| Type | Required | -| ------------------ | -------- | -| backgroundPropType | No | - ---- - -### `useForeground` - -Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them. - -Check TouchableNativeFeedback.canUseNativeForeground() first, as this is only available on Android 6.0 and above. If you try to use this on older versions you will get a warning and fallback to background. - -| Type | Required | -| ---- | -------- | -| bool | No | - -## Methods - -### `SelectableBackground()` - -```jsx -TouchableNativeFeedback.SelectableBackground(); -``` - -Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). - ---- - -### `SelectableBackgroundBorderless()` - -```jsx -TouchableNativeFeedback.SelectableBackgroundBorderless(); -``` - -Creates an object that represent android theme's default background for borderless selectable elements (?android:attr/selectableItemBackgroundBorderless). Available on android API level 21+. - ---- - -### `Ripple()` - -```jsx -TouchableNativeFeedback.Ripple( - (color: string), - (borderless: boolean) -); -``` - -Creates an object that represents ripple drawable with specified color (as a string). If property `borderless` evaluates to true the ripple will render outside of the view bounds (see native actionbar buttons as an example of that behavior). This background type is available on Android API level 21+. - -**Parameters:** - -| Name | Type | Required | Description | -| ---------- | ------- | -------- | ------------------------------------------- | -| color | string | Yes | The ripple color | -| borderless | boolean | Yes | If the ripple can render outside its bounds | - ---- - -### `canUseNativeForeground()` - -```jsx -TouchableNativeFeedback.canUseNativeForeground(); -``` - -Whether native foreground ripple is available on the current version of Android. diff --git a/website/versioned_docs/version-0.5/touchableopacity.md b/website/versioned_docs/version-0.5/touchableopacity.md deleted file mode 100644 index 39cad226682..00000000000 --- a/website/versioned_docs/version-0.5/touchableopacity.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: version-0.5-touchableopacity -title: TouchableOpacity -original_id: touchableopacity ---- - -A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it. This is done without actually changing the view hierarchy, and in general can be added to an app without weird side-effects. - -Example: - -``` -renderButton: function() { - return ( - - - - ); -}, -``` - -### Props - -- [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) - -* [`activeOpacity`](touchableopacity.md#activeopacity) - -### Methods - -- [`setOpacityTo`](touchableopacity.md#setopacityto) - ---- - -# Reference - -## Props - -### `activeOpacity` - -Determines what the opacity of the wrapped view should be when touch is active. - -| Type | Required | -| ------ | -------- | -| number | No | - -## Methods - -### `setOpacityTo()` - -```jsx -setOpacityTo(value); -``` diff --git a/website/versioned_docs/version-0.5/touchablewithoutfeedback.md b/website/versioned_docs/version-0.5/touchablewithoutfeedback.md deleted file mode 100644 index 9ea69f78bd4..00000000000 --- a/website/versioned_docs/version-0.5/touchablewithoutfeedback.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: version-0.5-touchablewithoutfeedback -title: TouchableWithoutFeedback -original_id: touchablewithoutfeedback ---- - -Do not use unless you have a very good reason. All the elements that respond to press should have a visual feedback when touched. This is one of the primary reason a "web" app doesn't feel "native". - -### Props - -- [`onLongPress`](touchablewithoutfeedback.md#onlongpress) -- [`onPress`](touchablewithoutfeedback.md#onpress) -- [`onPressIn`](touchablewithoutfeedback.md#onpressin) -- [`onPressOut`](touchablewithoutfeedback.md#onpressout) - ---- - -# Reference - -## Props - -### `onLongPress` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPress` - -Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock). - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPressIn` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPressOut` - -| Type | Required | -| -------- | -------- | -| function | No | diff --git a/website/versioned_docs/version-0.5/transforms.md b/website/versioned_docs/version-0.5/transforms.md deleted file mode 100644 index 847cceebe01..00000000000 --- a/website/versioned_docs/version-0.5/transforms.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -id: version-0.5-transforms -title: Transforms -original_id: transforms ---- - -### Props - -- [`rotation`](transforms.md#rotation) -- [`scaleX`](transforms.md#scalex) -- [`scaleY`](transforms.md#scaley) -- [`transform`](transforms.md#transform) -- [`transformMatrix`](transforms.md#transformmatrix) -- [`translateX`](transforms.md#translatex) -- [`translateY`](transforms.md#translatey) - ---- - -# Reference - -## Props - -### `rotation` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `scaleX` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `scaleY` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `transform` - -| Type | Required | -| ----------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| array of object: {rotate: string}, ,object: {scaleX: number}, ,object: {scaleY: number}, ,object: {translateX: number}, ,object: {translateY: number} | No | - ---- - -### `transformMatrix` - -| Type | Required | -| --------------- | -------- | -| array of number | No | - ---- - -### `translateX` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `translateY` - -| Type | Required | -| ------ | -------- | -| number | No | diff --git a/website/versioned_docs/version-0.5/troubleshooting.md b/website/versioned_docs/version-0.5/troubleshooting.md deleted file mode 100644 index 303c13bc729..00000000000 --- a/website/versioned_docs/version-0.5/troubleshooting.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -id: version-0.5-troubleshooting -title: Troubleshooting -original_id: troubleshooting ---- - -These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try [searching for the issue in GitHub](https://github.com/facebook/react-native/issues/). - -### Port already in use - -The [Metro bundler][metro] runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses. - -#### Terminating a process on port 8081 - -Run the following command to find the id for the process that is listening on port 8081: - -``` -$ sudo lsof -i :8081 -``` - -Then run the following to terminate the process: - -``` -$ kill -9 -``` - -On Windows you can find the process using port 8081 using [Resource Monitor](https://stackoverflow.com/questions/48198/how-can-you-find-out-which-process-is-listening-on-a-port-on-windows) and stop it using Task Manager. - -#### Using a port other than 8081 - -You can configure the bundler to use a port other than 8081 by using the `port` parameter: - -``` -$ react-native start --port=8088 -``` - -You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of `8081` to your chosen port in the `node_modules/react-native/React/React.xcodeproj/project.pbxproj` file. - -### NPM locking error - -If you encounter an error such as `npm WARN locking Error: EACCES` while using the React Native CLI, try running the following: - -``` -sudo chown -R $USER ~/.npm -sudo chown -R $USER /usr/local/lib/node_modules -``` - -### Missing libraries for React - -If you added React Native manually to your project, make sure you have included all the relevant dependencies that you are using, like `RCTText.xcodeproj`, `RCTImage.xcodeproj`. Next, the binaries built by these dependencies have to be linked to your app binary. Use the `Linked Frameworks and Binaries` section in the Xcode project settings. More detailed steps are here: [Linking Libraries](linking-libraries-ios.md#content). - -If you are using CocoaPods, verify that you have added React along with the subspecs to the `Podfile`. For example, if you were using the ``, `` and `fetch()` APIs, you would need to add these in your `Podfile`: - -``` -pod 'React', :path => '../node_modules/react-native', :subspecs => [ - 'RCTText', - 'RCTImage', - 'RCTNetwork', - 'RCTWebSocket', -] -``` - -Next, make sure you have run `pod install` and that a `Pods/` directory has been created in your project with React installed. CocoaPods will instruct you to use the generated `.xcworkspace` file henceforth to be able to use these installed dependencies. - -#### React Native does not compile when being used as a CocoaPod - -There is a CocoaPods plugin called [cocoapods-fix-react-native](https://github.com/orta/cocoapods-fix-react-native) which handles any potential post-fixing of the source code due to differences when using a dependency manager. - -#### Argument list too long: recursive header expansion failed - -In the project's build settings, `User Search Header Paths` and `Header Search Paths` are two configs that specify where Xcode should look for `#import` header files specified in the code. For Pods, CocoaPods uses a default array of specific folders to look in. Verify that this particular config is not overwritten, and that none of the folders configured are too large. If one of the folders is a large folder, Xcode will attempt to recursively search the entire directory and throw above error at some point. - -To revert the `User Search Header Paths` and `Header Search Paths` build settings to their defaults set by CocoaPods - select the entry in the Build Settings panel, and hit delete. It will remove the custom override and return to the CocoaPod defaults. - -### No transports available - -React Native implements a polyfill for WebSockets. These [polyfills](https://github.com/facebook/react-native/blob/master/Libraries/Core/InitializeCore.js) are initialized as part of the react-native module that you include in your application through `import React from 'react'`. If you load another module that requires WebSockets, such as [Firebase](https://github.com/facebook/react-native/issues/3645), be sure to load/require it after react-native: - -``` -import React from 'react'; -import Firebase from 'firebase'; -``` - -## Shell Command Unresponsive Exception - -If you encounter a ShellCommandUnresponsiveException exception such as: - -``` -Execution failed for task ':app:installDebug'. - com.android.builder.testing.api.DeviceException: com.android.ddmlib.ShellCommandUnresponsiveException -``` - -Try [downgrading your Gradle version to 1.2.3](https://github.com/facebook/react-native/issues/2720) in `android/build.gradle`. - -## react-native init hangs - -If you run into issues where running `react-native init` hangs in your system, try running it again in verbose mode and referring to [#2797](https://github.com/facebook/react-native/issues/2797) for common causes: - -``` -react-native init --verbose -``` - -## Unable to start react-native package manager (on Linux) - -### Case 1: Error "code":"ENOSPC","errno":"ENOSPC" - -Issue caused by the number of directories [inotify](https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers) (used by watchman on Linux) can monitor. To solve it, run this command in your terminal window - -``` -echo fs.inotify.max_user_watches=582222 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p -``` - -[metro]: https://facebook.github.io/metro/ diff --git a/website/versioned_docs/version-0.5/tutorial.md b/website/versioned_docs/version-0.5/tutorial.md deleted file mode 100644 index 582ba77628f..00000000000 --- a/website/versioned_docs/version-0.5/tutorial.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -id: version-0.5-tutorial -title: Learn the Basics -original_id: tutorial ---- - -React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, `state`, and `props`. If you already know React, you still need to learn some React-Native-specific stuff, like the native components. This tutorial is aimed at all audiences, whether you have React experience or not. - -Let's do this thing. - -## Hello World - -In accordance with the ancient traditions of our people, we must first build an app that does nothing except say "Hello, world!". Here it is: - -```SnackPlayer name=Hello%20World -import React, { Component } from 'react'; -import { Text, View } from 'react-native'; - -export default class HelloWorldApp extends Component { - render() { - return ( - - Hello, world! - - ); - } -} -``` - -If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your `App.js` file to create a real app on your local machine. - -## What's going on here? - -Some of the things in here might not look like JavaScript to you. Don't panic. _This is the future_. - -First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. `import`, `from`, `class`, and `extends` in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up by reading through sample code like this tutorial has. If you want, [this page](https://babeljs.io/learn-es2015/) has a good overview of ES2015 features. - -The other unusual thing in this code example is `Hello world!`. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a specialized templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like `
` or ``, you use React components. In this case, `` is a [Core Component](intro-react-native-components) that displays some text and `View` is like the `
` or ``. - -## Components - -So this code is defining `HelloWorldApp`, a new `Component`. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component. A component can be pretty basic - the only thing that's required is a `render` function which returns some JSX to render. - -## This app doesn't do very much - -Good point. To make components do more interesting things, you need to [learn about Props](props.md). diff --git a/website/versioned_docs/version-0.5/upgrading.md b/website/versioned_docs/version-0.5/upgrading.md deleted file mode 100644 index ec99a4c9882..00000000000 --- a/website/versioned_docs/version-0.5/upgrading.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -id: version-0.5-upgrading -title: Upgrading to new React Native versions -original_id: upgrading ---- - -Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it straightforward for you. - -## Expo projects - -Upgrading your Expo project to a new version of React Native requires updating the `react-native`, `react`, and `expo` package versions in your `package.json` file. Please refer to [this list](https://docs.expo.io/versions/latest/sdk/#sdk-version) to find out what versions are supported. You will also need to set the correct `sdkVersion` in your `app.json` file. - -See the [Upgrading Expo SDK Walkthrough](https://docs.expo.io/versions/latest/workflow/upgrading-expo-sdk-walkthrough) for up-to-date information about upgrading your project. - -## React Native projects - -Because typical React Native projects are essentially made up of an Android project, an iOS project, and a JavaScript project, upgrading can be rather tricky. There's currently two ways for upgrading your React Native project: by using [React Native CLI](https://github.com/react-native-community/cli) or manually with [Upgrade Helper](https://github.com/react-native-community/upgrade-helper). - -### React Native CLI - -The [React Native CLI](https://github.com/react-native-community/cli) comes with `upgrade` command that provides a one-step operation to upgrade the source files with a minimum of conflicts, it internally uses [rn-diff-purge](https://github.com/react-native-community/rn-diff-purge) project to find out which files need to be created, removed or modified. - -#### 1. Run the `upgrade` command - -> The `upgrade` command works on top of Git by using `git apply` with 3-way merge, therefore it's required to use Git in order for this to work, if you don't use Git but still want to use this solution then you can check out how to do it in the [Troubleshooting](#i-want-to-upgrade-with-react-native-cli-but-i-don-t-use-git) section. - -Run the following command to start the process of upgrading to the latest version: - -```sh -react-native upgrade -``` - -You may specify a React Native version by passing an argument, e.g. to upgrade to `0.61.0-rc.0` run: - -```sh -react-native upgrade 0.61.0-rc.0 -``` - -The project is upgraded using `git apply` with 3-way merge, it may happen that you'll need to resolve a few conflicts after it's finished. - -#### 2. Resolve the conflicts - -Conflicted files include delimiters which make very clear where the changes come from. For example: - -``` -13B07F951A680F5B00A75B9A /* Release */ = { - isa = XCBuildConfiguration; - buildSettings = { - ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; -<<<<<<< ours - CODE_SIGN_IDENTITY = "iPhone Developer"; - FRAMEWORK_SEARCH_PATHS = ( - "$(inherited)", - "$(PROJECT_DIR)/HockeySDK.embeddedframework", - "$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework", - ); -======= - CURRENT_PROJECT_VERSION = 1; ->>>>>>> theirs - HEADER_SEARCH_PATHS = ( - "$(inherited)", - /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, - "$(SRCROOT)/../node_modules/react-native/React/**", - "$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**", - ); -``` - -You can think of "ours" as "your team" and "theirs" as "the React Native development team". - -### Upgrade Helper - -The [Upgrade Helper](https://react-native-community.github.io/upgrade-helper/) is a web tool to help you out when upgrading your apps by providing the full set of changes happening between any two versions. It also shows comments on specific files to help understanding why that change is needed. - -#### 1. Select the versions - -You first need to select from and to which version you wish to upgrade, by default the latest major versions are selected. After selecting you can click the button "Show me how to upgrade". - -💡 Major updates will show an "useful content" section on the top with links to help you out when upgrading. - -#### 2. Upgrade dependencies - -The first file that is shown is the `package.json`, it's good to update the dependencies that are showing in there. For example, if `react-native` and `react` appears as changes then you can install it in your project by running `yarn add`: - -```sh -# {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff -yarn add react-native@{{VERSION}} -yarn add react@{{REACT_VERSION}} -``` - -#### 3. Upgrade your project files - -The new release may contain updates to other files that are generated when you run `react-native init`, those files are listed after the `package.json` in the Upgrade Helper page. If there aren't other changes then you can rebuild the project and continue developing. - -In case there are changes then you can either update them manually by copying and pasting from the changes in the page or you can do it with the React Native CLI upgrade command by running: - -```sh -react-native upgrade -``` - -This will check your files against the latest template and perform the following: - -- If there is a new file in the template, it is created. -- If a file in the template is identical to your file, it is skipped. -- If a file is different in your project than the template, you will be prompted; you have options to keep your file or overwrite it with the template version. - -> Some upgrades won't be done automatically with the React Native CLI and require manual work, e.g. `0.28` to `0.29`, or `0.56` to `0.57`. Make sure to check the [release notes](https://github.com/facebook/react-native/releases) when upgrading so that you can identify any manual changes your particular project may require. - -### Troubleshooting - -#### I want to upgrade with React Native CLI but I don't use Git - -While your project does not have to be handled by the Git versioning system -- you can use Mercurial, SVN, or nothing -- you will still need to [install Git](https://git-scm.com/downloads) on your system in order to use `react-native upgrade`. Git will also need to be available in the `PATH`. If your project doesn't use Git, initialize it and commit: - -```sh -git init # Initialize a Git repository -git add . # Stage all the current files -git commit -m "Upgrade react-native" # Save the current files in a commit -``` - -After you finish upgrading you may remove the `.git` directory. - -#### I have done all the changes but my app is still using an old version - -These sort of errors are usually related to caching, it's recommended to install [react-native-clean-project](https://github.com/pmadruga/react-native-clean-project) to clear all your project's cache and then you can run it again. diff --git a/website/versioned_docs/version-0.5/using-a-listview.md b/website/versioned_docs/version-0.5/using-a-listview.md deleted file mode 100644 index b270d487994..00000000000 --- a/website/versioned_docs/version-0.5/using-a-listview.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: version-0.5-using-a-listview -title: Using List Views -original_id: using-a-listview ---- - -React Native provides a suite of components for presenting lists of data. Generally, you'll want to use either [FlatList](flatlist.md) or [SectionList](sectionlist.md). - -The `FlatList` component displays a scrolling list of changing, but similarly structured, data. `FlatList` works well for long lists of data, where the number of items might change over time. Unlike the more generic [`ScrollView`](using-a-scrollview.md), the `FlatList` only renders elements that are currently showing on the screen, not all the elements at once. - -The `FlatList` component requires two props: `data` and `renderItem`. `data` is the source of information for the list. `renderItem` takes one item from the source and returns a formatted component to render. - -This example creates a basic `FlatList` of hardcoded data. Each item in the `data` props is rendered as a `Text` component. The `FlatListBasics` component then renders the `FlatList` and all `Text` components. - -```SnackPlayer name=FlatList%20Basics -import React, { Component } from 'react'; -import { FlatList, StyleSheet, Text, View } from 'react-native'; - -export default class FlatListBasics extends Component { - render() { - return ( - - {item.key}} - /> - - ); - } -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - paddingTop: 22 - }, - item: { - padding: 10, - fontSize: 18, - height: 44, - }, -}) -``` - -If you want to render a set of data broken into logical sections, maybe with section headers, similar to `UITableView`s on iOS, then a [SectionList](sectionlist.md) is the way to go. - -```SnackPlayer name=SectionList%20Basics -import React, { Component } from 'react'; -import { SectionList, StyleSheet, Text, View } from 'react-native'; - -export default class SectionListBasics extends Component { - render() { - return ( - - {item}} - renderSectionHeader={({section}) => {section.title}} - keyExtractor={(item, index) => index} - /> - - ); - } -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - paddingTop: 22 - }, - sectionHeader: { - paddingTop: 2, - paddingLeft: 10, - paddingRight: 10, - paddingBottom: 2, - fontSize: 14, - fontWeight: 'bold', - backgroundColor: 'rgba(247,247,247,1.0)', - }, - item: { - padding: 10, - fontSize: 18, - height: 44, - }, -}) -``` - -One of the most common uses for a list view is displaying data that you fetch from a server. To do that, you will need to [learn about networking in React Native](network.md). diff --git a/website/versioned_docs/version-0.5/using-a-scrollview.md b/website/versioned_docs/version-0.5/using-a-scrollview.md deleted file mode 100644 index 8b7a9e18b1d..00000000000 --- a/website/versioned_docs/version-0.5/using-a-scrollview.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: version-0.5-using-a-scrollview -title: Using a ScrollView -original_id: using-a-scrollview ---- - -The [ScrollView](scrollview.md) is a generic scrolling container that can contain multiple components and views. The scrollable items need not be homogeneous, and you can scroll both vertically and horizontally (by setting the `horizontal` property). - -This example creates a vertical `ScrollView` with both images and text mixed together. - -```SnackPlayer name=Using%20ScrollView -import React, { Component } from 'react'; -import { ScrollView, Image, Text } from 'react-native'; - -export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component { - render() { - return ( - - Scroll me plz - - - - - - If you like - - - - - - Scrolling down - - - - - - What's the best - - - - - - Framework around? - - - - - - React Native - - ); - } -} -``` - -ScrollViews can be configured to allow paging through views using swiping gestures by using the `pagingEnabled` props. Swiping horizontally between views can also be implemented on Android using the [ViewPager](https://github.com/react-native-community/react-native-viewpager) component. - -On iOS a ScrollView with a single item can be used to allow the user to zoom content. Set up the `maximumZoomScale` and `minimumZoomScale` props and your user will be able to use pinch and expand gestures to zoom in and out. - -The ScrollView works best to present a small amount of things of a limited size. All the elements and views of a `ScrollView` are rendered, even if they are not currently shown on the screen. If you have a long list of more items than can fit on the screen, you should use a `FlatList` instead. So let's [learn about list views](using-a-listview.md) next. diff --git a/website/versioned_docs/version-0.5/vibration.md b/website/versioned_docs/version-0.5/vibration.md deleted file mode 100644 index 5028b52fa8a..00000000000 --- a/website/versioned_docs/version-0.5/vibration.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -id: version-0.5-vibration -title: Vibration -original_id: vibration ---- - -The Vibration API is exposed at `Vibration.vibrate()`. The vibration is synchronous so this method will return immediately. - -There will be no effect on devices that do not support Vibration, eg. the simulator. - -**Note for Android:** add `` to `AndroidManifest.xml` - -Since the **vibration duration in iOS is not configurable**, so there are some differences with Android. In Android, if `pattern` is a number, it specified the vibration duration in ms. If `pattern` is an array, those odd indices is the vibration duration, while the even one are the separation time. - -In iOS, invoking `vibrate(duration)` will ignore the duration and vibrate for a fixed time. While the `pattern` array is used to define the duration between each vibration. See below example for more. - -Repeatable vibration is also supported, the vibration will repeat with defined pattern until `cancel()` is called. - -Example: - -``` -const DURATION = 10000 -const PATTERN = [1000, 2000, 3000] - -Vibration.vibrate(DURATION) -// Android: vibrate for 10s -// iOS: duration is not configurable, vibrate for fixed time (about 500ms) - -Vibration.vibrate(PATTERN) -// Android: wait 1s -> vibrate 2s -> wait 3s -// iOS: wait 1s -> vibrate -> wait 2s -> vibrate -> wait 3s -> vibrate - -Vibration.vibrate(PATTERN, true) -// Android: wait 1s -> vibrate 2s -> wait 3s -> wait 1s -> vibrate 2s -> wait 3s -> ... -// iOS: wait 1s -> vibrate -> wait 2s -> vibrate -> wait 3s -> vibrate -> wait 1s -> vibrate -> wait 2s -> vibrate -> wait 3s -> vibrate -> ... - -Vibration.cancel() -// Android: vibration stopped -// iOS: vibration stopped -``` - -### Methods - -- [`vibrate`](vibration.md#vibrate) -- [`cancel`](vibration.md#cancel) - ---- - -# Reference - -## Methods - -### `vibrate()` - -```jsx -Vibration.vibrate(pattern: number, Array, repeat: boolean) -``` - -Trigger a vibration with specified `pattern`. - -**Parameters:** - -| Name | Type | Required | Description | -| ------- | --------------------- | -------- | --------------------------------------------------------------------------- | -| pattern | number, Array | Yes | Vibration pattern, accept a number or an array of number. Default to 400ms. | -| repeat | boolean | Yes | Optional. Repeat vibration pattern until cancel(), default to false. | - ---- - -### `cancel()` - -```jsx -Vibration.cancel(); -``` - -Stop vibration. diff --git a/website/versioned_docs/version-0.5/vibrationios.md b/website/versioned_docs/version-0.5/vibrationios.md deleted file mode 100644 index c2522833ff7..00000000000 --- a/website/versioned_docs/version-0.5/vibrationios.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -id: version-0.5-vibrationios -title: VibrationIOS -original_id: vibrationios ---- - -The Vibration API is exposed at `VibrationIOS.vibrate()`. On iOS, calling this function will trigger a one second vibration. The vibration is synchronous so this method will return immediately. - -There will be no effect on devices that do not support Vibration, eg. the iOS simulator. - -Vibration patterns are currently unsupported. - -### Methods - -- [`vibrate`](vibrationios.md#vibrate) - ---- - -# Reference - -## Methods - -### `vibrate()` - -```jsx -static vibrate() -``` diff --git a/website/versioned_docs/version-0.5/view-style-props.md b/website/versioned_docs/version-0.5/view-style-props.md deleted file mode 100644 index 1651b581fd4..00000000000 --- a/website/versioned_docs/version-0.5/view-style-props.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -id: version-0.5-view-style-props -title: View Style Props -original_id: view-style-props ---- - -### Props - -- [`borderTopColor`](view-style-props.md#bordertopcolor) -- [`backgroundColor`](view-style-props.md#backgroundcolor) -- [`borderBottomLeftRadius`](view-style-props.md#borderbottomleftradius) -- [`borderBottomRightRadius`](view-style-props.md#borderbottomrightradius) -- [`borderColor`](view-style-props.md#bordercolor) -- [`borderLeftColor`](view-style-props.md#borderleftcolor) -- [`borderRadius`](view-style-props.md#borderradius) -- [`borderRightColor`](view-style-props.md#borderrightcolor) -- [`borderBottomColor`](view-style-props.md#borderbottomcolor) -- [`borderTopLeftRadius`](view-style-props.md#bordertopleftradius) -- [`borderTopRightRadius`](view-style-props.md#bordertoprightradius) -- [`opacity`](view-style-props.md#opacity) -- [`overflow`](view-style-props.md#overflow) -- [`shadowColor`](view-style-props.md#shadowcolor) -- [`shadowOffset`](view-style-props.md#shadowoffset) -- [`shadowOpacity`](view-style-props.md#shadowopacity) -- [`shadowRadius`](view-style-props.md#shadowradius) - ---- - -# Reference - -## Props - -### `borderTopColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `backgroundColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `borderBottomLeftRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderBottomRightRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `borderLeftColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `borderRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderRightColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `borderBottomColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `borderTopLeftRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `borderTopRightRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `opacity` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `overflow` - -| Type | Required | -| ------------------------- | -------- | -| enum('visible', 'hidden') | No | - ---- - -### `shadowColor` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `shadowOffset` - -| Type | Required | -| -------------------------------------- | -------- | -| object: {width: number,height: number} | No | - ---- - -### `shadowOpacity` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `shadowRadius` - -| Type | Required | -| ------ | -------- | -| number | No | diff --git a/website/versioned_docs/version-0.5/view.md b/website/versioned_docs/version-0.5/view.md deleted file mode 100644 index 5e85e54a9e7..00000000000 --- a/website/versioned_docs/version-0.5/view.md +++ /dev/null @@ -1,507 +0,0 @@ ---- -id: version-0.5-view -title: View -original_id: view ---- - -The most fundamental component for building a UI, `View` is a container that supports layout with [flexbox](flexbox.md), [style](style.md), [some touch handling](handling-touches.md), and [accessibility](accessibility.md) controls. `View` maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a `UIView`, `
`, `android.view`, etc. - -`View` is designed to be nested inside other views and can have 0 to many children of any type. - -This example creates a `View` that wraps two colored boxes and a text component in a row with padding. - -```jsx -class ViewColoredBoxesWithText extends Component { - render() { - return ( - - - - Hello World! - - ); - } -} -``` - -> `View`s are designed to be used with [`StyleSheet`](style.md) for clarity and performance, although inline styles are also supported. - -### Synthetic Touch Events - -For `View` responder props (e.g., `onResponderMove`), the synthetic touch event passed to them are of the following form: - -- `nativeEvent` - - `changedTouches` - Array of all touch events that have changed since the last event. - - `identifier` - The ID of the touch. - - `locationX` - The X position of the touch, relative to the element. - - `locationY` - The Y position of the touch, relative to the element. - - `pageX` - The X position of the touch, relative to the root element. - - `pageY` - The Y position of the touch, relative to the root element. - - `target` - The node id of the element receiving the touch event. - - `timestamp` - A time identifier for the touch, useful for velocity calculation. - - `touches` - Array of all current touches on the screen. - -For most touch interactions, you'll want to wrap your component in [`TouchableHighlight`](touchablehighlight.md) or [`TouchableOpacity`](touchableopacity.md). - -### Props - -- [`onStartShouldSetResponder`](view.md#onstartshouldsetresponder) -- [`accessibilityLabel`](view.md#accessibilitylabel) -- [`hitSlop`](view.md#hitslop) -- [`nativeID`](view.md#nativeid) -- [`onAccessibilityTap`](view.md#onaccessibilitytap) -- [`onLayout`](view.md#onlayout) -- [`onMagicTap`](view.md#onmagictap) -- [`onMoveShouldSetResponder`](view.md#onmoveshouldsetresponder) -- [`onMoveShouldSetResponderCapture`](view.md#onmoveshouldsetrespondercapture) -- [`onResponderGrant`](view.md#onrespondergrant) -- [`onResponderMove`](view.md#onrespondermove) -- [`onResponderReject`](view.md#onresponderreject) -- [`onResponderRelease`](view.md#onresponderrelease) -- [`onResponderTerminate`](view.md#onresponderterminate) -- [`onResponderTerminationRequest`](view.md#onresponderterminationrequest) -- [`accessible`](view.md#accessible) -- [`onStartShouldSetResponderCapture`](view.md#onstartshouldsetrespondercapture) -- [`pointerEvents`](view.md#pointerevents) -- [`removeClippedSubviews`](view.md#removeclippedsubviews) -- [`style`](view.md#style) -- [`testID`](view.md#testid) -- [`accessibilityComponentType`](view.md#accessibilitycomponenttype) -- [`accessibilityLiveRegion`](view.md#accessibilityliveregion) -- [`collapsable`](view.md#collapsable) -- [`importantForAccessibility`](view.md#importantforaccessibility) -- [`needsOffscreenAlphaCompositing`](view.md#needsoffscreenalphacompositing) -- [`renderToHardwareTextureAndroid`](view.md#rendertohardwaretextureandroid) -- [`accessibilityTraits`](view.md#accessibilitytraits) -- [`accessibilityViewIsModal`](view.md#accessibilityviewismodal) -- [`shouldRasterizeIOS`](view.md#shouldrasterizeios) - -### Type Definitions - -- [`Props`](view.md#props) - ---- - -# Reference - -## Props - -### `onStartShouldSetResponder` - -Does this view want to become responder on the start of a touch? - -`View.props.onStartShouldSetResponder: (event) => [true | false]`, where `event` is a synthetic touch event as described above. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `accessibilityLabel` - -Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space. - -| Type | Required | -| ---- | -------- | -| node | No | - ---- - -### `hitSlop` - -This defines how far a touch event can start away from the view. Typical interface guidelines recommend touch targets that are at least 30 - 40 points/density-independent pixels. - -For example, if a touchable view has a height of 20 the touchable height can be extended to 40 with `hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}` - -> The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views. - -| Type | Required | -| ------------------------------------------------------------------ | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | - ---- - -### `nativeID` - -Used to locate this view from native classes. - -> This disables the 'layout-only view removal' optimization for this view! - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `onAccessibilityTap` - -When `accessible` is true, the system will try to invoke this function when the user performs accessibility tap gesture. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with: - -`{nativeEvent: { layout: {x, y, width, height}}}` - -This event is fired immediately once the layout has been calculated, but the new layout may not yet be reflected on the screen at the time the event is received, especially if a layout animation is in progress. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onMagicTap` - -When `accessible` is `true`, the system will invoke this function when the user performs the magic tap gesture. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onMoveShouldSetResponder` - -Does this view want to "claim" touch responsiveness? This is called for every touch move on the `View` when it is not the responder. - -`View.props.onMoveShouldSetResponder: (event) => [true | false]`, where `event` is a synthetic touch event as described above. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onMoveShouldSetResponderCapture` - -If a parent `View` wants to prevent a child `View` from becoming responder on a move, it should have this handler which returns `true`. - -`View.props.onMoveShouldSetResponderCapture: (event) => [true | false]`, where `event` is a synthetic touch event as described above. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onResponderGrant` - -The View is now responding for touch events. This is the time to highlight and show the user what is happening. - -`View.props.onResponderGrant: (event) => {}`, where `event` is a synthetic touch event as described above. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onResponderMove` - -The user is moving their finger. - -`View.props.onResponderMove: (event) => {}`, where `event` is a synthetic touch event as described above. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onResponderReject` - -Another responder is already active and will not release it to that `View` asking to be the responder. - -`View.props.onResponderReject: (event) => {}`, where `event` is a synthetic touch event as described above. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onResponderRelease` - -Fired at the end of the touch. - -`View.props.onResponderRelease: (event) => {}`, where `event` is a synthetic touch event as described above. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onResponderTerminate` - -The responder has been taken from the `View`. Might be taken by other views after a call to `onResponderTerminationRequest`, or might be taken by the OS without asking (e.g., happens with control center/ notification center on iOS) - -`View.props.onResponderTerminate: (event) => {}`, where `event` is a synthetic touch event as described above. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onResponderTerminationRequest` - -Some other `View` wants to become responder and is asking this `View` to release its responder. Returning `true` allows its release. - -`View.props.onResponderTerminationRequest: (event) => {}`, where `event` is a synthetic touch event as described above. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `accessible` - -When `true`, indicates that the view is an accessibility element. By default, all the touchable elements are accessible. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onStartShouldSetResponderCapture` - -If a parent `View` wants to prevent a child `View` from becoming responder on a touch start, it should have this handler which returns `true`. - -`View.props.onStartShouldSetResponderCapture: (event) => [true | false]`, where `event` is a synthetic touch event as described above. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `pointerEvents` - -Controls whether the `View` can be the target of touch events. - -- `'auto'`: The View can be the target of touch events. -- `'none'`: The View is never the target of touch events. -- `'box-none'`: The View is never the target of touch events but its subviews can be. It behaves like if the view had the following classes in CSS: - ``` - .box-none { - pointer-events: none; - } - .box-none * { - pointer-events: all; - } - ``` -- `'box-only'`: The view can be the target of touch events but its subviews cannot be. It behaves like if the view had the following classes in CSS: - ``` - .box-only { - pointer-events: all; - } - .box-only * { - pointer-events: none; - } - ``` - -> Since `pointerEvents` does not affect layout/appearance, and we are already deviating from the spec by adding additional modes, we opt to not include `pointerEvents` on `style`. On some platforms, we would need to implement it as a `className` anyways. Using `style` or not is an implementation detail of the platform. - -| Type | Required | -| -------------------------------------------- | -------- | -| enum('box-none', 'none', 'box-only', 'auto') | No | - ---- - -### `removeClippedSubviews` - -This is a reserved performance property exposed by `RCTView` and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have `overflow: hidden`, as should the containing view (or one of its superviews). - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| ---------------------------------- | -------- | -| [view styles](view-style-props.md) | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -> This disables the 'layout-only view removal' optimization for this view! - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `accessibilityComponentType` - -Indicates to accessibility services to treat UI component like a native one. Works for Android only. - -Possible values for `AccessibilityComponentTypes`: - -- `'none'` -- `'button'` -- `'radiobutton_checked'` -- `'radiobutton_unchecked'` - -| Type | Required | Platform | -| --------------------------- | -------- | -------- | -| AccessibilityComponentTypes | No | Android | - ---- - -### `accessibilityLiveRegion` - -Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API >= 19 only. Possible values: - -- `'none'` - Accessibility services should not announce changes to this view. -- `'polite'`- Accessibility services should announce changes to this view. -- `'assertive'` - Accessibility services should interrupt ongoing speech to immediately announce changes to this view. - -See the [Android `View` docs](http://developer.android.com/reference/android/view/View.html#attr_android:accessibilityLiveRegion) for reference. - -| Type | Required | Platform | -| ----------------------------------- | -------- | -------- | -| enum('none', 'polite', 'assertive') | No | Android | - ---- - -### `collapsable` - -Views that are only used to layout their children or otherwise don't draw anything may be automatically removed from the native hierarchy as an optimization. Set this property to `false` to disable this optimization and ensure that this `View` exists in the native view hierarchy. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `importantForAccessibility` - -Controls how view is important for accessibility which is if it fires accessibility events and if it is reported to accessibility services that query the screen. Works for Android only. - -Possible values: - -- `'auto'` - The system determines whether the view is important for accessibility - default (recommended). -- `'yes'` - The view is important for accessibility. -- `'no'` - The view is not important for accessibility. -- `'no-hide-descendants'` - The view is not important for accessibility, nor are any of its descendant views. - -See the [Android `importantForAccessibility` docs](http://developer.android.com/reference/android/R.attr.html#importantForAccessibility) for reference. - -| Type | Required | Platform | -| ------------------------------------------------ | -------- | -------- | -| enum('auto', 'yes', 'no', 'no-hide-descendants') | No | Android | - ---- - -### `needsOffscreenAlphaCompositing` - -Whether this `View` needs to rendered offscreen and composited with an alpha in order to preserve 100% correct colors and blending behavior. The default (`false`) falls back to drawing the component and its children with an alpha applied to the paint used to draw each element instead of rendering the full component offscreen and compositing it back with an alpha value. This default may be noticeable and undesired in the case where the `View` you are setting an opacity on has multiple overlapping elements (e.g. multiple overlapping `View`s, or text and a background). - -Rendering offscreen to preserve correct alpha behavior is extremely expensive and hard to debug for non-native developers, which is why it is not turned on by default. If you do need to enable this property for an animation, consider combining it with renderToHardwareTextureAndroid if the view **contents** are static (i.e. it doesn't need to be redrawn each frame). If that property is enabled, this View will be rendered off-screen once, saved in a hardware texture, and then composited onto the screen with an alpha each frame without having to switch rendering targets on the GPU. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `renderToHardwareTextureAndroid` - -Whether this `View` should render itself (and all of its children) into a single hardware texture on the GPU. - -On Android, this is useful for animations and interactions that only modify opacity, rotation, translation, and/or scale: in those cases, the view doesn't have to be redrawn and display lists don't need to be re-executed. The texture can be re-used and re-composited with different parameters. The downside is that this can use up limited video memory, so this prop should be set back to false at the end of the interaction/animation. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `accessibilityTraits` - -Provides additional traits to screen reader. By default no traits are provided unless specified otherwise in element. - -You can provide one trait or an array of many traits. - -Possible values for `AccessibilityTraits` are: - -- `'none'` - The element has no traits. -- `'button'` - The element should be treated as a button. -- `'link'` - The element should be treated as a link. -- `'header'` - The element is a header that divides content into sections. -- `'search'` - The element should be treated as a search field. -- `'image'` - The element should be treated as an image. -- `'selected'` - The element is selected. -- `'plays'` - The element plays sound. -- `'key'` - The element should be treated like a keyboard key. -- `'text'` - The element should be treated as text. -- `'summary'` - The element provides app summary information. -- `'disabled'` - The element is disabled. -- `'frequentUpdates'` - The element frequently changes its value. -- `'startsMedia'` - The element starts a media session. -- `'adjustable'` - The element allows adjustment over a range of values. -- `'allowsDirectInteraction'` - The element allows direct touch interaction for VoiceOver users. -- `'pageTurn'` - Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element. - -See the [Accessibility guide](accessibility.md#accessibilitytraits-ios) for more information. - -| Type | Required | Platform | -| ------------------------------------------------- | -------- | -------- | -| AccessibilityTraits, array of AccessibilityTraits | No | iOS | - ---- - -### `accessibilityViewIsModal` - -A value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Default is `false`. - -See the [Accessibility guide](accessibility.md#accessibilitytraits-ios) for more information. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `shouldRasterizeIOS` - -Whether this `View` should be rendered as a bitmap before compositing. - -On iOS, this is useful for animations and interactions that do not modify this component's dimensions nor its children; for example, when translating the position of a static view, rasterization allows the renderer to reuse a cached bitmap of a static view and quickly composite it during each frame. - -Rasterization incurs an off-screen drawing pass and the bitmap consumes memory. Test and measure when using this property. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - -## Type Definitions - -### Props - -| Type | -| -------------------------- | -| [ViewProps](view.md#props) | diff --git a/website/versioned_docs/version-0.5/viewpagerandroid.md b/website/versioned_docs/version-0.5/viewpagerandroid.md deleted file mode 100644 index 44e9affa529..00000000000 --- a/website/versioned_docs/version-0.5/viewpagerandroid.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -id: version-0.5-viewpagerandroid -title: ViewPagerAndroid -original_id: viewpagerandroid ---- - -Container that allows to flip left and right between child views. Each child view of the `ViewPagerAndroid` will be treated as a separate page and will be stretched to fill the `ViewPagerAndroid`. - -It is important all children are ``s and not composite components. You can set style properties like `padding` or `backgroundColor` for each child. It is also important that each child have a `key` prop. - -Example: - -``` -render: function() { - return ( - - - First page - - - Second page - - - ); -} - -... - -var styles = { - ... - viewPager: { - flex: 1 - }, - pageStyle: { - alignItems: 'center', - padding: 20, - } -} -``` - -### Props - -- [View props...](view.md#props) -- [`initialPage`](viewpagerandroid.md#initialpage) -- [`keyboardDismissMode`](viewpagerandroid.md#keyboarddismissmode) -- [`onPageScroll`](viewpagerandroid.md#onpagescroll) -- [`onPageScrollStateChanged`](viewpagerandroid.md#onpagescrollstatechanged) -- [`onPageSelected`](viewpagerandroid.md#onpageselected) -- [`pageMargin`](viewpagerandroid.md#pagemargin) -- [`peekEnabled`](viewpagerandroid.md#peekenabled) -- [`scrollEnabled`](viewpagerandroid.md#scrollenabled) - -### Type Definitions - -- [`ViewPagerScrollState`](viewpagerandroid.md#viewpagerscrollstate) - ---- - -# Reference - -## Props - -### `initialPage` - -Index of initial page that should be selected. Use `setPage` method to update the page, and `onPageSelected` to monitor page changes - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `keyboardDismissMode` - -Determines whether the keyboard gets dismissed in response to a drag. - -- 'none' (the default), drags do not dismiss the keyboard. -- 'on-drag', the keyboard is dismissed when a drag begins. - -| Type | Required | -| ----------------------- | -------- | -| enum('none', 'on-drag') | No | - ---- - -### `onPageScroll` - -Executed when transitioning between pages (ether because of animation for the requested page change or when user is swiping/dragging between pages) The `event.nativeEvent` object for this callback will carry following data: - -- position - index of first page from the left that is currently visible -- offset - value from range [0,1) describing stage between page transitions. Value x means that (1 - x) fraction of the page at "position" index is visible, and x fraction of the next page is visible. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPageScrollStateChanged` - -Function called when the page scrolling state has changed. The page scrolling state can be in 3 states: - -- idle, meaning there is no interaction with the page scroller happening at the time -- dragging, meaning there is currently an interaction with the page scroller -- settling, meaning that there was an interaction with the page scroller, and the page scroller is now finishing its closing or opening animation - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPageSelected` - -This callback will be called once ViewPager finish navigating to selected page (when user swipes between pages). The `event.nativeEvent` object passed to this callback will have following fields: - -- position - index of page that has been selected - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `pageMargin` - -Blank space to show between pages. This is only visible while scrolling, pages are still edge-to-edge. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `peekEnabled` - -Whether enable showing peekFraction or not. If this is true, the preview of last and next page will show in current screen. Defaults to false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `scrollEnabled` - -When false, the content does not scroll. The default value is true. - -| Type | Required | -| ---- | -------- | -| bool | No | - -## Type Definitions - -### ViewPagerScrollState - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| -------- | ----------- | -| idle | | -| dragging | | -| settling | | diff --git a/website/versioned_docs/version-0.5/virtualizedlist.md b/website/versioned_docs/version-0.5/virtualizedlist.md deleted file mode 100644 index 13acf428147..00000000000 --- a/website/versioned_docs/version-0.5/virtualizedlist.md +++ /dev/null @@ -1,531 +0,0 @@ ---- -id: version-0.5-virtualizedlist -title: VirtualizedList -original_id: virtualizedlist ---- - -Base implementation for the more convenient [``](flatlist.md) and [``](sectionlist.md) components, which are also better documented. In general, this should only really be used if you need more flexibility than `FlatList` provides, e.g. for use with immutable data instead of plain arrays. - -Virtualization massively improves memory consumption and performance of large lists by maintaining a finite render window of active items and replacing all items outside of the render window with appropriately sized blank space. The window adapts to scrolling behavior, and items are rendered incrementally with low-pri (after any running interactions) if they are far from the visible area, or with hi-pri otherwise to minimize the potential of seeing blank space. - -Some caveats: - -- Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay. -- This is a `PureComponent` which means that it will not re-render if `props` remain shallow-equal. Make sure that everything your `renderItem` function depends on is passed as a prop (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on changes. This includes the `data` prop and parent component state. -- In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate ands momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes. -- By default, the list looks for a `key` prop on each item and uses that for the React key. Alternatively, you can provide a custom `keyExtractor` prop. - -### Props - -- [`ScrollView` props...](scrollview.md#props) -- [`renderItem`](virtualizedlist.md#renderitem) -- [`data`](virtualizedlist.md#data) -- [`getItem`](virtualizedlist.md#getitem) -- [`getItemCount`](virtualizedlist.md#getitemcount) -- [`debug`](virtualizedlist.md#debug) -- [`extraData`](virtualizedlist.md#extradata) -- [`getItemLayout`](virtualizedlist.md#getitemlayout) -- [`initialScrollIndex`](virtualizedlist.md#initialscrollindex) -- [`inverted`](virtualizedlist.md#inverted) -- [`CellRendererComponent`](virtualizedlist.md#cellrenderercomponent) -- [`ListEmptyComponent`](virtualizedlist.md#listemptycomponent) -- [`ListFooterComponent`](virtualizedlist.md#listfootercomponent) -- [`ListHeaderComponent`](virtualizedlist.md#listheadercomponent) -- [`onEndReached`](virtualizedlist.md#onendreached) -- [`onLayout`](virtualizedlist.md#onlayout) -- [`onRefresh`](virtualizedlist.md#onrefresh) -- [`onScrollToIndexFailed`](virtualizedlist.md#onscrolltoindexfailed) -- [`onViewableItemsChanged`](virtualizedlist.md#onviewableitemschanged) -- [`refreshing`](virtualizedlist.md#refreshing) -- [`removeClippedSubviews`](virtualizedlist.md#removeclippedsubviews) -- [`renderScrollComponent`](virtualizedlist.md#renderscrollcomponent) -- [`viewabilityConfig`](virtualizedlist.md#viewabilityconfig) -- [`viewabilityConfigCallbackPairs`](virtualizedlist.md#viewabilityconfigcallbackpairs) -- [`horizontal`](virtualizedlist.md#horizontal) -- [`initialNumToRender`](virtualizedlist.md#initialnumtorender) -- [`keyExtractor`](virtualizedlist.md#keyextractor) -- [`maxToRenderPerBatch`](virtualizedlist.md#maxtorenderperbatch) -- [`onEndReachedThreshold`](virtualizedlist.md#onendreachedthreshold) -- [`scrollEventThrottle`](virtualizedlist.md#scrolleventthrottle) -- [`updateCellsBatchingPeriod`](virtualizedlist.md#updatecellsbatchingperiod) -- [`windowSize`](virtualizedlist.md#windowsize) -- [`disableVirtualization`](virtualizedlist.md#disablevirtualization) -- [`progressViewOffset`](virtualizedlist.md#progressviewoffset) - -### State - -- [`first`](virtualizedlist.md#first) -- [`last`](virtualizedlist.md#last) - -### Methods - -- [`scrollToEnd`](virtualizedlist.md#scrolltoend) -- [`scrollToIndex`](virtualizedlist.md#scrolltoindex) -- [`scrollToItem`](virtualizedlist.md#scrolltoitem) -- [`scrollToOffset`](virtualizedlist.md#scrolltooffset) -- [`recordInteraction`](virtualizedlist.md#recordinteraction) -- [`flashScrollIndicators`](virtualizedlist.md#flashscrollindicators) - -### Type Definitions - -- [`renderItemType`](virtualizedlist.md#renderitemtype) -- [`Props`](virtualizedlist.md#props) - ---- - -# Reference - -## Props - -### `renderItem` - -| Type | Required | -| ------ | -------- | -| number | Yes | - ---- - -### `data` - -The default accessor functions assume this is an array of objects with shape `{key: string}` but you can override `getItem`, `getItemCount`, and `keyExtractor` to handle any type of index-based data. - -| Type | Required | -| ---- | -------- | -| any | Yes | - ---- - -### `getItem` - -```jsx -(data: any, index: number) => object; -``` - -A generic accessor for extracting an item from any sort of data blob. - -| Type | Required | -| -------- | -------- | -| function | Yes | - ---- - -### `getItemCount` - -```jsx -(data: any) => number; -``` - -Determines how many items are in the data blob. - -| Type | Required | -| -------- | -------- | -| function | Yes | - ---- - -### `debug` - -`debug` will turn on extra logging and visual overlays to aid with debugging both usage and implementation, but with a significant perf hit. - -| Type | Required | -| ------- | -------- | -| boolean | No | - ---- - -### `extraData` - -A marker property for telling the list to re-render (since it implements `PureComponent`). If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop, stick it here and treat it immutably. - -| Type | Required | -| ---- | -------- | -| any | No | - ---- - -### `getItemLayout` - -```jsx -( - data: any, - index: number, - ) => {length: number, offset: number, index: number} -``` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `initialScrollIndex` - -Instead of starting at the top with the first item, start at `initialScrollIndex`. This disables the "scroll to top" optimization that keeps the first `initialNumToRender` items always rendered and immediately renders the items starting at this initial index. Requires `getItemLayout` to be implemented. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `inverted` - -Reverses the direction of scroll. Uses scale transforms of -1. - -| Type | Required | -| ------- | -------- | -| boolean | No | - ---- - -### `CellRendererComponent` - -Each cell is rendered using this element. Can be a React Component Class,or a render function. Defaults to using [`View`](view.md). - -| Type | Required | -| ------------------- | -------- | -| component, function | No | - ---- - -### `ListEmptyComponent` - -Rendered when the list is empty. Can be a React Component Class, a render function, or a rendered element. - -| Type | Required | -| ---------------------------- | -------- | -| component, function, element | No | - ---- - -### `ListFooterComponent` - -Rendered at the bottom of all the items. Can be a React Component Class, a render function, or a rendered element. - -| Type | Required | -| ---------------------------- | -------- | -| component, function, element | No | - ---- - -### `ListHeaderComponent` - -Rendered at the top of all the items. Can be a React Component Class, a render function, or a rendered element. - -| Type | Required | -| ---------------------------- | -------- | -| component, function, element | No | - ---- - -### `onLayout` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onRefresh` - -```jsx -() => void -``` - -If provided, a standard `RefreshControl` will be added for "Pull to Refresh" functionality. Make sure to also set the `refreshing` prop correctly. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onScrollToIndexFailed` - -```jsx -(info: { - index: number, - highestMeasuredFrameIndex: number, - averageItemLength: number, - }) => void -``` - -Used to handle failures when scrolling to an index that has not been measured yet. Recommended action is to either compute your own offset and `scrollTo` it, or scroll as far as possible and then try again after more items have been rendered. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onViewableItemsChanged` - -```jsx -(info: { - viewableItems: array, - changed: array, - }) => void -``` - -Called when the viewability of rows changes, as defined by the `viewabilityConfig` prop. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `refreshing` - -Set this true while waiting for new data from a refresh. - -| Type | Required | -| ------- | -------- | -| boolean | No | - ---- - -### `removeClippedSubviews` - -This may improve scroll performance for large lists. - -> Note: May have bugs (missing content) in some circumstances - use at your own risk. - -| Type | Required | -| ------- | -------- | -| boolean | No | - ---- - -### `renderScrollComponent` - -```jsx -(props: object) => element; -``` - -Render a custom scroll component, e.g. with a differently styled `RefreshControl`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `viewabilityConfig` - -See `ViewabilityHelper.js` for flow type and further documentation. - -| Type | Required | -| ----------------- | -------- | -| ViewabilityConfig | No | - ---- - -### `viewabilityConfigCallbackPairs` - -List of `ViewabilityConfig`/`onViewableItemsChanged` pairs. A specific `onViewableItemsChanged` will be called when its corresponding `ViewabilityConfig`'s conditions are met. See `ViewabilityHelper.js` for flow type and further documentation. - -| Type | Required | -| -------------------------------------- | -------- | -| array of ViewabilityConfigCallbackPair | No | - ---- - -### `horizontal` - -| Type | Required | -| ------- | -------- | -| boolean | No | - ---- - -### `initialNumToRender` - -How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `keyExtractor` - -```jsx -(item: object, index: number) => string; -``` - -Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks `item.key`, then falls back to using the index, like React does. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `maxToRenderPerBatch` - -The maximum number of items to render in each incremental render batch. The more rendered at once, the better the fill rate, but responsiveness my suffer because rendering content may interfere with responding to button taps or other interactions. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `onEndReached` - -```jsx -(info: {distanceFromEnd: number}) => void -``` - -Called once when the scroll position gets within `onEndReachedThreshold` of the rendered content. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onEndReachedThreshold` - -How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the `onEndReached` callback. Thus a value of 0.5 will trigger `onEndReached` when the end of the content is within half the visible length of the list. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `scrollEventThrottle` - -| Type | Required | -| ---- | -------- | -| | No | - ---- - -### `updateCellsBatchingPeriod` - -Amount of time between low-pri item render batches, e.g. for rendering items quite a ways off screen. Similar fill rate/responsiveness tradeoff as `maxToRenderPerBatch`. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `windowSize` - -Determines the maximum number of items rendered outside of the visible area, in units of visible lengths. So if your list fills the screen, then `windowSize={21}` (the default) will render the visible screen area plus up to 10 screens above and 10 below the viewport. Reducing this number will reduce memory consumption and may improve performance, but will increase the chance that fast scrolling may reveal momentary blank areas of unrendered content. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `disableVirtualization` - -**DEPRECATED.** Virtualization provides significant performance and memory optimizations, but fully unmounts react instances that are outside of the render window. You should only need to disable this for debugging purposes. - -| Type | Required | -| ---- | -------- | -| | No | - ---- - -### `progressViewOffset` - -Set this when offset is needed for the loading indicator to show correctly. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | Android | - -## State - -### `first` - -| Type | -| ------ | -| number | - ---- - -### `last` - -| Type | -| ------ | -| number | - -## Methods - -### `scrollToEnd()` - -```jsx -scrollToEnd(([params]: object)); -``` - ---- - -### `scrollToIndex()` - -```jsx -scrollToIndex((params: object)); -``` - ---- - -### `scrollToItem()` - -```jsx -scrollToItem((params: object)); -``` - ---- - -### `scrollToOffset()` - -```jsx -scrollToOffset((params: object)); -``` - -Scroll to a specific content pixel offset in the list. - -**Parameters:** - -- `offset` expects the offset to scroll to. In case of `horizontal` is true, the offset is the x-value, in any other case the offset is the y-value. -- `animated` (`true` by default) defines whether the list should do an animation while scrolling. - ---- - -### `recordInteraction()` - -```jsx -recordInteraction(); -``` - ---- - -### `flashScrollIndicators()` - -```jsx -flashScrollIndicators(); -``` - -## Type Definitions - -### renderItemType - -| Type | -| ---------------------- | -| FunctionTypeAnnotation | - ---- - -### Props - -| Type | -| -------------------------- | -| IntersectionTypeAnnotation | diff --git a/website/versioned_docs/version-0.5/webview.md b/website/versioned_docs/version-0.5/webview.md deleted file mode 100644 index 004b37615f3..00000000000 --- a/website/versioned_docs/version-0.5/webview.md +++ /dev/null @@ -1,208 +0,0 @@ ---- -id: version-0.5-webview -title: WebView -original_id: webview ---- - -### Props - -- [`renderError`](webview.md#rendererror) -- [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) -- [`contentInset`](webview.md#contentinset) -- [`html`](webview.md#html) -- [`javaScriptEnabledAndroid`](webview.md#javascriptenabledandroid) -- [`onNavigationStateChange`](webview.md#onnavigationstatechange) -- [`bounces`](webview.md#bounces) -- [`renderLoading`](webview.md#renderloading) -- [`scrollEnabled`](webview.md#scrollenabled) -- [`shouldInjectAJAXHandler`](webview.md#shouldinjectajaxhandler) -- [`startInLoadingState`](webview.md#startinloadingstate) -- [`style`](webview.md#style) -- [`url`](webview.md#url) - -### Methods - -- [`goForward`](webview.md#goforward) -- [`goBack`](webview.md#goback) -- [`reload`](webview.md#reload) -- [`updateNavigationState`](webview.md#updatenavigationstate) -- [`getWebWiewHandle`](webview.md#getwebwiewhandle) -- [`onLoadingStart`](webview.md#onloadingstart) -- [`onLoadingError`](webview.md#onloadingerror) -- [`onLoadingFinish`](webview.md#onloadingfinish) - ---- - -# Reference - -## Props - -### `renderError` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `automaticallyAdjustContentInsets` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `contentInset` - -| Type | Required | -| ------------------------------------------------------------------ | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | - ---- - -### `html` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `javaScriptEnabledAndroid` - -Used for android only, JS is enabled by default for WebView on iOS - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `onNavigationStateChange` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `bounces` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `renderLoading` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `scrollEnabled` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `shouldInjectAJAXHandler` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `startInLoadingState` - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `style` - -| Type | Required | -| --------------------- | -------- | -| [View](view.md#style) | No | - ---- - -### `url` - -| Type | Required | -| ------ | -------- | -| string | No | - -## Methods - -### `goForward()` - -```jsx -goForward(); -``` - ---- - -### `goBack()` - -```jsx -goBack(); -``` - ---- - -### `reload()` - -```jsx -reload(); -``` - ---- - -### `updateNavigationState()` - -```jsx -updateNavigationState((event: Event)); -``` - -We return an event with a bunch of fields including: url, title, loading, canGoBack, canGoForward - ---- - -### `getWebWiewHandle()` - -```jsx -getWebWiewHandle(): -``` - ---- - -### `onLoadingStart()` - -```jsx -onLoadingStart((event: Event)); -``` - ---- - -### `onLoadingError()` - -```jsx -onLoadingError((event: Event)); -``` - ---- - -### `onLoadingFinish()` - -```jsx -onLoadingFinish((event: Event)); -``` diff --git a/website/versioned_docs/version-0.50/actionsheetios.md b/website/versioned_docs/version-0.50/actionsheetios.md deleted file mode 100644 index 0c891a6ab80..00000000000 --- a/website/versioned_docs/version-0.50/actionsheetios.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: version-0.50-actionsheetios -title: ActionSheetIOS -original_id: actionsheetios ---- - -### Methods - -- [`showActionSheetWithOptions`](actionsheetios.md#showactionsheetwithoptions) -- [`showShareActionSheetWithOptions`](actionsheetios.md#showshareactionsheetwithoptions) - ---- - -# Reference - -## Methods - -### `showActionSheetWithOptions()` - -```jsx -static showActionSheetWithOptions(options, callback) -``` - -Display an iOS action sheet. The `options` object must contain one or more of: - -- `options` (array of strings) - a list of button titles (required) -- `cancelButtonIndex` (int) - index of cancel button in `options` -- `destructiveButtonIndex` (int) - index of destructive button in `options` -- `title` (string) - a title to show above the action sheet -- `message` (string) - a message to show below the title - -The 'callback' function takes one parameter, the zero-based index of the selected item. - ---- - -### `showShareActionSheetWithOptions()` - -```jsx -static showShareActionSheetWithOptions(options, failureCallback, successCallback) -``` - -Display the iOS share sheet. The `options` object should contain one or both of `message` and `url` and can additionally have a `subject` or `excludedActivityTypes`: - -- `url` (string) - a URL to share -- `message` (string) - a message to share -- `subject` (string) - a subject for the message -- `excludedActivityTypes` (array) - the activities to exclude from the ActionSheet - -NOTE: if `url` points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc. - -The 'failureCallback' function takes one parameter, an error object. The only property defined on this object is an optional `stack` property of type `string`. - -The 'successCallback' function takes two parameters: - -- a boolean value signifying success or failure -- a string that, in the case of success, indicates the method of sharing diff --git a/website/versioned_docs/version-0.50/activityindicator.md b/website/versioned_docs/version-0.50/activityindicator.md deleted file mode 100644 index bcfea25bbb4..00000000000 --- a/website/versioned_docs/version-0.50/activityindicator.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: version-0.50-activityindicator -title: ActivityIndicator -original_id: activityindicator ---- - -Displays a circular loading indicator. - -### Example - -```SnackPlayer -import React, { Component } from 'react' -import { - ActivityIndicator, - AppRegistry, - StyleSheet, - Text, - View, -} from 'react-native' - -class App extends Component { - render() { - return ( - - - - - - - ) - } -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center' - }, - horizontal: { - flexDirection: 'row', - justifyContent: 'space-around', - padding: 10 - } -}) - -AppRegistry.registerComponent('App', () => App) -``` - -### Props - -- [View props...](view.md#props) - -* [`animating`](activityindicator.md#animating) -* [`color`](activityindicator.md#color) -* [`size`](activityindicator.md#size) -* [`hidesWhenStopped`](activityindicator.md#hideswhenstopped) - ---- - -# Reference - -## Props - -### `animating` - -Whether to show the indicator (true, the default) or hide it (false). - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `color` - -The foreground color of the spinner (default is gray). - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `size` - -Size of the indicator (default is 'small'). Passing a number to the size prop is only supported on Android. - -| Type | Required | -| ------------------------------- | -------- | -| enum('small', 'large'), ,number | No | - ---- - -### `hidesWhenStopped` - -Whether the indicator should hide when not animating (true by default). - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | diff --git a/website/versioned_docs/version-0.50/alertios.md b/website/versioned_docs/version-0.50/alertios.md deleted file mode 100644 index cb4b193c501..00000000000 --- a/website/versioned_docs/version-0.50/alertios.md +++ /dev/null @@ -1,202 +0,0 @@ ---- -id: version-0.50-alertios -title: AlertIOS -original_id: alertios ---- - -`AlertIOS` provides functionality to create an iOS alert dialog with a message or create a prompt for user input. - -Creating an iOS alert: - -``` -AlertIOS.alert( - 'Sync Complete', - 'All your data are belong to us.' -); -``` - -Creating an iOS prompt: - -``` -AlertIOS.prompt( - 'Enter a value', - null, - text => console.log("You entered "+text) -); -``` - -We recommend using the [`Alert.alert`](alert.md) method for cross-platform support if you don't need to create iOS-only prompts. - -### Methods - -- [`alert`](alertios.md#alert) -- [`prompt`](alertios.md#prompt) - -### Type Definitions - -- [`AlertType`](alertios.md#alerttype) -- [`AlertButtonStyle`](alertios.md#alertbuttonstyle) -- [`ButtonsArray`](alertios.md#buttonsarray) - ---- - -# Reference - -## Methods - -### `alert()` - -```jsx -static alert(title: string, [message]: string, [callbackOrButtons]: ?(() => void), ButtonsArray, [type]: AlertType): [object Object] -``` - -Create and display a popup alert. - -**Parameters:** - -| Name | Type | Required | Description | -| ----------------- | ------------------------------------------------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| title | string | Yes | The dialog's title. Passing null or '' will hide the title. | -| message | string | No | An optional message that appears below the dialog's title. | -| callbackOrButtons | ?(() => void),[ButtonsArray](alertios.md#buttonsarray) | No | This optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called when the user taps 'OK'. If passed an array of button configurations, each button should include a `text` key, as well as optional `onPress` and `style` keys. `style` should be one of 'default', 'cancel' or 'destructive'. | -| type | [AlertType](alertios.md#alerttype) | No | Deprecated, do not use. | - -Example with custom buttons: - -```jsx -AlertIOS.alert( - 'Update available', - 'Keep your app up to date to enjoy the latest features', - [ - { - text: 'Cancel', - onPress: () => console.log('Cancel Pressed'), - style: 'cancel' - }, - { - text: 'Install', - onPress: () => console.log('Install Pressed') - } - ] -); -``` - ---- - -### `prompt()` - -```jsx -static prompt(title: string, [message]: string, [callbackOrButtons]: ?((text: string) => void), ButtonsArray, [type]: AlertType, [defaultValue]: string, [keyboardType]: string): [object Object] -``` - -Create and display a prompt to enter some text. - -**Parameters:** - -| Name | Type | Required | Description | -| ----------------- | ------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| title | string | Yes | The dialog's title. | -| message | string | No | An optional message that appears above the text input. | -| callbackOrButtons | ?((text: string) => void),[ButtonsArray](alertios.md#buttonsarray) | No | This optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called with the prompt's value when the user taps 'OK'. If passed an array of button configurations, each button should include a `text` key, as well as optional `onPress` and `style` keys (see example). `style` should be one of 'default', 'cancel' or 'destructive'. | -| type | [AlertType](alertios.md#alerttype) | No | This configures the text input. One of 'plain-text', 'secure-text' or 'login-password'. | -| defaultValue | string | No | The default text in text input. | -| keyboardType | string | No | The keyboard type of first text field(if exists). One of 'default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter' or 'web-search'. | - -Example with custom buttons: - -```jsx -AlertIOS.prompt( - 'Enter password', - 'Enter your password to claim your $1.5B in lottery winnings', - [ - { - text: 'Cancel', - onPress: () => console.log('Cancel Pressed'), - style: 'cancel' - }, - { - text: 'OK', - onPress: (password) => - console.log('OK Pressed, password: ' + password) - } - ], - 'secure-text' -); -``` - -, - -Example with the default button and a custom callback: - -```jsx -AlertIOS.prompt( - 'Update username', - null, - (text) => console.log('Your username is ' + text), - null, - 'default' -); -``` - -## Type Definitions - -### AlertType - -An Alert button type - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| -------------- | ---------------------------- | -| default | Default alert with no inputs | -| plain-text | Plain text input alert | -| secure-text | Secure text input alert | -| login-password | Login and password alert | - ---- - -### AlertButtonStyle - -An Alert button style - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| ----------- | ------------------------ | -| default | Default button style | -| cancel | Cancel button style | -| destructive | Destructive button style | - ---- - -### ButtonsArray - -Array or buttons - -| Type | -| ----- | -| Array | - -**Properties:** - -| Name | Type | Description | -| --------- | ------------------------------------------------ | ------------------------------------- | -| [text] | string | Button label | -| [onPress] | function | Callback function when button pressed | -| [style] | [AlertButtonStyle](alertios.md#alertbuttonstyle) | Button style | - -**Constants:** - -| Value | Description | -| ------- | ------------------------------------- | -| text | Button label | -| onPress | Callback function when button pressed | -| style | Button style | diff --git a/website/versioned_docs/version-0.50/animated.md b/website/versioned_docs/version-0.50/animated.md deleted file mode 100644 index b6e6b59c479..00000000000 --- a/website/versioned_docs/version-0.50/animated.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: version-0.50-animated -title: Animated -original_id: animated ---- - -The `Animated` library is designed to make animations fluid, powerful, and painless to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution. - -The general workflow for creating an animation is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates via animations using `Animated.timing()`: - -```jsx -Animated.timing( - // Animate value over time - this.state.fadeAnim, // The value to drive - { - toValue: 1 // Animate to final value of 1 - } -).start(); // Start the animation -``` - -Refer to the [Animations](animations.md#animated-api) guide to see additional examples of `Animated` in action. - -## Overview - -There are two value types you can use with `Animated`: - -- [`Animated.Value()`](animated.md#value) for single values -- [`Animated.ValueXY()`](animated.md#valuexy) for vectors - -`Animated.Value` can bind to style properties or other props, and can be interpolated as well. A single `Animated.Value` can drive any number of properties. - -### Configuring animations - -`Animated` provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value: - -- [`Animated.decay()`](animated.md#decay) starts with an initial velocity and gradually slows to a stop. -- [`Animated.spring()`](animated.md#spring) provides a basic spring physics model. -- [`Animated.timing()`](animated.md#timing) animates a value over time using [easing functions](easing.md). - -In most cases, you will be using `timing()`. By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop. - -### Working with animations - -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}`. - -### Using the native driver - -By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation. - -You can use the native driver by specifying `useNativeDriver: true` in your animation configuration. See the [Animations](animations.md#using-the-native-driver) guide to learn more. - -### Animatable components - -Only animatable components can be animated. These unique components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default. - -- [`createAnimatedComponent()`](animated.md#createanimatedcomponent) can be used to make a component animatable. - -`Animated` exports the following animatable components using the above wrapper: - -- `Animated.Image` -- `Animated.ScrollView` -- `Animated.Text` -- `Animated.View` - -### Composing animations - -Animations can also be combined in complex ways using composition functions: - -- [`Animated.delay()`](animated.md#delay) starts an animation after a given delay. -- [`Animated.parallel()`](animated.md#parallel) starts a number of animations at the same time. -- [`Animated.sequence()`](animated.md#sequence) starts the animations in order, waiting for each to complete before starting the next. -- [`Animated.stagger()`](animated.md#stagger) starts animations in order and in parallel, but with successive delays. - -Animations can also be chained together by setting the `toValue` of one animation to be another `Animated.Value`. See [Tracking dynamic values](animations.md#tracking-dynamic-values) in the Animations guide. - -By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped. - -### Combining animated values - -You can combine two animated values via addition, multiplication, division, or modulo to make a new animated value: - -- [`Animated.add()`](animated.md#add) -- [`Animated.divide()`](animated.md#divide) -- [`Animated.modulo()`](animated.md#modulo) -- [`Animated.multiply()`](animated.md#multiply) - -### Interpolation - -The `interpolate()` function allows input ranges to map to different output ranges. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value. It uses linear interpolation by default but also supports easing functions. - -- [`interpolate()`](animated.md#interpolate) - -Read more about interpolation in the [Animation](animations.md#interpolation) guide. - -### Handling gestures and other events - -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. - -- [`Animated.event()`](animated.md#event) - -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`): - -```jsx - onScroll={Animated.event( - // scrollX = e.nativeEvent.contentOffset.x - [{ nativeEvent: { - contentOffset: { - x: scrollX - } - } - }] - )} -``` - -### Methods - -- [`decay`](animated.md#decay) -- [`timing`](animated.md#timing) -- [`spring`](animated.md#spring) -- [`add`](animated.md#add) -- [`divide`](animated.md#divide) -- [`multiply`](animated.md#multiply) -- [`modulo`](animated.md#modulo) -- [`diffClamp`](animated.md#diffclamp) -- [`delay`](animated.md#delay) -- [`sequence`](animated.md#sequence) -- [`parallel`](animated.md#parallel) -- [`stagger`](animated.md#stagger) -- [`loop`](animated.md#loop) -- [`event`](animated.md#event) -- [`forkEvent`](animated.md#forkevent) -- [`unforkEvent`](animated.md#unforkevent) - -### Properties - -- [`Value`](animated.md#value) -- [`ValueXY`](animated.md#valuexy) -- [`Interpolation`](animated.md#interpolation) -- [`Node`](animated.md#node) -- [`createAnimatedComponent`](animated.md#createanimatedcomponent) -- [`attachNativeEvent`](animated.md#attachnativeevent) - ---- - -# Reference - -## Methods - -### `decay()` - -```jsx -static decay(value, config) -``` - -Animates a value from an initial velocity to zero based on a decay coefficient. - -Config is an object that may have the following options: - -- `velocity`: Initial velocity. Required. -- `deceleration`: Rate of decay. Default 0.997. -- `isInteraction`: Whether or not this animation creates an "interaction handle" on the `InteractionManager`. Default true. -- `useNativeDriver`: Uses the native driver when true. Default false. - ---- - -### `timing()` - -```jsx -static timing(value, config) -``` - -Animates a value along a timed easing curve. The [`Easing`](easing.md) module has tons of predefined curves, or you can use your own function. - -Config is an object that may have the following options: - -- `duration`: Length of animation (milliseconds). Default 500. -- `easing`: Easing function to define curve. Default is `Easing.inOut(Easing.ease)`. -- `delay`: Start the animation after delay (milliseconds). Default 0. -- `isInteraction`: Whether or not this animation creates an "interaction handle" on the `InteractionManager`. Default true. -- `useNativeDriver`: Uses the native driver when true. Default false. - ---- - -### `spring()` - -```jsx -static spring(value, config) -``` - -Animates a value according to an analytical spring model based on [damped harmonic oscillation](https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator). Tracks velocity state to create fluid motions as the `toValue` updates, and can be chained together. - -Config is an object that may have the following options. - -Note that you can only define one of bounciness/speed, tension/friction, or stiffness/damping/mass, but not more than one: - -The friction/tension or bounciness/speed options match the spring model in [`Facebook Pop`](https://github.com/facebook/pop), [Rebound](http://facebook.github.io/rebound/), and [Origami](http://origami.design/). - -- `friction`: Controls "bounciness"/overshoot. Default 7. -- `tension`: Controls speed. Default 40. -- `speed`: Controls speed of the animation. Default 12. -- `bounciness`: Controls bounciness. Default 8. - -Specifying stiffness/damping/mass as parameters makes `Animated.spring` use an analytical spring model based on the motion equations of a [damped harmonic oscillator](https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator). This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation. - -- `stiffness`: The spring stiffness coefficient. Default 100. -- `damping`: Defines how the spring’s motion should be damped due to the forces of friction. Default 10. -- `mass`: The mass of the object attached to the end of the spring. Default 1. - -Other configuration options are as follows: - -- `velocity`: The initial velocity of the object attached to the spring. Default 0 (object is at rest). -- `overshootClamping`: Boolean indicating whether the spring should be clamped and not bounce. Default false. -- `restDisplacementThreshold`: The threshold of displacement from rest below which the spring should be considered at rest. Default 0.001. -- `restSpeedThreshold`: The speed at which the spring should be considered at rest in pixels per second. Default 0.001. -- `delay`: Start the animation after delay (milliseconds). Default 0. -- `isInteraction`: Whether or not this animation creates an "interaction handle" on the `InteractionManager`. Default true. -- `useNativeDriver`: Uses the native driver when true. Default false. - ---- - -### `add()` - -```jsx -static add(a, b) -``` - -Creates a new Animated value composed from two Animated values added together. - ---- - -### `divide()` - -```jsx -static divide(a, b) -``` - -Creates a new Animated value composed by dividing the first Animated value by the second Animated value. - ---- - -### `multiply()` - -```jsx -static multiply(a, b) -``` - -Creates a new Animated value composed from two Animated values multiplied together. - ---- - -### `modulo()` - -```jsx -static modulo(a, modulus) -``` - -Creates a new Animated value that is the (non-negative) modulo of the provided Animated value - ---- - -### `diffClamp()` - -```jsx -static diffClamp(a, min, max) -``` - -Create a new Animated value that is limited between 2 values. It uses the difference between the last value so even if the value is far from the bounds it will start changing when the value starts getting closer again. (`value = clamp(value + diff, min, max)`). - -This is useful with scroll events, for example, to show the navbar when scrolling up and to hide it when scrolling down. - ---- - -### `delay()` - -```jsx -static delay(time) -``` - -Starts an animation after the given delay. - ---- - -### `sequence()` - -```jsx -static sequence(animations) -``` - -Starts an array of animations in order, waiting for each to complete before starting the next. If the current running animation is stopped, no following animations will be started. - ---- - -### `parallel()` - -```jsx -static parallel(animations, config?) -``` - -Starts an array of animations all at the same time. By default, if one of the animations is stopped, they will all be stopped. You can override this with the `stopTogether` flag. - ---- - -### `stagger()` - -```jsx -static stagger(time, animations) -``` - -Array of animations may run in parallel (overlap), but are started in sequence with successive delays. Nice for doing trailing effects. - ---- - -### `loop()` - -```jsx -static loop(animation, config?) -``` - -Loops a given animation continuously, so that each time it reaches the end, it resets and begins again from the start. Will loop without blocking the UI thread if the child animation is set to `useNativeDriver: true`. - -Config is an object that may have the following options: - -- `iterations`: Number of times the animation should loop. Default `-1` (infinite). - ---- - -### `event()` - -```jsx -static event(argMapping, config?) -``` - -Takes an array of mappings and extracts values from each arg accordingly, then calls `setValue` on the mapped outputs. e.g. - -```jsx - onScroll={Animated.event( - [{nativeEvent: {contentOffset: {x: this._scrollX}}}], - {listener: (event) => console.log(event)}, // Optional async listener - )} - ... - onPanResponderMove: Animated.event([ - null, // raw event arg ignored - {dx: this._panX}, // gestureState arg -{listener: (event, gestureState) => console.log(event, gestureState)}, // Optional async listener - ]), -``` - -Config is an object that may have the following options: - -- `listener`: Optional async listener. -- `useNativeDriver`: Uses the native driver when true. Default false. - ---- - -### `forkEvent()` - -```jsx -static forkEvent(event, listener) -``` - -Advanced imperative API for snooping on animated events that are passed in through props. Use values directly where possible. - ---- - -### `unforkEvent()` - -```jsx -static unforkEvent(event, listener) -``` - -## Properties - ---- - ---- - ---- - ---- - ---- diff --git a/website/versioned_docs/version-0.50/button.md b/website/versioned_docs/version-0.50/button.md deleted file mode 100644 index 11300b99efd..00000000000 --- a/website/versioned_docs/version-0.50/button.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: version-0.50-button -title: Button -original_id: button ---- - -A basic button component that should render nicely on any platform. Supports a minimal level of customization. - -
- -If this button doesn't look right for your app, you can build your own button using [TouchableOpacity](touchableopacity.md) or [TouchableNativeFeedback](touchablenativefeedback.md). For inspiration, look at the [source code for this button component](https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js). Or, take a look at the [wide variety of button components built by the community](https://js.coach/?menu%5Bcollections%5D=React%20Native&page=1&query=button). - -Example usage: - -``` -import { Button } from 'react-native'; -... - - - - - - - - - - - ); - } - -} -``` diff --git a/website/versioned_docs/version-0.58/statusbar.md b/website/versioned_docs/version-0.58/statusbar.md deleted file mode 100644 index b4b91763e8e..00000000000 --- a/website/versioned_docs/version-0.58/statusbar.md +++ /dev/null @@ -1,245 +0,0 @@ ---- -id: version-0.58-statusbar -title: StatusBar -original_id: statusbar ---- - -Component to control the app status bar. - -### Usage with Navigator - -It is possible to have multiple `StatusBar` components mounted at the same time. The props will be merged in the order the `StatusBar` components were mounted. - -```jsx - - - - - -``` - -### Imperative API - -For cases where using a component is not ideal, there is also an imperative API exposed as static functions on the component. It is however not recommended to use the static API and the component for the same prop because any value set by the static API will get overriden by the one set by the component in the next render. - -### Constants - -`currentHeight` (Android only) The height of the status bar. - -### Props - -- [`animated`](statusbar.md#animated) -- [`barStyle`](statusbar.md#barstyle) -- [`hidden`](statusbar.md#hidden) -- [`backgroundColor`](statusbar.md#backgroundcolor) -- [`translucent`](statusbar.md#translucent) -- [`networkActivityIndicatorVisible`](statusbar.md#networkactivityindicatorvisible) -- [`showHideTransition`](statusbar.md#showhidetransition) - -### Methods - -- [`setHidden`](statusbar.md#sethidden) -- [`setBarStyle`](statusbar.md#setbarstyle) -- [`setNetworkActivityIndicatorVisible`](statusbar.md#setnetworkactivityindicatorvisible) -- [`setBackgroundColor`](statusbar.md#setbackgroundcolor) -- [`setTranslucent`](statusbar.md#settranslucent) - -### Type Definitions - -- [`StatusBarStyle`](statusbar.md#statusbarstyle) -- [`StatusBarAnimation`](statusbar.md#statusbaranimation) - ---- - -# Reference - -## Props - -### `animated` - -If the transition between status bar property changes should be animated. Supported for backgroundColor, barStyle and hidden. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `barStyle` - -Sets the color of the status bar text. - -| Type | Required | -| ------------------------------------------------ | -------- | -| enum('default', 'light-content', 'dark-content') | No | - ---- - -### `hidden` - -If the status bar is hidden. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `backgroundColor` - -The background color of the status bar. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `translucent` - -If the status bar is translucent. When translucent is set to true, the app will draw under the status bar. This is useful when using a semi transparent status bar color. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `networkActivityIndicatorVisible` - -If the network activity indicator should be visible. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `showHideTransition` - -The transition effect when showing and hiding the status bar using the `hidden` prop. Defaults to 'fade'. - -| Type | Required | Platform | -| --------------------- | -------- | -------- | -| enum('fade', 'slide') | No | iOS | - -## Methods - -### `setHidden()` - -```jsx -static setHidden(hidden: boolean, [animation]: StatusBarAnimation) -``` - -Show or hide the status bar - -**Parameters:** - -| Name | Type | Required | Description | -| --------- | ----------------------------------------------------- | -------- | ---------------------------------------------------------------- | -| hidden | boolean | Yes | Hide the status bar. | -| animation | [StatusBarAnimation](statusbar.md#statusbaranimation) | No | Optional animation when changing the status bar hidden property. | - ---- - -### `setBarStyle()` - -```jsx -static setBarStyle(style: StatusBarStyle, [animated]: boolean) -``` - -Set the status bar style - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | --------------------------------------------- | -------- | ------------------------- | -| style | [StatusBarStyle](statusbar.md#statusbarstyle) | Yes | Status bar style to set | -| animated | boolean | No | Animate the style change. | - ---- - -### `setNetworkActivityIndicatorVisible()` - -```jsx -static setNetworkActivityIndicatorVisible(visible: boolean) -``` - -Control the visibility of the network activity indicator - -**Parameters:** - -| Name | Type | Required | Description | -| ------- | ------- | -------- | ------------------- | -| visible | boolean | Yes | Show the indicator. | - ---- - -### `setBackgroundColor()` - -```jsx -static setBackgroundColor(color: string, [animated]: boolean) -``` - -Set the background color for the status bar - -**Parameters:** - -| Name | Type | Required | Description | -| -------- | ------- | -------- | ------------------------- | -| color | string | Yes | Background color. | -| animated | boolean | No | Animate the style change. | - ---- - -### `setTranslucent()` - -```jsx -static setTranslucent(translucent: boolean) -``` - -Control the translucency of the status bar - -**Parameters:** - -| Name | Type | Required | Description | -| ----------- | ------- | -------- | ------------------- | -| translucent | boolean | Yes | Set as translucent. | - -## Type Definitions - -### StatusBarStyle - -Status bar style - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| ------------- | -------------------------------------------------------------------- | -| default | Default status bar style (dark for iOS, light for Android) | -| light-content | Dark background, white texts and icons | -| dark-content | Light background, dark texts and icons (requires API>=23 on Android) | - ---- - -### StatusBarAnimation - -Status bar animation - -| Type | -| ------ | -| \$Enum | - -**Constants:** - -| Value | Description | -| ----- | --------------- | -| none | No animation | -| fade | Fade animation | -| slide | Slide animation | diff --git a/website/versioned_docs/version-0.58/stylesheet.md b/website/versioned_docs/version-0.58/stylesheet.md deleted file mode 100644 index ce4cda733ba..00000000000 --- a/website/versioned_docs/version-0.58/stylesheet.md +++ /dev/null @@ -1,168 +0,0 @@ ---- -id: version-0.58-stylesheet -title: StyleSheet -original_id: stylesheet ---- - -A StyleSheet is an abstraction similar to CSS StyleSheets - -Create a new StyleSheet: - -```jsx -const styles = StyleSheet.create({ - container: { - borderRadius: 4, - borderWidth: 0.5, - borderColor: '#d6d7da' - }, - title: { - fontSize: 19, - fontWeight: 'bold' - }, - activeTitle: { - color: 'red' - } -}); -``` - -Use a StyleSheet: - -```jsx - - - -``` - -Code quality: - -- By moving styles away from the render function, you're making the code easier to understand. -- Naming the styles is a good way to add meaning to the low level components in the render function. - -### Methods - -- [`setStyleAttributePreprocessor`](stylesheet.md#setstyleattributepreprocessor) -- [`create`](stylesheet.md#create) -- [`flatten`](stylesheet.md#flatten) - -### Properties - -- [`hairlineWidth`](stylesheet.md#hairlinewidth) -- [`absoluteFill`](stylesheet.md#absolutefill) -- [`absoluteFillObject`](stylesheet.md#absolutefillobject) - ---- - -# Reference - -## Methods - -### `setStyleAttributePreprocessor()` - -```jsx -static setStyleAttributePreprocessor(property, process) -``` - -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. - -Sets a function to use to pre-process a style property value. This is used internally to process color and transform values. You should not use this unless you really know what you are doing and have exhausted other options. - ---- - -### `create()` - -```jsx -static create(obj) -``` - -Creates a StyleSheet style reference from the given object. - ---- - -### `flatten` - -```jsx -static flatten(style) -``` - -Flattens an array of style objects, into one aggregated style object. Alternatively, this method can be used to lookup IDs, returned by `StyleSheet.register`. - -> _NOTE_: Exercise caution as abusing this can tax you in terms of optimizations. IDs enable optimizations through the bridge and memory in general. Refering to style objects directly will deprive you of these optimizations. - -Example: - -```jsx -var styles = StyleSheet.create({ - listItem: { - flex: 1, - fontSize: 16, - color: 'white' - }, - selectedListItem: { - color: 'green' - } -}); - -StyleSheet.flatten([styles.listItem, styles.selectedListItem]); -// returns { flex: 1, fontSize: 16, color: 'green' } -``` - -Alternative use: - -```jsx -var styles = StyleSheet.create({ - listItem: { - flex: 1, - fontSize: 16, - color: 'white' - }, - selectedListItem: { - color: 'green' - } -}); - -StyleSheet.flatten(styles.listItem); -// returns { flex: 1, fontSize: 16, color: 'white' } -// Simply styles.listItem would return its ID (number) -``` - -This method internally uses `StyleSheetRegistry.getStyleByID(style)` to resolve style objects represented by IDs. Thus, an array of style objects (instances of `StyleSheet.create()`), are individually resolved to, their respective objects, merged as one and then returned. This also explains the alternative use. - -## Properties - -### `hairlineWidth` - -```jsx -var styles = StyleSheet.create({ - separator: { - borderBottomColor: '#bbb', - borderBottomWidth: StyleSheet.hairlineWidth - } -}); -``` - -This constant will always be a round number of pixels (so a line defined by it can look crisp) and will try to match the standard width of a thin line on the underlying platform. However, you should not rely on it being a constant size, because on different platforms and screen densities its value may be calculated differently. - -A line with hairline width may not be visible if your simulator is downscaled. - ---- - -### `absoluteFill` - -A very common pattern is to create overlays with position absolute and zero positioning (`position: 'absolute', left: 0, right: 0, top: 0, bottom: 0`), so `absoluteFill` can be used for convenience and to reduce duplication of these repeated styles. If you want, absoluteFill can be used to create a customized entry in a StyleSheet, e.g.: - -```jsx -const styles = StyleSheet.create({ - wrapper: { - ...StyleSheet.absoluteFill, - top: 10, - backgroundColor: 'transparent' - } -}); -``` - ---- diff --git a/website/versioned_docs/version-0.58/switch.md b/website/versioned_docs/version-0.58/switch.md deleted file mode 100644 index 03ab6821544..00000000000 --- a/website/versioned_docs/version-0.58/switch.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -id: version-0.58-switch -title: Switch -original_id: switch ---- - -Renders a boolean input. - -This is a controlled component that requires an `onValueChange` callback that updates the `value` prop in order for the component to reflect user actions. If the `value` prop is not updated, the component will continue to render the supplied `value` prop instead of the expected result of any user actions. - -### Props - -- [View props...](view.md#props) - -* [`disabled`](switch.md#disabled) -* [`trackColor`](switch.md#trackcolor) -* [`ios_backgroundColor`](switch.md#ios-backgroundcolor) -* [`onValueChange`](switch.md#onvaluechange) -* [`testID`](switch.md#testid) -* [`thumbColor`](switch.md#thumbcolor) -* [`tintColor`](switch.md#tintcolor) -* [`value`](switch.md#value) - ---- - -# Reference - -## Props - -### `disabled` - -If true the user won't be able to toggle the switch. Default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `trackColor` - -Custom colors for the switch track. - -_iOS_: When the switch value is false, the track shrinks into the border. If you want to change the color of the background exposed by the shrunken track, use [`ios_backgroundColor`](switch.md#ios_backgroundColor). - -| Type | Required | -| ------------------------------------------------------------- | -------- | -| object: {false: [color](colors.md), true: [color](colors.md)} | No | - ---- - -### `ios_backgroundColor` - -On iOS, custom color for the background. This background color can be seen either when the switch value is false or when the switch is disabled (and the switch is translucent). - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `onValueChange` - -Invoked with the new value when the value changes. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `thumbColor` - -Color of the foreground switch grip. If this is set on iOS, the switch grip will lose its drop shadow. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `tintColor` - -`tintColor` is deprecated, use `trackColor` instead. - -Border color on iOS and background color on Android when the switch is turned off. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `value` - -The value of the switch. If true the switch will be turned on. Default value is false. - -| Type | Required | -| ---- | -------- | -| bool | No | diff --git a/website/versioned_docs/version-0.58/text-style-props.md b/website/versioned_docs/version-0.58/text-style-props.md deleted file mode 100644 index f2b78c2a4dc..00000000000 --- a/website/versioned_docs/version-0.58/text-style-props.md +++ /dev/null @@ -1,189 +0,0 @@ ---- -id: version-0.58-text-style-props -title: Text Style Props -original_id: text-style-props ---- - -### Props - -- [`textShadowOffset`](text-style-props.md#textshadowoffset) -- [`color`](text-style-props.md#color) -- [`fontSize`](text-style-props.md#fontsize) -- [`fontStyle`](text-style-props.md#fontstyle) -- [`fontWeight`](text-style-props.md#fontweight) -- [`lineHeight`](text-style-props.md#lineheight) -- [`textAlign`](text-style-props.md#textalign) -- [`textDecorationLine`](text-style-props.md#textdecorationline) -- [`textShadowColor`](text-style-props.md#textshadowcolor) -- [`fontFamily`](text-style-props.md#fontfamily) -- [`textShadowRadius`](text-style-props.md#textshadowradius) -- [`includeFontPadding`](text-style-props.md#includefontpadding) -- [`textAlignVertical`](text-style-props.md#textalignvertical) -- [`fontVariant`](text-style-props.md#fontvariant) -- [`letterSpacing`](text-style-props.md#letterspacing) -- [`textDecorationColor`](text-style-props.md#textdecorationcolor) -- [`textDecorationStyle`](text-style-props.md#textdecorationstyle) -- [`textTransform`](text-style-props.md#texttransform) -- [`writingDirection`](text-style-props.md#writingdirection) - ---- - -# Reference - -## Props - -### `textShadowOffset` - -| Type | Required | -| -------------------------------------- | -------- | -| object: {width: number,height: number} | No | - ---- - -### `color` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `fontSize` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `fontStyle` - -| Type | Required | -| ------------------------ | -------- | -| enum('normal', 'italic') | No | - ---- - -### `fontWeight` - -Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen. - -| Type | Required | -| ------------------------------------------------------------------------------------- | -------- | -| enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') | No | - ---- - -### `lineHeight` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `textAlign` - -Specifies text alignment. The value 'justify' is only supported on iOS and fallbacks to `left` on Android. - -| Type | Required | -| -------------------------------------------------- | -------- | -| enum('auto', 'left', 'right', 'center', 'justify') | No | - ---- - -### `textDecorationLine` - -| Type | Required | -| ------------------------------------------------------------------- | -------- | -| enum('none', 'underline', 'line-through', 'underline line-through') | No | - ---- - -### `textShadowColor` - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `fontFamily` - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `textShadowRadius` - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `includeFontPadding` - -Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders. With some fonts, this padding can make text look slightly misaligned when centered vertically. For best results also set `textAlignVertical` to `center`. Default is true. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `textAlignVertical` - -| Type | Required | Platform | -| --------------------------------------- | -------- | -------- | -| enum('auto', 'top', 'bottom', 'center') | No | Android | - ---- - -### `fontVariant` - -| Type | Required | Platform | -| ------------------------------------------------------------------------------------------------ | -------- | -------- | -| array of enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums') | No | iOS | - ---- - -### `letterSpacing` - -| Type | Required | Platform | -| ------ | -------- | ------------------- | -| number | No | iOS, Android >= 5.0 | - ---- - -### `textDecorationColor` - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | iOS | - ---- - -### `textDecorationStyle` - -| Type | Required | Platform | -| ------------------------------------------- | -------- | -------- | -| enum('solid', 'double', 'dotted', 'dashed') | No | iOS | - ---- - -### `textTransform` - -| Type | Required | -| ---------------------------------------------------- | -------- | -| enum('none', 'uppercase', 'lowercase', 'capitalize') | No | - ---- - -### `writingDirection` - -| Type | Required | Platform | -| -------------------------- | -------- | -------- | -| enum('auto', 'ltr', 'rtl') | No | iOS | diff --git a/website/versioned_docs/version-0.58/text.md b/website/versioned_docs/version-0.58/text.md deleted file mode 100644 index 8f448b86948..00000000000 --- a/website/versioned_docs/version-0.58/text.md +++ /dev/null @@ -1,505 +0,0 @@ ---- -id: version-0.58-text -title: Text -original_id: text ---- - -A React component for displaying text. - -`Text` supports nesting, styling, and touch handling. - -In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines: - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, Text, StyleSheet } from 'react-native'; - -export default class TextInANest extends Component { - constructor(props) { - super(props); - this.state = { - titleText: "Bird's Nest", - bodyText: 'This is not really a bird nest.' - }; - } - - render() { - return ( - - - {this.state.titleText}{'\n'}{'\n'} - - - {this.state.bodyText} - - - ); - } -} - -const styles = StyleSheet.create({ - baseText: { - fontFamily: 'Cochin', - }, - titleText: { - fontSize: 20, - fontWeight: 'bold', - }, -}); - -// skip this line if using Create React Native App -AppRegistry.registerComponent('TextInANest', () => TextInANest); -``` - -## Nested text - -Both Android and iOS allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (`NSAttributedString` on iOS, `SpannableString` on Android). In practice, this is very tedious. For React Native, we decided to use web paradigm for this where you can nest text to achieve the same effect. - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, Text } from 'react-native'; - -export default class BoldAndBeautiful extends Component { - render() { - return ( - - I am bold - - and red - - - ); - } -} - -// skip this line if using Create React Native App -AppRegistry.registerComponent('AwesomeProject', () => BoldAndBeautiful); -``` - -Behind the scenes, React Native converts this to a flat `NSAttributedString` or `SpannableString` that contains the following information: - -```jsx -"I am bold and red" -0-9: bold -9-17: bold, red -``` - -## Containers - -The `` element is particular relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a `` are no longer rectangles, but wrap when they see the end of the line. - -```jsx - - First part and - second part - -// Text container: the text will be inline if the space allowed it -// |First part and second part| - -// otherwise, the text will flow as if it was one -// |First part | -// |and second | -// |part | - - - First part and - second part - -// View container: each text is its own block -// |First part and| -// |second part | - -// the will will flow in its own block -// |First part | -// |and | -// |second part| -``` - -## Limited Style Inheritance - -On the web, the usual way to set a font family and size for the entire document is to take advantage of inherited CSS properties like so: - -```css -html { - font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; - font-size: 11px; - color: #141823; -} -``` - -All elements in the document will inherit this font unless they or one of their parents specifies a new rule. - -In React Native, we are more strict about it: **you must wrap all the text nodes inside of a `` component**. You cannot have a text node directly under a ``. - -```jsx -// BAD: will raise exception, can't have a text node as child of a - - Some text - - -// GOOD - - - Some text - - -``` - -You also lose the ability to set up a default font for an entire subtree. 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. - -```jsx - - - Text styled with the default font for the entire application - - Text styled as a header - -``` - -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: - -```jsx -class MyAppHeaderText extends Component { - render() { - return ( - - - {this.props.children} - - - ); - } -} -``` - -Composing `MyAppText` in this way ensures that we get the styles from a top-level component, but leaves us the ability to add / override them in specific use cases. - -React Native still has the concept of style inheritance, but limited to text subtrees. In this case, the second part will be both bold and red. - -```jsx - - I am bold - and red - -``` - -We believe that this more constrained way to style text will yield better apps: - -- (Developer) React components are designed with strong isolation in mind: You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation. - -- (Implementor) The implementation of React Native is also simplified. We do not need to have a `fontFamily` field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself. - -### Props - -- [`selectable`](text.md#selectable) -- [`accessibilityHint`](text.md#accessibilityhint) -- [`accessibilityLabel`](text.md#accessibilitylabel) -- [`accessible`](text.md#accessible) -- [`ellipsizeMode`](text.md#ellipsizemode) -- [`nativeID`](text.md#nativeid) -- [`numberOfLines`](text.md#numberoflines) -- [`onLayout`](text.md#onlayout) -- [`onLongPress`](text.md#onlongpress) -- [`onPress`](text.md#onpress) -- [`pressRetentionOffset`](text.md#pressretentionoffset) -- [`allowFontScaling`](text.md#allowfontscaling) -- [`maxFontSizeMultiplier`](text.md#maxfontsizemultiplier) -- [`style`](text.md#style) -- [`testID`](text.md#testid) -- [`disabled`](text.md#disabled) -- [`selectionColor`](text.md#selectioncolor) -- [`textBreakStrategy`](text.md#textbreakstrategy) -- [`adjustsFontSizeToFit`](text.md#adjustsfontsizetofit) -- [`minimumFontScale`](text.md#minimumfontscale) -- [`suppressHighlighting`](text.md#suppresshighlighting) - ---- - -# Reference - -## Props - -### `selectable` - -Lets the user select text, to use the native copy and paste functionality. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `accessibilityHint` - -An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `accessibilityLabel` - -Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space. - -| Type | Required | -| ---- | -------- | -| node | No | - ---- - -### `accessible` - -When set to `true`, indicates that the view is an accessibility element. The default value for a `Text` element is `true`. - -See the [Accessibility guide](accessibility.md#accessible-ios-android) for more information. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `ellipsizeMode` - -When `numberOfLines` is set, this prop defines how text will be truncated. `numberOfLines` must be set in conjunction with this prop. - -This can be one of the following values: - -- `head` - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz" -- `middle` - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. "ab...yz" -- `tail` - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..." -- `clip` - Lines are not drawn past the edge of the text container. - -The default is `tail`. - -| Type | Required | -| -------------------------------------- | -------- | -| enum('head', 'middle', 'tail', 'clip') | No | - ---- - -### `nativeID` - -Used to locate this view from native code. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `numberOfLines` - -Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. - -This prop is commonly used with `ellipsizeMode`. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with - -`{nativeEvent: {layout: {x, y, width, height}}}` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLongPress` - -This function is called on long press. - -e.g., `onLongPress={this.increaseSize}>` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onPress` - -This function is called on press. - -e.g., `onPress={() => console.log('1st')}` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `pressRetentionOffset` - -When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations. - -| Type | Required | -| ------------------------------------------------------------------ | -------- | -| object: {top: number, left: number, bottom: number, right: number} | No | - ---- - -### `allowFontScaling` - -Specifies whether fonts should scale to respect Text Size accessibility settings. The default is `true`. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `maxFontSizeMultiplier` - -Specifies largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values: - -- `null/undefined` (default): inherit from the parent node or the global default (0) -- `0`: no max, ignore parent/global default -- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `style` - -| Type | Required | -| ----- | -------- | -| style | No | - -- [View Style Props...](view-style-props.md#style) - -- **`textShadowOffset`**: object: {width: number,height: number} - -- **`color`**: [color](colors.md) - -- **`fontSize`**: number - -- **`fontStyle`**: enum('normal', 'italic') - -- **`fontWeight`**: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') - - Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen. - -- **`lineHeight`**: number - -- **`textAlign`**: enum('auto', 'left', 'right', 'center', 'justify') - - Specifies text alignment. The value 'justify' is only supported on iOS and fallbacks to `left` on Android. - -- **`textDecorationLine`**: enum('none', 'underline', 'line-through', 'underline line-through') - -- **`textShadowColor`**: [color](colors.md) - -- **`fontFamily`**: string - -- **`textShadowRadius`**: number - -- **`includeFontPadding`**: bool (_Android_) - - Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders. With some fonts, this padding can make text look slightly misaligned when centered vertically. For best results also set `textAlignVertical` to `center`. Default is true. - -* **`textAlignVertical`**: enum('auto', 'top', 'bottom', 'center') (_Android_) - -* **`fontVariant`**: array of enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums') (_iOS_) - -* **`letterSpacing`**: number - - Increase or decrease the spacing between characters. The default is 0, for no extra letter spacing. - - iOS: The additional space will be rendered after each glyph. - - Android: Only supported since Android 5.0 - older versions will ignore this attribute. Please note that additional space will be added _around_ the glyphs (half on each side), which differs from the iOS rendering. It is possible to emulate the iOS rendering by using layout attributes, e.g. negative margins, as appropriate for your situation. - -* **`textDecorationColor`**: [color](colors.md) (_iOS_) - -* **`textDecorationStyle`**: enum('solid', 'double', 'dotted', 'dashed') (_iOS_) - -* **`textTransform`**: enum('none', 'uppercase', 'lowercase', 'capitalize') - -* **`writingDirection`**: enum('auto', 'ltr', 'rtl') (_iOS_) - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `disabled` - -Specifies the disabled state of the text view for testing purposes - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `selectionColor` - -The highlight color of the text. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `textBreakStrategy` - -Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced` The default value is `highQuality`. - -| Type | Required | Platform | -| ----------------------------------------- | -------- | -------- | -| enum('simple', 'highQuality', 'balanced') | No | Android | - ---- - -### `adjustsFontSizeToFit` - -Specifies whether font should be scaled down automatically to fit given style constraints. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `minimumFontScale` - -Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0). - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `suppressHighlighting` - -When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - -# Known issues - -- [react-native#22811](https://github.com/facebook/react-native/issues/22811): Nested Text elements do not support `numberOfLines` attribute diff --git a/website/versioned_docs/version-0.58/textinput.md b/website/versioned_docs/version-0.58/textinput.md deleted file mode 100644 index dae3c53b1cf..00000000000 --- a/website/versioned_docs/version-0.58/textinput.md +++ /dev/null @@ -1,811 +0,0 @@ ---- -id: version-0.58-textinput -title: TextInput -original_id: textinput ---- - -A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. - -The least complex use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A small example: - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, TextInput } from 'react-native'; - -export default class UselessTextInput extends Component { - constructor(props) { - super(props); - this.state = { text: 'Useless Placeholder' }; - } - - render() { - return ( - this.setState({text})} - value={this.state.text} - /> - ); - } -} - -// skip this line if using Create React Native App -AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput); -``` - -Two methods exposed via the native element are .focus() and .blur() that will focus or blur the TextInput programmatically. - -Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=false`. To achieve the same effect, you can wrap your `TextInput` in a `View`: - -```SnackPlayer -import React, { Component } from 'react'; -import { AppRegistry, View, TextInput } from 'react-native'; - -class UselessTextInput extends Component { - render() { - return ( - - ); - } -} - -export default class UselessTextInputMultiline extends Component { - constructor(props) { - super(props); - this.state = { - text: 'Useless Multiline Placeholder', - }; - } - - // If you type something in the text box that is a color, the background will change to that - // color. - render() { - return ( - - this.setState({text})} - value={this.state.text} - /> - - ); - } -} - -// skip these lines if using Create React Native App -AppRegistry.registerComponent( - 'AwesomeProject', - () => UselessTextInputMultiline -); -``` - -`TextInput` has by default a border at the bottom of its view. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this is to either not set height explicitly, case in which the system will take care of displaying the border in the correct position, or to not display the border by setting `underlineColorAndroid` to transparent. - -Note that on Android performing text selection in input can change app's activity `windowSoftInputMode` param to `adjustResize`. This may cause issues with components that have position: 'absolute' while keyboard is active. To avoid this behavior either specify `windowSoftInputMode` in AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html ) or control this param programmatically with native code. - -### Props - -- [View props...](view.md#props) - -* [`allowFontScaling`](textinput.md#allowfontscaling) -* [`autoCapitalize`](textinput.md#autocapitalize) -* [`autoCorrect`](textinput.md#autocorrect) -* [`autoFocus`](textinput.md#autofocus) -* [`blurOnSubmit`](textinput.md#bluronsubmit) -* [`caretHidden`](textinput.md#carethidden) -* [`clearButtonMode`](textinput.md#clearbuttonmode) -* [`clearTextOnFocus`](textinput.md#cleartextonfocus) -* [`contextMenuHidden`](textinput.md#contextmenuhidden) -* [`dataDetectorTypes`](textinput.md#datadetectortypes) -* [`defaultValue`](textinput.md#defaultvalue) -* [`disableFullscreenUI`](textinput.md#disablefullscreenui) -* [`editable`](textinput.md#editable) -* [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) -* [`inlineImageLeft`](textinput.md#inlineimageleft) -* [`inlineImagePadding`](textinput.md#inlineimagepadding) -* [`keyboardAppearance`](textinput.md#keyboardappearance) -* [`keyboardType`](textinput.md#keyboardtype) -* [`maxFontSizeMultiplier`](text.md#maxfontsizemultiplier) -* [`maxLength`](textinput.md#maxlength) -* [`multiline`](textinput.md#multiline) -* [`numberOfLines`](textinput.md#numberoflines) -* [`onBlur`](textinput.md#onblur) -* [`onChange`](textinput.md#onchange) -* [`onChangeText`](textinput.md#onchangetext) -* [`onContentSizeChange`](textinput.md#oncontentsizechange) -* [`onEndEditing`](textinput.md#onendediting) -* [`onFocus`](textinput.md#onfocus) -* [`onKeyPress`](textinput.md#onkeypress) -* [`onLayout`](textinput.md#onlayout) -* [`onScroll`](textinput.md#onscroll) -* [`onSelectionChange`](textinput.md#onselectionchange) -* [`onSubmitEditing`](textinput.md#onsubmitediting) -* [`placeholder`](textinput.md#placeholder) -* [`placeholderTextColor`](textinput.md#placeholdertextcolor) -* [`returnKeyLabel`](textinput.md#returnkeylabel) -* [`returnKeyType`](textinput.md#returnkeytype) -* [`scrollEnabled`](textinput.md#scrollenabled) -* [`secureTextEntry`](textinput.md#securetextentry) -* [`selection`](textinput.md#selection) -* [`selectionColor`](textinput.md#selectioncolor) -* [`selectionState`](textinput.md#selectionstate) -* [`selectTextOnFocus`](textinput.md#selecttextonfocus) -* [`spellCheck`](textinput.md#spellcheck) -* [`textContentType`](textinput.md#textcontenttype) -* [`style`](textinput.md#style) -* [`textBreakStrategy`](textinput.md#textbreakstrategy) -* [`underlineColorAndroid`](textinput.md#underlinecolorandroid) -* [`value`](textinput.md#value) - -### Methods - -- [`clear`](textinput.md#clear) -- [`isFocused`](textinput.md#isfocused) - ---- - -# Reference - -## Props - -### `allowFontScaling` - -Specifies whether fonts should scale to respect Text Size accessibility settings. The default is `true`. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `autoCapitalize` - -Can tell `TextInput` to automatically capitalize certain characters. This property is not supported by some keyboard types such as `name-phone-pad`. - -- `characters`: all characters. -- `words`: first letter of each word. -- `sentences`: first letter of each sentence (_default_). -- `none`: don't auto capitalize anything. - -| Type | Required | -| ------------------------------------------------ | -------- | -| enum('none', 'sentences', 'words', 'characters') | No | - ---- - -### `autoCorrect` - -If `false`, disables auto-correct. The default value is `true`. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `autoFocus` - -If `true`, focuses the input on `componentDidMount`. The default value is `false`. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `blurOnSubmit` - -If `true`, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting `blurOnSubmit` to `true` means that pressing return will blur the field and trigger the `onSubmitEditing` event instead of inserting a newline into the field. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `caretHidden` - -If `true`, caret is hidden. The default value is `false`. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `clearButtonMode` - -When the clear button should appear on the right side of the text view. This property is supported only for single-line TextInput component. The default value is `never`. - -| Type | Required | Platform | -| ---------------------------------------------------------- | -------- | -------- | -| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | - ---- - -### `clearTextOnFocus` - -If `true`, clears the text field automatically when editing begins. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `contextMenuHidden` - -If `true`, context menu is hidden. The default value is `false`. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `dataDetectorTypes` - -Determines the types of data converted to clickable URLs in the text input. Only valid if `multiline={true}` and `editable={false}`. By default no data types are detected. - -You can provide one type or an array of many types. - -Possible values for `dataDetectorTypes` are: - -- `'phoneNumber'` -- `'link'` -- `'address'` -- `'calendarEvent'` -- `'none'` -- `'all'` - -| Type | Required | Platform | -| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all') | No | iOS | - ---- - -### `defaultValue` - -Provides an initial value that will change when the user starts typing. Useful for less complex use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `disableFullscreenUI` - -When `false`, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone), the OS may choose to have the user edit the text inside of a full screen text input mode. When `true`, this feature is disabled and users will always edit the text directly inside of the text input. Defaults to `false`. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | Android | - ---- - -### `editable` - -If `false`, text is not editable. The default value is `true`. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `enablesReturnKeyAutomatically` - -If `true`, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is `false`. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `inlineImageLeft` - -If defined, the provided image resource will be rendered on the left. The image resource must be inside `/android/app/src/main/res/drawable` and referenced like - -``` - -``` - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `inlineImagePadding` - -Padding between the inline image, if any, and the text input itself. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | Android | - ---- - -### `keyboardAppearance` - -Determines the color of the keyboard. - -| Type | Required | Platform | -| -------------------------------- | -------- | -------- | -| enum('default', 'light', 'dark') | No | iOS | - ---- - -### `keyboardType` - -Determines which keyboard to open, e.g.`numeric`. - -The following values work across platforms: - -- `default` -- `number-pad` -- `decimal-pad` -- `numeric` -- `email-address` -- `phone-pad` - -_iOS Only_ - -The following values work on iOS only: - -- `ascii-capable` -- `numbers-and-punctuation` -- `url` -- `name-phone-pad` -- `twitter` -- `web-search` - -_Android Only_ - -The following values work on Android only: - -- `visible-password` - -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password') | No | - ---- - -### `maxFontSizeMultiplier` - -Specifies largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values: - -- `null/undefined` (default): inherit from the parent node or the global default (0) -- `0`: no max, ignore parent/global default -- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `maxLength` - -Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. - -| Type | Required | -| ------ | -------- | -| number | No | - ---- - -### `multiline` - -If `true`, the text input can be multiple lines. The default value is `false`. It is important to note that this aligns the text to the top on iOS, and centers it on Android. Use with `textAlignVertical` set to `top` for the same behavior in both platforms. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `numberOfLines` - -Sets the number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | Android | - ---- - -### `onBlur` - -Callback that is called when the text input is blurred. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChange` - -Callback that is called when the text input's text changes. This will be called with `{ nativeEvent: { eventCount, target, text} }` - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onChangeText` - -Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onContentSizeChange` - -Callback that is called when the text input's content size changes. This will be called with `{ nativeEvent: { contentSize: { width, height } } }`. - -Only called for multiline text inputs. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onEndEditing` - -Callback that is called when text input ends. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onFocus` - -Callback that is called when the text input is focused. This is called with `{ nativeEvent: { target } }`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onKeyPress` - -Callback that is called when a key is pressed. This will be called with `{ nativeEvent: { key: keyValue } }` where `keyValue` is `'Enter'` or `'Backspace'` for respective keys and the typed-in character otherwise including `' '` for space. Fires before `onChange` callbacks. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onLayout` - -Invoked on mount and layout changes with `{ nativeEvent: {layout: {x, y, width, height}, target } }`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onScroll` - -Invoked on content scroll with `{ nativeEvent: { contentOffset: { x, y } } }`. May also contain other properties from ScrollEvent but on Android contentSize is not provided for performance reasons. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onSelectionChange` - -Callback that is called when the text input selection is changed. This will be called with `{ nativeEvent: { selection: { start, end } } }`. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `onSubmitEditing` - -Callback that is called when the text input's submit button is pressed. Invalid if `multiline={true}` is specified. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `placeholder` - -The string that will be rendered before text input has been entered. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `placeholderTextColor` - -The text color of the placeholder string. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `returnKeyLabel` - -Sets the return key to the label. Use it instead of `returnKeyType`. - -| Type | Required | Platform | -| ------ | -------- | -------- | -| string | No | Android | - ---- - -### `returnKeyType` - -Determines how the return key should look. On Android you can also use `returnKeyLabel`. - -_Cross platform_ - -The following values work across platforms: - -- `done` -- `go` -- `next` -- `search` -- `send` - -_Android Only_ - -The following values work on Android only: - -- `none` -- `previous` - -_iOS Only_ - -The following values work on iOS only: - -- `default` -- `emergency-call` -- `google` -- `join` -- `route` -- `yahoo` - -| Type | Required | -| --------------------------------------------------------------------------------------------------------------------------------- | -------- | -| enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') | No | - ---- - -### `scrollEnabled` - -If `false`, scrolling of the text view will be disabled. The default value is `true`. Only works with `multiline={true}`. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `secureTextEntry` - -If `true`, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is `false`. Does not work with `multiline={true}`. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `selection` - -The start and end of the text input's selection. Set start and end to the same value to position the cursor. - -| Type | Required | -| ----------------------------------- | -------- | -| object: {start: number,end: number} | No | - ---- - -### `selectionColor` - -The highlight and cursor color of the text input. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `selectionState` - -An instance of `DocumentSelectionState`, this is some state that is responsible for maintaining selection information for a document. - -Some functionality that can be performed with this instance is: - -- `blur()` -- `focus()` -- `update()` - -> You can reference `DocumentSelectionState` in [`vendor/document/selection/DocumentSelectionState.js`](https://github.com/facebook/react-native/blob/master/Libraries/vendor/document/selection/DocumentSelectionState.js) - -| Type | Required | Platform | -| ---------------------- | -------- | -------- | -| DocumentSelectionState | No | iOS | - ---- - -### `selectTextOnFocus` - -If `true`, all text will automatically be selected on focus. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `spellCheck` - -If `false`, disables spell-check style (i.e. red underlines). The default value is inherited from `autoCorrect`. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `textContentType` - -Give the keyboard and the system information about the expected semantic meaning for the content that users enter. - -For iOS 11+ you can set `textContentType` to `username` or `password` to enable autofill of login details from the device keychain. - -For iOS 12+ `newPassword` can be used to indicate a new password input the user may want to save in the keychain, and `oneTimeCode` can be used to indicate that a field can be autofilled by a code arriving in an SMS. - -To disable autofill, set `textContentType` to `none`. - -Possible values for `textContentType` are: - -- `none` -- `URL` -- `addressCity` -- `addressCityAndState` -- `addressState` -- `countryName` -- `creditCardNumber` -- `emailAddress` -- `familyName` -- `fullStreetAddress` -- `givenName` -- `jobTitle` -- `location` -- `middleName` -- `name` -- `namePrefix` -- `nameSuffix` -- `nickname` -- `organizationName` -- `postalCode` -- `streetAddressLine1` -- `streetAddressLine2` -- `sublocality` -- `telephoneNumber` -- `username` -- `password` -- `newPassword` -- `oneTimeCode` - -| Type | Required | Platform | -| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -| enum('none', 'URL', 'addressCity', 'addressCityAndState', 'addressState', 'countryName', 'creditCardNumber', 'emailAddress', 'familyName', 'fullStreetAddress', 'givenName', 'jobTitle', 'location', 'middleName', 'name', 'namePrefix', 'nameSuffix', 'nickname', 'organizationName', 'postalCode', 'streetAddressLine1', 'streetAddressLine2', 'sublocality', 'telephoneNumber', 'username', 'password') | No | iOS | - ---- - -### `style` - -Note that not all Text styles are supported, an incomplete list of what is not supported includes: - -- `borderLeftWidth` -- `borderTopWidth` -- `borderRightWidth` -- `borderBottomWidth` -- `borderTopLeftRadius` -- `borderTopRightRadius` -- `borderBottomRightRadius` -- `borderBottomLeftRadius` - -see [Issue#7070](https://github.com/facebook/react-native/issues/7070) for more detail. - -[Styles](style.md) - -| Type | Required | -| --------------------- | -------- | -| [Text](text.md#style) | No | - ---- - -### `textBreakStrategy` - -Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced` The default value is `simple`. - -| Type | Required | Platform | -| ----------------------------------------- | -------- | -------- | -| enum('simple', 'highQuality', 'balanced') | No | Android | - ---- - -### `underlineColorAndroid` - -The color of the `TextInput` underline. - -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | - ---- - -### `value` - -The value to show for the text input. `TextInput` is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker. - -| Type | Required | -| ------ | -------- | -| string | No | - -## Methods - -### `clear()` - -```jsx -clear(); -``` - -Removes all text from the `TextInput`. - ---- - -### `isFocused()` - -```jsx -isFocused(); -``` - -Returns `true` if the input is currently focused; `false` otherwise. - -# Known issues - -- [react-native#19096](https://github.com/facebook/react-native/issues/19096): Doesn't support Android's `onKeyPreIme`. -- [react-native#19366](https://github.com/facebook/react-native/issues/19366): Calling .focus() after closing Android's keyboard via back button doesn't bring keyboard up again. diff --git a/website/versioned_docs/version-0.58/timepickerandroid.md b/website/versioned_docs/version-0.58/timepickerandroid.md deleted file mode 100644 index a15cb5fcf09..00000000000 --- a/website/versioned_docs/version-0.58/timepickerandroid.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -id: version-0.58-timepickerandroid -title: TimePickerAndroid -original_id: timepickerandroid ---- - -Opens the standard Android time picker dialog. - -### Example - -```jsx -try { - const { action, hour, minute } = await TimePickerAndroid.open({ - hour: 14, - minute: 0, - is24Hour: false // Will display '2 PM' - }); - if (action !== TimePickerAndroid.dismissedAction) { - // Selected hour (0-23), minute (0-59) - } -} catch ({ code, message }) { - console.warn('Cannot open time picker', message); -} -``` - -### Methods - -- [`open`](timepickerandroid.md#open) -- [`timeSetAction`](timepickerandroid.md#timesetaction) -- [`dismissedAction`](timepickerandroid.md#dismissedaction) - ---- - -# Reference - -## Methods - -### `open()` - -```jsx -static open(options) -``` - -Opens the standard Android time picker dialog. - -The available keys for the `options` object are: - -- `hour` (0-23) - the hour to show, defaults to the current time -- `minute` (0-59) - the minute to show, defaults to the current time -- `is24Hour` (boolean) - If `true`, the picker uses the 24-hour format. If `false`, the picker shows an AM/PM chooser. If undefined, the default for the current locale is used. -- `mode` (`enum('clock', 'spinner', 'default')`) - set the time picker mode - - 'clock': Show a time picker in clock mode. - - 'spinner': Show a time picker in spinner mode. - - 'default': Show a default time picker based on Android versions. - -Returns a Promise which will be invoked an object containing `action`, `hour` (0-23), `minute` (0-59) if the user picked a time. If the user dismissed the dialog, the Promise will still be resolved with action being `TimePickerAndroid.dismissedAction` and all the other keys being undefined. **Always** check whether the `action` before reading the values. - ---- - -### `timeSetAction()` - -```jsx -static timeSetAction() -``` - -A time has been selected. - ---- - -### `dismissedAction()` - -```jsx -static dismissedAction() -``` - -The dialog has been dismissed. diff --git a/website/versioned_docs/version-0.58/toastandroid.md b/website/versioned_docs/version-0.58/toastandroid.md deleted file mode 100644 index 07fef5d561b..00000000000 --- a/website/versioned_docs/version-0.58/toastandroid.md +++ /dev/null @@ -1,181 +0,0 @@ ---- -id: version-0.58-toastandroid -title: ToastAndroid -original_id: toastandroid ---- - -This exposes the native ToastAndroid module as a JS module. This has a function 'show' which takes the following parameters: - -1. String message: A string with the text to toast -2. int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG - -There is also a function `showWithGravity` to specify the layout gravity. May be ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER. - -The 'showWithGravityAndOffset' function adds on the ability to specify offset These offset values will translate to pixels. - -Basic usage: - -```jsx -import { ToastAndroid } from 'react-native'; - -ToastAndroid.show( - 'A pikachu appeared nearby !', - ToastAndroid.SHORT -); -ToastAndroid.showWithGravity( - 'All Your Base Are Belong To Us', - ToastAndroid.SHORT, - ToastAndroid.CENTER -); -ToastAndroid.showWithGravityAndOffset( - 'A wild toast appeared!', - ToastAndroid.LONG, - ToastAndroid.BOTTOM, - 25, - 50 -); -``` - -### Advanced usage: - -The ToastAndroid API is imperative and this might present itself as an issue, but there is actually a way(hack) to expose a declarative component from it. See an example below: - -```jsx -import React, { Component } from 'react'; -import { View, Button, ToastAndroid } from 'react-native'; - -// a component that calls the imperative ToastAndroid API -const Toast = (props) => { - if (props.visible) { - ToastAndroid.showWithGravityAndOffset( - props.message, - ToastAndroid.LONG, - ToastAndroid.BOTTOM, - 25, - 50 - ); - return null; - } - return null; -}; - -class App extends Component { - constructor(props) { - super(props); - this.state = { - visible: false - }; - } - - handleButtonPress = () => { - this.setState( - { - visible: true - }, - () => { - this.hideToast(); - } - ); - }; - - hideToast = () => { - this.setState({ - visible: false - }); - }; - - render() { - return ( - - - + + + +
+ + + +> The `Appearance` API is inspired by the [Media Queries draft](https://drafts.csswg.org/mediaqueries-5/) from the W3C. The color scheme preference is modeled after the [`prefers-color-scheme` CSS media feature](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). + + + +> The color scheme preference will map to the user's Light or [Dark theme](https://developer.android.com/guide/topics/ui/look-and-feel/darktheme) preference on Android 10 (API level 29) devices and higher. + + + +> The color scheme preference will map to the user's Light or [Dark Mode](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/) preference on iOS 13 devices and higher. + + + +## Example + +You can use the `Appearance` module to determine if the user prefers a dark color scheme: + +```jsx +const colorScheme = Appearance.getColorScheme(); +if (colorScheme === 'dark') { + // Use dark color scheme +} +``` + +Although the color scheme is available immediately, this may change (e.g. scheduled color scheme change at sunrise or sunset). Any rendering logic or styles that depend on the user preferred color scheme should try to call this function on every render, rather than caching the value. For example, you may use the [`useColorScheme`](usecolorscheme) React hook as it provides and subscribes to color scheme updates, or you may use inline styles rather than setting a value in a `StyleSheet`. + +# Reference + +## Methods + +### `getColorScheme()` + +```jsx +static getColorScheme() +``` + +Indicates the current user preferred color scheme. The value may be updated later, either through direct user action (e.g. theme selection in device settings) or on a schedule (e.g. light and dark themes that follow the day/night cycle). + +Supported color schemes: + +- `light`: The user prefers a light color theme. +- `dark`: The user prefers a dark color theme. +- null: The user has not indicated a preferred color theme. + +See also: `useColorScheme` hook. + +> Note: `getColorScheme()` will always return `light` when debugging with Chrome. + +### `addChangeListener()` + +```jsx +static addChangeListener(listener) +``` + +Add an event handler that is fired when appearance preferences change. + +### `removeChangeListener()` + +```jsx +static removeChangeListener(listener) +``` + +Remove an event handler. diff --git a/website/versioned_docs/version-0.61/appregistry.md b/website/versioned_docs/version-0.61/appregistry.md new file mode 100644 index 00000000000..0a1474b6b57 --- /dev/null +++ b/website/versioned_docs/version-0.61/appregistry.md @@ -0,0 +1,173 @@ +--- +id: appregistry +title: AppRegistry +--- + + + +`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`. + +To "stop" an application when a view should be destroyed, call `AppRegistry.unmountApplicationComponentAtRootTag` with the tag that was passed into `runApplication`. These should always be used as a pair. + +`AppRegistry` should be required early in the `require` sequence to make sure the JS execution environment is setup before other modules are required. + +--- + +# Reference + +## Methods + +### `setWrapperComponentProvider()` + +```jsx +static setWrapperComponentProvider(provider) +``` + +--- + +### `registerConfig()` + +```jsx +static registerConfig(config) +``` + +--- + +### `registerComponent()` + +```jsx +static registerComponent(appKey, componentProvider, section?) +``` + +--- + +### `registerRunnable()` + +```jsx +static registerRunnable(appKey, run) +``` + +--- + +### `registerSection()` + +```jsx +static registerSection(appKey, component) +``` + +--- + +### `getAppKeys()` + +```jsx +static getAppKeys() +``` + +--- + +### `getSectionKeys()` + +```jsx +static getSectionKeys() +``` + +--- + +### `getSections()` + +```jsx +static getSections() +``` + +--- + +### `getRunnable()` + +```jsx +static getRunnable(appKey) +``` + +--- + +### `getRegistry()` + +```jsx +static getRegistry() +``` + +--- + +### `setComponentProviderInstrumentationHook()` + +```jsx +static setComponentProviderInstrumentationHook(hook) +``` + +--- + +### `runApplication()` + +```jsx +static runApplication(appKey, appParameters) +``` + +--- + +### `unmountApplicationComponentAtRootTag()` + +```jsx +static unmountApplicationComponentAtRootTag(rootTag) +``` + +--- + +### `registerHeadlessTask()` + +```jsx +static registerHeadlessTask(taskKey, taskProvider) +``` + +Register a headless task. A headless task is a bit of code that runs without a UI. @param taskKey the key associated with this task @param taskProvider a promise returning function that takes some data passed from the native side as the only argument; when the promise is resolved or rejected the native side is notified of this event and it may decide to destroy the JS context. + +--- + +### `registerCancellableHeadlessTask()` + +```jsx +static registerCancellableHeadlessTask(taskKey, taskProvider, taskCancelProvider) +``` + +Register a headless task which can be cancelled. A headless task is a bit of code that runs without a UI. @param taskKey the key associated with this task @param taskProvider a promise returning function that takes some data passed from the native side as the only argument; when the promise is resolved or rejected the native side is notified of this event and it may decide to destroy the JS context. @param taskCancelProvider a void returning function that takes no arguments; when a cancellation is requested, the function being executed by taskProvider should wrap up and return ASAP. + +--- + +### `startHeadlessTask()` + +```jsx +static startHeadlessTask(taskId, taskKey, data) +``` + +Only called from native code. Starts a headless task. + +@param taskId the native id for this task instance to keep track of its execution @param taskKey the key for the task to start @param data the data to pass to the task + +--- + +### `cancelHeadlessTask()` + +```jsx +static cancelHeadlessTask(taskId, taskKey) +``` + +Only called from native code. Cancels a headless task. + +@param taskId the native id for this task instance that was used when startHeadlessTask was called @param taskKey the key for the task that was used when startHeadlessTask was called diff --git a/website/versioned_docs/version-0.61/appstate.md b/website/versioned_docs/version-0.61/appstate.md new file mode 100644 index 00000000000..7a722c03ad2 --- /dev/null +++ b/website/versioned_docs/version-0.61/appstate.md @@ -0,0 +1,112 @@ +--- +id: appstate +title: AppState +--- + +`AppState` can tell you if the app is in the foreground or background, and notify you when the state changes. + +AppState is frequently used to determine the intent and proper behavior when handling push notifications. + +### App States + +- `active` - The app is running in the foreground +- `background` - The app is running in the background. The user is either: + - in another app + - on the home screen + - [Android] on another `Activity` (even if it was launched by your app) +- [iOS] `inactive` - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the Multitasking view or in the event of an incoming call + +For more information, see [Apple's documentation](https://developer.apple.com/documentation/uikit/app_and_scenes/managing_your_app_s_life_cycle) + +### Basic Usage + +To see the current state, you can check `AppState.currentState`, which will be kept up-to-date. However, `currentState` will be null at launch while `AppState` retrieves it over the bridge. + +```jsx +import React, { Component } from 'react'; +import { AppState, Text } from 'react-native'; + +class AppStateExample extends Component { + state = { + appState: AppState.currentState + }; + + componentDidMount() { + AppState.addEventListener( + 'change', + this._handleAppStateChange + ); + } + + componentWillUnmount() { + AppState.removeEventListener( + 'change', + this._handleAppStateChange + ); + } + + _handleAppStateChange = (nextAppState) => { + if ( + this.state.appState.match(/inactive|background/) && + nextAppState === 'active' + ) { + console.log('App has come to the foreground!'); + } + this.setState({ appState: nextAppState }); + }; + + render() { + return Current state is: {this.state.appState}; + } +} +``` + +This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the `active` state, and the null state will happen only momentarily. + +--- + +# Reference + +## Events + +### `change` + +This even is received when the app state has changed. The listener is called with one of [the current app state values](appstate.md#app-states). + +### `focus` + +[Android only] Received when the app gains focus (the user is interacting with the app). + +### `blur` + +[Android only] Received when the user is not actively interacting with the app. Useful in situations when the user pulls down the [notification drawer](https://developer.android.com/guide/topics/ui/notifiers/notifications#bar-and-drawer). `AppState` won't change but the `blur` event will get fired. + +## Methods + +### `addEventListener()` + +```jsx +addEventListener(type, handler); +``` + +Add a handler to AppState changes by listening to the `change` event type and providing the handler + + + +--- + +### `removeEventListener()` + +```jsx +removeEventListener(type, handler); +``` + +Remove a handler by passing the `change` event type and the handler + +## Properties + +### `currentState` + +```jsx +AppState.currentState; +``` diff --git a/website/versioned_docs/version-0.61/asyncstorage.md b/website/versioned_docs/version-0.61/asyncstorage.md index 8b786ce63b9..8ba965b0592 100644 --- a/website/versioned_docs/version-0.61/asyncstorage.md +++ b/website/versioned_docs/version-0.61/asyncstorage.md @@ -1,7 +1,6 @@ --- -id: version-0.61-asyncstorage -title: 🚧 AsyncStorage -original_id: asyncstorage +id: asyncstorage +title: '🚧 AsyncStorage' --- > **Deprecated.** Use [@react-native-community/async-storage](https://github.com/react-native-community/react-native-async-storage) instead. @@ -209,7 +208,7 @@ Flushes any pending requests using a single batch call to get the data. ### `multiGet()` ```jsx -static multiGet(keys: Array, [callback]: ?(errors: ?Array, result: ?Array>) => void) +static multiGet(keys: Array, [callback]: ?(errors: ?Array, result: ?Array>) => void) ``` This allows you to batch the fetching of items given an array of `key` inputs. Your callback will be invoked with an array of corresponding key-value pairs found: @@ -246,7 +245,7 @@ AsyncStorage.getAllKeys((err, keys) => { ### `multiSet()` ```jsx -static multiSet(keyValuePairs: Array>, [callback]: ?(errors: ?Array) => void) +static multiSet(keyValuePairs: Array>, [callback]: ?(errors: ?Array) => void) ``` Use this as a batch operation for storing multiple key-value pairs. When the operation completes you'll get a single callback with any errors: @@ -259,10 +258,13 @@ The method returns a `Promise` object. **Parameters:** -| Name | Type | Required | Description | -| ------------- | ---------------------------------- | -------- | ---------------------------------------------------------------------------- | -| keyValuePairs | `Array>` | Yes | Array of key-value array for the items to set. | -| callback | `?(errors: ?Array) => void` | No | Function that will be called with an array of any key-specific errors found. | +| Name | Type | Required | Description | +| ---- | ---- | -------- | ----------- | + + +<<<<<<< HEAD | keyValuePairs | `Array>` | Yes | Array of key-value array for the items to set. | ======= | keyValuePairs | `Array>` | Yes | Array of key-value array for the items to set. | + +> > > > > > > 0fd4f083... Rename and fix errors in 0.60 and 0.61 docs | callback | `?(errors: ?Array) => void` | No | Function that will be called with an array of any key-specific errors found. | --- @@ -296,7 +298,7 @@ AsyncStorage.multiRemove(keys, (err) => { ### `multiMerge()` ```jsx -static multiMerge(keyValuePairs: Array>, [callback]: ?(errors: ?Array) => void) +static multiMerge(keyValuePairs: Array>, [callback]: ?(errors: ?Array) => void) ``` Batch operation to merge in existing and new values for a given set of keys. This assumes that the values are stringified JSON. Returns a `Promise` object. @@ -305,10 +307,13 @@ Batch operation to merge in existing and new values for a given set of keys. Thi **Parameters:** -| Name | Type | Required | Description | -| ------------- | ---------------------------------- | -------- | ---------------------------------------------------------------------------- | -| keyValuePairs | `Array>` | Yes | Array of key-value array for the items to merge. | -| callback | `?(errors: ?Array) => void` | No | Function that will be called with an array of any key-specific errors found. | +| Name | Type | Required | Description | +| ---- | ---- | -------- | ----------- | + + +<<<<<<< HEAD | keyValuePairs | `Array>` | Yes | Array of key-value array for the items to merge. | ======= | keyValuePairs | `Array>` | Yes | Array of key-value array for the items to merge. | + +> > > > > > > 0fd4f083... Rename and fix errors in 0.60 and 0.61 docs | callback | `?(errors: ?Array) => void` | No | Function that will be called with an array of any key-specific errors found. | Example: diff --git a/website/versioned_docs/version-0.61/backandroid.md b/website/versioned_docs/version-0.61/backandroid.md new file mode 100644 index 00000000000..f8b7a3f6832 --- /dev/null +++ b/website/versioned_docs/version-0.61/backandroid.md @@ -0,0 +1,40 @@ +--- +id: backandroid +title: BackAndroid +--- + +Deprecated. Use BackHandler instead. + +### Methods + +- [`exitApp`](backandroid.md#exitapp) +- [`addEventListener`](backandroid.md#addeventlistener) +- [`removeEventListener`](backandroid.md#removeeventlistener) + +--- + +# Reference + +## Methods + +### `exitApp()` + +```jsx +static exitApp() +``` + +--- + +### `addEventListener()` + +```jsx +static addEventListener(eventName, handler) +``` + +--- + +### `removeEventListener()` + +```jsx +static removeEventListener(eventName, handler) +``` diff --git a/website/versioned_docs/version-0.61/backhandler.md b/website/versioned_docs/version-0.61/backhandler.md new file mode 100644 index 00000000000..286992f75c2 --- /dev/null +++ b/website/versioned_docs/version-0.61/backhandler.md @@ -0,0 +1,89 @@ +--- +id: backhandler +title: BackHandler +--- + +Detect hardware button presses for back navigation. + +Android: Detect hardware back button presses, and programmatically invoke the default back button functionality to exit the app if there are no listeners or if none of the listeners return true. + +tvOS: Detect presses of the menu button on the TV remote. (Still to be implemented: programmatically disable menu button handling functionality to exit the app if there are no listeners or if none of the listeners return true.) + +iOS: Not applicable. + +The event subscriptions are called in reverse order (i.e. last registered subscription first), and if one subscription returns true then subscriptions registered earlier will not be called. Beware: If your app shows an opened `Modal`, BackHandler will not publish any events ([see `Modal` docs](/docs/modal#onrequestclose)). + +Example: + +```jsx +BackHandler.addEventListener('hardwareBackPress', function() { + // this.onMainScreen and this.goBack are just examples, you need to use your own implementation here + // Typically you would use the navigator here to go to the last state. + + if (!this.onMainScreen()) { + this.goBack(); + return true; + } + return false; +}); +``` + +Lifecycle example: + +```jsx + componentDidMount() { + this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackPress); + } + + componentWillUnmount() { + this.backHandler.remove() + } + + handleBackPress = () => { + this.goBack(); // works best when the goBack is async + return true; + } +``` + +Lifecycle alternative: + +```jsx + componentDidMount() { + this.backHandler = BackHandler.addEventListener('hardwareBackPress', () => { + this.goBack(); // works best when the goBack is async + return true; + }); + } + + componentWillUnmount() { + this.backHandler.remove(); + } +``` + +--- + +# Reference + +## Methods + +### `addEventListener()` + +```jsx +static addEventListener(eventName, handler) +``` + +--- + +### `exitApp()` + +```jsx +static exitApp() +``` + +--- + +### `removeEventListener()` + +```jsx +static removeEventListener(eventName, handler) +``` diff --git a/website/versioned_docs/version-0.61/building-for-tv.md b/website/versioned_docs/version-0.61/building-for-tv.md new file mode 100644 index 00000000000..c68ff9e3e97 --- /dev/null +++ b/website/versioned_docs/version-0.61/building-for-tv.md @@ -0,0 +1,166 @@ +--- +id: building-for-tv +title: Building For TV Devices +--- + +TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications. + +
+
    + + +
+
+ + + +The RNTester app supports Apple TV; use the `RNTester-tvOS` build target to build for tvOS. + +## Build changes + +- _Native layer_: React Native Xcode projects all now have Apple TV build targets, with names ending in the string '-tvOS'. + +- _react-native init_: New React Native projects created with `react-native init` will have Apple TV target automatically created in their XCode projects. + +- _JavaScript layer_: Support for Apple TV has been added to `Platform.ios.js`. You can check whether code is running on AppleTV by doing + +```jsx +var Platform = require('Platform'); +var running_on_tv = Platform.isTV; + +// If you want to be more specific and only detect devices running tvOS +// (but no Android TV devices) you can use: +var running_on_apple_tv = Platform.isTVOS; +``` + + + +## Build changes + +- _Native layer_: To run React Native project on Android TV make sure to make the following changes to `AndroidManifest.xml` + +```xml + + + ... + + ... + + + + ... + +``` + +- _JavaScript layer_: Support for Android TV has been added to `Platform.android.js`. You can check whether code is running on Android TV by doing + +```js +var Platform = require('Platform'); +var running_on_android_tv = Platform.isTV; +``` + + + +## Code changes + + + +- _General support for tvOS_: Apple TV specific changes in native code are all wrapped by the TARGET_OS_TV define. These include changes to suppress APIs that are not supported on tvOS (e.g. web views, sliders, switches, status bar, etc.), and changes to support user input from the TV remote or keyboard. + +- _Common codebase_: Since tvOS and iOS share most Objective-C and JavaScript code in common, most documentation for iOS applies equally to tvOS. + +- _Access to touchable controls_: When running on Apple TV, the native view class is `RCTTVView`, which has additional methods to make use of the tvOS focus engine. The `Touchable` mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so `TouchableWithoutFeedback`, `TouchableHighlight` and `TouchableOpacity` will work as expected. In particular: + + - `onFocus` will be executed when the touchable view goes into focus + - `onBlur` will be executed when the touchable view goes out of focus + - `onPress` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote. + + + +- _Access to touchable controls_: When running on Android TV the Android framework will automatically apply a directional navigation scheme based on relative position of focusable elements in your views. The `Touchable` mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so `TouchableWithoutFeedback`, `TouchableHighlight`, `TouchableOpacity` and `TouchableNativeFeedback` will work as expected. In particular: + + - `onFocus` will be executed when the touchable view goes into focus + - `onBlur` will be executed when the touchable view goes out of focus + - `onPress` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote. + + + +- _TV remote/keyboard input_: A new native class, `RCTTVRemoteHandler`, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by `RCTTVNavigationEventEmitter` (a subclass of `RCTEventEmitter`), that fires a JS event. This event will be picked up by instances of the `TVEventHandler` JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of `TVEventHandler` and listen for these events, as in the following code: + + + +- _TV remote/keyboard input_: A new native class, `ReactAndroidTVRootViewHelper`, sets up key events handlers for TV remote events. When TV remote events occur, this class fires a JS event. This event will be picked up by instances of the `TVEventHandler` JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of `TVEventHandler` and listen for these events, as in the following code: + + + +```jsx +var TVEventHandler = require('TVEventHandler'); + +class Game2048 extends React.Component { + _tvEventHandler: any; + + _enableTVEventHandler() { + this._tvEventHandler = new TVEventHandler(); + this._tvEventHandler.enable(this, function(cmp, evt) { + if (evt && evt.eventType === 'right') { + cmp.setState({board: cmp.state.board.move(2)}); + } else if(evt && evt.eventType === 'up') { + cmp.setState({board: cmp.state.board.move(1)}); + } else if(evt && evt.eventType === 'left') { + cmp.setState({board: cmp.state.board.move(0)}); + } else if(evt && evt.eventType === 'down') { + cmp.setState({board: cmp.state.board.move(3)}); + } else if(evt && evt.eventType === 'playPause') { + cmp.restartGame(); + } + }); + } + + _disableTVEventHandler() { + if (this._tvEventHandler) { + this._tvEventHandler.disable(); + delete this._tvEventHandler; + } + } + + componentDidMount() { + this._enableTVEventHandler(); + } + + componentWillUnmount() { + this._disableTVEventHandler(); + } +``` + + + +- _Dev Menu support_: On the simulator, cmd-D will bring up the developer menu, similar to iOS. To bring it up on a real Apple TV device, make a long press on the play/pause button on the remote. (Please do not shake the Apple TV device, that will not work :) ) + +- _TV remote animations_: `RCTTVView` native code implements Apple-recommended parallax animations to help guide the eye as the user navigates through views. The animations can be disabled or adjusted with new optional view properties. + +- _Back navigation with the TV remote menu button_: The `BackHandler` component, originally written to support the Android back button, now also supports back navigation on the Apple TV using the menu button on the TV remote. + +- _TabBarIOS behavior_: The `TabBarIOS` component wraps the native `UITabBar` API, which works differently on Apple TV. To avoid jittery rerendering of the tab bar in tvOS (see [this issue](https://github.com/facebook/react-native/issues/15081)), the selected tab bar item can only be set from Javascript on initial render, and is controlled after that by the user through native code. + + + +- _Dev Menu support_: On the simulator, cmd-M will bring up the developer menu, similar to Android. To bring it up on a real Android TV device, press the menu button or long press the fast-forward button on the remote. (Please do not shake the Android TV device, that will not work :) ) + + + +- _Known issues_: + + - [ListView scrolling](https://github.com/facebook/react-native/issues/12793). The issue can be worked around by setting `removeClippedSubviews` to false in ListView and similar components. For more discussion of this issue, see [this PR](https://github.com/facebook/react-native/pull/12944). + + + +- _Known issues_: + + - `InputText` components do not work for now (i.e. they cannot receive focus). diff --git a/website/versioned_docs/version-0.61/button.md b/website/versioned_docs/version-0.61/button.md new file mode 100644 index 00000000000..ced60d3e7df --- /dev/null +++ b/website/versioned_docs/version-0.61/button.md @@ -0,0 +1,237 @@ +--- +id: button +title: Button +--- + +A basic button component that should render nicely on any platform. Supports a minimal level of customization. + +If this button doesn't look right for your app, you can build your own button using [TouchableOpacity](touchableopacity.md) or [TouchableNativeFeedback](touchablenativefeedback.md). For inspiration, look at the [source code for this button component](https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js). Or, take a look at the [wide variety of button components built by the community](https://js.coach/?menu%5Bcollections%5D=React%20Native&page=1&query=button). + +### Example + +```SnackPlayer name=rn-buttons +import React from 'react'; +import { + StyleSheet, + Button, + View, + SafeAreaView, + Text, + Alert, +} from 'react-native'; +import Constants from 'expo-constants'; + +function Separator() { + return ; +} + +export default function App() { + return ( + + + + The title and onPress handler are required. It is recommended to set + accessibilityLabel to help make your app usable by everyone. + + + + +
+ + + +> If you’re familiar with `@media (prefers-color-scheme: dark)` in CSS, this is similar! Only instead of defining all the colors in a media query, you define which color to use under what circumstances right there where you're using it. Neat! + + + +> The `DynamicColorIOS` function is similar to the iOS native methods [`UIColor colorWithDynamicProvider:`](https://developer.apple.com/documentation/uikit/uicolor/3238040-colorwithdynamicprovider) + + + +## Example + +```jsx +import { DynamicColorIOS } from 'react-native'; + +const customDynamicTextColor = DynamicColorIOS({ + dark: 'lightskyblue', + light: 'midnightblue' +}); +``` diff --git a/website/versioned_docs/version-0.61/easing.md b/website/versioned_docs/version-0.61/easing.md new file mode 100644 index 00000000000..83a986860ba --- /dev/null +++ b/website/versioned_docs/version-0.61/easing.md @@ -0,0 +1,240 @@ +--- +id: easing +title: Easing +--- + +The `Easing` module implements common easing functions. This module is used by [Animated.timing()](animated.md#timing) to convey physically believable motion in animations. + +You can find a visualization of some common easing functions at http://easings.net/ + +### Predefined animations + +The `Easing` module provides several predefined animations through the following methods: + +- [`back`](easing.md#back) provides a basic animation where the object goes slightly back before moving forward +- [`bounce`](easing.md#bounce) provides a bouncing animation +- [`ease`](easing.md#ease) provides a basic inertial animation +- [`elastic`](easing.md#elastic) provides a basic spring interaction + +### Standard functions + +Three standard easing functions are provided: + +- [`linear`](easing.md#linear) +- [`quad`](easing.md#quad) +- [`cubic`](easing.md#cubic) + +The [`poly`](easing.md#poly) function can be used to implement quartic, quintic, and other higher power functions. + +### Additional functions + +Additional mathematical functions are provided by the following methods: + +- [`bezier`](easing.md#bezier) provides a cubic bezier curve +- [`circle`](easing.md#circle) provides a circular function +- [`sin`](easing.md#sin) provides a sinusoidal function +- [`exp`](easing.md#exp) provides an exponential function + +The following helpers are used to modify other easing functions. + +- [`in`](easing.md#in) runs an easing function forwards +- [`inOut`](easing.md#inout) makes any easing function symmetrical +- [`out`](easing.md#out) runs an easing function backwards + +--- + +# Reference + +## Methods + +### `step0()` + +```jsx +static step0(n) +``` + +A stepping function, returns 1 for any positive value of `n`. + +--- + +### `step1()` + +```jsx +static step1(n) +``` + +A stepping function, returns 1 if `n` is greater than or equal to 1. + +--- + +### `linear()` + +```jsx +static linear(t) +``` + +A linear function, `f(t) = t`. Position correlates to elapsed time one to one. + +http://cubic-bezier.com/#0,0,1,1 + +--- + +### `ease()` + +```jsx +static ease(t) +``` + +A basic inertial interaction, similar to an object slowly accelerating to speed. + +http://cubic-bezier.com/#.42,0,1,1 + +--- + +### `quad()` + +```jsx +static quad(t) +``` + +A quadratic function, `f(t) = t * t`. Position equals the square of elapsed time. + +http://easings.net/#easeInQuad + +--- + +### `cubic()` + +```jsx +static cubic(t) +``` + +A cubic function, `f(t) = t * t * t`. Position equals the cube of elapsed time. + +http://easings.net/#easeInCubic + +--- + +### `poly()` + +```jsx +static poly(n) +``` + +A power function. Position is equal to the Nth power of elapsed time. + +n = 4: http://easings.net/#easeInQuart n = 5: http://easings.net/#easeInQuint + +--- + +### `sin()` + +```jsx +static sin(t) +``` + +A sinusoidal function. + +http://easings.net/#easeInSine + +--- + +### `circle()` + +```jsx +static circle(t) +``` + +A circular function. + +http://easings.net/#easeInCirc + +--- + +### `exp()` + +```jsx +static exp(t) +``` + +An exponential function. + +http://easings.net/#easeInExpo + +--- + +### `elastic()` + +```jsx +static elastic(bounciness) +``` + +A basic elastic interaction, similar to a spring oscillating back and forth. + +Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times. + +http://easings.net/#easeInElastic + +--- + +### `back()` + +```jsx +static back(s) +``` + +Use with `Animated.parallel()` to create a basic effect where the object animates back slightly as the animation starts. + +--- + +### `bounce()` + +```jsx +static bounce(t) +``` + +Provides a basic bouncing effect. + +http://easings.net/#easeInBounce + +--- + +### `bezier()` + +```jsx +static bezier(x1, y1, x2, y2) +``` + +Provides a cubic bezier curve, equivalent to CSS Transitions' `transition-timing-function`. + +A useful tool to visualize cubic bezier curves can be found at http://cubic-bezier.com/ + +--- + +### `in()` + +```jsx +static in easing; +``` + +Runs an easing function forwards. + +--- + +### `out()` + +```jsx +static out(easing) +``` + +Runs an easing function backwards. + +--- + +### `inOut()` + +```jsx +static inOut(easing) +``` + +Makes any easing function symmetrical. The easing function will run forwards for half of the duration, then backwards for the rest of the duration. diff --git a/website/versioned_docs/version-0.61/fast-refresh.md b/website/versioned_docs/version-0.61/fast-refresh.md index 79bd82ec55b..e2acfc25374 100644 --- a/website/versioned_docs/version-0.61/fast-refresh.md +++ b/website/versioned_docs/version-0.61/fast-refresh.md @@ -1,7 +1,6 @@ --- -id: version-0.61-fast-refresh +id: fast-refresh title: Fast Refresh -original_id: fast-refresh --- Fast Refresh is a React Native feature that allows you to get near-instant feedback for changes in your React components. Fast Refresh is enabled by default, and you can toggle "Enable Fast Refresh" in the React Native developer menu. With Fast Refresh enabled, most edits should be visible within a second or two. diff --git a/website/versioned_docs/version-0.61/flatlist.md b/website/versioned_docs/version-0.61/flatlist.md new file mode 100644 index 00000000000..d2bd91c95c0 --- /dev/null +++ b/website/versioned_docs/version-0.61/flatlist.md @@ -0,0 +1,704 @@ +--- +id: flatlist +title: FlatList +--- + +A performant interface for rendering basic, flat lists, supporting the most handy features: + +- Fully cross-platform. +- Optional horizontal mode. +- Configurable viewability callbacks. +- Header support. +- Footer support. +- Separator support. +- Pull to Refresh. +- Scroll loading. +- ScrollToIndex support. +- Multiple column support. + +If you need section support, use [``](sectionlist.md). + +### Basic Example: + +```SnackPlayer name=flatlist-simple +import React from 'react'; +import { SafeAreaView, View, FlatList, StyleSheet, Text } from 'react-native'; +import Constants from 'expo-constants'; + +const DATA = [ + { + id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba', + title: 'First Item', + }, + { + id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63', + title: 'Second Item', + }, + { + id: '58694a0f-3da1-471f-bd96-145571e29d72', + title: 'Third Item', + }, +]; + +function Item({ title }) { + return ( + + {title} + + ); +} + +export default function App() { + return ( + + } + keyExtractor={item => item.id} + /> + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + marginTop: Constants.statusBarHeight, + }, + item: { + backgroundColor: '#f9c2ff', + padding: 20, + marginVertical: 8, + marginHorizontal: 16, + }, + title: { + fontSize: 32, + }, +}); +``` + +To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. Using this approach instead of a `flexWrap` layout can prevent conflicts with the item height logic. + +More complex, multi-select example demonstrating `` usage for perf optimization and avoiding bugs. + +- By passing `extraData={selected}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes. +- `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property. + +```SnackPlayer name=flatlist-selectable +import React from 'react'; +import { + SafeAreaView, + TouchableOpacity, + FlatList, + StyleSheet, + Text, +} from 'react-native'; +import Constants from 'expo-constants'; + +const DATA = [ + { + id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba', + title: 'First Item', + }, + { + id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63', + title: 'Second Item', + }, + { + id: '58694a0f-3da1-471f-bd96-145571e29d72', + title: 'Third Item', + }, +]; + +function Item({ id, title, selected, onSelect }) { + return ( + onSelect(id)} + style={[ + styles.item, + { backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' }, + ]} + > + {title} + + ); +} + +export default function App() { + const [selected, setSelected] = React.useState(new Map()); + + const onSelect = React.useCallback( + id => { + const newSelected = new Map(selected); + newSelected.set(id, !selected.get(id)); + + setSelected(newSelected); + }, + [selected], + ); + + return ( + + ( + + )} + keyExtractor={item => item.id} + extraData={selected} + /> + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + marginTop: Constants.statusBarHeight, + }, + item: { + backgroundColor: '#f9c2ff', + padding: 20, + marginVertical: 8, + marginHorizontal: 16, + }, + title: { + fontSize: 32, + }, +}); +``` + +This is a convenience wrapper around [``](virtualizedlist.md), and thus inherits its props (as well as those of [``](scrollview.md)) that aren't explicitly listed here, along with the following caveats: + +- Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay. +- This is a `PureComponent` which means that it will not re-render if `props` remain shallow-equal. Make sure that everything your `renderItem` function depends on is passed as a prop (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on changes. This includes the `data` prop and parent component state. +- In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes. +- By default, the list looks for a `key` prop on each item and uses that for the React key. Alternatively, you can provide a custom `keyExtractor` prop. + +--- + +# Reference + +## Props + +Inherits [ScrollView Props](scrollview.md#props), unless it is nested in another FlatList of same orientation. + +### `renderItem` + +```jsx +renderItem({ item, index, separators }); +``` + +Takes an item from `data` and renders it into the list. + +Provides additional metadata like `index` if you need it, as well as a more generic `separators.updateProps` function which let you set whatever props you want to change the rendering of either the leading separator or trailing separator in case the more common `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for your use case. + +| Type | Required | +| -------- | -------- | +| function | Yes | + +- `item` (Object): The item from `data` being rendered. +- `index` (number): The index corresponding to this item in the `data` array. +- `separators` (Object) + - `highlight` (Function) + - `unhighlight` (Function) + - `updateProps` (Function) + - `select` (enum('leading', 'trailing')) + - `newProps` (Object) + +Example usage: + +```jsx + ( + + )} + data={[{title: 'Title Text', key: 'item1'}]} + renderItem={({item, index, separators}) => ( + this._onPress(item)} + onShowUnderlay={separators.highlight} + onHideUnderlay={separators.unhighlight}> + + {item.title} + + + )} +/> +``` + +--- + +### `data` + +For simplicity, data is a plain array. If you want to use something else, like an immutable list, use the underlying [`VirtualizedList`](virtualizedlist.md) directly. + +| Type | Required | +| ----- | -------- | +| array | Yes | + +--- + +### `ItemSeparatorComponent` + +Rendered in between each item, but not at the top or bottom. By default, `highlighted` and `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight` which will update the `highlighted` prop, but you can also add custom props with `separators.updateProps`. + +| Type | Required | +| --------- | -------- | +| component | No | + +--- + +### `ListEmptyComponent` + +Rendered when the list is empty. Can be a React Component Class, a render function, or a rendered element. + +| Type | Required | +| ---------------------------- | -------- | +| component, function, element | No | + +--- + +### `ListFooterComponent` + +Rendered at the bottom of all the items. Can be a React Component Class, a render function, or a rendered element. + +| Type | Required | +| ---------------------------- | -------- | +| component, function, element | No | + +--- + +### `ListFooterComponentStyle` + +Styling for internal View for ListFooterComponent + +| Type | Required | +| ------------ | -------- | +| style object | No | + +--- + +### `ListHeaderComponent` + +Rendered at the top of all the items. Can be a React Component Class, a render function, or a rendered element. + +| Type | Required | +| ---------------------------- | -------- | +| component, function, element | No | + +--- + +### `ListHeaderComponentStyle` + +Styling for internal View for ListHeaderComponent + +| Type | Required | +| ------------ | -------- | +| style object | No | + +--- + +### `columnWrapperStyle` + +Optional custom style for multi-item rows generated when `numColumns > 1`. + +| Type | Required | +| ------------ | -------- | +| style object | No | + +--- + +### `extraData` + +A marker property for telling the list to re-render (since it implements `PureComponent`). If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop, stick it here and treat it immutably. + +| Type | Required | +| ---- | -------- | +| any | No | + +--- + +### `getItemLayout` + +```jsx +(data, index) => {length: number, offset: number, index: number} +``` + +`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: + +```jsx + getItemLayout={(data, index) => ( + {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index} + )} +``` + +Adding `getItemLayout` can be a great performance boost for lists of several hundred items. Remember to include separator length (height or width) in your offset calculation if you specify `ItemSeparatorComponent`. + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + +### `horizontal` + +If true, renders items next to each other horizontally instead of stacked vertically. + +| Type | Required | +| ------- | -------- | +| boolean | No | + +--- + +### `initialNumToRender` + +How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions. + +| Type | Required | +| ------ | -------- | +| number | No | + +--- + +### `initialScrollIndex` + +Instead of starting at the top with the first item, start at `initialScrollIndex`. This disables the "scroll to top" optimization that keeps the first `initialNumToRender` items always rendered and immediately renders the items starting at this initial index. Requires `getItemLayout` to be implemented. + +| Type | Required | +| ------ | -------- | +| number | No | + +--- + +### `inverted` + +Reverses the direction of scroll. Uses scale transforms of `-1`. + +| Type | Required | +| ------- | -------- | +| boolean | No | + +--- + +### `keyExtractor` + +```jsx +(item: object, index: number) => string; +``` + +Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks `item.key`, then falls back to using the index, like React does. + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + +### `numColumns` + +Multiple columns can only be rendered with `horizontal={false}` and will zig-zag like a `flexWrap` layout. Items should all be the same height - masonry layouts are not supported. + +| Type | Required | +| ------ | -------- | +| number | No | + +--- + +### `onEndReached` + +```jsx +(info: {distanceFromEnd: number}) => void +``` + +Called once when the scroll position gets within `onEndReachedThreshold` of the rendered content. + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + +### `onEndReachedThreshold` + +How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the `onEndReached` callback. Thus a value of 0.5 will trigger `onEndReached` when the end of the content is within half the visible length of the list. + +| Type | Required | +| ------ | -------- | +| number | No | + +--- + +### `onRefresh` + +```jsx +() => void +``` + +If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the `refreshing` prop correctly. + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + +### `onViewableItemsChanged` + +```jsx +(info: { + viewableItems: array, + changed: array, + }) => void +``` + +Called when the viewability of rows changes, as defined by the `viewabilityConfig` prop. + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + +### `progressViewOffset` + +Set this when offset is needed for the loading indicator to show correctly. + +| Type | Required | Platform | +| ------ | -------- | -------- | +| number | No | Android | + +--- + +### `legacyImplementation` + +May not have full feature parity and is meant for debugging and performance comparison. + +| Type | Required | +| ------- | -------- | +| boolean | No | + +--- + +### `refreshing` + +Set this true while waiting for new data from a refresh. + +| Type | Required | +| ------- | -------- | +| boolean | No | + +--- + +### `removeClippedSubviews` + +This may improve scroll performance for large lists. + +> Note: May have bugs (missing content) in some circumstances - use at your own risk. + +| Type | Required | +| ------- | -------- | +| boolean | No | + +--- + +### `viewabilityConfig` + +See `ViewabilityHelper.js` for flow type and further documentation. + +| Type | Required | +| ----------------- | -------- | +| ViewabilityConfig | No | + +`viewabilityConfig` takes a type `ViewabilityConfig` an object with following properties + +| Property | Required | Type | +| -------------------------------- | -------- | ------- | +| minimumViewTime | No | number | +| viewAreaCoveragePercentThreshold | No | number | +| itemVisiblePercentThreshold | No | number | +| waitForInteraction | No | boolean | + +At least one of the `viewAreaCoveragePercentThreshold` or `itemVisiblePercentThreshold` is required. This needs to be done in the `constructor` to avoid following error ([ref](https://github.com/facebook/react-native/issues/17408)): + +``` + Error: Changing viewabilityConfig on the fly is not supported` +``` + +```jsx +constructor (props) { + super(props) + + this.viewabilityConfig = { + waitForInteraction: true, + viewAreaCoveragePercentThreshold: 95 + } +} +``` + +```jsx + Note: Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop. + +**Parameters:** + +| Name | Type | Required | Description | +| ------ | ------ | -------- | ----------- | +| params | object | Yes | See below. | + +Valid `params` keys are: + +- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`. +- 'index' (number) - The index to scroll to. Required. +- 'viewOffset' (number) - A fixed number of pixels to offset the final target position. +- 'viewPosition' (number) - A value of `0` places the item specified by index at the top, `1` at the bottom, and `0.5` centered in the middle. + +--- + +### `scrollToItem()` + +```jsx +scrollToItem(params); +``` + +Requires linear scan through data - use `scrollToIndex` instead if possible. + +> Note: Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop. + +**Parameters:** + +| Name | Type | Required | Description | +| ------ | ------ | -------- | ----------- | +| params | object | Yes | See below. | + +Valid `params` keys are: + +- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`. +- 'item' (object) - The item to scroll to. Required. +- 'viewPosition' (number) + +--- + +### `scrollToOffset()` + +```jsx +scrollToOffset(params); +``` + +Scroll to a specific content pixel offset in the list. + +**Parameters:** + +| Name | Type | Required | Description | +| ------ | ------ | -------- | ----------- | +| params | object | Yes | See below. | + +Valid `params` keys are: + +- 'offset' (number) - The offset to scroll to. In case of `horizontal` being true, the offset is the x-value, in any other case the offset is the y-value. Required. +- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`. + +--- + +### `recordInteraction()` + +```jsx +recordInteraction(); +``` + +Tells the list an interaction has occurred, which should trigger viewability calculations, e.g. if `waitForInteractions` is true and the user has not scrolled. This is typically called by taps on items or by navigation actions. + +--- + +### `flashScrollIndicators()` + +```jsx +flashScrollIndicators(); +``` + +Displays the scroll indicators momentarily. + +--- + +### `getScrollResponder()` + +```jsx +getScrollResponder(); +``` + +Provides a handle to the underlying scroll responder. + +--- + +### `getScrollableNode()` + +```jsx +getScrollableNode(); +``` + +Provides a handle to the underlying scroll node. diff --git a/website/versioned_docs/version-0.61/flexbox.md b/website/versioned_docs/version-0.61/flexbox.md new file mode 100644 index 00000000000..dd158b2b751 --- /dev/null +++ b/website/versioned_docs/version-0.61/flexbox.md @@ -0,0 +1,228 @@ +--- +id: flexbox +title: Layout with Flexbox +--- + +A component can specify the layout of its children using the flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes. + +You will normally use a combination of `flexDirection`, `alignItems`, and `justifyContent` to achieve the right layout. + +> Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with `flexDirection` defaulting to `column` instead of `row`, and the `flex` parameter only supporting a single number. + +### Flex + +[`flex`](/docs/layout-props#flex) will define how your items are going to **“fill”** over the available space along your main axis. Space will be divided according to each element's flex property. + +In the following example the red, yellow and the green views are all children in the container view that has `flex: 1` set. The red view uses `flex: 1` , the yellow view uses `flex: 2` and the green view uses `flex: 3` . **1+2+3 = 6** which means that the red view will get `1/6` of the space, the yellow `2/6` of the space and the green `3/6` of the space. + +![Flex](https://cdn-images-1.medium.com/max/800/1*PhCFmO5tYX_sZSyCd4vO3w.png) + +#### Flex Direction + +[`flexDirection`](/docs/layout-props#flexdirection) controls the direction in which the children of a node are laid out. This is also referred to as the _main axis_. The cross axis is the axis perpendicular to the main axis, or the axis which the wrapping lines are laid out in. + +- `row` Align children from left to right. If wrapping is enabled then the next line will start under the first item on the left of the container. + +- `column` (**default value**) Align children from top to bottom. If wrapping is enabled then the next line will start to the left first item on the top of the container. + +- `row-reverse` Align children from right to left. If wrapping is enabled then the next line will start under the first item on the right of the container. + +- `column-reverse` Align children from bottom to top. If wrapping is enabled then the next line will start to the left first item on the bottom of the container. + +LEARN MORE [HERE](https://yogalayout.com/docs/flex-direction) + +```SnackPlayer name=Flex%20Direction +import React, { Component } from 'react'; +import { View } from 'react-native'; + +export default class FlexDirectionBasics extends Component { + render() { + return ( + // Try setting `flexDirection` to `column`. + + + + + + ); + } +}; +``` + +![Flex Direction](https://cdn-images-1.medium.com/max/800/1*rA7IbuUsJWsx6evKAsabVw.png) + +### Layout Direction + +Layout direction specifies the direction in which children and text in a hierarchy should be laid out. Layout direction also affects what edge `start` and `end` refer to. By default React Native lays out with LTR layout direction. In this mode `start` refers to left and `end` refers to right. + +- `LTR` (**default value**) Text and children are laid out from left to right. Margin and padding applied the start of an element are applied on the left side. + +- `RTL` Text and children are laid out from right to left. Margin and padding applied the start of an element are applied on the right side. + +#### Justify Content + +[`justifyContent`](/docs/layout-props#justifycontent) describes how to align children within the main axis of their container. For example, you can use this property to center a child horizontally within a container with `flexDirection` set to `row` or vertically within a container with `flexDirection` set to `column`. + +- `flex-start`(**default value**) Align children of a container to the start of the container's main axis. + +- `flex-end` Align children of a container to the end of the container's main axis. + +- `center` Align children of a container in the center of the container's main axis. + +- `space-between` Evenly space of children across the container's main axis, distributing remaining space between the children. + +- `space-around` Evenly space of children across the container's main axis, distributing remaining space around the children. Compared to `space-between` using `space-around` will result in space being distributed to the beginning of the first child and end of the last child. + +- `space-evenly` Evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same. + +LEARN MORE [HERE](https://yogalayout.com/docs/justify-content) + +```SnackPlayer name=Justify%20Content +import React, { Component } from 'react'; +import { View } from 'react-native'; + +export default class JustifyContentBasics extends Component { + render() { + return ( + // Try setting `justifyContent` to `center`. + // Try setting `flexDirection` to `row`. + + + + + + ); + } +}; +``` + +![Justify Content](https://cdn-images-1.medium.com/max/800/1*i5TVlme-TisAVvD5ax2yPA.png) + +#### Align Items + +[`alignItems`](/docs/layout-props#alignitems) describes how to align children along the cross axis of their container. Align items is very similar to `justifyContent` but instead of applying to the main axis, `alignItems` applies to the cross axis. + +- `stretch` (**default value**) Stretch children of a container to match the `height` of the container's cross axis. + +- `flex-start` Align children of a container to the start of the container's cross axis. + +- `flex-end` Align children of a container to the end of the container's cross axis. + +- `center` Align children of a container in the center of the container's cross axis. + +- `baseline` Align children of a container along a common baseline. Individual children can be set to be the reference baseline for their parents. + +> For `stretch` to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting `alignItems: stretch` does nothing until the `width: 50` is removed from the children. + +LEARN MORE [HERE](https://yogalayout.com/docs/align-items) + +```SnackPlayer name=Align%20Items +import React, { Component } from 'react'; +import { View } from 'react-native'; + +export default class AlignItemsBasics extends Component { + render() { + return ( + // Try setting `alignItems` to 'flex-start' + // Try setting `justifyContent` to `flex-end`. + // Try setting `flexDirection` to `row`. + + + + + + ); + } +}; +``` + +![Align Items](https://cdn-images-1.medium.com/max/800/1*evkM7zfxt-9p-HJ1M0Bh2g.png) + +### Align Self + +[`alignSelf`](/docs/layout-props#alignself) has the same options and effect as `alignItems` but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. `alignSelf` overrides any option set by the parent with `alignItems`. + +![Align Self](https://cdn-images-1.medium.com/max/800/1*J1JCoKwLCokX9JXVBvP71g.png) + +### Align Content + +[alignContent](/docs/layout-props#aligncontent) defines the distribution of lines along the cross-axis. This only has effect when items are wrapped to multiple lines using `flexWrap`. + +- `flex-start` (**default value**) Align wrapped lines to the start of the container's cross axis. + +- `flex-end` Align wrapped lines to the end of the container's cross axis. + +- `stretch` wrapped lines to match the height of the container's cross axis. + +- `center` Align wrapped lines in the center of the container's cross axis. + +- `space-between` Evenly space wrapped lines across the container's main axis, distributing remaining space between the lines. + +- `space-around` Evenly space wrapped lines across the container's main axis, distributing remaining space around the lines. Compared to space between using space around will result in space being distributed to the begining of the first lines and end of the last line. + +LEARN MORE [HERE](https://yogalayout.com/docs/align-content) + +![Align Content](https://cdn-images-1.medium.com/max/800/1*cC2XFyCF_igp20Ombt4wBw.png) + +### Flex Wrap + +The [`flexWrap`](/docs/layout-props#flexwrap) property is set on containers and controls what happens when children overflow the size of the container along the main axis. By default children are forced into a single line (which can shrink elements). If wrapping is allowed items are wrapped into multiple lines along the main axis if needed. + +When wrapping lines `alignContent` can be used to specify how the lines are placed in the container. learn more [here](https://yogalayout.com/docs/flex-wrap) + +![Flex Wrap](https://cdn-images-1.medium.com/max/800/1*_7v4uQhSsuCn1cfeOMVfrA.png) + +### Flex Basis, Grow, and Shrink + +- [`flexGrow`](/docs/layout-props#flexgrow) describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children. + + flexGrow accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the child’s flex grow value. + +- [`flexShrink`](/docs/layout-props#flexshrink) describes how to shrink children along the main axis in the case that the total size of the children overflow the size of the container on the main axis. Flex shrink is very similar to flex grow and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed. + + Flex shrink accepts any floating point value >= 0, with 1 being the default value. A container will shrink its children weighted by the child’s flex shrink value. + +- [`flexBasis`](/docs/layout-props#flexbasis) is an axis-independent way of providing the default size of an item along the main axis. Setting the flex basis of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The flex basis of an item is the default size of that item, the size of the item before any flex grow and flex shrink calculations are performed. + +LEARN MORE [HERE](https://yogalayout.com/docs/flex) + +### Width and Height + +The `width` property in Yoga specifies the width of the element's content area. Similarly height property specifies the `height` of the element's content area. + +Both `width` and `height` can take following values: + +- `auto` Is the **default Value**, React Native calculates the width/height for the element based on its content, whether that is other children, text, or an image. + +- `pixels` Defines the width/height in absolute pixels. Depending on other styles set on the component, this may or may not be the final dimension of the node. + +- `percentage` Defines the width or height in percentage of its parent's width or height respectively. + +### Absolute & Relative Layout + +The `position` type of an element defines how it is positioned within its parent. + +`relative` (**default value**) By default an element is positioned relatively. This means an element is positioned according to the normal flow of the layout, and then offset relative to that position based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any sibling or parent elements. + +`absolute` When positioned absolutely an element doesn't take part in the normal layout flow. It is instead laid out independent of its siblings. The position is determined based on the `top`, `right`, `bottom`, and `left` values. + +![Absolute & Relative Layoutp](https://cdn-images-1.medium.com/max/800/1*NlPeRQCQK3Vb5nyjL0Mqxw.png) + +#### Going Deeper + +Check out the interactive [yoga playground](https://yogalayout.com/playground) that you can use to get a better understanding of flexbox. + +We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented [here](./layout-props.md). + +We're getting close to being able to build a real application. One thing we are still missing is a way to take user input, so let's move on to [learn how to handle text input with the TextInput component](handling-text-input.md). + +See some examples from [Wix Engineers](https://medium.com/wix-engineering/the-full-react-native-layout-cheat-sheet-a4147802405c): diff --git a/website/versioned_docs/version-0.61/geolocation.md b/website/versioned_docs/version-0.61/geolocation.md new file mode 100644 index 00000000000..ca5b843bbc4 --- /dev/null +++ b/website/versioned_docs/version-0.61/geolocation.md @@ -0,0 +1,171 @@ +--- +id: geolocation +title: '🚧 Geolocation' +--- + +> **Deprecated.** Use [@react-native-community/geolocation](https://github.com/react-native-community/react-native-geolocation) instead. + +The Geolocation API extends the [Geolocation web spec](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation). + +As a browser polyfill, this API is available through the `navigator.geolocation` global - you do not need to `import` it. + +On Android, this uses the [android.location API](https://developer.android.com/reference/android/location/package-summary). This API is not recommended by Google because it is less accurate and slower than the recommended [Google Location Services API](https://developer.android.com/training/location/). In order to use it with React Native, use the [react-native-geolocation-service](https://github.com/Agontuk/react-native-geolocation-service) module. + +### Configuration and Permissions + + + +#### iOS + +You need to include the `NSLocationWhenInUseUsageDescription` key in Info.plist to enable geolocation when using the app. Geolocation is enabled by default when you create a project with `react-native init`. + +In order to enable geolocation in the background, you need to include the 'NSLocationAlwaysUsageDescription' key in Info.plist and add location as a background mode in the 'Capabilities' tab in Xcode. + +If you are using CocoaPods for React Native, make sure to include the `RCTGeolocation` sub-podspec. + +#### Android + +To request access to location, you need to add the following line to your app's `AndroidManifest.xml`: + +`` + +Android API >= 18 Positions will also contain a `mocked` boolean to indicate if position was created from a mock provider. + +

+ Android API >= 23 Requires an additional step to check for, and request + the ACCESS_FINE_LOCATION permission using + the PermissionsAndroid API. + Failure to do so may result in a hard crash. +

+ +### Methods + +- [`setRNConfiguration`](#setrnconfiguration) +- [`requestAuthorization`](#requestauthorization) +- [`getCurrentPosition`](#getcurrentposition) +- [`watchPosition`](#watchposition) +- [`clearWatch`](#clearwatch) +- [`stopObserving`](#stopobserving) + +--- + +# Reference + +## Methods + +### `setRNConfiguration()` + +```jsx +geolocation.setRNConfiguration(config); +``` + +Sets configuration options that will be used in all location requests. + +**Parameters:** + +| Name | Type | Required | Description | +| ------ | ------ | -------- | ----------- | +| config | object | Yes | See below. | + +Supported options: + +- `skipPermissionRequests` (boolean, iOS-only) - Defaults to `false`. If `true`, you must request permissions before using Geolocation APIs. + +--- + +### `requestAuthorization()` + +```jsx +geolocation.requestAuthorization(); +``` + +Request suitable Location permission based on the key configured on pList. If NSLocationAlwaysUsageDescription is set, it will request Always authorization, although if NSLocationWhenInUseUsageDescription is set, it will request InUse authorization. + +--- + +### `getCurrentPosition()` + +```jsx +geolocation.getCurrentPosition( + geo_success, + [geo_error], + [geo_options] +); +``` + +Invokes the success callback once with the latest location info. + +**Parameters:** + +| Name | Type | Required | Description | +| ----------- | -------- | -------- | ----------------------------------------- | +| geo_success | function | Yes | Invoked with latest location info. | +| geo_error | function | No | Invoked whenever an error is encountered. | +| geo_options | object | No | See below. | + +Supported options: + +- `timeout` (ms) - Is a positive value representing the maximum length of time (in milliseconds) the device is allowed to take in order to return a position. Defaults to INFINITY. +- `maximumAge` (ms) - Is a positive value indicating the maximum age in milliseconds of a possible cached position that is acceptable to return. If set to 0, it means that the device cannot use a cached position and must attempt to retrieve the real current position. If set to Infinity the device will always return a cached position regardless of its age. Defaults to INFINITY. +- `enableHighAccuracy` (bool) - Is a boolean representing if to use GPS or not. If set to true, a GPS position will be requested. If set to false, a WIFI location will be requested. + +--- + +### `watchPosition()` + +```jsx +geolocation.watchPosition(success, [error], [options]); +``` + +Invokes the success callback whenever the location changes. Returns a `watchId` (number). + +**Parameters:** + +| Name | Type | Required | Description | +| ------- | -------- | -------- | ----------------------------------------- | +| success | function | Yes | Invoked whenever the location changes. | +| error | function | No | Invoked whenever an error is encountered. | +| options | object | No | See below. | + +Supported options: + +- `timeout` (ms) - Is a positive value representing the maximum length of time (in milliseconds) the device is allowed to take in order to return a position. Defaults to INFINITY. +- `maximumAge` (ms) - Is a positive value indicating the maximum age in milliseconds of a possible cached position that is acceptable to return. If set to 0, it means that the device cannot use a cached position and must attempt to retrieve the real current position. If set to Infinity the device will always return a cached position regardless of its age. Defaults to INFINITY. +- `enableHighAccuracy` (bool) - Is a boolean representing if to use GPS or not. If set to true, a GPS position will be requested. If set to false, a WIFI location will be requested. +- `distanceFilter` (m) - The minimum distance from the previous location to exceed before returning a new location. Set to 0 to not filter locations. Defaults to 100m. +- `useSignificantChanges` (bool) - Uses the battery-efficient native significant changes APIs to return locations. Locations will only be returned when the device detects a significant distance has been breached. Defaults to FALSE. + +--- + +### `clearWatch()` + +```jsx +geolocation.clearWatch(watchID); +``` + +**Parameters:** + +| Name | Type | Required | Description | +| ------- | ------ | -------- | ------------------------------------ | +| watchID | number | Yes | Id as returned by `watchPosition()`. | + +--- + +### `stopObserving()` + +```jsx +geolocation.stopObserving(); +``` + +Stops observing for device location changes. In addition, it removes all listeners previously registered. + +Notice that this method has only effect if the `geolocation.watchPosition(successCallback, errorCallback)` method was previously invoked. diff --git a/website/versioned_docs/version-0.61/gesture-responder-system.md b/website/versioned_docs/version-0.61/gesture-responder-system.md new file mode 100644 index 00000000000..ed29d81c7ca --- /dev/null +++ b/website/versioned_docs/version-0.61/gesture-responder-system.md @@ -0,0 +1,66 @@ +--- +id: gesture-responder-system +title: Gesture Responder System +--- + +The gesture responder system manages the lifecycle of gestures in your app. A touch can go through several phases as the app determines what the user's intention is. For example, the app needs to determine if the touch is scrolling, sliding on a widget, or tapping. This can even change during the duration of a touch. There can also be multiple simultaneous touches. + +The touch responder system is needed to allow components to negotiate these touch interactions without any additional knowledge about their parent or child components. + +### Best Practices + +To make your app feel great, every action should have the following attributes: + +- Feedback/highlighting- show the user what is handling their touch, and what will happen when they release the gesture +- Cancel-ability- when making an action, the user should be able to abort it mid-touch by dragging their finger away + +These features make users more comfortable while using an app, because it allows people to experiment and interact without fear of making mistakes. + +### TouchableHighlight and Touchable\* + +The responder system can be complicated to use. So we have provided an abstract `Touchable` implementation for things that should be "tappable". This uses the responder system and allows you to configure tap interactions declaratively. Use `TouchableHighlight` anywhere where you would use a button or link on web. + +## Responder Lifecycle + +A view can become the touch responder by implementing the correct negotiation methods. There are two methods to ask the view if it wants to become responder: + +- `View.props.onStartShouldSetResponder: (evt) => true,` - Does this view want to become responder on the start of a touch? +- `View.props.onMoveShouldSetResponder: (evt) => true,` - Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsiveness? + +If the View returns true and attempts to become the responder, one of the following will happen: + +- `View.props.onResponderGrant: (evt) => {}` - The View is now responding for touch events. This is the time to highlight and show the user what is happening +- `View.props.onResponderReject: (evt) => {}` - Something else is the responder right now and will not release it + +If the view is responding, the following handlers can be called: + +- `View.props.onResponderMove: (evt) => {}` - The user is moving their finger +- `View.props.onResponderRelease: (evt) => {}` - Fired at the end of the touch, ie "touchUp" +- `View.props.onResponderTerminationRequest: (evt) => true` - Something else wants to become responder. Should this view release the responder? Returning true allows release +- `View.props.onResponderTerminate: (evt) => {}` - The responder has been taken from the View. Might be taken by other views after a call to `onResponderTerminationRequest`, or might be taken by the OS without asking (happens with control center/ notification center on iOS) + +`evt` is a synthetic touch event with the following form: + +- `nativeEvent` + - `changedTouches` - Array of all touch events that have changed since the last event + - `identifier` - The ID of the touch + - `locationX` - The X position of the touch, relative to the element + - `locationY` - The Y position of the touch, relative to the element + - `pageX` - The X position of the touch, relative to the root element + - `pageY` - The Y position of the touch, relative to the root element + - `target` - The node id of the element receiving the touch event + - `timestamp` - A time identifier for the touch, useful for velocity calculation + - `touches` - Array of all current touches on the screen + +### Capture ShouldSet Handlers + +`onStartShouldSetResponder` and `onMoveShouldSetResponder` are called with a bubbling pattern, where the deepest node is called first. That means that the deepest component will become responder when multiple Views return true for `*ShouldSetResponder` handlers. This is desirable in most cases, because it makes sure all controls and buttons are usable. + +However, sometimes a parent will want to make sure that it becomes responder. This can be handled by using the capture phase. Before the responder system bubbles up from the deepest component, it will do a capture phase, firing `on*ShouldSetResponderCapture`. So if a parent View wants to prevent the child from becoming responder on a touch start, it should have a `onStartShouldSetResponderCapture` handler which returns true. + +- `View.props.onStartShouldSetResponderCapture: (evt) => true,` +- `View.props.onMoveShouldSetResponderCapture: (evt) => true,` + +### PanResponder + +For higher-level gesture interpretation, check out [PanResponder](panresponder.md). diff --git a/website/versioned_docs/version-0.61/getting-started.md b/website/versioned_docs/version-0.61/getting-started.md index 661e44feb7a..892d931bf55 100644 --- a/website/versioned_docs/version-0.61/getting-started.md +++ b/website/versioned_docs/version-0.61/getting-started.md @@ -1,7 +1,6 @@ --- -id: version-0.61-getting-started +id: getting-started title: Getting Started -original_id: getting-started --- This page will help you install and build your first React Native app. If you already have React Native installed, you can skip ahead to the [Tutorial](tutorial.md). diff --git a/website/versioned_docs/version-0.61/handling-text-input.md b/website/versioned_docs/version-0.61/handling-text-input.md new file mode 100644 index 00000000000..e45efb18f08 --- /dev/null +++ b/website/versioned_docs/version-0.61/handling-text-input.md @@ -0,0 +1,42 @@ +--- +id: handling-text-input +title: Handling Text Input +--- + +[`TextInput`](textinput#content) is a [Core Component](intro-react-native-components) that allows the user to enter text. It has an `onChangeText` prop that takes a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted. + +For example, let's say that as the user types, you're translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated as "🍕🍕🍕". + +```SnackPlayer name=Handling%20Text%20Input +import React, { Component } from 'react'; +import { Text, TextInput, View } from 'react-native'; + +export default class PizzaTranslator extends Component { + constructor(props) { + super(props); + this.state = {text: ''}; + } + + render() { + return ( + + this.setState({text})} + value={this.state.text} + /> + + {this.state.text.split(' ').map((word) => word && '🍕').join(' ')} + + + ); + } +} +``` + +In this example, we store `text` in the state, because it changes over time. + +There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the [React docs on controlled components](https://reactjs.org/docs/forms.html#controlled-components), or the [reference docs for TextInput](textinput.md). + +Text input is one of the ways the user interacts with the app. Next, let's look at another type of input and [learn how to handle touches](handling-touches.md). diff --git a/website/versioned_docs/version-0.61/handling-touches.md b/website/versioned_docs/version-0.61/handling-touches.md new file mode 100644 index 00000000000..c9e82a8f1be --- /dev/null +++ b/website/versioned_docs/version-0.61/handling-touches.md @@ -0,0 +1,174 @@ +--- +id: handling-touches +title: Handling Touches +--- + +Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. React Native provides components to handle all sorts of common gestures, as well as a comprehensive [gesture responder system](gesture-responder-system.md) to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button. + +## Displaying a basic button + +[Button](button.md) provides a basic button component that is rendered nicely on all platforms. The minimal example to display a button looks like this: + +```jsx + + + +
+ + + +> If you’re familiar with web development, `` and `` might remind you of HTML! You can think of them as the `
` and `

` tags of application development. + + + +> On Android, you usually put your views inside `LinearLayout`, `FrameLayout`, `RelativeLayout`, etc. to define how the view’s children will be arranged on the screen. In React Native, `View` uses Flexbox for its children’s layout. You can learn more in [our guide to layout with Flexbox](flexbox). + + + +You can render this component multiple times and in multiple places without repeating your code by using ``: + +```SnackPlayer name=Multiple%20Components +import React from 'react'; +import { Text, TextInput, View } from 'react-native'; + +const Cat = () => { + return ( + + I am also a cat! + + ); +} + +const Cafe = () => { + return ( + + Welcome! + + + + + ); +} + +export default Cafe; +``` + +Any component that renders other components is a **parent component.** Here, `Cafe` is the parent component and each `Cat` is a **child component.** + +You can put as many cats in your cafe as you like. Each `` renders a unique element—which you can customize with props. + +## Props + +**Props** is short for “properties.” Props let you customize React components. For example, here you pass each `` a different `name` for `Cat` to render: + +```SnackPlayer name=Multiple%20Props +import React from 'react'; +import { Text, View } from 'react-native'; + +const Cat = (props) => { + return ( + + Hello, I am {props.name}! + + ); +} + +const Cafe = () => { + return ( + + + + + + ); +} + +export default Cafe; +``` + +Most of React Native’s Core Components can be customized with props, too. For example, when using [`Image`](image), you pass it a prop named [`source`](image#source) to define what image it shows: + +```SnackPlayer name=Props +import React from 'react'; +import { Text, View, Image } from 'react-native'; + +const CatApp = () => { + return ( + + + Hello, I am your cat! + + ); +} + +export default CatApp; +``` + +`Image` has [many different props](image#props), including [`style`](image#style), which accepts a JS object of design and layout related property-value pairs. + +> Notice the double curly braces `{{ }}` surrounding `style`‘s width and height. In JSX, JavaScript values are referenced with `{}`. This is handy if you are passing something other than a string as props, like an array or number: ``. However, JS objects are **_also_** denoted with curly braces: `{width: 200, height: 200}`. Therefore, to pass a JS object in JSX, you must wrap the object in **another pair** of curly braces: `{{width: 200, height: 200}}` + +You can build many things with props and the Core Components [`Text`](text), [`Image`](image), and [`View`](view)! But to build something interactive, you’ll need state. + +## State + +While you can think of props as arguments you use to configure how components render, **state** is like a component’s personal data storage. State is useful for handling data that changes over time or that comes from user interaction. State gives your components memory! + +> As a general rule, use props to configure a component when it renders. Use state to keep track of any component data that you expect to change over time. + +The following example takes place in a cat cafe where two hungry cats are waiting to be fed. Their hunger, which we expect to change over time (unlike their names), is stored as state. To feed the cats, press their buttons—which will update their state. + +

+
    + + +
+
+ + + +You can add state to a component by calling [React’s `useState` Hook](https://reactjs.org/docs/hooks-state.html). A Hook is a kind of function that lets you “hook into” React features. For example, `useState` is a Hook that lets you add state to function components. You can learn more about [other kinds of Hooks in the React documentation.](https://reactjs.org/docs/hooks-intro.html) + +```SnackPlayer name=State +import React, { useState } from "react"; +import { Button, Text, View } from "react-native"; + +const Cat = (props) => { + const [isHungry, setIsHungry] = useState(true); + + return ( + + + I am {props.name}, and I am {isHungry ? "hungry" : "full"}! + + +``` + +> Do not change your component's state directly by assigning it a new value with `this.state.hunger = false`. Calling `this.setState()` allows React to track changes made to state that trigger rerendering. Setting state directly can break your app's reactivity! + +When `this.state.isHungry` is false, the `Button`’s `disabled` prop is set to `false` and its `title` also changes: + +```jsx + + + + +
+ + + +> Web developers may be familiar with this concept. + + + +> Android developers may be familiar with this concept. + + + +> iOS developers may be familiar with this concept. + + + +## Formatting + +Menu paths are written in bold and use carets to navigate submenus. Example: **Android Studio > Preferences** + +--- + +Now that you know how this guide works, it's time to get to know the foundation of React Native: [Native Components](intro-react-native-components.md). diff --git a/website/versioned_docs/version-0.61/javascript-environment.md b/website/versioned_docs/version-0.61/javascript-environment.md new file mode 100644 index 00000000000..434f8051f2b --- /dev/null +++ b/website/versioned_docs/version-0.61/javascript-environment.md @@ -0,0 +1,89 @@ +--- +id: javascript-environment +title: JavaScript Environment +--- + +## JavaScript Runtime + +When using React Native, you're going to be running your JavaScript code in two environments: + +- In most cases, React Native will use [JavaScriptCore](http://trac.webkit.org/wiki/JavaScriptCore), the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps. +- When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses [V8](https://v8.dev/) as its JavaScript engine. + +While both environments are very similar, you may end up hitting some inconsistencies. We're likely going to experiment with other JavaScript engines in the future, so it's best to avoid relying on specifics of any runtime. + +## JavaScript Syntax Transformers + +Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters. + +React Native ships with the [Babel JavaScript compiler](https://babeljs.io). Check [Babel documentation](https://babeljs.io/docs/plugins/#transform-plugins) on its supported transformations for more details. + +A full list of React Native's enabled transformations can be found in [metro-react-native-babel-preset](https://github.com/facebook/metro/tree/master/packages/metro-react-native-babel-preset). + +ES5 + +- Reserved Words: `promise.catch(function() { });` + +ES6 + +- [Arrow functions](http://babeljs.io/docs/learn-es2015/#arrows): ` this.setState({pressed: true})} />` +- [Block scoping](https://babeljs.io/docs/learn-es2015/#let-const): `let greeting = 'hi';` +- [Call spread](http://babeljs.io/docs/learn-es2015/#default-rest-spread): `Math.max(...array);` +- [Classes](http://babeljs.io/docs/learn-es2015/#classes): `class C extends React.Component { render() { return ; } }` +- [Constants](https://babeljs.io/docs/learn-es2015/#let-const): `const answer = 42;` +- [Destructuring](http://babeljs.io/docs/learn-es2015/#destructuring): `var {isActive, style} = this.props;` +- [for...of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of): `for (var num of [1, 2, 3]) {};` +- [Modules](http://babeljs.io/docs/learn-es2015/#modules): `import React, { Component } from 'react';` +- [Computed Properties](http://babeljs.io/docs/learn-es2015/#enhanced-object-literals): `var key = 'abc'; var obj = {[key]: 10};` +- [Object Concise Method](http://babeljs.io/docs/learn-es2015/#enhanced-object-literals): `var obj = { method() { return 10; } };` +- [Object Short Notation](http://babeljs.io/docs/learn-es2015/#enhanced-object-literals): `var name = 'vjeux'; var obj = { name };` +- [Rest Params](https://github.com/sebmarkbage/ecmascript-rest-spread): `function(type, ...args) {};` +- [Template Literals](http://babeljs.io/docs/learn-es2015/#template-strings): `` var who = 'world'; var str = `Hello ${who}`; `` + +ES8 + +- [Function Trailing Comma](https://github.com/jeffmo/es-trailing-function-commas): `function f(a, b, c,) {};` +- [Async Functions](https://github.com/tc39/ecmascript-asyncawait): `async function doStuffAsync() { const foo = await doOtherStuffAsync(); };` + +Stage 3 + +- [Object Spread](https://github.com/tc39/proposal-object-rest-spread): `var extended = { ...obj, a: 10 };` +- [Static class fields](https://github.com/tc39/proposal-static-class-features): `class CustomDate { static epoch = new CustomDate(0); }` +- [Optional Chaining](https://github.com/tc39/proposal-optional-chaining): `var name = obj.user?.name;` + +Specific + +- [JSX](https://reactjs.org/docs/jsx-in-depth.html): `` +- [Flow](https://flowtype.org/): `function foo(x: ?number): string {};` +- [TypeScript](https://flowtype.org/): `function foo(x: number | undefined): string {};` +- [Babel Template](https://babeljs.io/docs/en/babel-template): allows AST templating + +## Polyfills + +Many standards functions are also available on all the supported JavaScript runtimes. + +Browser + +- [console.{log, warn, error, info, trace, table, group, groupEnd}](https://developer.chrome.com/devtools/docs/console-api) +- [CommonJS require](https://nodejs.org/docs/latest/api/modules.html) +- [XMLHttpRequest, fetch](network.md#content) +- [{set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame](timers.md#content) + +ES6 + +- [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) +- String.prototype.{[startsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith), [endsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith), [repeat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat), [includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes)} +- [Array.from](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from) +- Array.prototype.{[find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find), [findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)} + +ES7 + +- Array.prototype.{[includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)} + +ES8 + +- Object.{[entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries), [values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values)} + +Specific + +- `__DEV__` diff --git a/website/versioned_docs/version-0.61/keyboard.md b/website/versioned_docs/version-0.61/keyboard.md new file mode 100644 index 00000000000..64aba19ea93 --- /dev/null +++ b/website/versioned_docs/version-0.61/keyboard.md @@ -0,0 +1,108 @@ +--- +id: keyboard +title: Keyboard +--- + +`Keyboard` module to control keyboard events. + +### Usage + +The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it. + +```jsx +import React, { Component } from 'react'; +import { Keyboard, TextInput } from 'react-native'; + +class Example extends Component { + componentDidMount() { + this.keyboardDidShowListener = Keyboard.addListener( + 'keyboardDidShow', + this._keyboardDidShow + ); + this.keyboardDidHideListener = Keyboard.addListener( + 'keyboardDidHide', + this._keyboardDidHide + ); + } + + componentWillUnmount() { + this.keyboardDidShowListener.remove(); + this.keyboardDidHideListener.remove(); + } + + _keyboardDidShow() { + alert('Keyboard Shown'); + } + + _keyboardDidHide() { + alert('Keyboard Hidden'); + } + + render() { + return ; + } +} +``` + +--- + +# Reference + +## Methods + +### `addListener()` + +```jsx +static addListener(eventName, callback) +``` + +The `addListener` function connects a JavaScript function to an identified native keyboard notification event. + +This function then returns the reference to the listener. + +@param {string} eventName The `nativeEvent` is the string that identifies the event you're listening for. This can be any of the following: + +- `keyboardWillShow` +- `keyboardDidShow` +- `keyboardWillHide` +- `keyboardDidHide` +- `keyboardWillChangeFrame` +- `keyboardDidChangeFrame` + +Note that if you set `android:windowSoftInputMode` to `adjustResize`, only `keyboardDidShow` and `keyboardDidHide` events will be available on Android. If you set `android:windowSoftInputMode` to `adjustNothing`, no events will be available on Android. `keyboardWillShow` as well as `keyboardWillHide` are generally not available on Android since there is no native corresponding event. + +@param {function} callback function to be called when the event fires. + +--- + +### `removeListener()` + +```jsx +static removeListener(eventName, callback) +``` + +Removes a specific listener. + +@param {string} eventName The `nativeEvent` is the string that identifies the event you're listening for. @param {function} callback function to be called when the event fires. + +--- + +### `removeAllListeners()` + +```jsx +static removeAllListeners(eventName) +``` + +Removes all listeners for a specific event type. + +@param {string} eventType The native event string listeners are watching which will be removed. + +--- + +### `dismiss()` + +```jsx +static dismiss() +``` + +Dismisses the active keyboard and removes focus. diff --git a/website/versioned_docs/version-0.61/keyboardavoidingview.md b/website/versioned_docs/version-0.61/keyboardavoidingview.md new file mode 100644 index 00000000000..d33714934bf --- /dev/null +++ b/website/versioned_docs/version-0.61/keyboardavoidingview.md @@ -0,0 +1,71 @@ +--- +id: keyboardavoidingview +title: KeyboardAvoidingView +--- + +It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its height, position, or bottom padding based on the position of the keyboard. + +Example usage: + +```jsx +import { KeyboardAvoidingView } from 'react-native'; + + + ... your UI ... +; +``` + +### Example + + + +--- + +# Reference + +## Props + +Inherits [View Props](view.md#props). + +### `behavior` + +Specify how to react to the presence of the keyboard. + +_Note: Android and iOS both interact with this prop differently._ _Android may behave better when given no behavior prop at all, whereas iOS is the opposite._ + +| Type | Required | +| ------------------------------------- | -------- | +| enum('height', 'position', 'padding') | No | + +--- + +### `contentContainerStyle` + +The style of the content container(View) when behavior is 'position'. + +| Type | Required | +| ---------- | -------- | +| View.style | No | + +--- + +### `enabled` + +Enabled or disabled KeyboardAvoidingView. The default is `true`. + +| Type | Required | +| ------- | -------- | +| boolean | No | + +--- + +### `keyboardVerticalOffset` + +This is the distance between the top of the user screen and the react native view, may be non-zero in some use cases. Defaults to 0. + +| Type | Required | +| ------ | -------- | +| number | No | diff --git a/website/versioned_docs/version-0.61/layout-props.md b/website/versioned_docs/version-0.61/layout-props.md new file mode 100644 index 00000000000..e0aaa4de375 --- /dev/null +++ b/website/versioned_docs/version-0.61/layout-props.md @@ -0,0 +1,598 @@ +--- +id: layout-props +title: Layout Props +--- + +# Reference + +## Props + +### `alignContent` + +`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent. See https://developer.mozilla.org/en-US/docs/Web/CSS/align-content for more details. + +| Type | Required | +| ------------------------------------------------------------------------------------ | -------- | +| enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around') | No | + +--- + +### `alignItems` + +`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items for more details. + +| Type | Required | +| --------------------------------------------------------------- | -------- | +| enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No | + +--- + +### `alignSelf` + +`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-self for more details. + +| Type | Required | +| ----------------------------------------------------------------------- | -------- | +| enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No | + +--- + +### `aspectRatio` + +Aspect ratio controls the size of the undefined dimension of a node. Aspect ratio is a non-standard property only available in React Native and not CSS. + +- On a node with a set width/height aspect ratio controls the size of the unset dimension +- On a node with a set flex basis aspect ratio controls the size of the node in the cross axis if unset +- On a node with a measure function aspect ratio works as though the measure function measures the flex basis +- On a node with flex grow/shrink aspect ratio controls the size of the node in the cross axis if unset +- Aspect ratio takes min/max dimensions into account + +| Type | Required | +| ------ | -------- | +| number | No | + +--- + +### `borderBottomWidth` + +`borderBottomWidth` works like `border-bottom-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width for more details. + +| Type | Required | +| ------ | -------- | +| number | No | + +--- + +### `borderEndWidth` + +When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. When direction is `rtl`, `borderEndWidth` is equivalent to `borderLeftWidth`. + +| Type | Required | +| ------ | -------- | +| number | No | + +--- + +### `borderLeftWidth` + +`borderLeftWidth` works like `border-left-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width for more details. + +| Type | Required | +| ------ | -------- | +| number | No | + +--- + +### `borderRightWidth` + +`borderRightWidth` works like `border-right-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width for more details. + +| Type | Required | +| ------ | -------- | +| number | No | + +--- + +### `borderStartWidth` + +When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. When direction is `rtl`, `borderStartWidth` is equivalent to `borderRightWidth`. + +| Type | Required | +| ------ | -------- | +| number | No | + +--- + +### `borderTopWidth` + +`borderTopWidth` works like `border-top-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width for more details. + +| Type | Required | +| ------ | -------- | +| number | No | + +--- + +### `borderWidth` + +`borderWidth` works like `border-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width for more details. + +| Type | Required | +| ------ | -------- | +| number | No | + +--- + +### `bottom` + +`bottom` is the number of logical pixels to offset the bottom edge of this component. + +It works similarly to `bottom` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. + +See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of how `bottom` affects layout. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `direction` + +`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale. See https://yogalayout.com/docs/layout-direction for more details. + +| Type | Required | Platform | +| ----------------------------- | -------- | -------- | +| enum('inherit', 'ltr', 'rtl') | No | iOS | + +--- + +### `display` + +`display` sets the display type of this component. + +It works similarly to `display` in CSS, but only support 'flex' and 'none'. 'flex' is the default. + +| Type | Required | +| -------------------- | -------- | +| enum('none', 'flex') | No | + +--- + +### `end` + +When the direction is `ltr`, `end` is equivalent to `right`. When the direction is `rtl`, `end` is equivalent to `left`. + +This style takes precedence over the `left` and `right` styles. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `flex` + +In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the [Yoga](https://github.com/facebook/yoga). + +When `flex` is a positive number, it makes the component flexible and it will be sized proportional to its flex value. So a component with `flex` set to 2 will take twice the space as a component with `flex` set to 1. `flex: ` equates to `flexGrow: , flexShrink: 1, flexBasis: 0`. + +When `flex` is 0, the component is sized according to `width` and `height` and it is inflexible. + +When `flex` is -1, the component is normally sized according `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`. + +flexGrow, flexShrink, and flexBasis work the same as in CSS. + +| Type | Required | +| ------ | -------- | +| number | No | + +--- + +### `flexBasis` + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `flexDirection` + +`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`. See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction for more details. + +| Type | Required | +| ------------------------------------------------------ | -------- | +| enum('row', 'row-reverse', 'column', 'column-reverse') | No | + +--- + +### `flexGrow` + +| Type | Required | +| ------ | -------- | +| number | No | + +--- + +### `flexShrink` + +| Type | Required | +| ------ | -------- | +| number | No | + +--- + +### `flexWrap` + +`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap). See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap for more details. Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0). + +| Type | Required | +| ---------------------- | -------- | +| enum('wrap', 'nowrap') | No | + +--- + +### `height` + +`height` sets the height of this component. + +It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `justifyContent` + +`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start). See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content for more details. + +| Type | Required | +| ----------------------------------------------------------------------------------------- | -------- | +| enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly') | No | + +--- + +### `left` + +`left` is the number of logical pixels to offset the left edge of this component. + +It works similarly to `left` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. + +See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of how `left` affects layout. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `margin` + +Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginBottom` + +`marginBottom` works like `margin-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginEnd` + +When direction is `ltr`, `marginEnd` is equivalent to `marginRight`. When direction is `rtl`, `marginEnd` is equivalent to `marginLeft`. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginHorizontal` + +Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginLeft` + +`marginLeft` works like `margin-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginRight` + +`marginRight` works like `margin-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginStart` + +When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direction is `rtl`, `marginStart` is equivalent to `marginRight`. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginTop` + +`marginTop` works like `margin-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginVertical` + +Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `maxHeight` + +`maxHeight` is the maximum height for this component, in logical pixels. + +It works similarly to `max-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. + +See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `maxWidth` + +`maxWidth` is the maximum width for this component, in logical pixels. + +It works similarly to `max-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. + +See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `minHeight` + +`minHeight` is the minimum height for this component, in logical pixels. + +It works similarly to `min-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. + +See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `minWidth` + +`minWidth` is the minimum width for this component, in logical pixels. + +It works similarly to `min-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. + +See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `overflow` + +`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents main axis. It works like `overflow` in CSS (default: visible). See https://developer.mozilla.org/en/docs/Web/CSS/overflow for more details. + +| Type | Required | +| ----------------------------------- | -------- | +| enum('visible', 'hidden', 'scroll') | No | + +--- + +### `padding` + +Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingBottom` + +`paddingBottom` works like `padding-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingEnd` + +When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`. When direction is `rtl`, `paddingEnd` is equivalent to `paddingLeft`. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingHorizontal` + +Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRight`. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingLeft` + +`paddingLeft` works like `padding-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingRight` + +`paddingRight` works like `padding-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingStart` + +When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When direction is `rtl`, `paddingStart` is equivalent to `paddingRight`. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingTop` + +`paddingTop` works like `padding-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top for more details. + +| Type | Required | +| --------------- | -------- | +| number, ,string | No | + +--- + +### `paddingVertical` + +Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBottom`. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `position` + +`position` in React Native is similar to regular CSS, but everything is set to `relative` by default, so `absolute` positioning is always relative to the parent. + +If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have `absolute` position. + +If you want to position a child relative to something that is not its parent, don't use styles for that. Use the component tree. + +See https://github.com/facebook/yoga for more details on how `position` differs between React Native and CSS. + +| Type | Required | +| ---------------------------- | -------- | +| enum('absolute', 'relative') | No | + +--- + +### `right` + +`right` is the number of logical pixels to offset the right edge of this component. + +It works similarly to `right` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. + +See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of how `right` affects layout. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `start` + +When the direction is `ltr`, `start` is equivalent to `left`. When the direction is `rtl`, `start` is equivalent to `right`. + +This style takes precedence over the `left`, `right`, and `end` styles. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `top` + +`top` is the number of logical pixels to offset the top edge of this component. + +It works similarly to `top` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. + +See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how `top` affects layout. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `width` + +`width` sets the width of this component. + +It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `zIndex` + +`zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior. + +It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for more details. + +On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected. + +| Type | Required | +| ------ | -------- | +| number | No | + +--- diff --git a/website/versioned_docs/version-0.61/layoutanimation.md b/website/versioned_docs/version-0.61/layoutanimation.md new file mode 100644 index 00000000000..5e81d01f7a4 --- /dev/null +++ b/website/versioned_docs/version-0.61/layoutanimation.md @@ -0,0 +1,179 @@ +--- +id: layoutanimation +title: LayoutAnimation +--- + +Automatically animates views to their new positions when the next layout happens. + +A common way to use this API is to call it before calling `setState`. + +Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`: + +```js +if (Platform.OS === 'android') { + if (UIManager.setLayoutAnimationEnabledExperimental) { + UIManager.setLayoutAnimationEnabledExperimental(true); + } +} +``` + +Example usage: + +```jsx +import React, { Component } from 'react'; +import { + View, + Text, + TouchableOpacity, + Platform, + UIManager +} from 'react-native'; + +if ( + Platform.OS === 'android' && + UIManager.setLayoutAnimationEnabledExperimental +) { + UIManager.setLayoutAnimationEnabledExperimental(true); +} +class AnimatedCollapsible extends React.Component { + state = { expanded: false }; + render() { + return ( + + { + LayoutAnimation.configureNext( + LayoutAnimation.Presets.spring + ); + this.setState({ expanded: !this.state.expanded }); + }}> + + Press me to{' '} + {this.state.expanded ? 'collapse' : 'expand'}! + + + {this.state.expanded && ( + I disappear sometimes! + )} + + ); + } +} +``` + +--- + +# Reference + +## Methods + +### `configureNext()` + +```jsx +static configureNext(config, onAnimationDidEnd?) +``` + +Schedules an animation to happen on the next layout. + +#### Parameters: + +| Name | Type | Required | Description | +| ----------------- | -------- | -------- | ---------------------------------------------------------- | +| config | object | Yes | See config description below. | +| onAnimationDidEnd | function | No | Called when the animation finished. Only supported on iOS. | + +The `config` parameter is an object with the keys below. [`create`](layoutanimation.md#create) returns a valid object for `config`, and the [`Presets`](layoutanimation.md#presets) objects can also all be passed as the `config`. + +- `duration` in milliseconds +- `create`, optional config for animating in new views +- `update`, optional config for animating views that have been updated +- `delete`, optional config for animating views as they are removed + +The config that's passed to `create`, `update`, or `delete` has the following keys: + +- `type`, the [animation type](layoutanimation.md#types) to use +- `property`, the [layout property](layoutanimation.md#properties) to animate (optional, but recommended for `create` and `delete`) +- `springDamping` (number, optional and only for use with `type: Type.spring`) +- `initialVelocity` (number, optional) +- `delay` (number, optional) +- `duration` (number, optional) + +--- + +### `create()` + +```jsx +static create(duration, type, creationProp) +``` + +Helper that creates an object (with `create`, `update`, and `delete` fields) to pass into [`configureNext`](layoutanimation.md#configurenext). The `type` parameter is an [animation type](layoutanimation.md#types), and the `creationProp` parameter is a [layout property](layoutanimation.md#properties). + +Example usage: + +```js +LayoutAnimation.configureNext( + LayoutAnimation.create( + 500, + LayoutAnimation.Types.spring, + LayoutAnimation.Properties.scaleXY + ) +); +``` + +## Properties + +### Types + +An enumeration of animation types to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Types.easeIn`) + +| Types | +| ------------- | +| spring | +| linear | +| easeInEaseOut | +| easeIn | +| easeOut | +| keyboard | + +--- + +### Properties + +An enumeration of layout properties to be animated to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Properties.opacity`) + +| Properties | +| ---------- | +| opacity | +| scaleX | +| scaleY | +| scaleXY | + +--- + +### Presets + +A set of predefined animation configs to pass into [`configureNext`](layoutanimation.md#configurenext). + +| Presets | Value | +| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| easeInEaseOut | `create(300, 'easeInEaseOut', 'opacity')` | +| linear | `create(500, 'linear', 'opacity')` | +| spring | `{ duration: 700, create: { type: 'linear', property: 'opacity' }, update: { type: 'spring', springDamping: 0.4 }, delete: { type: 'linear', property: 'opacity' } }` | + +--- + +### `easeInEaseOut()` + +Calls `configureNext()` with `Presets.easeInEaseOut`. + +--- + +### `linear()` + +Calls `configureNext()` with `Presets.linear`. + +--- + +### `spring()` + +Calls `configureNext()` with `Presets.spring`. diff --git a/website/versioned_docs/version-0.61/libraries.md b/website/versioned_docs/version-0.61/libraries.md new file mode 100644 index 00000000000..3221eb0092d --- /dev/null +++ b/website/versioned_docs/version-0.61/libraries.md @@ -0,0 +1,77 @@ +--- +id: libraries +title: Using Libraries +author: Brent Vatne +authorURL: 'https://twitter.com/notbrent' +description: This guide introduces React Native developers to finding, installing, and using third-party libraries in their apps. +--- + +React Native provides a set of built-in [Core Components and APIs](./components-and-apis) ready to use in your app. You're not limited to the components and APIs bundled with React Native. React Native has a community of thousands of developers. If the Core Components and APIs don't have what you are looking for, you may be able to find and install a library from the community to add the functionality to your app. + +## Selecting a Package Manager + +React Native libraries are typically installed from the [npm registry](https://www.npmjs.com/) using a Node.js package manager such as [npm CLI](https://docs.npmjs.com/cli/npm) or [Yarn Classic](https://classic.yarnpkg.com/en/). + +If you have Node.js installed on your computer then you already have the npm CLI installed. Some developers prefer to use Yarn Classic for slightly faster install times and additional advanced features like Workspaces. Both tools work great with React Native. We will assume npm for the rest of this guide for simplicity of explanation. + +> 💡 The terms "library" and "package" are used interchangably in the JavaScript community. + +## Installing a Library + +To install a library in your project, navigate to your project directory in your terminal and run `npm install `. Let's try this with `react-native-webview`: + +```bash +npm install react-native-webview +``` + +The library that we installed includes native code, and we need to link to our app before we use it. + +## Linking Native Code on iOS + +React Native uses CocoaPods to manage iOS project dependencies and most React Native libraries follow this same convention. If a library you are using does not, then please refer to their README for additional instruction. In most cases, the following instructions will apply. + +Run `pod install` in our `ios` directory in order to link it to our native iOS project. A shortcut for doing this without switching to the `ios` directory is to run `npx pod-install`. + +```bash +npx pod-install +``` + +Once this is complete, re-build the app binary to start using your new library: + +```bash +npx react-native run-ios +``` + +## Linking Native Code on Android + +React Native uses Gradle to manage Android project dependencies. After you install a library with native dependencies, you will need to re-build the app binary to use your new library: + +```bash +npx react-native run-android +``` + +## Finding Libraries + +[React Native Directory](https://reactnative.directory) is a searchable database of libraries built specifically for React Native. This is the first place to look for a library for your React Native app. + +Many of the libraries you will find on the directory are from [React Native Community](https://github.com/react-native-community/) or [Expo](https://docs.expo.io/versions/latest/). + +Libraries built by the React Native Community are driven by volunteers and individuals at companies that depend on React Native. They often support iOS, tvOS, Android, Windows, but this varies across projects. Many of the libraries in this organization were once React Native Core Components and APIs. + +Libraries built by Expo are all written in TypeScript and support iOS, Android, and react-native-web wherever possible. They usually require that you first install [react-native-unimodules](https://github.com/expo/expo/tree/master/packages/react-native-unimodules) in order to use in your React Native app. + +After React Native Directory, the [npm registry](https://www.npmjs.com/) is the next best place if you can't find a library specifically for React Native on the directory. The npm registry is the definitive source for JavaScript libraries, but the libraries that it lists may not all be compatible with React Native. React Native is one of many JavaScript programming environments, including Node.js, web browsers, Electron, and more, and npm includes libraries that work for all of these environments. + +## Determining Library Compatibility + +### Does it work with React Native? + +Usually libraries built _specifically for other platforms_ will not work with React Native. Examples include `react-select` which is built for the web and specifically targets `react-dom`, and `rimraf` which is built for Node.js and interacts with your computer file system. Other libraries like `lodash` use only JavaScript language features and work in any environment. You will gain a sense for this over time, but until then the easiest way to find out is to try it yourself. You can remove packages using `npm uninstall` if it turns out that it does not work in React Native. + +### Does it work for the platforms that my app supports? + +[React Native Directory](https://reactnative.directory) allows you to filter by platform compatibility, such as iOS, Android, Web, and Windows. If the library you would like to use is not currently listed there, refer to the README for the library to learn more. + +### Does it work with my app version of React Native? + +The latest version of a library is typically compatible with the latest version of React Native. If you are using an older version, you should refer to the README to know which version of the library you should install. You can install a particular version of the library by running `npm install @`, for example: `npm install @react-native-community/netinfo@^2.0.0`. diff --git a/website/versioned_docs/version-0.61/linking-libraries-ios.md b/website/versioned_docs/version-0.61/linking-libraries-ios.md new file mode 100644 index 00000000000..4862211e5f7 --- /dev/null +++ b/website/versioned_docs/version-0.61/linking-libraries-ios.md @@ -0,0 +1,64 @@ +--- +id: linking-libraries-ios +title: Linking Libraries +--- + +Not every app uses all the native capabilities, and including the code to support all those features would impact the binary size... But we still want to support these features whenever you need them. + +With that in mind we exposed many of these features as independent static libraries. + +For most of the libs it will be as quick as dragging two files, sometimes a third step will be necessary, but no more than that. + +_All the libraries we ship with React Native live on the `Libraries` folder in the root of the repository. Some of them are pure JavaScript, and you only need to `require` it. Other libraries also rely on some native code, in that case you'll have to add these files to your app, otherwise the app will throw an error as soon as you try to use the library._ + +## Here are the few steps to link your libraries that contain native code + +### Automatic linking + +#### Step 1 + +Install a library with native dependencies: + +```bash +$ npm install --save +``` + +> **_Note:_** `--save` or `--save-dev` flag is very important for this step. React Native will link your libs based on `dependencies` and `devDependencies` in your `package.json` file. + +#### Step 2 + +Link your native dependencies: + +```bash +$ react-native link +``` + +Done! All libraries with native dependencies should be successfully linked to your iOS/Android project. + +> **_Note:_** If your iOS project is using CocoaPods (contains `Podfile`) and linked library has `podspec` file, then `react-native link` will link library using Podfile. To support non-trivial Podfiles add `# Add new pods below this line` comment to places where you expect pods to be added. + +### Manual linking + +#### Step 1 + +If the library has native code, there must be an `.xcodeproj` file inside its folder. Drag this file to your project on Xcode (usually under the `Libraries` group on Xcode); + +![](/docs/assets/AddToLibraries.png) + +#### Step 2 + +Click on your main project file (the one that represents the `.xcodeproj`) select `Build Phases` and drag the static library from the `Products` folder inside the Library you are importing to `Link Binary With Libraries` + +![](/docs/assets/AddToBuildPhases.png) + +#### Step 3 + +Not every library will need this step, what you need to consider is: + +_Do I need to know the contents of the library at compile time?_ + +What that means is, are you using this library on the native side or only in JavaScript? If you are only using it in JavaScript, you are good to go! + +If you do need to call it from native, then we need to know the library's headers. To achieve that you have to go to your project's file, select `Build Settings` and search for `Header Search Paths`. There you should include the path to your library. (This documentation used to recommend using `recursive`, but this is no longer recommended, as it can cause subtle build failures, especially with CocoaPods.) + +![](/docs/assets/AddToSearchPaths.png) diff --git a/website/versioned_docs/version-0.61/linking.md b/website/versioned_docs/version-0.61/linking.md new file mode 100644 index 00000000000..21758cc23a2 --- /dev/null +++ b/website/versioned_docs/version-0.61/linking.md @@ -0,0 +1,235 @@ +--- +id: linking +title: Linking +--- + + + +`Linking` gives you a general interface to interact with both incoming and outgoing app links. + +### Basic Usage + +#### Handling deep links + +If your app was launched from an external url registered to your app you can access and handle it from any component you want with: + +```jsx +componentDidMount() { + Linking.getInitialURL().then((url) => { + if (url) { + console.log('Initial url is: ' + url); + } + }).catch(err => console.error('An error occurred', err)); +} +``` + +> For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters). + +If you wish to receive the intent in an existing instance of MainActivity, you may set the `launchMode` of MainActivity to `singleTask` in `AndroidManifest.xml`. See [``](http://developer.android.com/guide/topics/manifest/activity-element.html) documentation for more information. + +```xml + +``` + +NOTE: On iOS, you'll need to link `RCTLinking` to your project by following the steps described [here](linking-libraries-ios.md#manual-linking). If you also want to listen to incoming app links during your app's execution, you'll need to add the following lines to your `*AppDelegate.m`: + +```objectivec +// iOS 9.x or newer +#import + +- (BOOL)application:(UIApplication *)application + openURL:(NSURL *)url + options:(NSDictionary *)options +{ + return [RCTLinkingManager application:application openURL:url options:options]; +} +``` + +If you're targeting iOS 8.x or older, you can use the following code instead: + +```objectivec +// iOS 8.x or older +#import + +- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url + sourceApplication:(NSString *)sourceApplication annotation:(id)annotation +{ + return [RCTLinkingManager application:application openURL:url + sourceApplication:sourceApplication annotation:annotation]; +} +``` + +If your app is using [Universal Links](https://developer.apple.com/library/prerelease/ios/documentation/General/Conceptual/AppSearch/UniversalLinks.html), you'll need to add the following code as well: + +```objectivec +- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity + restorationHandler:(nonnull void (^)(NSArray> * _Nullable))restorationHandler +{ + return [RCTLinkingManager application:application + continueUserActivity:userActivity + restorationHandler:restorationHandler]; +} +``` + +And then on your React component you'll be able to listen to the events on `Linking` as follows: + +```jsx +componentDidMount() { + Linking.addEventListener('url', this._handleOpenURL); +}, +componentWillUnmount() { + Linking.removeEventListener('url', this._handleOpenURL); +}, +_handleOpenURL(event) { + console.log(event.url); +} +``` + +#### Opening external links + +To start the corresponding activity for a link (web URL, email, contact etc.), call: + +```jsx +Linking.openURL(url).catch((err) => + console.error('An error occurred', err) +); +``` + +If you want to check if any installed app can handle a given URL beforehand you can call: + +```jsx +Linking.canOpenURL(url) + .then((supported) => { + if (!supported) { + console.log("Can't handle url: " + url); + } else { + return Linking.openURL(url); + } + }) + .catch((err) => console.error('An error occurred', err)); +``` + +--- + +# Reference + +## Methods + +### `constructor()` + +```jsx +constructor(); +``` + +--- + +### `addEventListener()` + +```jsx +addEventListener(type, handler); +``` + +Add a handler to Linking changes by listening to the `url` event type and providing the handler. + +--- + +### `removeEventListener()` + +```jsx +removeEventListener(type, handler); +``` + +Remove a handler by passing the `url` event type and the handler. + +--- + +### `openURL()` + +```jsx +openURL(url); +``` + +Try to open the given `url` with any of the installed apps. + +You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386" on Android or "http://maps.apple.com/?ll=37.484847,-122.148386" on iOS), a contact, or any other URL that can be opened with the installed apps. + +The method returns a `Promise` object. If the user confirms the open dialog or the url automatically opens, the promise is resolved. If the user cancels the open dialog or there are no registered applications for the url, the promise is rejected. + +**Parameters:** + +| Name | Type | Required | Description | +| ---- | ------ | -------- | ---------------- | +| url | string | Yes | The URL to open. | + +> This method will fail if the system doesn't know how to open the specified URL. If you're passing in a non-http(s) URL, it's best to check {@code canOpenURL} first. + +> For web URLs, the protocol ("http://", "https://") must be set accordingly! + +--- + +### `canOpenURL()` + +```jsx +canOpenURL(url); +``` + +Determine whether or not an installed app can handle a given URL. + +The method returns a `Promise` object. When it is determined whether or not the given URL can be handled, the promise is resolved and the first parameter is whether or not it can be opened. + +The `Promise` will reject on Android if it was impossible to check if the URL can be opened, and on iOS if you didn't add the specific scheme in the `LSApplicationQueriesSchemes` key inside `Info.plist` (see bellow). + +**Parameters:** + +| Name | Type | Required | Description | +| ---- | ------ | -------- | ---------------- | +| url | string | Yes | The URL to open. | + +> For web URLs, the protocol ("http://", "https://") must be set accordingly! + +> As of iOS 9, your app needs to provide the `LSApplicationQueriesSchemes` key inside `Info.plist` or canOpenURL will always return false. + +> This method has limitations on iOS 9+. From [the official Apple documentation](https://developer.apple.com/documentation/uikit/uiapplication/1622952-canopenurl): + +> If your app is linked against an earlier version of iOS but is running in iOS 9.0 or later, you can call this method up to 50 times. After reaching that limit, subsequent calls always return false. If the user reinstalls or upgrades the app, iOS resets the limit. + +--- + +### `openSettings()` + +```jsx +openSettings(); +``` + +Open the Settings app and displays the app’s custom settings, if it has any. + +--- + +### `getInitialURL()` + +```jsx +getInitialURL(); +``` + +If the app launch was triggered by an app link, it will give the link url, otherwise it will give `null`. + +> To support deep linking on Android, refer http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents + +--- + +### `sendIntent()` + +```jsx +sendIntent(action: string, extras?: Array<{key: string, value: string | number | boolean}>) +``` + +> @platform android + +**Android-Only.** Launch an Android intent with extras (optional) diff --git a/website/versioned_docs/version-0.61/listview.md b/website/versioned_docs/version-0.61/listview.md new file mode 100644 index 00000000000..8fde18ede0c --- /dev/null +++ b/website/versioned_docs/version-0.61/listview.md @@ -0,0 +1,300 @@ +--- +id: listview +title: ListView +--- + +DEPRECATED - use one of the new list components, such as [`FlatList`](flatlist.md) or [`SectionList`](sectionlist.md) for bounded memory use, fewer bugs, better performance, an easier to use API, and more features. Check out this [blog post](/blog/2017/03/13/better-list-views) for more details. + +ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a [`ListView.DataSource`](/docs/listviewdatasource.html), populate it with a flat array of data blobs, and instantiate a `ListView` component with that data source and a `renderRow` callback which takes a blob from the data array and returns a renderable component. + +Minimal example: + +```jsx +class MyComponent extends Component { + constructor() { + super(); + const ds = new ListView.DataSource({ + rowHasChanged: (r1, r2) => r1 !== r2 + }); + this.state = { + dataSource: ds.cloneWithRows(['row 1', 'row 2']) + }; + } + + render() { + return ( + {rowData}} + /> + ); + } +} +``` + +ListView also supports more advanced features, including sections with sticky section headers, header and footer support, callbacks on reaching the end of the available data (`onEndReached`) and on the set of rows that are visible in the device viewport change (`onChangeVisibleRows`), and several performance optimizations. + +There are a few performance operations designed to make ListView scroll smoothly while dynamically loading potentially very large (or conceptually infinite) data sets: + +- Only re-render changed rows - the rowHasChanged function provided to the data source tells the ListView if it needs to re-render a row because the source data has changed - see ListViewDataSource for more details. + +- Rate-limited row rendering - By default, only one row is rendered per event-loop (customizable with the `pageSize` prop). This breaks up the work into smaller chunks to reduce the chance of dropping frames while rendering rows. + +### Props + +- [ScrollView props...](scrollview.md#props) + +* [`dataSource`](listview.md#datasource) +* [`initialListSize`](listview.md#initiallistsize) +* [`onEndReachedThreshold`](listview.md#onendreachedthreshold) +* [`pageSize`](listview.md#pagesize) +* [`renderRow`](listview.md#renderrow) +* [`renderScrollComponent`](listview.md#renderscrollcomponent) +* [`scrollRenderAheadDistance`](listview.md#scrollrenderaheaddistance) +* [`stickyHeaderIndices`](listview.md#stickyheaderindices) +* [`enableEmptySections`](listview.md#enableemptysections) +* [`renderHeader`](listview.md#renderheader) +* [`onEndReached`](listview.md#onendreached) +* [`stickySectionHeadersEnabled`](listview.md#stickysectionheadersenabled) +* [`renderSectionHeader`](listview.md#rendersectionheader) +* [`renderSeparator`](listview.md#renderseparator) +* [`onChangeVisibleRows`](listview.md#onchangevisiblerows) +* [`removeClippedSubviews`](listview.md#removeclippedsubviews) +* [`renderFooter`](listview.md#renderfooter) + +### Methods + +- [`getMetrics`](listview.md#getmetrics) +- [`scrollTo`](listview.md#scrollto) +- [`scrollToEnd`](listview.md#scrolltoend) +- [`flashScrollIndicators`](listview.md#flashscrollindicators) + +--- + +# Reference + +## Props + +### `dataSource` + +An instance of [ListView.DataSource](listviewdatasource.md) to use + +| Type | Required | +| ------------------ | -------- | +| ListViewDataSource | Yes | + +--- + +### `initialListSize` + +How many rows to render on initial component mount. Use this to make it so that the first screen worth of data appears at one time instead of over the course of multiple frames. + +| Type | Required | +| ------ | -------- | +| number | Yes | + +--- + +### `onEndReachedThreshold` + +Threshold in pixels (virtual, not physical) for calling onEndReached. + +| Type | Required | +| ------ | -------- | +| number | Yes | + +--- + +### `pageSize` + +Number of rows to render per event loop. Note: if your 'rows' are actually cells, i.e. they don't span the full width of your view (as in the ListViewGridLayoutExample), you should set the pageSize to be a multiple of the number of cells per row, otherwise you're likely to see gaps at the edge of the ListView as new pages are loaded. + +| Type | Required | +| ------ | -------- | +| number | Yes | + +--- + +### `renderRow` + +(rowData, sectionID, rowID, highlightRow) => renderable + +Takes a data entry from the data source and its ids and should return a renderable component to be rendered as the row. By default the data is exactly what was put into the data source, but it's also possible to provide custom extractors. ListView can be notified when a row is being highlighted by calling `highlightRow(sectionID, rowID)`. This sets a boolean value of adjacentRowHighlighted in renderSeparator, allowing you to control the separators above and below the highlighted row. The highlighted state of a row can be reset by calling highlightRow(null). + +| Type | Required | +| -------- | -------- | +| function | Yes | + +--- + +### `renderScrollComponent` + +(props) => renderable + +A function that returns the scrollable component in which the list rows are rendered. Defaults to returning a ScrollView with the given props. + +| Type | Required | +| -------- | -------- | +| function | Yes | + +--- + +### `scrollRenderAheadDistance` + +How early to start rendering rows before they come on screen, in pixels. + +| Type | Required | +| ------ | -------- | +| number | Yes | + +--- + +### `stickyHeaderIndices` + +An array of child indices determining which children get docked to the top of the screen when scrolling. For example, passing `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction with `horizontal={true}`. + +| Type | Required | +| --------------- | -------- | +| array of number | Yes | + +--- + +### `enableEmptySections` + +Flag indicating whether empty section headers should be rendered. In the future release empty section headers will be rendered by default, and the flag will be deprecated. If empty sections are not desired to be rendered their indices should be excluded from sectionID object. + +| Type | Required | +| ---- | -------- | +| bool | No | + +--- + +### `renderHeader` + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + +### `onEndReached` + +Called when all rows have been rendered and the list has been scrolled to within onEndReachedThreshold of the bottom. The native scroll event is provided. + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + +### `stickySectionHeadersEnabled` + +Makes the sections headers sticky. The sticky behavior means that it will scroll with the content at the top of the section until it reaches the top of the screen, at which point it will stick to the top until it is pushed off the screen by the next section header. This property is not supported in conjunction with `horizontal={true}`. Only enabled by default on iOS because of typical platform standards. + +| Type | Required | +| ---- | -------- | +| bool | No | + +--- + +### `renderSectionHeader` + +(sectionData, sectionID) => renderable + +If provided, a header is rendered for this section. + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + +### `renderSeparator` + +(sectionID, rowID, adjacentRowHighlighted) => renderable + +If provided, a renderable component to be rendered as the separator below each row but not the last row if there is a section header below. Take a sectionID and rowID of the row above and whether its adjacent row is highlighted. + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + +### `onChangeVisibleRows` + +(visibleRows, changedRows) => void + +Called when the set of visible rows changes. `visibleRows` maps { sectionID: { rowID: true }} for all the visible rows, and `changedRows` maps { sectionID: { rowID: true | false }} for the rows that have changed their visibility, with true indicating visible, and false indicating the view has moved out of view. + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + +### `removeClippedSubviews` + +A performance optimization for improving scroll perf of large lists, used in conjunction with overflow: 'hidden' on the row containers. This is enabled by default. + +| Type | Required | +| ---- | -------- | +| bool | No | + +--- + +### `renderFooter` + +() => renderable + +The header and footer are always rendered (if these props are provided) on every render pass. If they are expensive to re-render, wrap them in StaticContainer or other mechanism as appropriate. Footer is always at the bottom of the list, and header at the top, on every render pass. In a horizontal ListView, the header is rendered on the left and the footer on the right. + +| Type | Required | +| -------- | -------- | +| function | No | + +## Methods + +### `getMetrics()` + +```jsx +getMetrics(); +``` + +Exports some data, e.g. for perf investigations or analytics. + +--- + +### `scrollTo()` + +```jsx +scrollTo(...args: Array) +``` + +Scrolls to a given x, y offset, either immediately or with a smooth animation. + +See `ScrollView#scrollTo`. + +--- + +### `scrollToEnd()` + +```jsx +scrollToEnd(([options]: object)); +``` + +If this is a vertical ListView scrolls to the bottom. If this is a horizontal ListView scrolls to the right. + +Use `scrollToEnd({animated: true})` for smooth animated scrolling, `scrollToEnd({animated: false})` for immediate scrolling. If no options are passed, `animated` defaults to true. + +See `ScrollView#scrollToEnd`. + +--- + +### `flashScrollIndicators()` + +```jsx +flashScrollIndicators(); +``` + +Displays the scroll indicators momentarily. diff --git a/website/versioned_docs/version-0.61/listviewdatasource.md b/website/versioned_docs/version-0.61/listviewdatasource.md new file mode 100644 index 00000000000..4e6d96f08c1 --- /dev/null +++ b/website/versioned_docs/version-0.61/listviewdatasource.md @@ -0,0 +1,204 @@ +--- +id: listviewdatasource +title: ListViewDataSource +--- + +Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as flat as an array of strings, or an object with rows nested inside section objects. + +To update the data in the datasource, use `cloneWithRows` (or `cloneWithRowsAndSections` if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods take in the new data and compute a diff for each row so ListView knows whether to re-render it or not. + +In this example, a component receives data in chunks, handled by `_onDataArrived`, which concats the new data onto the old data and updates the data source. We use `concat` to create a new array - mutating `this._data`, e.g. with `this._data.push(newRowData)`, would be an error. `_rowHasChanged` understands the shape of the row data and knows how to efficiently compare it. + +```jsx +getInitialState: function() { + var ds = new ListView.DataSource({rowHasChanged: this._rowHasChanged}); + return {ds}; +}, +_onDataArrived(newData) { + this._data = this._data.concat(newData); + this.setState({ + ds: this.state.ds.cloneWithRows(this._data) + }); +} +``` + +### Methods + +- [`constructor`](listviewdatasource.md#constructor) +- [`cloneWithRows`](listviewdatasource.md#clonewithrows) +- [`cloneWithRowsAndSections`](listviewdatasource.md#clonewithrowsandsections) +- [`getRowCount`](listviewdatasource.md#getrowcount) +- [`getRowAndSectionCount`](listviewdatasource.md#getrowandsectioncount) +- [`rowShouldUpdate`](listviewdatasource.md#rowshouldupdate) +- [`getRowData`](listviewdatasource.md#getrowdata) +- [`getRowIDForFlatIndex`](listviewdatasource.md#getrowidforflatindex) +- [`getSectionIDForFlatIndex`](listviewdatasource.md#getsectionidforflatindex) +- [`getSectionLengths`](listviewdatasource.md#getsectionlengths) +- [`sectionHeaderShouldUpdate`](listviewdatasource.md#sectionheadershouldupdate) +- [`getSectionHeaderData`](listviewdatasource.md#getsectionheaderdata) + +--- + +# Reference + +## Methods + +### `constructor()` + +```jsx +constructor(params); +``` + +You can provide custom extraction and `hasChanged` functions for section headers and rows. If absent, data will be extracted with the `defaultGetRowData` and `defaultGetSectionHeaderData` functions. + +The default extractor expects data of one of the following forms: + + { sectionID_1: { rowID_1: , ... }, ... } + +or + + { sectionID_1: [ , , ... ], ... } + +or + + [ [ , , ... ], ... ] + +The constructor takes in a params argument that can contain any of the following: + +- getRowData(dataBlob, sectionID, rowID); +- getSectionHeaderData(dataBlob, sectionID); +- rowHasChanged(prevRowData, nextRowData); +- sectionHeaderHasChanged(prevSectionData, nextSectionData); + +--- + +### `cloneWithRows()` + +```jsx +cloneWithRows(dataBlob, rowIdentities); +``` + +Clones this `ListViewDataSource` with the specified `dataBlob` and `rowIdentities`. The `dataBlob` an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used). + +The `rowIdentities` is a 2D array of identifiers for rows. ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...]. If not provided, it's assumed that the keys of the section data are the row identities. + +Note: This function does NOT clone the data in this data source. It only passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the `dataBlob`. + +--- + +### `cloneWithRowsAndSections()` + +```jsx +cloneWithRowsAndSections( + dataBlob, + sectionIdentities, + rowIdentities +); +``` + +This performs the same function as the `cloneWithRows` function but here you also specify what your `sectionIdentities` are. If you don't care about sections you should safely be able to use `cloneWithRows`. + +`sectionIdentities` is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities. + +Note: this returns a new object! + +``` +const dataSource = ds.cloneWithRowsAndSections({ + addresses: ['row 1', 'row 2'], + phone_numbers: ['data 1', 'data 2'], +}, ['phone_numbers']); +``` + +--- + +### `getRowCount()` + +```jsx +getRowCount(); +``` + +Returns the total number of rows in the data source. + +If you are specifying the rowIdentities or sectionIdentities, then `getRowCount` will return the number of rows in the filtered data source. + +--- + +### `getRowAndSectionCount()` + +```jsx +getRowAndSectionCount(); +``` + +Returns the total number of rows in the data source (see `getRowCount` for how this is calculated) plus the number of sections in the data. + +If you are specifying the rowIdentities or sectionIdentities, then `getRowAndSectionCount` will return the number of rows & sections in the filtered data source. + +--- + +### `rowShouldUpdate()` + +```jsx +rowShouldUpdate(sectionIndex, rowIndex); +``` + +Returns if the row is dirtied and needs to be rerendered + +--- + +### `getRowData()` + +```jsx +getRowData(sectionIndex, rowIndex); +``` + +Gets the data required to render the row. + +--- + +### `getRowIDForFlatIndex()` + +```jsx +getRowIDForFlatIndex(index); +``` + +Gets the rowID at index provided if the dataSource arrays were flattened, or null of out of range indexes. + +--- + +### `getSectionIDForFlatIndex()` + +```jsx +getSectionIDForFlatIndex(index); +``` + +Gets the sectionID at index provided if the dataSource arrays were flattened, or null for out of range indexes. + +--- + +### `getSectionLengths()` + +```jsx +getSectionLengths(); +``` + +Returns an array containing the number of rows in each section + +--- + +### `sectionHeaderShouldUpdate()` + +```jsx +sectionHeaderShouldUpdate(sectionIndex); +``` + +Returns if the section header is dirtied and needs to be rerendered + +--- + +### `getSectionHeaderData()` + +```jsx +getSectionHeaderData(sectionIndex); +``` + +Gets the data required to render the section header diff --git a/website/versioned_docs/version-0.61/maskedviewios.md b/website/versioned_docs/version-0.61/maskedviewios.md new file mode 100644 index 00000000000..c7291e0097f --- /dev/null +++ b/website/versioned_docs/version-0.61/maskedviewios.md @@ -0,0 +1,91 @@ +--- +id: maskedviewios +title: '🚧 MaskedViewIOS' +--- + +> **Deprecated.** Use [@react-native-community/masked-view](https://github.com/react-native-community/react-native-masked-view) instead. + +Renders the child view with a mask specified in the `maskElement` prop. + +## Example + +```jsx +import React from 'react'; +import { MaskedViewIOS, Text, View } from 'react-native'; + +class MyMaskedView extends React.Component { + render() { + return ( + // Determines shape of the mask + + + Basic Mask + + + }> + {/* Shows behind the mask, you can put anything here, such as an image */} + + + + + ); + } +} +``` + +The following image demonstrates that you can put almost anything behind the mask. The three examples shown are masked ``, ``, and ``. + +
+ +**The alpha channel of the view rendered by the `maskElement` prop determines how much of the view's content and background shows through.** Fully or partially opaque pixels allow the underlying content to show through but fully transparent pixels block that content. + +### Props + +- [View props...](view.md#props) + +* [`maskElement`](maskedviewios.md#maskelement) + +--- + +# Reference + +## Props + +### `maskElement` + +| Type | Required | +| ------- | -------- | +| element | Yes | diff --git a/website/versioned_docs/version-0.61/modal.md b/website/versioned_docs/version-0.61/modal.md new file mode 100644 index 00000000000..01555a4b4cb --- /dev/null +++ b/website/versioned_docs/version-0.61/modal.md @@ -0,0 +1,187 @@ +--- +id: modal +title: Modal +--- + +The Modal component is a basic way to present content above an enclosing view. + +> Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator. + +```jsx +import React, { Component } from 'react'; +import { + Modal, + Text, + TouchableHighlight, + View, + Alert +} from 'react-native'; + +class ModalExample extends Component { + state = { + modalVisible: false + }; + + setModalVisible(visible) { + this.setState({ modalVisible: visible }); + } + + render() { + return ( + + { + Alert.alert('Modal has been closed.'); + }}> + + + Hello World! + + { + this.setModalVisible(!this.state.modalVisible); + }}> + Hide Modal + + + + + + { + this.setModalVisible(true); + }}> + Show Modal + + + ); + } +} +``` + +--- + +# Reference + +## Props + +### `visible` + +The `visible` prop determines whether your modal is visible. + +| Type | Required | +| ---- | -------- | +| bool | No | + +--- + +### `supportedOrientations` + +The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations. On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field. When using `presentationStyle` of `pageSheet` or `formSheet`, this property will be ignored by iOS. + +| Type | Required | Platform | +| --------------------------------------------------------------------------------------------------- | -------- | -------- | +| array of enum('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right') | No | iOS | + +--- + +### `onRequestClose` + +The `onRequestClose` callback is called when the user taps the hardware back button on Android or the menu button on Apple TV. Because of this required prop, be aware that `BackHandler` events will not be emitted as long as the modal is open. + +| Type | Required | Platform | +| -------- | -------- | ------------------------ | +| function | Yes | Android, Platform.isTVOS | +| function | No | (Others) | + +--- + +### `onShow` + +The `onShow` prop allows passing a function that will be called once the modal has been shown. + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + +### `transparent` + +The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background. + +| Type | Required | +| ---- | -------- | +| bool | No | + +--- + +### `animationType` + +The `animationType` prop controls how the modal animates. + +- `slide` slides in from the bottom +- `fade` fades into view +- `none` appears without an animation + +Default is set to `none`. + +| Type | Required | +| ----------------------------- | -------- | +| enum('none', 'slide', 'fade') | No | + +--- + +### `hardwareAccelerated` + +The `hardwareAccelerated` prop controls whether to force hardware acceleration for the underlying window. + +| Type | Required | Platform | +| ---- | -------- | -------- | +| bool | No | Android | + +--- + +### `onDismiss` + +The `onDismiss` prop allows passing a function that will be called once the modal has been dismissed. + +| Type | Required | Platform | +| -------- | -------- | -------- | +| function | No | iOS | + +--- + +### `onOrientationChange` + +The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed. The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation. + +| Type | Required | Platform | +| -------- | -------- | -------- | +| function | No | iOS | + +--- + +### `presentationStyle` + +The `presentationStyle` prop controls how the modal appears (generally on larger devices such as iPad or plus-sized iPhones). See https://developer.apple.com/reference/uikit/uimodalpresentationstyle for details. + +- `fullScreen` covers the screen completely +- `pageSheet` covers portrait-width view centered (only on larger devices) +- `formSheet` covers narrow-width view centered (only on larger devices) +- `overFullScreen` covers the screen completely, but allows transparency + +Default is set to `overFullScreen` or `fullScreen` depending on `transparent` property. + +| Type | Required | Platform | +| -------------------------------------------------------------- | -------- | -------- | +| enum('fullScreen', 'pageSheet', 'formSheet', 'overFullScreen') | No | iOS | + +--- + +### `animated` + +> **Deprecated.** Use the [`animationType`](modal.md#animationtype) prop instead. diff --git a/website/versioned_docs/version-0.61/more-resources.md b/website/versioned_docs/version-0.61/more-resources.md new file mode 100644 index 00000000000..8cc3ef11d43 --- /dev/null +++ b/website/versioned_docs/version-0.61/more-resources.md @@ -0,0 +1,43 @@ +--- +id: more-resources +title: More Resources +--- + +If you only read through this website, you should be able to build a pretty cool React Native app. But React Native isn't a product made by one company - it's a community of thousands of developers. So if you're interested in React Native, here's some related stuff you might want to check out. + +## Popular Libraries + +If you're using React Native, you probably already know about [React](https://reactjs.org/). So I feel a bit silly mentioning this. But if you haven't, check out React - it's the best way to build a modern website. + +One common question is how to handle the "state" of your React Native application. The most popular library for this is [Redux](http://redux.js.org/). Don't be afraid of how often Redux uses the word "reducer" - it's a pretty basic library, and there's also a nice [series of videos](https://egghead.io/courses/getting-started-with-redux) explaining it. + +If you're looking for a library that does a specific thing, check out [Awesome React Native](http://www.awesome-react-native.com/), a curated list of components that also has demos, articles, and other stuff. + +## Examples + +Try out apps from the [Showcase](/showcase/) to see what React Native is capable of! There are also some [example apps on GitHub](https://github.com/ReactNativeNews/React-Native-Apps). You can run the apps on a simulator or device, and you can see the source code for these apps, which is neat. + +The folks who built the app for Facebook's F8 conference also [open-sourced the code](https://github.com/fbsamples/f8app) and wrote up a [detailed series of tutorials](http://makeitopen.com/). This is useful if you want a more in-depth example that's more realistic than most sample apps out there. + +## Extending React Native + +- Developers write and publish React Native modules to npm and open source them on GitHub. +- Making modules helps grow the React Native ecosystem and community. We recommend writing modules for your use cases and sharing them on npm. +- Read the guides on Native Modules ([iOS](native-modules-ios.md), [Android](native-modules-android.md)) and Native UI Components ([iOS](native-components-ios.md), [Android](native-components-android.md)) if you are interested in extending native functionality. +- Looking for a pre-built component? Check [JS.coach](https://js.coach/react-native) or [Native Directory](https://www.native.directory) to find what the community has been creating. + +## Development Tools + +[Nuclide](https://nuclide.io/) is the IDE that Facebook uses internally for JavaScript development. The killer feature of Nuclide is its debugging ability. It also has great inline Flow support. [VS Code](https://code.visualstudio.com/) is another IDE that is popular with JavaScript developers. + +[Ignite](https://github.com/infinitered/ignite) is a starter kit that uses Redux and a few different common UI libraries. It has a CLI to generate apps, components, and containers. If you like all of the individual tech choices, Ignite could be perfect for you. + +[App Center](https://appcenter.ms/signup?utm_source=Facebook%20React%20Native&utm_medium=Azure&utm_campaign=GitHub) is a service from Microsoft that allows you to deploy live updates to your React Native app. If you don't like going through the app store process to deploy little tweaks, and you also don't like setting up your own backend, give [App Center](https://appcenter.ms/signup?utm_source=Facebook%20React%20Native&utm_medium=Azure&utm_campaign=GitHub) a try. + +[Expo](https://docs.expo.io) is a development environment plus application that focuses on letting you build React Native apps in the Expo development environment, without ever touching Xcode or Android Studio. If you wish React Native was even more JavaScripty and webby, check out Expo. + +[Yoga](https://yogalayout.com/) is a stand-alone layout engine that extends beyond React Native and allows product engineers to build layouts quickly for multiple platforms with a highly optimized open source layout engine designed with speed, size, and ease of use in mind. + +[Bugsnag](https://www.bugsnag.com/), [Microsoft App Center](https://appcenter.ms/signup?utm_source=Facebook%20React%20Native&utm_medium=Azure&utm_campaign=GitHub), and [Sentry](https://sentry.io/welcome/) all provide excellent crash and error monitoring services for React and React Native apps. These services allow you to proactively monitor crashes and issues occurring on your apps in real time so you can fix them quickly and improve user experience. + +The [React Developer Tools](debugging.md#react-developer-tools) are great for debugging React and React Native apps. diff --git a/website/versioned_docs/version-0.61/native-components-android.md b/website/versioned_docs/version-0.61/native-components-android.md new file mode 100644 index 00000000000..16cd029f3b9 --- /dev/null +++ b/website/versioned_docs/version-0.61/native-components-android.md @@ -0,0 +1,187 @@ +--- +id: native-components-android +title: Native UI Components +--- + +There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application. + +Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with Android SDK programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing `ImageView` component available in the core React Native library. + +## ImageView example + +For this example we are going to walk through the implementation requirements to allow the use of ImageViews in JavaScript. + +Native views are created and manipulated by extending `ViewManager` or more commonly `SimpleViewManager` . A `SimpleViewManager` is convenient in this case because it applies common properties such as background color, opacity, and Flexbox layout. + +These subclasses are essentially singletons - only one instance of each is created by the bridge. They vend native views to the `NativeViewHierarchyManager`, which delegates back to them to set and update the properties of the views as necessary. The `ViewManagers` are also typically the delegates for the views, sending events back to JavaScript via the bridge. + +To vend a view: + +1. Create the ViewManager subclass. +2. Implement the `createViewInstance` method +3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation +4. Register the manager in `createViewManagers` of the applications package. +5. Implement the JavaScript module + +## 1. Create the `ViewManager` subclass + +In this example we create view manager class `ReactImageManager` that extends `SimpleViewManager` of type `ReactImageView`. `ReactImageView` is the type of object managed by the manager, this will be the custom native view. Name returned by `getName` is used to reference the native view type from JavaScript. + +```java +... + +public class ReactImageManager extends SimpleViewManager { + + public static final String REACT_CLASS = "RCTImageView"; + + @Override + public String getName() { + return REACT_CLASS; + } +``` + +## 2. Implement method `createViewInstance` + +Views are created in the `createViewInstance` method, the view should initialize itself in its default state, any properties will be set via a follow up call to `updateView.` + +```java + @Override + public ReactImageView createViewInstance(ThemedReactContext context) { + return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), mCallerContext); + } +``` + +## 3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation + +Properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with `@ReactProp` (or `@ReactPropGroup`). Setter method should take view to be updated (of the current view type) as a first argument and property value as a second argument. Setter should be declared as a `void` method and should be `public`. Property type sent to JS is determined automatically based on the type of value argument of the setter. The following type of values are currently supported: `boolean`, `int`, `float`, `double`, `String`, `Boolean`, `Integer`, `ReadableArray`, `ReadableMap`. + +Annotation `@ReactProp` has one obligatory argument `name` of type `String`. Name assigned to the `@ReactProp` annotation linked to the setter method is used to reference the property on JS side. + + + +Except from `name`, `@ReactProp` annotation may take following optional arguments: `defaultBoolean`, `defaultInt`, `defaultFloat`. Those arguments should be of the corresponding type (accordingly `boolean`, `int`, `float`) and the value provided will be passed to the setter method in case when the property that the setter is referencing has been removed from the component. Note that "default" values are only provided for primitive types, in case when setter is of some complex type, `null` will be provided as a default value in case when corresponding property gets removed. + +Setter declaration requirements for methods annotated with `@ReactPropGroup` are different than for `@ReactProp`, please refer to the `@ReactPropGroup` annotation class docs for more information about it. + + + +**IMPORTANT!** in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" can value can be specified using `defaultBoolean`, `defaultFloat`, etc. arguments of `@ReactProp` annotation, for complex types setter will be called with value set to `null`). + +```java + @ReactProp(name = "src") + public void setSrc(ReactImageView view, @Nullable ReadableArray sources) { + view.setSource(sources); + } + + @ReactProp(name = "borderRadius", defaultFloat = 0f) + public void setBorderRadius(ReactImageView view, float borderRadius) { + view.setBorderRadius(borderRadius); + } + + @ReactProp(name = ViewProps.RESIZE_MODE) + public void setResizeMode(ReactImageView view, @Nullable String resizeMode) { + view.setScaleType(ImageResizeMode.toScaleType(resizeMode)); + } +``` + +## 4. Register the `ViewManager` + +The final Java step is to register the ViewManager to the application, this happens in a similar way to [Native Modules](native-modules-android.md), via the applications package member function `createViewManagers.` + +```java + @Override + public List createViewManagers( + ReactApplicationContext reactContext) { + return Arrays.asList( + new ReactImageManager() + ); + } +``` + +## 5. Implement the JavaScript module + +The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments). + +```jsx +// ImageView.js + +import { requireNativeComponent } from 'react-native'; + +/** + * Composes `View`. + * + * - src: string + * - borderRadius: number + * - resizeMode: 'cover' | 'contain' | 'stretch' + */ +module.exports = requireNativeComponent('RCTImageView'); +``` + +The `requireNativeComponent` function takes the name of the native view. Note that if your component needs to do anything more sophisticated (e.g. custom event handling), you should wrap the native component in another React component. This is illustrated in the `MyCustomView` example below. + +# Events + +So now we know how to expose native view components that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the `getId()` method. + +```java +class MyCustomView extends View { + ... + public void onReceiveNativeEvent() { + WritableMap event = Arguments.createMap(); + event.putString("message", "MyMessage"); + ReactContext reactContext = (ReactContext)getContext(); + reactContext.getJSModule(RCTEventEmitter.class).receiveEvent( + getId(), + "topChange", + event); + } +} +``` + +To map the `topChange` event name to the `onChange` callback prop in JavaScript, register it by overriding the `getExportedCustomBubblingEventTypeConstants` method in your `ViewManager`: + +```java +public class ReactImageManager extends SimpleViewManager { + ... + public Map getExportedCustomBubblingEventTypeConstants() { + return MapBuilder.builder() + .put( + "topChange", + MapBuilder.of( + "phasedRegistrationNames", + MapBuilder.of("bubbled", "onChange"))) + .build(); + } +} +``` + +This callback is invoked with the raw event, which we typically process in the wrapper component to make a simpler API: + +```jsx +// MyCustomView.js + +class MyCustomView extends React.Component { + constructor(props) { + super(props); + this._onChange = this._onChange.bind(this); + } + _onChange(event: Event) { + if (!this.props.onChangeMessage) { + return; + } + this.props.onChangeMessage(event.nativeEvent.message); + } + render() { + return ; + } +} +MyCustomView.propTypes = { + /** + * Callback that is called continuously when the user is dragging the map. + */ + onChangeMessage: PropTypes.func, + ... +}; + +var RCTMyCustomView = requireNativeComponent(`RCTMyCustomView`); +``` diff --git a/website/versioned_docs/version-0.61/native-components-ios.md b/website/versioned_docs/version-0.61/native-components-ios.md new file mode 100644 index 00000000000..e6e63726b2a --- /dev/null +++ b/website/versioned_docs/version-0.61/native-components-ios.md @@ -0,0 +1,511 @@ +--- +id: native-components-ios +title: Native UI Components +--- + +There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application. + +Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with iOS programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing `MapView` component available in the core React Native library. + +## iOS MapView example + +Let's say we want to add an interactive Map to our app - might as well use [`MKMapView`](https://developer.apple.com/library/prerelease/mac/documentation/MapKit/Reference/MKMapView_Class/index.html), we only need to make it usable from JavaScript. + +Native views are created and manipulated by subclasses of `RCTViewManager`. These subclasses are similar in function to view controllers, but are essentially singletons - only one instance of each is created by the bridge. They expose native views to the `RCTUIManager`, which delegates back to them to set and update the properties of the views as necessary. The `RCTViewManager`s are also typically the delegates for the views, sending events back to JavaScript via the bridge. + +To expose a view you can: + +- Subclass `RCTViewManager` to create a manager for your component. +- Add the `RCT_EXPORT_MODULE()` marker macro. +- Implement the `-(UIView *)view` method. + +```objectivec +// RNTMapManager.m +#import + +#import + +@interface RNTMapManager : RCTViewManager +@end + +@implementation RNTMapManager + +RCT_EXPORT_MODULE(RNTMap) + +- (UIView *)view +{ + return [[MKMapView alloc] init]; +} + +@end +``` + +**Note:** Do not attempt to set the `frame` or `backgroundColor` properties on the `UIView` instance that you expose through the `-view` method. React Native will overwrite the values set by your custom class in order to match your JavaScript component's layout props. If you need this granularity of control it might be better to wrap the `UIView` instance you want to style in another `UIView` and return the wrapper `UIView` instead. See [Issue 2948](https://github.com/facebook/react-native/issues/2948) for more context. + +> In the example above, we prefixed our class name with `RNT`. Prefixes are used to avoid name collisions with other frameworks. Apple frameworks use two-letter prefixes, and React Native uses `RCT` as a prefix. In order to avoid name collisions, we recommend using a three-letter prefix other than `RCT` in your own classes. + +Then you need a little bit of JavaScript to make this a usable React component: + +```jsx +// MapView.js + +import { requireNativeComponent } from 'react-native'; + +// requireNativeComponent automatically resolves 'RNTMap' to 'RNTMapManager' +module.exports = requireNativeComponent('RNTMap'); + +// MyApp.js + +import MapView from './MapView.js'; + +... + +render() { + return ; +} +``` + +Make sure to use `RNTMap` here. We want to require the manager here, which will expose the view of our manager for use in Javascript. + +**Note:** When rendering, don't forget to stretch the view, otherwise you'll be staring at a blank screen. + +```jsx + render() { + return ; + } +``` + +This is now a fully-functioning native map view component in JavaScript, complete with pinch-zoom and other native gesture support. We can't really control it from JavaScript yet, though :( + +## Properties + +The first thing we can do to make this component more usable is to bridge over some native properties. Let's say we want to be able to disable zooming and specify the visible region. Disabling zoom is a boolean, so we add this one line: + +```objectivec +// RNTMapManager.m +RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, BOOL) +``` + +Note that we explicitly specify the type as `BOOL` - React Native uses `RCTConvert` under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro. + +Now to actually disable zooming, we set the property in JS: + +```jsx +// MyApp.js + +``` + +To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React `PropTypes`: + +```jsx +// MapView.js +import PropTypes from 'prop-types'; +import React from 'react'; +import { requireNativeComponent } from 'react-native'; + +class MapView extends React.Component { + render() { + return ; + } +} + +MapView.propTypes = { + /** + * A Boolean value that determines whether the user may use pinch + * gestures to zoom in and out of the map. + */ + zoomEnabled: PropTypes.bool +}; + +var RNTMap = requireNativeComponent('RNTMap', MapView); + +module.exports = MapView; +``` + +Now we have a nicely documented wrapper component to work with. Note that we changed `requireNativeComponent`'s second argument from `null` to the new `MapView` wrapper component. This allows the infrastructure to verify that the propTypes match the native props in order to reduce the chances of mismatches between the Objective-C and JavaScript code. + +Next, let's add the more complex `region` prop. We start by adding the native code: + +```objectivec +// RNTMapManager.m +RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView) +{ + [view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES]; +} +``` + +Ok, this is more complicated than the `BOOL` case we had before. Now we have a `MKCoordinateRegion` type that needs a conversion function, and we have custom code so that the view will animate when we set the region from JS. Within the function body that we provide, `json` refers to the raw value that has been passed from JS. There is also a `view` variable which gives us access to the manager's view instance, and a `defaultView` that we use to reset the property back to the default value if JS sends us a null sentinel. + +You could write any conversion function you want for your view - here is the implementation for `MKCoordinateRegion` via a category on `RCTConvert`. It uses an already existing category of ReactNative `RCTConvert+CoreLocation`: + +```objectivec +// RNTMapManager.m + +#import "RCTConvert+Mapkit.m" + +// RCTConvert+Mapkit.h + +#import +#import +#import +#import + +@interface RCTConvert (Mapkit) + ++ (MKCoordinateSpan)MKCoordinateSpan:(id)json; ++ (MKCoordinateRegion)MKCoordinateRegion:(id)json; + +@end + +@implementation RCTConvert(MapKit) + ++ (MKCoordinateSpan)MKCoordinateSpan:(id)json +{ + json = [self NSDictionary:json]; + return (MKCoordinateSpan){ + [self CLLocationDegrees:json[@"latitudeDelta"]], + [self CLLocationDegrees:json[@"longitudeDelta"]] + }; +} + ++ (MKCoordinateRegion)MKCoordinateRegion:(id)json +{ + return (MKCoordinateRegion){ + [self CLLocationCoordinate2D:json], + [self MKCoordinateSpan:json] + }; +} + +@end +``` + +These conversion functions are designed to safely process any JSON that the JS might throw at them by displaying "RedBox" errors and returning standard initialization values when missing keys or other developer errors are encountered. + +To finish up support for the `region` prop, we need to document it in `propTypes` (or we'll get an error that the native prop is undocumented), then we can set it like any other prop: + +```jsx +// MapView.js + +MapView.propTypes = { + /** + * A Boolean value that determines whether the user may use pinch + * gestures to zoom in and out of the map. + */ + zoomEnabled: PropTypes.bool, + + /** + * The region to be displayed by the map. + * + * The region is defined by the center coordinates and the span of + * coordinates to display. + */ + region: PropTypes.shape({ + /** + * Coordinates for the center of the map. + */ + latitude: PropTypes.number.isRequired, + longitude: PropTypes.number.isRequired, + + /** + * Distance between the minimum and the maximum latitude/longitude + * to be displayed. + */ + latitudeDelta: PropTypes.number.isRequired, + longitudeDelta: PropTypes.number.isRequired, + }), +}; + +// MyApp.js + +render() { + var region = { + latitude: 37.48, + longitude: -122.16, + latitudeDelta: 0.1, + longitudeDelta: 0.1, + }; + return ( + + ); +} +``` + +Here you can see that the shape of the region is explicit in the JS documentation - ideally we could codegen some of this stuff, but that's not happening yet. + +Sometimes your native component will have some reserved properties that you don't want to be part of the API for the associated React component. For example, `Switch` has a custom `onChange` handler for the raw native event, and exposes an `onValueChange` handler property that is invoked with the boolean value rather than the raw event. Since you don't want these native only properties to be part of the API, you don't want to put them in `propTypes`, but if you don't you'll get an error. The solution is to add them to the `nativeOnly` option, e.g. + +```jsx +var RCTSwitch = requireNativeComponent('RCTSwitch', Switch, { + nativeOnly: { onChange: true } +}); +``` + +## Events + +So now we have a native map component that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning to change the visible region? + +Until now we've only returned a `MKMapView` instance from our manager's `-(UIView *)view` method. We can't add new properties to `MKMapView` so we have to create a new subclass from `MKMapView` which we use for our View. We can then add a `onRegionChange` callback on this subclass: + +```objectivec +// RNTMapView.h + +#import + +#import + +@interface RNTMapView: MKMapView + +@property (nonatomic, copy) RCTBubblingEventBlock onRegionChange; + +@end + +// RNTMapView.m + +#import "RNTMapView.h" + +@implementation RNTMapView + +@end +``` + +Note that all `RCTBubblingEventBlock` must be prefixed with `on`. Next, declare an event handler property on `RNTMapManager`, make it a delegate for all the views it exposes, and forward events to JS by calling the event handler block from the native view. + +```objectivec{9,17,31-48} +// RNTMapManager.m + +#import +#import + +#import "RNTMapView.h" +#import "RCTConvert+Mapkit.m" + +@interface RNTMapManager : RCTViewManager +@end + +@implementation RNTMapManager + +RCT_EXPORT_MODULE() + +RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, BOOL) +RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock) + +RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView) +{ + [view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES]; +} + +- (UIView *)view +{ + RNTMapView *map = [RNTMapView new]; + map.delegate = self; + return map; +} + +#pragma mark MKMapViewDelegate + +- (void)mapView:(RNTMapView *)mapView regionDidChangeAnimated:(BOOL)animated +{ + if (!mapView.onRegionChange) { + return; + } + + MKCoordinateRegion region = mapView.region; + mapView.onRegionChange(@{ + @"region": @{ + @"latitude": @(region.center.latitude), + @"longitude": @(region.center.longitude), + @"latitudeDelta": @(region.span.latitudeDelta), + @"longitudeDelta": @(region.span.longitudeDelta), + } + }); +} +@end +``` + +In the delegate method `-mapView:regionDidChangeAnimated:` the event handler block is called on the corresponding view with the region data. Calling the `onRegionChange` event handler block results in calling the same callback prop in JavaScript. This callback is invoked with the raw event, which we typically process in the wrapper component to simplify API: + +```jsx +// MapView.js + +class MapView extends React.Component { + _onRegionChange = (event) => { + if (!this.props.onRegionChange) { + return; + } + + // process raw event... + this.props.onRegionChange(event.nativeEvent); + } + render() { + return ( + + ); + } +} +MapView.propTypes = { + /** + * Callback that is called continuously when the user is dragging the map. + */ + onRegionChange: PropTypes.func, + ... +}; + +// MyApp.js + +class MyApp extends React.Component { + onRegionChange(event) { + // Do stuff with event.region.latitude, etc. + } + + render() { + var region = { + latitude: 37.48, + longitude: -122.16, + latitudeDelta: 0.1, + longitudeDelta: 0.1, + }; + return ( + + ); + } +} +``` + +## Handling multiple native views + +A React Native view can have more than one child view in the view tree eg. + +```jsx + + + + + + + + + +> If you’re familiar with design systems, another way of thinking about this is that `PlatformColor` lets you tap into the local design system's color tokens so your app can blend right in! + + + +For a full list of the types of system colors supported, see: + +- Android: + - [R.attr](https://developer.android.com/reference/android/R.attr) - `?attr` prefix + - [R.color](https://developer.android.com/reference/android/R.color) - `@android:color` prefix +- [iOS UIColor](https://developer.apple.com/documentation/uikit/uicolor/ui_element_colors) + +## Example + +```jsx +import React from 'react'; +import { + Platform, + PlatformColor, + StyleSheet, + Text, + View +} from 'react-native'; + +export default (App = () => ( + + + I am a special label color! + + +)); + +const styles = StyleSheet.create({ + labelCell: { + flex: 1, + alignItems: 'stretch', + ...Platform.select({ + ios: { color: PlatformColor('label') }, + android: { + color: PlatformColor('?attr/colorControlNormal') + }, + default: { color: 'black' } + }) + } +}); +``` + +The string value provided to the `PlatformColor` function must match the string as it exists on the native platform where the app is running. In order to avoid runtime errors, the function should be wrapped in a platform check, either through a `Platform.OS === 'platform'` or a `Platform.Select()`, as shown on the example above. + +> **Note:** You can find a complete example that demonstrates proper, intended use of `PlatformColor` in [PlatformColorExample.js](https://github.com/facebook/react-native/blob/master/RNTester/js/examples/PlatformColor/PlatformColorExample.js). diff --git a/website/versioned_docs/version-0.61/pressable.md b/website/versioned_docs/version-0.61/pressable.md new file mode 100644 index 00000000000..62925c1a560 --- /dev/null +++ b/website/versioned_docs/version-0.61/pressable.md @@ -0,0 +1,228 @@ +--- +id: pressable +title: Pressable +--- + +Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children. + +```jsx + + I'm pressable! + +``` + +## How it works + +On an element wrapped by `Pressable`: + +- [`onPressIn`](#onpressin) is called when a press is activated. +- [`onPressOut`](#onpressout) is called when the press gesture is deactivated. + +After pressing [`onPressIn`](#onpressin), one of two things will happen: + +1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress). +2. If the person leaves their finger longer than 370 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.) + +Diagram of the onPress events in sequence. + +Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the the wrapped element. Presses can start anywhere within a `HitRect`. + +`PressRect` allows presses to move beyond the element and its `HitRect` while maintaining activation and being eligible for a "press"—think of sliding your finger slowly away from a button you're pressing down on. + +> The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views. + +
+ Diagram of HitRect and PressRect and how they work. +
+ You can set HitRect with hitSlop and set PressRect with pressRetentionOffset. +
+
+ +> `Pressable` uses React Native's `Pressability` API. For more information around the state machine flow of Pressability and how it works, check out the implementation for [Pressability](https://github.com/facebook/react-native/blob/16ea9ba8133a5340ed6751ec7d49bf03a0d4c5ea/Libraries/Pressability/Pressability.js#L347). + +## Example + +```js +import React, { useState } from 'react'; +import { Pressable, StyleSheet, Text, View } from 'react-native'; + +const App = () => { + const [timesPressed, setTimesPressed] = useState(0); + + let textLog = ''; + if (timesPressed > 1) { + textLog = timesPressed + 'x onPress'; + } else if (timesPressed > 0) { + textLog = 'onPress'; + } + + return ( + + { + setTimesPressed((current) => current + 1); + }} + style={({ pressed }) => [ + { + backgroundColor: pressed + ? 'rgb(210, 230, 255)' + : 'white' + }, + styles.wrapperCustom + ]}> + {({ pressed }) => ( + + {pressed ? 'Pressed!' : 'Press Me'} + + )} + + + {textLog} + + + ); +}; + +const styles = StyleSheet.create({ + text: { + fontSize: 16 + }, + wrapperCustom: { + borderRadius: 8, + padding: 6 + }, + logBox: { + padding: 20, + margin: 10, + borderWidth: StyleSheet.hairlineWidth, + borderColor: '#f0f0f0', + backgroundColor: '#f9f9f9' + } +}); + +export default App; +``` + +## Props + +### `android_disableSound`
Android
+ +If true, doesn't play Android system sound on press. + +| Type | Required | Default | +| ------- | -------- | ------- | +| boolean | No | `false` | + +### `android_ripple`
Android
+ +Enables the Android ripple effect and configures its properties. + +| Type | Required | +| -------------------------------------- | -------- | +| [RippleConfig](pressable#rippleconfig) | No | + +### `children` + +Either children or a function that receives a boolean reflecting whether the component is currently pressed. + +| Type | Required | +| ------------------------ | -------- | +| [React Node](react-node) | No | + +### `delayLongPress` + +Duration (in milliseconds) from `onPressIn` before `onLongPress` is called. + +| Type | Required | Default | +| ------ | -------- | ------- | +| number | No | 370 | + +### `disabled` + +Whether the press behavior is disabled. + +| Type | Required | Default | +| ------- | -------- | ------- | +| boolean | No | `false` | + +### `hitSlop` + +Sets additional distance outside of element in which a press can be detected. + +| Type | Required | +| ---------------------- | -------- | +| [Rect](rect) or number | No | + +### `onLongPress` + +Called if the time after `onPressIn` lasts longer than 370 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress). + +| Type | Required | +| ------------------------ | -------- | +| [PressEvent](pressevent) | No | + +### `onPress` + +Called after `onPressOut`. + +| Type | Required | +| ------------------------ | -------- | +| [PressEvent](pressevent) | No | + +### `onPressIn` + +Called immediately when a touch is engaged, before `onPressOut` and `onPress`. + +| Type | Required | +| ------------------------ | -------- | +| [PressEvent](pressevent) | No | + +### `onPressOut` + +Called when a touch is released. + +| Type | Required | +| ------------------------ | -------- | +| [PressEvent](pressevent) | No | + +### `pressRetentionOffset` + +Additional distance outside of this view in which a touch is considered a press before `onPressOut` is triggered. + +| Type | Required | Default | +| ---------------------- | -------- | ---------------------------------------------- | +| [Rect](rect) or number | No | `{ bottom: 30, left: 20, right: 20, top: 20 }` | + +### `style` + +Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles. + +| Type | Required | +| --------------------------------- | -------- | +| [ViewStyleProp](view-style-props) | No | + +### `testOnly_pressed` + +Used only for documentation or testing (e.g. snapshot testing). + +| Type | Required | Default | +| ------- | -------- | ------- | +| boolean | No | `false` | + +## Type Definitions + +### RippleConfig + +Ripple effect configuration for the `android_ripple` property. + +| Type | +| ------ | +| object | + +**Properties:** + +| Name | Type | Required | Description | +| ---------- | --------------- | -------- | --------------------------------------------------- | +| color | [color](colors) | No | Defines the color of the ripple effect. | +| borderless | boolean | No | Defines if ripple effect should not include border. | +| radius | number | No | Defines the radius of the ripple effect. | diff --git a/website/versioned_docs/version-0.61/pressevent.md b/website/versioned_docs/version-0.61/pressevent.md new file mode 100644 index 00000000000..b7ec5a5d4ef --- /dev/null +++ b/website/versioned_docs/version-0.61/pressevent.md @@ -0,0 +1,118 @@ +--- +id: pressevent +title: PressEvent Object Type +--- + +`PressEvent` object is returned in the callback as a result of user press interaction, for example `onPress` in [Button](button) component. + +## Example + +```js +{ + changedTouches: [PressEvent], + identifier: 1, + locationX: 8, + locationY: 4.5, + pageX: 24, + pageY: 49.5, + target: 1127, + timestamp: 85131876.58868201, + touches: [] +} +``` + +## Keys and values + +### `changedTouches` + +Array of all PressEvents that have changed since the last event. + +| Type | Optional | +| -------------------- | -------- | +| array of PressEvents | No | + +### `force`
iOS
+ +Amount of force used during the 3D Touch press. Returns the float value in range from `0.0` to `1.0`. + +| Type | Optional | +| ------ | -------- | +| number | Yes | + +### `identifier` + +Unique numeric identifier assigned to the event. + +| Type | Optional | +| ------ | -------- | +| number | No | + +### `locationX` + +Touch origin X coordinate inside touchable area (relative to the element). + +| Type | Optional | +| ------ | -------- | +| number | No | + +### `locationY` + +Touch origin Y coordinate inside touchable area (relative to the element). + +| Type | Optional | +| ------ | -------- | +| number | No | + +### `pageX` + +Touch origin X coordinate on the screen (relative to the root view). + +| Type | Optional | +| ------ | -------- | +| number | No | + +### `pageY` + +Touch origin Y coordinate on the screen (relative to the root view). + +| Type | Optional | +| ------ | -------- | +| number | No | + +### `target` + +The node id of the element receiving the PressEvent. + +| Type | Optional | +| --------------------------- | -------- | +| number, `null`, `undefined` | No | + +### `timestamp` + +Timestamp value when a PressEvent occurred. Value is represented in milliseconds. + +| Type | Optional | +| ------ | -------- | +| number | No | + +### `touches` + +Array of all current PressEvents on the screen. + +| Type | Optional | +| -------------------- | -------- | +| array of PressEvents | No | + +## Used by + +- [`Button`](button) +- [`PanResponder`](panresponder) +- [`Pressable`](pressable) +- [`ScrollView`](scrollview) +- [`Text`](text) +- [`TextInput`](textinput) +- [`TouchableHighlight`](touchablenativefeedback) +- [`TouchableOpacity`](touchablewithoutfeedback) +- [`TouchableNativeFeedback`](touchablenativefeedback) +- [`TouchableWithoutFeedback`](touchablewithoutfeedback) +- [`View`](view) diff --git a/website/versioned_docs/version-0.61/profiling.md b/website/versioned_docs/version-0.61/profiling.md new file mode 100644 index 00000000000..24ef78f3183 --- /dev/null +++ b/website/versioned_docs/version-0.61/profiling.md @@ -0,0 +1,146 @@ +--- +id: profiling +title: Profiling +--- + +Use the built-in profiler to get detailed information about work done in the JavaScript thread and main thread side-by-side. Access it by selecting Perf Monitor from the Debug menu. + +For iOS, Instruments is an invaluable tool, and on Android you should learn to use [`systrace`](performance.md#profiling-android-ui-performance-with-systrace). + +But first, [**make sure that Development Mode is OFF!**](performance.md#running-in-development-mode-devtrue) You should see `__DEV__ === false, development-level warning are OFF, performance optimizations are ON` in your application logs. + +Another way to profile JavaScript is to use the Chrome profiler while debugging. This won't give you accurate results as the code is running in Chrome but will give you a general idea of where bottlenecks might be. Run the profiler under Chrome's `Performance` tab. A flame graph will appear under `User Timing`. To view more details in tabular format, click at the `Bottom Up` tab below and then select `DedicatedWorker Thread` at the top left menu. + +## Profiling Android UI Performance with `systrace` + +Android supports 10k+ different phones and is generalized to support software rendering: the framework architecture and need to generalize across many hardware targets unfortunately means you get less for free relative to iOS. But sometimes, there are things you can improve -- and many times it's not native code's fault at all! + +The first step for debugging this jank is to answer the fundamental question of where your time is being spent during each 16ms frame. For that, we'll be using a standard Android profiling tool called `systrace`. + +`systrace` is a standard Android marker-based profiling tool (and is installed when you install the Android platform-tools package). Profiled code blocks are surrounded by start/end markers which are then visualized in a colorful chart format. Both the Android SDK and React Native framework provide standard markers that you can visualize. + +### 1. Collecting a trace + +First, connect a device that exhibits the stuttering you want to investigate to your computer via USB and get it to the point right before the navigation/animation you want to profile. Run `systrace` as follows: + +```sh +$ /platform-tools/systrace/systrace.py --time=10 -o trace.html sched gfx view -a +``` + +A quick breakdown of this command: + +- `time` is the length of time the trace will be collected in seconds +- `sched`, `gfx`, and `view` are the android SDK tags (collections of markers) we care about: `sched` gives you information about what's running on each core of your phone, `gfx` gives you graphics info such as frame boundaries, and `view` gives you information about measure, layout, and draw passes +- `-a ` enables app-specific markers, specifically the ones built into the React Native framework. `your_package_name` can be found in the `AndroidManifest.xml` of your app and looks like `com.example.app` + +Once the trace starts collecting, perform the animation or interaction you care about. At the end of the trace, systrace will give you a link to the trace which you can open in your browser. + +### 2. Reading the trace + +After opening the trace in your browser (preferably Chrome), you should see something like this: + +![Example](/docs/assets/SystraceExample.png) + +> **HINT**: Use the WASD keys to strafe and zoom + +If your trace .html file isn't opening correctly, check your browser console for the following: + +![ObjectObserveError](/docs/assets/ObjectObserveError.png) + +Since `Object.observe` was deprecated in recent browsers, you may have to open the file from the Google Chrome Tracing tool. You can do so by: + +- Opening tab in chrome chrome://tracing +- Selecting load +- Selecting the html file generated from the previous command. + +> **Enable VSync highlighting** +> +> Check this checkbox at the top right of the screen to highlight the 16ms frame boundaries: +> +> ![Enable VSync Highlighting](/docs/assets/SystraceHighlightVSync.png) +> +> You should see zebra stripes as in the screenshot above. If you don't, try profiling on a different device: Samsung has been known to have issues displaying vsyncs while the Nexus series is generally pretty reliable. + +### 3. Find your process + +Scroll until you see (part of) the name of your package. In this case, I was profiling `com.facebook.adsmanager`, which shows up as `book.adsmanager` because of silly thread name limits in the kernel. + +On the left side, you'll see a set of threads which correspond to the timeline rows on the right. There are a few threads we care about for our purposes: the UI thread (which has your package name or the name UI Thread), `mqt_js`, and `mqt_native_modules`. If you're running on Android 5+, we also care about the Render Thread. + +- **UI Thread.** This is where standard android measure/layout/draw happens. The thread name on the right will be your package name (in my case book.adsmanager) or UI Thread. The events that you see on this thread should look something like this and have to do with `Choreographer`, `traversals`, and `DispatchUI`: + + ![UI Thread Example](/docs/assets/SystraceUIThreadExample.png) + +- **JS Thread.** This is where JavaScript is executed. The thread name will be either `mqt_js` or `<...>` depending on how cooperative the kernel on your device is being. To identify it if it doesn't have a name, look for things like `JSCall`, `Bridge.executeJSCall`, etc: + + ![JS Thread Example](/docs/assets/SystraceJSThreadExample.png) + +- **Native Modules Thread.** This is where native module calls (e.g. the `UIManager`) are executed. The thread name will be either `mqt_native_modules` or `<...>`. To identify it in the latter case, look for things like `NativeCall`, `callJavaModuleMethod`, and `onBatchComplete`: + + ![Native Modules Thread Example](/docs/assets/SystraceNativeModulesThreadExample.png) + +- **Bonus: Render Thread.** If you're using Android L (5.0) and up, you will also have a render thread in your application. This thread generates the actual OpenGL commands used to draw your UI. The thread name will be either `RenderThread` or `<...>`. To identify it in the latter case, look for things like `DrawFrame` and `queueBuffer`: + + ![Render Thread Example](/docs/assets/SystraceRenderThreadExample.png) + +## Identifying a culprit + +A smooth animation should look something like the following: + +![Smooth Animation](/docs/assets/SystraceWellBehaved.png) + +Each change in color is a frame -- remember that in order to display a frame, all our UI work needs to be done by the end of that 16ms period. Notice that no thread is working close to the frame boundary. An application rendering like this is rendering at 60 FPS. + +If you noticed chop, however, you might see something like this: + +![Choppy Animation from JS](/docs/assets/SystraceBadJS.png) + +Notice that the JS thread is executing almost all the time, and across frame boundaries! This app is not rendering at 60 FPS. In this case, **the problem lies in JS**. + +You might also see something like this: + +![Choppy Animation from UI](/docs/assets/SystraceBadUI.png) + +In this case, the UI and render threads are the ones that have work crossing frame boundaries. The UI that we're trying to render on each frame is requiring too much work to be done. In this case, **the problem lies in the native views being rendered**. + +At this point, you'll have some very helpful information to inform your next steps. + +## Resolving JavaScript issues + +If you identified a JS problem, look for clues in the specific JS that you're executing. In the scenario above, we see `RCTEventEmitter` being called multiple times per frame. Here's a zoom-in of the JS thread from the trace above: + +![Too much JS](/docs/assets/SystraceBadJS2.png) + +This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://reactjs.org/docs/react-component.html#shouldcomponentupdate). + +## Resolving native UI Issues + +If you identified a native UI problem, there are usually two scenarios: + +1. the UI you're trying to draw each frame involves too much work on the GPU, or +2. You're constructing new UI during the animation/interaction (e.g. loading in new content during a scroll). + +### Too much GPU work + +In the first scenario, you'll see a trace that has the UI thread and/or Render Thread looking like this: + +![Overloaded GPU](/docs/assets/SystraceBadUI.png) + +Notice the long amount of time spent in `DrawFrame` that crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame. + +To mitigate this, you should: + +- investigate using `renderToHardwareTextureAndroid` for complex, static content that is being animated/transformed (e.g. the `Navigator` slide/alpha animations) +- make sure that you are **not** using `needsOffscreenAlphaCompositing`, which is disabled by default, as it greatly increases the per-frame load on the GPU in most cases. + +If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out [Tracer for OpenGL ES](http://www.androiddocs.com/tools/help/gltracer.html). + +### Creating new views on the UI thread + +In the second scenario, you'll see something more like this: + +![Creating Views](/docs/assets/SystraceBadCreateUI.png) + +Notice that first the JS thread thinks for a bit, then you see some work done on the native modules thread, followed by an expensive traversal on the UI thread. + +There isn't a quick way to mitigate this unless you're able to postpone creating new UI until after the interaction, or you are able to simplify the UI you're creating. The react native team is working on an infrastructure level solution for this that will allow new UI to be created and configured off the main thread, allowing the interaction to continue smoothly. diff --git a/website/versioned_docs/version-0.61/progressbarandroid.md b/website/versioned_docs/version-0.61/progressbarandroid.md index b6cb2bea7bc..66b9f4f43b2 100644 --- a/website/versioned_docs/version-0.61/progressbarandroid.md +++ b/website/versioned_docs/version-0.61/progressbarandroid.md @@ -1,7 +1,6 @@ --- -id: version-0.61-progressbarandroid -title: 🚧 ProgressBarAndroid -original_id: progressbarandroid +id: progressbarandroid +title: '🚧 ProgressBarAndroid' --- > **Deprecated.** Use [@react-native-community/progress-bar-android](https://github.com/react-native-community/progress-bar-android) instead. diff --git a/website/versioned_docs/version-0.61/progressviewios.md b/website/versioned_docs/version-0.61/progressviewios.md index dd7498343c1..51c3320dcfe 100644 --- a/website/versioned_docs/version-0.61/progressviewios.md +++ b/website/versioned_docs/version-0.61/progressviewios.md @@ -1,7 +1,6 @@ --- -id: version-0.61-progressviewios -title: 🚧 ProgressViewIOS -original_id: progressviewios +id: progressviewios +title: '🚧 ProgressViewIOS' --- > **Deprecated.** Use [@react-native-community/progress-view](https://github.com/react-native-community/progress-view) instead. diff --git a/website/versioned_docs/version-0.61/props.md b/website/versioned_docs/version-0.61/props.md new file mode 100644 index 00000000000..1baa8ed470b --- /dev/null +++ b/website/versioned_docs/version-0.61/props.md @@ -0,0 +1,61 @@ +--- +id: props +title: Props +--- + +Most components can be customized when they are created, with different parameters. These creation parameters are called `props`, short for properties. + +For example, one basic React Native component is the `Image`. When you create an image, you can use a prop named `source` to control what image it shows. + +```SnackPlayer name=Props +import React, { Component } from 'react'; +import { Image } from 'react-native'; + +export default class Bananas extends Component { + render() { + let pic = { + uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg' + }; + return ( + + ); + } +} +``` + +Notice the braces surrounding `{pic}` - these embed the variable `pic` into JSX. You can put any JavaScript expression inside braces in JSX. + +Your own components can also use `props`. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place by referring to `this.props` in your `render` function. Here's an example: + +```SnackPlayer name=Props +import React, { Component } from 'react'; +import { Text, View } from 'react-native'; + +class Greeting extends Component { + render() { + return ( + + Hello {this.props.name}! + + ); + } +} + +export default class LotsOfGreetings extends Component { + render() { + return ( + + + + + + ); + } +} +``` + +Using `name` as a prop lets us customize the `Greeting` component, so we can reuse that component for each of our greetings. This example also uses the `Greeting` component in JSX, similar to the [Core Components](intro-react-native-components). The power to do this is what makes React so cool - if you find yourself wishing that you had a different set of UI primitives to work with, you can invent new ones. + +The other new thing going on here is the [`View`](view.md) component. A [`View`](view.md) is useful as a container for other components, to help control style and layout. + +With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`](view.md) components, you can build a wide variety of static screens. To learn how to make your app change over time, you need to [learn about State](state.md). diff --git a/website/versioned_docs/version-0.61/publishing.md b/website/versioned_docs/version-0.61/publishing.md new file mode 100644 index 00000000000..8c7cd8d3e7f --- /dev/null +++ b/website/versioned_docs/version-0.61/publishing.md @@ -0,0 +1,82 @@ +--- +id: publishing-forks +title: Publish your own version of react native +--- + +## TL;DR + +There is a docker image that helps you build the required Android sources without installing any additional tooling (other than [Docker](https://docs.docker.com/install/), which can be committed to a git branch as a fully functional React Native fork release. + +Run this from a fork of the React Native [repo](https://github.com/facebook/react-native). + +``` +git checkout -d release/my-react-native-release +docker run --rm --name rn-build -v $PWD:/pwd -w /pwd reactnativecommunity/react-native-android /bin/sh -c "./gradlew installArchives" +git add android --force +git commit -a -m 'my react native forked release' +git push +``` + +Install it in your app project package.json. + +``` +"dependencies": { + ... + "react-native": "myName/react-native#release/my-react-native-release" +} +``` + +## Rationale + +The recommended approach to working with React Native is to always update to the latest version. No support is provided on older versions and if you run into issues the contributors will always ask you to upgrade to the latest version before even looking at your particular issue. Sometimes, though, you are temporarily stuck on an older React Native version, but you require some changes from newer versions urgently (bugfixes) without having to do a full upgrade right now. This situation should be short lived by definition and once you have the time, the real solution is to upgrade to the latest version. + +With this goal of a shortlived fork of React Native in mind, you can publish your own version of React Native. The facebook/react-native repository contains all the dependencies required to be used directly as a git dependency, except for the Android React Native library binary (.aar). + +## Building + +This binary needs to become available in your project's `node_modules/react-native/android` folder or directly in your gradle dependency of your Android app. You can achieve this in one of two ways: Git dependency branch, Android binary dependency through Maven. + +To build the .aar React Native library, you can follow the steps to [build from source](building-from-source.md) first to install all required tooling. Then to build the actual library, you can run the following in the root of your react-native checkout: + +```$bash +./gradlew :ReactAndroid:installArchives --no-daemon +``` + +If you don't want to install the required toolchain for building from source, you can use a prebuilt docker image to create a react native binary; + +``` +docker run --rm --name rn-build -v $PWD:/pwd -w /pwd reactnativecommunity/react-native-android /bin/sh -c "./gradlew installArchives" +``` + +If you haven't used the Android NDK before or if you have a NDK version not exactly matching the required version for building React Native, this is the recommended approach. + +The resulting binary can be made available to app projects in one of the two ways described below. + +### Publishing to Maven/Nexus + +Upload the binaries from the `android` folder to maven and point your Android app project gradle dependency for React Native to your Maven/Nexus dependency. + +### Publishing to a git fork dependency + +Instead of uploading to Maven/Nexus, you can add the binaries built in the previous steps to git, by changing the .gitignore and committing the binaries to your forked branch. This allows you to make your fork into a functioning git dependency for React Native app projects. + +If you have changes that you want to actually merge to React Native, make them on another branch first and open a PR. To start making your dependency branch, make sure you are on a 'release/my-forked-release' branch, then merge any commits that you need from yourself or others into this branch. This release branch should never be merged into any other branch. + +```$bash +# create .aar, then: +git add android --force +git commit -m 'my release commit' +git push +``` + +Now you can use this branch as a git dependency in your app project, by pointing your package.json dependency to this branch: + +``` +"dependencies": { + ... + "react-native": "my-name/react-native#release/my-forked-release, + ... +} +``` + +No other modifications to your dependencies should be necessary for your native changes to be included in your project. diff --git a/website/versioned_docs/version-0.61/pushnotificationios.md b/website/versioned_docs/version-0.61/pushnotificationios.md index bca4d279e3d..ca53f47f373 100644 --- a/website/versioned_docs/version-0.61/pushnotificationios.md +++ b/website/versioned_docs/version-0.61/pushnotificationios.md @@ -1,7 +1,6 @@ --- -id: version-0.61-pushnotificationios -title: 🚧 PushNotificationIOS -original_id: pushnotificationios +id: pushnotificationios +title: '🚧 PushNotificationIOS' --- > **Deprecated.** Use [@react-native-community/push-notification-ios](https://github.com/react-native-community/react-native-push-notification-ios) instead. diff --git a/website/versioned_docs/version-0.61/ram-bundles-inline-requires.md b/website/versioned_docs/version-0.61/ram-bundles-inline-requires.md new file mode 100644 index 00000000000..a6b5de5986e --- /dev/null +++ b/website/versioned_docs/version-0.61/ram-bundles-inline-requires.md @@ -0,0 +1,186 @@ +--- +id: ram-bundles-inline-requires +title: RAM Bundles and Inline Requires +--- + +If you have a large app you may want to consider the Random Access Modules (RAM) bundle format, and using inline requires. This is useful for apps that have a large number of screens which may not ever be opened during a typical usage of the app. Generally it is useful to apps that have large amounts of code that are not needed for a while after startup. For instance the app includes complicated profile screens or lesser used features, but most sessions only involve visiting the main screen of the app for updates. We can optimize the loading of the bundle by using the RAM format and requiring those features and screens inline (when they are actually used). + +## Loading JavaScript + +Before react-native can execute JS code, that code must be loaded into memory and parsed. With a standard bundle if you load a 50mb bundle, all 50mb must be loaded and parsed before any of it can be executed. The optimization behind RAM bundles is that you can load only the portion of the 50mb that you actually need at startup, and progressively load more of the bundle as those sections are needed. + +## Inline Requires + +Inline requires delay the requiring of a module or file until that file is actually needed. A basic example would look like this: + +### VeryExpensive.js + +```js +import React, { Component } from 'react'; +import { Text } from 'react-native'; +// ... import some very expensive modules + +// You may want to log at the file level to verify when this is happening +console.log('VeryExpensive component loaded'); + +export default class VeryExpensive extends Component { + // lots and lots of code + render() { + return Very Expensive Component; + } +} +``` + +### Optimized.js + +```js +import React, { Component } from 'react'; +import { TouchableOpacity, View, Text } from 'react-native'; + +let VeryExpensive = null; + +export default class Optimized extends Component { + state = { needsExpensive: false }; + + didPress = () => { + if (VeryExpensive == null) { + VeryExpensive = require('./VeryExpensive').default; + } + + this.setState(() => ({ + needsExpensive: true + })); + }; + + render() { + return ( + + + Load + + {this.state.needsExpensive ? : null} + + ); + } +} +``` + +Even without the RAM format, inline requires can lead to startup time improvements, because the code within VeryExpensive.js will only execute once it is required for the first time. + +## Enable the RAM format + +On iOS using the RAM format will create a single indexed file that react native will load one module at a time. On Android, by default it will create a set of files for each module. You can force Android to create a single file, like iOS, but using multiple files can be more performant and requires less memory. + +Enable the RAM format in Xcode by editing the build phase "Bundle React Native code and images". Before `../node_modules/react-native/scripts/react-native-xcode.sh` add `export BUNDLE_COMMAND="ram-bundle"`: + +``` +export BUNDLE_COMMAND="ram-bundle" +export NODE_BINARY=node +../node_modules/react-native/scripts/react-native-xcode.sh +``` + +On Android enable the RAM format by editing your `android/app/build.gradle` file. Before the line `apply from: "../../node_modules/react-native/react.gradle"` add or amend the `project.ext.react` block: + +``` +project.ext.react = [ + bundleCommand: "ram-bundle", +] +``` + +Use the following lines on Android if you want to use a single indexed file: + +``` +project.ext.react = [ + bundleCommand: "ram-bundle", + extraPackagerArgs: ["--indexed-ram-bundle"] +] +``` + +> **_Note_**: If you are using [Hermes JS Engine](https://github.com/facebook/hermes), you do not need RAM bundles. When loading the bytecode, `mmap` ensures that the entire file is not loaded. + +## Configure Preloading and Inline Requires + +Now that we have a RAM bundle, there is overhead for calling `require`. `require` now needs to send a message over the bridge when it encounters a module it has not loaded yet. This will impact startup the most, because that is where the largest number of require calls are likely to take place while the app loads the initial module. Luckily we can configure a portion of the modules to be preloaded. In order to do this, you will need to implement some form of inline require. + +## Investigating the Loaded Modules + +In your root file (index.(ios|android).js) you can add the following after the initial imports: + +```js +const modules = require.getModules(); +const moduleIds = Object.keys(modules); +const loadedModuleNames = moduleIds + .filter((moduleId) => modules[moduleId].isInitialized) + .map((moduleId) => modules[moduleId].verboseName); +const waitingModuleNames = moduleIds + .filter((moduleId) => !modules[moduleId].isInitialized) + .map((moduleId) => modules[moduleId].verboseName); + +// make sure that the modules you expect to be waiting are actually waiting +console.log( + 'loaded:', + loadedModuleNames.length, + 'waiting:', + waitingModuleNames.length +); + +// grab this text blob, and put it in a file named packager/modulePaths.js +console.log( + `module.exports = ${JSON.stringify( + loadedModuleNames.sort(), + null, + 2 + )};` +); +``` + +When you run your app, you can look in the console and see how many modules have been loaded, and how many are waiting. You may want to read the moduleNames and see if there are any surprises. Note that inline requires are invoked the first time the imports are referenced. You may need to investigate and refactor to ensure only the modules you want are loaded on startup. Note that you can change the Systrace object on require to help debug problematic requires. + +```js +require.Systrace.beginEvent = (message) => { + if (message.includes(problematicModule)) { + throw new Error(); + } +}; +``` + +Every app is different, but it may make sense to only load the modules you need for the very first screen. When you are satisfied, put the output of the loadedModuleNames into a file named `packager/modulePaths.js`. + +## Updating the metro.config.js + +We now need to update `metro.config.js` in the root of the project to use our newly generated `modulePaths.js` file: + +```js +const modulePaths = require('./packager/modulePaths'); +const resolve = require('path').resolve; +const fs = require('fs'); + +// Update the following line if the root folder of your app is somewhere else. +const ROOT_FOLDER = resolve(__dirname, '..'); + +const config = { + transformer: { + getTransformOptions: () => { + const moduleMap = {}; + modulePaths.forEach((path) => { + if (fs.existsSync(path)) { + moduleMap[resolve(path)] = true; + } + }); + return { + preloadedModules: moduleMap, + transform: { inlineRequires: { blacklist: moduleMap } } + }; + } + }, + projectRoot: ROOT_FOLDER +}; + +module.exports = config; +``` + +The `preloadedModules` entry in the config indicates which modules should be marked as preloaded when building a RAM bundle. When the bundle is loaded, those modules are immediately loaded, before any requires have even executed. The `blacklist` entry indicates that those modules should not be required inline. Because they are preloaded, there is no performance benefit from using an inline require. In fact the javascript spends extra time resolving the inline require every time the imports are referenced. + +## Test and Measure Improvements + +You should now be ready to build your app using the RAM format and inline requires. Make sure you measure the before and after startup times. diff --git a/website/versioned_docs/version-0.61/react-node.md b/website/versioned_docs/version-0.61/react-node.md new file mode 100644 index 00000000000..d703d1c1429 --- /dev/null +++ b/website/versioned_docs/version-0.61/react-node.md @@ -0,0 +1,13 @@ +--- +id: react-node +title: React Node Object Type +--- + +A React Node is one of the following types: + +- Boolean (which is ignored) +- `null` or `undefined` (which is ignored) +- Number +- String +- A React element (result of JSX) +- An array of any of the above, possibly a nested one diff --git a/website/versioned_docs/version-0.61/rect.md b/website/versioned_docs/version-0.61/rect.md new file mode 100644 index 00000000000..1c63f75c7c7 --- /dev/null +++ b/website/versioned_docs/version-0.61/rect.md @@ -0,0 +1,50 @@ +--- +id: rect +title: Rect Object Type +--- + +`Rect` accepts numeric pixel values to describe how far to extend a rectangular area. These values are added to the original area's size to expand it. + +## Example + +```js +{ + bottom: 20, + left: null, + right: undefined, + top: 50 +} +``` + +## Keys and values + +### `bottom` + +| Type | Required | +| --------------------------- | -------- | +| number, `null`, `undefined` | No | + +### `left` + +| Type | Required | +| --------------------------- | -------- | +| number, `null`, `undefined` | No | + +### `right` + +| Type | Required | +| --------------------------- | -------- | +| number, `null`, `undefined` | No | + +### `top` + +| Type | Required | +| --------------------------- | -------- | +| number, `null`, `undefined` | No | + +## Used by + +- [`Image`](image) +- [`Presssable`](pressable) +- [`Text`](text) +- [`TouchableWithoutFeedback`](touchablewithoutfeedback) diff --git a/website/versioned_docs/version-0.61/refreshcontrol.md b/website/versioned_docs/version-0.61/refreshcontrol.md new file mode 100644 index 00000000000..244b99e2450 --- /dev/null +++ b/website/versioned_docs/version-0.61/refreshcontrol.md @@ -0,0 +1,170 @@ +--- +id: refreshcontrol +title: RefreshControl +--- + +This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at `scrollY: 0`, swiping down triggers an `onRefresh` event. + +### Example + +```SnackPlayer name=RefreshControl&supportedPlatforms=ios,android +import React from 'react'; +import { + ScrollView, + RefreshControl, + StyleSheet, + Text, + SafeAreaView, +} from 'react-native'; +import Constants from 'expo-constants'; + +function wait(timeout) { + return new Promise(resolve => { + setTimeout(resolve, timeout); + }); +} + +export default function App() { + const [refreshing, setRefreshing] = React.useState(false); + + const onRefresh = React.useCallback(() => { + setRefreshing(true); + + wait(2000).then(() => setRefreshing(false)); + }, [refreshing]); + + return ( + + + } + > + Pull down to see RefreshControl indicator + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + marginTop: Constants.statusBarHeight, + }, + scrollView: { + flex: 1, + backgroundColor: 'pink', + alignItems: 'center', + justifyContent: 'center', + }, +}); +``` + +**Note:** `refreshing` is a controlled prop, this is why it needs to be set to true in the `onRefresh` function otherwise the refresh indicator will stop immediately. + +--- + +# Reference + +## Props + +Inherits [View Props](view.md#props). + +### `refreshing` + +Whether the view should be indicating an active refresh. + +| Type | Required | +| ---- | -------- | +| bool | Yes | + +--- + +### `onRefresh` + +Called when the view starts refreshing. + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + +### `colors` + +The colors (at least one) that will be used to draw the refresh indicator. + +| Type | Required | Platform | +| --------------------------- | -------- | -------- | +| array of [color](colors.md) | No | Android | + +--- + +### `enabled` + +Whether the pull to refresh functionality is enabled. + +| Type | Required | Platform | +| ---- | -------- | -------- | +| bool | No | Android | + +--- + +### `progressBackgroundColor` + +The background color of the refresh indicator. + +| Type | Required | Platform | +| ------------------ | -------- | -------- | +| [color](colors.md) | No | Android | + +--- + +### `progressViewOffset` + +Progress view top offset + +| Type | Required | Platform | +| ------ | -------- | -------- | +| number | No | Android | + +--- + +### `size` + +Size of the refresh indicator, see RefreshControl.SIZE. + +| Type | Required | Platform | +| ---------------------------------------------------------------------- | -------- | -------- | +| enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE) | No | Android | + +--- + +### `tintColor` + +The color of the refresh indicator. + +| Type | Required | Platform | +| ------------------ | -------- | -------- | +| [color](colors.md) | No | iOS | + +--- + +### `title` + +The title displayed under the refresh indicator. + +| Type | Required | Platform | +| ------ | -------- | -------- | +| string | No | iOS | + +--- + +### `titleColor` + +Title color. + +| Type | Required | Platform | +| ------------------ | -------- | -------- | +| [color](colors.md) | No | iOS | diff --git a/website/versioned_docs/version-0.61/removing-default-permissions.md b/website/versioned_docs/version-0.61/removing-default-permissions.md new file mode 100644 index 00000000000..bec6a1fd106 --- /dev/null +++ b/website/versioned_docs/version-0.61/removing-default-permissions.md @@ -0,0 +1,54 @@ +--- +id: removing-default-permissions +title: Removing Default Permissions +--- + +By default, some permissions are added to your Android APK. + +The default permissions that get added are: + +- android.permission.INTERNET - Required for debug mode. +- android.permission.SYSTEM_ALERT_WINDOW - Required for debug mode. +- android.permission.READ_PHONE_STATE - Not required for debug or production. +- android.permission.WRITE_EXTERNAL_STORAGE - Not required for debug or production. +- android.permission.READ_EXTERNAL_STORAGE - Not required for debug or production. + +1. Let's start by removing `READ_PHONE_STATE`, `WRITE_EXTERNAL_STORAGE`, and `READ_EXTERNAL_STORAGE` from both production and debug APKs, as it is not required in either. These storage permissions are still not needed if `AsyncStorage` module is in use, so it is safe to remove from both production and debug. +2. Open your `android/app/src/main/AndroidManifest.xml` file. +3. Even though these three permissions are not listed in the manifest they get added in. We add the three permissions with `tools:node="remove"` attribute, to make sure it gets removed during build. Note that the package identifier will be different, for below it is "com.myapp" because the project was created with `react-native init myapp`. + + ```diff + + + + + + + + + + + + + + + + + + + + + + + ``` + +That's it. We did not remove the `INTERNET` permission as pretty much all apps use it. Now whenever you create a production APK, these 3 permissions will be removed. When you create a debug APK (`react-native run-android`) it will install the APK with these permissions added. diff --git a/website/versioned_docs/version-0.61/running-on-device.md b/website/versioned_docs/version-0.61/running-on-device.md new file mode 100644 index 00000000000..07e5f72b108 --- /dev/null +++ b/website/versioned_docs/version-0.61/running-on-device.md @@ -0,0 +1,316 @@ +--- +id: running-on-device +title: Running On Device +--- + +It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production. + +If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the [Getting Started guide](getting-started.md). + +
+
    + + +
+
+ + + +## Running your app on iOS devices + + + +## Running your app on Android devices + + + +
+ Development OS: + + + + + +
+ + + +A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the [Quick Start instructions](getting-started.md) to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app. + + + +### 1. Plug in your device via USB + +Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the `ios` folder in your project, then open the `.xcodeproj` file, or if you are using CocoaPods open `.xcworkspace`, within it using Xcode. + +If this is your first time running an app on your iOS device, you may need to register your device for development. Open the **Product** menu from Xcode's menubar, then go to **Destination**. Look for and select your device from the list. Xcode will then register your device for development. + +### 2. Configure code signing + +Register for an [Apple developer account](https://developer.apple.com/) if you don't have one yet. + +Select your project in the Xcode Project Navigator, then select your main target (it should share the same name as your project). Look for the "General" tab. Go to "Signing" and make sure your Apple developer account or team is selected under the Team dropdown. Do the same for the tests target (it ends with Tests, and is below your main target). + +![](/docs/assets/RunningOnDeviceCodeSigning.png) + +Repeat this step for the Tests target in your project. + +### 3. Build and Run your app + +If everything is set up correctly, your device will be listed as the build target in the Xcode toolbar, and it will also appear in the Devices pane (`⇧⌘2`). You can now press the **Build and run** button (`⌘R`) or select **Run** from the **Product** menu. Your app will launch on your device shortly. + +![](/docs/assets/RunningOnDeviceReady.png) + +> If you run into any issues, please take a look at Apple's [Launching Your App on a Device](https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/LaunchingYourApponDevices/LaunchingYourApponDevices.html#//apple_ref/doc/uid/TP40012582-CH27-SW4) docs. + + + +### 1. Enable Debugging over USB + +Most Android devices can only install and run apps downloaded from Google Play, by default. You will need to enable USB Debugging on your device in order to install your app during development. + +To enable USB debugging on your device, you will first need to enable the "Developer options" menu by going to **Settings** → **About phone** → **Software information** and then tapping the `Build number` row at the bottom seven times. You can then go back to **Settings** → **Developer options** to enable "USB debugging". + +### 2. Plug in your device via USB + +Let's now set up an Android device to run our React Native projects. Go ahead and plug in your device via USB to your development machine. + + + +Next, check the manufacturer code by using `lsusb` (on mac, you must first [install lsusb](https://github.com/jlhonora/lsusb)). `lsusb` should output something like this: + +```bash +$ lsusb +Bus 002 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub +Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub +Bus 001 Device 003: ID 22b8:2e76 Motorola PCS +Bus 001 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub +Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub +Bus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub +Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub +``` + +These lines represent the USB devices currently connected to your machine. + +You want the line that represents your phone. If you're in doubt, try unplugging your phone and running the command again: + +```bash +$ lsusb +Bus 002 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub +Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub +Bus 001 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub +Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub +Bus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub +Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub +``` + +You'll see that after removing the phone, the line which has the phone model ("Motorola PCS" in this case) disappeared from the list. This is the line that we care about. + +`Bus 001 Device 003: ID 22b8:2e76 Motorola PCS` + +From the above line, you want to grab the first four digits from the device ID: + +`22b8:2e76` + +In this case, it's `22b8`. That's the identifier for Motorola. + +You'll need to input this into your udev rules in order to get up and running: + +```sh +echo 'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"' | sudo tee /etc/udev/rules.d/51-android-usb.rules +``` + +Make sure that you replace `22b8` with the identifier you get in the above command. + + + +Now check that your device is properly connecting to ADB, the Android Debug Bridge, by running `adb devices`. + +``` +$ adb devices +List of devices attached +emulator-5554 offline # Google emulator +14ed2fcc device # Physical device +``` + +Seeing `device` in the right column means the device is connected. You must have **only one device connected** at a time. + +### 3. Run your app + +Type the following in your command prompt to install and launch your app on the device: + +``` +$ react-native run-android +``` + +> If you get a "bridge configuration isn't available" error, see [Using adb reverse](running-on-device.md#method-1-using-adb-reverse-recommended). + +> Hint +> +> You can also use the `React Native CLI` to generate and run a `Release` build (e.g. `react-native run-android --variant=release`). + + + + + +## Connecting to the development server + +You can also iterate quickly on a device using the development server. You only have to be on the same Wi-Fi network as your computer. Shake your device to open the [Developer menu](debugging.md#accessing-the-in-app-developer-menu), then enable Live Reload. Your app will reload whenever your JavaScript code has changed. + +![](/docs/assets/DeveloperMenu.png) + +### Troubleshooting + +> If you have any issues, ensure that your Mac and device are on the same network and can reach each other. Many open wireless networks with captive portals are configured to prevent devices from reaching other devices on the network. You may use your device's Personal Hotspot feature in this case. + +When trying to connect to the development server you might get a [red screen with an error](debugging.md#in-app-errors-and-warnings) saying: + +> Connection to [http://localhost:8081/debugger-proxy?role=client]() timed out. Are you running node proxy? If you are running on the device, check if you have the right IP address in `RCTWebSocketExecutor.m`. + +To solve this issue check the following points. + +#### 1. Wi-Fi network. + +Make sure your laptop and your phone are on the **same** Wi-Fi network. + +#### 2. IP address + +Make sure that the build script detected the IP address of your machine correctly (e.g. 10.0.1.123). + +![](/docs/assets/XcodeBuildIP.png) + +Open the **Report navigator** tab, select the last **Build** and search for `xip.io`. The IP address which gets embedded in the app should match your machines IP address plus the domain `.xip.io` (e.g. 10.0.1.123.xip.io) + +#### 3. Network/router configuration + +React Native uses the wildcard DNS service **xip.io** to address your device, as Apple ATS prohibits URLs with IP addresses instead of domain names, and developers' networks are often not set up to resolve local hostnames. Some routers have security features to prevent DNS Servers from resolving to anything in the local IP range. + +Now check if you are able to resolve the xip.io address, by running `nslookup`. + +```bash +$ nslookup 10.0.1.123.xip.io +``` + +If it doesn't resolve your local IP address either the **xip.io** service is down or more likely your router prevents it. + +To still use xip.io behind your router: + +- configure your phone to use Google DNS (8.8.8.8) +- disable the appropriate security feature in your router + + + +## Connecting to the development server + +You can also iterate quickly on a device by connecting to the development server running on your development machine. There are several ways of accomplishing this, depending on whether you have access to a USB cable or a Wi-Fi network. + +### Method 1: Using adb reverse (recommended) + + + +You can use this method if your device is running Android 5.0 (Lollipop) or newer, it has USB debugging enabled, and it is connected via USB to your development machine. + + + +Run the following in a command prompt: + +``` +$ adb -s reverse tcp:8081 tcp:8081 +``` + +To find the device name, run the following adb command: + +``` +$ adb devices +``` + +You can now enable Live reloading from the [Developer menu](debugging.md#accessing-the-in-app-developer-menu). Your app will reload whenever your JavaScript code has changed. + +### Method 2: Connect via Wi-Fi + +You can also connect to the development server over Wi-Fi. You'll first need to install the app on your device using a USB cable, but once that has been done you can debug wirelessly by following these instructions. You'll need your development machine's current IP address before proceeding. + + + +You can find the IP address in **System Preferences** → **Network**. + + + +Open the command prompt and type `ipconfig` to find your machine's IP address ([more info](http://windows.microsoft.com/en-us/windows/using-command-line-tools-networking-information)). + + + +Open a terminal and type `/sbin/ifconfig` to find your machine's IP address. + + + + + +1. Make sure your laptop and your phone are on the **same** Wi-Fi network. +2. Open your React Native app on your device. +3. You'll see a [red screen with an error](debugging.md#in-app-errors-and-warnings). This is OK. The following steps will fix that. +4. Open the in-app [Developer menu](debugging.md#accessing-the-in-app-developer-menu). +5. Go to **Dev Settings** → **Debug server host & port for device**. +6. Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081). +7. Go back to the **Developer menu** and select **Reload JS**. + +You can now enable Live reloading from the [Developer menu](debugging.md#accessing-the-in-app-developer-menu). Your app will reload whenever your JavaScript code has changed. + + + +## Building your app for production + +You have built a great app using React Native, and you are now itching to release it in the App Store. The process is the same as any other native iOS app, with some additional considerations to take into account. + +> If you are using Expo then read the Expo Guide for [Building Standalone Apps](https://docs.expo.io/versions/latest/distribution/building-standalone-apps/). + +### 1. Enable App Transport Security + +App Transport Security is a security feature introduced in iOS 9 that rejects all HTTP requests that are not sent over HTTPS. This can result in HTTP traffic being blocked, including the developer React Native server. ATS is disabled for `localhost` by default in React Native projects in order to make development easier. + +You should re-enable ATS prior to building your app for production by removing the `localhost` entry from the `NSExceptionDomains` dictionary in your `Info.plist` file in the `ios/` folder. You can also re-enable ATS from within Xcode by opening your target properties under the Info pane and editing the App Transport Security Settings entry. + +> If your application needs to access HTTP resources on production, see [this post](http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/) to learn how to configure ATS on your project. + +### 2. Configure release scheme + +Building an app for distribution in the App Store requires using the `Release` scheme in Xcode. Apps built for `Release` will automatically disable the in-app Developer menu, which will prevent your users from inadvertently accessing the menu in production. It will also bundle the JavaScript locally, so you can put the app on a device and test whilst not connected to the computer. + +To configure your app to be built using the `Release` scheme, go to **Product** → **Scheme** → **Edit Scheme**. Select the **Run** tab in the sidebar, then set the Build Configuration dropdown to `Release`. + +![](/docs/assets/ConfigureReleaseScheme.png) + +#### Pro Tips + +As your App Bundle grows in size, you may start to see a blank screen flash between your splash screen and the display of your root application view. If this is the case, you can add the following code to `AppDelegate.m` in order to keep your splash screen displayed during the transition. + +```objc + // Place this code after "[self.window makeKeyAndVisible]" and before "return YES;" + UIView* launchScreenView = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0]; + launchScreenView.frame = self.window.bounds; + rootView.loadingView = launchScreenView; +``` + +The static bundle is built every time you target a physical device, even in Debug. If you want to save time, turn off bundle generation in Debug by adding the following to your shell script in the Xcode Build Phase `Bundle React Native code and images`: + +```shell + if [ "${CONFIGURATION}" == "Debug" ]; then + export SKIP_BUNDLING=true + fi +``` + +### 3. Build app for release + +You can now build your app for release by tapping `⌘B` or selecting **Product** → **Build** from the menu bar. Once built for release, you'll be able to distribute the app to beta testers and submit the app to the App Store. + +> You can also use the `React Native CLI` to perform this operation using the option `--configuration` with the value `Release` (e.g. `react-native run-ios --configuration Release`). + + + +## Building your app for production + +You have built a great app using React Native, and you are now itching to release it in the Play Store. The process is the same as any other native Android app, with some additional considerations to take into account. Follow the guide for [generating a signed APK](signed-apk-android.md) to learn more. diff --git a/website/versioned_docs/version-0.61/running-on-simulator-ios.md b/website/versioned_docs/version-0.61/running-on-simulator-ios.md new file mode 100644 index 00000000000..59df9668515 --- /dev/null +++ b/website/versioned_docs/version-0.61/running-on-simulator-ios.md @@ -0,0 +1,14 @@ +--- +id: running-on-simulator-ios +title: Running On Simulator +--- + +## Starting the simulator + +Once you have your React Native project initialized, you can run `react-native run-ios` inside the newly created project directory. If everything is set up correctly, you should see your new app running in the iOS Simulator shortly. + +## Specifying a device + +You can specify the device the simulator should run with the `--simulator` flag, followed by the device name as a string. The default is `"iPhone X"`. If you wish to run your app on an iPhone 5s, run `react-native run-ios --simulator="iPhone 5s"`. + +The device names correspond to the list of devices available in Xcode. You can check your available devices by running `xcrun simctl list devices` from the console. diff --git a/website/versioned_docs/version-0.61/safeareaview.md b/website/versioned_docs/version-0.61/safeareaview.md new file mode 100644 index 00000000000..727278dceb7 --- /dev/null +++ b/website/versioned_docs/version-0.61/safeareaview.md @@ -0,0 +1,45 @@ +--- +id: safeareaview +title: SafeAreaView +--- + +The purpose of `SafeAreaView` is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later. + +`SafeAreaView` renders nested content and automatically applies padding to reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect the physical limitation of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone X). + +### Usage Example + +To use, wrap your top level view with a `SafeAreaView` with a `flex: 1` style applied to it. You may also want to use a background color that matches your application's design. + +```SnackPlayer name=SafeAreaView +import React from 'react'; +import { StyleSheet, Text, SafeAreaView } from 'react-native'; + +export default function App() { + return ( + + Page content + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, +}); +``` + +--- + +# Reference + +## Props + +Inherits [View Props](view.md#props). + +### `emulateUnlessSupported` + +| Type | Required | Default | +| ---- | -------- | ------- | +| bool | No | true | diff --git a/website/versioned_docs/version-0.61/scrollview.md b/website/versioned_docs/version-0.61/scrollview.md new file mode 100644 index 00000000000..01ee6827846 --- /dev/null +++ b/website/versioned_docs/version-0.61/scrollview.md @@ -0,0 +1,730 @@ +--- +id: scrollview +title: ScrollView +--- + +Component that wraps platform ScrollView while providing integration with touch locking "responder" system. + +Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer `{flex: 1}` down the view stack can lead to errors here, which the element inspector makes quick to debug. + +Doesn't yet support other contained responders from blocking this scroll view from becoming the responder. + +`` vs [``](flatlist.md) - which one to use? + +`ScrollView` renders all its react child components at once, but this has a performance downside. + +Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage. + +This is where `FlatList` comes into play. `FlatList` renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time. + +`FlatList` is also handy if you want to render separators between your items, multiple columns, infinite scroll loading, or any number of other features it supports out of the box. + +### Example + +```SnackPlayer name=ScrollView +import React from 'react'; +import { StyleSheet, Text, SafeAreaView, ScrollView } from 'react-native'; +import Constants from 'expo-constants'; + +export default function App() { + return ( + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + marginTop: Constants.statusBarHeight, + }, + scrollView: { + backgroundColor: 'pink', + marginHorizontal: 20, + }, + text: { + fontSize: 42, + }, +}); +``` + +--- + +# Reference + +## Props + +Inherits [View Props](view.md#props). + +### `alwaysBounceHorizontal` + +When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself. The default value is true when `horizontal={true}` and false otherwise. + +| Type | Required | Platform | +| ---- | -------- | -------- | +| bool | No | iOS | + +--- + +### `alwaysBounceVertical` + +When true, the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself. The default value is false when `horizontal={true}` and true otherwise. + +| Type | Required | Platform | +| ---- | -------- | -------- | +| bool | No | iOS | + +--- + +### `automaticallyAdjustContentInsets` + +Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/ toolbar. The default value is true. + +| Type | Required | Platform | +| ---- | -------- | -------- | +| bool | No | iOS | + +--- + +### `bounces` + +When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. When false, it disables all bouncing even if the `alwaysBounce*` props are true. The default value is true. + +| Type | Required | Platform | +| ---- | -------- | -------- | +| bool | No | iOS | + +--- + +### `bouncesZoom` + +When true, gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture end, otherwise the zoom will not exceed the limits. + +| Type | Required | Platform | +| ---- | -------- | -------- | +| bool | No | iOS | + +--- + +### `canCancelContentTouches` + +When false, once tracking starts, won't try to drag if the touch moves. The default value is true. + +| Type | Required | Platform | +| ---- | -------- | -------- | +| bool | No | iOS | + +--- + +### `centerContent` + +When true, the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect. The default value is false. + +| Type | Required | Platform | +| ---- | -------- | -------- | +| bool | No | iOS | + +--- + +### `contentContainerStyle` + +These styles will be applied to the scroll view content container which wraps all of the child views. Example: + +``` +return ( + + +); +... +const styles = StyleSheet.create({ + contentContainer: { + paddingVertical: 20 + } +}); +``` + +| Type | Required | +| ------------------------------------ | -------- | +| StyleSheetPropType(View Style props) | No | + +--- + +### `contentInset` + +The amount by which the scroll view content is inset from the edges of the scroll view. Defaults to `{top: 0, left: 0, bottom: 0, right: 0}`. + +| Type | Required | Platform | +| ------------------------------------------------------------------ | -------- | -------- | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + +--- + +### `contentInsetAdjustmentBehavior` + +This property specifies how the safe area insets are used to modify the content area of the scroll view. The default value of this property is "never". Available on iOS 11 and later. + +| Type | Required | Platform | +| ------------------------------------------------------ | -------- | -------- | +| enum('automatic', 'scrollableAxes', 'never', 'always') | No | iOS | + +--- + +### `contentOffset` + +Used to manually set the starting scroll offset. The default value is `{x: 0, y: 0}`. + +| Type | Required | Platform | +| ------------- | -------- | -------- | +| PointPropType | No | iOS | + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use string shortcuts `"normal"` and `"fast"` which match the underlying iOS settings for `UIScrollViewDecelerationRateNormal` and `UIScrollViewDecelerationRateFast` respectively. + +- `'normal'` (the default), 0.998 on iOS, 0.985 on Android. +- `'fast'`, 0.99 on iOS, 0.9 on Android. + +| Type | Required | +| ------------------------------- | -------- | +| enum('fast', 'normal'), ,number | No | + +--- + +### `directionalLockEnabled` + +When true, the ScrollView will try to lock to only vertical or horizontal scrolling while dragging. The default value is false. + +| Type | Required | Platform | +| ---- | -------- | -------- | +| bool | No | iOS | + +--- + +### `disableIntervalMomentum` + +When true, the scroll view stops on the next index (in relation to scroll position at release) regardless of how fast the gesture is. This can be used for horizontal pagination when the page is less than the width of the ScrollView. The default value is false. + +| Type | Required | +| ---- | -------- | +| bool | No | + +--- + +### `disableScrollViewPanResponder` + +When true, the default JS pan responder on the ScrollView is disabled, and full control over touches inside the ScrollView is left to its child components. This is particularly useful if `snapToInterval` is enabled, since it does not follow typical touch patterns. Do not use this on regular ScrollView use cases without `snapToInterval` as it may cause unexpected touches to occur while scrolling. The default value is false. + +| Type | Required | +| ---- | -------- | +| bool | No | + +--- + +### `endFillColor` + +Sometimes a scrollview takes up more space than its content fills. When this is the case, this prop will fill the rest of the scrollview with a color to avoid setting a background and creating unnecessary overdraw. This is an advanced optimization that is not needed in the general case. + +| Type | Required | Platform | +| ------------------ | -------- | -------- | +| [color](colors.md) | No | Android | + +--- + +### `horizontal` + +When true, the scroll view's children are arranged horizontally in a row instead of vertically in a column. The default value is false. + +| Type | Required | +| ---- | -------- | +| bool | No | + +--- + +### `indicatorStyle` + +The style of the scroll indicators. + +- `'default'` (the default), same as `black`. +- `'black'`, scroll indicator is `black`. This style is good against a light background. +- `'white'`, scroll indicator is `white`. This style is good against a dark background. + +| Type | Required | Platform | +| --------------------------------- | -------- | -------- | +| enum('default', 'black', 'white') | No | iOS | + +--- + +### `invertStickyHeaders` + +If sticky headers should stick at the bottom instead of the top of the ScrollView. This is usually used with inverted ScrollViews. + +| Type | Required | +| ---- | -------- | +| bool | No | + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + +_Cross platform_ + +- `'none'` (the default), drags do not dismiss the keyboard. +- `'on-drag'`, the keyboard is dismissed when a drag begins. + +_iOS Only_ + +- `'interactive'`, the keyboard is dismissed interactively with the drag and moves in synchrony with the touch; dragging upwards cancels the dismissal. On android this is not supported and it will have the same behavior as 'none'. + +| Type | Required | +| -------------------------------------- | -------- | +| enum('none', 'on-drag', 'interactive') | No | + +--- + +### `keyboardShouldPersistTaps` + +Determines when the keyboard should stay visible after a tap. + +- `'never'` (the default), tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When this happens, children won't receive the tap. +- `'always'`, the keyboard will not dismiss automatically, and the scroll view will not catch taps, but children of the scroll view can catch taps. +- `'handled'`, the keyboard will not dismiss automatically when the tap was handled by children of the scroll view (or captured by an ancestor). +- `false`, **_deprecated_**, use 'never' instead +- `true`, **_deprecated_**, use 'always' instead + +| Type | Required | +| ----------------------------------------------- | -------- | +| enum('always', 'never', 'handled', false, true) | No | + +--- + +### `maintainVisibleContentPosition` + +When set, the scroll view will adjust the scroll position so that the first child that is currently visible and at or beyond `minIndexForVisible` will not change position. This is useful for lists that are loading content in both directions, e.g. a chat thread, where new messages coming in might otherwise cause the scroll position to jump. A value of 0 is common, but other values such as 1 can be used to skip loading spinners or other content that should not maintain position. + +The optional `autoscrollToTopThreshold` can be used to make the content automatically scroll to the top after making the adjustment if the user was within the threshold of the top before the adjustment was made. This is also useful for chat-like applications where you want to see new messages scroll into place, but not if the user has scrolled up a ways and it would be disruptive to scroll a bunch. + +Caveat 1: Reordering elements in the scrollview with this enabled will probably cause jumpiness and jank. It can be fixed, but there are currently no plans to do so. For now, don't re-order the content of any ScrollViews or Lists that use this feature. + +Caveat 2: This uses `contentOffset` and `frame.origin` in native code to compute visibility. Occlusion, transforms, and other complexity won't be taken into account as to whether content is "visible" or not. + +| Type | Required | Platform | +| ------------------------------------------------------------------------ | -------- | -------- | +| object: { minIndexForVisible: number, autoscrollToTopThreshold: number } | No | iOS | + +--- + +### `maximumZoomScale` + +The maximum allowed zoom scale. The default value is 1.0. + +| Type | Required | Platform | +| ------ | -------- | -------- | +| number | No | iOS | + +--- + +### `minimumZoomScale` + +The minimum allowed zoom scale. The default value is 1.0. + +| Type | Required | Platform | +| ------ | -------- | -------- | +| number | No | iOS | + +--- + +### `nestedScrollEnabled` + +Enables nested scrolling for Android API level 21+. Nested scrolling is supported by default on iOS. + +| Type | Required | Platform | +| ---- | -------- | -------- | +| bool | No | Android | + +### `onContentSizeChange` + +Called when scrollable content view of the ScrollView changes. + +Handler function is passed the content width and content height as parameters: `(contentWidth, contentHeight)` + +It's implemented using onLayout handler attached to the content container which this ScrollView renders. + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + +### `onMomentumScrollBegin` + +Called when the momentum scroll starts (scroll which occurs as the ScrollView starts gliding). + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + +### `onMomentumScrollEnd` + +Called when the momentum scroll ends (scroll which occurs as the ScrollView glides to a stop). + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + +### `onScroll` + +Fires at most once per frame during scrolling. The frequency of the events can be controlled using the `scrollEventThrottle` prop. The event has the shape `{ nativeEvent: { contentInset: { bottom, left, right, top }, contentOffset: { x, y }, contentSize: { height, width }, layoutMeasurement: { height, width }, zoomScale } }`. All values are numbers. + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + +### `onScrollBeginDrag` + +Called when the user begins to drag the scroll view. + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + +### `onScrollEndDrag` + +Called when the user stops dragging the scroll view and it either stops or begins to glide. + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + +### `onScrollToTop` + +Fires when the scroll view scrolls to top after the status bar has been tapped. + +| Type | Required | Platform | +| -------- | -------- | -------- | +| function | No | iOS | + +--- + +### `overScrollMode` + +Used to override default value of overScroll mode. + +Possible values: + +- `'auto'` - Default value, allow a user to over-scroll this view only if the content is large enough to meaningfully scroll. +- `'always'` - Always allow a user to over-scroll this view. +- `'never'` - Never allow a user to over-scroll this view. + +| Type | Required | Platform | +| ------------------------------- | -------- | -------- | +| enum('auto', 'always', 'never') | No | Android | + +--- + +### `pagingEnabled` + +When true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. The default value is false. + +Note: Vertical pagination is not supported on Android. + +| Type | Required | +| ---- | -------- | +| bool | No | + +--- + +### `persistentScrollbar` + +Causes the scrollbars not to turn transparent when they are not in use. The default value is false. + +| Type | Required | Platform | +| ---- | -------- | -------- | +| bool | No | Android | + +--- + +### `pinchGestureEnabled` + +When true, ScrollView allows use of pinch gestures to zoom in and out. The default value is true. + +| Type | Required | Platform | +| ---- | -------- | -------- | +| bool | No | iOS | + +--- + +### `refreshControl` + +A RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView. Only works for vertical ScrollViews (`horizontal` prop must be `false`). + +See [RefreshControl](refreshcontrol.md). + +| Type | Required | +| ------- | -------- | +| element | No | + +--- + +### `removeClippedSubviews` + +Experimental: When true, offscreen child views (whose `overflow` value is `hidden`) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is true. + +| Type | Required | +| ---- | -------- | +| bool | No | + +--- + +### `scrollBarThumbImage` + +Optionally an image can be used for the scroll bar thumb. This will override the color. While the image is loading or the image fails to load the color will be used instead. Use an alpha of 0 in the color to avoid seeing it while the image is loading. + +- `uri`, a string representing the resource identifier for the image, which should be either a local file path or the name of a static image resource. +- `number`, opaque type returned by something like `import IMAGE from './image.jpg'`. + +| Type | Required | Platform | +| ------ | -------- | -------- | +| number | No | VR | + +--- + +### `scrollEnabled` + +When false, the view cannot be scrolled via touch interaction. The default value is true. + +Note that the view can always be scrolled by calling `scrollTo`. + +| Type | Required | +| ---- | -------- | +| bool | No | + +--- + +### `scrollEventThrottle` + +This controls how often the scroll event will be fired while scrolling (as a time interval in ms). A lower number yields better accuracy for code that is tracking the scroll position, but can lead to scroll performance problems due to the volume of information being send over the bridge. You will not notice a difference between values set between 1-16 as the JS run loop is synced to the screen refresh rate. If you do not need precise scroll position tracking, set this value higher to limit the information being sent across the bridge. The default value is zero, which results in the scroll event being sent only once each time the view is scrolled. + +| Type | Required | Platform | +| ------ | -------- | -------- | +| number | No | iOS | + +--- + +### `scrollIndicatorInsets` + +The amount by which the scroll view indicators are inset from the edges of the scroll view. This should normally be set to the same value as the `contentInset`. Defaults to `{0, 0, 0, 0}`. + +| Type | Required | Platform | +| ------------------------------------------------------------------ | -------- | -------- | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + +--- + +### `scrollPerfTag` + +Tag used to log scroll performance on this scroll view. Will force momentum events to be turned on (see sendMomentumEvents). This doesn't do anything out of the box and you need to implement a custom native FpsListener for it to be useful. + +| Type | Required | Platform | +| ------ | -------- | -------- | +| string | No | Android | + +--- + +### `scrollToOverflowEnabled` + +When true, the scroll view can be programmatically scrolled beyond its content size. The default value is false. + +| Type | Required | Platform | +| ---- | -------- | -------- | +| bool | No | iOS | + +--- + +### `scrollsToTop` + +When true, the scroll view scrolls to top when the status bar is tapped. The default value is true. + +| Type | Required | Platform | +| ---- | -------- | -------- | +| bool | No | iOS | + +--- + +### `DEPRECATED_sendUpdatedChildFrames` + +When true, ScrollView will emit updateChildFrames data in scroll events, otherwise will not compute or emit child frame data. This only exists to support legacy issues, `onLayout` should be used instead to retrieve frame data. The default value is false. + +| Type | Required | Platform | +| ---- | -------- | -------- | +| bool | No | iOS | + +--- + +### `showsHorizontalScrollIndicator` + +When true, shows a horizontal scroll indicator. The default value is true. + +| Type | Required | +| ---- | -------- | +| bool | No | + +--- + +### `showsVerticalScrollIndicator` + +When true, shows a vertical scroll indicator. The default value is true. + +| Type | Required | +| ---- | -------- | +| bool | No | + +--- + +### `snapToAlignment` + +When `snapToInterval` is set, `snapToAlignment` will define the relationship of the snapping to the scroll view. + +- `'start'` (the default) will align the snap at the left (horizontal) or top (vertical). +- `'center'` will align the snap in the center. +- `'end'` will align the snap at the right (horizontal) or bottom (vertical). + +| Type | Required | Platform | +| ------------------------------ | -------- | -------- | +| enum('start', 'center', 'end') | No | iOS | + +--- + +### `snapToEnd` + +Use in conjunction with `snapToOffsets`. By default, the end of the list counts as a snap offset. Set `snapToEnd` to false to disable this behavior and allow the list to scroll freely between its end and the last `snapToOffsets` offset. The default value is true. + +| Type | Required | +| ------- | -------- | +| boolean | No | + +--- + +### `snapToInterval` + +When set, causes the scroll view to stop at multiples of the value of `snapToInterval`. This can be used for paginating through children that have lengths smaller than the scroll view. Typically used in combination with `snapToAlignment` and `decelerationRate="fast"`. Overrides less configurable `pagingEnabled` prop. + +| Type | Required | +| ------ | -------- | +| number | No | + +--- + +### `snapToOffsets` + +When set, causes the scroll view to stop at the defined offsets. This can be used for paginating through variously sized children that have lengths smaller than the scroll view. Typically used in combination with `decelerationRate="fast"`. Overrides less configurable `pagingEnabled` and `snapToInterval` props. + +| Type | Required | +| --------------- | -------- | +| array of number | No | + +--- + +### `snapToStart` + +Use in conjunction with `snapToOffsets`. By default, the beginning of the list counts as a snap offset. Set `snapToStart` to false to disable this behavior and allow the list to scroll freely between its start and the first `snapToOffsets` offset. The default value is true. + +| Type | Required | +| ------- | -------- | +| boolean | No | + +--- + +### `stickyHeaderIndices` + +An array of child indices determining which children get docked to the top of the screen when scrolling. For example, passing `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction with `horizontal={true}`. + +| Type | Required | +| --------------- | -------- | +| array of number | No | + +--- + +### `zoomScale` + +The current scale of the scroll view content. The default value is 1.0. + +| Type | Required | Platform | +| ------ | -------- | -------- | +| number | No | iOS | + +## Methods + +### `flashScrollIndicators()` + +```jsx +flashScrollIndicators(); +``` + +Displays the scroll indicators momentarily. + +--- + +### `scrollTo()` + +```jsx +scrollTo( + options?: {x?: number, y?: number, animated?: boolean} | number, + deprecatedX?: number, + deprecatedAnimated?: boolean, +); +``` + +Scrolls to a given x, y offset, either immediately, with a smooth animation. + +Example: + +`scrollTo({x: 0, y: 0, animated: true})` + +Note: The weird function signature is due to the fact that, for historical reasons, the function also accepts separate arguments as an alternative to the options object. This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED. + +--- + +### `scrollToEnd()` + +```jsx +scrollToEnd(([options]: { animated: boolean, duration: number })); +``` + +If this is a vertical ScrollView scrolls to the bottom. If this is a horizontal ScrollView scrolls to the right. + +Use `scrollToEnd({animated: true})` for smooth animated scrolling, `scrollToEnd({animated: false})` for immediate scrolling. For Android, you may specify a duration, e.g. `scrollToEnd({duration: 500})` for a controlled duration scroll. If no options are passed, `animated` defaults to true. + +--- + +### `scrollWithoutAnimationTo()` + +```jsx +scrollWithoutAnimationTo(y, x); +``` + +Deprecated, use `scrollTo` instead. diff --git a/website/versioned_docs/version-0.61/sectionlist.md b/website/versioned_docs/version-0.61/sectionlist.md new file mode 100644 index 00000000000..9b8d97040fe --- /dev/null +++ b/website/versioned_docs/version-0.61/sectionlist.md @@ -0,0 +1,455 @@ +--- +id: sectionlist +title: SectionList +--- + +A performant interface for rendering sectioned lists, supporting the most handy features: + +- Fully cross-platform. +- Configurable viewability callbacks. +- List header support. +- List footer support. +- Item separator support. +- Section header support. +- Section separator support. +- Heterogeneous data and item rendering support. +- Pull to Refresh. +- Scroll loading. + +If you don't need section support and want a simpler interface, use [``](flatlist.md). + +### Example + +```SnackPlayer name=SectionList +import React from 'react'; +import { + StyleSheet, + Text, + View, + SafeAreaView, + SectionList, +} from 'react-native'; +import Constants from 'expo-constants'; + +const DATA = [ + { + title: 'Main dishes', + data: ['Pizza', 'Burger', 'Risotto'], + }, + { + title: 'Sides', + data: ['French Fries', 'Onion Rings', 'Fried Shrimps'], + }, + { + title: 'Drinks', + data: ['Water', 'Coke', 'Beer'], + }, + { + title: 'Desserts', + data: ['Cheese Cake', 'Ice Cream'], + }, +]; + +function Item({ title }) { + return ( + + {title} + + ); +} + +export default function App() { + return ( + + item + index} + renderItem={({ item }) => } + renderSectionHeader={({ section: { title } }) => ( + {title} + )} + /> + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + marginTop: Constants.statusBarHeight, + marginHorizontal: 16, + }, + item: { + backgroundColor: '#f9c2ff', + padding: 20, + marginVertical: 8, + }, + header: { + fontSize: 32, + }, + title: { + fontSize: 24, + }, +}); +``` + +This is a convenience wrapper around [``](virtualizedlist.md), and thus inherits its props (as well as those of [``](scrollview.md) that aren't explicitly listed here, along with the following caveats: + +- Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay. +- This is a `PureComponent` which means that it will not re-render if `props` remain shallow-equal. Make sure that everything your `renderItem` function depends on is passed as a prop (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on changes. This includes the `data` prop and parent component state. +- In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes. +- By default, the list looks for a `key` prop on each item and uses that for the React key. Alternatively, you can provide a custom `keyExtractor` prop. + +### Props + +- [`ScrollView` props...](scrollview.md#props) + +Required props: + +- [`renderItem`](sectionlist.md#renderitem) +- [`sections`](sectionlist.md#sections) + +Optional props: + +- [`extraData`](sectionlist.md#extradata) +- [`initialNumToRender`](sectionlist.md#initialnumtorender) +- [`inverted`](sectionlist.md#inverted) +- [`ItemSeparatorComponent`](sectionlist.md#itemseparatorcomponent) +- [`keyExtractor`](sectionlist.md#keyextractor) +- [`legacyImplementation`](sectionlist.md#legacyimplementation) +- [`ListEmptyComponent`](sectionlist.md#listemptycomponent) +- [`ListFooterComponent`](sectionlist.md#listfootercomponent) +- [`ListHeaderComponent`](sectionlist.md#listheadercomponent) +- [`onEndReached`](sectionlist.md#onendreached) +- [`onEndReachedThreshold`](sectionlist.md#onendreachedthreshold) +- [`onRefresh`](sectionlist.md#onrefresh) +- [`onViewableItemsChanged`](sectionlist.md#onviewableitemschanged) +- [`refreshing`](sectionlist.md#refreshing) +- [`removeClippedSubviews`](sectionlist.md#removeclippedsubviews) +- [`renderSectionFooter`](sectionlist.md#rendersectionfooter) +- [`renderSectionHeader`](sectionlist.md#rendersectionheader) +- [`SectionSeparatorComponent`](sectionlist.md#sectionseparatorcomponent) +- [`stickySectionHeadersEnabled`](sectionlist.md#stickysectionheadersenabled) + +### Methods + +- [`flashScrollIndicators`](sectionlist.md#flashscrollindicators) +- [`recordInteraction`](sectionlist.md#recordinteraction) +- [`scrollToLocation`](sectionlist.md#scrolltolocation) + +### Type Definitions + +- [`Section`](sectionlist.md#section) + +--- + +# Reference + +## Props + +### `renderItem` + +Default renderer for every item in every section. Can be over-ridden on a per-section basis. Should return a React element. + +| Type | Required | +| -------- | -------- | +| function | Yes | + +The render function will be passed an object with the following keys: + +- 'item' (object) - the item object as specified in this section's `data` key +- 'index' (number) - Item's index within the section. +- 'section' (object) - The full section object as specified in `sections`. +- 'separators' (object) - An object with the following keys: + - 'highlight' (function) - `() => void` + - 'unhighlight' (function) - `() => void` + - 'updateProps' (function) - `(select, newProps) => void` + - 'select' (enum) - possible values are 'leading', 'trailing' + - 'newProps' (object) + +--- + +### `sections` + +The actual data to render, akin to the `data` prop in [`FlatList`](flatlist.md). + +| Type | Required | +| ------------------------------------------- | -------- | +| array of [Section](sectionlist.md#section)s | Yes | + +--- + +### `extraData` + +A marker property for telling the list to re-render (since it implements `PureComponent`). If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop, stick it here and treat it immutably. + +| Type | Required | +| ---- | -------- | +| any | No | + +--- + +### `initialNumToRender` + +How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions. + +| Type | Required | +| ------ | -------- | +| number | Yes | + +--- + +### `inverted` + +Reverses the direction of scroll. Uses scale transforms of -1. + +| Type | Required | +| --------- | -------- | +| [boolean] | No | + +--- + +### `ItemSeparatorComponent` + +Rendered in between each item, but not at the top or bottom. By default, `highlighted`, `section`, and `[leading/trailing][Item/Section]` props are provided. `renderItem` provides `separators.highlight`/`unhighlight` which will update the `highlighted` prop, but you can also add custom props with `separators.updateProps`. + +| Type | Required | +| ------------------------------ | -------- | +| [component, function, element] | No | + +--- + +### `keyExtractor` + +Used to extract a unique key for a given item at the specified index. Key is used for caching and as the React key to track item re-ordering. The default extractor checks `item.key`, then falls back to using the index, like React does. Note that this sets keys for each item, but each overall section still needs its own key. + +| Type | Required | +| ------------------------------------- | -------- | +| (item: Item, index: number) => string | Yes | + +--- + +### `legacyImplementation` + +The legacy implementation is no longer supported. + +| Type | Required | +| --------- | -------- | +| [boolean] | No | + +--- + +### `ListEmptyComponent` + +Rendered when the list is empty. Can be a React Component Class, a render function, or a rendered element. + +| Type | Required | +| ------------------------------ | -------- | +| [component, function, element] | No | + +--- + +### `ListFooterComponent` + +Rendered at the very end of the list. Can be a React Component Class, a render function, or a rendered element. + +| Type | Required | +| ------------------------------ | -------- | +| [component, function, element] | No | + +--- + +### `ListHeaderComponent` + +Rendered at the very beginning of the list. Can be a React Component Class, a render function, or a rendered element. + +| Type | Required | +| ---------------------------- | -------- | +| component, function, element | No | + +--- + +### `onEndReached` + +Called once when the scroll position gets within `onEndReachedThreshold` of the rendered content. + +| Type | Required | +| --------------------------------------------- | -------- | +| `[(info: {distanceFromEnd: number}) => void]` | No | + +--- + +### `onEndReachedThreshold` + +How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the `onEndReached` callback. Thus a value of 0.5 will trigger `onEndReached` when the end of the content is within half the visible length of the list. + +| Type | Required | +| ---------- | -------- | +| `[number]` | No | + +--- + +### `onRefresh` + +If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the `refreshing` prop correctly. To offset the RefreshControl from the top (e.g. by 100 pts), use `progressViewOffset={100}`. + +| Type | Required | +| -------------- | -------- | +| `[() => void]` | No | + +--- + +### `onViewableItemsChanged` + +Called when the viewability of rows changes, as defined by the `viewabilityConfig` prop. + +| Type | Required | +| -------- | -------- | +| function | No | + +The function will be passed an object with the following keys: + +- 'viewableItems' (array of `ViewToken`s) +- 'changed' (array of `ViewToken`s) + +The `ViewToken` type is exported by `ViewabilityHelper.js`: + +| Name | Type | Required | +| ---------- | ------- | -------- | +| item | any | Yes | +| key | string | Yes | +| index | number | No | +| isViewable | boolean | Yes | +| section | any | No | + +--- + +### `refreshing` + +Set this true while waiting for new data from a refresh. + +| Type | Required | +| ----------- | -------- | +| `[boolean]` | No | + +--- + +### `removeClippedSubviews` + +Note: may have bugs (missing content) in some circumstances - use at your own risk. + +This may improve scroll performance for large lists. + +| Type | Required | +| ------- | -------- | +| boolean | No | + +--- + +### `renderSectionFooter` + +Rendered at the bottom of each section. + +| Type | Required | +| ------------------------------------------------------ | -------- | +| `[(info: {section: SectionT}) => ?React.Element]` | No | + +--- + +### `renderSectionHeader` + +Rendered at the top of each section. These stick to the top of the `ScrollView` by default on iOS. See `stickySectionHeadersEnabled`. + +| Type | Required | +| ------------------------------------------------------ | -------- | +| `[(info: {section: SectionT}) => ?React.Element]` | No | + +--- + +### `SectionSeparatorComponent` + +Rendered at the top and bottom of each section (note this is different from `ItemSeparatorComponent` which is only rendered between items). These are intended to separate sections from the headers above and below and typically have the same highlight response as `ItemSeparatorComponent`. Also receives `highlighted`, `[leading/trailing][Item/Section]`, and any custom props from `separators.updateProps`. + +| Type | Required | +| ------------------- | -------- | +| `[ReactClass]` | No | + +--- + +### `stickySectionHeadersEnabled` + +Makes section headers stick to the top of the screen until the next one pushes it off. Only enabled by default on iOS because that is the platform standard there. + +| Type | Required | +| ------- | -------- | +| boolean | No | + +## Methods + +### `scrollToLocation()` + +```jsx +scrollToLocation(params); +``` + +Scrolls to the item at the specified `sectionIndex` and `itemIndex` (within the section) positioned in the viewable area such that `viewPosition` 0 places it at the top (and may be covered by a sticky header), 1 at the bottom, and 0.5 centered in the middle. + +> Note: Cannot scroll to locations outside the render window without specifying the `getItemLayout` or `onScrollToIndexFailed` prop. + +**Parameters:** + +| Name | Type | Required | Description | +| ------ | ------ | -------- | ----------- | +| params | object | Yes | See below. | + +Valid `params` keys are: + +- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`. +- 'itemIndex' (number) - Index within section for the item to scroll to. Required. +- 'sectionIndex' (number) - Index for section that contains the item to scroll to. Required. +- 'viewOffset' (number) - A fixed number of pixels to offset the final target position, e.g. to compensate for sticky headers. +- 'viewPosition' (number) - A value of `0` places the item specified by index at the top, `1` at the bottom, and `0.5` centered in the middle. + +--- + +### `recordInteraction()` + +```jsx +recordInteraction(); +``` + +Tells the list an interaction has occurred, which should trigger viewability calculations, e.g. if `waitForInteractions` is true and the user has not scrolled. This is typically called by taps on items or by navigation actions. + +--- + +### `flashScrollIndicators()` + +```jsx +flashScrollIndicators(); +``` + +Displays the scroll indicators momentarily. + +| Platfrom | +| -------- | +| iOS | + +## Type Definitions + +### Section + +An object that identifies the data to be rendered for a given section. + +| Type | +| ---- | +| any | + +**Properties:** + +| Name | Type | Description | +| -------------------------- | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| data | array | The data for rendering items in this section. Array of objects, much like [`FlatList`'s data prop](flatlist.md#data). | +| `[key]` | string | Optional key to keep track of section re-ordering. If you don't plan on re-ordering sections, the array index will be used by default. | +| `[renderItem]` | function | Optionally define an arbitrary item renderer for this section, overriding the default [`renderItem`](sectionlist.md#renderitem) for the list. | +| `[ItemSeparatorComponent]` | component, function, element | Optionally define an arbitrary item separator for this section, overriding the default [`ItemSeparatorComponent`](sectionlist.md#itemseparatorcomponent) for the list. | +| `[keyExtractor]` | function | Optionally define an arbitrary key extractor for this section, overriding the default [`keyExtractor`](sectionlist.md#keyextractor). | diff --git a/website/versioned_docs/version-0.61/security.md b/website/versioned_docs/version-0.61/security.md new file mode 100644 index 00000000000..3079642daec --- /dev/null +++ b/website/versioned_docs/version-0.61/security.md @@ -0,0 +1,128 @@ +--- +id: security +title: Security +--- + +Security is often overlooked when building apps. It is true that it is impossible to build software that is completely impenetrable—we’ve yet to invent a completely impenetrable lock (bank vaults do, after all, still get broken into). However, the probability of falling victim to a malicious attack or being exposed for a security vulnerability is inversely proportional to the effort you’re willing to put in to protecting your application against any such eventuality. Although an ordinary padlock is pickable, it is still much harder to get past than a cabinet hook! + + + +In this guide, you will learn about best practices for storing sensitive information, authentication, network security, and tools that will help you secure your app. This is not a preflight checklist—it is a catalogue of options, each of which will help further protect your app and users. + +## Storing Sensitive Info + +Never store sensitive API keys in your app code. Anything included in your code could be accessed in plain text by anyone inspecting the app bundle. Tools like [react-native-dotenv](https://github.com/zetachang/react-native-dotenv) and [react-native-config](https://github.com/luggit/react-native-config/) are great for adding environment-specific variables like API endpoints, but they should not be confused with server-side environment variables, which can often contain secrets and api keys. + +If you must have an API key or a secret to access some resource from your app, the most secure way to handle this would be to build an orchestration layer between your app and the resource. This could be a serverless function (e.g. using AWS Lambda or Google Cloud Functions) which can forward the request with the required API key or secret. Secrets in server side code cannot be accessed by the API consumers the same way secrets in your app code can. + +**For persisted user data, choose the right type of storage based on its sensitivity.** As your app is used, you’ll often find the need to save data on the device, whether to support your app being used offline, cut down on network requests or save your user’s access token between sessions so they wouldn’t have to re-authenticate each time they use the app. + +> **Persisted vs unpersisted** — persisted data is written to the device’s disk, which lets the data be read by your app across application launches without having to do another network request to fetch it or asking the user to re-enter it. But this also can make that data more vulnerable to being accessed by attackers. Unpersisted data is never written to disk—so there's no data to access! + +### Async Storage + +[Async Storage](https://github.com/react-native-community/async-storage) is a community-maintained module for React Native that provides an asynchronous, unencrypted, key-value store. Async Storage is not shared between apps: every app has its own sandbox environment and has no access to data from other apps. + +| **Do** use async storage when... | **Don't** use async storage for... | +| --------------------------------------------- | ---------------------------------- | +| Persisting non-sensitive data across app runs | Token storage | +| Persisting Redux state | Secrets | +| Persisting GraphQL state | | +| Storing global app-wide variables | | + +
+ Developer Notes + + + +
+ + + +> Async Storage is the React Native equivalent of Local Storage from the web + + + +### Secure Storage + +React Native does not come bundled with any way of storing sensitive data. However, there are pre-existing solutions for Android and iOS platforms. + +#### iOS - Keychain Services + +[Keychain Services](https://developer.apple.com/documentation/security/keychain_services) allows you to securely store small chunks of sensitive info for the user. This is an ideal place to store certificates, tokens, passwords, and any other sensitive information that doesn’t belong in Async Storage. + +#### Android - Secure Shared Preferences + +[Shared Preferences](https://developer.android.com/reference/android/content/SharedPreferences) is the Android equivalent for a persistent key-value data store. **Data in Shared Preferences is not encrypted by default**, but [Encrypted Shared Preferences](https://developer.android.com/topic/security/data) wraps the Shared Preferences class for Android, and automatically encrypts keys and values. + +#### Android - Keystore + +The [Android Keystore](https://developer.android.com/training/articles/keystore) system lets you store cryptographic keys in a container to make it more difficult to extract from the device. + +In order to use iOS Keychain services or Android Secure Shared Preferences, you can either write a bridge yourself or use a library which wraps them for you and provides a unified API at your own risk. Some libraries to consider: + +- [expo-secure-store](https://docs.expo.io/versions/latest/sdk/securestore/) +- [react-native-keychain](https://github.com/oblador/react-native-keychain) +- [react-native-sensitive-info](https://github.com/mCodex/react-native-sensitive-info) - secure for iOS, but uses Android Shared Preferences for Android (which is not secure by default). There is however a [branch](https://github.com/mCodex/react-native-sensitive-info/tree/keystore) that uses Android Keystore. + - [redux-persist-sensitive-storage](https://github.com/CodingZeal/redux-persist-sensitive-storage) - wraps react-native-sensitive-info for Redux. + +> **Be mindful of unintentionally storing or exposing sensitive info.** This could happen accidentally, for example saving sensitive form data in redux state and persisting the whole state tree in Async Storage. Or sending user tokens and personal info to an application monitoring service such as Sentry or Crashlytics. + +## Authentication and Deep Linking + + + +Mobile apps have a unique vulnerability that is non-existent in the web: **deep linking**. Deep linking is a way of sending data directly to a native application from an outside source. A deep link looks like `app://` where `app` is your app scheme and anything following the // could be used internally to handle the request. + +For example, if you were building an ecommerce app, you could use `app://products/1` to deep link to your app and open the product detail page for a product with id 1. You can think of these kind of like URLs on the web, but with one crucial distinction: + +Deep links are not secure and you should never send any sensitive information in them. + +The reason deep links are not secure is because there is no centralized method of registering URL schemes. As an application developer, you can use almost any url scheme you choose by [configuring it in Xcode](https://developer.apple.com/documentation/uikit/inter-process_communication/allowing_apps_and_websites_to_link_to_your_content/defining_a_custom_url_scheme_for_your_app) for iOS or [adding an intent on Android](https://developer.android.com/training/app-links/deep-linking). + +There is nothing stopping a malicious application from hijacking your deep link by also registering to the same scheme and then obtaining access to the data your link contains. Sending something like `app://products/1` is not harmful, but sending tokens is a security concern. + +When the operating system has two or more applications to choose from when opening a link, Android will show the user a modal and ask them to choose which application to use to open the link. On iOS however, the operating system will make the choice for you, so the user will be blissfully unaware. Apple has made steps to address this issue in later iOS versions (iOS 11) where they instituted a first-come-first-served principle, although this vulnerability could still be exploited in different ways which you can read more about [here](https://blog.trendmicro.com/trendlabs-security-intelligence/ios-url-scheme-susceptible-to-hijacking/). Using [universal links](https://developer.apple.com/ios/universal-links/) will allow linking to content within your app securely in iOS. + +### OAuth2 and Redirects + +The OAuth2 authentication protocol is incredibly popular nowadays, prided as the most complete and secure protocol around. The OpenID Connect protocol is also based on this. In OAuth2, the user is asked to authenticate via a third party. On successful completion, this third party redirects back to the requesting application with a verification code which can be exchanged for a JWT — a [JSON Web Token](https://jwt.io/introduction/). JWT is an open standard for securely transmitting information between parties on the web. + +On the web, this redirect step is secure, because URLs on the web are guaranteed to be unique. This is not true for apps because, as mentioned earlier, there is no centralized method of registering URL schemes! In order to address this security concern, an additional check must be added in the form of PKCE. + +[PKCE](https://oauth.net/2/pkce/), pronounced “Pixy” stands for Proof of Key Code Exchange, and is an extension to the OAuth 2 spec. This involves adding an additional layer of security which verifies that the authentication and token exchange requests come from the same client. PKCE uses the [SHA 256](https://www.movable-type.co.uk/scripts/sha256.html) Cryptographic Hash Algorithm. SHA 256 creates a unique “signature” for a text or file of any size, but it is: + +- Always the same length regardless of the input file +- Guaranteed to be always produce the same result for the same input +- One way (that is, you can’t reverse engineer it to reveal the original input) + +Now you have two values: + +- **code_verifier** - a large random string generated by the client +- **code_challenge** - the SHA 256 of the code_verifier + +During the initial `/authorize` request, the client also sends the `code_challenge` for the `code_verifier` it keeps in memory. After the authorize request has returned correctly, the client also sends the `code_verifier` that was used to generate the `code_challenge`. The IDP will then calculate the `code_challenge`, see if it matches what was set on the very first `/authorize` request, and only send the access token if the values match. + +This guarantees that only the application that triggered the initial authorization flow would be able to successfully exchange the verification code for a JWT. So even if a malicious application gets access to the verification code, it will be useless on its own. To see this in action, check out [this example](https://aaronparecki.com/oauth-2-simplified/#mobile-apps). + +A library to consider for native OAuth is [react-native-app-auth](https://github.com/FormidableLabs/react-native-app-auth). React-native-app-auth is an SDK for communicating with OAuth2 providers. It wraps the native [AppAuth-iOS](https://github.com/openid/AppAuth-iOS) and [AppAuth-Android](https://github.com/openid/AppAuth-Android) libraries and can support PKCE. + +> React-native-app-auth can support PKCE only if your Identity Provider supports it. + +![OAuth2 with PKCE](/docs/assets/diagram_pkce.svg) + +## Network Security + +Your APIs should always use [SSL encryption](https://www.ssl.com/faqs/faq-what-is-ssl/). SSL encryption protects against the requested data being read in plain text between when it leaves the server and before it reaches the client. You’ll know the endpoint is secure, because it starts with `https://` instead of `http://`. + +### SSL Pinning + +Using https endpoints could still leave your data vulnerable to interception. With https, the client will only trust the server if it can provide a valid certificate that is signed by a trusted Certificate Authority that is pre-installed on the client. An attacker could take advantage of this by installing a malicious root CA certificate to the user’s device, so the client would trust all certificates that are signed by the attacker. Thus, relying on certificates alone could still leave you vulnerable to a [man-in-the-middle attack](https://en.wikipedia.org/wiki/Man-in-the-middle_attack). + +**SSL pinning** is a technique that can be used on the client side to avoid this attack. It works by embedding (or pinning) a list of trusted certificates to the client during development, so that only the requests signed with one of the trusted certificates will be accepted, and any self-signed certificates will not be. + +> When using SSL pinning, you should be mindful of certificate expiry. Certificates expire every 1-2 years and when one does, it’ll need to be updated in the app as well as on the server. As soon as the certificate on the server has been updated, any apps with the old certificate embedded in them will cease to work. + +## Summary + +There is no bulletproof way to handle security, but with conscious effort and diligence, it is possible to significantly reduce the likelihood of a security breach in your application. Invest in security proportional to the sensitivity of the data stored in your application, the number of users, and the damage a hacker could do when gaining access to their account. And remember: it’s significantly harder to access information that was never requested in the first place. diff --git a/website/versioned_docs/version-0.61/segmentedcontrolios.md b/website/versioned_docs/version-0.61/segmentedcontrolios.md index e53ae833ffb..f4387d39b79 100644 --- a/website/versioned_docs/version-0.61/segmentedcontrolios.md +++ b/website/versioned_docs/version-0.61/segmentedcontrolios.md @@ -1,7 +1,6 @@ --- -id: version-0.61-segmentedcontrolios -title: 🚧 SegmentedControlIOS -original_id: segmentedcontrolios +id: segmentedcontrolios +title: '🚧 SegmentedControlIOS' --- > **Deprecated.** Use [@react-native-community/segmented-control](https://github.com/react-native-community/segmented-control) instead. diff --git a/website/versioned_docs/version-0.61/settings.md b/website/versioned_docs/version-0.61/settings.md new file mode 100644 index 00000000000..7f19edde71c --- /dev/null +++ b/website/versioned_docs/version-0.61/settings.md @@ -0,0 +1,48 @@ +--- +id: settings +title: Settings +--- + +`Settings` serves as a wrapper for [`NSUserDefaults`](https://developer.apple.com/documentation/foundation/nsuserdefaults), a persistent key-value store available only on iOS. + +--- + +# Reference + +## Methods + +### `clearWatch()` + +```jsx +static clearWatch(watchId) +``` + +`watchId` is the number returned by `watchKeys()` when the subscription was originally configured. + +### `get()` + +```jsx +static get(key) +``` + +Get the current value for a key in `NSUserDefaults`. + +--- + +### `set()` + +```jsx +static set(settings) +``` + +Set one or more values in `NSUserDefaults`. + +--- + +### `watchKeys()` + +```jsx +static watchKeys(keys, callback) +``` + +Subscribe to be notified when the value for any of the keys specified by the `keys` array changes in `NSUserDefaults`. Returns a `watchId` number that may be used with `clearWatch()` to unsubscribe. diff --git a/website/versioned_docs/version-0.61/shadow-props.md b/website/versioned_docs/version-0.61/shadow-props.md new file mode 100644 index 00000000000..a51a19fe9f5 --- /dev/null +++ b/website/versioned_docs/version-0.61/shadow-props.md @@ -0,0 +1,46 @@ +--- +id: shadow-props +title: Shadow Props +--- + +# Reference + +## Props + +### `shadowColor` + +Sets the drop shadow color + +| Type | Required | Platform | +| ------------------ | -------- | -------- | +| [color](colors.md) | No | iOS | + +--- + +### `shadowOffset` + +Sets the drop shadow offset + +| Type | Required | Platform | +| -------------------------------------- | -------- | -------- | +| object: {width: number,height: number} | No | iOS | + +--- + +### `shadowOpacity` + +Sets the drop shadow opacity (multiplied by the color's alpha component) + +| Type | Required | Platform | +| ------ | -------- | -------- | +| number | No | iOS | + +--- + +### `shadowRadius` + +Sets the drop shadow blur radius + +| Type | Required | Platform | +| ------ | -------- | -------- | +| number | No | iOS | diff --git a/website/versioned_docs/version-0.61/share.md b/website/versioned_docs/version-0.61/share.md new file mode 100644 index 00000000000..97c36b29318 --- /dev/null +++ b/website/versioned_docs/version-0.61/share.md @@ -0,0 +1,97 @@ +--- +id: share +title: Share +--- + +# Reference + +## Methods + +### `share()` + +```jsx +static share(content, options) +``` + +Open a dialog to share text content. + +In iOS, Returns a Promise which will be invoked an object containing `action`, `activityType`. If the user dismissed the dialog, the Promise will still be resolved with action being `Share.dismissedAction` and all the other keys being undefined. Note that some share options will not appear or work on the iOS simulator. + +In Android, Returns a Promise which always be resolved with action being `Share.sharedAction`. + +### Content + +- `message` - a message to share +- `title` - title of the message + +#### iOS + +- `url` - an URL to share + +At least one of URL and message is required. + +### Options + +#### iOS + +- `subject` - a subject to share via email +- `excludedActivityTypes` +- `tintColor` + +#### Android + +- `dialogTitle` + +--- + +### `sharedAction()` + +```jsx +static sharedAction() +``` + +The content was successfully shared. + +--- + +### `dismissedAction()` + +```jsx +static dismissedAction() +``` + +_iOS Only_. The dialog has been dismissed. + +## Basic Example + +```jsx +import React, { Component } from 'react'; +import { Share, Button } from 'react-native'; + +class ShareExample extends Component { + onShare = async () => { + try { + const result = await Share.share({ + message: + 'React Native | A framework for building native apps using React' + }); + + if (result.action === Share.sharedAction) { + if (result.activityType) { + // shared with activity type of result.activityType + } else { + // shared + } + } else if (result.action === Share.dismissedAction) { + // dismissed + } + } catch (error) { + alert(error.message); + } + }; + + render() { + return + + + + + + +> If you’re familiar with `@media (prefers-color-scheme: dark)` in CSS, this is similar! Only instead of defining all the colors in a media query, you define which color to use under what circumstances right there where you're using it. Neat! + + + +> The `DynamicColorIOS` function is similar to the iOS native methods [`UIColor colorWithDynamicProvider:`](https://developer.apple.com/documentation/uikit/uicolor/3238040-colorwithdynamicprovider) + + + +## Example + +```jsx +import { DynamicColorIOS } from 'react-native'; + +const customDynamicTextColor = DynamicColorIOS({ + dark: 'lightskyblue', + light: 'midnightblue' +}); +``` diff --git a/website/versioned_docs/version-0.62/easing.md b/website/versioned_docs/version-0.62/easing.md index 7dbf65f8f01..52b14729685 100644 --- a/website/versioned_docs/version-0.62/easing.md +++ b/website/versioned_docs/version-0.62/easing.md @@ -1,7 +1,6 @@ --- -id: version-0.62-easing +id: easing title: Easing -original_id: easing --- The `Easing` module implements common easing functions. This module is used by [Animated.timing()](animated.md#timing) to convey physically believable motion in animations. diff --git a/website/versioned_docs/version-0.62/fast-refresh.md b/website/versioned_docs/version-0.62/fast-refresh.md index 08af7eba813..6787a9b5fb1 100644 --- a/website/versioned_docs/version-0.62/fast-refresh.md +++ b/website/versioned_docs/version-0.62/fast-refresh.md @@ -1,7 +1,6 @@ --- -id: version-0.62-fast-refresh +id: fast-refresh title: Fast Refresh -original_id: fast-refresh --- Fast Refresh is a React Native feature that allows you to get near-instant feedback for changes in your React components. Fast Refresh is enabled by default, and you can toggle "Enable Fast Refresh" in the React Native developer menu. With Fast Refresh enabled, most edits should be visible within a second or two. diff --git a/website/versioned_docs/version-0.62/flatlist.md b/website/versioned_docs/version-0.62/flatlist.md index 71659a3debf..6b8fe9b1a74 100644 --- a/website/versioned_docs/version-0.62/flatlist.md +++ b/website/versioned_docs/version-0.62/flatlist.md @@ -1,7 +1,6 @@ --- -id: version-0.62-flatlist +id: flatlist title: FlatList -original_id: flatlist --- A performant interface for rendering basic, flat lists, supporting the most handy features: diff --git a/website/versioned_docs/version-0.62/flexbox.md b/website/versioned_docs/version-0.62/flexbox.md index 4a94ac39d18..b69b1e83f40 100644 --- a/website/versioned_docs/version-0.62/flexbox.md +++ b/website/versioned_docs/version-0.62/flexbox.md @@ -1,7 +1,6 @@ --- -id: version-0.62-flexbox +id: flexbox title: Layout with Flexbox -original_id: flexbox --- A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes. diff --git a/website/versioned_docs/version-0.62/geolocation.md b/website/versioned_docs/version-0.62/geolocation.md new file mode 100644 index 00000000000..ca5b843bbc4 --- /dev/null +++ b/website/versioned_docs/version-0.62/geolocation.md @@ -0,0 +1,171 @@ +--- +id: geolocation +title: '🚧 Geolocation' +--- + +> **Deprecated.** Use [@react-native-community/geolocation](https://github.com/react-native-community/react-native-geolocation) instead. + +The Geolocation API extends the [Geolocation web spec](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation). + +As a browser polyfill, this API is available through the `navigator.geolocation` global - you do not need to `import` it. + +On Android, this uses the [android.location API](https://developer.android.com/reference/android/location/package-summary). This API is not recommended by Google because it is less accurate and slower than the recommended [Google Location Services API](https://developer.android.com/training/location/). In order to use it with React Native, use the [react-native-geolocation-service](https://github.com/Agontuk/react-native-geolocation-service) module. + +### Configuration and Permissions + + + +#### iOS + +You need to include the `NSLocationWhenInUseUsageDescription` key in Info.plist to enable geolocation when using the app. Geolocation is enabled by default when you create a project with `react-native init`. + +In order to enable geolocation in the background, you need to include the 'NSLocationAlwaysUsageDescription' key in Info.plist and add location as a background mode in the 'Capabilities' tab in Xcode. + +If you are using CocoaPods for React Native, make sure to include the `RCTGeolocation` sub-podspec. + +#### Android + +To request access to location, you need to add the following line to your app's `AndroidManifest.xml`: + +`` + +Android API >= 18 Positions will also contain a `mocked` boolean to indicate if position was created from a mock provider. + +

+ Android API >= 23 Requires an additional step to check for, and request + the ACCESS_FINE_LOCATION permission using + the PermissionsAndroid API. + Failure to do so may result in a hard crash. +

+ +### Methods + +- [`setRNConfiguration`](#setrnconfiguration) +- [`requestAuthorization`](#requestauthorization) +- [`getCurrentPosition`](#getcurrentposition) +- [`watchPosition`](#watchposition) +- [`clearWatch`](#clearwatch) +- [`stopObserving`](#stopobserving) + +--- + +# Reference + +## Methods + +### `setRNConfiguration()` + +```jsx +geolocation.setRNConfiguration(config); +``` + +Sets configuration options that will be used in all location requests. + +**Parameters:** + +| Name | Type | Required | Description | +| ------ | ------ | -------- | ----------- | +| config | object | Yes | See below. | + +Supported options: + +- `skipPermissionRequests` (boolean, iOS-only) - Defaults to `false`. If `true`, you must request permissions before using Geolocation APIs. + +--- + +### `requestAuthorization()` + +```jsx +geolocation.requestAuthorization(); +``` + +Request suitable Location permission based on the key configured on pList. If NSLocationAlwaysUsageDescription is set, it will request Always authorization, although if NSLocationWhenInUseUsageDescription is set, it will request InUse authorization. + +--- + +### `getCurrentPosition()` + +```jsx +geolocation.getCurrentPosition( + geo_success, + [geo_error], + [geo_options] +); +``` + +Invokes the success callback once with the latest location info. + +**Parameters:** + +| Name | Type | Required | Description | +| ----------- | -------- | -------- | ----------------------------------------- | +| geo_success | function | Yes | Invoked with latest location info. | +| geo_error | function | No | Invoked whenever an error is encountered. | +| geo_options | object | No | See below. | + +Supported options: + +- `timeout` (ms) - Is a positive value representing the maximum length of time (in milliseconds) the device is allowed to take in order to return a position. Defaults to INFINITY. +- `maximumAge` (ms) - Is a positive value indicating the maximum age in milliseconds of a possible cached position that is acceptable to return. If set to 0, it means that the device cannot use a cached position and must attempt to retrieve the real current position. If set to Infinity the device will always return a cached position regardless of its age. Defaults to INFINITY. +- `enableHighAccuracy` (bool) - Is a boolean representing if to use GPS or not. If set to true, a GPS position will be requested. If set to false, a WIFI location will be requested. + +--- + +### `watchPosition()` + +```jsx +geolocation.watchPosition(success, [error], [options]); +``` + +Invokes the success callback whenever the location changes. Returns a `watchId` (number). + +**Parameters:** + +| Name | Type | Required | Description | +| ------- | -------- | -------- | ----------------------------------------- | +| success | function | Yes | Invoked whenever the location changes. | +| error | function | No | Invoked whenever an error is encountered. | +| options | object | No | See below. | + +Supported options: + +- `timeout` (ms) - Is a positive value representing the maximum length of time (in milliseconds) the device is allowed to take in order to return a position. Defaults to INFINITY. +- `maximumAge` (ms) - Is a positive value indicating the maximum age in milliseconds of a possible cached position that is acceptable to return. If set to 0, it means that the device cannot use a cached position and must attempt to retrieve the real current position. If set to Infinity the device will always return a cached position regardless of its age. Defaults to INFINITY. +- `enableHighAccuracy` (bool) - Is a boolean representing if to use GPS or not. If set to true, a GPS position will be requested. If set to false, a WIFI location will be requested. +- `distanceFilter` (m) - The minimum distance from the previous location to exceed before returning a new location. Set to 0 to not filter locations. Defaults to 100m. +- `useSignificantChanges` (bool) - Uses the battery-efficient native significant changes APIs to return locations. Locations will only be returned when the device detects a significant distance has been breached. Defaults to FALSE. + +--- + +### `clearWatch()` + +```jsx +geolocation.clearWatch(watchID); +``` + +**Parameters:** + +| Name | Type | Required | Description | +| ------- | ------ | -------- | ------------------------------------ | +| watchID | number | Yes | Id as returned by `watchPosition()`. | + +--- + +### `stopObserving()` + +```jsx +geolocation.stopObserving(); +``` + +Stops observing for device location changes. In addition, it removes all listeners previously registered. + +Notice that this method has only effect if the `geolocation.watchPosition(successCallback, errorCallback)` method was previously invoked. diff --git a/website/versioned_docs/version-0.62/gesture-responder-system.md b/website/versioned_docs/version-0.62/gesture-responder-system.md new file mode 100644 index 00000000000..ed29d81c7ca --- /dev/null +++ b/website/versioned_docs/version-0.62/gesture-responder-system.md @@ -0,0 +1,66 @@ +--- +id: gesture-responder-system +title: Gesture Responder System +--- + +The gesture responder system manages the lifecycle of gestures in your app. A touch can go through several phases as the app determines what the user's intention is. For example, the app needs to determine if the touch is scrolling, sliding on a widget, or tapping. This can even change during the duration of a touch. There can also be multiple simultaneous touches. + +The touch responder system is needed to allow components to negotiate these touch interactions without any additional knowledge about their parent or child components. + +### Best Practices + +To make your app feel great, every action should have the following attributes: + +- Feedback/highlighting- show the user what is handling their touch, and what will happen when they release the gesture +- Cancel-ability- when making an action, the user should be able to abort it mid-touch by dragging their finger away + +These features make users more comfortable while using an app, because it allows people to experiment and interact without fear of making mistakes. + +### TouchableHighlight and Touchable\* + +The responder system can be complicated to use. So we have provided an abstract `Touchable` implementation for things that should be "tappable". This uses the responder system and allows you to configure tap interactions declaratively. Use `TouchableHighlight` anywhere where you would use a button or link on web. + +## Responder Lifecycle + +A view can become the touch responder by implementing the correct negotiation methods. There are two methods to ask the view if it wants to become responder: + +- `View.props.onStartShouldSetResponder: (evt) => true,` - Does this view want to become responder on the start of a touch? +- `View.props.onMoveShouldSetResponder: (evt) => true,` - Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsiveness? + +If the View returns true and attempts to become the responder, one of the following will happen: + +- `View.props.onResponderGrant: (evt) => {}` - The View is now responding for touch events. This is the time to highlight and show the user what is happening +- `View.props.onResponderReject: (evt) => {}` - Something else is the responder right now and will not release it + +If the view is responding, the following handlers can be called: + +- `View.props.onResponderMove: (evt) => {}` - The user is moving their finger +- `View.props.onResponderRelease: (evt) => {}` - Fired at the end of the touch, ie "touchUp" +- `View.props.onResponderTerminationRequest: (evt) => true` - Something else wants to become responder. Should this view release the responder? Returning true allows release +- `View.props.onResponderTerminate: (evt) => {}` - The responder has been taken from the View. Might be taken by other views after a call to `onResponderTerminationRequest`, or might be taken by the OS without asking (happens with control center/ notification center on iOS) + +`evt` is a synthetic touch event with the following form: + +- `nativeEvent` + - `changedTouches` - Array of all touch events that have changed since the last event + - `identifier` - The ID of the touch + - `locationX` - The X position of the touch, relative to the element + - `locationY` - The Y position of the touch, relative to the element + - `pageX` - The X position of the touch, relative to the root element + - `pageY` - The Y position of the touch, relative to the root element + - `target` - The node id of the element receiving the touch event + - `timestamp` - A time identifier for the touch, useful for velocity calculation + - `touches` - Array of all current touches on the screen + +### Capture ShouldSet Handlers + +`onStartShouldSetResponder` and `onMoveShouldSetResponder` are called with a bubbling pattern, where the deepest node is called first. That means that the deepest component will become responder when multiple Views return true for `*ShouldSetResponder` handlers. This is desirable in most cases, because it makes sure all controls and buttons are usable. + +However, sometimes a parent will want to make sure that it becomes responder. This can be handled by using the capture phase. Before the responder system bubbles up from the deepest component, it will do a capture phase, firing `on*ShouldSetResponderCapture`. So if a parent View wants to prevent the child from becoming responder on a touch start, it should have a `onStartShouldSetResponderCapture` handler which returns true. + +- `View.props.onStartShouldSetResponderCapture: (evt) => true,` +- `View.props.onMoveShouldSetResponderCapture: (evt) => true,` + +### PanResponder + +For higher-level gesture interpretation, check out [PanResponder](panresponder.md). diff --git a/website/versioned_docs/version-0.62/getting-started.md b/website/versioned_docs/version-0.62/getting-started.md index 5a471b39559..ff6ad2f24c3 100644 --- a/website/versioned_docs/version-0.62/getting-started.md +++ b/website/versioned_docs/version-0.62/getting-started.md @@ -1,7 +1,6 @@ --- -id: version-0.62-environment-setup +id: environment-setup title: Setting up the development environment -original_id: environment-setup --- This page will help you install and build your first React Native app. diff --git a/website/versioned_docs/version-0.62/handling-text-input.md b/website/versioned_docs/version-0.62/handling-text-input.md index 3dd66fc8ccb..d46a4842ef4 100644 --- a/website/versioned_docs/version-0.62/handling-text-input.md +++ b/website/versioned_docs/version-0.62/handling-text-input.md @@ -1,7 +1,6 @@ --- -id: version-0.62-handling-text-input +id: handling-text-input title: Handling Text Input -original_id: handling-text-input --- [`TextInput`](textinput#content) is a [Core Component](intro-react-native-components) that allows the user to enter text. It has an `onChangeText` prop that takes a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted. diff --git a/website/versioned_docs/version-0.62/handling-touches.md b/website/versioned_docs/version-0.62/handling-touches.md index bf36046655e..959d526764a 100644 --- a/website/versioned_docs/version-0.62/handling-touches.md +++ b/website/versioned_docs/version-0.62/handling-touches.md @@ -1,7 +1,6 @@ --- -id: version-0.62-handling-touches +id: handling-touches title: Handling Touches -original_id: handling-touches --- Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. React Native provides components to handle all sorts of common gestures, as well as a comprehensive [gesture responder system](gesture-responder-system.md) to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button. diff --git a/website/versioned_docs/version-0.62/headless-js-android.md b/website/versioned_docs/version-0.62/headless-js-android.md index 13b89bf6970..9e3982e5399 100644 --- a/website/versioned_docs/version-0.62/headless-js-android.md +++ b/website/versioned_docs/version-0.62/headless-js-android.md @@ -1,7 +1,6 @@ --- -id: version-0.62-headless-js-android +id: headless-js-android title: Headless JS -original_id: headless-js-android --- Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music. diff --git a/website/versioned_docs/version-0.62/height-and-width.md b/website/versioned_docs/version-0.62/height-and-width.md index d04475226ea..c7630a4f020 100644 --- a/website/versioned_docs/version-0.62/height-and-width.md +++ b/website/versioned_docs/version-0.62/height-and-width.md @@ -1,7 +1,6 @@ --- -id: version-0.62-height-and-width +id: height-and-width title: Height and Width -original_id: height-and-width --- A component's height and width determine its size on the screen. diff --git a/website/versioned_docs/version-0.62/hermes.md b/website/versioned_docs/version-0.62/hermes.md index 85bc677f090..fbdd0f2412a 100644 --- a/website/versioned_docs/version-0.62/hermes.md +++ b/website/versioned_docs/version-0.62/hermes.md @@ -1,11 +1,10 @@ --- -id: version-0.62-hermes +id: hermes title: Using Hermes -original_id: hermes --- - + [Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for running React Native apps on Android. For many apps, enabling Hermes will result in improved start-up time, decreased memory usage, and smaller app size. At this time Hermes is an **opt-in** React Native feature, and this guide explains how to enable it. diff --git a/website/versioned_docs/version-0.62/image-style-props.md b/website/versioned_docs/version-0.62/image-style-props.md index 4e89dd1f9e5..f312434ed8d 100644 --- a/website/versioned_docs/version-0.62/image-style-props.md +++ b/website/versioned_docs/version-0.62/image-style-props.md @@ -1,7 +1,6 @@ --- -id: version-0.62-image-style-props +id: image-style-props title: Image Style Props -original_id: image-style-props --- ### Examples diff --git a/website/versioned_docs/version-0.62/image.md b/website/versioned_docs/version-0.62/image.md index c414ae5f3f4..54a677230de 100644 --- a/website/versioned_docs/version-0.62/image.md +++ b/website/versioned_docs/version-0.62/image.md @@ -1,7 +1,6 @@ --- -id: version-0.62-image +id: image title: Image -original_id: image --- A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. diff --git a/website/versioned_docs/version-0.62/imagebackground.md b/website/versioned_docs/version-0.62/imagebackground.md index 98d7a7dcff1..8ca12f1286d 100644 --- a/website/versioned_docs/version-0.62/imagebackground.md +++ b/website/versioned_docs/version-0.62/imagebackground.md @@ -1,7 +1,6 @@ --- -id: version-0.62-imagebackground +id: imagebackground title: ImageBackground -original_id: imagebackground --- A common feature request from developers familiar with the web is `background-image`. To handle this use case, you can use the `` component, which has the same props as ``, and add whatever children to it you would like to layer on top of it. diff --git a/website/versioned_docs/version-0.62/imageeditor.md b/website/versioned_docs/version-0.62/imageeditor.md new file mode 100644 index 00000000000..6133c4cf056 --- /dev/null +++ b/website/versioned_docs/version-0.62/imageeditor.md @@ -0,0 +1,38 @@ +--- +id: imageeditor +title: '🚧 ImageEditor' +--- + +> **Deprecated.** Use [@react-native-community/image-editor](https://github.com/react-native-community/react-native-image-editor) instead. + +--- + +# Reference + +## Methods + +### `cropImage()` + +```jsx +static cropImage(uri, cropData, success, failure) +``` + +Crop the image specified by the URI param. If URI points to a remote image, it will be downloaded automatically. If the image cannot be loaded/downloaded, the `failure` callback will be called. + +If the cropping process is successful, the resultant cropped image will be stored in the ImageStore, and the URI returned in the `success` callback will point to the image in the store. Remember to delete the cropped image from the ImageStore when you are done with it. + +### cropData + +- `offset` - The top-left corner of the cropped image, specified in the original image's coordinate space +- `size` - Size (dimensions) of the cropped image +- `displaySize (optional)` - Size to which you want to scale the cropped image +- `resizeMode (optional)` - Resizing mode to use when scaling the image + +```jsx +cropData = { + offset: { x: number, y: number }, + size: { width: number, height: number }, + displaySize: { width: number, height: number }, + resizeMode: 'contain/cover/stretch' +}; +``` diff --git a/website/versioned_docs/version-0.62/imagepickerios.md b/website/versioned_docs/version-0.62/imagepickerios.md new file mode 100644 index 00000000000..c998b94ea18 --- /dev/null +++ b/website/versioned_docs/version-0.62/imagepickerios.md @@ -0,0 +1,79 @@ +--- +id: imagepickerios +title: '🚧 ImagePickerIOS' +--- + +> **Deprecated.** Use [@react-native-community/image-picker-ios](https://github.com/react-native-community/react-native-image-picker-ios) instead. + +--- + +# Reference + +## Methods + +### `canRecordVideos()` + +```jsx +static canRecordVideos(callback) +``` + +--- + +### `canUseCamera()` + +```jsx +static canUseCamera(callback) +``` + +--- + +### `openCameraDialog()` + +```jsx +static openCameraDialog(config, successCallback, cancelCallback) +``` + +**Parameters:** + +| Name | Type | Required | Description | +| --------------- | -------- | -------- | ----------- | +| config | object | No | See below. | +| successCallback | function | No | See below. | +| cancelCallback | function | No | See below. | + +`config` is an object containing: + +- `videoMode` : An optional boolean value that defaults to false. + +`successCallback` is an optional callback function that's invoked when the select dialog is opened successfully. It will include the following data: + +- `[string, number, number]` + +`cancelCallback` is an optional callback function that's invoked when the camera dialog is canceled. + +--- + +### `openSelectDialog()` + +```jsx +static openSelectDialog(config, successCallback, cancelCallback) +``` + +**Parameters:** + +| Name | Type | Required | Description | +| --------------- | -------- | -------- | ----------- | +| config | object | No | See below. | +| successCallback | function | No | See below. | +| cancelCallback | function | No | See below. | + +`config` is an object containing: + +- `showImages` : An optional boolean value that defaults to false. +- `showVideos`: An optional boolean value that defaults to false. + +`successCallback` is an optional callback function that's invoked when the select dialog is opened successfully. It will include the following data: + +- `[string, number, number]` + +`cancelCallback` is an optional callback function that's invoked when the select dialog is canceled. diff --git a/website/versioned_docs/version-0.62/images.md b/website/versioned_docs/version-0.62/images.md new file mode 100644 index 00000000000..b637900ede6 --- /dev/null +++ b/website/versioned_docs/version-0.62/images.md @@ -0,0 +1,230 @@ +--- +id: images +title: Images +--- + +## Static Image Resources + +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: + +```jsx + +``` + +The image name is resolved the same way JS modules are resolved. In the example above, the bundler will look for `my-icon.png` in the same folder as the component that requires it. Also, if you have `my-icon.ios.png` and `my-icon.android.png`, the bundler will pick the correct file for the platform. + +You can also use the `@2x` and `@3x` suffixes to provide images for different screen densities. If you have the following file structure: + +``` +. +├── button.js +└── img + ├── check.png + ├── check@2x.png + └── check@3x.png +``` + +...and `button.js` code contains: + +```jsx + +``` + +...the bundler will bundle and serve the image corresponding to device's screen density. For example, `check@2x.png`, will be used on an iPhone 7, while`check@3x.png` will be used on an iPhone 7 Plus or a Nexus 5. If there is no image matching the screen density, the closest best option will be selected. + +On Windows, you might need to restart the bundler if you add new images to your project. + +Here are some benefits that you get: + +1. Same system on Android and iOS. +2. Images live in the same folder as your JavaScript code. Components are self-contained. +3. No global namespace, i.e. you don't have to worry about name collisions. +4. Only the images that are actually used will be packaged into your app. +5. Adding and changing images doesn't require app recompilation, you can refresh the simulator as you normally do. +6. The bundler knows the image dimensions, no need to duplicate it in the code. +7. Images can be distributed via [npm](https://www.npmjs.com/) packages. + +In order for this to work, the image name in `require` has to be known statically. + +```jsx +// GOOD +; + +// BAD +var icon = this.props.active + ? 'my-icon-active' + : 'my-icon-inactive'; +; + +// GOOD +var icon = this.props.active + ? require('./my-icon-active.png') + : require('./my-icon-inactive.png'); +; +``` + +Note that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set `{ width: undefined, height: undefined }` on the style attribute. + +## Static Non-Image Resources + +The `require` syntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including `.mp3`, `.wav`, `.mp4`, `.mov`, `.html` and `.pdf`. See [bundler defaults](https://github.com/facebook/metro/blob/master/packages/metro-config/src/defaults/defaults.js#L14-L44) for the full list. + +You can add support for other types by adding an [`assetExts` resolver option](https://facebook.github.io/metro/docs/configuration#assetexts) in your [Metro configuration](https://facebook.github.io/metro/docs/configuration). + +A caveat is that videos must use absolute positioning instead of `flexGrow`, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android. + +## Images From Hybrid App's Resources + +If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app. + +For images included via Xcode asset catalogs or in the Android drawable folder, use the image name without the extension: + +```jsx + +``` + +For images in the Android assets folder, use the `asset:/` scheme: + +```jsx + +``` + +These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually. + +## Network Images + +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](running-on-device.md#app-transport-security) requirements on iOS. + +```jsx +// GOOD + + +// BAD + +``` + +### Network Requests for Images + +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: + +```jsx + +``` + +## Uri Data Images + +Sometimes, you might be getting encoded image data from a REST API call. You can use the `'data:'` uri scheme to use these images. Same as for network resources, _you will need to manually specify the dimensions of your image_. + +> This is recommended for very small and dynamic images only, like icons in a list from a DB. + +```jsx +// include at least width and height! + +``` + +### Cache Control (iOS Only) + +In some cases you might only want to display an image if it is already in the local cache, i.e. a low resolution placeholder until a higher resolution is available. In other cases you do not care if the image is outdated and are willing to display an outdated image to save bandwidth. The `cache` source property gives you control over how the network layer interacts with the cache. + +- `default`: Use the native platforms default strategy. +- `reload`: The data for the URL will be loaded from the originating source. No existing cache data should be used to satisfy a URL load request. +- `force-cache`: The existing cached data will be used to satisfy the request, regardless of its age or expiration date. If there is no existing data in the cache corresponding the request, the data is loaded from the originating source. +- `only-if-cached`: The existing cache data will be used to satisfy a request, regardless of its age or expiration date. If there is no existing data in the cache corresponding to a URL load request, no attempt is made to load the data from the originating source, and the load is considered to have failed. + +```jsx + +``` + +## Local Filesystem Images + +See [CameraRoll](https://github.com/react-native-community/react-native-cameraroll) for an example of using local resources that are outside of `Images.xcassets`. + +### Best Camera Roll Image + +iOS saves multiple sizes for the same image in your Camera Roll, it is very important to pick the one that's as close as possible for performance reasons. You wouldn't want to use the full quality 3264x2448 image as source when displaying a 200x200 thumbnail. If there's an exact match, React Native will pick it, otherwise it's going to use the first one that's at least 50% bigger in order to avoid blur when resizing from a close size. All of this is done by default so you don't have to worry about writing the tedious (and error prone) code to do it yourself. + +## Why Not Automatically Size Everything? + +_In the browser_ if you don't give a size to an image, the browser is going to render a 0x0 element, download the image, and then render the image based with the correct size. The big issue with this behavior is that your UI is going to jump all around as images load, this makes for a very bad user experience. + +_In React Native_ this behavior is intentionally not implemented. It is more work for the developer to know the dimensions (or aspect ratio) of the remote image in advance, but we believe that it leads to a better user experience. Static images loaded from the app bundle via the `require('./my-icon.png')` syntax _can be automatically sized_ because their dimensions are available immediately at the time of mounting. + +For example, the result of `require('./my-icon.png')` might be: + +```jsx +{"__packager_asset":true,"uri":"my-icon.png","width":591,"height":573} +``` + +## Source as an object + +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. + +```jsx + +``` + +On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using `require('./my-icon.png')`, then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting `{uri: ...}`, we can output `{uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}}` and transparently support spriting on all the existing call sites. + +On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image. + +## Background Image via Nesting + +A common feature request from developers familiar with the web is `background-image`. To handle this use case, you can use the `` component, which has the same props as ``, and add whatever children to it you would like to layer on top of it. + +You might not want to use `` in some cases, since the implementation is basic. Refer to ``'s [documentation](imagebackground.md) for more insight, and create your own custom component when needed. + +```jsx +return ( + + Inside + +); +``` + +Note that you must specify some width and height style attributes. + +## iOS Border Radius Styles + +Please note that the following corner specific, border radius style properties are currently ignored by iOS's image component: + +- `borderTopLeftRadius` +- `borderTopRightRadius` +- `borderBottomLeftRadius` +- `borderBottomRightRadius` + +## Off-thread Decoding + +Image decoding can take more than a frame-worth of time. This is one of the major sources of frame drops on the web because decoding is done in the main thread. In React Native, image decoding is done in a different thread. In practice, you already need to handle the case when the image is not downloaded yet, so displaying the placeholder for a few more frames while it is decoding does not require any code change. diff --git a/website/versioned_docs/version-0.62/imagestore.md b/website/versioned_docs/version-0.62/imagestore.md new file mode 100644 index 00000000000..3ad87c67526 --- /dev/null +++ b/website/versioned_docs/version-0.62/imagestore.md @@ -0,0 +1,61 @@ +--- +id: imagestore +title: ImageStore +--- + +> **Deprecated.** Use [expo-file-system](https://github.com/expo/expo/tree/master/packages/expo-file-system) or [react-native-fs](https://github.com/itinance/react-native-fs) instead. + +### Methods + +- [`hasImageForTag`](imagestore.md#hasimagefortag) +- [`removeImageForTag`](imagestore.md#removeimagefortag) +- [`addImageFromBase64`](imagestore.md#addimagefrombase64) +- [`getBase64ForTag`](imagestore.md#getbase64fortag) + +--- + +# Reference + +## Methods + +### `hasImageForTag()` + +```jsx +static hasImageForTag(uri, callback) +``` + +Check if the ImageStore contains image data for the specified URI. @platform ios + +--- + +### `removeImageForTag()` + +```jsx +static removeImageForTag(uri) +``` + +Delete an image from the ImageStore. Images are stored in memory and must be manually removed when you are finished with them, otherwise they will continue to use up RAM until the app is terminated. It is safe to call `removeImageForTag()` without first calling `hasImageForTag()`, it will fail silently. @platform ios + +--- + +### `addImageFromBase64()` + +```jsx +static addImageFromBase64(base64ImageData, success, failure) +``` + +Stores a base64-encoded image in the ImageStore, and returns a URI that can be used to access or display the image later. Images are stored in memory only, and must be manually deleted when you are finished with them by calling `removeImageForTag()`. + +Note that it is very inefficient to transfer large quantities of binary data between JS and native code, so you should avoid calling this more than necessary. @platform ios + +--- + +### `getBase64ForTag()` + +```jsx +static getBase64ForTag(uri, success, failure) +``` + +Retrieves the base64-encoded data for an image in the ImageStore. If the specified URI does not match an image in the store, the failure callback will be called. + +Note that it is very inefficient to transfer large quantities of binary data between JS and native code, so you should avoid calling this more than necessary. To display an image in the ImageStore, you can pass the URI to an `` component; there is no need to retrieve the base64 data. diff --git a/website/versioned_docs/version-0.62/improvingux.md b/website/versioned_docs/version-0.62/improvingux.md new file mode 100644 index 00000000000..892fe3ae5bf --- /dev/null +++ b/website/versioned_docs/version-0.62/improvingux.md @@ -0,0 +1,54 @@ +--- +id: improvingux +title: Improving User Experience +--- + +## Configure text inputs + +Entering text on touch phone is a challenge - small screen, software keyboard. But based on what kind of data you need, you can make it easier by properly configuring the text inputs: + +- Focus the first field automatically +- Use placeholder text as an example of expected data format +- Enable or disable autocapitalization and autocorrect +- Choose keyboard type (e.g. email, numeric) +- Make sure the return button focuses the next field or submits the form + +Check out [`TextInput` docs](textinput.md) for more configuration options. + + + +[Try it on your phone](https://snack.expo.io/H1iGt2vSW) + +## Manage layout when keyboard is visible + +Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the [`KeyboardAvoidingView` component](keyboardavoidingview.md). + + + +[Try it on your phone](https://snack.expo.io/ryxRkwnrW) + +## Make tappable areas larger + +On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, `padding`, `minWidth` and `minHeight` style values can be useful for that. Alternatively, you can use [`hitSlop` prop](touchablewithoutfeedback.md#hitslop) to increase interactive area without affecting the layout. Here's a demo: + + + +[Try it on your phone](https://snack.expo.io/rJPwCt4HZ) + +## Use Android Ripple + +Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the [`TouchableNativeFeedback` component](touchablenativefeedback.md). Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like [react-native-platform-touchable](https://github.com/react-community/react-native-platform-touchable) to handle the platform differences for you. + + + +[Try it on your phone](https://snack.expo.io/SJywqe3rZ) + +## Screen orientation lock + +Multiple screen orientations should work fine by default unless you're using `Dimensions` API and don't handle orientation changes. If you don't want to support multiple screen orientations, you can lock the screen orientation to either portrait or landscape. + +On iOS, in the General tab and Deployment Info section of Xcode enable the Device Orientation you want to support (ensure you have selected iPhone from the Devices menu when making the changes). For Android, open the AndroidManifest.xml file and within the activity element add `'android:screenOrientation="portrait"'` to lock to portrait or `'android:screenOrientation="landscape"'` to lock to landscape. + +# Learn more + +[Material Design](https://material.io/) and [Human Interface Guidelines](https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/) are great resources for learning more about designing for mobile platforms. diff --git a/website/versioned_docs/version-0.62/inputaccessoryview.md b/website/versioned_docs/version-0.62/inputaccessoryview.md index 6ff24dbb7b9..ac340b2c702 100644 --- a/website/versioned_docs/version-0.62/inputaccessoryview.md +++ b/website/versioned_docs/version-0.62/inputaccessoryview.md @@ -1,7 +1,6 @@ --- -id: version-0.62-inputaccessoryview +id: inputaccessoryview title: InputAccessoryView -original_id: inputaccessoryview --- A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a `TextInput` has focus. This component can be used to create custom toolbars. diff --git a/website/versioned_docs/version-0.62/integration-with-existing-apps.md b/website/versioned_docs/version-0.62/integration-with-existing-apps.md index 9eff256203b..7f0d3b9a870 100644 --- a/website/versioned_docs/version-0.62/integration-with-existing-apps.md +++ b/website/versioned_docs/version-0.62/integration-with-existing-apps.md @@ -1,7 +1,6 @@ --- -id: version-0.62-integration-with-existing-apps +id: integration-with-existing-apps title: Integration with Existing Apps -original_id: integration-with-existing-apps --- React Native is great when you are starting a new mobile app from scratch. However, it also works well for adding a single view or user flow to existing native applications. With a few steps, you can add new React Native based features, screens, views, etc. diff --git a/website/versioned_docs/version-0.62/interactionmanager.md b/website/versioned_docs/version-0.62/interactionmanager.md index 3fdf4cd4416..3cbac7e5ef5 100644 --- a/website/versioned_docs/version-0.62/interactionmanager.md +++ b/website/versioned_docs/version-0.62/interactionmanager.md @@ -1,7 +1,6 @@ --- -id: version-0.62-interactionmanager +id: interactionmanager title: InteractionManager -original_id: interactionmanager --- InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly. diff --git a/website/versioned_docs/version-0.62/intro-react-native-components.md b/website/versioned_docs/version-0.62/intro-react-native-components.md index fa5276487ca..a36141575e5 100644 --- a/website/versioned_docs/version-0.62/intro-react-native-components.md +++ b/website/versioned_docs/version-0.62/intro-react-native-components.md @@ -1,8 +1,7 @@ --- -id: version-0.62-intro-react-native-components +id: intro-react-native-components title: Core Components and Native Components -description: React Native lets you compose app interfaces using Native Components. Conveniently, it comes with a set of these components for you to get started with right now—the Core Components! -original_id: intro-react-native-components +description: 'React Native lets you compose app interfaces using Native Components. Conveniently, it comes with a set of these components for you to get started with right now—the Core Components!' --- React Native is an open source framework for building Android and iOS applications using [React](https://reactjs.org/) and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native. diff --git a/website/versioned_docs/version-0.62/intro-react.md b/website/versioned_docs/version-0.62/intro-react.md index 4142d1c2562..138d38c58e7 100644 --- a/website/versioned_docs/version-0.62/intro-react.md +++ b/website/versioned_docs/version-0.62/intro-react.md @@ -1,8 +1,7 @@ --- -id: version-0.62-intro-react +id: intro-react title: React Fundamentals description: To understand React Native fully, you need a solid foundation in React. This short introduction to React can help you get started or get refreshed. -original_id: intro-react --- React Native runs on [React](https://reactjs.org/), a popular open source library for building user interfaces with JavaScript. To make the most of React Native, it helps to understand React itself. This section can get you started or can serve as a refresher course. diff --git a/website/versioned_docs/version-0.62/introduction.md b/website/versioned_docs/version-0.62/introduction.md index 09afdd1c9a9..02691b9b8a0 100644 --- a/website/versioned_docs/version-0.62/introduction.md +++ b/website/versioned_docs/version-0.62/introduction.md @@ -1,8 +1,7 @@ --- -id: version-0.62-getting-started +id: getting-started title: Introduction description: This helpful guide lays out the prerequisites for learning React Native, using these docs, and setting up your environment. -original_id: getting-started ---
diff --git a/website/versioned_docs/version-0.62/javascript-environment.md b/website/versioned_docs/version-0.62/javascript-environment.md index c07acd4a9c5..d60f265cb63 100644 --- a/website/versioned_docs/version-0.62/javascript-environment.md +++ b/website/versioned_docs/version-0.62/javascript-environment.md @@ -1,7 +1,6 @@ --- -id: version-0.62-javascript-environment +id: javascript-environment title: JavaScript Environment -original_id: javascript-environment --- ## JavaScript Runtime diff --git a/website/versioned_docs/version-0.62/keyboard.md b/website/versioned_docs/version-0.62/keyboard.md index ed293294afb..102c6563855 100644 --- a/website/versioned_docs/version-0.62/keyboard.md +++ b/website/versioned_docs/version-0.62/keyboard.md @@ -1,7 +1,6 @@ --- -id: version-0.62-keyboard +id: keyboard title: Keyboard -original_id: keyboard --- `Keyboard` module to control keyboard events. diff --git a/website/versioned_docs/version-0.62/keyboardavoidingview.md b/website/versioned_docs/version-0.62/keyboardavoidingview.md index b0598a5e56e..3b40edfd2fe 100644 --- a/website/versioned_docs/version-0.62/keyboardavoidingview.md +++ b/website/versioned_docs/version-0.62/keyboardavoidingview.md @@ -1,7 +1,6 @@ --- -id: version-0.62-keyboardavoidingview +id: keyboardavoidingview title: KeyboardAvoidingView -original_id: keyboardavoidingview --- It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its height, position, or bottom padding based on the keyboard height. diff --git a/website/versioned_docs/version-0.62/layout-props.md b/website/versioned_docs/version-0.62/layout-props.md index 908b87b6456..e762c196505 100644 --- a/website/versioned_docs/version-0.62/layout-props.md +++ b/website/versioned_docs/version-0.62/layout-props.md @@ -1,7 +1,6 @@ --- -id: version-0.62-layout-props +id: layout-props title: Layout Props -original_id: layout-props --- ## Example diff --git a/website/versioned_docs/version-0.62/layoutanimation.md b/website/versioned_docs/version-0.62/layoutanimation.md index 19736a94c44..f9ce314ad75 100644 --- a/website/versioned_docs/version-0.62/layoutanimation.md +++ b/website/versioned_docs/version-0.62/layoutanimation.md @@ -1,7 +1,6 @@ --- -id: version-0.62-layoutanimation +id: layoutanimation title: LayoutAnimation -original_id: layoutanimation --- Automatically animates views to their new positions when the next layout happens. diff --git a/website/versioned_docs/version-0.62/libraries.md b/website/versioned_docs/version-0.62/libraries.md index 1947fbf01ea..a56dddda99b 100644 --- a/website/versioned_docs/version-0.62/libraries.md +++ b/website/versioned_docs/version-0.62/libraries.md @@ -1,10 +1,9 @@ --- -id: version-0.62-libraries +id: libraries title: Using Libraries author: Brent Vatne -authorURL: https://twitter.com/notbrent +authorURL: 'https://twitter.com/notbrent' description: This guide introduces React Native developers to finding, installing, and using third-party libraries in their apps. -original_id: libraries --- React Native provides a set of built-in [Core Components and APIs](./components-and-apis) ready to use in your app. You're not limited to the components and APIs bundled with React Native. React Native has a community of thousands of developers. If the Core Components and APIs don't have what you are looking for, you may be able to find and install a library from the community to add the functionality to your app. diff --git a/website/versioned_docs/version-0.62/linking-libraries-ios.md b/website/versioned_docs/version-0.62/linking-libraries-ios.md index 4a06cd529e3..a67be3f102b 100644 --- a/website/versioned_docs/version-0.62/linking-libraries-ios.md +++ b/website/versioned_docs/version-0.62/linking-libraries-ios.md @@ -1,7 +1,6 @@ --- -id: version-0.62-linking-libraries-ios +id: linking-libraries-ios title: Linking Libraries -original_id: linking-libraries-ios --- Not every app uses all the native capabilities, and including the code to support all those features would impact the binary size... But we still want to support adding these features whenever you need them. diff --git a/website/versioned_docs/version-0.62/linking.md b/website/versioned_docs/version-0.62/linking.md index fa0596dbd5b..dec67fb3dac 100644 --- a/website/versioned_docs/version-0.62/linking.md +++ b/website/versioned_docs/version-0.62/linking.md @@ -1,7 +1,6 @@ --- -id: version-0.62-linking +id: linking title: Linking -original_id: linking ---