in React, React Native

Mapping UIComponent (iOS, Android, React Native)

Most of the application have android and iOS version of it.  Definitely to develop  android and iOS version of application they assign  different developer  for each platform.  During the team communication for the application during the development,  we see the weird situation where iOS developer don’t understand  the technical word used by android developer  and vice versa. For e.g.  iOS developer use terms such as ViewController, TableViewController  which most of the android developer don’t understand what the hell is that. In android they use term such as Activity and Fragment for ViewController and ListView and ListViewLayout for TableViewController.

This is one for the reason that developer finds very hard to switch from android developer to iOS developer and vice versa.  Definitely there are other lots of reason for this, but here I am taking about UIComponent and Controls only.  So here are some of the UI Component mapping between iOS, Android and React Native.

React

React Native

iOS

Android

ViewController – Activity/Fragment

<ViewPagerAndroid>

PageViewController

View Pager

View

<div>

<View>

UIView

<android.View>

UIStackView

<LinearLayout>, <RelativeLayout>

<span>

<Text>

UILabel

<TextView>

<li>, <ui>

<ListView>

UITableView

<ListView>, RecyclerView

<ListView> GridLayout

UICollectionView

<GridLayout>, <GridView>

react-native-menu

UIPopoverView

<Spinner>, Menu

<img>

<Image>

UIImageView

<ImageView>

<WebView>

UIWebView

<WebView>

<ScrollView>

UIScrollView

<ScrollView>

<MapView>

UIMapView

<android.gms.maps.MapView>

<StatusBar>

UIStatusBar

<NavigatorIOS>

UINavigationBar

<ActionBar>

<ToolbarAndroid>

UIToolBar

<ToolBar>

<TabBarIOS>

UITabBar

Tabbed Layouts

<RatingBar>

TextInput

UISearchBar

<SearchView>

CalendarView

CardView

<Modal>

User Input Component

UITextView

<TextView>

<TextInput>

UITextField

<EditText>

Control UI Component

<ActivityIndicatorIOS>

UIActivityIndicatorView

ProgresDialog

<ProgressBarAndroid>

UIProgressView

<ProgressBar>

<Alert>, <AlertIOS>

UIAlertView

DialogBox , Toast

<ActionSheetIOS>

UIActionSheet

SnackBar

UIActivityView

BottomSheet

<DatePickerIOS> ,

<ProgressViewIOS>

UIDatePicker

<TimePicker>, <DatePicker>

<Picker>, <PickerIOS>

UIPickerView

<Spinner>

UIButton

<Button>, <RadioButton>,

<CheckBox>, <Stepper>,

<ImageButton>

<Switch>

UISwitch

<Switch>

UIStepper

UIPageControl

PageIndicator, Stepper

<SegmentControlIOS>

UISegmentControl

UISlider

<SeekBar>

Chips

 

react-native-image-picker

UIImagePickerController

react-native-scrollable-tab-view

UITabbarController

 TabbedLayout

react-native-simple-modal

react-native-modal

react-native-easy-overlay-modal-with-navigator/

ModalView

 TabbedLayout

 

These list may not be sufficient, so I could love to leave a comment to fill in the space to add more items and  receive feedback for the above list if found not appropriate.

Reference Website

https://android-arsenal.com/details/1/1156
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/ContentViews.html#//apple_ref/doc/uid/TP40006556-CH13-SW1
https://www.google.com/design/spec/components/
https://developer.xamarin.com/guides/android/user_interface/recyclerview/

Ref for React

http://www.material-ui.com/#/components/snackbar
http://nikgraf.github.io/belle/#/component/spinner?_k=crzfed

Write a Comment

Comment