Develop Reference

How to use react-native-flash-message with react-native-navigation

I am using Wix's react-native-navigation and I want to use react-native-flash-message. In the official document https://www.npmjs.com/package/react-native-flash-message, they have given we can use globally as well as locally but in my code, I am not getting where should I use it.
following is my code.
this is my app.js
import { Navigation } from "react-native-navigation";
import { Provider } from "react-redux";
import registerScreens from './components/Screens'
import Icon from 'react-native-vector-icons/FontAwesome';
import configureStore from "./store/configureStore";
const store = configureStore();
registerScreens(Provider, store);
// Start a App
Navigation.events().registerAppLaunchedListener(() => {
Promise.all([
Icon.getImageSource("bars", 30, 'black'),
Icon.getImageSource("share-alt", 30, 'black')
]).then(sources => {
Navigation.setRoot({
root: {
sideMenu: {
left: {
component: {
name: 'app.NavigationDrawer',
passProps: {
text: 'This is a left side menu screen'
}
}
},
center: {
stack: {
id: 'mainStack',
children: [
{
stack: {
id: 'tab1Stack',
children: [
{
component: {
name: 'app.Component'
}
}
],
options: {
topBar: {
background: {
color: '#50A7C2',
},
title: {
text: 'Namaz Timing',
fontSize: 20,
//color: 'white',
fontFamily: 'Ubuntu',
alignment: 'left'
},
leftButtons: [
{
id: 'buttonOne',
icon: sources[0]
}
],
rightButtons: [
{
id: 'buttonTwo',
icon: sources[1]
}
]
}
}
}
},
],
options: {
topBar: {
background: {
color: '#50A7C2',
}
},
}
}
}
}
}
});
});
});
And this is my function where I want to use it
import qs from 'qs';
import { AsyncStorage } from 'react-native';
export async function addMasjid(Name, Address, email, Timing1, Timing2, Timing3, Timing4, Timing5, Timing6, Timing7) {
const Data = await AsyncStorage.getItem('tokenData');
parsed = JSON.parse(Data)
var token = parsed.access_token;
return fetch(`URL`, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/x-www-form-urlencoded',
},
body: qs.stringify({
'name': Name,
'address': Address,
'email': email,
'time_': Timing,
'time_': Timing,
'time_': Timing,
'time_': Timing,
'time_': Timing,
'time_': Timing,
'time_': Timing,
})
})
.then(res => res.json())
.catch(err => console.log(err))

Import the Flash Message component in your App.js and call it in the bottom.
App.js
import React from "react";
import { View } from "react-native";
import FlashMessage from "react-native-flash-message";
export default class App extends React.Component {
render() {
return (
<View style={{ flex: 1 }}>
// your entire code
<FlashMessage position="top" /> <--- at the bottom
</View>
);
}
}
Now, in your file where you wanna use it.
import { showMessage, hideMessage } from "react-native-flash-message";
Then, just use showMessage in the function you want to. Example:
const someFunc = () => {
showMessage({
message : 'some message',
type: 'success'
... other attributes
})
}

drawerLockMode : 'locked-closed' not working directly with createStackNavigator

When I specify drawerLockMode direactly with createStackNavigator it is not working.
const drawerStack = createStackNavigator({
HomeScreen: { screen: HomeScreen },
}, {
headerMode: 'screen',
navigationOptions: {
drawerLockMode:'locked-closed'
}
})
But when I use drawerStack variable to define navigationOptions, it is working.
drawerStack.navigationOptions = ({ navigation }) => {
drawerLockMode = 'locked-closed';
return {
drawerLockMode,
};
};
Am I doing any mistake when I am directly using it inside createStackNavigator?
Update
As #bennygenel suggested, we need to user drawerLockMode in drawerNavigator instead of stackNavigator. Here is what i have done.
const drawerNavigator = createDrawerNavigator({
drawerStack: drawerStack
}, {
contentComponent: DrawerComponent,
navigationOpions:{
drawerLockMode:'locked-closed'
}
})
But it is not working in this way also. The only way it is working is by using the const variable created using createStackNavigator or createDrawerNavigator

