I am using NativeBase Header. In header, I have buttons like cart and wishlist. But I am not able to change the color of that icons.
Here is my header code :
<Header>
<Left>
<Button transparent onPress={props.onMenuPress}>
<Icon type="Ionicons" name="menu" color="#ff0000" />
</Button>
</Left>
<Body>
<Title>{props.title}</Title>
</Body>
<Right>
<Button transparent onPress={props.onWishlistPress}>
<Icon name="heart" active={false} color="#ff0000" />
</Button>
<Button transparent onPress={props.onCartPress} icon>
<Icon name="cart" active={false} color="#ff0000" />
</Button>
</Right>
</Header>
Please anyone can tell me what is the problem here ?
It is shown in the Native-base document. For Icon, Native-base use the React-native-vector-icons module, which allows you to set colors and sizes through the style.
Icon
Perfect, crisp, high definition icons and pixel ideal fonts powered by NativeBase to preserve matters very high first-rate. You will continually have pixel perfect icons on your initiatives.
Here is a repo that lists down icons of available react-native-vector-icons icon families. Repo
Uses Ionicons from React Native Vector Icons
Exmaple
<Icon name='home' />
<Icon ios='ios-menu' android="md-menu" style={{fontSize: 20, color: 'red'}}/>
<Icon type="FontAwesome" name="home" />
Related
When the virtual keyboard appears, I want to keep the button behind it, not jumping up to the top of the keyboard. How to achieve this? Here is the layout I have:
<>
<FlatList />
<Button />
</>
This way the button will stick on the bottom
<View style={{flex:1}}>
<FlatList contentContainerStyle={{flex:1}}/>
<Button />
<View/>
How can I center a title text in native base?
<Header>
<Left style={{flex:1}}>
<Button
transparent
onPress={() => NavigationService.navigate('Home')}
>
<Icon name='arrow-back' />
</Button>
</Left>
<Body style={{flex:1}}>
<Title>Vacancy Snapshot</Title>
</Body>
</Header>
The result above is a text align to the right.
If I include the Right tag <Right style={{flex:1}} /> after the Body, it center the text, but doesn't display the whole text:
by including the <Right style={{flex:1}}/>, the title text will be centered. and increase the flex to 3 from 1 so that the full length of the text can be displayed, like this:
<Header>
<Left style={{flex:1}}>
<Button
transparent
>
<Icon name='arrow-back' />
</Button>
</Left>
<Body style={{flex:3}}>
<Title>Vacancy Snapshot</Title>
</Body>
<Right style={{flex:1}}/>
</Header>
i've also included an expo snack here for further experimentation. have fun!
Hello My Friend please help Me, I have difficulty in customizing picker using native base,
How to customize the background color of the item picker using a native base so that it can be displayed on an Android device?
Thank you for someone who can answer this question
You can simply add backgroundColor as below,
<Picker
mode="dropdown"
iosHeader="Select your SIM"
style={{ width: '100%', backgroundColor: 'red' }}
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>
Hope this helps you. Feel free for doubts.
I am building a profile page and have the following components.
1. I have a image picker for the profile picture
2. ListView with text fields and a button
And i have a bottom bar navigation. With the current implementation the bottom tab bar hides the button at the bottom, and i am not able to figure out a way to solve this. Any help would be appreciated. Below is the code snippet,
render(){
let {phone} = this.state,
{studentName}=this.state,
{studentClass}=this.state,
{bloodGroup}=this.state,
{parentName}=this.state,
{email}=this.state,
{sibling}=this.state,
{siblingClass}=this.state,
{address}=this.state;
return(
<View style={styles.studentInfo}>
<TextField
label='Student Name'
value={studentName}
onChangeText={(studentName)=>this.setState({studentName})}
/>
<TextField
label='Class'
value={studentClass}
onChangeText={(studentClass)=>this.setState({studentClass})}
/>
<TextField
label='Blood Group'
value={bloodGroup}
onChangeText={(bloodGroup)=>this.setState({bloodGroup})}
/>
<TextField
label='Parent Name'
value={parentName}
onChangeText={(parentName)=>this.setState({parentName})}
/>
<TextField
label='Phone Number'
value={phone}
onChangeText={(phone)=>this.setState({phone})}
/>
<TextField
label='E mail'
value={email}
onChangeText={(email)=>this.setState({email})}
/>
<TextField
label='Sibling Studying in the school'
value={sibling}
onChangeText={(sibling)=>this.setState({sibling})}
/>
<TextField
label='Class'
value={siblingClass}
onChangeText={(siblingClass)=>this.setState({siblingClass})}
/>
<TextField
label='Address'
value={address}
onChangeText={(address)=>this.setState({address})}
/>
<Button
style={{backgroundColor: '#3e9cd3'}}
textStyle={{fontSize: 18}}
onPress={()=> this.handleButtonPress()}>
Save
</Button>
</View>
);
}
I've struggling for two days to styling components on Native Base with <StyleProvider>. I want to change background color of header and add custom style property on the button.
<Container>
<Header /> /*change backgroundColor*/
<Content>
<Button viewDetail block> /*add 'viewDetail' as custom style property */
<Text>Button</Text>
</Button>
</Content>
</Container>
I think, I have the answer for my own question.
Import all components from 'native-base-theme/components/' instead of variables.
The code will be like this
import getTheme from './native-base-theme/components';
and add <StyleProvider>, then add prop style <StyleProvider style={getTheme()}>.
There are many ways of doing this. One way would be to follow the instructions given here. Alternatively, you can change the button theme file and add a similar style property like success shown here.
I hope this will help you,
You must be using NativeBase2
<StyleProvider style={getTheme(commonColor)}>
<Header>
<Left>
<Button transparent>
<Icon name="arrow-back" onPress={() => this.props.routerActions.pop()} />
</Button>
</Left>
<Body>
<Title>Profile</Title>
</Body>
<Right></Right>
</Header>
</StyleProvider>
For ejecting theme,
Just open this link and follow
http://nativebase.io/docs/v2.0.0/customize#themingNativeBaseApp
Now If you want to customise just look for
native-base-theme/components/Header.js
native-base-theme/variables/commonColor.js