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
Related
The documentation of Fluent UI v9's SplitButton is not clear on how to add a click handler to the primary button.
Can anyone show me an example of how that is done?
I have tried finding examples on their GitHub page and I've googled for possible examples and I found one GitHub issue noting that this is a problem with their documentation.
Figured it out:
<Menu positioning="below-end">
<MenuTrigger disableButtonEnhancement>
{(triggerProps: MenuButtonProps) => (
<SplitButton
primaryActionButton={{ onClick: handleClick }}
menuButton={triggerProps}
>
Example
</SplitButton>
)}
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>
Remove file
</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
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/>
react-native-navigation-bar-color is not working for me.Any other solution to change nav bar color on androi in react native?
You just need to update your android style, Go to android/app/src/main/res/values/styles.xml file
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:editTextBackground">#drawable/rn_edit_text_material</item>
<item name="android:navigationBarColor">#android:color/white</item>
<item name="android:windowLightNavigationBar" tools:targetApi="o_mr1">true</item>
</style>
Just use the StatusBar of react-native.
import {StatusBar} from 'react-native'
...
...
<StatusBar backgroundColor="blue" barStyle="light-content" />
https://reactnative.dev/docs/statusbar
go into this path ..android/app/src/main/res/values find styles.xml
and add this item :
<item name="android:navigationBarColor">#212e34</item>
this is my color code #212e34 change it what ever you want
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" />
I have an app where i'm using react router and I can't figure out how to change the route in this use case. Here's how my code is structured:
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
<Router>
<Panels />
<Route path="/view" render={()=> <MyComponent />} />
<Route path="/about" render={()=> <MyOtherComponent />} />
</Router>
Inside <Panels> are some tabs I have that I would like to change the route.
<Tabs defaultActiveKey="1" onChange={}>
<TabPane tab="Tab 1" key="1" >
<Somecomponent />
</TabPane>
<TabPane tab="Tab 2" key="2">
Test me
</TabPane>
</Tabs>
These are antd tabs so they don't have a clickable component that I can put a <Link> into, and <Panels> is outside of a <Route> so I'm not sure if I'm able to access history object otherwise. I could put the panels in each <Route> but that would be really bad.
What way should I go about this?
Figured this one out finally.
import { withRouter } from 'react-router-dom'
...
<Tabs defaultActiveKey="1" onChange={(key)=> this.props.history.push(`/${key}`)}>
<TabPane tab="Tab 1" key="1" >
<Somecomponent />
</TabPane>
<TabPane tab="Tab 2" key="2">
Test me
</TabPane>
</Tabs>
...
export default withRouter(Panels);
wrapping the export with withRouter give the component access to the history object to push and read routes. I saw this solution initially but couldn't get it to work. Turns out it was because I was importing withRouter from react-router and not react-router-dom, so I was loading in the wrong history.