Try the following code, it's working for me:
const UserHome_StackNavigator = StackNavigator({
userHm: {
screen: UserHome,
navigationOptions: ({ navigation }) => ({
title: 'User screen title',
headerStyle: {
backgroundColor: 'white',
},
headerTintColor: 'black'
}),
},
});
UserHome_StackNavigator.navigationOptions = ({ navigation }) => {
let drawerLockMode = 'locked-closed';
//logic here to change conditionaly, if needed
return {
drawerLockMode,
};
};

in case someone need this:
const drawerNavigator = createDrawerNavigator({
drawerStack: drawerStack
}, {
contentComponent: DrawerComponent,
navigationOpions: ({navigation}) => {
let routeName = navigation.state.routes[navigation.state.routes.length-1].routeName;
if(['Animation', 'Splash', 'Intro', 'Login', 'Signup'].indexOf(routeName)>=0){
return {
drawerLockMode: 'locked-closed'
}
}
return {}
}
})

React Native Android app is getting crashed when drawer implementation is done

I'm actually working on single page navigation, tab navigation and Drawer navigation by using react native navigation.
After the drawer implementation is done, single page navigation is working fine but the whole application is getting crashed after clicking on a login button.
Take a look at the code that I have written :
app.js:
import { Navigation } from 'react-native-navigation';
import AuthScreen from './src/screens/Auth/Auth';
import SharePlaceScreen from './src/screens/SharePlace/SharePlace';
import FindPlaceScreen from './src/screens/FindPlace/FindPlace';
import SideDrawer from "./src/screens/SideDrawer/SideDrawer";
// register screens
Navigation.registerComponent('example.AuthScreen', () => AuthScreen);
Navigation.registerComponent('example.SharePlaceScreen', () => SharePlaceScreen);
Navigation.registerComponent('example.FindPlaceScreen', () => FindPlaceScreen);
Navigation.registerComponent('example.SideDrawer', () => SideDrawer);
// start a app
Navigation.startSingleScreenApp({
screen: {
screen:'example.AuthScreen',
title:"Login"
}
})
startMainTab.js
import { Navigation } from 'react-native-navigation';
import {Dimensions} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
const wDim = Dimensions.get('window');
const fixedWidth = Math.round(wDim.width * wDim.scale * 0.8);
const startTab = () =>{
Promise.all([
Icon.getImageSource("map",30),
Icon.getImageSource("share",30),
Icon.getImageSource("menu",30),
]).then(sources =>{
Navigation.startTabBasedApp({
tabs: [
{
screen:"example.AuthScreen",
label : "Find Place",
title : "Find Place",
icon : sources[0],
navigatorButtons:{
leftButton:[
{
icon:sources[2],
title:"Menu",
id:"sideDrawerToggle"
}
]
}
},
{
screen:"example.AuthScreen",
label : "Share Place",
title : "Share Place",
icon : sources[1],
navigatorButtons:{
leftButton:[
{
icon:sources[2],
title:"Menu",
id:"sideDrawerToggle"
}
]
}
}
],
drawer: {
left: {
screen:"example.SideDrawer"
}
}
});
})
}
export default startTab;
SideDrawer.js
import React, { Component } from 'react';
import {View,Text,Dimensions,StyleSheet} from 'react-native';
class SideDrawer extends Component{
render(){
return(
<View >
<Text
style={[styles.container,{width:Dimensions.get("window").width*0.8}]}>
On SideDrawer
</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
paddingTop:22,
backgroundColor:"white",
flex:1
}
})
export default SideDrawer;
sharePlace.js
import React,{ Component } from 'react';
import {View,Text} from 'react-native';
class SharePlaceScreen extends Component{
constructor(props){
super(props);
props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
}
onNavigatorEvent = event => {
console.log(events)
if(event.type === "NavBarButtonPress"){
if(event.id === "sideDrawerToggle"){
this.props.navigator.toggleDrawer({
side: 'left'
})
}
}
}
render(){
return(
<View>
<Text>On Share place screen</Text>
</View>
);
}
}
export default SharePlaceScreen;

leftButton: [
{
icon: sources[2],
title: "Menu",
id: "sideDrawerToggle"
}
]
This should be ,
leftButtons: [
{
icon: sources[2],
title: "Menu",
id: "sideDrawerToggle"
}
]
Follow this link :
https://wix.github.io/react-native-navigation/#/adding-buttons-to-the-navigator.
Hope this helps you. :)

