I have a simple example of react-router v4 & route transitions. It follows the example shown at https://reacttraining.com/react-router/web/example/animated-transitions. The result, however, is only the last route is shown. The others are just blank. https://codesandbox.io/s/r0PvB30wk.
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { CSSTransitionGroup } from 'react-transition-group'
import About from './components/About';
import Home from './components/Home';
import Topics from './components/Topics';
import './styles.css'
const BasicExample = () => (
<Router>
<Route render={({ location }) => (
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>
<hr />
<CSSTransitionGroup
transitionEnterTimeout={300}
transitionLeaveTimeout={300}
transitionName="fade"
>
<Route exact path="/" component={Home} location={location} key={location.key} />
<Route path="/about" component={About} location={location} key={location.key} />
<Route path="/topics" component={Topics} location={location} key={location.key} />
</CSSTransitionGroup>
</div>
)}/>
</Router>
);
render(<BasicExample />, document.body);
For anyone interested, the only way I could get this to work was to use a <switch> from react-router.
import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'
import { CSSTransitionGroup } from 'react-transition-group'
import About from './components/About'
import Home from './components/Home'
import Topics from './components/Topics'
import './styles.css'
const BasicExample = () => (
<Router>
<Route render={({ location, history, match }) => (
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>
<hr />
<CSSTransitionGroup
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
transitionName="fade"
>
<Switch key={location.key} location={location}>
<Route exact path="/" component={Home} location={location} key={location.key} />
<Route path="/about" component={About} location={location} key={location.key} />
<Route path="/topics" component={Topics} location={location} key={location.key} />
</Switch>
</CSSTransitionGroup>
</div>
)}/>
</Router>
)
render(<BasicExample />, document.body)
You have to write tags like code, otherwise they disappear... So you ment <Switch>? :)
Related
I'm triyng to use the Footer component from native-base in my view, but i can't see nothing when i implement the code from: Footer component native-base
I don't know if maybe is a bug or if i need implement an aditional option in my code.
My code:
(I dont show Login.tsx because only use footer in Home view)'.
App.tsx
import {createStore} from 'redux';
import rootReducer from './Store/Reducers/Reducers';
const store = createStore(rootReducer);
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { loading: true };
}
async componentDidMount() {
await Font.loadAsync({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
});
this.setState({ loading: false });
}
render(){
if (this.state.loading) {
return (
<Root>
<AppLoading />
</Root>
);
}
else {
return (
<Provider store={store}>
<Root>
<NavigationContainer>
<Navigator/>
</NavigationContainer>
</Root>
</Provider>
);
}
}
}
Navigator.tsx
import React from 'react'
import { createStackNavigator } from '#react-navigation/stack'
import Login from '../Views/Login'
import Home from '../Views/Home'
import Register from '../Views/Register'
const Stack = createStackNavigator();
const Navigator= () =>{
return (
<Stack.Navigator>
<Stack.Screen name="Login" component={Login} options={{headerShown:false}}/>
<Stack.Screen name="Home" component={Home} options={{title:'Home.'}}/>
<Stack.Screen name="Register" component={Register} options={{title:'Register.'}}/>
</Stack.Navigator>
);
}
export default Navigator;
Home.tsx (Only the footer here)
import React from 'react'
import {Footer, Icon, Button, Text, FooterTab, Container} from 'native-base'
import Styles from './Styles/HomeStyles'
import {connect} from 'react-redux'
const Home =(props) => {
const {users} = props;
return(
<Container style={Styles.container}>
{users.list !== undefined && users.list.length>0 ?
users.list.map(user=> (
<Text>Hello {user.nick}</Text>
))
: null
}
<Footer>
<FooterTab>
<Button vertical>
<Icon name="apps" />
<Text>Apps</Text>
</Button>
<Button vertical>
<Icon name="camera" />
<Text>Camera</Text>
</Button>
<Button vertical active>
<Icon active name="navigate" />
<Text>Navigate</Text>
</Button>
<Button vertical>
<Icon name="person" />
<Text>Contact</Text>
</Button>
</FooterTab>
</Footer>
</Container>
);
}
const mapStateToProps=(state)=>{
const {users} = state;
return {users};
}
export default connect(mapStateToProps)(Home);
The result in Home:
Try add Content before Footer, like that, Content is also imported from native-base, if it's still not working, try removing the style of the container
<Container>
<Content><Text>dsdsds</Text></Content>
<Footer>
<Button vertical>
<Icon name="apps" />
<Text>Apps</Text>
</Button>
</Footer>
</Container>
I'm trying to figure out how to pass props to the 'Camera' component but getting a syntax error when i try
component= { Camera doSomething={this.doSomething}}
cant seem to find documentation to help on this one. Im sure its simple if you know how - hoping someone can assist.
my code
import React, { Component } from 'react';
import Camera from './camera'
import VideoComponent from './video'
import AudioComponent from './audio'
import File from './file'
import { createMaterialBottomTabNavigator } from '#react-navigation/material-bottom-tabs';
import { MaterialCommunityIcons } from 'react-native-vector-icons';
const CaptureNav = createMaterialBottomTabNavigator();
class Capture extends Component {
render(){
return (
<CaptureNav.Navigator >
<CaptureNav.Screen
name="Camera"
component= {Camera}
options={{
tabBarIcon : () => (
<MaterialCommunityIcons name='camera' color={'black'} size={26} />
)
}}
/>
<CaptureNav.Screen
name="Video"
component= {VideoComponent}
/>
<CaptureNav.Screen
name="Audio"
component= {AudioComponent}
/>
<CaptureNav.Screen
name="File"
component= {File}
/>
</CaptureNav.Navigator>
)
}
}
export default Capture
<Stack.Screen name="Home">
{props => <HomeScreen {...props} extraData={someData} />}
</Stack.Screen>
check this
I have a componet like:
import React, { Component } from 'react'
import { StyleSheet } from 'react-native'
import { StyleProvider, Container, Content, Footer, FooterTab, Button, Icon } from 'native-base'
export default class MainFooter extends Component {
render() {
return (
<StyleProvider style={footerTabTheme}>
<Footer>
<FooterTab>
<Button>
<Icon name="ios-home" />
</Button>
<Button active>
<Icon name="ios-people" />
</Button>
<Button>
<Icon style={{fontSize: 45}} name="ios-radio-button-on-outline" />
</Button>
<Button>
<Icon name="md-medkit" />
</Button>
<Button>
<Icon name="ios-people" />
</Button>
</FooterTab>
</Footer>
</StyleProvider>
)
}
}
const footerTabTheme = {
"NativeBase.Button": {
".active": {
backgroundColor: "#c71818",
}
}
}
According to documentation I should be able to customize the active button background color for footer now.
But I am getting error about can not read androidRipple or something.
What is wrong in here ?
According to the documentation, you need wrap all UI inside the 'Container' component:
<StyleProvider style={...}>
<Container> {*<--------------*}
...
<Container>
</StyleProvider>
I'm using react-router v4 and I'd like to hide the NavBar on certain routes. How can I hide the NavBar on the login page? I've tried a few different solutions but none seems to work. Some insight would be appreciated.
const App = appProps => (
<Router>
<ScrollToTop>
<Container fluid>
<NavBar {...appProps} />
<Switch>
<Route name="landing" path="/landing" component={LandingPage} {...appProps} />
<Route name="login" path="/login" component={LoginPage} />
</Switch>
</Container>
</ScrollToTop>
</Router>
);
You should have a layout component that renders the required components depending on the route.
const AppLayout = (props) => {
return (
<ScrollToTop>
<Container fluid>
{props.navBar ? React.createElement(props.navBar) : null}
{props.children}
</Container>
</ScrollToTop>
);
};
Then create the following route component that passes down its props the the layout:
const AppRoute = ({ component, ...routeProps }) => {
return (
<Route {...routeProps} render={(props) => {
return (
<AppLayout { ...props} {...routeProps}>
{React.createElement(component, props)}
</AppLayout>
);
}} />
);
};
Finally, update your App component so it looks like this:
const App = appProps => (
<Router>
<Switch>
<AppRoute name="landing" path="/landing" navBar={NavBar} component={LandingPage} {...appProps} />
<AppRoute name="login" path="/login" component={LoginPage} />
</Switch>
</Router>
);
I got this error after tapping Categories Tab(Button):
undefined is not object (evaluating _this2.props.navigation.navigate)
it seems that the navigation property is not defined in AppFooter
I use nativebase for themeing.
App.js
...
import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
export default class Home extends Component {
static navigationOptions = {
header: null,
}
render() {
return (
<StyleProvider style={getTheme(platform)}>
<Container>
<Header style={{justifyContent:'flex-end'}}>
. . .
</Header>
<Content>
. . .
</Content>
<AppFooter/>
</Container>
</StyleProvider>
);
}
}
const Pardisiha = StackNavigator({
Home: { screen: Home },
Category: { screen: Category },
});
AppRegistry.registerComponent('Pardisiha', () => Pardisiha);
AppFooter.js
import React, { Component } from 'react';
import { Footer, Button, FooterTab, Text, Icon } from 'native-base';
export default class Index extends Component {
render() {
return (
<Footer>
<FooterTab>
<Button vertical style={{paddingLeft:0,paddingRight:0}}>
<Icon name="person" />
<Text>Profile</Text>
</Button>
<Button vertical style={{paddingLeft:0,paddingRight:0}}>
<Icon name="search" />
<Text>Search</Text>
</Button>
<Button vertical style={{paddingLeft:0,paddingRight:0}} onPress={() => this.props.navigation.navigate('Category')} >
<Icon active name="list" />
<Text>Categories</Text>
</Button>
<Button vertical active style={{paddingLeft:0,paddingRight:0}} onPress={() => this.props.navigation.navigate('Category')} >
<Icon name="home" />
<Text>Home</Text>
</Button>
</FooterTab>
</Footer>
);
}
}
i have a solution for you, i have tried your code, and work in me.
you can add function to navigate your navigation and passing it into AppFooter Component, this is the function :
App.js
onNavigate = (Screen) =>{
this.props.navigation.navigate(Screen)
}
and then passing into your AppFooter, modify your code to this one:
App.js
<AppFooter onNavigate={this.onNavigate} />
and then if you want to call this function, modify to this one too:
AppFooter.js
<Button vertical style={{paddingLeft:0,paddingRight:0}} onPress={() => this.props.onNavigate('Category')} >
<Icon active name="list" />
<Text>Categories</Text>
</Button>
<Button vertical active style={{paddingLeft:0,paddingRight:0}} onPress={() => this.props.onNavigate('Home')} >
<Icon name="home" />
<Text>Home</Text>
</Button>
Hope can solving your problem, please notice me if you have another error, thanks :)