I want to create a music player app that has collapsed music player at the bottom of the screen, above the bottom tabs, similar to how Spotify and Apple Music have it. I just want to see how you would do a layout in that case. Any help is appreciated.
You can create custom tabs with additional view that displays the your player control. For example create CustomTabBar.js like following :
import React, { Component } from 'react';
import { View, Text } from 'react-native';
class CustomTabBar extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<View>
<View style={{height: 50}}>
{/* Player controller view */}
</View>
{/* Custom Tab view */}
</View>
);
}
}
export default CustomTabBar;
Above component will contains the player controller and custom tabs. Now you can use it with createMaterialTopTabNavigator. For example :
const HomeTabNavigator = createMaterialTopTabNavigator({
Home: {
screen: HomeStackNavigator,
},
Search: {
screen: SearchStackNavigator
},
Library: {
screen: Library,
},
}, {
...,
...
tabBarComponent: (props) => <CustomTabBar {...props} />, // use your custom tab layout
...
...
},
});
Now, you player control will displays in all your page with tabs. However if you want to use animation effect like spotify or apple music then you have to use pan responder in your player controller view.
Related
I'm new to ReactNative and started to using TabBarIOS component for a project. I have TabBarIOS component which has 5 different TabBarIOS.Item Component. These each all point another component to present. These different components are all have different backgroundColor's and styles and titles but when I change the selectedTab the change has happened but the properties of components such as backgroundColor not affect the presented component. For testing, I've log a text in componentWillMount method of the Component class for each one. And they logged successfully. Here is the partial components. For the first Component which is named as Restaurants the title is correctly showing in navigationItem but in others navigationItem's title is empty.
I've called my components as ViewControllers.
class RestaurantsComponent extends Component{
componentWillMount(){
console.log('restauranscomponent will mounted');
}
render(){
return(
<View style={{flex:1, backgroundColor:'blue'}}>
<Text>ASDFSADF</Text>
</View>
)
}
}
class SearchViewController extends Component{
componentWillMount(){
console.log('search view controller will mounted');
}
render(){
return(
<View style={{flex:1, backgroundColor:'green'}}>
<Text>askfkjasljkdfjkla</Text>
</View>
)
}
}
etc..
Here is main tabbar Component class:
export default class SimpleClass extends Component{
constructor(props){
super(props);
this.state = {
selectedTab: 'news'
}
}
changeTab(selectedTab){
this.setState({selectedTab})
}
render(){
const { selectedTab } = this.state
const styles = {
backgroundColor: 'red'
};
return(
<TabBarIOS barTintColor="white"
unselectedItemTintColor="gray"
tintColor="red"
style={{flex:1}}
>
<TabBarIOS.Item
selected={selectedTab === 'news'}
title="Restaurants"
icon={require('./assets/restaurants.png')}
onPress={() => this.changeTab('news')}
>
<NavigatorIOS
style={styles.nav}
initialRoute={{
component: RestaurantsComponent,
title : 'Restaurants'
}}
/>
</TabBarIOS.Item>
<TabBarIOS.Item
title="Search"
selected={selectedTab === 'news2'}
onPress={() => this.changeTab('news2')}
icon={require('./assets/searchIco.png')}
>
<NavigatorIOS
style={styles.nav}
initialRoute={{
component: AnotherComponent,
title : 'Search'
}}
/>
</TabBarIOS.Item>
...
.../>
Here is the Component in navigationItem for Restaurants
And for other else:
I'vent cut the tabBar item for the screenshot but the TabBarIOS is successfully works if you mind it.
Is there any bug which is currently which cause from me or what happens to navigationItem's title attributes?
I've found my answer by the way I've not figured out what was happening in here but when looking into documentation and some articles, the use of NavigatorIOS is currently making mess.And there is a cool question & answer that I think its important to get idea of createNavigator... .
Here is the link.
There is a close approach for using TabBar, Navigation etc which are named createStackNavigator and createBottomTabNavigator. As the names tell us, createStackNavigator is currently work like UINavigationController and also createBottomTabNavigator is working like UITabBarController. So this is the basic implementation of these approach.
const firstTabStack = createStackNavigator({
HomeAlways: {
navigationOptions:{
title:'WASSUP1'
},
screen:BooksNav
}
})
const secondTabStack = createStackNavigator({
HelpAlways: {
navigationOptions:{
title:'WASSUP2'
},
screen:AddBook
}
})
And finally here we come with Tab implementation.
const Tab = createBottomTabNavigator({
Home: {
screen: firstTabStack,
navigationOptions:{
title:'title1'
}
},
Another: {
screen: secondTabStack,
navigationOptions:{
title:'title2'
}
}
});
What did I do with these code?
For iOS Developers to get understand what is going on in there, there is a 2 Controller (UIViewController or Component in RN), and these have different UINavigationController's and also different titles. And all of these controllers will going to stack of the UITabBarController' viewControllers.
The images in below are proof of the successfully running.
,
I started out a bit with react-native, and I'm trying to make a "hello word" app to see how it works.
I made a menu with "tab" at the top of my screen
In the app.js I'm adding the createStackNavigator to set my routes
App.js
import { ... }
const AppNavigator = createStackNavigator({
Main: { screen: Main},
CScreen: {screen: FormCScreen},
});
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<AppNavigator />
);
}
}
This is my main screen, where I set the tabs.
Main.js
imports {AScreen, BScreen} ...
const Tab = createMaterialTopTabNavigator(
{
A: AScreen,
B: BScreen,
},
{
tabBarPosition: 'top',
});
export default class Main extends Component {
render() {
return (
<Tab/>
);
}
}
BScreen.js
Now on one of my BScreen tabs, I want to click on a button, where I hope it loads the screen (CScreen)
imports ...
export default class BScreenextends Component{
render(){
return(
<View>
<TouchableHighlight onPress={() => this.props.navigation.navigate('CScreen')}>
<Text>Click here to open CScreen</Text>
</TouchableHighlight>
</View>
);
}
}
It can render all components correctly, the only problem is that when I click the button to display the CScreen, nothing happens.
It is as if loading the Tab I lost the instacia of my navigator.
Main
Tab
A
B Button (Open CScreen) ~> this is not working
How can I open the screen through a button inside a tab?
[EDIT]
Console.log ScreenB
https://imgur.com/a/teAzpn5
I think your trying to achieve StacksOverTabs mode of navigation setup,
The mistake you made is Main screen being a normal Component inside which you have rendered the Tab Component i.e createMaterialTopTabNavigator. Hence the Tab Component will not get the correct navigation prop from the StackNavigator
Instead, you have to make Main screen itself a createMaterialTopTabNavigator.
For example,
const AppNavigator = createStackNavigator({
Main: { screen: MainTab}, // MainTab is itself a TabNavigator now
CScreen: {screen: FormCScreen},
});
const MainTab = createMaterialTopTabNavigator(
{
A: AScreen,
B: BScreen,
},
{
tabBarPosition: 'top',
});
);
Check out the official examples code in GitHub, inside that navigate to StacksOverTabs
https://github.com/react-navigation/react-navigation/tree/master/examples/NavigationPlayground/js
Thanks.
You could also have put this at the top of your App class I believe:
static router = AppNavigator.router;
There is more information here: https://reactnavigation.org/docs/en/common-mistakes.html#explicitly-rendering-more-than-one-navigator
I want to have a drawer menu in my react-native application. so like you see i'm using stack-navigation of react-native in my code to determinate the routes and a DrawerNavigator which is connected to application in screen field of stack!:
const Application = StackNavigator({
Home: {
screen: Login,
}
,
Profile: {
screen: Profile,
}
});
const easyRNRoute = DrawerNavigator({
Stack: {
screen: Application
}
}, {
contentComponent: DrawerMenu,//<XXXDraw
contentOptions: {
activeTintColor: '#e91e63',
style: {
flex: 1,
paddingTop: 15,
} });
i use Application like </Application> in app.js. my DrawerMenu which is pointed by "//
export default class DrawerMenu extends Component {
render() {
return (
<View>
<Text>Menu</Text>
</View>
);
}
}
and my page -which i want to show menu in that and got problem- contains this codes:
export default class Profile extends React.Component {
static navigationOptions = { header: null };
constructor(props) {
super(props);
this.state = {
active: 'Today',
};
}
navigate() {
this.navigate.navigation.navigate('DrawerOpen'); // open drawer
}
render() {
return (
<View style={styles.countainer}>
<Text style={styles.header}>Profile</Text>
<Button onPress={this.navigate} title="Menu"></Button>
</View>
);
}
}
the problem is this: when i click on the Menu Button. i got this Error:
undefined is not an object (evaluating
'this.props.navigation.navigate')
i tried some codes like :this.props.navigation.navigate('Home'); in component and they are working on but i dont know why it doesn't work on when i take "DrawerOpen" argument in this.navigate.navigation.navigate.
I did some search about that. someones told my remove this.prop in code, but just the error changed to navigation is undefined. i'm stuck in trouble because of this Error. its really lake of obvious tutorial about DrawerMenu in net
Can you use this code:
<Button onPress={() => this.props.navigation.navigate("DrawerOpen")} title="Menu"></Button>
Please read the following:
https://reactjs.org/docs/handling-events.html
A short quote from the website:
You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.
This is not React-specific behavior; it is a part of how functions work in JavaScript. Generally, if you refer to a method without () after it, such as onClick={this.handleClick}, you should bind that method.
use easyRNRoute insted of Application in your app.js, may be this will work
Im following this tutorial https://reactnavigation.org/docs/intro/ and im running into a bit of issues.
Im using the Expo Client app to render my app every time and not a simulator/emulator.
my code is seen down below.
I originally had the "SimpleApp" const defined above "ChatScreen" component but that gave me the following error:
Route 'Chat' should declare a screen. For example: ...etc
so I moved the decleration of SimpleApp to just above "AppRegistry" and that flagged a new error
Element type is invalid: expected string.....You likely forgot to export your component..etc
the tutorial did not add the key words "export default" to any component which I think it may have to do with the fact that im running it on the Expo app? so I added "export default" to "HomeScreen" and the error went away.
The new error that I cant seem to get rid off(based on the code below) is the following:
undefined is not an object (evaluating 'this.props.navigation.navigate')
I can't get rid of it unless I remove the "{}" around "const {navigate}" but that will break the navigation when I press on the button from the home screen
import React from 'react';
import {AppRegistry,Text,Button} from 'react-native';
import { StackNavigator } from 'react-navigation';
export default class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>Hello, Chat App!</Text>
<Button
onPress={() => navigate('Chat')}
title="Chat with Lucy"
/>
</View>
);
}
}
class ChatScreen extends React.Component {
static navigationOptions = {
title: 'Chat with Lucy',
};
render() {
return (
<View>
<Text>Chat with Lucy</Text>
</View>
);
}
}
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
Chat: { screen: ChatScreen },
});
AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
Additional Info:
When you are nesting child components, you need to pass navigation as prop in parent component.
//parent.js
<childcomponent navigation={this.props.navigation}/>
And you can access navigation like this
//child.js
this.props.navigation.navigate('yourcomponent');
Reference: https://reactnavigation.org/docs/en/connecting-navigation-prop.html
With Expo you should't do the App registration your self instead you should let Expo do it, keeping in mind that you have to export default component always:
Also you need to import View and Button from react-native: please find below the full code:
import React from 'react';
import {
AppRegistry,
Text,
View,
Button
} from 'react-native';
import { StackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>Hello, Chat App!</Text>
<Button
onPress={() => navigate('Chat', { user: 'Lucy' })}
title="Chat with Lucy"
/>
</View>
);
}
}
class ChatScreen extends React.Component {
// Nav options can be defined as a function of the screen's props:
static navigationOptions = ({ navigation }) => ({
title: `Chat with ${navigation.state.params.user}`,
});
render() {
// The screen's current route is passed in to `props.navigation.state`:
const { params } = this.props.navigation.state;
return (
<View>
<Text>Chat with {params.user}</Text>
</View>
);
}
}
const SimpleAppNavigator = StackNavigator({
Home: { screen: HomeScreen },
Chat: { screen: ChatScreen }
});
const AppNavigation = () => (
<SimpleAppNavigator />
);
export default class App extends React.Component {
render() {
return (
<AppNavigation/>
);
}
}
As Bobur has said in his answer, the navigation prop isn't passed to children of the routed component. To give your components access to navigation you can pass it as a prop to them, BUT there is a better way.
If you don't want to pass the navigation prop all the way down your component hierarchy, you can use useNavigation instead. (Which in my opinion is just cleaner anyways, and reduces the amount of code we have to write):
function MyBackButton() {
const navigation = useNavigation();
return (
<Button
title="Back"
onPress={() => {
navigation.goBack();
}}
/>
);
}
https://reactnavigation.org/docs/use-navigation/
This is just really nice because if you have multiple levels of components you wont have to continuously pass the navigation object as props just to use it. Passing navigation just once requires us to 1. Add a prop to the component we want to pass it to. 2. Pass the prop from the parent component. 3. Use the navigation prop to navigate. Sometimes we have to repeat steps 1 and 2 to pass the prop all the way down to the component that needs to use navigation. We can condense steps 1 and 2, no matter how many times they are repeated, into a single useNavigation call with this method.
I think it is best.
Try this Code: onPress={() => this.props.navigation.navigate('Chat')}
<ChildComponent navigation={props.navigation} {...data} />
This will make the navigation from the parent propagated to the subsequent child navigations.
const AppNavigation =()=>{ <SimpleApp />}
export default class App extends React.Componet{
render(){
return (
<AppNavigation/>
);
}
}
As a newbie in react-native i'm trying find a way to use react-navigation with different files without a navbar to navigate (for example just click on a button in the login view to enter the main view, clicking on log out button return to login view).
With react-navigation i made a global component 'Nav' and i placed in the main AppRegistry call:
AppRegistry.registerComponent('myApp', () => Nav);
While in the Navigator.js:
export const Nav = StackNavigator({
Login: { screen: LoginView },
AddStream: { screen: AddStreamView },
});
When i run
react-native run-android
i get the first view loaded under a white space (it should be the navigator, that i don't want in my app)
Now how can i remove the Nav from the view and how can i change View onPress a button component in another file?
There is another package that fill better my desire?
From the docs, setting the the headerMode to none should do the trick. This will hide the header on all of the screens defined in that StackNavigator. Example:
const Nav = StackNavigator({
Login: { screen: LoginView },
AddStream: { screen: AddStreamView },
},{
headerMode: 'none',
});
If you want to control the visibility of the header so that it appears on some of the screens but not all of them, then you can set headerMode to screen and for each individual screen set [the navigation prop for header: { visible: false }. See docs here. For example, if you are creating the screen component in another file, it might look like this:
// In the main file:
const Nav = StackNavigator({
Login: { screen: LoginView },
AddStream: { screen: AddStreamView },
},{
headerMode: 'screen',
});
// Hidden for your Login screen:
export default class LoginView extends Component {
static navigationOptions = {
header: { visible: false }
}
// etc...
}
// Visible for your AddStream screen:
export default class AddStreamView extends Component {
static navigationOptions = {
header: { visible: true }
}
// etc...
}
Edit: missed the second part of your question.
For navigating to a different screen, you really should go through the Hello World tutorial as it explains it. Specifically, this section. Relevant example code from the tutorial:
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>Hello, Chat App!</Text>
<Button
onPress={() => navigate('Chat')}
title="Chat with Lucy"
/>
</View>
);
}
In your case, 'Chat' would be either 'Login' or 'AddStream'.