Global in-app notifications

I wish to utilize an in-app notification system, aka a more attractive and less in your face' use of alerts to let the user know what actions are being done, especially when for instance a barcode has been detected but it needs to send that barcode to the server and the user needs to wait.
I have found this lib and have attempted to implement it; but as I am using React Navigation and I wish to render the item at the very top of the application, it gets cut off by React Native header
Is it possible to have a function I can create and reference whenever I want a global notification and it will render on the very top I would imagine it would need to render here:
import React from 'react';
import { createBottomTabNavigator,createStackNavigator } from 'react-navigation';
import SearchTab from './components/Tabs/SearchTab';
import HomeTab from './components/Tabs/HomeTab';
import ScannerTab from './components/Tabs/ScannerTab';
import SettingsTab from './components/Tabs/SettingsTab';
import Ionicons from 'react-native-vector-icons/Ionicons';
import StockModal from './components/Modals/StockModal';
const MainStack = createBottomTabNavigator(
{
Home: HomeTab,
Search: SearchTab,
Scanner: ScannerTab,
Settings: SettingsTab,
//Todo: Total overlay modals HERE
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Home') {
iconName = `ios-information-circle${focused ? '' : '-outline'}`;
} else if (routeName === 'Settings') {
iconName = `ios-options${focused ? '' : '-outline'}`;
}else if (routeName === 'Scanner') {
iconName = `ios-barcode${focused ? '' : '-outline'}`;
}else if (routeName === 'Search') {
iconName = `ios-search${focused ? '' : '-outline'}`;
}
return <Ionicons name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
},
}
);
export default RootStack = createStackNavigator(
{
Main: {
screen: MainStack,
},
QuickStockScreen: {
screen: StockModal,
},
},
{
mode: 'modal',
headerMode: 'none',
}
);
But even if that's possible, I am not sure how its possible to build a function that tells the notification to show; React Redux comes to mind but I don't wish to implement such a cumbersome system just for one feature and it was something I considered when creating his application and decided against.
The notification system in question (not very clear documentation or examples sadly) https://www.npmjs.com/package/react-native-in-app-notification
Here is the navigation lib I am using: https://reactnavigation.org/

