change style react native material dropdown

Question

native-material-dropdown`, I want to create this dropdown in the picture below:

but the arrow in the left : how can I change this to left? this my code below :

  < Dropdown
        renderAccessory={() => (
          <Image resizeMode="contain" source={combo_arrow_icon} style={{ marginTop: 5, justifyContent: 'center', }}/>
        )}
        inputContainerStyle={{ borderBottomColor: 'transparent' }}
        onChangeText={(value) => props.newHandelChange(value)}
        dropdownMargins={{ min: 15, max: 15 }}
        dropdownOffset={{ top: 10, left: 0 }}
        dropdownPosition={- 5}
        style={{ marginTop: 5, fontWeight: 'bold', fontFamily: 'IRANSansMobile', fontSize: 16, textAlign: 'right', }}
        itemTextStyle={{ textAlign: 'center', fontFamily: 'IRANSansMobile' }}
        absoluteRTLLayout={false}
        containerStyle={{ backgroundColor: '#59c5b8', borderWidth: 0.5, borderRadius: 1, marginLeft: 16, marginRight: 16, marginBottom: 8, fontSize: 18, fontFamily: 'IRANSansMobile' }}
        data={props.data ? props.data : dataGroup}
        placeholder="(پیش فرض گروه فعال)..."
        placeholderTextColor='#000'
        placeholderStyle={{ fontWeight: '200', fontFamily: 'IRANSansMobile', }}
      />

I think it because the language is work as RTL layout, so it goes to different side, maybe you could try `absoluteRTLLayout={true}`? — 高鵬翔, May 19 '20 at 06:15
I set absoluteRTLLayout={true} but nothing change.@高鵬翔 — Amir Farahani, May 19 '20 at 06:33

Amir Doreh · Accepted Answer · 2020-05-19T08:18:21.907

2

You have two option for handling that,

1.you need to make the layout of your app RTL so everything will be handled automatically For more info =>>

---https://reactnative.dev/blog/2016/08/19/right-to-left-support-for-react-native-apps

---Right to Left in react-native

you need too change the Default Style of DropDown by going to ./node_module/react-native-material-dropdown/src/component/dropdown/styles.js and do the following : import Dimentions from react native and add const {width,height}=Dimensions.get('window') then go to the accessory style and add right:width*.94 to the end , by doing this you will be able to have some result like:

edited May 19 '20 at 08:18

answered May 19 '20 at 07:03

Amir Doreh

1,369
1
13
25

thank for the answer but in `./node_module/react-native-material-dropdown/src/component` have two folder `dropdown` and `item` and both have style.which one, and for the first way when I18nManager all icon change and not good! – Amir Farahani May 19 '20 at 07:42
its under dropdown folder – Amir Doreh May 19 '20 at 08:17
if it helped you, please upvote and mark as answer so when any one have the same problem they can figure the answer , thanks, happy coding <3 @AmirFarahani – Amir Doreh May 19 '20 at 18:59
I change this but nothing to change?` accessory: { right:width*.94, width: 24, height: 24, justifyContent: 'center', alignItems: 'center', },`@Amir Doreh – Amir Farahani May 20 '20 at 05:21
added this `right:width*.94` to style my custom icon and ok, thanks a lot <3 – Amir Farahani May 20 '20 at 05:27

change style react native material dropdown

1 Answers1