Installation

Add the dependency:

npm i @paraboly/react-native-button

Peer Dependencies

IMPORTANT! You need install them

"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
"react-native-androw": ">= 0.0.34",
"react-native-spinkit": ">= 1.5.0",

Usage

Import

import Button from "@paraboly/react-native-button";

Basic Usage

<Button onPress={() => {}} />

Advanced Usage

You can simply npm i and react-native run-ios/android on example to run the it.

import React, { useState } from "react";
import { StatusBar, SafeAreaView } from "react-native";
import Button from "./lib/Button";

const App = () => {
  const [spinnerVisibility, setSpinnerVisibility] = useState(false);
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView
        style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
      >
        <Button
          width={300}
          spinnerEnable
          text="Confirm"
          spinnerVisibility={spinnerVisibility}
          onPress={() => {
            setSpinnerVisibility(true);
            setTimeout(() => setSpinnerVisibility(false), 1250);
          }}
        />
      </SafeAreaView>
    </>
  );
};

export default App;

Configuration - Props

| Property | Type | Default | Description | | ----------------- | :-------: | :-------: | --------------------------------------------------------- | | text | string | Confirm | change the button's centered text | | onPress | function | undefined | set your own functionality when button is pressed | | width | number | 150 | change the button's width | | height | number | 40 | change the button's height | | backgroundColor | color | #059 | change the button's backgroundColor | | spinnerEnable | boolean | false | enable it if you want to use the built-in spinner feature | | spinnerVisibility | boolean | false | manage the spinner visibility | | TextComponent | component | Text | set your own Text component |

Author

FreakyCoder, [email protected]

License

React Native Built-in Spinner Button is available under the MIT license. See the LICENSE file for more info.