Merge pull request #7 from buraksakalli/feature/custom-border

Feature/custom border

Author: buraksakalli

README.md

@@ -17,7 +17,7 @@ A simple select component for React Native.
 - [ ] Add support for placeholder color
 - [ ] Add tests
 - [ ] Add support for custom components
-- [ ] Add support for custom styles
+- [x] Add support for custom styles
 - [ ] Add support for custom placeholder
 - [ ] Add support for validation
 - [ ] GitHub Actions for CI/CD
@@ -52,6 +52,7 @@ const App = () => {
         value={value}
         onChange={(option) => setValue(option)}
         disabledOptions={[options[1]]}
+        borderColor="red"
       />
     </View>
   );
@@ -76,6 +77,7 @@ const App = () => {
 | optionContainerTextStyle | Object   |           | Style object to be applied to the option container text     |
 | optionSelectedStyle      | Object   |           | Style object to be applied to the selected option           |
 | optionSelectedTextStyle  | Object   |           | Style object to be applied to the selected option text      |
+| borderColor              | String   | #999      | Border color of the container                               |
 
 ## Contributing
 

example/ios/Podfile.lock

@@ -623,7 +623,7 @@ PODS:
   - React-jsinspector (0.68.2)
   - React-logger (0.68.2):
     - glog
-  - react-native-select (0.1.1):
+  - react-native-select (0.2.0):
     - RCT-Folly
     - RCTRequired
     - RCTTypeSafety
@@ -904,7 +904,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: b7b553412f2ec768fe6c8f27cd6bafdb9d8719e6
   React-jsinspector: c5989c77cb89ae6a69561095a61cce56a44ae8e8
   React-logger: a0833912d93b36b791b7a521672d8ee89107aff1
-  react-native-select: 91e79136b322658dfce6ea45656073dfd97c9a29
+  react-native-select: c29b2d39ead34427b10172b95f3d563486a9d12b
   React-perflogger: a18b4f0bd933b8b24ecf9f3c54f9bf65180f3fe6
   React-RCTActionSheet: 547fe42fdb4b6089598d79f8e1d855d7c23e2162
   React-RCTAnimation: bc9440a1c37b06ae9ebbb532d244f607805c6034

example/src/App.tsx

@@ -24,6 +24,8 @@ export default function App() {
         onChange={(option) => setValue(option)}
         color="red"
         placeholder="Select your favorite flavor"
+        disabledOptions={[options[1]]}
+        borderColor="red"
       />
       <View style={styles.gap} />
       <Select

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-multi-options",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "A simple select component for React Native.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

src/components/Select/Select.tsx

@@ -12,6 +12,7 @@ export type SelectOption = {
 type ISelect = {
   search?: boolean;
   disabledOptions?: Array<SelectOption>;
+  borderColor?: string;
 };
 
 interface MultipleSelectProps extends ISelect {
@@ -40,6 +41,7 @@ export const Select: React.FC<SelectProps> = ({
   color = 'blue',
   placeholder,
   disabledOptions,
+  borderColor,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [activeColor, setActiveColor] = useState<string>(colorMatch(color));
@@ -74,7 +76,7 @@ export const Select: React.FC<SelectProps> = ({
     <View style={styles.wrapper}>
       <TouchableOpacity
         onBlur={() => setIsOpen(false)}
-        style={styles.container}
+        style={[styles.container, borderColor ? { borderColor } : {}]}
         activeOpacity={0.7}
         onPress={() => setIsOpen((prev) => !prev)}
       >
@@ -101,12 +103,28 @@ export const Select: React.FC<SelectProps> = ({
         <View style={styles.settings}>
           {multiple && value.length > 0 && (
             <TouchableOpacity style={styles.remove} onPress={clearOptions}>
-              <Text>&times;</Text>
+              <Text
+                style={[styles.text, borderColor ? { color: borderColor } : {}]}
+              >
+                &times;
+              </Text>
             </TouchableOpacity>
           )}
-          <View style={styles.divider} />
+          <View
+            style={[
+              styles.divider,
+              borderColor ? { backgroundColor: borderColor } : {},
+            ]}
+          />
           <TouchableOpacity onPress={() => setIsOpen((prev) => !prev)}>
-            <Text style={[styles.caret, isOpen ? styles.caretOpen : {}]}>
+            <Text
+              style={[
+                styles.text,
+                styles.caret,
+                isOpen ? styles.caretOpen : {},
+                borderColor ? { color: borderColor } : {},
+              ]}
+            >
               ^
             </Text>
           </TouchableOpacity>

src/components/Select/select.style.ts

@@ -12,7 +12,7 @@ export const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     borderWidth: 1,
-    borderColor: '#28282850',
+    borderColor: '#404243',
   },
   button: {
     backgroundColor: 'green',
@@ -41,7 +41,7 @@ export const styles = StyleSheet.create({
   },
   remove: {},
   divider: {
-    backgroundColor: '#28282850',
+    backgroundColor: '#404243',
     alignSelf: 'stretch',
     width: 1,
     marginHorizontal: 10,
@@ -51,7 +51,7 @@ export const styles = StyleSheet.create({
     flexWrap: 'wrap',
     marginTop: 5,
     borderWidth: 1,
-    borderColor: '#28282850',
+    borderColor: '#404243',
     borderRadius: 13,
     padding: 10,
   },
@@ -70,9 +70,12 @@ export const styles = StyleSheet.create({
     marginBottom: -5,
   },
   placeholder: {
-    color: '#28282850',
+    color: '#404243',
   },
   disabled: {
     opacity: 0.5,
   },
+  text: {
+    color: '#404243',
+  },
 });