What you want would be a component that is a the same level of the navigation (So it can display over it). In multiple projects, I use react-native-root-siblings to do so. It allows you to add UI over the app and so over the navigation.
An exemple how what I made with it. The dark layer and the box at the bottom are part of the Siblings Component.
https://gyazo.com/7ad3fc3fea767ea84243aaa493294670
The Siblings is used like the Alert of React-Native, so as a function (which is quite useful!)
messageMenu.js
import React, { Component } from 'react';
import RootSiblings from 'react-native-root-siblings';
import MessageMenuContainer from './MessageMenuContainer';
export default class Dialog extends Component {
static show = (props) => new RootSiblings(<MessageMenuContainer {...props} />);
static update = (menu, props) => {
if (menu instanceof RootSiblings) {
menu.update(<MessageMenuContainer {...props} />);
} else {
console.warn(`Dialog.update expected a \`RootSiblings\` instance as argument.\nBut got \`${typeof menu}\` instead.`);
}
}
static close = (menu) => {
if (menu instanceof RootSiblings) {
menu.destroy();
} else {
console.warn(`Dialog.destroy expected a \`RootSiblings\` instance as argument.\nBut got \`${typeof menu}\` instead.`);
}
}
render() {
return null;
}
}
export {
RootSiblings as Manager,
};
Where the MessageMenuContainer is your component to render at the top.
Component using the Root Siblings:
import React from 'react';
import PropTypes from 'prop-types';
import I18n from 'react-native-i18n';
import { BackHandler, Keyboard, Platform, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import DraftMenu from './messageMenu'; //HERE IS THE IMPORT YOU WANT
import { Metrics, Colors, Fonts } from '../../main/themes';
class DraftBackButton extends React.Component {
state = {
draftMenu: undefined,
}
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.handleBackAndroid);
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.handleBackAndroid);
}
handleBackAndroid = () => {
this.handleBack();
return true;
}
handleBack = async () => {
Keyboard.dismiss();
await this.openDraftMenu();
}
openDraftMenu = async () => {
if (this.state.draftMenu) {
await DraftMenu.update(this.state.draftMenu, this.draftMenuProps());
} else {
const draftMenu = await DraftMenu.show(this.draftMenuProps());
this.setState({ draftMenu: draftMenu });
}
}
draftMenuProps = () => ({
options: [
{ title: I18n.t('message.deleteDraft'), onPress: this.deleteDraft, icon: 'trash' },
{ title: I18n.t('message.saveDraft'), onPress: this.saveOrUpdateDraft, icon: 'documents' },
{ title: I18n.t('cancel'), icon: 'close', style: { backgroundColor: Colors.tertiaryBackground } },
],
destroyMenuComponent: async () => {
DraftMenu.close(this.state.draftMenu);
await this.setState({ draftMenu: undefined });
},
withIcon: true,
})
saveOrUpdateDraft = async () => {
// SAVE OR UPDATE DRAFT. NOT IMPORTANT
}
saveDraft = async () => {
// SAVING THE DRAFT
}
updateDraft = async () => {
// UPDATING THE DRAFT
}
deleteDraft = async () => {
// DELETING THE DRAFT
}
render() {
return (
<TouchableOpacity
hitSlop={Metrics.touchable.largeHitSlop}
onPress={() => {
this.handleBack();
}}
>
<Text>BUTTON</Text>
</TouchableOpacity>
);
}
}
DraftBackButton.propTypes = {
// ALL THE PROPTYPES
};
function mapStateToProps(state, ownProps) {
//
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({ fetchMessages }, dispatch),
};
}
export default connect(mapStateToProps, mapDispatchToProps)(DraftBackButton);
The best thing with this lib is that you can call the .show anywhere in your app and it will render at the very top!
Hope it's what you're looking for!
EDIT:
I updated the example of how to use the Root Siblings.
Here's the content of my MessageContainer which will be display on top of everything
import React from 'react';
import PropTypes from 'prop-types';
import { Animated, Dimensions, InteractionManager, StyleSheet, TouchableOpacity, View } from 'react-native';
import MessageMenuItem from './MessageMenuItem';
import { Colors } from '../../../main/themes';
const { width, height } = Dimensions.get('window');
const OPTION_HEIGHT = 55;
const OVERLAY_OPACITY = 0.5;
export default class DraftMenuContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
animatedHeight: new Animated.Value(0),
animatedOpacity: new Animated.Value(0),
menuHeight: props.options.length * OPTION_HEIGHT,
};
}
componentDidMount() {
this.onOpen();
}
// Using Animated from react-native to make the animation (fade in/out of the dark layer and the dimensions of the actual content)
onOpen = async () => {
await this.state.animatedHeight.setValue(0);
await this.state.animatedOpacity.setValue(0);
Animated.parallel([
Animated.timing(this.state.animatedHeight, { toValue: this.state.menuHeight, duration: 200 }),
Animated.timing(this.state.animatedOpacity, { toValue: OVERLAY_OPACITY, duration: 200 }),
]).start();
}
onClose = async () => {
await this.state.animatedHeight.setValue(this.state.menuHeight);
await this.state.animatedOpacity.setValue(OVERLAY_OPACITY);
Animated.parallel([
Animated.timing(this.state.animatedHeight, { toValue: 0, duration: 200 }),
Animated.timing(this.state.animatedOpacity, { toValue: 0, duration: 200 }),
]).start(() => this.props.destroyMenuComponent()); // HERE IS IMPORTANT. Once you're done with the component, you need to destroy it. To do so, you need to set a props 'destroyMenuComponent' which is set at the creation of the initial view. See the other code what it actually do
}
render() {
return (
<View style={styles.menu}>
<Animated.View style={[styles.backgroundOverlay, { opacity: this.state.animatedOpacity }]}>
<TouchableOpacity
activeOpacity={1}
onPress={() => this.onClose()}
style={{ flex: 1 }}
/>
</Animated.View>
<Animated.View style={[styles.container, { height: this.state.animatedHeight }]}>
{this.props.options.map((option, index) => (
<MessageMenuItem
height={OPTION_HEIGHT}
icon={option.icon}
key={index}
onPress={async () => {
await this.onClose();
InteractionManager.runAfterInteractions(() => {
if (option.onPress) {
option.onPress();
}
});
}}
style={option.style}
title={option.title}
withIcon={this.props.withIcon}
/>
))}
</Animated.View>
</View>
);
}
}
DraftMenuContainer.propTypes = {
destroyMenuComponent: PropTypes.func.isRequired,
withIcon: PropTypes.bool,
options: PropTypes.arrayOf(PropTypes.shape({
icon: PropTypes.string.isRequired,
onPress: PropTypes.func,
title: PropTypes.string.isRequired,
})),
};

