From 5de145d055089c71e3ef08fbbd4ef1505a222a40 Mon Sep 17 00:00:00 2001 From: Julius Wilson Lundang Date: Wed, 18 Mar 2020 17:47:05 +0800 Subject: [PATCH] Run `yarn prettier` for consistent markdown syntax --- docs/datepickerandroid.md | 2 +- docs/devsettings.md | 4 ++-- docs/easing.md | 4 ++-- docs/layout-props.md | 2 ++ docs/native-modules-ios.md | 1 - docs/navigation.md | 4 +--- docs/picker.md | 3 +-- docs/pixelratio.md | 4 ++-- docs/ram-bundles-inline-requires.md | 36 +++++++++++++++-------------- docs/security.md | 4 ++-- docs/share.md | 1 - docs/statusbar.md | 2 +- docs/textinput.md | 1 + docs/toastandroid.md | 4 ++-- docs/touchablehighlight.md | 1 + docs/usewindowdimensions.md | 3 ++- docs/view.md | 12 +++++----- 17 files changed, 45 insertions(+), 43 deletions(-) diff --git a/docs/datepickerandroid.md b/docs/datepickerandroid.md index 7ac9f79e622..b4de59e6168 100644 --- a/docs/datepickerandroid.md +++ b/docs/datepickerandroid.md @@ -3,7 +3,7 @@ id: datepickerandroid title: 🚧 DatePickerAndroid --- -> **Deprecated.** Use [@react-native-community/datetimepicker](https://github.com/react-native-community/react-native-datetimepicker) instead. +> **Deprecated.** Use [@react-native-community/datetimepicker](https://github.com/react-native-community/react-native-datetimepicker) instead. Opens the standard Android date picker dialog. diff --git a/docs/devsettings.md b/docs/devsettings.md index 7084fff4629..0cd1f970356 100644 --- a/docs/devsettings.md +++ b/docs/devsettings.md @@ -20,8 +20,8 @@ static addMenuItem(title: string, handler: function) Add a custom menu item to the developer menu: ```jsx -DevSettings.addMenuItem("Show Secret Dev Screen", () => { - Alert.alert("Showing secret dev screen!"); +DevSettings.addMenuItem('Show Secret Dev Screen', () => { + Alert.alert('Showing secret dev screen!'); }); ``` diff --git a/docs/easing.md b/docs/easing.md index 19fbd939fbd..0433ab8ee96 100644 --- a/docs/easing.md +++ b/docs/easing.md @@ -87,8 +87,8 @@ export default App = () => { sections={SECTIONS} keyExtractor={(item) => item.title} renderItem={({ item }) => ( - animate(item.easing)} + animate(item.easing)} style={styles.listRow} > {item.title} diff --git a/docs/layout-props.md b/docs/layout-props.md index 657aa22df5a..38efd011263 100644 --- a/docs/layout-props.md +++ b/docs/layout-props.md @@ -6,7 +6,9 @@ title: Layout Props ## Example The following example shows how different properties can affect or shape a React Native layout. + You can try for example to add or remove squares from the UI while changing the values of the property `flexWrap`. + Find more detailed examples about this properties in the [Layout with Flexbox](flexbox) docs page. ```SnackPlayer name=LayoutProps%20Example diff --git a/docs/native-modules-ios.md b/docs/native-modules-ios.md index 6dba5d99138..9afe5417481 100644 --- a/docs/native-modules-ios.md +++ b/docs/native-modules-ios.md @@ -336,7 +336,6 @@ static func requiresMainQueueSetup() -> Bool { } ``` - If your module does not require access to UIKit, then you should respond to `+ requiresMainQueueSetup` with `NO`. ### Enum Constants diff --git a/docs/navigation.md b/docs/navigation.md index 7ff4175a1cf..ded7256e838 100644 --- a/docs/navigation.md +++ b/docs/navigation.md @@ -60,9 +60,7 @@ import {NavigationContainer} from '@react-navigation/native'; export default function App() { return ( - - {/* Rest of your app code */} - + {/* Rest of your app code */} ); } ``` diff --git a/docs/picker.md b/docs/picker.md index 4319708a8b4..baf80578d73 100644 --- a/docs/picker.md +++ b/docs/picker.md @@ -3,7 +3,7 @@ id: picker title: Picker --- -Renders the native picker component on Android and iOS. +Renders the native picker component on Android and iOS. ## Example @@ -125,4 +125,3 @@ Used to locate this view in end-to-end tests. | Type | Required | | ------ | -------- | | string | No | - diff --git a/docs/pixelratio.md b/docs/pixelratio.md index 9581d21e06a..c583f7a5221 100644 --- a/docs/pixelratio.md +++ b/docs/pixelratio.md @@ -133,8 +133,8 @@ static getFontScale(): number 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. -* on Android value reflects the user preference set in Settings > Display > Font size, -* on iOS it will always return the default pixel ratio. +- on Android value reflects the user preference set in Settings > Display > Font size, +- on iOS it will always return the default pixel ratio. If a font scale is not set, this returns the device pixel ratio. diff --git a/docs/ram-bundles-inline-requires.md b/docs/ram-bundles-inline-requires.md index 3cf92d06195..646f7f3a599 100644 --- a/docs/ram-bundles-inline-requires.md +++ b/docs/ram-bundles-inline-requires.md @@ -16,8 +16,8 @@ Inline requires delay the requiring of a module or file until that file is actua ### VeryExpensive.js ```js -import React, { Component } from 'react'; -import { Text } from 'react-native'; +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 @@ -34,13 +34,13 @@ export default class VeryExpensive extends Component { ### Optimized.js ```js -import React, { Component } from 'react'; -import { TouchableOpacity, View, Text } from 'react-native'; +import React, {Component} from 'react'; +import {TouchableOpacity, View, Text} from 'react-native'; let VeryExpensive = null; export default class Optimized extends Component { - state = { needsExpensive: false }; + state = {needsExpensive: false}; didPress = () => { if (VeryExpensive == null) { @@ -54,7 +54,7 @@ export default class Optimized extends Component { render() { return ( - + Load @@ -110,32 +110,34 @@ In your root file (index.(ios|android).js) you can add the following after the i const modules = require.getModules(); const moduleIds = Object.keys(modules); const loadedModuleNames = moduleIds - .filter(moduleId => modules[moduleId].isInitialized) - .map(moduleId => modules[moduleId].verboseName); + .filter((moduleId) => modules[moduleId].isInitialized) + .map((moduleId) => modules[moduleId].verboseName); const waitingModuleNames = moduleIds - .filter(moduleId => !modules[moduleId].isInitialized) - .map(moduleId => modules[moduleId].verboseName); + .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 + 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)};`); +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)) { + 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`. @@ -156,18 +158,18 @@ const config = { transformer: { getTransformOptions: () => { const moduleMap = {}; - modulePaths.forEach(path => { + modulePaths.forEach((path) => { if (fs.existsSync(path)) { moduleMap[resolve(path)] = true; } }); return { preloadedModules: moduleMap, - transform: { inlineRequires: { blacklist: moduleMap } }, + transform: {inlineRequires: {blacklist: moduleMap}}, }; }, }, - projectRoot:ROOT_FOLDER, + projectRoot: ROOT_FOLDER, }; module.exports = config; diff --git a/docs/security.md b/docs/security.md index 3f2982dcfb4..237aa455689 100644 --- a/docs/security.md +++ b/docs/security.md @@ -22,7 +22,7 @@ If you must have an API key or a secret to access some resource from your app, t [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 asynch storage when... | **Don't** use asynch storage for... | -|-----------------------------------------------|-------------------------------------| +| --------------------------------------------- | ----------------------------------- | | Persisting non-sensitive data across app runs | Token storage | | Persisting Redux state | Secrets | | Persisting GraphQL state | | @@ -108,7 +108,7 @@ A library to consider for native OAuth is [react-native-app-auth](https://github ## 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://`. +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 diff --git a/docs/share.md b/docs/share.md index 34fa1cfe86a..186249689e0 100644 --- a/docs/share.md +++ b/docs/share.md @@ -153,4 +153,3 @@ static dismissedAction() ``` _iOS Only_. The dialog has been dismissed. - diff --git a/docs/statusbar.md b/docs/statusbar.md index 731b875ca89..85ebd44878c 100644 --- a/docs/statusbar.md +++ b/docs/statusbar.md @@ -26,7 +26,7 @@ const App = () => { const changeStyleStatusBar = () => { const styleId = styleTypes.indexOf(styleStatusBar) + 1; - + if(styleId === styleTypes.length){ return setStyleStatusBar(styleTypes[0]); } diff --git a/docs/textinput.md b/docs/textinput.md index 2d8df62426a..49a606baeba 100644 --- a/docs/textinput.md +++ b/docs/textinput.md @@ -741,6 +741,7 @@ Possible values for `textContentType` are: ### `passwordRules` When using `textContentType` as `newPassword` on iOS we can let the OS know the minimum requirements of the password so that it can generate one that will satisfy them. + In order to create a valid string for `PasswordRules` take a look to the [Apple Docs](https://developer.apple.com/password-rules/). | Type | Required | Platform | diff --git a/docs/toastandroid.md b/docs/toastandroid.md index 799586e74a6..1538622d998 100644 --- a/docs/toastandroid.md +++ b/docs/toastandroid.md @@ -5,8 +5,8 @@ title: ToastAndroid React Native's ToastAndroid API exposes the Android platform's ToastAndroid module as a JS module. It provides the method `show(message, duration)` which takes the following parameters: -* _message_ A string with the text to toast -* _duration_ The duration of the toast—either `ToastAndroid.SHORT` or `ToastAndroid.LONG` +- _message_ A string with the text to toast +- _duration_ The duration of the toast—either `ToastAndroid.SHORT` or `ToastAndroid.LONG` You can alternatively use `showWithGravity(message, duration, gravity)` to specify where the toast appears in the screen's layout. May be `ToastAndroid.TOP`, `ToastAndroid.BOTTOM` or `ToastAndroid.CENTER`. diff --git a/docs/touchablehighlight.md b/docs/touchablehighlight.md index c1e6be86063..66722e8b9bb 100644 --- a/docs/touchablehighlight.md +++ b/docs/touchablehighlight.md @@ -140,6 +140,7 @@ const styles = StyleSheet.create({ } }); ``` + --- diff --git a/docs/usewindowdimensions.md b/docs/usewindowdimensions.md index 22c357bf16e..15a6f03e2a5 100644 --- a/docs/usewindowdimensions.md +++ b/docs/usewindowdimensions.md @@ -13,6 +13,7 @@ import {useWindowDimensions} from 'react-native'; const windowWidth = useWindowDimensions().width; const windowHeight = useWindowDimensions().height; ``` + ## Example ```SnackPlayer name=useWindowDimensions&supportedPlatforms=ios,android @@ -59,7 +60,7 @@ useWindowDimensions().height; ### `scale` -The pixel ratio of the device your app is running on. +The pixel ratio of the device your app is running on. ```jsx useWindowDimensions().scale; diff --git a/docs/view.md b/docs/view.md index ff874af0313..6bd2b5261fa 100644 --- a/docs/view.md +++ b/docs/view.md @@ -183,9 +183,9 @@ Describes the current state of a component to the user of an assistive technolog See the [Accessibility guide](accessibility.md#accessibilitystate-ios-android) for more information. -| Type | Required | -| --- | --- | -| object: {disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool} | No | +| Type | Required | +| ---------------------------------------------------------------------------------------------- | -------- | +| object: {disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool} | No | --- @@ -334,9 +334,9 @@ For example, if a touchable view has a height of 20 the touchable height can be > 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 | +| Type | Required | +| ------------------------------------------------------------------ | -------- | +| object: {top: number, left: number, bottom: number, right: number} | No | ---