Skip to content

Commit 601ac5a

Browse files
mrflipmrflip
committed
chore: bump version, add contributor names
1 parent d4c6a07 commit 601ac5a

File tree

5 files changed

+133
-202
lines changed

5 files changed

+133
-202
lines changed

‎App.tsx‎

Lines changed: 115 additions & 196 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,27 @@
11
import React, { useState } from 'react'
2-
import {
3-
Text,
4-
StyleSheet,
5-
PixelRatio,
6-
Switch,
7-
Button,
8-
Pressable,
9-
ScrollView,
10-
TextInput,
11-
View
12-
} from 'react-native'
2+
import { Text, StyleSheet, PixelRatio, Switch, Button, Pressable, ScrollView, TextInput, View } from 'react-native'
133
import CountryPicker, { CountryModalProvider, TranslationLanguageCodeList } from './src/'
144
import { CountryCode, Country } from './src/types'
155
import { Row } from './src/Row'
166
import { DARK_THEME } from './src/CountryTheme'
177

188
const styles = StyleSheet.create({
19-
mainBox: {
20-
paddingVertical: 10,
21-
justifyContent: 'space-between',
22-
alignItems: 'center',
23-
flex: 1,
24-
},
25-
container: {
26-
paddingVertical: 10,
27-
justifyContent: 'space-between',
28-
alignItems: 'center',
29-
},
30-
welcome: {
31-
fontSize: 17,
32-
textAlign: 'center',
33-
marginHorizontal: 5,
34-
marginVertical: 10
35-
},
36-
heading: {
37-
fontSize: 17,
38-
textAlign: 'center',
39-
marginHorizontal: 5,
40-
marginVertical: 10
41-
},
42-
instructions: {
43-
fontSize: 10,
44-
textAlign: 'center',
45-
color: '#888',
46-
marginBottom: 5,
47-
paddingHorizontal: 15
48-
},
49-
data: {
50-
// maxWidth: 250,
51-
padding: 10,
52-
marginTop: 7,
53-
backgroundColor: '#ddd',
54-
borderColor: '#888',
55-
borderWidth: 1 / PixelRatio.get(),
56-
color: '#777',
57-
},
58-
button: {
59-
paddingVertical: 5,
60-
paddingHorizontal: 10,
61-
backgroundColor: '#cfd4e7',
62-
marginHorizontal: 4
63-
},
9+
mainBox: { paddingVertical: 10, justifyContent: 'space-between', alignItems: 'center', flex: 1, },
10+
container: { paddingVertical: 10, justifyContent: 'space-between', alignItems: 'center', },
11+
button: { paddingVertical: 5, paddingHorizontal: 10, marginHorizontal: 4, backgroundColor: '#cfd4e7' },
12+
countryPickerBox: { maxHeight: '30%', paddingVertical: 5, paddingHorizontal: 10, backgroundColor: '#eee' },
13+
optionsBox: { maxHeight: '30%', marginVertical: 10, borderColor: '#abc', borderWidth: 1 / PixelRatio.get() },
14+
dataBox: { flex: 1, width: '90%', marginHorizontal: 5, borderWidth: 1 / PixelRatio.get() },
15+
textEntryBox: { flex: 1, padding: 5, marginLeft: 20, flexDirection: 'row', justifyContent: 'flex-start' },
16+
buttonsBox: { flexDirection: 'row', marginTop: 2 },
6417
//
65-
textEntryLabel: { flex: 2, width: "25%" },
66-
textEntryBox: { flex: 1, flexDirection: 'row', justifyContent: 'flex-start', padding: 5, marginLeft: 20 },
67-
textEntryInput: { flex: 3, marginLeft: 2 },
18+
welcome: { fontSize: 17, textAlign: 'center', marginHorizontal: 5, marginVertical: 10, },
19+
heading: { fontSize: 17, textAlign: 'center', marginHorizontal: 5, marginVertical: 10, },
20+
instructions: { fontSize: 10, textAlign: 'center', color: '#888', marginBottom: 5, paddingHorizontal: 15, },
21+
data: { padding: 10, marginTop: 7, backgroundColor: '#ddd', borderColor: '#888', borderWidth: 1 / PixelRatio.get(), color: '#777' },
6822
//
69-
countryPickerBox: { paddingVertical: 5, paddingHorizontal: 10, backgroundColor: '#eee', maxHeight: "30%" },
70-
optionsBox: { maxHeight: "30%", marginVertical: 10, borderColor: '#abc', borderWidth: 1 },
71-
dataBox: { flex: 1, width: "90%", marginHorizontal: 5, borderWidth: 1 },
72-
buttonsBox: { flexDirection: 'row', marginTop: 2 }
23+
textEntryLabel: { flex: 2, width: '25%' },
24+
textEntryInput: { flex: 3, marginLeft: 2 },
7325
//
7426
})
7527

