n4kz / react-native-material-dropdown

Material dropdown with consistent behaviour on iOS and Android
Other
732 stars 597 forks source link

rtl support #124

Open bitpaydotir opened 6 years ago

bitpaydotir commented 6 years ago

How to rtl dropdown I used all the available options but did not work please help

zmtmaster commented 4 years ago

You can control RTL or LTR using renderBase prop. Say you have a Row component that handles the direction

const styles = StyleSheet.create({
  default: {
    display: 'flex',
    flexDirection: 'row', // Here you can control the direction 
  },
});

function Row(props) {
  const style = Array.isArray(props.style) ? props.style : [props.style];

  return (
    <View {...props} style={[styles.default, ...style]}>
      {props.children}
    </View>
  );
}

Then you can just use it as follows.

<Dropdown
...dropdownProps
renderBase={props => {
            return (
              <Row>
                <Text>
                  {props.title}
                </Text>
                {props.renderAccessory() /* This part is the arrow */}
              </Row>
            );
          }}
>