in React, React Native

supported css and Flex

Valid style props


 

Component Placement and Visibility  

  “alignItems”,

  “alignSelf”,

“justifyContent”,

  “backfaceVisibility”,

  “backgroundColor”,

  “flex”,

  “flexDirection”,

  “flexWrap”,

Color and Visibility

  “opacity”,

  “overflow”,

  “overlayColor”,

“tintColor”,

Border

  “borderBottomColor”,

  “borderBottomLeftRadius”,

  “borderBottomRightRadius”,

  “borderBottomWidth”,

  “borderColor”,

  “borderLeftColor”,

  “borderLeftWidth”,

  “borderRadius”,

  “borderRightColor”,

  “borderRightWidth”,

  “borderStyle”,

  “borderTopColor”,

  “borderTopLeftRadius”,

  “borderTopRightRadius”,

  “borderTopWidth”,

  “borderWidth”,

Shadow

  “shadowColor”,

  “shadowOffset”,

  “shadowOpacity”,

  “shadowRadius”,

Text

  “color”,

  “fontFamily”,

  “fontSize”,

  “fontStyle”,

  “fontWeight”,

“letterSpacing”,

“textAlign”,

  “textAlignVertical”,

  “textDecorationColor”,

  “textDecorationLine”,

  “textDecorationStyle”,

  “textShadowColor”,

  “textShadowOffset”,

  “textShadowRadius”,

“writingDirection”

Size and Spacing

  “height”,   “width”,

  “left”,   “bottom”,”top”, “right”

  “margin”,  “marginBottom”,  “marginHorizontal”,

“marginLeft”,  “marginRight”, “marginTop”,

  “marginVertical”,

  “padding”,  “paddingBottom”,  “paddingHorizontal”,

  “paddingLeft”,  “paddingRight”,  “paddingTop”,

  “paddingVertical”,

  “position”,

  “resizeMode”,

  “rotation”,

  “scaleX”,

  “scaleY”,

  “transform”,

  “transformMatrix”,

  “translateX”,

  “translateY”,

Other

“decomposedMatrix”,

  “elevation”,

“lineHeight”,

 

 

Flexbox for React Native


The  Flexbox Layout  module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).  It is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts. The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.

But Flexbox for react native does not include all the terminology supported by flexbox for web. So here we will try to figure out how  to use flexbox  in react native application for mobile.

flexDirection enum(‘row’, ‘column’)


This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.

Output
Code
 

Flex Direction Row
containerR:{
    flexDirection: 'row',
    backgroundColor: 'red',
    height: 50,
  }
 
<View>
          <View style={styles.containerR}>
            <View style={styles.childContainer}>
                <Text style={styles.containerTitle}>  1  </Text>
            </View>
            <View style={styles.childContainer}>
                <Text style={styles.containerTitle}>  2  </Text>
            </View>
          </View>
</View>

 

 

Flex Direction Column
  containerC:{
    flexDirection: 'column',
    backgroundColor: 'purple',
    height: 100,
  },
 
<View>
          
          <View style={styles.containerC}>
            <View style={styles.childContainer}>
                <Text style={styles.containerTitle}>  1  </Text>
            </View>
            <View style={styles.childContainer}>
                <Text style={styles.containerTitle}>  2  </Text>
            </View>
          </View>
      </View>

 

 

 

 

flex <number>


flex is a short hand for flex-grow for web.

This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).

Output
Code
 

Flex Equally Distributed
  box1: {
    flex:1,
    backgroundColor: 'orange',
    marginLeft:10,
    marginRight:10,
    marginTop: 10,
    marginBottom: 10,
    alignItems: 'center',
  },
  box2: {
    flex:1,
    backgroundColor: 'orange',
    marginLeft:10,
    marginRight:10,
    marginTop: 10,
    marginBottom: 10,
    alignItems: 'center',
  },
  box3: {
    flex:1,
    backgroundColor: 'orange',
    marginLeft:10,
    marginRight:10,
    marginTop: 10,
    marginBottom: 10,
    alignItems: 'center',
  },
 
