react-native-box-lite

react-native-box-lite

Installation

$ npm install react-native-box-lite

Extension for react-native-box-lite

To use suggestion for className, you need to install extension react-native-components-intellisense in your vscode.

Usage

import {Box, Button, Text} from 'react-native-box-lite';
import {View} from 'react-native';

const test =()=>{
   const containerStyle = useClassName({
      className: "flex-1 bg-white p-4"
   })
   const containerHeaderStyle = useClassName({
      className: "bg-black p-4 h-10 w-screen"
   })

   return (
      <View style={containerStyles}>
         <Box style={containerHeaderStyle}>
            <Text className="text-white font-bold text-xl">
               Title Demo rn component
            </Text>
         </Box>
         <Box className="bg-amber-200 h-12 w-12">
            <Text className="text-white font-bold text-md">
               Demo rn component
            </Text>
         </Box>
         <Button title="Demo Button Default" />
         <Button varian="outline" title="Demo Button Outline" />
         <Button varian="primary" title="Demo Button Primary" />
      <View>
   )
}

Usage custom styles

• use passed number in [] as w-[200] => width: 200
• scale you can use function horizontalScale fontSize,... [${horizontalScale(30)}]

import {Box, Text} from 'react-native-box-lite';

const customStyles = () => {
  return (
    <Box>
      <Box className="w-[200] h-[350] bg-white center" />
      <Text className="text-[22] text-green-500 font-bold">
        Demo rn component
      </Text>
    </Box>
  );
};

Note

Type class Gap: support react-native version >= 0.71

HOOK: useClassName

Prop	Description	Default
className	class of component as:w-1 h-1	null
scaleScreen	Active use scale by width of screen	true

Checkbox

Prop	Description	Default
checked	state checked	false
value	state parameter when event press	null
label	label of checkbox	null
color	properties checked and default	checked: blue, default: gray
size	size of checkbox	20
sizeChildren	size of state checked if has size && (!sizeChildren) => size/2	10
iconChecked	custom icon checked, type: ImageSourcePropType	null
renderIconChecked	function render icon checked	null
className	class styles of container	null
classNameParent	class styles of Parent	null
classNameChildren	class styles of Children	null
classNameLabel	class styles of Label	null
isDebounce	Active debounce when event press	false
delayDebounce	time debounce of debounce	500

import {Checkbox} from 'react-native-box-lite';

<Checkbox label="Label" />
<Checkbox checked label="Checked" />
<Checkbox
   size={28}
   checked
   color={{checked: 'green'}}
   label="Custom color and size"
/>
 <Checkbox
   size={28}
   checked
   iconChecked={Add}
   color={{checked: 'green'}}
   label="Custom icon"
/>

RadioButton

Prop	Description	Default
checked	state checked	false
value	state parameter when press	null
label	label of radio	null
color	properties checked and default	checked: blue,default: gray
size	size of radio	20
sizeChildren	size of state checked if has size && (!sizeChildren) => size/2	8
className	class styles of container	null
classNameParent	class styles of Parent	null
classNameChildren	class styles of Children	null
classNameLabel	class styles of Label	null
isDebounce	Active debounce when press	false
delayDebounce	time debounce of debounce	500

import {RadioButton} from 'react-native-box-lite';

<RadioButton label="Label" />
<RadioButton checked label="Checked" />
<RadioButton
   size={28}
   checked
   color={{checked: 'green'}}
   label="Custom color and size"
/>

Box

Prop	Description	Default
className	class styles of component	null
scaleScreen	Active use scale by width of screen	true
rest	extents from ViewProps

import {Box} from 'react-native-box-lite';

<Box className="row gap-2">
  <Box className="w-10 h-10 bg-red-400" />
  <Box className="w-10 h-10 bg-green-400" />
  <Box className="w-10 h-10 bg-yellow-400" />
</Box>;

Button

Prop	Description	Default
varian	type of primary, outline	null
className	class styles of component	null
scaleScreen	Active use scale by width of screen	true
isDebounce	Active debounce when press	false
delayDebounce	time debounce of debounce	500
rest	extents from TouchableOpacityProps

import {Button} from 'react-native-box-lite';

<Button title="Demo Button Default" />
<Button varian="outline" title="Demo Button Outline" />
<Button varian="primary" title="Demo Button Primary" />

Text

Prop	Description	Default
className	class styles of component	null
scaleScreen	Active use scale by width of screen	true
rest	extents from TextProps

import {Text} from 'react-native-box-lite';

<Text className="font-bold text-xl text-black">Text xl</Text>
<Text className="font-normal text-xl text-black">Font normal</Text>

scale screen

function	Description	parameter
horizontalScale	scale by ratio width device default guidelineBaseWidth = 375	number
verticalScale	scale by ratio height device default guidelineBaseHeight = 812	number
moderateScale	scale by ratio width and height	number
fontSize	scale by ratio width and height	number