react-native-eazy-background v1.1.3

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

Props

StyleSheet(css)

most common value return

most common value set

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

spacing

** spacing default value is 0

text

border

License

MIT