reactstrap-native-web v1.0.4

ReactstrapNativeWeb

This is project create support library bootstrap on react native and react native web

Table of contents

• Installation
• Global Style
  • Setup
  • Document Structure Dynamic Theme
  • Text Color
  • Background Color
  • Border Color
  • Border Width
  • Padding
  • Margin
  • Width and Height
  • Display
  • Overflow
  • Position
  • ZIndex
  • Font Size
  • Font Weight
  • Letter Spacing
  • Line Height
  • Text Align
  • Text Decoration
  • Text Transform
  • Flex Direction
  • Flex Wrap
  • Align Items
  • Align Content
  • Align Self
  • Justify Content
  • Flex
  • Flex Grow
  • Flex Shrink
• Container Component
  • Usage
  • Document
  • Example with default container and enable debug
• Row Component
  • Usage
  • Document
• Col Component
  • Usage
  • Document
  • Example
• Image Component
  • Usage
  • Document
  • Example
• TextShadow Component
  • Usage
  • Document
  • Example
• Inspired by
• Contributing
• Author
• License

Installation

If using yarn:

yarn add reactstrap-native-web@beta

If using npm:

npm i reactstrap-native-web@beta

Global Style

Setup

1. Create file styles any (recommended use name: theme.style.js or theme.style.ts if you use the typescript in a folder style)

2. Load theme default or dynamic theme you want.

   import {buildTheme} from 'reactstrap-native-web';
   import {StyleSheet} from 'react-native'  
   const themes = buildTheme({
     lightTheme: {
       spacer: 30,  
       colors: {
         primary: 'red',
       },
     },
   });
   
   export const bootstrap = StyleSheet.create(themes.default.styleSheet);
   export const lightTheme = StyleSheet.create(themes.lightTheme.styleSheet);

   And then you can import global style anywhere Note: when we define colors variable for any theme will auto-generate text color, background color, and border color equivalent Beside about spacer variable will auto-generate margin and padding equivalent please reference spacing

3. Theme defaults similar :root of bootstrap

   export default {
     spacer: 16,
     colors: {
       blue: '#007bff',
       indigo: '#6610f2',
       purple: '#6f42c1',
       pink: '#e83e8c',
       red: '#dc3545',
       orange: '#fd7e14',
       yellow: '#ffc107',
       green: '#28a745',
       teal: '#20c997',
       cyan: '#17a2b8',
       white: '#fff',
       gray: '#6c757d',
       grayDark: '#343a40',
       primary: '#007bff',
       secondary: '#6c757d',
       success: '#28a745',
       info: '#17a2b8',
       warning: '#ffc107',
       danger: '#dc3545',
       light: '#f8f9fa',
       dark: '#343a40',
     },
   };

Document Structure Dynamic Theme

Text Color

• Generate when we setting colors

• Example:

       import {buildTheme} from 'reactstrap-native-web';
       import {StyleSheet} from 'react-native'   
       const themes = buildTheme({
           lightTheme: {
              spacer: 30,  
              colors: {
                primary: 'red',
              },
           },
       });
  
       export const bootstrap = StyleSheet.create(themes.default.styleSheet);
       export const lightTheme = StyleSheet.create(themes.lightTheme.styleSheet);

• Auto generate text color for lightTheme:

     import {StyleSheet} from "react-native";
  
     StyleSheet.create({
       textPrimary: {
           color: 'red'        
       }   
     })  

• we can access style in code the following:

       export const ExampleComponent = () => {
           return (
               <View style={lightTheme.textPrimary}/>
           );   
       }   

Background Color

• Generate when we setting colors
• Example:

       import {buildTheme} from 'reactstrap-native-web';
       import {StyleSheet} from 'react-native'   
       const themes = buildTheme({
           lightTheme: {
               spacer: 30,  
               colors: {
                   primary: 'red',
               },
           },
       });
      
       export const bootstrap = StyleSheet.create(themes.default.styleSheet);
       export const lightTheme = StyleSheet.create(themes.lightTheme.styleSheet);

