fix missed theme

trooperandz · Oct 10, 2019 · 0736bc0 · 0736bc0
1 parent 3b81c21
commit 0736bc0
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 30 deletions.
diff --git a/__tests__/__snapshots__/CountryPicker.test.tsx.snap b/__tests__/__snapshots__/CountryPicker.test.tsx.snap
@@ -140,12 +140,16 @@ Array [
       </View>
       <View
         style={
-          Object {
-            "backgroundColor": "white",
-            "flex": 1,
-            "flexDirection": "row",
-            "justifyContent": "space-between",
-          }
+          Array [
+            Object {
+              "flex": 1,
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+            },
+            Object {
+              "backgroundColor": "#ffffff",
+            },
+          ]
         }
       >
         <RCTScrollView

diff --git a/src/CountryList.tsx b/src/CountryList.tsx
@@ -5,7 +5,6 @@ import {
   FlatList,
   ScrollView,
   TouchableOpacity,
-  Text,
   ListRenderItemInfo,
   PixelRatio,
   FlatListProps
@@ -14,15 +13,15 @@ import { useTheme } from './CountryTheme'
 import { Country, Omit } from './types'
 import { Flag } from './Flag'
 import { useContext } from './CountryContext'
+import { CountryText } from './CountryText'
 
 const borderBottomWidth = 2 / PixelRatio.get()
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     flexDirection: 'row',
-    justifyContent: 'space-between',
-    backgroundColor: 'white'
+    justifyContent: 'space-between'
   },
   letters: {
     marginRight: 10,
@@ -62,7 +61,7 @@ interface LetterProps {
   scrollTo(letter: string): void
 }
 const Letter = ({ letter, scrollTo }: LetterProps) => {
-  const { fontFamily, fontSize, activeOpacity } = useTheme()
+  const { fontSize, activeOpacity } = useTheme()
   return (
     <TouchableOpacity
       testID={`letter-${letter}`}
@@ -71,12 +70,12 @@ const Letter = ({ letter, scrollTo }: LetterProps) => {
       {...{ activeOpacity }}
     >
       <View style={styles.letter}>
-        <Text
-          style={[styles.letterText, { fontFamily, fontSize: fontSize! * 0.8 }]}
+        <CountryText
+          style={[styles.letterText, { fontSize: fontSize! * 0.8 }]}
           allowFontScaling={false}
         >
           {letter}
-        </Text>
+        </CountryText>
       </View>
     </TouchableOpacity>
   )
@@ -91,7 +90,7 @@ interface CountryItemProps {
   onSelect(country: Country): void
 }
 const CountryItem = (props: CountryItemProps) => {
-  const { activeOpacity, fontSize, fontFamily, itemHeight } = useTheme()
+  const { activeOpacity, itemHeight } = useTheme()
   const {
     country,
     onSelect,
@@ -121,15 +120,14 @@ const CountryItem = (props: CountryItemProps) => {
       <View style={[styles.itemCountry, { height: itemHeight }]}>
         {withFlag && <Flag {...{ withEmoji, countryCode: country.cca2 }} />}
         <View style={styles.itemCountryName}>
-          <Text
-            style={{ fontFamily, fontSize }}
+          <CountryText
             allowFontScaling={false}
             numberOfLines={2}
             ellipsizeMode="tail"
           >
             {country.name}
             {extraContent.length > 0 && ` (${extraContent.join(', ')})`}
-          </Text>
+          </CountryText>
         </View>
       </View>
     </TouchableOpacity>
@@ -182,7 +180,7 @@ export const CountryList = (props: CountryListProps) => {
   } = props
   const flatListRef = useRef<FlatList<Country>>(null)
   const [letter, setLetter] = useState<string>('')
-  const { itemHeight } = useTheme()
+  const { itemHeight, backgroundColor } = useTheme()
   const indexLetter = data
     .map((country: Country) => (country.name as string).substr(0, 1))
     .join('')
@@ -211,7 +209,7 @@ export const CountryList = (props: CountryListProps) => {
   }, [filterFocus])
   const { search, getLetters } = useContext()
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, { backgroundColor }]}>
       <FlatList
         onScrollToIndexFailed
         ref={flatListRef}

diff --git a/src/CountryText.tsx b/src/CountryText.tsx
@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react'
+import { TextProps, Text } from 'react-native'
+import { useTheme } from './CountryTheme'
+
+export const CountryText = (props: TextProps & { children: ReactNode }) => {
+  const { fontFamily, fontSize, onBackgroundTextColor } = useTheme()
+  return (
+    <Text
+      {...props}
+      style={{ fontFamily, fontSize, color: onBackgroundTextColor }}
+    />
+  )
+}
diff --git a/src/CountryTheme.ts b/src/CountryTheme.ts
@@ -14,7 +14,7 @@ export const DEFAULT_THEME = {
     web: 'Arial'
   }),
   filterPlaceholderTextColor: '#aaa',
-  activeOpacity: 0.7,
+  activeOpacity: 0.5,
   itemHeight: getHeightPercent(7)
 }
 export type Theme = Partial<typeof DEFAULT_THEME>

diff --git a/src/Flag.tsx b/src/Flag.tsx
@@ -56,6 +56,7 @@ const ImageFlag = memo(({ countryCode }: FlagType) => {
 
 const EmojiFlag = memo(({ countryCode }: FlagType) => {
   const { getEmojiFlag } = useContext()
+
   return (
     <Text style={styles.emojiFlag} allowFontScaling={false}>
       <Emoji name={getEmojiFlag(countryCode)} />

diff --git a/src/FlagButton.tsx b/src/FlagButton.tsx
@@ -1,15 +1,10 @@
 import React, { memo } from 'react'
-import {
-  TouchableOpacity,
-  StyleSheet,
-  View,
-  Text,
-  Platform
-} from 'react-native'
+import { TouchableOpacity, StyleSheet, View, Platform } from 'react-native'
 import { CountryCode } from './types'
 import { Flag } from './Flag'
 import { useContext } from './CountryContext'
 import { getCountryCallingCode } from './CountryService'
+import { CountryText } from './CountryText'
 
 const styles = StyleSheet.create({
   container: {
@@ -57,13 +52,17 @@ const FlagWithSomething = memo(
       <View style={styles.flagWithSomethingContainer}>
         <Flag {...{ withEmoji, countryCode }} />
         {countryName ? (
-          <Text style={styles.something}>{countryName + ' '}</Text>
+          <CountryText style={[styles.something]}>
+            {countryName + ' '}
+          </CountryText>
         ) : null}
         {currency ? (
-          <Text style={styles.something}>{`(${currency}) `}</Text>
+          <CountryText style={styles.something}>{`(${currency}) `}</CountryText>
         ) : null}
         {callingCode ? (
-          <Text style={styles.something}>{`+${callingCode}`}</Text>
+          <CountryText
+            style={styles.something}
+          >{`+${callingCode}`}</CountryText>
         ) : null}
       </View>
     )