react-native-country-picker-modal/src/CloseButton.tsx at 19ee835f14b9f471628afc8a5e5df9e2a630b7e0 · xcarpentier/react-native-country-picker-modal · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import React from 'react'
import {
  Image,
  ImageSourcePropType,
  ImageStyle,
  Platform,
  StyleProp,
  StyleSheet,
  TouchableNativeFeedback,
  TouchableOpacity,
  View,
  ViewStyle,
} from 'react-native'
import { useTheme } from './CountryTheme'

const styles = StyleSheet.create({
  container: {
    height: 48,
    width: '15%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  imageStyle: {
    height: 25,
    width: 25,
    resizeMode: 'contain',
  },
})

interface CloseButtonProps {
  style?: StyleProp<ViewStyle>
  imageStyle?: StyleProp<ImageStyle>
  image?: ImageSourcePropType
  onPress?: () => void
}

const CloseButtonAndroid: React.FC<CloseButtonProps> = (props) => {
  let closeImage: ImageSourcePropType = require('./assets/images/close.android.png')

  if (props.image) {
    closeImage = props.image
  }
  const { onBackgroundTextColor } = useTheme()
  return (
    <View style={[styles.container, props.style]}>
      <TouchableNativeFeedback
        background={
          typeof Platform.Version === 'number' && Platform.Version < 21
            ? TouchableNativeFeedback.SelectableBackground()
            : TouchableNativeFeedback.SelectableBackgroundBorderless()
        }
        onPress={props.onPress}
      >
        <View>
          <Image
            source={closeImage}
            style={[
              styles.imageStyle,
              props.imageStyle,
              { tintColor: onBackgroundTextColor },
            ]}
          />
        </View>
      </TouchableNativeFeedback>
    </View>
  )
}

const CloseButtonIOS: React.FC<CloseButtonProps> = (props) => {
  let closeImage = require('./assets/images/close.ios.png')

  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,
            { tintColor: onBackgroundTextColor },
          ]}
        />
      </TouchableOpacity>
    </View>
  )
}

export default Platform.select({
  ios: CloseButtonIOS,
  android: CloseButtonAndroid,
  web: CloseButtonIOS,
  default: CloseButtonIOS,
})