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