1.0.4 • Published 3 years ago
react-native-cryptos-picker
Various cryptos picker for iOS and Android
Demo
Getting started
$ npm install react-native-cryptos-picker --save
OR
$ yarn add react-native-cryptos-picker
Example
import CryptosPicker from "react-native-cryptos-picker";
let cryptosPickerRef = undefined;
// use cryptosPickerRef
cryptosPickerRef.open();
cryptosPickerRef.close();
<CryptosPicker
cryptosPickerRef={(ref) => {
cryptosPickerRef = ref;
}}
enable={true}
darkMode={false}
cryptoSymbol={"USDT"}
showFlag={true}
showCryptoName={true}
showCryptoSymbol={true}
onSelectCryptos={(data) => {
console.log("DATA", data);
}}
onOpen={() => {
console.log("Open");
}}
onClose={() => {
console.log("Close");
}}
containerStyle={{
container: {},
flagWidth: 25,
cryptoSymbolStyle: {},
cryptoNameStyle: {}
}}
modalStyle={{
container: {},
searchStyle: {},
tileStyle: {},
itemStyle: {
itemContainer: {},
flagWidth: 25,
cryptoSymbolStyle: {},
cryptoNameStyle: {}
},
}}
title={"Cryptos"}
searchPlaceholder={"Search"}
showCloseButton={true}
showModalTitle={true}
/>
);
Options
| Props | Default | Options/Info |
|---|
| enable (Boolean) | true | Show component that choose the cryptos. |
| cryptosPickerRef (Function) | null | Get the open() and close() modal methods. |
| darkMode (Boolean) | true | Dark mode for cryptos modal. |
| countryCode (String) | US | Country code displayed is selected at start. |
| onSelectCryptos (Function) | null | Called when the user chooses a crypto and returns information for the selected crypto. |
| onOpen (Function) | null | Called when the open modal. |
| onClose (Function) | null | Called when the close modal. |
| showFlag (Boolean) | true | Show the icon of the crypto. |
| showCryptoName (Boolean) | true | Show the name of the crypto. |
| showCryptoSymbol (Boolean) | true | Show the symbol of the crypto. |
| title (String) | "Country" | The title of the modal select cryptos. |
| showCloseButton (Boolean) | true | Show the close button of the modal select cryptos. |
| showModalTitle (Boolean) | true | Show the title of the modal select cryptos. |
| containerStyle (Object) | null | Style for component that choose the cryptos. Note: See more details below. |
| modalStyle (Object) | null | Style for modal select cryptos. Note: See more details below. |
| renderChildren (Component) | null | The child component replaces the component element of the library |
containerStyle
| Props | Default | Options/Info |
|---|
| container (Object) | style | Style for component container. |
| flagWidth (number) | 25 | width for the icon crypto. |
| cryptoSymbolStyle (Object) | style | Style for cryptos symbol. |
| cryptoNameStyle (Object) | style | Style for cryptos name. |
modalStyle
| Props | Default | Options/Info |
|---|
| container (Object) | style | Style for modal container |
| searchStyle (Object) | style | Style for modal search input |
| tileStyle (Object) | style | Style for modal title |
| itemStyle (Object) | style | Style for item select cryptos Note: See more details below. |
itemStyle
| Props | Default | Options/Info |
|---|
| itemContainer (Object) | style | Style for item crypto container |
| flagWidth (number) | 25 | width for the icon crypto. |
| cryptoSymbolStyle (Object) | style | Style for crypto symbol. |
| cryptoNameStyle (Object) | style | Style for crypto name. |
Thank you for your interest!