Package Exports

rn-bij-ui-kit
rn-bij-ui-kit/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rn-bij-ui-kit) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

JSPM

rn-bij-ui-kit