Nominating Presidential Muppets
    Wondering what’s next for npm?Check out our public roadmap! »

    react-native-col

    1.1.5 • Public • Published

    react-native-col

    Quick & concise react-native Flexbox positioning (+ consistent spacing).

    ┌─────────────┐
    │ TL   T   TR │
    │             │
    │ L    C    R │
    │             │
    │ BL   B   BR │
    └─────────────┘
    

    Installation

    $ yarn add react-native-col
    

    Basic Usage

    Before

    import { View } from 'react-native';
    
    <View
      style={{
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'flex-start',
      }}
    />;

    After

    import { Row } from 'react-native-col';
    
    // "Top Right"
    <Row.TR />;

    Documentation

    All demos will use these 3 RGB squares:

    import Col from 'react-native-col';
    
    const $ = {
      sq: {
        minWidth: 50,
        minHeight: 50,
      },
      r: {
        backgroundColor: 'red',
      },
      g: {
        backgroundColor: 'green',
      },
      b: {
        backgroundColor: 'blue',
      },
    };
    
    const Red = () => <Col style={[$.sq, $.r]} />;
    
    const Green = () => <Col style={[$.sq, $.g]} />;
    
    const Blue = () => <Col style={[$.sq, $.b]} />;

    Col

    import Col from 'react-native-col';
    
    <Col style={{ flex: 1 }}>
      <Red />
      <Green />
      <Blue />
    </Col>;
    // Top Left
    <Col.TL /> // Equivalent to <Col />
    
    // Top
    <Col.T />
    
    // Top Right
    <Col.TR />

    // Left
    <Col.L />
    
    // Center
    <Col.C />
    
    // Right
    <Col.R />

    // Bottom Left
    <Col.BL />
    
    // Bottom
    <Col.B />
    
    // Bottom Right
    <Col.BR />

    // Top to Bottom, aligned Left
    <Col.TBL />
    
    // Top to Bottom
    <Col.TB />
    
    // Top to Bottom, aligned Right
    <Col.TBR />

    // Bottom to Top, aligned Left
    <Col.BTL />
    
    // Bottom to Top
    <Col.BT />
    
    // Bottom to Top, aligned Right
    <Col.BTR />

    // Left-Right, aligned Top
    <Col.LRT />
    
    // Left-Right, aligned Center
    <Col.LRC />
    
    // Left-Right, aligned Bottom
    <Col.LRB />

    Row

    import { Row } from 'react-native-col';
    
    <Row style={{ flex: 1 }}>
      <Red />
      <Green />
      <Blue />
    </Row>;
    // Top Left
    <Row.TL /> // Equivalent to <Row />
    
    // Top
    <Row.T />
    
    // Top Right
    <Row.TR />

    // Left
    <Row.L />
    
    // Center
    <Row.C />
    
    // Right
    <Row.R />

    // Bottom Left
    <Row.BL />
    
    // Bottom
    <Row.B />
    
    // Bottom Right
    <Row.BR />

    // Left to Right, aligned Top
    <Row.LRT />
    
    // Left to Right
    <Row.LR />
    
    // Left to Right, aligned Bottom
    <Row.LRB />

    // Right to Left, aligned Top
    <Row.RLT />
    
    // Right to Left
    <Row.RL />
    
    // Right to Left, aligned Bottom
    <Row.RLB />

    // Top-Bottom, aligned Left
    <Row.TBL />
    
    // Top-Bottom, aligned Center
    <Row.TBC />
    
    // Top-Bottom, aligned Right
    <Row.TBR />

    The X suffix

    Instead of writing:

    <Col style={{ flex: 1 }}>
      <Red />
      <Green />
      <Blue />
    </Col>

    You could make use of the X suffix:

    <Col.X>
      <Red />
      <Green />
      <Blue />
    </Col.X>

    Note: The "X" suffix stands for "eXpand".

    It can be applied to all variations:

    <Col.TL.X />
    <Col.T.X />
    <Col.TR.X />
    <Col.L.X />
    <Col.C.X />
    // ...
    
    <Row.TL.X />
    <Row.T.X />
    // ...

    Credits

    Install

    npm i react-native-col

    DownloadsWeekly Downloads

    105

    Version

    1.1.5

    License

    MIT

    Unpacked Size

    15.9 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar