React NativeActivityIndicator #
Displays a circular loading indicator.
Props #
animating?: bool #
Whether to show the indicator (true, the default) or hide it (false).
size?: enum('small', 'large'), number #
Size of the indicator (default is 'small'). -Passing a number to the size prop is only supported on Android.
ioshidesWhenStopped?: bool #
Whether the indicator should hide when not animating (true by default).
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
ActivityIndicator #
Displays a circular loading indicator.
Props #
animating?: PropTypes.bool #
Whether to show the indicator (true, the default) or hide it (false).
size?: PropTypes.oneOfType([ + PropTypes.oneOf([ 'small', 'large' ]), + PropTypes.number, +]) #
Size of the indicator (default is 'small'). +Passing a number to the size prop is only supported on Android.
ioshidesWhenStopped?: PropTypes.bool #
Whether the indicator should hide when not animating (true by default).
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
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 #
date: Date #
The currently selected date.
maximumDate?: Date #
Maximum date.
Restricts the range of possible date/time values.
minimumDate?: Date #
Minimum date.
Restricts the range of possible date/time values.
minuteInterval?: enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30) #
The interval at which minutes can be selected.
mode?: enum('date', 'time', 'datetime') #
The date picker mode.
onDateChange: function #
Date change handler.
This is called when the user changes the date or time in the UI. +source of truth.
Props #
date?: PropTypes.instanceOf(Date).isRequired #
The currently selected date.
maximumDate?: PropTypes.instanceOf(Date) #
Maximum date.
Restricts the range of possible date/time values.
minimumDate?: PropTypes.instanceOf(Date) #
Minimum date.
Restricts the range of possible date/time values.
minuteInterval?: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30]) #
The interval at which minutes can be selected.
mode?: PropTypes.oneOf(['date', 'time', 'datetime']) #
The date picker mode.
onDateChange?: PropTypes.func.isRequired #
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.
timeZoneOffsetInMinutes?: number #
Timezone offset in minutes.
By default, the date picker will use the device's timezone. With this +date and time.
timeZoneOffsetInMinutes?: PropTypes.number #
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.
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
drawerWidth prop.Example:
drawerLockMode?: enum('unlocked', 'locked-closed', 'locked-open') #
Specifies the lock mode of the drawer. The drawer can be locked in 3 states: +);
drawerLockMode?: PropTypes.oneOf([ + 'unlocked', + 'locked-closed', + 'locked-open' +]) #
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).
drawerPosition?: enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) #
Specifies the side of the screen from which the drawer will slide in.
drawerWidth?: number #
Specifies the width of the drawer, more precisely the width of the view that be pulled in -from the edge of the window.
keyboardDismissMode?: enum('none', 'on-drag') #
Determines whether the keyboard gets dismissed in response to a drag.
+The drawer may still be opened and closed programmatically (openDrawer/closeDrawer).
drawerPosition?: PropTypes.oneOf([ + DrawerConsts.DrawerPosition.Left, + DrawerConsts.DrawerPosition.Right +]) #
Specifies the side of the screen from which the drawer will slide in.
drawerWidth?: PropTypes.number #
Specifies the width of the drawer, more precisely the width of the view that be pulled in +from the edge of the window.
keyboardDismissMode?: PropTypes.oneOf([ + 'none', // default + 'on-drag', +]) #
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.
onDrawerClose?: function #
Function called whenever the navigation view has been closed.
onDrawerOpen?: function #
Function called whenever the navigation view has been opened.
onDrawerSlide?: function #
Function called whenever there is an interaction with the navigation view.
onDrawerStateChanged?: function #
Function called when the drawer state has changed. The drawer can be in 3 states: + - 'on-drag', the keyboard is dismissed when a drag begins.
onDrawerClose?: PropTypes.func #
Function called whenever the navigation view has been closed.
onDrawerOpen?: PropTypes.func #
Function called whenever the navigation view has been opened.
onDrawerSlide?: PropTypes.func #
Function called whenever there is an interaction with the navigation view.
onDrawerStateChanged?: PropTypes.func #
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
renderNavigationView: function #
The navigation view that will be rendered to the side of the screen and can be pulled in.
statusBarBackgroundColor?: color #
Make the drawer take the entire screen and draw the background of the +navigation view is now finishing its closing or opening animation
renderNavigationView?: PropTypes.func.isRequired #
The navigation view that will be rendered to the side of the screen and can be pulled in.
Methods #
You can edit the content above on GitHub and send us a pull request!
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 #
behavior?: enum('height', 'position', 'padding') #
contentContainerStyle?: ViewPropTypes.style #
The style of the content container(View) when behavior is 'position'.
keyboardVerticalOffset: number #
This is the distance between the top of the user screen and the react native view, +It can automatically adjust either its position or bottom padding based on the position of the keyboard.
Props #
behavior?: PropTypes.oneOf(['height', 'position', 'padding']) #
contentContainerStyle?: ViewPropTypes.style #
The style of the content container(View) when behavior is 'position'.
keyboardVerticalOffset?: PropTypes.number.isRequired #
This is the distance between the top of the user screen and the react native view, may be non-zero in some use cases.
Methods #
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
Layout Props #
Props #
alignContent?: enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around') #
alignContent controls how a rows align in the cross direction,
+
Layout Props #
Props #
alignContent?: enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around') #
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.
alignItems?: enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline') #
alignItems aligns children in the cross direction.
diff --git a/releases/next/docs/linking-libraries-ios.html b/releases/next/docs/linking-libraries-ios.html
index 6459da46d4f..b43707a22bf 100644
--- a/releases/next/docs/linking-libraries-ios.html
+++ b/releases/next/docs/linking-libraries-ios.html
@@ -6,7 +6,7 @@ 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 the few steps to link your libraries that contain native code #
Automatic linking #
Step 1 #
Install a library with native dependencies:
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:
Done! All libraries with a native dependencies should be successfully linked to your iOS/Android project.
Manual linking #
Step 1 #
If the library has native code, there must be a .xcodeproj file inside it's
+your libs based on dependencies and devDependencies in your package.json file.
Step 2 #
Link your native dependencies:
Done! All libraries with native dependencies should be successfully linked to your iOS/Android project.
Manual linking #
Step 1 #
If the library has native code, there must be a .xcodeproj file inside it's
folder.
Drag this file to your project on Xcode (usually under the Libraries group
on Xcode);
Step 2 #
Click on your main project file (the one that represents the .xcodeproj)
diff --git a/releases/next/docs/linking.html b/releases/next/docs/linking.html
index 1d54886a577..a15ee729719 100644
--- a/releases/next/docs/linking.html
+++ b/releases/next/docs/linking.html
@@ -15,7 +15,7 @@ documentation for more information.
NOTE: On iOS you'll need to link RCTLinking to your project by following
the steps described here.
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:
*AppDelegate.m:Info.plist or canOpenURL will always return false.@pa
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
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
nullNOTE: class OpenURLButton extends React.Component { static propTypes = { - url: React.PropTypes.string, + url: PropTypes.string, }; handleClick = () => { diff --git a/releases/next/docs/listview.html b/releases/next/docs/listview.html index b118ab9a6ef..4d8cacb8268 100644 --- a/releases/next/docs/listview.html +++ b/releases/next/docs/listview.html @@ -31,42 +31,42 @@ 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 #
dataSource: ListViewDataSource #
An instance of ListView.DataSource to use
enableEmptySections?: bool #
Flag indicating whether empty section headers should be rendered. In the future release +rendering rows.
Props #
dataSource?: PropTypes.instanceOf(ListViewDataSource).isRequired #
An instance of ListView.DataSource to use
enableEmptySections?: PropTypes.bool #
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.
initialListSize: number #
How many rows to render on initial component mount. Use this to make +If empty sections are not desired to be rendered their indices should be excluded from sectionID object.
initialListSize?: PropTypes.number.isRequired #
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.
onChangeVisibleRows?: function #
(visibleRows, changedRows) => void
Called when the set of visible rows changes. visibleRows maps
+over the course of multiple frames.
onChangeVisibleRows?: PropTypes.func #
(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.
onEndReached?: function #
Called when all rows have been rendered and the list has been scrolled +false indicating the view has moved out of view.
onEndReached?: PropTypes.func #
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.
onEndReachedThreshold: number #
Threshold in pixels (virtual, not physical) for calling onEndReached.
pageSize: number #
Number of rows to render per event loop. Note: if your 'rows' are actually +event is provided.
onEndReachedThreshold?: PropTypes.number.isRequired #
Threshold in pixels (virtual, not physical) for calling onEndReached.
pageSize?: PropTypes.number.isRequired #
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.
removeClippedSubviews?: bool #
A performance optimization for improving scroll perf of +the edge of the ListView as new pages are loaded.
removeClippedSubviews?: PropTypes.bool #
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.
renderFooter?: function #
() => renderable
The header and footer are always rendered (if these props are provided) +containers. This is enabled by default.
renderFooter?: PropTypes.func #
() => 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.
renderHeader?: function #
renderRow: function #
(rowData, sectionID, rowID, highlightRow) => renderable
Takes a data entry from the data source and its ids and should return +at the bottom of the list, and header at the top, on every render pass.
renderHeader?: PropTypes.func #
renderRow?: PropTypes.func.isRequired #
(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).
renderScrollComponent: function #
(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.
renderSectionHeader?: function #
(sectionData, sectionID) => renderable
If provided, a header is rendered for this section.
renderSeparator?: function #
(sectionID, rowID, adjacentRowHighlighted) => renderable
If provided, a renderable component to be rendered as the separator +state of a row can be reset by calling highlightRow(null).
renderScrollComponent?: PropTypes.func.isRequired #
(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.
renderSectionHeader?: PropTypes.func #
(sectionData, sectionID) => renderable
If provided, a header is rendered for this section.
renderSeparator?: PropTypes.func #
(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.
scrollRenderAheadDistance: number #
How early to start rendering rows before they come on screen, in -pixels.
stickyHeaderIndices: [number] #
An array of child indices determining which children get docked to the +is highlighted.
scrollRenderAheadDistance?: PropTypes.number.isRequired #
How early to start rendering rows before they come on screen, in +pixels.
stickyHeaderIndices?: PropTypes.arrayOf(PropTypes.number).isRequired #
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}.
stickySectionHeadersEnabled?: bool #
Makes the sections headers sticky. The sticky behavior means that it
+with horizontal={true}.
stickySectionHeadersEnabled?: PropTypes.bool #
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 diff --git a/releases/next/docs/modal.html b/releases/next/docs/modal.html index da5eb6ee5a0..e6394caeadf 100644 --- a/releases/next/docs/modal.html +++ b/releases/next/docs/modal.html @@ -44,8 +44,8 @@ class ModalExample extends /View> ); } -}
Props #
animated?: bool #
DeprecatedUse the animationType prop instead.
animationType?: enum('none', 'slide', 'fade') #
The animationType prop controls how the modal animates.
slideslides in from the bottomfadefades into viewnoneappears without an animation
Default is set to none.
onShow?: function #
The onShow prop allows passing a function that will be called once the modal has been shown.
transparent?: bool #
The transparent prop determines whether your modal will fill the entire view. Setting this to true will render the modal over a transparent background.
visible?: bool #
The visible prop determines whether your modal is visible.
androidhardwareAccelerated?: bool #
The hardwareAccelerated prop controls whether to force hardware acceleration for the underlying window.
androidonRequestClose?: Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func #
The onRequestClose callback is called when the user taps the hardware back button.
iosonOrientationChange?: function #
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.
iossupportedOrientations?: [enum('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right')] #
The supportedOrientations prop allows the modal to be rotated to any of the specified orientations.
+}
Props #
animated?: bool #
DeprecatedUse the animationType prop instead.
animationType?: PropTypes.oneOf(['none', 'slide', 'fade']) #
The animationType prop controls how the modal animates.
slideslides in from the bottomfadefades into viewnoneappears without an animation
Default is set to none.
onShow?: PropTypes.func #
The onShow prop allows passing a function that will be called once the modal has been shown.
transparent?: PropTypes.bool #
The transparent prop determines whether your modal will fill the entire view. Setting this to true will render the modal over a transparent background.
visible?: PropTypes.bool #
The visible prop determines whether your modal is visible.
androidhardwareAccelerated?: PropTypes.bool #
The hardwareAccelerated prop controls whether to force hardware acceleration for the underlying window.
androidonRequestClose?: Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func #
The onRequestClose callback is called when the user taps the hardware back button.
iosonOrientationChange?: PropTypes.func #
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.
iossupportedOrientations?: PropTypes.arrayOf(PropTypes.oneOf(['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right'])) #
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.
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
UINavigationController, providing the same
animations and behavior from UIKIt.As the name implies, it is only available on iOS. Take a look at
-React Navigation for a cross-platform
+React Navigation for a cross-platform
solution in JavaScript, or check out either of these components for native
solutions: native-navigation,
react-native-navigation.
To set up the navigator, provide the initialRoute prop with a route
@@ -130,18 +130,144 @@ passed to the NavigatorIOS component.
In the example above the navigation bar color is changed when the new route -is pushed.
Props #
barTintColor?: string #
The default background color of the navigation bar.
initialRoute: {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: ViewPropTypes.style, navigationBarHidden: bool, shadowHidden: bool, tintColor: string, barTintColor: string, titleTextColor: string, translucent: bool} #
NavigatorIOS uses route objects to identify child views, their props,
+is pushed.
Props #
barTintColor?: PropTypes.string #
The default background color of the navigation bar.
initialRoute?: PropTypes.shape({ + /** + * The React Class to render for this route + */ + component: PropTypes.func.isRequired, + + /** + * The title displayed in the navigation bar and the back button for this + * route. + */ + title: PropTypes.string.isRequired, + + /** + * If set, a title image will appear instead of the text title. + */ + titleImage: Image.propTypes.source, + + /** + * Use this to specify additional props to pass to the rendered + * component. `NavigatorIOS` will automatically pass in `route` and + * `navigator` props to the comoponent. + */ + passProps: PropTypes.object, + + /** + * If set, the left navigation button image will be displayed using this + * source. Note that this doesn't apply to the header of the current + * view, but to those views that are subsequently pushed. + */ + backButtonIcon: Image.propTypes.source, + + /** + * If set, the left navigation button text will be set to this. Note that + * this doesn't apply to the left button of the current view, but to + * those views that are subsequently pushed + */ + backButtonTitle: PropTypes.string, + + /** + * If set, the left navigation button image will be displayed using + * this source. + */ + leftButtonIcon: Image.propTypes.source, + + /** + * If set, the left navigation button will display this text. + */ + leftButtonTitle: PropTypes.string, + + /** + * If set, the left header button will appear with this system icon + * + * Supported icons are `done`, `cancel`, `edit`, `save`, `add`, + * `compose`, `reply`, `action`, `organize`, `bookmarks`, `search`, + * `refresh`, `stop`, `camera`, `trash`, `play`, `pause`, `rewind`, + * `fast-forward`, `undo`, `redo`, and `page-curl` + */ + leftButtonSystemIcon: PropTypes.oneOf(Object.keys(SystemIcons)), + + /** + * This function will be invoked when the left navigation bar item is + * pressed. + */ + onLeftButtonPress: PropTypes.func, + + /** + * If set, the right navigation button image will be displayed using + * this source. + */ + rightButtonIcon: Image.propTypes.source, + + /** + * If set, the right navigation button will display this text. + */ + rightButtonTitle: PropTypes.string, + + /** + * If set, the right header button will appear with this system icon + * + * See leftButtonSystemIcon for supported icons + */ + rightButtonSystemIcon: PropTypes.oneOf(Object.keys(SystemIcons)), + + /** + * This function will be invoked when the right navigation bar item is + * pressed. + */ + onRightButtonPress: PropTypes.func, + + /** + * Styles for the navigation item containing the component. + */ + wrapperStyle: ViewPropTypes.style, + + /** + * Boolean value that indicates whether the navigation bar is hidden. + */ + navigationBarHidden: PropTypes.bool, + + /** + * Boolean value that indicates whether to hide the 1px hairline + * shadow. + */ + shadowHidden: PropTypes.bool, + + /** + * The color used for the buttons in the navigation bar. + */ + tintColor: PropTypes.string, + + /** + * The background color of the navigation bar. + */ + barTintColor: PropTypes.string, + + /** + * The text color of the navigation bar title. + */ + titleTextColor: PropTypes.string, + + /** + * Bboolean value that indicates whether the navigation bar is + * translucent. + */ + translucent: PropTypes.bool, + +}).isRequired #
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.
interactivePopGestureEnabled?: bool #
Boolean value that indicates whether the interactive pop gesture is
+operations expect routes to look like this the initialRoute.
interactivePopGestureEnabled?: PropTypes.bool #
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.
itemWrapperStyle?: ViewPropTypes.style #
The default wrapper style for components in the navigator.
-A common use case is to set the backgroundColor for every scene.
navigationBarHidden?: bool #
Boolean value that indicates whether the navigation bar is hidden -by default.
shadowHidden?: bool #
Boolean value that indicates whether to hide the 1px hairline shadow -by default.
tintColor?: string #
The default color used for the buttons in the navigation bar.
titleTextColor?: string #
The default text color of the navigation bar title.
translucent?: bool #
Boolean value that indicates whether the navigation bar is
+A common use case is to set the backgroundColor for every scene.
navigationBarHidden?: PropTypes.bool #
Boolean value that indicates whether the navigation bar is hidden +by default.
shadowHidden?: PropTypes.bool #
Boolean value that indicates whether to hide the 1px hairline shadow +by default.
tintColor?: PropTypes.string #
The default color used for the buttons in the navigation bar.
titleTextColor?: PropTypes.string #
The default text color of the navigation bar title.
translucent?: PropTypes.bool #
Boolean value that indicates whether the navigation bar is translucent by default
Methods #
push(route: object) #
Navigate forward to a new route.
| Name and Type | Description |
|---|---|
| route object | The new route to navigate to. |
popN(n: number) #
Go back N scenes at once. When N=1, behavior matches pop().
| Name and Type | Description |
|---|---|
| n number | The number of scenes to pop. |
pop() #
Pop back to the previous scene.
replaceAtIndex(route: object, index: number) #
Replace a route in the navigation stack.
| Name and Type | Description |
|---|---|
| route object | The new route that will replace the specified one. |
| index number | The route into the stack that should be replaced. If it is negative, it counts from the back of the stack. |
replace(route: object) #
Replace the route for the current scene and immediately load the view for the new route.
| Name and Type | Description |
|---|---|
| route object | The new route to navigate to. |
replacePrevious(route: object) #
Replace the route/view for the previous scene.
| Name and Type | Description |
|---|---|
| route object | The new route to will replace the previous scene. |
popToTop() #
Go back to the topmost item in the navigation stack.
popToRoute(route: object) #
Go back to the item for a particular route object.
| Name and Type | Description |
|---|---|
| route object | The new route to navigate to. |
replacePreviousAndPop(route: object) #
Replaces the previous route/view and transitions back to it.
| Name and Type | Description |
|---|---|
| route object | The new route that replaces the previous scene. |
resetTo(route: object) #
Replaces the top item and pop to it.
| Name and Type | Description |
|---|---|
| route object | The new route that will replace the topmost item. |
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
Your app can now display all sorts of data and you may soon need to organize this content into several screens. To manage the transition between these screens, you will need to learn about navigators.
You can edit the content above on GitHub and send us a pull request!
PickerIOS #
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
PickerIOS #
Props #
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
Example:
/> ); },Props #
indeterminate?: indeterminateType #
If the progress bar will show indeterminate progress. Note that this -can only be false if styleAttr is Horizontal.
progress?: number #
The progress value (between 0 and 1).
styleAttr?: enum('Horizontal', 'Normal', 'Small', 'Large', 'Inverse', 'SmallInverse', 'LargeInverse') #
Style of the ProgressBar. One of:
- Horizontal
- Normal (default)
- Small
- Large
- Inverse
- SmallInverse
- LargeInverse
testID?: string #
Used to locate this view in end-to-end tests.
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
progress?: PropTypes.number #
The progress value (between 0 and 1).
styleAttr?: PropTypes.oneOf(STYLE_ATTRIBUTES) #
Style of the ProgressBar. One of:
- Horizontal
- Normal (default)
- Small
- Large
- Inverse
- SmallInverse
- LargeInverse
testID?: PropTypes.string #
Used to locate this view in end-to-end tests.
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
ProgressViewIOS #
Use ProgressViewIOS to render a UIProgressView on iOS.
Props #
progress?: number #
The progress value (between 0 and 1).
progressImage?: Image.propTypes.source #
A stretchable image to display as the progress bar.
progressTintColor?: string #
The tint color of the progress bar itself.
progressViewStyle?: enum('default', 'bar') #
The progress bar style.
trackImage?: Image.propTypes.source #
A stretchable image to display behind the progress bar.
trackTintColor?: string #
The tint color of the progress bar track.
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
ProgressViewIOS #
Use ProgressViewIOS to render a UIProgressView on iOS.
Props #
progress?: PropTypes.number #
The progress value (between 0 and 1).
progressImage?: Image.propTypes.source #
A stretchable image to display as the progress bar.
progressTintColor?: PropTypes.string #
The tint color of the progress bar itself.
progressViewStyle?: PropTypes.oneOf(['default', 'bar']) #
The progress bar style.
trackImage?: Image.propTypes.source #
A stretchable image to display behind the progress bar.
trackTintColor?: PropTypes.string #
The tint color of the progress bar track.
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
onRefresh event.} ... }
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 #
onRefresh?: function #
Called when the view starts refreshing.
refreshing: bool #
Whether the view should be indicating an active refresh.
androidenabled?: bool #
Whether the pull to refresh functionality is enabled.
androidprogressViewOffset?: number #
Progress view top offset
androidsize?: enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE) #
Size of the refresh indicator, see RefreshControl.SIZE.
iostitle?: string #
The title displayed under the refresh indicator.
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
onRefresh function otherwise the refresh indicator will stop immediately.Props #
onRefresh?: PropTypes.func #
Called when the view starts refreshing.
refreshing?: PropTypes.bool.isRequired #
Whether the view should be indicating an active refresh.
androidcolors?: PropTypes.arrayOf(ColorPropType) #
The colors (at least one) that will be used to draw the refresh indicator.
androidenabled?: PropTypes.bool #
Whether the pull to refresh functionality is enabled.
androidprogressViewOffset?: PropTypes.number #
Progress view top offset
androidsize?: PropTypes.oneOf([RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE]) #
Size of the refresh indicator, see RefreshControl.SIZE.
iostitle?: PropTypes.string #
The title displayed under the refresh indicator.
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
return ( contentContainer: { paddingVertical: 20 } - });
horizontal?: bool #
When true, the scroll view's children are arranged horizontally in a row -instead of vertically in a column. The default value is false.
keyboardDismissMode?: enum('none', 'interactive', 'on-drag') #
Determines whether the keyboard gets dismissed in response to a drag. + });
horizontal?: PropTypes.bool #
When true, the scroll view's children are arranged horizontally in a row +instead of vertically in a column. The default value is false.
keyboardDismissMode?: PropTypes.oneOf([ + 'none', // default + 'interactive', + 'on-drag', +]) #
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'.
keyboardShouldPersistTaps?: enum('always', 'never', 'handled', false, true) #
Determines when the keyboard should stay visible after a tap.
- 'never' (the default), tapping outside of the focused text input when the keyboard + On android this is not supported and it will have the same behavior as 'none'.
keyboardShouldPersistTaps?: PropTypes.oneOf(['always', 'never', 'handled', false, true]) #
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 -a children, (or captured by an ancestor).
- false, deprecated, use 'never' instead
- true, deprecated, use 'always' instead
onContentSizeChange?: function #
Called when scrollable content view of the ScrollView changes.
Handler function is passed the content width and content height as parameters: +a children, (or captured by an ancestor).
onContentSizeChange?: PropTypes.func #
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.
onScroll?: function #
Fires at most once per frame during scrolling. The frequency of the
-events can be controlled using the scrollEventThrottle prop.
pagingEnabled?: bool #
When true, the scroll view stops on multiples of the scroll view's size +which this ScrollView renders.
onScroll?: PropTypes.func #
Fires at most once per frame during scrolling. The frequency of the
+events can be controlled using the scrollEventThrottle prop.
pagingEnabled?: PropTypes.bool #
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.
refreshControl?: element #
A RefreshControl component, used to provide pull-to-refresh +value is false.
refreshControl?: PropTypes.element #
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.
removeClippedSubviews?: bool #
Experimental: When true, offscreen child views (whose overflow value is
+(horizontal prop must be false).
See RefreshControl.
removeClippedSubviews?: PropTypes.bool #
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.
scrollEnabled?: bool #
When false, the content does not scroll. -The default value is true.
showsHorizontalScrollIndicator?: bool #
When true, shows a horizontal scroll indicator. -The default value is true.
showsVerticalScrollIndicator?: bool #
When true, shows a vertical scroll indicator. -The default value is true.
stickyHeaderIndices?: [number] #
An array of child indices determining which children get docked to the +true.
scrollEnabled?: PropTypes.bool #
When false, the content does not scroll. +The default value is true.
showsHorizontalScrollIndicator?: PropTypes.bool #
When true, shows a horizontal scroll indicator. +The default value is true.
showsVerticalScrollIndicator?: PropTypes.bool #
When true, shows a vertical scroll indicator. +The default value is true.
stickyHeaderIndices?: PropTypes.arrayOf(PropTypes.number) #
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
@@ -57,38 +61,49 @@ 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.
androidendFillColor?: color #
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.
androidoverScrollMode?: enum('auto', 'always', 'never') #
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.
androidscrollPerfTag?: string #
Tag used to log scroll performance on this scroll view. Will force +that is not needed in the general case.
androidoverScrollMode?: PropTypes.oneOf([ + 'auto', + 'always', + 'never', +]) #
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.
androidscrollPerfTag?: PropTypes.string #
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.
iosalwaysBounceHorizontal?: bool #
When true, the scroll view bounces horizontally when it reaches the end +FpsListener for it to be useful.
iosalwaysBounceHorizontal?: PropTypes.bool #
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.
iosalwaysBounceVertical?: bool #
When true, the scroll view bounces vertically when it reaches the end
+value is true when horizontal={true} and false otherwise.
iosalwaysBounceVertical?: PropTypes.bool #
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.
iosautomaticallyAdjustContentInsets?: bool #
Controls whether iOS should automatically adjust the content inset
+value is false when horizontal={true} and true otherwise.
iosautomaticallyAdjustContentInsets?: PropTypes.bool #
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.
iosbounces?: bool #
When true, the scroll view bounces when it reaches the end of the +tab bar/ toolbar. The default value is true.
iosbounces?: PropTypes.bool #
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.
iosbouncesZoom?: bool #
When true, gestures can drive zoom past min/max and the zoom will animate
+the alwaysBounce* props are true. The default value is true.
iosbouncesZoom?: PropTypes.bool #
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.
ioscanCancelContentTouches?: bool #
When false, once tracking starts, won't try to drag if the touch moves. -The default value is true.
ioscenterContent?: bool #
When true, the scroll view automatically centers the content when the +the limits.
ioscanCancelContentTouches?: PropTypes.bool #
When false, once tracking starts, won't try to drag if the touch moves. +The default value is true.
ioscenterContent?: PropTypes.bool #
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.
ioscontentInset?: {top: number, left: number, bottom: number, right: number} #
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}.
ioscontentOffset?: PointPropType #
Used to manually set the starting scroll offset.
-The default value is {x: 0, y: 0}.
iosdecelerationRate?: enum('fast', 'normal'), number #
A floating-point number that determines how quickly the scroll view
+The default value is {x: 0, y: 0}.
iosdecelerationRate?: PropTypes.oneOfType([ + PropTypes.oneOf(['fast', 'normal']), + PropTypes.number, +]) #
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
iosdirectionalLockEnabled?: bool #
When true, the ScrollView will try to lock to only vertical or horizontal -scrolling while dragging. The default value is false.
iosindicatorStyle?: enum('default', 'black', 'white') #
The style of the scroll indicators. + - fast: 0.99
iosdirectionalLockEnabled?: PropTypes.bool #
When true, the ScrollView will try to lock to only vertical or horizontal +scrolling while dragging. The default value is false.
iosindicatorStyle?: PropTypes.oneOf([ + 'default', // default + 'black', + 'white', +]) #
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.
iosmaximumZoomScale?: number #
The maximum allowed zoom scale. The default value is 1.0.
iosminimumZoomScale?: number #
The minimum allowed zoom scale. The default value is 1.0.
iosonScrollAnimationEnd?: function #
Called when a scrolling animation ends.
iosscrollEventThrottle?: number #
This controls how often the scroll event will be fired while scrolling
+ - white, scroll indicator is white. This style is good against a dark background.
iosmaximumZoomScale?: PropTypes.number #
The maximum allowed zoom scale. The default value is 1.0.
iosminimumZoomScale?: PropTypes.number #
The minimum allowed zoom scale. The default value is 1.0.
iosonScrollAnimationEnd?: PropTypes.func #
Called when a scrolling animation ends.
iosscrollEventThrottle?: PropTypes.number #
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. @@ -98,15 +113,19 @@ 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.
iosscrollIndicatorInsets?: {top: number, left: number, bottom: number, right: number} #
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}.
iosscrollsToTop?: bool #
When true, the scroll view scrolls to top when the status bar is tapped. -The default value is true.
iossnapToAlignment?: enum('start', 'center', 'end') #
When snapToInterval is set, snapToAlignment will define the relationship
+the contentInset. Defaults to {0, 0, 0, 0}.
iosscrollsToTop?: PropTypes.bool #
When true, the scroll view scrolls to top when the status bar is tapped. +The default value is true.
iossnapToAlignment?: PropTypes.oneOf([ + 'start', // default + 'center', + 'end', +]) #
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)
iossnapToInterval?: number #
When set, causes the scroll view to stop at multiples of the value of
+ - end will align the snap at the right (horizontal) or bottom (vertical)
iossnapToInterval?: PropTypes.number #
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.
ioszoomScale?: number #
The current scale of the scroll view content. The default value is 1.0.
Methods #
scrollTo(y?: number, object, x?: number, animated?: boolean) #
Scrolls to a given x, y offset, either immediately or 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,
+with snapToAlignment.
ioszoomScale?: PropTypes.number #
The current scale of the scroll view content. The default value is 1.0.
Methods #
scrollTo(y?: number, object, x?: number, animated?: boolean) #
Scrolls to a given x, y offset, either immediately or 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(options?: object) #
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,
diff --git a/releases/next/docs/sectionlist.html b/releases/next/docs/sectionlist.html
index 930761d500a..a6ec6def919 100644
--- a/releases/next/docs/sectionlist.html
+++ b/releases/next/docs/sectionlist.html
@@ -25,10 +25,11 @@ changes. This includes the data prop and parent component state.
key prop on each item and uses that for the React key.
-Alternatively, you can provide a custom keyExtractor prop.NOTE: removeClippedSubviews might not be necessary and may cause bugs. If you see issues with
-content not rendering, e.g when using LayoutAnimation, try setting
-removeClippedSubviews={false}, and we may change the default in the future after more
-experimentation in production apps.
Props #
ItemSeparatorComponent?: ?ReactClass<any> #
Rendered in between adjacent Items within each section.
ListFooterComponent?: ?ReactClass<any> | React.Element<any> #
Rendered at the very end of the list.
ListHeaderComponent?: ?ReactClass<any> | React.Element<any> #
Rendered at the very beginning of the list.
SectionSeparatorComponent?: ?ReactClass<any> #
Rendered in between each section.
extraData?: any #
A marker property for telling the list to re-render (since it implements PureComponent). If
+Alternatively, you can provide a custom keyExtractor prop.
Props #
ItemSeparatorComponent?: ?ReactClass<any> #
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.
ListFooterComponent?: ?ReactClass<any> | React.Element<any> #
Rendered at the very end of the list.
ListHeaderComponent?: ?ReactClass<any> | React.Element<any> #
Rendered at the very beginning of the list.
SectionSeparatorComponent?: ?ReactClass<any> #
Rendered in between each section. Also receives highlighted, leadingItem, and any custom
+props from separators.updateProps.
extraData?: any #
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.
initialNumToRender: number #
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
@@ -43,8 +44,21 @@ sure to also set the refreshing prop correctly.
Called when the viewability of rows changes, as defined by the
-viewabilityConfig prop.
refreshing?: ?boolean #
Set this true while waiting for new data from a refresh.
renderItem: (info: {item: Item, index: number}) => ?React.Element<any> #
Default renderer for every item in every section. Can be over-ridden on a per-section basis.
renderSectionHeader?: ?(info: {section: SectionT}) => ?React.Element<any> #
Rendered at the top of each section. These stick to the top of the ScrollView by default on
-iOS. See stickySectionHeadersEnabled.
sections: Array<SectionT> #
stickySectionHeadersEnabled?: boolean #
Makes section headers stick to the top of the screen until the next one pushes it off. Only
+viewabilityConfig prop.
refreshing?: ?boolean #
Set this true while waiting for new data from a refresh.
removeClippedSubviews?: boolean #
Note: may have bugs (missing content) in some circumstances - use at your own risk.
This may improve scroll performance for large lists.
renderItem: (info: { + item: Item, + index: number, + separators: { + highlight: () => void, + unhighlight: () => void, + updateProps: (select: 'leading' | 'trailing', newProps: Object) => void, + }, +}) => ?React.Element<any> #
Default renderer for every item in every section. Can be over-ridden on a per-section basis.
renderSectionHeader?: ?(info: {section: SectionT}) => ?React.Element<any> #
Rendered at the top of each section. These stick to the top of the ScrollView by default on
+iOS. See stickySectionHeadersEnabled.
sections: Array<SectionT> #
The actual data to render, akin to the data prop in <FlatList>.
General shape:
stickySectionHeadersEnabled?: boolean #
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.
Methods #
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
@@ -96,11 +110,9 @@ const renderSectionHeader = /View>
);
-const CustomSeparatorComponent = ({text}) => (
- <View>
- <SeparatorComponent />
+const CustomSeparatorComponent = ({text, highlighted}) => (
+ <View style={[styles.customSeparator, highlighted && {backgroundColor: 'rgb(217, 217, 217)'}]}>
<Text style={styles.separatorText}>{text}</Text>
- <SeparatorComponent />
</View>
);
@@ -161,11 +173,11 @@ class SectionListExample extends ={HeaderComponent}
ListFooterComponent={FooterComponent}
- SectionSeparatorComponent={() =>
- <CustomSeparatorComponent text="SECTION SEPARATOR" />
+ SectionSeparatorComponent={({highlighted}) =>
+ <CustomSeparatorComponent highlighted={highlighted} text="SECTION SEPARATOR" />
}
- ItemSeparatorComponent={() =>
- <CustomSeparatorComponent text="ITEM SEPARATOR" />
+ ItemSeparatorComponent={({highlighted}) =>
+ <CustomSeparatorComponent highlighted={highlighted} text="ITEM SEPARATOR" />
}
debug={this.state.debug}
enableVirtualization={this.state.virtualized}
@@ -178,22 +190,30 @@ class SectionListExample extends ={[
{renderItem: renderStackedItem, key: 's1', data: [
- {title: 'Item In Header Section', text: 'Section s1', key: '0'},
+ {title: 'Item In Header Section', text: 'Section s1', key: 'header item'},
]},
{key: 's2', data: [
- {noImage: true, title: '1st item', text: 'Section s2', key: '0'},
- {noImage: true, title: '2nd item', text: 'Section s2', key: '1'},
+ {noImage: true, title: '1st item', text: 'Section s2', key: 'noimage0'},
+ {noImage: true, title: '2nd item', text: 'Section s2', key: 'noimage1'},
]},
...filteredSectionData,
]}
+ style={styles.list}
viewabilityConfig={VIEWABILITY_CONFIG}
/>
</UIExplorerPage>
);
}
- _renderItemComponent = ({item}) => (
- <ItemComponent item={item} onPress={this._pressItem} />
+
+ _renderItemComponent = ({item, separators}) => (
+ <ItemComponent
+ item={item}
+ onPress={this._pressItem}
+ onHideUnderlay={separators.unhighlight}
+ onShowUnderlay={separators.highlight}
+ />
);
+
// This is called when items change viewability by scrolling into our out of
// the viewable area.
_onViewableItemsChanged = (info: {
@@ -212,17 +232,25 @@ class SectionListExample extends )));
}
};
- _pressItem = (index: number) => {
- pressItem(this, index);
+
+ _pressItem = (key: string) => {
+ !isNaN(key) && pressItem(this, key);
};
}
const styles = StyleSheet.create({
+ customSeparator: {
+ backgroundColor: 'rgb(200, 199, 204)',
+ },
header: {
backgroundColor: '#e9eaed',
},
headerText: {
padding: 4,
+ fontWeight: '600',
+ },
+ list: {
+ backgroundColor: 'white',
},
optionSection: {
flexDirection: 'row',
@@ -233,8 +261,7 @@ const styles = StyleSheet: {
color: 'gray',
alignSelf: 'center',
- padding: 4,
- fontSize: 9,
+ fontSize: 7,
},
});
diff --git a/releases/next/docs/segmentedcontrolios.html b/releases/next/docs/segmentedcontrolios.html
index 756c363d139..4f94df90472 100644
--- a/releases/next/docs/segmentedcontrolios.html
+++ b/releases/next/docs/segmentedcontrolios.html
@@ -7,11 +7,11 @@ selects a value and changes the index, as shown in the example below.
Props #
enabled?: bool #
If false the user won't be able to interact with the control. -Default value is true.
momentary?: bool #
If true, then selecting a segment won't persist visually.
-The onValueChange callback will still work as expected.
onChange?: function #
Callback that is called when the user taps a segment; -passes the event as an argument
onValueChange?: function #
Callback that is called when the user taps a segment; -passes the segment's value as an argument
selectedIndex?: number #
The index in props.values of the segment to be (pre)selected.
tintColor?: string #
Accent color of the control.
values?: [string] #
The labels for the control's segment buttons, in order.
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
Props #
enabled?: PropTypes.bool #
If false the user won't be able to interact with the control. +Default value is true.
momentary?: PropTypes.bool #
If true, then selecting a segment won't persist visually.
+The onValueChange callback will still work as expected.
onChange?: PropTypes.func #
Callback that is called when the user taps a segment; +passes the event as an argument
onValueChange?: PropTypes.func #
Callback that is called when the user taps a segment; +passes the segment's value as an argument
selectedIndex?: PropTypes.number #
The index in props.values of the segment to be (pre)selected.
tintColor?: PropTypes.string #
Accent color of the control.
values?: PropTypes.arrayOf(PropTypes.string) #
The labels for the control's segment buttons, in order.
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
Slider #
A component used to select a single value from a range of values.
Props #
disabled?: bool #
If true the user won't be able to move the slider. +
Slider #
A component used to select a single value from a range of values.
Props #
disabled?: PropTypes.bool #
If true the user won't be able to move the slider. Default value is false.
maximumTrackTintColor?: color #
The color used for the track to the right of the button. -Overrides the default blue gradient image on iOS.
maximumValue?: number #
Initial maximum value of the slider. Default value is 1.
minimumTrackTintColor?: color #
The color used for the track to the left of the button. -Overrides the default blue gradient image on iOS.
minimumValue?: number #
Initial minimum value of the slider. Default value is 0.
onSlidingComplete?: function #
Callback that is called when the user releases the slider, +Overrides the default blue gradient image on iOS.
maximumValue?: PropTypes.number #
Initial maximum value of the slider. Default value is 1.
minimumTrackTintColor?: color #
The color used for the track to the left of the button. +Overrides the default blue gradient image on iOS.
minimumValue?: PropTypes.number #
Initial minimum value of the slider. Default value is 0.
onSlidingComplete?: PropTypes.func #
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.
onValueChange?: function #
Callback continuously called while the user is dragging the slider.
step?: number #
Step value of the slider. The value should be +as an argument to the callback handler.
onValueChange?: PropTypes.func #
Callback continuously called while the user is dragging the slider.
step?: PropTypes.number #
Step value of the slider. The value should be between 0 and (maximumValue - minimumValue). Default value is 0.
style?: ViewPropTypes.style #
Used to style and layout the Slider. See StyleSheet.js and
-ViewStylePropTypes.js for more info.
testID?: string #
Used to locate this view in UI automation tests.
value?: number #
Initial value of the slider. The value should be between minimumValue
+ViewStylePropTypes.js for more info.
testID?: PropTypes.string #
Used to locate this view in UI automation tests.
value?: PropTypes.number #
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.
iosmaximumTrackImage?: Image.propTypes.source #
Assigns a maximum track image. Only static images are supported. The
diff --git a/releases/next/docs/switch.html b/releases/next/docs/switch.html
index 61eccb06357..aeb2311bc9f 100644
--- a/releases/next/docs/switch.html
+++ b/releases/next/docs/switch.html
@@ -2,8 +2,8 @@
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 #
disabled?: bool #
If true the user won't be able to toggle the switch. -Default value is false.
onValueChange?: function #
Invoked with the new value when the value changes.
testID?: string #
Used to locate this view in end-to-end tests.
tintColor?: color #
Border color on iOS and background color on Android when the switch is turned off.
value?: bool #
The value of the switch. If true the switch will be turned on. +@keyword toggle
Props #
disabled?: PropTypes.bool #
If true the user won't be able to toggle the switch. +Default value is false.
onValueChange?: PropTypes.func #
Invoked with the new value when the value changes.
testID?: PropTypes.string #
Used to locate this view in end-to-end tests.
tintColor?: color #
Border color on iOS and background color on Android when the switch is turned off.
value?: PropTypes.bool #
The value of the switch. If true the switch will be turned on. Default value is false.
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
TabBarIOS.Item #
Props #
badge?: string, number #
Little red bubble that sits at the top right of the icon.
icon?: Image.propTypes.source #
A custom icon for the tab. It is ignored when a system icon is defined.
onPress?: function #
Callback when this tab is being selected, you should change the state of your -component to set selected={true}.
renderAsOriginal?: bool #
If set to true it renders the image as original, -it defaults to being displayed as a template
selected?: bool #
It specifies whether the children are visible or not. If you see a +
TabBarIOS.Item #
Props #
badge?: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, +]) #
Little red bubble that sits at the top right of the icon.
icon?: Image.propTypes.source #
A custom icon for the tab. It is ignored when a system icon is defined.
onPress?: PropTypes.func #
Callback when this tab is being selected, you should change the state of your +component to set selected={true}.
renderAsOriginal?: PropTypes.bool #
If set to true it renders the image as original, +it defaults to being displayed as a template
selected?: PropTypes.bool #
It specifies whether the children are visible or not. If you see a blank content, you probably forgot to add a selected one.
selectedIcon?: Image.propTypes.source #
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.
style?: ViewPropTypes.style #
React style object.
systemIcon?: enum('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated') #
Items comes with a few predefined system icons. Note that if you are +icon is defined. If left empty, the icon will be tinted in blue.
style?: ViewPropTypes.style #
React style object.
systemIcon?: PropTypes.oneOf([ + 'bookmarks', + 'contacts', + 'downloads', + 'favorites', + 'featured', + 'history', + 'more', + 'most-recent', + 'most-viewed', + 'recents', + 'search', + 'top-rated', +]) #
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.
title?: string #
Text that appears under the icon. It is ignored when a system icon -is defined.
iosisTVSelectable?: bool #
(Apple TV only)* When set to true, this view will be focusable +system ones.
title?: PropTypes.string #
Text that appears under the icon. It is ignored when a system icon +is defined.
iosisTVSelectable?: PropTypes.bool #
(Apple TV only)* When set to true, this view will be focusable and navigable using the Apple TV remote.
You can edit the content above on GitHub and send us a pull request!
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.
TouchableWithoutFeedback supports only one child. -If you wish to have several child components, wrap them in a View.
Props #
accessibilityComponentType?: AccessibilityComponentTypes #
accessibilityTraits?: AccessibilityTraits, [AccessibilityTraits] #
accessible?: bool #
delayLongPress?: number #
Delay in ms, from onPressIn, before onLongPress is called.
delayPressIn?: number #
Delay in ms, from the start of the touch, before onPressIn is called.
delayPressOut?: number #
Delay in ms, from the release of the touch, before onPressOut is called.
disabled?: bool #
If true, disable all interactions for this component.
hitSlop?: {top: number, left: number, bottom: number, right: number} #
This defines how far your touch can start away from the button. This is +If you wish to have several child components, wrap them in a View.
Props #
accessibilityComponentType?: PropTypes.oneOf( + AccessibilityComponentTypes +) #
accessibilityTraits?: PropTypes.oneOfType([ + PropTypes.oneOf(AccessibilityTraits), + PropTypes.arrayOf(PropTypes.oneOf(AccessibilityTraits)), +]) #
accessible?: PropTypes.bool #
delayLongPress?: PropTypes.number #
Delay in ms, from onPressIn, before onLongPress is called.
delayPressIn?: PropTypes.number #
Delay in ms, from the start of the touch, before onPressIn is called.
delayPressOut?: PropTypes.number #
Delay in ms, from the release of the touch, before onPressOut is called.
disabled?: PropTypes.bool #
If true, disable all interactions for this component.
hitSlop?: {top: number, left: number, bottom: number, right: number} #
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.
onLayout?: function #
Invoked on mount and layout changes with
{nativeEvent: {layout: {x, y, width, height}}}
onLongPress?: function #
onPress?: function #
Called when the touch is released, but not if cancelled (e.g. by a scroll -that steals the responder lock).
onPressIn?: function #
onPressOut?: function #
pressRetentionOffset?: {top: number, left: number, bottom: number, right: number} #
When the scroll view is disabled, this defines how far your touch may +views.
onLayout?: PropTypes.func #
Invoked on mount and layout changes with
{nativeEvent: {layout: {x, y, width, height}}}
onLongPress?: PropTypes.func #
onPress?: PropTypes.func #
Called when the touch is released, but not if cancelled (e.g. by a scroll +that steals the responder lock).
onPressIn?: PropTypes.func #
onPressOut?: PropTypes.func #
pressRetentionOffset?: {top: number, left: number, bottom: number, right: number} #
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
diff --git a/releases/next/docs/virtualizedlist.html b/releases/next/docs/virtualizedlist.html
index 4adc9f48de9..c53c5a38eb8 100644
--- a/releases/next/docs/virtualizedlist.html
+++ b/releases/next/docs/virtualizedlist.html
@@ -13,10 +13,7 @@ changes. This includes the data prop and parent component state.
key prop on each item and uses that for the React key.
-Alternatively, you can provide a custom keyExtractor prop.NOTE: removeClippedSubviews might not be necessary and may cause bugs. If you see issues with
-content not rendering, e.g when using LayoutAnimation, try setting
-removeClippedSubviews={false}, and we may change the default in the future after more
-experimentation in production apps.
Props #
data?: any #
The default accessor functions assume this is an Array<{key: string}> but you can override
+Alternatively, you can provide a custom keyExtractor prop.
Props #
data?: any #
The default accessor functions assume this is an Array<{key: string}> but you can override getItem, getItemCount, and keyExtractor to handle any type of index-based data.
debug?: ?boolean #
debug will turn on extra logging and visual overlays to aid with debugging both usage and
implementation, but with a significant perf hit.
disableVirtualization: boolean #
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
@@ -32,9 +29,15 @@ sure to also set the refreshing prop correctly.
Called when the viewability of rows changes, as defined by the
-viewabilityConfig prop.
refreshing?: ?boolean #
Set this true while waiting for new data from a refresh.
removeClippedSubviews?: boolean #
A native optimization that removes clipped subviews (those outside the parent) from the view -hierarchy to offload work from the native rendering system. They are still kept around so no -memory is saved and state is preserved.
renderItem: (info: {item: Item, index: number}) => ?React.Element<any> #
renderScrollComponent: (props: Object) => React.Element<any> #
Render a custom scroll component, e.g. with a differently styled RefreshControl.
scrollEventThrottle?: #
updateCellsBatchingPeriod: number #
Amount of time between low-pri item render batches, e.g. for rendering items quite a ways off
+viewabilityConfig prop.
refreshing?: ?boolean #
Set this true while waiting for new data from a refresh.
removeClippedSubviews?: boolean #
Note: may have bugs (missing content) in some circumstances - use at your own risk.
This may improve scroll performance for large lists.
renderItem: (info: { + item: Item, + index: number, + separators: { + highlight: () => void, + unhighlight: () => void, + updateProps: (select: 'leading' | 'trailing', newProps: Object) => void, + }, +}) => ?React.Element<any> #
renderScrollComponent: (props: Object) => React.Element<any> #
Render a custom scroll component, e.g. with a differently styled RefreshControl.
scrollEventThrottle?: #
updateCellsBatchingPeriod: number #
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.
viewabilityConfig?: ViewabilityConfig #
windowSize: number #
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
diff --git a/releases/next/docs/webview.html b/releases/next/docs/webview.html
index 5792c093ba6..b78b530d1d5 100644
--- a/releases/next/docs/webview.html
+++ b/releases/next/docs/webview.html
@@ -11,33 +11,78 @@ class MyWeb extends );
}
}
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 #
automaticallyAdjustContentInsets?: bool #
Controls whether to adjust the content inset for web views that are +history and configure various properties for the web content.
Props #
automaticallyAdjustContentInsets?: PropTypes.bool #
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.
contentInset?: {top: number, left: number, bottom: number, right: number} #
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}.
html?: string #
DeprecatedUse the source prop instead.
injectJavaScript?: function #
Function that accepts a string that will be passed to the WebView and -executed immediately as JavaScript.
injectedJavaScript?: string #
Set this to provide JavaScript that will be injected into the web page -when the view loads.
mediaPlaybackRequiresUserAction?: bool #
Boolean that determines whether HTML5 audio and video requires the user
-to tap them before they start playing. The default value is true.
onError?: function #
Function that is invoked when the WebView load fails.
onLoad?: function #
Function that is invoked when the WebView has finished loading.
onLoadEnd?: function #
Function that is invoked when the WebView load succeeds or fails.
onLoadStart?: function #
Function that is invoked when the WebView starts loading.
onMessage?: function #
A function that is invoked when the webview calls window.postMessage.
+the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}.
html?: string #
DeprecatedUse the source prop instead.
injectJavaScript?: PropTypes.func #
Function that accepts a string that will be passed to the WebView and +executed immediately as JavaScript.
injectedJavaScript?: PropTypes.string #
Set this to provide JavaScript that will be injected into the web page +when the view loads.
mediaPlaybackRequiresUserAction?: PropTypes.bool #
Boolean that determines whether HTML5 audio and video requires the user
+to tap them before they start playing. The default value is true.
onError?: PropTypes.func #
Function that is invoked when the WebView load fails.
onLoad?: PropTypes.func #
Function that is invoked when the WebView has finished loading.
onLoadEnd?: PropTypes.func #
Function that is invoked when the WebView load succeeds or fails.
onLoadStart?: PropTypes.func #
Function that is invoked when the WebView starts loading.
onMessage?: PropTypes.func #
A function that is invoked when the webview calls window.postMessage.
Setting this property will inject a postMessage global into your
webview, but will still call pre-existing values of postMessage.
window.postMessage accepts one argument, data, which will be
available on the event object, event.nativeEvent.data. data
-must be a string.
onNavigationStateChange?: function #
Function that is invoked when the WebView loading starts or ends.
renderError?: function #
Function that returns a view to show if there's an error.
renderLoading?: function #
Function that returns a loading indicator.
scalesPageToFit?: bool #
Boolean that controls whether the web content is scaled to fit +must be a string.
onNavigationStateChange?: PropTypes.func #
Function that is invoked when the WebView loading starts or ends.
renderError?: PropTypes.func #
Function that returns a view to show if there's an error.
renderLoading?: PropTypes.func #
Function that returns a loading indicator.
scalesPageToFit?: PropTypes.bool #
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.
source?: {uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string}, number #
Loads static html or a uri (with optional headers) in the WebView.
startInLoadingState?: bool #
Boolean value that forces the WebView to show the loading view
-on the first load.
style?: ViewPropTypes.style #
The style to apply to the WebView.
url?: string #
DeprecatedUse the source prop instead.
androiddomStorageEnabled?: bool #
Boolean value to control whether DOM Storage is enabled. Used only in -Android.
androidjavaScriptEnabled?: bool #
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.
androidmixedContentMode?: enum('never', 'always', 'compatibility') #
Specifies the mixed content mode. i.e WebView will allow a secure origin to load content from any other origin.
Possible values for mixedContentMode are:
'never'(default) - WebView will not allow a secure origin to load content from an insecure origin.'always'- WebView will allow a secure origin to load content from any other origin, even if that origin is insecure.'compatibility'- WebView will attempt to be compatible with the approach of a modern web browser with regard to mixed content.
androiduserAgent?: string #
Sets the user-agent for the WebView.
iosallowsInlineMediaPlayback?: bool #
Boolean that determines whether HTML5 videos play inline or use the
+is true.
source?: PropTypes.oneOfType([ + PropTypes.shape({ + /* + * The URI to load in the `WebView`. Can be a local or remote file. + */ + uri: PropTypes.string, + /* + * The HTTP Method to use. Defaults to GET if not specified. + * NOTE: On Android, only GET and POST are supported. + */ + method: PropTypes.string, + /* + * Additional HTTP headers to send with the request. + * NOTE: On Android, this can only be used with GET requests. + */ + headers: PropTypes.object, + /* + * The HTTP body to send with the request. This must be a valid + * UTF-8 string, and will be sent exactly as specified, with no + * additional encoding (e.g. URL-escaping or base64) applied. + * NOTE: On Android, this can only be used with POST requests. + */ + body: PropTypes.string, + }), + PropTypes.shape({ + /* + * A static HTML page to display in the WebView. + */ + html: PropTypes.string, + /* + * The base URL to be used for any relative links in the HTML. + */ + baseUrl: PropTypes.string, + }), + /* + * Used internally by packager. + */ + PropTypes.number, +]) #
Loads static html or a uri (with optional headers) in the WebView.
startInLoadingState?: PropTypes.bool #
Boolean value that forces the WebView to show the loading view
+on the first load.
style?: ViewPropTypes.style #
The style to apply to the WebView.
url?: string #
DeprecatedUse the source prop instead.
androiddomStorageEnabled?: PropTypes.bool #
Boolean value to control whether DOM Storage is enabled. Used only in +Android.
androidjavaScriptEnabled?: PropTypes.bool #
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.
androidmixedContentMode?: PropTypes.oneOf([ + 'never', + 'always', + 'compatibility' +]) #
Specifies the mixed content mode. i.e WebView will allow a secure origin to load content from any other origin.
Possible values for mixedContentMode are:
'never'(default) - WebView will not allow a secure origin to load content from an insecure origin.'always'- WebView will allow a secure origin to load content from any other origin, even if that origin is insecure.'compatibility'- WebView will attempt to be compatible with the approach of a modern web browser with regard to mixed content.
androiduserAgent?: PropTypes.string #
Sets the user-agent for the WebView.
iosallowsInlineMediaPlayback?: PropTypes.bool #
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.
iosbounces?: bool #
Boolean value that determines whether the web view bounces
-when it reaches the edge of the content. The default value is true.
iosdataDetectorTypes?: enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), [enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all')] #
Determines the types of data converted to clickable URLs in the web view’s content.
+document must also include the webkit-playsinline attribute.
iosbounces?: PropTypes.bool #
Boolean value that determines whether the web view bounces
+when it reaches the edge of the content. The default value is true.
iosdataDetectorTypes?: PropTypes.oneOfType([ + PropTypes.oneOf(DataDetectorTypes), + PropTypes.arrayOf(PropTypes.oneOf(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'
iosdecelerationRate?: ScrollView.propTypes.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)
iosonShouldStartLoadWithRequest?: function #
Function that allows custom handling of any web view requests. Return
+UIScrollViewDecelerationRateFast respectively:
- normal: 0.998
- fast: 0.99 (the default for iOS web view)
iosonShouldStartLoadWithRequest?: PropTypes.func #
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.
iosscrollEnabled?: bool #
Boolean value that determines whether scrolling is enabled in the +to stop loading.
iosscrollEnabled?: PropTypes.bool #
Boolean value that determines whether scrolling is enabled in the
WebView. The default value is true.
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |