React Native Mini

React Native Mini is Light weight boostrap styles and Component Libarary

version

 0.0.2

Installation

 npm i 'react_native_mini'

Guide

• Styles
• Components

Styles

Basic Example

 import * as React from 'react';
 import { View , TouchableOpacity , Text } from 'react-native';
 import boostrap from 'react_native_mini';

 export default function App(){

     return(
         <View style={{flex : 1}}>
           <TouchableOpacity>
             <Text style={[boostrap.btn ,  boostrap.btn_outline_primary   , boostrap.mb1 ]} >Button Outline Primary</Text>
           </TouchableOpacity>
         </View>
     )
 }

More Button Outline Styles

 import * as React from 'react';
 import { View , TouchableOpacity , ScrollView , Text } from 'react-native';
 import boostrap from 'react_native_mini';

 export default function App(){

     return(
    <ScrollView style={styles.container}>

         <TouchableOpacity>
            <Text style={[boostrap.btn ,  boostrap.btn_outline_primary   , boostrap.mb1 ]} >Button Outline Primary</Text>
         </TouchableOpacity>
         <TouchableOpacity>
         <Text style={[boostrap.btn ,  boostrap.btn_outline_secondry  , boostrap.mb1  ]} >Button Outline Secondary</Text>
          </TouchableOpacity>
         <TouchableOpacity>
         <Text style={[boostrap.btn ,  boostrap.btn_outline_danger , boostrap.mb1  ]} >Button Outline Danger </Text>
          </TouchableOpacity>
         <TouchableOpacity>
         <Text style={[boostrap.btn ,  boostrap.btn_outline_warning , boostrap.mb1  ]} >Button Outline Warning</Text>
          </TouchableOpacity>
         <TouchableOpacity>
         <Text style={[boostrap.btn ,  boostrap.btn_outline_info , boostrap.mb1  ]} >Button Outline info</Text>
          </TouchableOpacity>
         <TouchableOpacity>
         <Text style={[boostrap.btn ,  boostrap.btn_outline_dark , boostrap.mb1  ]} >Button Outline dark</Text>
          </TouchableOpacity>
         <TouchableOpacity>
         <Text style={[boostrap.btn ,  boostrap.btn_outline_success , boostrap.mb1  ]} >Button Outline success</Text> 
         </TouchableOpacity>
       </ScrollView>
     )
 }

Button Filled Color (Normal Boostrap buttons)

 import * as React from 'react';
 import { View , TouchableOpacity , ScrollView , Text } from 'react-native';
 import boostrap from 'react_native_mini';

 export default function App(){

     return(
 <ScrollView style={styles.container}>

    <TouchableOpacity>
       <Text style={[boostrap.btn ,  boostrap.btn_primary   , boostrap.mb1 ]} >Button  Primary</Text>
    </TouchableOpacity>
    <TouchableOpacity>
    <Text style={[boostrap.btn ,  boostrap.btn_secondry  , boostrap.mb1  ]} >Button  Secondary</Text>
     </TouchableOpacity>
    <TouchableOpacity>
    <Text style={[boostrap.btn ,  boostrap.btn_danger , boostrap.mb1  ]} >Button  Danger </Text>
     </TouchableOpacity>
    <TouchableOpacity>
    <Text style={[boostrap.btn ,  boostrap.btn_warning , boostrap.mb1  ]} >Button  Warning</Text>
     </TouchableOpacity>
    <TouchableOpacity>
    <Text style={[boostrap.btn ,  boostrap.btn_info , boostrap.mb1  ]} >Button  info</Text>
     </TouchableOpacity>
    <TouchableOpacity>
    <Text style={[boostrap.btn ,  boostrap.btn_dark , boostrap.mb1  ]} >Button  dark</Text>
     </TouchableOpacity>
    <TouchableOpacity>
    <Text style={[boostrap.btn ,  boostrap.btn_success , boostrap.mb1  ]} >Button  success</Text> 
 </TouchableOpacity>
    </ScrollView>
     )
 }

More styles

• Margin
• padding

Margin

Basic

boostrap.m5 == margin : 50

boostrap.m3 == margin : 30

boostrap.m2 == margin : 20

boostrap.m1 == margin : 10

For Margin Top :

mt1 === margin-top : 10

mt2 , mt3

For Margin Bottom :

mb1 === margin-bottom : 10

mb2 , mb3

For Margin Right :

mr1 === margin-Right : 10

mr2 , mr3

For Margin Left :

ml1 === margin-left : 10

ml2 , ml3

 padding not added yet!

Components

Component List

• Column
• Row
• AmountText
• Button
• KText
• Loader
• NWText
• H1 , H2 , H3 , H4

NWText

 import * as React from 'react';
 import { View , TouchableOpacity , Text } from 'react-native';
 import {NWText} from 'react_native_mini';

 export default function App(){

     return(
         <View style={{flex : 1}}>
          <NWText>1230<NWText/>
         </View>
     )
 }

Output

  NWText Converts number To Word Text Form 
  For example 
  1230 will be converted as 
  one thousand two hundred and thirty 

KText , AmountText

 import * as React from 'react';
 import { View , TouchableOpacity , Text } from 'react-native';
 import {KText ,AmountText } from 'react_native_mini';

 export default function App(){

     return(
         <View style={{flex : 1}}>
          <KText text='1000' />
           <AmountText text='10000' />
         </View>
     )
 }

Output

  KText  
  example 
  1000 will be converted To 1k

  AmountText 
  10000 will be converted To 10,000 comma separated value