React NativeActivityIndicatorIOS
Edit on GitHubProps #
animating bool #
Whether to show the indicator (true, the default) or hide it (false).
color string #
The foreground color of the spinner (default is gray).
hidesWhenStopped bool #
Whether the indicator should hide when not animating (true by default).
onLayout function #
Invoked on mount and layout changes with
{nativeEvent: { layout: {x, y, width, height}}}.
size enum('small', 'large') #
Size of the indicator. Small has a height of 20, large has a height of 36.
Edit on GitHubExamples #
ActivityIndicatorIOS
Edit on GitHubProps #
animating bool #
Whether to show the indicator (true, the default) or hide it (false).
color string #
The foreground color of the spinner (default is gray).
hidesWhenStopped bool #
Whether the indicator should hide when not animating (true by default).
size enum('small', 'large') #
Size of the indicator. Small has a height of 20, large has a height of 36.
onLayout function #
Invoked on mount and layout changes with
{nativeEvent: { layout: {x, y, width, height}}}.
Edit on GitHubExamples #
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.Edit on GitHubProps #
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.
Edit on GitHubProps #
date Date #
The currently selected date.
onDateChange function #
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.
maximumDate Date #
Maximum date.
Restricts the range of possible date/time values.
minimumDate Date #
Minimum date.
Restricts the range of possible date/time values.
mode enum('date', 'time', 'datetime') #
The date picker mode.
minuteInterval enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30) #
The interval at which minutes can be selected.
timeZoneOffsetInMinutes 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.
Edit on GitHubExamples #
Flexbox
Edit on GitHubProps #
alignItems enum('flex-start', 'flex-end', 'center', 'stretch') #
alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') #
borderBottomWidth number #
borderLeftWidth number #
borderRightWidth number #
borderTopWidth number #
borderWidth number #
bottom number #
flex number #
flexDirection enum('row', 'column') #
flexWrap enum('wrap', 'nowrap') #
height number #
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') #
left number #
margin number #
marginBottom number #
marginHorizontal number #
marginLeft number #
marginRight number #
marginTop number #
marginVertical number #
padding number #
paddingBottom number #
paddingHorizontal number #
paddingLeft number #
paddingRight number #
paddingTop number #
paddingVertical number #
position enum('absolute', 'relative') #
right number #
top number #
width number #
Flexbox
Edit on GitHubProps #
paddingTop number #
width number #
top number #
left number #
right number #
bottom number #
margin number #
marginVertical number #
marginHorizontal number #
marginTop number #
marginBottom number #
marginLeft number #
marginRight number #
padding number #
paddingVertical number #
paddingHorizontal number #
height number #
paddingBottom number #
paddingLeft number #
paddingRight number #
borderWidth number #
borderTopWidth number #
borderRightWidth number #
borderBottomWidth number #
borderLeftWidth number #
position enum('absolute', 'relative') #
flexDirection enum('row', 'column') #
flexWrap enum('wrap', 'nowrap') #
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') #
alignItems enum('flex-start', 'flex-end', 'center', 'stretch') #
alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') #
flex number #
MapView
Edit on GitHubProps #
annotations [{latitude: number, longitude: number, animateDrop: bool, title: string, subtitle: string, hasLeftCallout: bool, hasRightCallout: bool, onLeftCalloutPress: function, onRightCalloutPress: function, id: string}] #
Map annotations with title/subtitle.
legalLabelInsets {top: number, left: number, bottom: number, right: number} #
Insets for the map's legal label, originally at bottom left of the map.
-See EdgeInsetsPropType.js for more information.
mapType enum('standard', 'satellite', 'hybrid') #
The map type to be displayed.
- standard: standard road map (default)
- satellite: satellite view
- hybrid: satellite view with roads and points of interest overlayed
maxDelta number #
Maximum size of area that can be displayed.
minDelta number #
Minimum size of area that can be displayed.
onAnnotationPress function #
Callback that is called once, when the user is clicked on a annotation.
onRegionChange function #
Callback that is called continuously when the user is dragging the map.
onRegionChangeComplete function #
Callback that is called once, when the user is done moving the map.
pitchEnabled bool #
When this property is set to true and a valid camera is associated
-with the map, the camera’s pitch angle is used to tilt the plane
-of the map. When this property is set to false, the camera’s pitch
-angle is ignored and the map is always displayed as if the user
-is looking straight down onto it.
region {latitude: number, longitude: number, latitudeDelta: number, longitudeDelta: number} #
The region to be displayed by the map.
The region is defined by the center coordinates and the span of -coordinates to display.
rotateEnabled bool #
When this property is set to true and a valid camera is associated with
+
MapView
Edit on GitHubProps #
region {latitude: number, longitude: number, latitudeDelta: number, longitudeDelta: number} #
The region to be displayed by the map.
The region is defined by the center coordinates and the span of +coordinates to display.
style View#style #
Used to style and layout the MapView. See StyleSheet.js and
+ViewStylePropTypes.js for more info.
zoomEnabled bool #
If false the user won't be able to pinch/zoom the map.
+Default value is true.
rotateEnabled bool #
When this property is set to true and a valid camera is associated with
the map, the camera’s heading angle is used to rotate the plane of the
map around its center point. When this property is set to false, the
camera’s heading angle is ignored and the map is always oriented so
-that true north is situated at the top of the map view
scrollEnabled bool #
If false the user won't be able to change the map region being displayed.
-Default value is true.
showsUserLocation bool #
If true the app will ask for the user's location and focus on it.
+that true north is situated at the top of the map view
pitchEnabled bool #
When this property is set to true and a valid camera is associated
+with the map, the camera’s pitch angle is used to tilt the plane
+of the map. When this property is set to false, the camera’s pitch
+angle is ignored and the map is always displayed as if the user
+is looking straight down onto it.
scrollEnabled bool #
If false the user won't be able to change the map region being displayed.
+Default value is true.
mapType enum('standard', 'satellite', 'hybrid') #
The map type to be displayed.
- standard: standard road map (default)
- satellite: satellite view
- hybrid: satellite view with roads and points of interest overlayed
showsUserLocation bool #
If true the app will ask for the user's location and focus on it.
Default value is false.
NOTE: You need to add NSLocationWhenInUseUsageDescription key in Info.plist to enable geolocation, otherwise it is going -to fail silently!
style View#style #
Used to style and layout the MapView. See StyleSheet.js and
-ViewStylePropTypes.js for more info.
zoomEnabled bool #
If false the user won't be able to pinch/zoom the map.
-Default value is true.
Edit on GitHubExamples #
annotations [{latitude: number, longitude: number, animateDrop: bool, title: string, subtitle: string, hasLeftCallout: bool, hasRightCallout: bool, onLeftCalloutPress: function, onRightCalloutPress: function, id: string}] #
Map annotations with title/subtitle.
maxDelta number #
Maximum size of area that can be displayed.
minDelta number #
Minimum size of area that can be displayed.
legalLabelInsets {top: number, left: number, bottom: number, right: number} #
Insets for the map's legal label, originally at bottom left of the map.
+See EdgeInsetsPropType.js for more information.
onRegionChange function #
Callback that is called continuously when the user is dragging the map.
onRegionChangeComplete function #
Callback that is called once, when the user is done moving the map.
onAnnotationPress function #
Callback that is called once, when the user is clicked on a annotation.
Edit on GitHubExamples #
getCurrentRoutes()- return route. All scenes after it will be unmountedpopToTop()- Pop to the first scene in the stack, unmounting every other scene
Edit on GitHubProps #
configureScene function #
Optional function that allows configuration about scene animations and gestures. Will be invoked with the route and should return a scene -configuration object
initialRoute object #
Specify a route to start on. A route is an object that the navigator +configuration object
renderScene function #
Required function which renders the scene for a given route. Will be +invoked with the route and the navigator object
initialRoute object #
Specify a route to start on. A route is an object that the navigator
will use to identify each scene to render. initialRoute must be
a route in the initialRouteStack if both props are provided. The
initialRoute will default to the last item in the initialRouteStack.
initialRouteStack [object] #
Provide a set of routes to initially mount. Required if no initialRoute
is provided. Otherwise, it will default to an array containing only the
-initialRoute
navigationBar node #
Optionally provide a navigation bar that persists across scene -transitions
navigator object #
Optionally provide the navigator object from a parent Navigator
onDidFocus function #
@deprecated
+initialRoute
onWillFocus function #
@deprecated
+Use navigationContext.addListener('willfocus', callback) instead.
Will emit the target route upon mounting and before each nav transition
onDidFocus function #
@deprecated
Use navigationContext.addListener('didfocus', callback) instead.
Will be called with the new route of each scene after the transition is -complete or after the initial mounting
onWillFocus function #
@deprecated
-Use navigationContext.addListener('willfocus', callback) instead.
Will emit the target route upon mounting and before each nav transition
renderScene function #
Required function which renders the scene for a given route. Will be -invoked with the route and the navigator object
sceneStyle View#style #
Styles to apply to the container of each scene
SegmentedControlIOS
Use SegmentedControlIOS to render a UISegmentedControl iOS.
Edit on GitHubProps #
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.
Edit on GitHubExamples #
SegmentedControlIOS
Use SegmentedControlIOS to render a UISegmentedControl iOS.
Edit on GitHubProps #
values [string] #
The labels for the control's segment buttons, in order.
selectedIndex number #
The index in props.values of the segment to be pre-selected
onValueChange function #
Callback that is called when the user taps a segment; +passes the segment's value as an argument
onChange function #
Callback that is called when the user taps a segment; +passes the event as an argument
enabled bool #
If false the user won't be able to interact with the control. +Default value is true.
tintColor string #
Accent color of the control.
momentary bool #
If true, then selecting a segment won't persist visually.
+The onValueChange callback will still work as expected.
Edit on GitHubExamples #
SliderIOS
Edit on GitHubProps #
maximumTrackTintColor string #
The color used for the track to the right of the button. Overrides the -default blue gradient image.
maximumValue number #
Initial maximum value of the slider. Default value is 1.
minimumTrackTintColor string #
The color used for the track to the left of the button. Overrides the -default blue gradient image.
minimumValue number #
Initial minimum value of the slider. Default value is 0.
onSlidingComplete function #
Callback called when the user finishes changing the value (e.g. when -the slider is released).
onValueChange function #
Callback continuously called while the user is dragging the slider.
style View#style #
Used to style and layout the Slider. See StyleSheet.js and
+
SliderIOS
Edit on GitHubProps #
style View#style #
Used to style and layout the Slider. See StyleSheet.js and
ViewStylePropTypes.js for more info.
value 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, e.g. if you don't update -the value, the component won't be reset to its inital value.
Edit on GitHubExamples #
minimumValue number #
Initial minimum value of the slider. Default value is 0.
maximumValue number #
Initial maximum value of the slider. Default value is 1.
minimumTrackTintColor string #
The color used for the track to the left of the button. Overrides the +default blue gradient image.
maximumTrackTintColor string #
The color used for the track to the right of the button. Overrides the +default blue gradient image.
onValueChange function #
Callback continuously called while the user is dragging the slider.
onSlidingComplete function #
Callback called when the user finishes changing the value (e.g. when +the slider is released).
Edit on GitHubExamples #
onValueChange callback
and update the value prop in order for the component to update, otherwise
the user's change will be reverted immediately to reflect props.value as the
-source of truth.Edit on GitHubProps #
disabled bool #
If true the user won't be able to toggle the switch. -Default value is false.
onTintColor string #
Background color when the switch is turned on.
onValueChange function #
Callback that is called when the user toggles the switch.
thumbTintColor string #
Background color for the switch round button.
tintColor string #
Background color when the switch is turned off.
value bool #
The value of the switch, if true the switch will be turned on. -Default value is false.
Edit on GitHubExamples #
Edit on GitHubProps #
value bool #
The value of the switch, if true the switch will be turned on. +Default value is false.
disabled bool #
If true the user won't be able to toggle the switch. +Default value is false.
onValueChange function #
Callback that is called when the user toggles the switch.
onTintColor string #
Background color when the switch is turned on.
thumbTintColor string #
Background color for the switch round button.
tintColor string #
Background color when the switch is turned off.
Edit on GitHubExamples #
TabBarIOS.Item
Edit on GitHubProps #
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}.
selected 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 View#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 +
TabBarIOS.Item
Edit on GitHubProps #
badge string, number #
Little red bubble that sits at the top right of the icon.
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 using them, the title and selectedIcon will be overriden with the -system ones.
title string #
Text that appears under the icon. It is ignored when a system icon +system ones.
icon Image.propTypes.source #
A custom icon for the tab. It is ignored when a system icon is defined.
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.
onPress function #
Callback when this tab is being selected, you should change the state of your +component to set selected={true}.
selected bool #
It specifies whether the children are visible or not. If you see a +blank content, you probably forgot to add a selected one.
style View#style #
React style object.
title string #
Text that appears under the icon. It is ignored when a system icon is defined.
TabBarIOS
Edit on GitHubProps #
barTintColor string #
Background color of the tab bar
style View#style #
tintColor string #
Color of the currently selected tab icon
translucent bool #
A Boolean value that indicates whether the tab bar is translucent
Edit on GitHubExamples #
TabBarIOS
Edit on GitHubProps #
style View#style #
tintColor string #
Color of the currently selected tab icon
barTintColor string #
Background color of the tab bar
translucent bool #
A Boolean value that indicates whether the tab bar is translucent
Edit on GitHubExamples #
Edit on GitHubProps #
numberOfLines number #
Used to truncate the text with an elipsis after computing the text layout, including line wrapping, such that the total number of lines -does not exceed this number.
onLayout function #
Invoked on mount and layout changes with
{nativeEvent: {layout: {x, y, width, height}}}
onPress function #
This function is called on press.
style style #
color string
fontFamily string
fontSize number
fontStyle enum('normal', 'italic')
fontWeight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
letterSpacing number
lineHeight number
textAlign enum("auto", 'left', 'right', 'center', 'justify')
textDecorationColor string
textDecorationLine enum("none", 'underline', 'line-through', 'underline line-through')
textDecorationStyle enum("solid", 'double', 'dotted', 'dashed')
writingDirection enum("auto", 'ltr', 'rtl')
suppressHighlighting bool #
When true, no visual change is made when text is pressed down. By -default, a gray oval highlights the text on press down. -@platform ios
testID string #
Used to locate this view in end-to-end tests.
Edit on GitHubDescription #
Nested Text #
In iOS, the way to display formatted text is by using NSAttributedString: you give the text that you want to display and annotate ranges with some specific formatting. In practice, this is very tedious. For React Native, we decided to use web paradigm for this where you can nest text to achieve the same effect.
onLayout function #
Invoked on mount and layout changes with
{nativeEvent: {layout: {x, y, width, height}}}
onPress function #
This function is called on press.
style style #
color string
fontFamily string
fontSize number
fontStyle enum('normal', 'italic')
fontWeight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
letterSpacing number
lineHeight number
textAlign enum("auto", 'left', 'right', 'center', 'justify')
textDecorationLine enum("none", 'underline', 'line-through', 'underline line-through')
textDecorationStyle enum("solid", 'double', 'dotted', 'dashed')
textDecorationColor string
writingDirection enum("auto", 'ltr', 'rtl')
testID string #
Used to locate this view in end-to-end tests.
iossuppressHighlighting bool #
When true, no visual change is made when text is pressed down. By +default, a gray oval highlights the text on press down.
Edit on GitHubDescription #
Nested Text #
In iOS, the way to display formatted text is by using NSAttributedString: you give the text that you want to display and annotate ranges with some specific formatting. In practice, this is very tedious. For React Native, we decided to use web paradigm for this where you can nest text to achieve the same effect.
var notMultiline = { onSubmitEditing: true, - };
Edit on GitHubProps #
autoCapitalize enum('none', 'sentences', 'words', 'characters') #
Can tell TextInput to automatically capitalize certain characters.
- characters: all characters,
- words: first letter of each word
- sentences: first letter of each sentence (default)
- none: don't auto capitalize anything
autoCorrect bool #
If false, disables auto-correct. The default value is true.
autoFocus bool #
If true, focuses the input on componentDidMount. -The default value is false.
clearButtonMode enum('never', 'while-editing', 'unless-editing', 'always') #
When the clear button should appear on the right side of the text view -@platform ios
clearTextOnFocus bool #
If true, clears the text field automatically when editing begins -@platform ios
defaultValue string #
Provides an initial value that will change when the user starts typing. -Useful for simple use-cases where you don't want to deal with listening -to events and updating the value prop to keep the controlled state in sync.
editable bool #
If false, text is not editable. The default value is true. -@platform ios
enablesReturnKeyAutomatically bool #
If true, the keyboard disables the return key when there is no text and -automatically enables it when there is text. The default value is false. -@platform ios
keyboardType enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') #
Determines which keyboard to open, e.g.numeric.
The following values work across platforms: + };
Edit on GitHubProps #
onEndEditing function #
Callback that is called when text input ends.
autoCapitalize enum('none', 'sentences', 'words', 'characters') #
Can tell TextInput to automatically capitalize certain characters.
- characters: all characters,
- words: first letter of each word
- sentences: first letter of each sentence (default)
- none: don't auto capitalize anything
autoFocus bool #
If true, focuses the input on componentDidMount. +The default value is false.
textAlign enum('start', 'center', 'end') #
Set the position of the cursor from where editing will begin. +@platorm android
testID string #
Used to locate this view in end-to-end tests
style Text#style #
Styles
keyboardType enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') #
Determines which keyboard to open, e.g.numeric.
The following values work across platforms: - default - numeric -- email-address
maxLength number #
Limits the maximum number of characters that can be entered. Use this -instead of implementing the logic in JS to avoid flicker. -@platform ios
multiline bool #
If true, the text input can be multiple lines. -The default value is false.
onBlur function #
Callback that is called when the text input is blurred
onChange function #
Callback that is called when the text input's text changes.
onChangeText function #
Callback that is called when the text input's text changes. -Changed text is passed as an argument to the callback handler.
onEndEditing function #
Callback that is called when text input ends.
onFocus function #
Callback that is called when the text input is focused
onLayout function #
Invoked on mount and layout changes with {x, y, width, height}.
onSubmitEditing function #
Callback that is called when the text input's submit button is pressed.
placeholder string #
The string that will be rendered before text input has been entered
placeholderTextColor string #
The text color of the placeholder string
returnKeyType enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') #
Determines how the return key should look. -@platform ios
secureTextEntry bool #
If true, the text input obscures the text entered so that sensitive text -like passwords stay secure. The default value is false.
selectTextOnFocus bool #
If true, all text will automatically be selected on focus -@platform ios
selectionState DocumentSelectionState #
See DocumentSelectionState.js, some state that is responsible for -maintaining selection information for a document -@platform ios
style Text#style #
Styles
testID string #
Used to locate this view in end-to-end tests
textAlign enum('start', 'center', 'end') #
Set the position of the cursor from where editing will begin. -@platorm android
textAlignVertical enum('top', 'center', 'bottom') #
Aligns text vertically within the TextInput. -@platform android
underlineColorAndroid string #
The color of the textInput underline. -@platform android
value string #
The value to show for the text input. TextInput is a controlled +- email-address
defaultValue string #
Provides an initial value that will change when the user starts typing. +Useful for simple use-cases where you don't want to deal with listening +to events and updating the value prop to keep the controlled state in sync.
value string #
The value to show for the text input. TextInput is a controlled
component, which means the native value will be forced to match this
value prop if provided. For most uses this works great, but in some
cases this may cause flickering - one common cause is preventing edits
by keeping value the same. In addition to simply setting the same value,
either set editable={false}, or set/update maxLength to prevent
-unwanted edits without flicker.
Edit on GitHubExamples #
secureTextEntry bool #
If true, the text input obscures the text entered so that sensitive text +like passwords stay secure. The default value is false.
multiline bool #
If true, the text input can be multiple lines. +The default value is false.
onBlur function #
Callback that is called when the text input is blurred
onFocus function #
Callback that is called when the text input is focused
onChange function #
Callback that is called when the text input's text changes.
onChangeText function #
Callback that is called when the text input's text changes. +Changed text is passed as an argument to the callback handler.
autoCorrect bool #
If false, disables auto-correct. The default value is true.
onSubmitEditing function #
Callback that is called when the text input's submit button is pressed.
onLayout function #
Invoked on mount and layout changes with {x, y, width, height}.
placeholder string #
The string that will be rendered before text input has been entered
placeholderTextColor string #
The text color of the placeholder string
iosenablesReturnKeyAutomatically bool #
If true, the keyboard disables the return key when there is no text and +automatically enables it when there is text. The default value is false.
iosselectionState DocumentSelectionState #
See DocumentSelectionState.js, some state that is responsible for +maintaining selection information for a document
iosmaxLength number #
Limits the maximum number of characters that can be entered. Use this +instead of implementing the logic in JS to avoid flicker.
iosreturnKeyType enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') #
Determines how the return key should look.
iosclearButtonMode enum('never', 'while-editing', 'unless-editing', 'always') #
When the clear button should appear on the right side of the text view
iosclearTextOnFocus bool #
If true, clears the text field automatically when editing begins
iosselectTextOnFocus bool #
If true, all text will automatically be selected on focus
ioseditable bool #
If false, text is not editable. The default value is true.
androidtextAlignVertical enum('top', 'center', 'bottom') #
Aligns text vertically within the TextInput.
androidunderlineColorAndroid string #
The color of the textInput underline.
Edit on GitHubExamples #
Edit on GitHubProps #
activeOpacity number #
Determines what the opacity of the wrapped view should be when touch is -active.
onHideUnderlay function #
Called immediately after the underlay is hidden
onShowUnderlay function #
Called immediately after the underlay is shown
style View#style #
underlayColor string #
The color of the underlay that will show through when the touch is -active.
TouchableWithoutFeedback
Do not use unless you have a very good reason. All the elements that respond to press should have a visual feedback when touched. This is one of the primary reason a "web" app doesn't feel "native".
Edit on GitHubProps #
accessible bool #
Called when the touch is released, but not if cancelled (e.g. by a scroll -that steals the responder lock).
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.
onLongPress function #
onPress function #
onPressIn function #
onPressOut function #
WebView
Edit on GitHubProps #
automaticallyAdjustContentInsets bool #
bounces bool #
contentInset {top: number, left: number, bottom: number, right: number} #
html string #
injectedJavaScript string #
Sets the JS to be injected when the webpage loads.
javaScriptEnabledAndroid bool #
Used for android only, JS is enabled by default for WebView on iOS
onNavigationStateChange function #
renderError function #
renderLoading function #
scalesPageToFit bool #
Used for iOS only, sets whether the webpage scales to fit the view and the -user can change the scale
scrollEnabled bool #
startInLoadingState bool #
style View#style #
url string #
Edit on GitHubExamples #
WebView
Edit on GitHubProps #
contentInset {top: number, left: number, bottom: number, right: number} #
url string #
renderError function #
renderLoading function #
bounces bool #
scrollEnabled bool #
automaticallyAdjustContentInsets bool #
html string #
onNavigationStateChange function #
startInLoadingState bool #
style View#style #
javaScriptEnabledAndroid bool #
Used for android only, JS is enabled by default for WebView on iOS
injectedJavaScript string #
Sets the JS to be injected when the webpage loads.
scalesPageToFit bool #
Used for iOS only, sets whether the webpage scales to fit the view and the +user can change the scale