• Auto generate background color for lightTheme:

       import {StyleSheet} from "react-native";
   
       StyleSheet.create({
           bgPrimary: {
               backgroundColor: 'red'        
           }   
       })  

• we can access style in code the following:

       export const ExampleComponent = () => {
           return (
               <View style={lightTheme.bgPrimary}/>
           );   
       }   

Border Color

• Generate when we setting colors
• Example:

       import {buildTheme} from 'reactstrap-native-web';
       import {StyleSheet} from 'react-native'   
       const themes = buildTheme({
           lightTheme: {
               spacer: 30,  
               colors: {
                   primary: 'red',
               },
           },
       });
      
       export const bootstrap = StyleSheet.create(themes.default.styleSheet);
       export const lightTheme = StyleSheet.create(themes.lightTheme.styleSheet);

• Auto generate border color for lightTheme:

       import {StyleSheet} from "react-native";
   
       StyleSheet.create({
           borderPrimary: {
             borderColor: 'red',    
           },
           borderFullPrimary: {
             borderWidth: 1,
             borderColor: 'red',
             borderStyle: 'solid',     
           },
           borderBottomPrimary: {
             borderBottomColor: 'red',
             borderBottomWidth: 1,
             borderStyle: 'solid',
           },
           borderLeftPrimary: {
             borderLeftColor: 'red',
             borderLeftWidth: 1,
             borderStyle: 'solid',
           },
           borderRightPrimary: {
             borderRightColor: 'red',
             borderRightWidth: 1,
             borderStyle: 'solid',
           },
           borderTopPrimary: {
              borderTopColor: 'red',
              borderTopWidth: 1,
              borderStyle: 'solid',
           }                            
       })  

• we can access style in code the following:

       export const ExampleComponent = () => {
           return (
               <View style={lightTheme.borderFullPrimary}/>
           );   
       }   

Border Width

• Generate when we setting spacer
• Example:

       import {buildTheme} from 'reactstrap-native-web';
       import {StyleSheet} from 'react-native'   
       const themes = buildTheme({
           lightTheme: {
               spacer: 30,  
               colors: {
                   primary: 'red',
               },
           },
       });
      
       export const bootstrap = StyleSheet.create(themes.default.styleSheet);
       export const lightTheme = StyleSheet.create(themes.lightTheme.styleSheet);

• Auto generate border width for lightTheme:

       import {StyleSheet} from "react-native";
   
       StyleSheet.create({
           border0: {
               borderWidth: 0,
           },
           borderB0: {
               borderBottomWidth: 0,
           },
           borderE0: {
               borderEndWidth: 0,
           },
           borderL0: {
               borderLeftWidth: 0,
           },
           borderR0: {
               borderRightWidth: 0,
           },
           borderS0: {
               borderStartWidth: 0,
           },
           borderT0: {
               borderTopWidth: 0,
           },
           borderX0: {
               borderRightWidth: 0,
               borderLeftWidth: 0,
           },
           borderY0: {
               borderBottomWidth: 0,
               borderTopWidth: 0,
           },
           ... generate => spacer / 2 ,  
           border15: {
               borderWidth: 15,
           }                    
                
       })  

• we can access style in code the following:

       export const ExampleComponent = () => {
           return (
               <View style={lightTheme.border3}/>
           );   
       }   

Padding

• Generate when we setting spacer
• Example:

       import {buildTheme} from 'reactstrap-native-web';
       import {StyleSheet} from 'react-native'   
       const themes = buildTheme({
           lightTheme: {
               spacer: 30,  
               colors: {
                   primary: 'red',
               },
           },
       });
      
       export const bootstrap = StyleSheet.create(themes.default.styleSheet);
       export const lightTheme = StyleSheet.create(themes.lightTheme.styleSheet);

• Auto generate padding for lightTheme according to the rate of spacing of the bootstrap

       import {StyleSheet} from "react-native";
   
       StyleSheet.create({
           p0: {
               padding: 0,
           },
           pb0: {
               paddingBottom: 0,
           },
           pl0: {
               paddingLeft: 0,
           },
           pt0: {
               paddingTop: 0,
           },
           pr0: {
               paddingRight: 0,
           },
           px0: {
               paddingHorizontal: 0,
           },
           py0: {
               paddingVertical: 0,
           },
           ... generate => 5,
           p5: {
               padding: spacer * 3,
           }   
       })  

