This content originally appeared on DEV Community and was authored by BHARATH M
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
This content originally appeared on DEV Community and was authored by BHARATH M
BHARATH M | Sciencx (2024-10-16T14:50:54+00:00) React Native Components CheatSheet. Retrieved from https://www.scien.cx/2024/10/16/react-native-components-cheatsheet/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.