kalontech / reactnativecountrycodelist Goto Github PK

<CountryCodeList
                  alphabetListProps={{keyboardShouldPersistTaps: 'always'}}
....... />

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import CountryCodeList from 'react-native-country-code-list';
import { connect } from 'react-redux';
import { selectCountryFunction } from '../../redux/actions/userAction';


class TraddleCountryPicker extends React.Component {
  state = {};

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: '#fff' }}>
        <CountryCodeList
          data={[
            { name: 'india', wow: 'india', code: 91 },
            { name: 'Pakistan', wow: 'Pakistan', code: 91 },
            { name: 'Bangladesh', wow: 'bangladesh', code: 91 }
          ]}
          onClickCell={cellObject => {
            this.props.selectCountry(cellObject);
            this.props.navigation.goBack();
          }}
          renderCell={cellObject => {
            return (
              <View style={styles.renderCellStyle}>
                <Text style={styles.textStyle}>{cellObject.item.name}</Text>
                <Text style={styles.textStyle}>{cellObject.item.code}</Text>
              </View>
            );
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  renderCellStyle: {
    borderWidth: 0.6,
    borderColor: '#efefef',
    height: 40,
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: 10,
    paddingRight: 10
  },
  textStyle: {
    fontSize: 20,
    fontWeight: '500'
  }
});

export default connect(
  state => ({
    user: state.user
  }),
  dispatch => ({
    selectCountry: country => dispatch(selectCountryFunction(country))
  })
)(TraddleCountryPicker);