@chainplatform/country

Swiper

@chainplatform/country support react-native and react-native-web

Install

npm install @chainplatform/country --save

or

yarn add @chainplatform/country

Usage

import React from 'react';
import {CountryPicker} from '@chainplatform/country';

class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
          show: false
        };
    }

  render() {
    return (
      <View style={{flex:1}}>
        <CountryPicker
            show={this.state.show}
            inputPlaceholder={"search_placeholder"}
            searchMessage={"search_no_result"}
            pickerButtonOnPress={(item) => {
                console.log("item ", item);
                this.setState({show: false});
            }}
            style={{
                // Styles for whole modal [View]
                modal: {
                  
                },
                // Styles for modal backdrop [View]
                backdrop: {},
                // Styles for bottom input line [View]
                line: {
                    with: 0,
                    height: 0
                },
                // Styles for list of countries [FlatList]
                itemsList: {
                    
                },
                // Styles for input [TextInput]
                textInput: {
                    
                },
                // Styles for country button [Pressable]
                countryButtonStyles: {
                    
                },
                // Styles for search message [Text]
                searchMessageText: {
                    
                },
                // Styles for search message container [View]
                countryMessageContainer: {},
                // Flag styles [Text]
                flag: {},
                // Dial code styles [Text]
                dialCode: {
                    
                },
                // Country name styles [Text]
                countryName: {
                    
                }
            }}
        />
      </View>
    );
  }
}