React Native Mini is Light weight boostrap styles and Component Libarary
0.0.2
npm i 'react_native_mini'
- Styles
- Components
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>
)
}
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>
)
}
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>
)
}
- Margin
- padding
Basic
boostrap.m5 == margin : 50
boostrap.m3 == margin : 30
boostrap.m2 == margin : 20
boostrap.m1 == margin : 10
mt1 === margin-top : 10
mt2 , mt3
mb1 === margin-bottom : 10
mb2 , mb3
mr1 === margin-Right : 10
mr2 , mr3
ml1 === margin-left : 10
ml2 , ml3
padding not added yet!
Component List
- Column
- Row
- AmountText
- Button
- KText
- Loader
- NWText
- H1 , H2 , H3 , H4
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>
)
}
NWText Converts number To Word Text Form
For example
1230 will be converted as
one thousand two hundred and thirty
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>
)
}
KText
example
1000 will be converted To 1k
AmountText
10000 will be converted To 10,000 comma separated value