All 24 React Native Components Explained

React Native comes with 24 built-in components for creating user interfaces. I'll give you an overview from the point of view of a developer that's been using these components in production for a few years. For a more detailed breakdown of each component check out the React Native documentation.

If you prefer to learn by video tap the image to watch on YouTube.

1. View

• The foundational component for building all your user interfaces, similar to the 'div' on web.
• Maps directly to the native view on each platform.
• Easily to style directly, but also a good idea to build reusable components based on the View for consistency in styling.

2. Text

• All text must be placed in a Text component. You can't place text inside a View component like you can place text inside a 'div' on web.
• Like the View component it's easy to style directly, but a good idea to build reusable components for consistency in styling.

3. TextInput

• Used to gather input from users.
• Lots of properties like auto-correction, placeholder text, etc.
• The TextInput values is always a string so if you need the user to input numbers you'll have to do conversions from String to Number.

4. ScrollView

• On the web, scrolling is automatically applied if the content is longer than the screen, not so on mobile. If you don't use a ScrollView component any view that extend off screen will be unaccessible. I can almost guarantee that if you are coming from the web that you will send out a release to production with a view that can't be accessed. We all do it.
• ScrollView is very customizable but renders all items at once. If you have a large list of similar items then use FlatList instead otherwise you will run into performance problems.

5. ActivityIndicator

• Displays a loading indicator.
• Very limited properties, you can only customize size (small or large) and change the color.

6. Button

• Basic button. You'll probably only use this when you are first learning RN. It doesn't give you a lot of options so you'll end up using one of the Touchable components or the the Pressable component detailed below.

7. FlatList

• For rendering lists of items.
• Very customizable.
• You can use custom components for header, footer, or empty list.
• Will update when the data prop is not equal (shallow check) or you can use extraData prop to make the list update based on some other prop.
• FlatList is good for most use cases, but if you need better performance check out RecyclerListView from Flipkart or the new FlashList from Shopify which uses RecycleListView under the hood.

8. SectionList

• Very similar to FlatList but the list is split into sections with each section having it's own heading heading. Think of a contact list, where you have a list of names but names are grouped into sections by letter (with the letter as the heading).

9. Image

• Self-explanatory, displays an image in the app. Good for basic images needs, if you need high performance or caching check out react-native-fast-image.

10. ImageBackground

• A basic implementation of a background image.

11. KeyboardAvoidingView

• A component for moving views out the way when the keyboard pops up.
• This functionality is built in to Android but not iOS.
• Doesn't work with Lists so you'll have to use roll your own avoiding view or use an open source solution.

12. Modal

• A very basic modal component. You'll probably end up using an open source modal library or using a modal that's apart of your navigation library.

13. Pressable

• New core component that passes the state of the press interaction to the children.

14. RefreshControl

• Used inside a ScrollView or ListView for pull to refresh functionality.

15. SafeAreaView

• Extra padding for iOS for the camera notch and rounded corners.
• Just wrap your top level view in this.

16. StatusBar

• Controls status bar in the app.

17. Switch

• Basic boolean switch component.
• Typically you'll build your own switch component on top of this (or use a UI lib) because it's very basic as is.

18. TouchableHighlight

• For handling user touches. On press, allows the underlay color to show through.
• Use directly or build your own button by building a wrapper around it.

19. TouchableOpacity

• For handling user touches with a built in opacity dimming when the button is pressed.
• Use directly or build your own button by building a wrapper around it.

20. TouchableWithoutFeedback

• Press with no built in feedback.
• Use this when you want to run code based on a touch event but you don't want to display the visual feedback of a button being pressed.

21. VirtualizedList

• Base component for FlatList and SectionList, unlikely you will use this directly.
• Virtualization greatly improves performance and memory consumption.

Android only

22. DrawerLayoutAndroid

• Wraps native DrawerLayout on Android.
• Unlikely to use directly because you will probably have a drawer built into the navigation library you choose.

23. TouchableNativeFeedback

• Respond to touches on android, similar to the native ripple effect on Android but not an exact match.
• To get an exact match of the ripple effect use the Pressable component instead.

iOS only

24. InputAccessoryView

• Displays an input above the keyboard on iOS.