Skip to content

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