@@ -105,156 +57,123 @@ export default function App() {
10557
const [fontScaling, setFontScaling] = useState<boolean>(true)
10658
const [disableNativeModal, setDisableNativeModal] = useState<boolean>(false)
10759

108-
const [preferredCountriesStr, setPreferredCountriesStr] = useState<string>('UA')
109-
const [excludeCountriesStr, setExcludeCountriesStr] = useState<string>('RU')
60+
const [preferredCountriesStr, setPreferredCountriesStr] = useState<string>('UA')
61+
const [excludeCountriesStr, setExcludeCountriesStr] = useState<string>('RU')
11062
const [translation, setTranslation] = useState<string>(null)
11163

112-
const resetCountry = () => { setCountry(null); setCountryCode(null) }
64+
const resetCountry = () => {
65+
setCountry(null)
66+
setCountryCode(null)
67+
}
11368
const onSelect = (country: Country) => {
11469
setCountryCode(country.cca2)
11570
setCountry(country)
11671
}
11772
const switchVisible = () => setVisible(!visible)
11873

119-
const excludeCountries = excludeCountriesStr.toUpperCase().trim().split(/\W+/)
74+
const excludeCountries = excludeCountriesStr.toUpperCase().trim().split(/\W+/)
12075
const preferredCountries = preferredCountriesStr.toUpperCase().trim().split(/\W+/)
12176

12277
return (
12378
<CountryModalProvider>
124-
<View style={styles.mainBox}>
125-
<Text style={styles.welcome}>Welcome to Country Picker !</Text>
126-
<Text style={styles.instructions}>Press on the flag/placeholder to open modal:</Text>
127-
128-
<View style={styles.countryPickerBox}>
129-
<CountryPicker
130-
theme={dark ? DARK_THEME : {}}
131-
{...{
132-
allowFontScaling: fontScaling,
133-
countryCode,
134-
withFilter,
135-
excludeCountries,
136-
withFlag,
137-
withCurrencyButton,
138-
withCallingCodeButton,
139-
withCountryNameButton,
140-
withLetterScroller,
141-
withCallingCode,
142-
withCurrency,
143-
withEmoji,
144-
withModal,
145-
withFlagButton,
146-
onSelect,
147-
disableNativeModal,
148-
preferredCountries,
149-
translation,
150-
modalProps: {
151-
visible,
152-
},
153-
onClose: () => setVisible(false),
154-
onOpen: () => setVisible(true),
155-
placeholder: '(-country-)',
156-
}}
157-
/>
158-
</View>
79+
<View style={styles.mainBox}>
80+
<Text style={styles.welcome}>Welcome to Country Picker !</Text>
81+
<Text style={styles.instructions}>Press on the flag/placeholder to open modal:</Text>
15982

160-
<View style={styles.optionsBox}>
161-
<ScrollView>
162-
<Text style={styles.heading}>Options:</Text>
163-
<View style={styles.textEntryBox}>
164-
<Text style={styles.textEntryLabel}>Preferred Countries: </Text>
165-
<TextInput style={styles.textEntryInput}value={preferredCountriesStr} onChangeText={setPreferredCountriesStr} />
83+
<View style={styles.countryPickerBox}>
84+
<CountryPicker
85+
theme={dark ? DARK_THEME : {}}
86+
{...{
87+
allowFontScaling: fontScaling,
88+
countryCode,
89+
withFilter,
90+
excludeCountries,
91+
withFlag,
92+
withCurrencyButton,
93+
withCallingCodeButton,
94+
withCountryNameButton,
95+
withLetterScroller,
96+
withCallingCode,
97+
withCurrency,
98+
withEmoji,
99+
withModal,
100+
withFlagButton,
101+
onSelect,
102+
disableNativeModal,
103+
preferredCountries,
104+
translation,
105+
modalProps: {
106+
visible,
107+
},
108+
onClose: () => setVisible(false),
109+
onOpen: () => setVisible(true),
110+
placeholder: '(-country-)',
111+
}}
112+
/>
166113
</View>
167-
<View style={styles.textEntryBox}>
168-
<Text style={styles.textEntryLabel}>Exclude Countries: </Text>
169-
<TextInput style={styles.textEntryInput}value={excludeCountriesStr} onChangeText={setExcludeCountriesStr} />
170-
</View>
171-
<View style={styles.textEntryBox}>
172-
<Text style={styles.textEntryLabel}>Translation:</Text>
173-
<TextInput style={styles.textEntryInput} autoCorrect={false} value={translation} onChangeText={setTranslation} />
114+
115+
<View style={styles.optionsBox}>
116+
<ScrollView>
117+
<Text style={styles.heading}>Options:</Text>
118+
<View style={styles.textEntryBox}>
119+
<Text style={styles.textEntryLabel}>Preferred Countries: </Text>
120+
<TextInput
121+
style={styles.textEntryInput}
122+
value={preferredCountriesStr}
123+
onChangeText={setPreferredCountriesStr}
124+
autoCapitalize='characters'
125+
/>
126+
</View>
127+
<View style={styles.textEntryBox}>
128+
<Text style={styles.textEntryLabel}>Exclude Countries: </Text>
129+
<TextInput
130+
style={styles.textEntryInput}
131+
value={excludeCountriesStr}
132+
onChangeText={setExcludeCountriesStr}
133+
autoCapitalize='characters'
134+
/>
135+
</View>
136+
<View style={styles.textEntryBox}>
137+
<Text style={styles.textEntryLabel}>Translation:</Text>
138+
<TextInput style={styles.textEntryInput} autoCorrect={false} value={translation} onChangeText={setTranslation} autoCapitalize='none' />
139+
</View>
140+
<Text style={styles.instructions}>{TranslationLanguageCodeList.join(' / ')}</Text>
141+
<Text style={styles.instructions}>
142+
ex: {excludeCountries.join('|')} pr: {preferredCountries.join('|')}
143+
</Text>
144+
<Option title='Show country name on button' value={withCountryNameButton} onValueChange={setWithCountryNameButton} />
145+
<Option title='Show currency on button' value={withCurrencyButton} onValueChange={setWithCurrencyButton} />
146+
<Option title='Show calling code on button' value={withCallingCodeButton} onValueChange={setWithCallingCodeButton} />
147+
<Option title='Show flag on button' value={withFlagButton} onValueChange={setWithFlagButton} />
148+
<Option title='With font scaling' value={fontScaling} onValueChange={setFontScaling} />
149+
<Option title='Use emoji (not image) flags' value={withEmoji} onValueChange={setWithEmoji} />
150+
<Option title='Provide type-to-filter entry' value={withFilter} onValueChange={setWithFilter} />
151+
<Option title='Show flag in picker' value={withFlag} onValueChange={setWithFlag} />
152+
<Option title='Show calling code in picker' value={withCallingCode} onValueChange={setWithCallingCode} />
153+
<Option title='Show currency in picker' value={withCurrency} onValueChange={setWithCurrency} />
154+
<Option title='Show letter scroller on right' value={withLetterScroller} onValueChange={setWithLetterScroller} />
155+
<Option title='Without native modal' value={disableNativeModal} onValueChange={setDisableNativeModal} />
156+
<Option title='With modal' value={withModal} onValueChange={setWithModal} />
157+
<Option title='With dark theme' value={dark} onValueChange={setDark} />
158+
</ScrollView>
174159
</View>
175-
<Text style={styles.instructions}>One of: {TranslationLanguageCodeList.join(' / ')}</Text>
176-
<Text style={styles.instructions}>ex: {excludeCountries.join('|')} pr: {preferredCountries.join('|')}</Text>
177-
<Option
178-
title='Show country name on button'
179-
value={withCountryNameButton}
180-
onValueChange={setWithCountryNameButton}
181-
/>
182-
<Option
183-
title='Show currency on button'
184-
value={withCurrencyButton}
185-
onValueChange={setWithCurrencyButton}
186-
/>
187-
<Option
188-
title='Show calling code on button'
189-
value={withCallingCodeButton}
190-
onValueChange={setWithCallingCodeButton}
191-
/>
192-
<Option
193-
title='Show flag on button'
194-
value={withFlagButton}
195-
onValueChange={setWithFlagButton}
196-
/>
197-
<Option
198-
title='With font scaling'
199-
value={fontScaling}
200-
onValueChange={setFontScaling}
201-
/>
202-
<Option
203-
title='Use emoji (not image) flags'
204-
value={withEmoji}
205-
onValueChange={setWithEmoji}
206-
/>
207-
<Option
208-
title='Provide type-to-filter entry'
209-
value={withFilter}
210-
onValueChange={setWithFilter}
211-
/>
212-
<Option
213-
title='Show flag in picker'
214-
value={withFlag}
215-
onValueChange={setWithFlag}
216-
/>
217-
<Option
218-
title='Show calling code in picker'
219-
value={withCallingCode}
220-
onValueChange={setWithCallingCode}
221-
/>
222-
<Option
223-
title='Show currency in picker'
224-
value={withCurrency}
225-
onValueChange={setWithCurrency}
226-
/>
227-
<Option
228-
title='Show letter scroller on right'
229-
value={withLetterScroller}
230-
onValueChange={setWithLetterScroller}
231-
/>
232-
<Option
233-
title='Without native modal'
234-
value={disableNativeModal}
235-
onValueChange={setDisableNativeModal}
236-
/>
237-
<Option
238-
title='With modal'
239-
value={withModal}
240-
onValueChange={setWithModal}
241-
/>
242-
<Option title='With dark theme' value={dark} onValueChange={setDark} />
243-
</ScrollView>
244-
</View>
245160

246-
<View style={styles.dataBox}>
247-
<ScrollView>
248-
<Text style={styles.heading}>Result:</Text>
249-
<Text style={styles.data}>{JSON.stringify(country, null, 2)}</Text>
250-
</ScrollView>
251-
</View>
161+
<View style={styles.dataBox}>
162+
<ScrollView>
163+
<Text style={styles.heading}>Result:</Text>
164+
<Text style={styles.data}>{JSON.stringify(country, null, 2)}</Text>
165+
</ScrollView>
166+
</View>
252167

253-
<View style={styles.buttonsBox}>
254-
<Pressable onPress={resetCountry} style={styles.button}><Text>Reset Country</Text></Pressable>
255-
<Pressable onPress={switchVisible} style={styles.button}><Text>Open Modal Picker</Text></Pressable>
256-
</View>
257-
</View>
168+
<View style={styles.buttonsBox}>
169+
<Pressable onPress={resetCountry} style={styles.button}>
170+
<Text>Reset Country</Text>
171+
</Pressable>
172+
<Pressable onPress={switchVisible} style={styles.button}>
173+
<Text>Open Modal Picker</Text>
174+
</Pressable>
175+
</View>
176+
</View>
258177
</CountryModalProvider>
259178
)
260179
}

