Nativebase: Header searchBar input item position.

Created on 25 Oct 2017  路  3Comments  路  Source: GeekyAnts/NativeBase

Hello, Do you know if it possible to correct position of the input of the header-searchbar with additional Left button?

Thank you,

react-native, react and native-base version

lastest

Expected behaviour

Left side of input near 'back' button

Actual behaviour

screenshot

Steps to reproduce (code snippet or screenshot)

                <Header searchBar>
                    <Left>
                        <Button transparent onPress={() => this.props.navigation.navigate('Recommended')}>
                            <Icon name="arrow-back" />
                        </Button>
                    </Left>
                    <Item>
                        <Input placeholder={this.props.search} onChangeText={(x) => this.props.handleSearch(x)} />
                        <Icon name="search" />
                    </Item>
                </Header>

Screenshot of emulator/device

1

Is the bug present in both ios and android or in any one of them?

android (IOS - did not check)

Most helpful comment

<Header searchBar>
                    <Left style={{flex: null}}>
                        <Button transparent onPress={() => this.props.navigation.navigate('Recommended')}>
                            <Icon name="arrow-back"/>
                        </Button>
                    </Left>
                    <Item>
                        <Input placeholder="Search User"/>
                        <Icon name="search"/>
                    </Item>
                </Header>

All 3 comments

@inv2004 you can modify the styles of the components <Left/> or <Item/> to place search near back button

Closing this issue due to no response

<Header searchBar>
                    <Left style={{flex: null}}>
                        <Button transparent onPress={() => this.props.navigation.navigate('Recommended')}>
                            <Icon name="arrow-back"/>
                        </Button>
                    </Left>
                    <Item>
                        <Input placeholder="Search User"/>
                        <Icon name="search"/>
                    </Item>
                </Header>
Was this page helpful?
0 / 5 - 0 ratings