How to implement bottom tab navigation in RNN V2

I am trying to implement navigation with bottom tabs in my shiny new React Native application. I chose to start with React Native Navigation, version two.
Here is the code so far:
import React from 'react'
import { Navigation } from 'react-native-navigation'
import { Text, View } from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons'
const prepareIcons = async () => {
const [ home, trend, wifi, list, help ] = await Promise.all([
Icon.getImageSource('ios-home', 30),
Icon.getImageSource('ios-trending-up', 30),
Icon.getImageSource('ios-wifi', 30),
Icon.getImageSource('ios-list', 30),
Icon.getImageSource('ios-help-buoy', 30)
])
return { home, trend, wifi, list, help }
}
const Monitor = class extends React.Component {
render() {
return <View><Text>Monitor</Text></View>
}
}
const Usage = class extends React.Component {
render() {
return <View><Text>Usage profile</Text></View>
}
}
const Connection = class extends React.Component {
render() {
return <View><Text>WiFi connection</Text></View>
}
}
const Reports = class extends React.Component {
render() {
return <View><Text>Reports log</Text></View>
}
}
const Support = class extends React.Component {
render() {
return <View><Text>Support</Text></View>
}
}
const main = async () => {
const icons = await prepareIcons()
Navigation.events().onAppLaunched(() => {
Navigation.setRoot({
bottomTabs: {
children: [{
component: {
name: 'Monitor',
options: {
bottomTab: {
icon: icons.home,
title: 'Monitor',
visible: true
}
}
}
}, {
component: {
name: 'Usage',
options: {
bottomTab: {
icon: icons.trend,
title: 'Usage'
}
}
}
}, {
component: {
name: 'Connection',
options: {
bottomTab: {
icon: icons.wifi,
title: 'WiFi'
}
}
}
}, {
component: {
name: 'Reports',
options: {
bottomTab: {
icon: icons.list,
title: 'Reports'
}
}
}
}, {
component: {
name: 'Support',
options: {
bottomTab: {
icon: icons.help,
title: 'Support'
}
}
}
}]
}
})
})
}
Navigation.registerComponent('Monitor', () => Monitor)
Navigation.registerComponent('Usage', () => Usage)
Navigation.registerComponent('Connection', () => Connection)
Navigation.registerComponent('Reports', () => Reports)
Navigation.registerComponent('Support', () => Support)
main()
It produces this (Android emulator):
The application opens. No errors. The tabs do change when clicked, but as you can see in the screenshot, the contents of the current component, Connection, is not visible. What am I doing wrong? I feel there is something I'm missing, but this could be a bug.
React Native Navigation version: 2.0.2125
React Native version: 0.53.0
Platform: Android
Device: Nexus 5X, Android 8.1.0, Debug

The problem was on the selectTabAtIndex method of the com.reactnativenavigation.viewcontrollers.BottomTabsController class. Applying the diff below fixes it.
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/BottomTabsController.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/BottomTabsContr
index 87812bc5..69d45877 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/BottomTabsController.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/BottomTabsController.java
## -145,7 +145,7 ## public class BottomTabsController extends ParentController implements AHBottomNa
void selectTabAtIndex(final int newIndex) {
getView().removeView(getCurrentView());
bottomTabs.setCurrentItem(newIndex, false);
- getView().addView(getCurrentView());
+ getView().addView(getCurrentView(), MATCH_PARENT, MATCH_PARENT);
}
#NonNull