04 RN - UI
Basic components
Most common
- View
- Text
- Image
- TextInput
- ScrollView
- StyleSheet
UI
- Button
- Switch
- Picker
- Slider
On screen list views
- FlatList
- SectionList
On screen list views - only on screen content is rendered – like RecyclerView in Android
iOS components
Common UIKit wrappers
- ActionSheetIOS
- AlertIOS
- DatePickerIOS
- ImagePickerIOS
- ProgressViewIOS
- PushNotificationIOS
- SegmentControlIOS
- TabBarIOS
Android components
- BackHandler
- DatePickerAndroid
- DrawerLayoutAndroid
- PermissionsAndroid
- ProgressBarAndroid
- TimePickerAndroid
- ToastAndroid
- ToolbarAndroid
- ViewPagerAndroid
Other components
- ActivityIndicator
- Alert
- Animated
- Clipboard
- Dimensions
- KeyboardAvoidingView
- Linking
- Modal
- PixelRatio
- RefreshControl
- StatusBar
- WebView
Components
Use the docs
External components
Or npm registry “react-native”
Style/Dimensions
Fixed dimensions
- Width and height
- Unitless – density independent pixels
- Or percentage
Flex space (along main axis)
- Similar to layout_weight in Android
- Default is "flex: 1"
- Space shared proportionally amongst other components with the same parent
- flex 1 + flex 2 => sum is 3. So first component will use 1/3 and second 2/3 of available space
Flexbox
- Flexbox is designed to provide a consistent layout on different screen sizes. (similar to web – flexDirection default is row and flex supports only single number)
- Combine with flexDirection, alignItems, and justifyContent to achieve the right layout.
Yoga playground
Interactive web-based playground for testing layout styling logic
Flexbox - flexDirection
flexDirection
- row – align from left to right
- column – align from top to bottom
- row-reverse
- column-reverse
Flexbox - justifyContent
justifyContent - how to align children within the main axis
- flex-start
- flex-end
- center
- space-between – divide empty space evenly between children
X___X___X
- space-around – divide empty space evenly around every children
_X__X__X_
- space-evenly – all empty spaces are exactly the same (start edge, end endge and in-betweens)
_X_X_X_
Flexbox - alignItems, alignSelf
alignItems – cross axis alignment (only, if width is not fixed)
- stretch – default (full possible cross axis size)
- flex-start
- flex-end
- center
- baseline
alignSelf - override parents alignItems seting.
Flexbox - alignContent, flexWrap
-
alignContent – when wrapping to multiple lines
-
flexWrap
- wrap – wraps to multiline when needed
- nowrap
Flexbox - flexBasis, flexGrow, flexShrink
- flexBasis – default size of the item, before grow and shrink
- flexGrow – float, >=0 (0 is default). How any space is divided among the children along the main axis. Similar to layout_weight
- flexShrink – how to shrink the children, if size overflows. Float >=0, (1 is default)
Flexbox - position, padding, border, margin
- position
- positionTop, positionBottom, positionLeft, positionRight – dp pixel to move component
- padding (top, bottom, left, right)
- border
- margin