react-native-eazy-background

Getting started

Base utility for mobile phone applicaion for android and ios

Installation

yarn add react-native-eazy-background

Usage

Wrap your application inside the background

import Background from "react-native-eazy-background";
function App() {
  return <Background>{props.children}</Background>;
}

Use hook to show toase message

import { useToast } from 'react-native-eazy-background';

function App () {
    const toast = useToast();
    return <Button title='toast me' onPress={() => toast('toast message') />
}

import { useLoad, useToast } from 'react-native-eazy-background';

function App () {
    const loading = useLoad();
    const toast = useToast();
    useEffect = (() => {
        loading(true);
        toast('fetching data...', 'INFO');
        const data = await ...;
        ...
        toast('fetch success','SUCCESS');
        loading(false);
    })
}

Use StyleSheet shortcut

import { css } from "react-native-eazy-background";

function App() {
  return (
    <View style={[css.bg("red"), css.p(20), css.container]}>
      <Text style={[css.my(20), css.text_color("white"), css.text_center]}>Style</Text>
    </View>
  );
}

Use Context inside the class

import { ToastContext } from "react-native-eazy-background";

class HomeScreen extends React.Component {
  static contextType = ToastContext;
  render() {
    return (
      <View>
        <Button
          title="toast me"
          onPress={() => {
            this.context.toastMessage("message", "INFO");
          }}
        />
      </View>
    );
  }
}

Hooks

Name	Format
useToast	useToast(String: message, String: Type)
Toast Type	SUCCESS, ERROR, INFO, WARNING
useLoad	useLoad(Boolean value)

Props

Name	Type	Value
safeArea	bool	false
barStyle	string	'default' / 'light-content' / 'dark-content'
barHidden	bool	true
topColor	string	'#ffffff'
bottomColor	string	'#000000'

StyleSheet(css)

most common value return

Name	Description
container	flex 1, justifyContent & alignItems: 'center'
center	justifyContent: 'center', alignItems: 'center'
relative	position: 'relative'
absolute	position: 'absolute'
absolute_fluid	position: 'absolute', top, bottom, left, right = 0
flex_row	direction: 'row'
flex_column	direction: 'column'
flex_wrap	flexWrap : 'wrap'
overflow_visible	overflow: 'visible'
overflow_hidden	overflow: 'hidden'

most common value set

Function	Parameter / Default	Value
top	int: 0	number
bottom	int: 0	number
left	int: 0	number
right	int: 0	number
flex	int: 0	number
flex_basis	int: 0	number
flex_grow	int: 0	number
flex_shrink	int: 0	number
direction	string: 'row'	'column', 'row', 'column-reverse', 'row-reverse'
justify_content	string: 'center'	'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'
align_items	string: 'center'	'stretch', 'flex-start', 'flex-end', 'center', 'baseline'
align_self	string: 'center'	'stretch', 'flex-start', 'flex-end', 'center', 'baseline'
align_content	string: 'center'	'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch'
w	int/string: 'auto'	number, 'auto', percentage
min_w	int/string: 'auto'	number, 'auto', percentage
max_w	int/string: 'auto'	number, 'auto', percentage
h	int/string: 'auto'	number, 'auto', percentage
min_h	int/string: 'auto'	number, 'auto', percentage
max_h	int/string: 'auto'	number, 'auto', percentage
bg	stirng: 'white'	string, color code
opacity	int: 1	number
zindex	int: 0	number

** w = width, h = height, min_w = minWidth, max_w = maxWidth, min_h = minHeight, max_h = maxHeight, bg = background

spacing

Function	Description
p(value)	padding = value
p([value1, value2])	paddingTop, paddingBottom = value1 / paddingLeft, paddingRight = value2
p([v1, v2, v3])	paddingTop = v1 / paddingLeft, paddingRight = v2 / paddingBottom = v3
p([v1, v2, v3, v4])	paddingTop = v1 / paddingRight = v2 / paddingBottom = v3 / paddingLeft = v4
px(value)	paddingLeft, paddingRight = value
py(value)	paddingTop, paddingBottom = value
m(value)	margin = value
m([value1, value2])	marginTop, marginBottom = value1 / marginLeft, marginRight = value2
m([v1, v2, v3])	marginTop = v1 / marginLeft, marginRight = v2 / marginBottom = v3
m([v1, v2, v3, v4])	marginTop = v1 / marginRight = v2 / marginBottom = v3 / marginLeft = v4
mx(value)	marginLeft, marginRight = value
my(value)	marginTop, marginBottom = value

** spacing default value is 0

text

Function	Description	Value
text_color(string: 'black')	color	color code
text_fs(int: 14)	fontSize	number
text_align(string: 'left')	alignment	'auto', 'left', 'right', 'center', 'justify'
text_center	alignment	return 'center'
text_left	alignment	return 'left'
text_right	alignment	return 'right'
text_justify	alignment	return 'justify'
text_deco(string: 'none')	textDecorationLine	'none', 'underline', 'line-through', 'underline line-through'
text_under	textDecorationLine	return 'underline'
text_throught	textDecorationLine	return 'line-through'
text_lh(int: 0)	lineHeight	number
text_fw(int: 0)	fontWeight	number
text_ls(int: 0)	letterSpacing	number
text_italic	fontStyle	return 'italic'
text_bold	fontWeight	return 'bold'
text_transform(string: 'none')	textTransform	'none', 'uppercase', 'lowercase', 'capitalize'
text_uppercase	textTransform	return 'uppercase'
text_lowercase	textTransform	return 'lowercase'
text_capitalize	textTransform	return 'capitalize'

border

Function	Description
border(int: 1, string: 'solid', string: 'gainsboro')	borderWidth, borderStyle, borderColor
border_left(int: 1, string: 'solid', string: 'gainsboro')	borderWidth, borderStyle, borderLeftColor
border_right(int: 1, string: 'solid', string: 'gainsboro')	borderWidth, borderStyle, borderRightColor
border_top(int: 1, string: 'solid', string: 'gainsboro')	borderWidth, borderStyle, borderTopColor
border_bottom(int: 1, string: 'solid', string: 'gainsboro')	borderWidth, borderStyle, borderBottomColor
shaodw(string: 'black', int: 3, int: 3)	shadowColor, width, height
border(string: 'black')	borderColor

License

MIT