rn-components_dtc v1.1.5

React-Native-Component_DTC

This lib support some of component basic for project. (build for DTC's projects)

Installation

Step 1: Before use this lib, you need config native "react-native-vector-icons" following this link: https://github.com/oblador/react-native-vector-icons

Step 2: To install lib this project run

  npm i rn-components_dtc

Step 3:

cd ios & pod install

If you are having trouble with iOS, try to reinstall the dependencies by running:

    1. cd ios
    2. bundle install
    3. bundle exec pod install

Usage/Examples

const App = () => {
  useEffect(() => {
    console.log(RNModuleTemplateModule)
  })
  const isDarkMode = useColorScheme() === 'dark'
  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  }

  const [isVisible, setisVisible] = useState<boolean>(false)
  const [checked, setChecked] = useState<boolean>(false)

  const Test = () => {
    return <Text>test right custom children</Text>
  }

  const data = [
    {
      key: 1,
      text: 'Option A',
    },
    {
      key: 2,
      text: 'Option B',
    },
    {
      key: 3,
      text: 'Option C',
    },
  ]

  const onRadioButtonPress = (itemIdx: any) => {
    console.log('Clicked', itemIdx)
  }

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior='automatic'
        style={backgroundStyle}
      >
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}
        >
          <View
            style={{
              flex: 1,
              marginTop: 30,
              marginHorizontal: 16,
            }}
          >
            <Button
              text='test'
              onPressBtn={() => {}}
              btnStyle={{ marginVertical: 10, padding: 10 }}
            />
            <TextInputComponent
              containerViewInputStyle={{ marginBottom: 10 }}
              textInputStyle={{ borderWidth: 2 }}
              errorText='loi roi kia lam lai di'
            />
            <ImageCpn
              typeVectorIcon='AntDesign'
              iconName='plus'
              sizeIcon={50}
              colorIcon='red'
              imgStyle={{ marginBottom: 10, borderWidth: 1, borderRadius: 6 }}
              onPressItem={() => {
                console.log('pressed item')
              }}
            />
            <View
              style={{ borderWidth: 2, borderColor: 'gray', borderRadius: 6 }}
            >
              <CollapseView
                title={'Tùy chọn tìm kiếm'}
                titleStyle={{ color: 'blue' }}
                icon={
                  <Icons.AntDesign
                    name='infocirlceo'
                    size={20}
                    color={'black'}
                  />
                }
                customViewChildStyle={{
                  borderTopWidth: 1,
                  borderColor: 'gray',
                }}
                customContainerStyle={{
                  borderTopWidth: 1,
                }}
              >
                <Text>test</Text>
                <Text>test1</Text>
              </CollapseView>
            </View>
            <ImageCpn typeVectorIcon='AntDesign' iconName='minus' />
            <CollapseViewV2 />
            <RadioComponent
              titleLeft={'Test radio button'}
              customStyleContainer={{ marginTop: 10 }}
              value={null}
              onChangeSwitch={(bool) => {
                console.log('changed status')
              }}
            />
          </View>
          <Button
            text='Open modal'
            onPressBtn={() => {
              setisVisible(!isVisible)
            }}
            btnStyle={{ margin: 10, padding: 10 }}
          />
          <Checkbox
            leftText='left'
            checked={checked}
            onChecked={setChecked}
            childrenRight={<Test />}
          />
          <MultiRadioButton
            isSwapTextToLeft={false}
            values={data}
            onPress={onRadioButtonPress}
          />
        
        </View>
        <ModalComponent
          isVisible={isVisible}
          isShowButtonAccpet
          hasCancelButton
          titlePopup={'Test modal'}
          onPressBtnAccept={() => setisVisible(false)}
          customStyleBtnAccept={{ backgroundColor: 'pink' }}
        />
      </ScrollView>
    </SafeAreaView>
  )
}

export default App

Components

I. Button

II. TextInput

III. ImageCpn

IV. Modal Component

V. Radio Component

VI. Collapse View

Note: Devs's DTC following design on Figma "Test firm search APP".

VII. Collapse View V2 (Collapse view text )