I need to show a modal using RNRF, but I get this warning (the modal is showing for a moment and then disapears with warning).
If I set the Scene's type prop to "replace" then everything works, but I can’t do Actions.pop() in that Scene (the last one)
const App = () => {
return (
<Provider store={store}>
<Router
backAndroidHandler={() => {
goBack();
return true;
}}
>
<Modal>
<Stack key="root" hideNavBar={true}>
<Scene
key={ROUTES.LOGIN}
type="push"
duration={1}
component={Login}
duration={1}
initial={true}
/>
<Scene
key={ROUTES.TRANSACTION_SUMMARY}
type="push"
duration={1}
component={TransactionSummary}
duration={1}
/>
<Scene
key={ROUTES.PHOTO_DIALOGUE}
type="push"
duration={1}
component={PhotoDialogue}
duration={1}
/>
</Stack>
<Scene modal key={ROUTES.ABOUT} type="push" component={About} hideNavBar />
</Modal>
</Router>
</Provider>
);
};
The last scene refers to the About component. It has a button with the onPress prop in the render method, there was a call goBack(). Works good without the brackets
Related
I'm trying to pass some data from my button
<Button
text="Explore"
elementStyles={secondaryButton}
onPress={() => Actions.dashboard({
demoMode: true,
})}
testID="button-explore"
/>
which is located in Example.js, to Dashboard.js
Here is my router stack located under App.js
<Stack key="root" hideNavBar>
<Scene key="splash" initial component={SplashScreen} />
....
<Scene key="example" component={example} />
....
<Tabs key="tabbar" hideNavBar tabBarPosition="bottom" showLabel={false} tabBarStyle={styles.tabBar} swipeEnabled={false} animationEnabled={false}>
<Scene key="dashboard" hideNavBar title="Dashboard" component={Dashboard} icon={TabBarItem} defaultIcon={Config.HOME_ICON_NAME} />
<Scene key="history" hideNavBar title="Stats" component={History} icon={TabBarItem} defaultIcon={Config.STATS_ICON_NAME} />
<Scene key="rewards" hideNavBar title="Points" component={Rewards} icon={TabBarItem} defaultIcon={Config.REWARDS_ICON_NAME} />
<Scene key="profile" hideNavBar title="Profile" component={Profile} icon={TabBarItem} defaultIcon={Config.PROFILE_ICON_NAME} />
</Tabs>
/>
</Stack>
When I call this.props.demoMode under dashboard I get undefined.
hi try to add _ befor the second screen key
onPress={() => Actions._dashboard({
demoMode: true,
})}
something like that but if it doesn't work remove your node module folder change the router flux version , npm i again and you will be fine
This is tab bar. In this notification section i want send counter every time new notification comes.
Here is the router component. In notification_page scene i want to update the counter if there is notifications.
<Router>
<Stack key="root" hideNavBar={true}>
<Scene key="lightbox" lightbox >
<Scene key="drawer" drawer contentComponent={Drawer}>
<Scene key="tabbar"
showLabel={true}
>
<Scene
key="landing_page"
component={Landing}
title={'Timeline'}
/>
<Scene
key="search_tab"
component={Search} title="Search"
renderLeftButton={() => this.renderLeftMenuButton()}
/>
<Scene
key="tab3_1"
component={CreateBlog}
title="Create"
renderLeftButton={() => this.renderLeftMenuButton()}
/>
<Scene
tabBarLabel = {({ focused }) => (
<View>
<Icon
size={40}
name={`ios-notifications-outline`}
text={`My Account`}
/>
</View>
)}
key="notification_page"
component={Notifications}
title="Notifications"
renderLeftButton={() => this.renderLeftMenuButton()}
/>
</Scene>
</Scene>
</Scene>
</Stack>
</Router>
Im using Redux for state management.
<Provider store={store}>
<View style={{flex:1}}>
<RouterComponent />
</View>
</Provider>
If you're using redux or a helper method with state, whenever a new notification comes you can refresh the tab bar props with a counter using the actions method.
Actions.refresh({ counter: 1 }) // or whatever the counter is
React Native Router Flux Docs
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 have my react component on my main index file or my main component I would like to pass a state change to that component but from a pure JS file/function not sure what's the best approach or correct way of doing this. I have tested it with redux but feels like an overkill especially since I need to pass loading progress.
it's basically loading overlay which needs to be called from the post api file.
Here is my code
Index
render() {
return (
<View style={styles.container}>
<Provider store={store}>
<ConnectedRouter>
<Scene key="root" hideNavBar hideTabBar>
<Scene key="public">
<Scene key="login" component={Login} initial={true} title={'Login'} />
<Scene key="ResetPassword" component={ResetPassword} title={'Reset Password'} />
</Scene>
<Scene key="tabBar" tabs lazy>
<Scene key="tab1" title="Home" tabBarLabel="Home" icon={HomeTabIcon}>
<Scene key='Home' component={Home} title='Home' initial={true} panHandlers={null}/>
<Scene key='Teams' component={Teams} title='Teams' initial={false} />
</Scene>
<Scene key="tab2" title="Photos" tabBarLabel="Photos" icon={PhotosTabIcon}>
<Scene key='Photos' component={Photos} title='Photos' back backTitle='Back' initial={false} />
<Scene key='SinglePhoto' component={SinglePhoto} title='Photo' back backTitle='Back' initial={false} />
<Scene key='PhotoUpload' component={PhotoUpload} title='Upload Photo' back backTitle='Back' initial={false} />
</Scene>
<Scene key="tab3" title="Site Diary" tabBarLabel="Site Diary" icon={SiteDiaryTabIcon}>
<Scene key='SiteDiary' component={SiteDiary} title='SiteDiary' initial={false} />
</Scene>
</Scene>
</Scene>
</ConnectedRouter>
</Provider>
<MessageBar/>
<LoadingOverlay isVisible={this.state.overlayIsVisible} progress={this.state.overlayProgress} indeterminate={this.state.indeterminate} />
</View>
);
}
API file
export const sync = (isConnected) => {
const offlineData = store.getState().newData;
console.log(offlineData);
// We have offline data
if(!_.isEmpty(offlineData.photos)){
console.log('We have offline data')
// We have a connection
if(isConnected) {
console.log('We have a connection')
// Loops thur the offline data and uploads it
//for (let i = 0; i < offlineData.length; i++) {
//}
}
}
};
Which is getting called from index via the following
// Connection function for offline / online
_handleConnectionChange = (isConnected) => {
// Updates the store with selected project
store.dispatch(connectionActionCreators.update(isConnected));
// Gets the offline data from the store
const hasOfflineData = store.getState().newData.hasData;
console.log(hasOfflineData);
if(hasOfflineData){
this.setState({
overlayIsVisible:true,
//overlayProgress:0,
});
}
// Syncs data
syncOffineData.sync(isConnected);
};
I have an alert to fire on a component's componentDitMount which is NOT an initial route (MainHome in this case). But when another component that is initial (MySchedule) is loaded it displays the alert. The routes are:
export default class Example extends React.Component {
render() {
return <Router createReducer={reducerCreate}>
<Scene key="modal" component={Modal} >
<Scene key="root" hideNavBar={true}>
<Scene key="tabbar" component={NavigationDrawer}>
<Scene key="main" tabs={true} default="tab2" >
<Scene key="my_schedule" component={MySchedule} hideTabBar={true} navBar={NavBar} initial={true} />
<Scene key="intro" component={Initial} hideTabBar={true} navBar={NavBar} />
<Scene key="home" component={Home} hideTabBar={true} navBar={NavBar} />
<Scene key="main_home" component={MainHome} hideTabBar={true} navBar={NavBar} />
</Scene>
</Scene>
</Scene>
<Scene key="error" component={Error}/>
</Scene>
</Router>;
}
}
And in the component MainHome's componentDidMount the alert is fired.
componentDidMount() {
Alert.alert(
'“Welcome...',
[
{text: 'OK'}
]
);
}
So in the initial component (MySchedule in this case) should not display the alert but it does and I can't figure out why. Your help would be much appreciated.
This is how NavigationView works.
<View
style={this.props.style}>
{this.props.navigationState.children.map(this._renderScene)}
</View>
NavigationExperimental is changing a lot, so this could change.
See https://github.com/facebook/react-native/issues/6579