• we can access style in code the following:

       export const ExampleComponent = () => {
           return (
               <View style={lightTheme.p3}/>
           );   
       }   

Margin

• Generate when we setting spacer
• Example:

       import {buildTheme} from 'reactstrap-native-web';
       import {StyleSheet} from 'react-native'   
       const themes = buildTheme({
           lightTheme: {
               spacer: 30,  
               colors: {
                   primary: 'red',
               },
           },
       });
      
       export const bootstrap = StyleSheet.create(themes.default.styleSheet);
       export const lightTheme = StyleSheet.create(themes.lightTheme.styleSheet);

• Auto generate margin for lightTheme according to the rate of spacing of the bootstrap

       import {StyleSheet} from "react-native";
   
       StyleSheet.create({
           m0: {
               margin: 0,
           },
           mb0: {
               marginBottom: 0,
           },
           ml0: {
               marginLeft: 0,
           },
           mt0: {
               marginTop: 0,
           },
           mr0: {
               marginRight: 0,
           },
           mx0: {
               marginHorizontal: 0,
           },
           my0: {
               marginVertical: 0,
           },
           ... generate => 5,
           m5: {
               margin: spacer * 3,
           }   
       })  

• we can access style in code the following:

       export const ExampleComponent = () => {
           return (
               <View style={lightTheme.m3}/>
           );   
       }   

Width and Height

• Inspiration from library react-native-tailwindcss

Display

Overflow

Position

ZIndex

Font Size

Font Weight

Letter Spacing

Line Height

Text Align

Text Decoration

Text Transform

Flex Direction

Flex Wrap

Align Items

Align Content

Align Self

Justify Content

Flex

Flex Grow

Flex Shrink

Container Component

Usage

import {Container} from 'reactstrap-native-web';

Document

Example with default container and enable debug

import React from 'react';
import {View, Text} from 'react-native';
import {Container} from 'reactstrap-native-web';

export const ContainerWithDebug = () => {
  return (
    <Container debug>
      <View>
        <Text>Container</Text>
      </View>
    </Container>
  );
};

On Web	On IOS	On Android
containerWithDebug.js	containerWithDebug.js	containerWithDebug.js

Row Component

Usage

import {Row} from 'reactstrap-native-web';

Document

Col Component

Usage

import {Col} from 'reactstrap-native-web';

Document

Example

import React from 'react';
import {Text} from 'react-native';
import {Container, Row, Col} from 'reactstrap-native-web';

export const TestColumn = () => {
  return (
    <Container fluid>
      <Row>
        <Col
          col={{size: '3', offset: '1'}}
          sm={{size: '6', offset: '0'}}
          md={{size: '4', offset: '0'}}
          debug>
          <Text>Col 6</Text>
        </Col>
        <Col
          col={{size: 7, offset: '1'}}
          sm={{size: 6, offset: '0'}}
          md={{size: 7, offset: '1'}}
          debug>
          <Text>Col 6</Text>
        </Col>
      </Row>
    </Container>
  );
};

On Web	On IOS	On Android
demo.js	demo.js	demo.js

Image Component

Usage

import {Image} from 'reactstrap-native-web';

Document

Use library react-native-fit-image

Example

Please reference link react-native-fit-image

TextShadow Component

Usage

import {TextShadow} from 'reactstrap-native-web';

Document

Example

import {TextShadow} from 'reactstrap-native-web';

export const TextShadowDemo = () => {
  return (
   <View style={{flex: 1, backgroundColor: "#232323"}}>
       <TextShadow textShadow={'0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18'} style={{color: "#FFFFFF"}} />
   </View>
  );
};

On Android	On IOS

Inspired by

• Library Reactstrap
• React native taildwincss

Contributing

Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.

Working on your first Pull Request? You can learn how from this free series How to Contribute to an Open Source Project on GitHub

Author

Pham Minh Hai Au

License

MIT