Style Related Issues

[naveenexperts]

Is your feature request related to a problem? Please describe. While I am designing the dropdown there are few things that block me from my design. 1) There is no option to remove the underline in the dropdown 2) I can not change the position of the label and selected dropdown item (I need it to show from the left without any space) 3) There is no option to change the selection style (I need to be selected item to display in specific background color and with increase font size) in the dropdown list and also there is no option hide the 'Tick' mark that appears in the selection 4) There is no option to hide the placeholder text if it is not needed.

Describe the solution you'd like If you can provide these changes that will be great.

[selvamk-js]

@naveenexperts Can you provide me clear information for point 2? If you add any screenshots that would be great. Also, point 4 I believe you are referring to the searchPlaceholder?

[naveenexperts]

Thank you for the reply. I have added screenshots please check.

[selvamk-js]

Note: Use the latest version 1.3.0 for the below changes

By using the below props you can achieve the desired output:

• underlineColor : Change TextInput Under Line color.

• disableSelectionTick: Disable the selected item tick mark.

• textInputPlaceholder: Change TextInput Placeholder text.

• textInputPlaceholderColor: Change TextInput Placeholder color.

• selectedItemTextStyle: Change the selected text view style for the dropdown item.

• selectedItemViewStyle: Change the selected item view style for the dropdown item.

• removeLabel: Remove TextInput label. Note: Empty string must be passed since the label is a required field.

                 <Dropdown
                  label="Simple dropdown with avatar"
                  data={data}
                  primaryColor={Colors.blueA700}
                  enableSearch
                  enableAvatar
                  value={values.sddWAvatar}
                  onChange={value => setFieldValue('sddWAvatar', value)}
                  required
                  error={errors.sddWAvatar ? true : false}

                  selectedItemViewStyle={{ backgroundColor: '#F7F9F9' }}
                  selectedItemTextStyle={{ fontWeight: 'bold' }}
                  disableSelectionTick
                  removeLabel
                  textInputPlaceholder="Simple dropdown with avatar"
                  textInputStyle={{
                    paddingHorizontal: 0,
                  }}
                  underlineColor="transparent"

                />

Adding them Properly will give you the below changes.

[naveenexperts]

I have tried the same. But this is not working for me <Dropdown label="Skills" data={GRADE} disableSort={true} value={this.state.country} onChange={this.onCountryChange} textInputStyle={styles.dropDown} mainContainerStyle={{ backgroundColor: colors.textBlack + '50', borderRadius: 5, }} itemTextStyle={{}} borderRadius={5} underlineColor="transparent" selectedItemViewStyle={{ backgroundColor: 'red', }} removeLabel={true} disableSelectionTick /> The Only thing that worked for me is the paddingHorizontal : 0 in the textInputStyle. Using version: 1.3.0, tried to run your example but got the error 'Unable to resolve module @babel/runtime/helpers/interopRequireDefault'

[selvamk-js]

Did you update the package to 1.3.0?. To run the example you need to clone this repo and take a look at the package.json to run it.

[naveenexperts]

yes

[selvamk-js]

Can you share your package.json here?

[naveenexperts]

{ "name": "testApp", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "start": "react-native start", "test": "jest", "lint": "eslint . --ext .js,.jsx,.ts,.tsx" }, "dependencies": { "@react-native-community/masked-view": "^0.1.10", "@react-navigation/native": "^5.8.7", "@react-navigation/stack": "^5.12.4", "@ubaids/react-native-material-textfield": "^0.16.3", "react": "16.13.1", "react-native": "0.63.3", "react-native-gesture-handler": "^1.8.0", "react-native-paper": "^4.4.0", "react-native-reanimated": "^1.13.1", "react-native-safe-area-context": "^3.1.8", "react-native-screens": "^2.13.0", "react-native-snap-carousel": "^3.9.1", "react-native-vector-icons": "^7.1.0", "react-redux": "^7.2.2", "redux": "^4.0.5", "redux-thunk": "^2.3.0", "sharingan-rn-modal-dropdown": "^1.3.0" }, "devDependencies": { "@babel/core": "^7.8.4", "@babel/runtime": "^7.8.4", "@react-native-community/eslint-config": "^1.1.0", "@types/jest": "^25.2.3", "@types/react-native": "^0.63.2", "@types/react-native-snap-carousel": "^3.8.2", "@types/react-redux": "^7.1.11", "@types/react-test-renderer": "^16.9.2", "@typescript-eslint/eslint-plugin": "^2.27.0", "@typescript-eslint/parser": "^2.27.0", "babel-jest": "^25.1.0", "eslint": "^6.5.1", "jest": "^25.1.0", "metro-react-native-babel-preset": "^0.59.0", "react-test-renderer": "16.13.1", "typescript": "^3.8.3" }, "jest": { "preset": "react-native", "moduleFileExtensions": [ "ts", "tsx", "js", "jsx", "json", "node" ] } }

[selvamk-js]

I see the codes are there in the repo also in one of my projects the latest version 1.3.0 has all changes I included.

What do you see when you add one of these props or trying to Go to Definition, Is it taking you to the types?

Can you do some below quick checks?

1. Try deleting node_modules and lock the file and reinstall the packages.
2. If the above doesn't fix try reinstalling the sharingan-rn-modal-dropdown alone.

[naveenexperts]

Tried the same but not working for me. I have downloaded the repo and moved to example then run 'npm install' run the code. Correct me if I am wrong

[selvamk-js]

Follow this:

1. After downloading the repo from the main folder structure run yarn bootstrap
2. After all setup finished, from the main folder structure run yarn example ios or yarn example android.

No need to go inside the example unless you want to see the sample code. :)

[naveenexperts]

Its working now thank you. I have one more request If you can do that will be great. Currently there is no option to change the TextInput font. I have tried with fontFamily inside the 'textInputStyle' But it not working.

[selvamk-js]

@naveenexperts there is a prop ’theme’ which can help you in changing the font, take a look at the react-native-paper theme and how to change the font for it. If you pass the same configuration to the theme prop in the dropdown that should fix the font, if it's not working comment here I will have a look 😊