‎README.md‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -140,11 +140,19 @@ export default function App() {
140140
- `disableNativeModal?`: boolean (you have to wrap your all app with CountryModalProvider)
141141
- `preferredCountries`: [CountryCode](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/types.ts#L254) preferred countries they appear first (`withAlphaFilter` must be false)
142142

143+
### Caveats
144+
145+
Dynamically changing the translation, excludeCountries, and some other
146+
props that affect the country list may give inconsistent results. In
147+
particular, the search index is only calculated on first use and so
148+
the changes to new language or different excluded countries will be
149+
inconsistent.
150+
143151
## Dark theme example
144152

145-
<p align="center">
146-
<img alt="react-native-country-picker-modal-dark" src="https://user-images.githubusercontent.com/2692166/40585272-094f817a-61b0-11e8-9668-abff0aeddb0e.png" width=150>
147-
</p>
153+
<p align="center"> <img alt="react-native-country-picker-modal-dark"
154+
src="https://user-images.githubusercontent.com/2692166/40585272-094f817a-61b0-11e8-9668-abff0aeddb0e.png"
155+
width=150> </p>
148156

149157
A simple example to display a `CountryPicker` component with a dark theme.
150158

@@ -181,6 +189,8 @@ YES : It used the world-countries package and image is stored into json and base
181189
## Contribution
182190

183191
- [@xcapentier](mailto:[email protected]) The main author.
192+
- [@kanimetov](https://github.com/kanimetov) -- Arabic and Hebrew translations.
193+
- [@mrflip](https://github.com/mrflip) -- updated to Expo 46 and minor fixes.
184194

185195
## Questions
186196

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-country-picker-modal",
3-
"version": "2.0.0",
3+
"version": "2.1.0",
44
"description": "react-native country picker",
55
"main": "node_modules/expo/AppEntry.js",
66
"types": "lib/index.d.ts",

‎src/CountryPicker.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ export const CountryPicker = (props: CountryPickerProps) => {
183183
.catch(console.warn)
184184

185185
return (() => { cancel = true })
186-
}, [translation, withEmoji])
186+
}, [translation, withEmoji, countryCodes, excludeCountries, preferredCountries])
187187

188188
const searchResult = search(filter, countries) as Country[]
189189
const thwarted = (searchResult.length === 0)

0 commit comments

Comments
 (0)