TODO: Đã custom xong item chip

src/components/Card/CardChip.js

+import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import React from 'react'
+import R from '../../assets/R'
+
+const CardChip = ({
+    title,
+
+    marginBottomTitle,
+
+    containerMarginBottom,
+    containerMarginHorizontal,
+    containerMarginVertical,
+    containerMarginRight,
+    containerMarginTop,
+    containerMarginLeft,
+
+    cardMarginBottom,
+    cardMarginHorizontal,
+    cardMarginVertical,
+    cardMarginRight,
+    cardMarginTop,
+    cardMarginLeft,
+    cardBackgroundColor,
+    cardBorderRadius,
+
+    chipMarginBottom,
+    chipMarginHorizontal,
+    chipMarginVertical,
+    chipMarginRight,
+    chipMarginTop,
+    chipMarginLeft,
+    chipBackgroundColor,
+    chipBorderRadius,
+    chipText,
+    chipTextColor,
+    chipIcon,
+
+    widthCard,
+    heightCard,
+
+
+
+    
+}) => {
+  return (
+    <View style={[
+        {
+            marginHorizontal: containerMarginHorizontal,
+            marginVertical: containerMarginVertical,
+            marginBottom: containerMarginBottom,
+            marginRight: containerMarginRight,
+            marginTop: containerMarginTop,
+            marginLeft: containerMarginLeft,
+        }
+    ]} >
+      <Text style={{marginBottom: marginBottomTitle}}>{title}</Text>
+      <View style={[
+        {
+            marginHorizontal: cardMarginHorizontal,
+            marginVertical: cardMarginVertical,
+            marginBottom: cardMarginBottom,
+            marginRight: cardMarginRight,
+            marginTop: cardMarginTop,
+            marginLeft: cardMarginLeft,
+            backgroundColor: cardBackgroundColor,
+            borderRadius: cardBorderRadius,
+            width: widthCard,
+            height: heightCard,
+        }
+    ]}>
+        <TouchableOpacity style={[
+            {
+                marginHorizontal: chipMarginHorizontal,
+                marginVertical: chipMarginVertical,
+                marginBottom: chipMarginBottom,
+                marginRight: chipMarginRight,
+                marginTop: chipMarginTop,
+                marginLeft: chipMarginLeft,
+                backgroundColor: chipBackgroundColor,
+                borderRadius: chipBorderRadius,
+                
+            },
+            styles.chip
+        ]}>
+            <View style={styles.imageIcon}>
+            <Image backgroundColor={R.colors.white} resizeMode='cover' source={chipIcon} style={{width: 20, height: 20}}/>
+            </View>
+            
+            <Text style={[{color: chipTextColor}, styles.text]}>{chipText}</Text>
+            
+        </TouchableOpacity>
+    </View>
+
+    </View>
+  )
+}
+
+export default CardChip
+
+const styles = StyleSheet.create({
+    chip: {
+        flexDirection:'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position:'relative',
+        width:250,
+        height:40,
+        borderRadius: 100,
+        top:2,
+        left:10
+    },
+    imageIcon: {
+        marginRight:10
+    },
+    text: {
+        fontSize: 12,
+        fontFamily:R.fonts.fontRegular
+    }
+})
\ No newline at end of file

src/components/RadioButton/RadioGroup.js

@@ -19,6 +19,7 @@ const RadioGroup = ({
     containerMarginBottom,
     backgroundBoxColor,
     borderBoxColor,
+    editable = false,
 }) => {
   return (
     <View style={[
@@ -35,7 +36,7 @@ const RadioGroup = ({
           key={`${option.value}-${index}`}
           label={option.label}
           selected={option.value === selectedValue}
-          onPress={() => onValueChange(option.value)}
+          onPress={() => editable ? onValueChange(option.value) : null}
           disable={disabled}
           size={size}
           color={color}

src/screens/notification/detail/view.js

@@ -13,6 +13,7 @@ import R from '../../../assets/R';
 import TextMulti from '../../../components/Input/TextMulti';
 import RadioGroup from '../../../components/RadioButton/RadioGroup';
 import RadioButton from '../../../components/RadioButton/RadioButton';
+import CardChip from '../../../components/Card/CardChip';
 const NotificationDetailView = props => {
   const {
     showWarning,
@@ -50,6 +51,7 @@ const NotificationDetailView = props => {
           fontSizeTitle={R.sizes.sm}
           containerMarginBottom={15}
           required
+          editable={false}
         />
 
         <TextField
@@ -64,6 +66,7 @@ const NotificationDetailView = props => {
           fontSizeTitle={R.sizes.sm}
           required
           containerMarginBottom={15}
+          editable={false}
         />
         <TextMulti
           title="Nội dung thông báo"
@@ -79,6 +82,7 @@ const NotificationDetailView = props => {
           fontSizePlaceHolder={R.sizes.sm}
           required
           containerMarginBottom={15}
+          editable={false}
         />
 
         <RadioGroup
@@ -94,21 +98,24 @@ const NotificationDetailView = props => {
           // justifyContent={'space-between'}
           containerMarginRight={39}
           containerMarginBottom={15}
+          editable={false}
         />
 
-        <TextMulti
+        <CardChip
           title="Chọn những sinh viên nhận thông báo"
-          titleFontSize={R.sizes.sm}
-          value={title}
-          onChangeText={onTitleChange}
-          backgroundColor={R.colors.blue1}
-          color={R.colors.white}
-          fontSize={R.sizes.sm}
-          onFocus={() => {}}
-          fontSizeTitle={R.sizes.sm}
-          fontSizePlaceHolder={R.sizes.sm}
-          required
+          marginBottomTitle={5}
           containerMarginBottom={15}
+          heightCard={200}
+          cardBackgroundColor={R.colors.blue1}
+          cardBorderRadius={10}
+
+          chipBackgroundColor={R.colors.gray1}
+          chipBorderRadius={10}
+          chipWidth={100}
+          chipHeight={50}
+          chipMarginVertical={10}
+          chipText="859256, Nguyễn Minh Đức"
+          chipTextColor={R.colors.blue}
         />