Rn-bij-ui-kit NPM

React-Native UI Kit for Bijnis

This is the UI Kit for all APPs which are developed for the applications of React Native at Bijnis.

Installation
Usage
Components
Styles
Documentation
Contributing
License

Installation

To use this UI kit in your React Native project, you can install it via npm:

yarn add rn-bij-ui-kit
or
npm install rn-bij-ui-kit --save

Usage

import {Header, ...} from 'rn-bij-ui-kit';
// ...

<ErrorBoundary>
 <OfflineNotice />
 <Header
  title={`UI-KiT Header Component 👋🏻`}
  style={styles.header}
  onPressLeftIcon={() => alert('left pressed')}
  // leftImage={leftArrowIcon}
  // leftIconStyle={{height: 25, width: 25, tintColor: '#000'}}
  rightChildren={
    <Button
      style={{
        margin: 1,
        height: 30,
        padding: 5,
        paddingHorizontal: 15,
      }}
      textStyle={{fontSize: 12}}
      title="Custom Button"
      type="filled"
      onPress={() => alert('OKay cool....🙃')}
    />
  }
/>

<Button title={'hi from Button'} />;

<Accordion title={'Hi from Accordion '}>
  <Text>experimental...</Text>
  <Text>********************UI-KIT-BIJINS ****************</Text>
</Accordion>;

 <Loader visible={isVisible} />

 <Dropdown
    multiple
    style={{margin: 10}}
    onPress={e => setSelectedDropDownData(p => [...p, e])}
    onPressClose={val => {
      let index = selectedDropDownData.findIndex(e => e.value === val);
      let data = selectedDropDownData.splice(index, 1);
      setSelectedDropDownData(data);
    }}
    selected={selectedDropDownData}
    data={dropDownData}
  />

  <Card>
<Text>  Card- Lorem ipsum dolor sit ameconsectetur adipiscing elit.  Donec
</Text>
 </Card>

 <Input
    textInputProps={{}}
    style={styles.searchBoxContainer}
    textInputStyle={styles.searchBox}
    placeholder={'Text input ....'}
    value={inputValue}
    onChangeText={e => setInputValue(e)}
    crossButton={true}
    onPressCloseButton={() => {}}
  />
  <Checkbox
    title="I agree to the terms and conditions"
    onPress={() => alert('checkbox pressed')}
    isSelected={true}
  />
  <RadioButton
    style={{margin: 10}}
    title={'UI kit ui button'}
    isSelected={true}
    onPress={() => alert('Radio button pressed')}
  />
 <Chip title="my chip" type="outline" />
 <Chip title="my chip with close button" closeButton={true} />


<BottomSheet
    isVisible={isSheetOpen}
    close={() => setIsSheetOpen(false)}
    defaultHeader={true}
    title={'Bottom Sheet'}
  >
  {your code....}
  </BottomSheet>

 <Filter
    visible={isFilter}
    onCloseFilter={() => setIsFilter(!isFilter)}
    filterData={[
      {
        title: 'Filter List',
        multiSelect: false,
        data: [{name: 'List -01'}, {name: 'List -02'}],
      },
      {
        title: 'Filter List -02',
        multiSelect: true,
        data: [{name: 'List -01'}, {name: 'List -02'}],
      },
    ]}
    onApplyFilter={(filteredData, totalFilterCount) =>
      console.log(JSON.stringify(filteredData), totalFilterCount)
    }
  />

<Image style={styles.img}
{...props}
/>

<SearchBar
     value={inputValue}
     onChangeText={v => setInputValue(v)}
     onResetText={() => setInputValue('')}
/>

<OrderStatusTracker
            // headingChildren={<View />}
            data={[
              {
                status: 'In Progress',
                date: new Date(),
                active: false,
                completed: true,
                image: 'https://via.placeholder.com/150/92c952',
              },
              {
                status: 'Seller Confirmed',
                date: moment(),
                active: false,
                completed: true,
              },
              {
                status: 'Dispatched',
                date: moment(),
                active: false,
                completed: true,
              },
            ]}
            phoneNumber={'+91 9999999999'}
            extraProp={[
              {
                index: 5,
                children: (
                  <View
                    style={{
                      flexDirection: 'row',
                      backgroundColor: '#EEE',
                      padding: 2,
                      borderRadius: 5,
                    }}>
                    <Text>{`Xpressbees`}</Text>
                    <Text>{`  📞 91 234567890`}</Text>
                  </View>
                ),
              },
            ]}
          />
<Separator />

 <ProgressBar text={``} style={{margin: 10}} progressPercent={50} />

 <TopTabs
    data={['1st Tab', '2nd Tab', '3rd Tab', '4th Tab']}
  // currentTabData={data => console.log('current tab data', data)}
 />

 <LeftTabs
   data={['1st Tab', '2nd Tab', '3rd Tab', '4th Tab']}
   // currentTabData={data => console.log('current tab data', data)}
/>
  <FAB
    animatedFab={true}
    // style={{bottom: 20}}
    title={'FAB'}
    onPress={() => console.log('custom pressed')}
  >
 <SubButton onPress={() => alert('Pressed 1!')} label="1" />
  <SubButton onPress={() => alert('Pressed 2!')} label="2" />
  <SubButton onPress={() => alert('Pressed 3!')} label="3" />
  <SubButton onPress={() => alert('Pressed 4!')} label="4" />
</FAB>

</ErrorBoundary>