places-react-native/SegmentedControl.js at master · perfectsimulation/places-react-native · 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
import React, { useState } from 'react';
import {
  View,
  Pressable,
  Image,
  StyleSheet
} from 'react-native';

const SegmentedControl = (props) => {

  const { segments } = props;
  const [activeSegment, setActiveSegment] = useState(0);

  const renderSegment = (segment, index) => (
    <Pressable
      key={index}
      onPress={() => {
        setActiveSegment(index);
        segment.onPress();
      }}
      style={
        activeSegment === index
          ? styles.selectedSegment
          : styles.segment
      }
    >
      <View style={styles.iconContainer}>
        <Image
          style={styles.icon}
          source={segment.source}
        />
      </View>
    </Pressable>
  );

  return (
    <View style={styles.container}>
      {segments.map((segment, index) => {
        return renderSegment(segment, index);
      })}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-around',
    display: 'flex',
    // backgroundColor: '#8833ee55'
  },
  segment: {
    borderWidth: 0.5,
    borderColor: '#ffffff22',
    borderColor: 'transparent',
    paddingVertical: 4,
    justifyContent: 'center',
    alignItems: 'center',
    // backgroundColor: '#00000044',
    flex: 1,
  },
  selectedSegment: {
    borderWidth: 0.5,
    borderColor: '#ffffff22',
    paddingVertical: 4,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff11',
    flex: 1,
  },
  iconContainer: {
    height: 40,
    width: 40,
    justifyContent: 'center',
    alignItems: 'center',
    display: 'flex'
  },
  icon: {
    height: 28,
    width: 28
  }
});

SegmentedControl.defaultProps = {
  segments: []
};

export default SegmentedControl;