name: Primitives type: folder children: - name: Core type: folder showChildren: true children: - name: View depPackage: react-native isSubImport: true icon: fas fa-square label_en: View description_en: "The most fundamental component for building a UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls. " - name: Text depPackage: react-native isSubImport: true icon: fas fa-font label_en: Text description_en: A component for displaying text. It supports nesting, styling, and touch handling. - name: TouchableHighlight depPackage: react-native isSubImport: true icon: far fa-circle label_en: TouchableHighlight description_en: >- A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view. The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts if not used correctly, for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color. TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View. - name: TouchableNativeFeedback depPackage: react-native isSubImport: true icon: far fa-circle label_en: TouchableNativeFeedback description_en: >- A wrapper for making views respond properly to touches (Android only). On Android this component uses native state drawable to display touch feedback. At the moment it only supports having a single View instance as a child node, as it's implemented by replacing that View with another instance of RCTView node with some additional properties set. Background drawable of native feedback touchable can be customized with `background` property. - name: TouchableOpacity depPackage: react-native isSubImport: true icon: far fa-circle label_en: TouchableOpacity description_en: >- A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it. Opacity is controlled by wrapping the children in an Animated.View, which is added to the view hierarchy. Be aware that this can affect layout. - name: TouchableWithoutFeedback depPackage: react-native isSubImport: true icon: far fa-circle label_en: TouchableWithoutFeedback description_en: >- Do not use unless you have a very good reason. All 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. Importantly, `TouchableWithoutFeedback` works by cloning its child and applying responder props to it. It is therefore required that any intermediary components pass through those props to the underlying React Native component. - name: SafeAreaView depPackage: react-native isSubImport: true icon: icon-SafeAreaView label_en: SafeAreaView description_en: >- The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later. SafeAreaView renders nested content and automatically applies padding to reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect the physical limitation of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone X). - name: StatusBar depPackage: react-native isSubImport: true icon: fas fa-signal label_en: StatusBar description_en: >- Component to control the app status bar. - name: Image depPackage: react-native isSubImport: true icon: fas fa-image label_en: Image description_en: A component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. - name: ImageBackground depPackage: react-native isSubImport: true icon: fas fa-image label_en: ImageBackground description_en: >- A common feature request from developers familiar with the web is `background-image`. To handle this use case, you can use the `` component, which has the same props as ``, and add whatever children to it you would like to layer on top of it. You might not want to use `` in some cases, since the implementation is basic. Refer to ``'s [source code](https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js) for more insight, and create your own custom component when needed. Note that you must specify some width and height style attributes. - name: ActivityIndicator depPackage: react-native isSubImport: true icon: fas fa-spinner label_en: ActivityIndicator description_en: Displays a circular loading indicator. - name: Button depPackage: react-native isSubImport: true icon: far fa-circle label_en: Button description_en: A basic button component that should render nicely on any platform. Supports a minimal level of customization. - name: FlatList depPackage: react-native isSubImport: true icon: fas fa-list label_en: FlatList description_en: > A performant interface for rendering basic, flat lists, supporting the most handy features: - Fully cross-platform. - Optional horizontal mode. - Configurable viewability callbacks. - Header support. - Footer support. - Separator support. - Pull to Refresh. - Scroll loading. - ScrollToIndex support. - Multiple column support. If you need section support, use **SectionList**. - name: CheckBox depPackage: react-native isSubImport: true icon: fas fa-check label_en: CheckBox description_en: >- This is a controlled component that requires an `onValueChange` callback that updates the value prop in order for the component to reflect user actions. If the `value` prop is not updated, the component will continue to render the supplied `value` prop instead of the expected result of any user actions. - name: InputAccessoryView depPackage: react-native isSubImport: true icon: fas fa-keyboard label_en: InputAccessoryView description_en: >- A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a `TextInput` has focus. This component can be used to create custom toolbars. To use this component wrap your custom toolbar with the InputAccessoryView component, and set a `nativeID`. Then, pass that `nativeID` as the `inputAccessoryViewID` of whatever `TextInput` you desire. - name: KeyboardAvoidingView depPackage: react-native isSubImport: true icon: fas fa-keyboard label_en: KeyboardAvoidingView description_en: > It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its height, position, or bottom padding based on the position of the keyboard. - name: Modal depPackage: react-native isSubImport: true icon: fas fa-window-maximize label_en: Modal description_en: The Modal component is a basic way to present content above an enclosing view. - name: Picker depPackage: react-native isSubImport: true icon: fas fa-mouse-pointer label_en: Picker description_en: "Renders the native picker component on Android and iOS. " - name: ScrollView depPackage: react-native isSubImport: true icon: fas fa-arrows-alt-v label_en: ScrollView description_en: >- Component that wraps platform ScrollView while providing integration with touch locking "responder" system. Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer `{flex: 1}` down the view stack can lead to errors here, which the element inspector makes quick to debug. - name: Switch depPackage: react-native isSubImport: true icon: fas fa-toggle-on label_en: Switch description_en: null - name: TextInput depPackage: react-native isSubImport: true icon: icon-text-input label_en: TextInput description_en: A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.