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)