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.

.

Table of Contents

• 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.

Sourabh Bhatt , Abhishek Anshu