Search code examples
cssreact-nativeflexboxnative-base

React Native Nativebase how to float Picker to the right

I have arrow down button that I want to float the right side.

<Form>
                    <Item inlineLabel>
                        <Label>Name *</Label>
                        <Input
                            autoFocus
                            type="text"
                            onChangeText={text => this.setState({ name: text })}
                            value={this._replaceSpace(this.state.name)}
                            placeholderTextColor="#BFC6EA"
                            placeholder='Grilled Chicken'
                            style={{ textAlign: 'right', marginRight: 10 }}
                        />
                    </Item>
                    <Item inlineLabel>
                        <Label>Serving Per Container *</Label>
                        
                            <Picker
                                mode="dropdown"
                                iosHeader="Select your SIM"
                                iosIcon={<Icon name="arrow-down" style={{}} />}
                                style={{ width: undefined }}
                                selectedValue={this.state.selected}
                                onValueChange={this.onValueChange.bind(this)}
                            >
                                <Picker.Item label="Wallet" value="key0" />
                                <Picker.Item label="ATM Card" value="key1" />
                                <Picker.Item label="Debit Card" value="key2" />
                                <Picker.Item label="Credit Card" value="key3" />
                                <Picker.Item label="Net Banking" value="key4" />
                            </Picker>
                        
                    </Item>
                </Form>

Image code

Solution

  • If anybody encounters this problem. flex: 1 to the label component.