Root component is App.js
using Redux-saga as well.
my intention is that after login i want to use float button global.
but there are 3 tabs with Tab-Navigator (e.g Mail/Profile/Gallery..) and they have each Stack Navigator.
and i want to use floating button with different functions by tabs.
For example,
Mail.js --> fab function(Write)
Profile.js --> fab function(Call, Message)
Gallery.js -- > fab function(Share, Upload)..
like that.
where should i put Fab Component to use globally??
i'm using library
https://github.com/santomegonzalo/react-native-floating-action
if there is other nice library i would accept if you guys recommend me. thanks
App.js
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<View style={styles.container}>
<ReduxNavigation />
</View>
</Provider>
)}}
You can use react-native-action-button module for action button.
if your action button is independent of current screen on which you are, then you can use it in root component, as the action button have absolute position.
here is sample code that you can use for reference.
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<View style={styles.container}>
<ReduxNavigation />
<ActionButton buttonColor="rgba(231,76,60,1)">
<ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() => console.log("notes tapped!")}>
<Icon name="md-create" style={styles.actionButtonIcon} />
</ActionButton.Item>
<ActionButton.Item buttonColor='#3498db' title="Notifications" onPress={() => {}}>
<Icon name="md-notifications-off" style={styles.actionButtonIcon} />
</ActionButton.Item>
<ActionButton.Item buttonColor='#1abc9c' title="All Tasks" onPress={() => {}}>
<Icon name="md-done-all" style={styles.actionButtonIcon} />
</ActionButton.Item>
</ActionButton>
</View>
</Provider>
)
}
}
Related
I have a React Native project using a React Navigation Drawer, using a custom drawer component:
const CustomDrawerContentComponent = (props) => (
<Container>
<Header androidStatusBarColor={Colors.BlueDark} title="Title" style={styles.drawerHeader} onPress={() => this.props.navigation.navigate('Home')}>
<Body style={styles.container}>
<LogoCircle size={15} />
<Container style={styles.drawerTextContainer}>
<Text style={styles.drawerText}>My App</Text>
</Container>
</Body>
</Header>
<Content>
<DrawerItems {...props} />
</Content>
</Container>
);
Is it possible to add dividers to make sections of drawer items? I would like to have half of my items in one section, and the other half in another, split by a divider.
I know it is possible to create custom drawer entries that navigate to certain pages on press, but in this case I cannot use styling such as "activeBackgroundColor".
i have a component in which on button click i render a component
<View style={styles.container}>
<Text> in Default component!</Text>
<Button title="add"
onPress={this.handelSubmit} />
{items.map((item, index) => (
<Home key={index} data={index} />))}
</View>
and my home component look like
<View style={styles.container}>
<Text onPress={() => { this.props.navigation.navigate("Calculator")}}>Semester {this.props.data +1}</Text>
</View>
onPress event i want to navigate to other screen i.e 'Calculator.js' but i got an error
i am using react-navigation for navgation
If you want to navigate from a component, you have to use your component like this:
<Home key={index} data={index} navigation={this.props.navigation} />
I'm using react-navigation and implementing drawer.
It worked on the iOS but it's not working on the android.
When I call _drawToggle,
_drawerToggle = () => {
this.props.navigation.navigate('DrawerOpen');
}
The screen gets darker(seems like working, but not quite).
Here is return value of the render() function.
<View style={{flex:1}}>
<Header
headerText="Restaurant List"
navigation={this.props.navigation}
drawerToggle={this._drawerToggle}
/>
<ScrollView>
<FlatList
data={restaurants}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
</ScrollView>
</View>
My home page contains a View. This view contains a flat list with items. The flat list is being rendered through a different component
I should be able to use something like this.props.navigation.navigate('DetailPage') from the component not from my homePage.
I think i should pass the navigation as a prop to the but not sure how i could do that.
Navigation File
export const HomePageStack = StackNavigator({
Homepage:{
screen:homePage,
},
DetailPage:{
screen: DetailPage,
}
})
Home Page Screen
render(){
return(
<View>
<DetailedArea />
</View>
)}
Detailed Area
render(){
return(
<TouchableHighlight onPress={this.props.navigation.navigate('DetailPage')}>
<Text>CLICK HERE TO GO TO DETAIL PAGE</TEXT>
</TouchableHighlight>
)}
the HomeScreen has this.props.navigation, but it isn't passed down to DetailedArea.
I recommend the following:
HomeScreen
render(){
return(
<View>
<DetailedArea onNavigate={() => this.props.navigation.navigate('DetalPage')} />
</View>
)}
DetailedArea
render(){
return(
<TouchableHighlight onPress={this.props.onNavigate}>
<Text>CLICK HERE TO GO TO DETAIL PAGE</TEXT>
</TouchableHighlight>
)}
I have a tab bar in my application that I don't want the navigation transition to affect each time a new route is rendered. Therefore I want to place the tab bar outside the Navigator, but how do I trigger the navigation actions in that case? I cannot access the navigator object that is passed to the renderScene function from outside the Navigator.
Here is what is returned in app.js:
<View>
<Navigator
ref="navigator"
initialRoute={{name: "start"}}
renderScene={this.renderScene.bind(this)}
configureScene={this.configureScene.bind(this)}
/>
<TabBar navigator={???} style={styles.nav} />
</View>
Ok, I think I solved this. The problem seems to be that the refs is not available at the first render of the component. I solved this by:
<Navigator
ref={(r) => { this.navigatorRef = r; }}
initialRoute={{name: "start"}}
renderScene={this.renderScene.bind(this)}
configureScene={this.configureScene.bind(this)}
/>
{this.state ? <TabBar navigator={this.state.navigatorRef} style={styles.nav} /> : null }
and added the this:
componentDidMount() {
this.setState({navigatorRef: this.navigatorRef});
}
just to make the component render a second time with the TabBar.
I don't think this is the best way to do what you want. But to answer your question:
<View>
<Navigator
ref="navigator"
initialRoute={{name: "start"}}
renderScene={this.renderScene.bind(this)}
configureScene={this.configureScene.bind(this)}
/>
<TabBar getNavigator={()=>this.refs.navigator} style={styles.nav} />
</View>
And then you could call getNavigator() from your TabBar
Here's another version that worked for me. It is hackish and will probably break in the future but might help if you're in a hurry ;)
<View>
<Navigation
ref={(r) => { this.navigation = r }}
/>
<OtherScreen
navigation={(this.navigation || {})._navigation}
{...this.props}
/>
</View>