search

toystars / react-native-multiple-select

Simple multi-select component for react-native
MIT License
567 stars 315 forks source link

[Enhancement]: Customisable Tag Styles #133

Open robertqin86 opened 4 years ago

robertqin86 commented 4 years ago

Issue summary

Tag styes are currently using fixed style designs and font size (15). The tags should also be customisable via injected prop values.

Library versions

react-native: 0.61.5 react-native-multiple-select: 0.5.5

robertqin86 commented 4 years ago

Fixed in PR: https://github.com/toystars/react-native-multiple-select/pull/132.

Please review.

robertqin86 commented 4 years ago

Hi @mycatdoitbetter, please see this example for tagContainerStyle and tagFontSize

<MultiSelect
                hideTags={false}
                items={types(t)}
                uniqueKey="id"
                ref={multiSelect}
                itemFontSize={14}
                onSelectedItemsChange={onSelectedItemsChange}
                selectedItems={selectedItems}
                selectText={"Select Contributors"}
                searchInputPlaceholderText="" // remove search placeholder
                tagRemoveIconColor={materialTheme.COLORS.LABEL}
                tagBorderColor={materialTheme.COLORS.LABEL}
                tagTextColor={materialTheme.COLORS.LABEL}
                tagContainerStyle={{
                  height: 30,
                  width: 120,
                }}
                tagFontSize={0.75 * theme.SIZES.BASE}
                textInputProps={{
                  autoFocus: false,
                  editable: false, // disable search input
                }}
                searchIcon={false} // remove search input
                selectedItemTextColor={materialTheme.COLORS.LABEL}
                selectedItemIconColor={materialTheme.COLORS.LABEL}
                itemTextColor={materialTheme.COLORS.CAPTION}
                displayKey="title"
                submitButtonColor={materialTheme.COLORS.LABEL}
                submitButtonText="Submit"
              >
                <Block>
                  {multiSelect?.current?.getSelectedItemsExt(selectedItems)}
                </Block>
              </MultiSelect>
ryancteneyck commented 4 years ago

Hi @robertqin86, I am running react-native: "0.62.2" and "react-native-multiple-select": "0.5.5", and yet the tagContainerStyle prop is not applying or being recognized. Any advice?

robertqin86 commented 4 years ago

Hi @ryancteneyck thats because my PR was never merged (https://github.com/toystars/react-native-multiple-select/pull/132). The issue and PR are still in open status since Feb 29th :(

ryancteneyck commented 4 years ago

@robertqin86 oh no! So we just have to wait until that is merged, huh!?

robertqin86 commented 4 years ago

@ryancteneyck Unfortunately, thats the situation. I don't have merge rights as I'm not a maintainer of this repo. Otherwise you can do an npm install using robertqin86/react-native-multiple-select#master, but I recommend waiting for this PR to be merged. @toystars Do you think you have time to review this PR and issue and merge when you are available?

AugustoAleGon commented 4 years ago

I can merge and publish!

AugustoAleGon commented 4 years ago

@robertqin86 Can you do a me a favor an make an example? So I can test it?

ryancteneyck commented 4 years ago

@robertqin86 Were you able to send @AugustoAleGon an example?

robertqin86 commented 4 years ago

Hi there, sorry for the late reply. The example was given in my previous comment example. @AugustoAleGon Is this what you are looking for?

ccanalesdote commented 4 years ago

Any update for this? Thanks!

AugustoAleGon commented 4 years ago

@ccanalesdote Everything looks pretty good. I am gonna approve it and release it.