Option to style container

[ritz078]

I need to update the style of this

Or maybe use an array instead of a wrapper. Con: Only supported in React 16.

[gs-akhan]

Hmm, Any idea how we can solve this ?

[ritz078]

Solution 1

accept a single style with different keys for different sections

const styles = {
  container: {},
  dropdown: {},
  textStyle: {}
}

and then use it

<View style={[style.default, styles.container]}></View>

Con : This will be a breaking change

Alternative solution: Just add another style property. containerStyle

2nd Way

remove the container as React 16 supports arrays

return [
      <TouchableWithoutFeedback key="press" onPress={this.onPress.bind(this)}>
          <View style={[styles.selectBox, style]}>
            <View style={styles.selectBoxContent}>
              <Text style={textStyle}>{this.state.defaultText}</Text>
              <Indicator
                direction={indicator}
                color={indicatorColor}
                size={indicatorSize}
                style={indicatorStyle}
              />
            </View>
          </View>
        </TouchableWithoutFeedback>,

        <Modal
          key={"modal"}
          transparent={transparent}
          animationType={animationType}
          visible={this.state.modalVisible}
          onRequestClose={this.onClose.bind(this)}
          supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}
        >
          <TouchableWithoutFeedback onPress={this.onModalPress.bind(this)}>
            <View style={[styles.modalOverlay, backdropStyle]}>
              <OptionList
                onSelect={this.onSelect.bind(this)}
                selectedStyle={selectedStyle}
                selected={selected}
                style={[optionListStyle]}
              >
                {this.props.children}
              </OptionList>
            </View>
          </TouchableWithoutFeedback>

        </Modal>]

[st0ffern]

this is possible in v2

[ritz078]

Alternative solution: Just add another style property. containerStyle

I think this can be implemented now ?

[gs-akhan]

Guyz, take a call. As long as it doesn't break existing code I shall be fine. Also on other hand we should not be polluting API with lot of params.

Thanks

On Thu, Nov 16, 2017 at 3:13 PM, Ritesh Kumar [email protected] wrote:

Alternative solution: Just add another style property. containerStyle

I think this can be implemented now ?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/gs-akhan/react-native-chooser/issues/45#issuecomment-344869091, or mute the thread https://github.com/notifications/unsubscribe-auth/AFYnVhcUymZ9o5--XTFbu4y-br-vw58_ks5s3AOxgaJpZM4QezUK .

[Pfurr]

hi guys, can you give an example of how to use indicatorColor and indicatorSize? Here my code:

render() { return ( <View style={styles.container}> <Select onSelect={this.onSelect.bind(this)} defaultText={this.state.value} style={{ width: 180, height: 50, borderWidth: 4, borderRadius: 6, backgroundColor: "red", borderColor: "white", justifyContent: "center", alignItems: "center" }} textStyle={{ fontSize: 18, fontStyle: "italic", color: "white", justifyContent: "center" }} backdropStyle={{ backgroundColor: "#845321" }} optionListStyle={{ backgroundColor: "#b78654", alignSelf: "center", justifyContent: "center", alignItems: "center", width: 300, height: 150, borderWidth: 4, borderRadius: 6, borderColor: "white" }} styleText={{ color: "green" }} > <Option value="1">1</Option> <Option value="2">2</Option> </Select> </View> ); } }