<View>
          <View style={styles.containerR}>
            <View style={styles.box1}>
                <Text style={styles.containerTitle}>  1  </Text>
            </View>
            <View style={styles.box2}>
                <Text style={styles.containerTitle}>  2  </Text>
            </View>
            <View style={styles.box3}>
                <Text style={styles.containerTitle}>  3  </Text>
            </View>
      </View>

 

 

Flex Direction Column
   box1: {
    flex:1,
    backgroundColor: 'orange',
    marginLeft:10,
    marginRight:10,
    marginTop: 10,
    marginBottom: 10,
    alignItems: 'center',
  },
  box2: {
    flex:2,
    backgroundColor: 'orange',
    marginLeft:10,
    marginRight:10,
    marginTop: 10,
    marginBottom: 10,
    alignItems: 'center',
  },
  box3: {
    flex:1,
    backgroundColor: 'orange',
    marginLeft:10,
    marginRight:10,
    marginTop: 10,
    marginBottom: 10,
    alignItems: 'center',
  },
<View>
          <View style={styles.containerR}>
            <View style={styles.box1}>
                <Text style={styles.containerTitle}>  1  </Text>
            </View>
            <View style={styles.box2}>
                <Text style={styles.containerTitle}>  2  </Text>
            </View>
            <View style={styles.box3}>
                <Text style={styles.containerTitle}>  3  </Text>
            </View>
      </View>

 

 

 

flexWrap enum(‘wrap’, ‘nowrap’)


By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. Direction also plays a role here, determining the direction new lines are stacked in.

 

Output
Code
 

Flex Direction Row
containerR:{
    flexDirection: 'row',
    backgroundColor: 'red',
    //height: 50,
    flexWrap: 'wrap'
  },
box1: {
    width:100,
    backgroundColor: 'orange',
    marginLeft:10,
    marginRight:10,
    marginTop: 10,
    marginBottom: 10,
    alignItems: 'center',
  },
  box2: {
    width:200,
    backgroundColor: 'orange',
    marginLeft:10,
    marginRight:10,
    marginTop: 10,
    marginBottom: 10,
    alignItems: 'center',
  },
  box3: {
    width:50,
    backgroundColor: 'orange',
    marginLeft:10,
    marginRight:10,
    marginTop: 10,
    marginBottom: 10,
    alignItems: 'center',
  },
 
<View>
          <View style={styles.containerR}>
            <View style={styles.box1}>
                <Text style={styles.containerTitle}>  1  </Text>
            </View>
            <View style={styles.box2}>
                <Text style={styles.containerTitle}>  2  </Text>
            </View>
            <View style={styles.box3}>
                <Text style={styles.containerTitle}>  3  </Text>
            </View>
        </View>
 </View>

 

 

justifyContent enum(‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’)


This defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

 

Output
Code
 

flex-start

flex-end

center

space-between

 

space-around

 

 

 

Flex Direction Row
containerR:{
    flexDirection: 'row',
    backgroundColor: 'red',
    //height: 50,
    justifyContent: 'space-start'
  },
 
<View>
          <View style={styles.containerR}>
            <View style={styles.box1}>
                <Text style={styles.containerTitle}>  1  </Text>
            </View>
            <View style={styles.box2}>
                <Text style={styles.containerTitle}>  2  </Text>
            </View>
            <View style={styles.box3}>
                <Text style={styles.containerTitle}>  3  </Text>
            </View>
        </View>
 </View>

 

alignItems enum(‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’)


This defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

 

Output
Code

 

 

 

Flex Direction Row
containerR:{
    flexDirection: 'row',
    backgroundColor: 'red',
    //height: 50,
    alignItems: 'flex-start'
  },
 
<View>
          <View style={styles.containerR}>
            <View style={styles.box1}>
                <Text style={styles.containerTitle}>  1  </Text>
            </View>
            <View style={styles.box2}>
                <Text style={styles.containerTitle}>  2  </Text>
            </View>
            <View style={styles.box3}>
                <Text style={styles.containerTitle}>  3  </Text>
            </View>
        </View>
 </View>

 

 

 

 

 

Write a Comment

Comment