dropdown style not working

[Cryton2017]

Hello, I am trying to style the drop down to be perfectly inline and the same width as the original box. My drop down looks like:

<ModalDropdown 
            style={toysListStyle.CategoryPicker}
            dropdownStyle={toysListStyle.dropDownStyle}
            options={this.state.categoryOption} 
            defaultValue={this.state.categoryOption[0]}
            onSelect={(index) => this.LoadNewSearch("category", index)}
 />

The style is as follows:

const toysListStyle = StyleSheet.create({
    dropDownStyle: {
        position: "absolute",
        left: "0%",
        top: "0%",
    },
});

[spence-s]

I was able to solve this problem like this by adding an onLayout event handler and calculating the width of the text input. Then applying that width using the adjustFrame callback. Something like this should work for you. This component doesn't like percentage widths. :)

const Dropdown = () => {
let newWidth = 0;    

function calcWidth(e) {
        newWidth = e.nativeEvent.layout.width;
    }

    return (
            <View style={styles.modalContainer}>
                <ModalDropdown
                    onLayout={event => calcWidth(event)}
                    adjustFrame={style => {
                        style.width = newWidth;
                        return style;
                    }}
                />
        </View>
    );
};