Here is a complete guide for React Native components corresponding to HTML elements and native Android and iOS UI components can bridge the gap between web and mobile development. This comprehensive table provides a side-by-side comparison to help developers transition seamlessly across platforms.
React Native Component | HTML Element | Android Component | iOS Component |
---|---|---|---|
View | <div> |
ViewGroup |
UIView |
Text |
<p> or <span>
|
TextView |
UILabel |
Image | <img> |
ImageView |
UIImageView |
TextInput | <input type="text"> |
EditText |
UITextField |
ScrollView | <div style="overflow: scroll"> |
ScrollView |
UIScrollView |
FlatList |
<ul> (with custom handling) |
RecyclerView |
UITableView |
SectionList |
<ul> with sections |
ExpandableListView |
UITableView with sections |
Button | <button> |
Button |
UIButton |
TouchableOpacity | Clickable <div>
|
TouchableOpacity |
UIButton (with opacity) |
TouchableHighlight | Clickable <div>
|
TouchableHighlight |
UIButton (with highlight effect) |
TouchableWithoutFeedback | Clickable <div>
|
View with touch events |
UIView with touch events |
ActivityIndicator | CSS Spinner | ProgressBar |
UIActivityIndicatorView |
Modal | Custom modal/dialog | Dialog |
Modal UIViewController
|
Picker | <select> |
Spinner |
UIPickerView |
Switch | <input type="checkbox"> |
Switch |
UISwitch |
Slider | <input type="range"> |
SeekBar |
UISlider |
StatusBar | N/A | StatusBar |
UIStatusBar |
SafeAreaView | N/A |
View (with insets) |
UIView respecting safe areas |
KeyboardAvoidingView | N/A |
View with keyboard handling |
UIView with keyboard handling |
Pressable |
<button> or clickable <div>
|
View with touch events |
UIView with touch events |
RefreshControl | N/A | SwipeRefreshLayout |
UIRefreshControl |
WebView |
<iframe> or <object>
|
WebView |
WKWebView |
Animated.View |
<div> with animations |
Animated View
|
UIView with animations |
This helps any new react native developers to easily transition from Web or Native development
References:
Top comments (0)