this is my first question so pardon me If I make any mistakes.
I am trying to customise navbar icons for IOS using React native router flux but I don't know how to retrieve my custom made icons (png files) In some examples they use icon={tabIcon} like so but what I need to do is decribe a path for the image source but I don't know how to type it in the right syntax.
Any help would be appreciated. Thanks.
Here is my code:
<Scene key="root">
<Scene key="tabbar" tabs>
<Scene key="tab2" title="Categories" **icon={TabIcon}** >
<Scene key="categories" component={Categories} title="Categories" initial />
<Scene hideTabBar key="categorylisting" component={CategoryListing} title="Adventure" />
<Scene hideTabBar key="showdetails" component={ShowDetails} title="TV Show Details" />
</Scene>
It seems to be missing from the docs, but it's done like this.
function CustomIcon(props) {
return (
<View>
<Image
source={iconSource}
style={{ width: 22, height: 25 }}
tintColor={'red'}
/>
<Text>Tab1</Text>
</View>
);
}
<Scene key="tab1" icon={CustomIcon} >
</Scene>
Related
I'm making simple application using react-native, and I am Using react-native-router-flux.
I want to change header component from 'chat' to 'Username' when i'm in nested screen. I tried several ways but I don't know where to put the header component code.
Code for TabBar
<Router titleStyle={styles.navTitle} >
<Scene key="root">
<Scene title="Chat" initial key="root" tabBarPosition='top' tabs tabBarStyle={{ top: 0, backgroundColor: '#ddd' }} tabBarIconContainerStyle={{ borderColor: '#000', borderWidth: 1}} initial>
<Scene key="first" title="First" icon={TabIcon}>
<Scene key="scarlet" component={BlueScreen} hideNavBar initial />
</Scene>
<Scene key="second" title="Second" icon={TabIcon}>
<Scene key="scarlet2" component={GrayScreen} hideNavBar initial />
</Scene>
<Scene key="third" title="Third" icon={TabIcon}>
<Scene key="scarlet3" component={ScarletScreen} hideNavBar initial />
<Scene key="root" component={SecondScene} hideNavBar title="Username" />
</Scene>
</Scene>
</Scene>
when I'm in SecondScene I want my header change from Chat to Username
You can add this code in the Component where you switch the tab and want username as header.
Actions.refresh({ title: 'Username' }).
you can add this line of code as per your Apps flow.
If you are switching to chat you can add
Actions.refresh({ title: 'chat' }).
Hope it helps !
You can change navigation title anytime. For your use when you got the username just run the following code.
this.props.navigation.setParams({
title: "YOUR_USER_NAME",
});
If you get the user name when navigating to current scene it's better you change the title in componentWillMount.
componentWillMount() {
this.props.navigation.setParams({
title: "YOUR_USER_NAME",
});
}
I am using react native router flux in my react native application.
I created some scenes in Route.
<Router>
<Scene key="root" hideNavBar={true} navigationBarStyle={{ backgroundColor: '#81b71a' }}>
<Scene key="auth">
<Scene key="login" component={LoginForm} title="Please Login" />
</Scene>
<Scene key="main" navigationBarStyle={{ backgroundColor: '#8fff1f' }}>
<Scene
key="mainScene1"
component={EmployeeList}
title="MainScene1"
/>
<Scene key="mainScene2" component={EmployeeCreate} title="MainScene1" />
<Scene key="MainScene3" component={EmployeeEdit} title="Edit Employee" />
</Scene>
</Scene>
</Router>
I want to navigate from mainScene3 to mainScene1 but getting error "Error: There is no route defined for key mainScene1. Must be one of: 'auth','main' "
How to tackle this issue? These two scene are in the same bucket.
Another query - How to navigate from login scene of auth to any scene say mainScene2 ? Is there any special method for that?
I word on react-native-router-flux and I have a problem ... I am reset my Stack navigation when I am changing of Tab navigation.
I try with backToInitial but I need to press two times on my tab for reset my stack ... I don't understand why.
My navigation :
-OSU
-Scarlet
-Gray
-VU
-Blue
-Black
So when I am on Blue and I press one time on OSU I when to access at Scarlet not gray
My code :
export default class App extends Component {
render() {
return (
<Router>
<Tabs
key="tabbar"
tabBarStyle={{ backgroundColor: '#FFFFFF' }}
backToInitial={true}
>
<Scene key="osu" title="OSU" icon={TabIcon} type='reset' backToInitial={true}>
<Scene
key="scarlet"
component={ScarletScreen}
title="Scarlet"
/>
<Scene
key="gray"
component={GrayScreen}
title="Gray"
/>
</Scene>
<Scene key="vu" title="VU" icon={TabIcon} backToInitial={true}>
<Scene
key="blue"
component={BlueScreen}
title="Blue"
/>
<Scene
key="black"
component={BlackScreen}
title="Black"
/>
</Scene>
</Tabs>
</Router>
);
}
}
I'm making simpe application using react-native, and its third party module react-native-router-flux for easy handling component navigator.
I want to add header component above tabs which showing my app name, and selected tab name. I tried several ways but I don't know where to put the header component code.
My top component code like this
<Router>
<Scene key="root">
<Scene key="todoList" tabs tabBarStyle={{ top: 0, backgroundColor: '#ddd' }} tabBarIconContainerStyle={{ borderColor: '#000', borderWidth: 1}} initial>
<Scene key="first" title="First" icon={TabIcon}>
<Scene key="scarlet" component={TabComponent1} hideNavBar title="tab1" initial />
</Scene>
<Scene key="second" title="Second" icon={TabIcon}>
<Scene key="scarlet2" component={TabComponent2} hideNavBar title="tab2" initial />
</Scene>
<Scene key="third" title="Third" icon={TabIcon}>
<Scene key="scarlet3" component={TabComponent3} hideNavBar title="tab3" initial />
</Scene>
</Scene>
</Scene>
</Router>
This actually look like
What I want to do is simply add header component above tabs, like
How to do that? Please give me a hint! where I put that code?
If you want to use your own Header component, I think you should write one for yourself in a separate file and export/import it to the screens. The react-native itself is rendering the components one after the other in order (from up to the bottom). So if you are doing it this way you should place your imported Header component on the top inside the render() function.
The other way is using a third party module like the native-base (which has a Header component already definied).
https://github.com/GeekyAnts/NativeBase
I have a tabbar component rendered within which I want to wrap with a custom native module for a custom style behavior not available within react's css (linear opacity gradience.)
<Scene key="video" tabs={true} tabBarStyle={styles.tabBarStyle}>
<Scene key="profile" title="profile" component={MyProfile} icon={TabIcon} hideNavBar />
<Scene key="trend" title="trend" component={TrendMenuScene} icon={TabIcon} hideNavBar />
<Scene key="home" title="home" component={MainMenuScene} initial icon={TabIcon} hideNavBar />
<Scene key="star" title="star" component={Favourite} icon={TabIcon} hideNavBar />
<Scene key="discover" title="discover" component={Search} icon={TabIcon} hideNavBar />
</Scene>
My first attempt and thought would be to add a component attribute to the top level that wraps the scene component. inside that component might be something like.
return (
<LinearGradient key="gradientWrap" colors={['transparent', 'rgba(0, 0, 0, 0.5)']} style={styles.linearGradient}>
{this.props.children}
</LinearGradient>
)
this does not work and throws a error. I have tried cloning props but I wrap everything and the entire pages is wrapped in the linear gradient :/
So how to wrap just the tabbar in the linear gradient? Or more generally any wrapping component.