feat dark theme

App.tsx

@@ -10,23 +10,24 @@ import {
 import CountryPicker from './src/'
 import { CountryCode, Country } from './src/types'
 import { Row } from './src/Row'
+import { DARK_THEME } from './src/CountryTheme'
 
 const styles = StyleSheet.create({
   container: {
-    paddingVertical: 15,
+    paddingVertical: 10,
     justifyContent: 'center',
     alignItems: 'center'
   },
   welcome: {
-    fontSize: 20,
+    fontSize: 17,
     textAlign: 'center',
-    margin: 10
+    margin: 5
   },
   instructions: {
-    fontSize: 12,
+    fontSize: 10,
     textAlign: 'center',
     color: '#888',
-    marginBottom: 5
+    marginBottom: 0
   },
   data: {
     padding: 10,
@@ -69,6 +70,7 @@ export default function App() {
   const [withCurrency, setWithCurrency] = useState<boolean>(false)
   const [withModal, setWithModal] = useState<boolean>(true)
   const [visible, setVisible] = useState<boolean>(false)
+  const [dark, setDark] = useState<boolean>(false)
   const onSelect = (country: Country) => {
     setCountryCode(country.cca2)
     setCountry(country)
@@ -123,8 +125,10 @@ export default function App() {
         value={withModal}
         onValueChange={setWithModal}
       />
+      <Option title="With dark theme" value={dark} onValueChange={setDark} />
       <CountryPicker
         translation="ita"
+        theme={dark ? DARK_THEME : undefined}
         {...{
           countryCode,
           withFilter,

src/CloseButton.tsx

@@ -12,6 +12,7 @@ import {
   StyleSheet
 } from 'react-native'
 import PropTypes from 'prop-types'
+import { useTheme } from './CountryTheme'
 
 const styles = StyleSheet.create({
   container: {
@@ -40,7 +41,7 @@ const CloseButtonAndroid = (props: CloseButtonProps) => {
   if (props.image) {
     closeImage = props.image
   }
-
+  const { onBackgroundTextColor } = useTheme()
   return (
     <View style={[styles.container, props.style]}>
       <TouchableNativeFeedback
@@ -54,7 +55,11 @@ const CloseButtonAndroid = (props: CloseButtonProps) => {
         <View>
           <Image
             source={closeImage}
-            style={[styles.imageStyle, props.imageStyle]}
+            style={[
+              styles.imageStyle,
+              props.imageStyle,
+              { tintColor: onBackgroundTextColor }
+            ]}
           />
         </View>
       </TouchableNativeFeedback>
@@ -68,13 +73,17 @@ const CloseButtonIOS = (props: CloseButtonProps) => {
   if (props.image) {
     closeImage = props.image
   }
-
+  const { onBackgroundTextColor } = useTheme()
   return (
     <View style={[styles.container, props.style]}>
       <TouchableOpacity onPress={props.onPress}>
         <Image
           source={closeImage}
-          style={[styles.imageStyle, props.imageStyle]}
+          style={[
+            styles.imageStyle,
+            props.imageStyle,
+            { tintColor: onBackgroundTextColor }
+          ]}
         />
       </TouchableOpacity>
     </View>

src/CountryList.tsx

@@ -161,8 +161,10 @@ interface CountryListProps {
 const keyExtractor = (item: Country) => item.cca2
 
 const ItemSeparatorComponent = () => {
-  const { primaryColor } = useTheme()
-  return <View style={[styles.sep, { borderBottomColor: primaryColor }]} />
+  const { primaryColorVariant } = useTheme()
+  return (
+    <View style={[styles.sep, { borderBottomColor: primaryColorVariant }]} />
+  )
 }
 
 export const CountryList = (props: CountryListProps) => {

src/CountryTheme.ts

@@ -17,6 +17,14 @@ export const DEFAULT_THEME = {
   activeOpacity: 0.5,
   itemHeight: getHeightPercent(7)
 }
+export const DARK_THEME = {
+  ...DEFAULT_THEME,
+  primaryColor: '#222',
+  primaryColorVariant: '#444',
+  backgroundColor: '#000',
+  onBackgroundTextColor: '#fff',
+  filterPlaceholderTextColor: '#eee'
+}
 export type Theme = Partial<typeof DEFAULT_THEME>
 
 const { ThemeProvider, useTheme } = createTheming<Theme>(DEFAULT_THEME)