Develop Reference

how to navigate to specific screen after pressing rnfirebase notification

i'm using react native firebase and i'm getting notification whenever is needed, and these notifications have some data to navigate to specific screen.
i used the firebase documentation to implement the functionality but it's not working as it's supposed to
Here is the document i've used Firebase & React-Navigation
and my code looks something like this :
const Stack = createStackNavigator();
const Router = () => {
const navigation = useNavigation();
const [loading, setLoading] = useState(true);
const [initialRoute, setInitialRoute] = useState('Splash');
useEffect(() => {
//fcm
registerAppWithFCM();
// checkRNFBPermission();
const unsubscribe = messaging().onMessage(async remoteMessage => {
console.log('remote DATAAAAAAAAAAAAAAAAAAAAAAAA : ',remoteMessage.data);
// switch (remoteMessage.data.screen) {
// case 'answer':{
// console.log('inside switch condition 1 !!!!!!!!!!!!!');
// useNavigation().navigate('Profile');
// break;
// }
// case 'AnswerQuestion':{
// console.log('inside switch condition 2 !!!!!!!!!!!!!');
// useNavigation().navigate('Profile');
// break;
// }
// default:
// break;
// }
// Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));
// const owner = JSON.parse(remoteMessage.data.owner);
// const user = JSON.parse(remoteMessage.data.user);
// const picture = JSON.parse(remoteMessage.data.picture);
});
// Assume a message-notification contains a "type" property in the data payload of the screen to open
messaging().onNotificationOpenedApp(remoteMessage => {
console.log(
'Notification caused app to open from background state:',
remoteMessage.notification,
);
navigation.navigate('Profile');
});
// Check whether an initial notification is available
messaging()
.getInitialNotification()
.then(remoteMessage => {
if (remoteMessage) {
console.log(
'Notification caused app to open from quit state:',
remoteMessage.data, //notification
);
}
setLoading(false);
});
messaging().setBackgroundMessageHandler(async remoteMessage => {
console.log('Message handled in the background!', remoteMessage);
});
return unsubscribe;
//fcm
}, []);
//fcm
checkRNFBPermission = async() => {
const enabled = await messaging().hasPermission();
if(enabled){
messaging()
.getToken()
.then(token => {
// console.log('deviceeeee fcm token ------> ', token);
});
}else{
requestUserPermission();
}
}
registerAppWithFCM = async() => {
await messaging().registerDeviceForRemoteMessages();
}
requestUserPermission = async() => {
const settings = await messaging().requestPermission();
if (settings) {
console.log('Permission settings:', settings);
}
}
//fcm
renderLoading = () => (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Domanda</Text>
<ActivityIndicator size='large' color={colors.darkerTeal} />
</View>
);
//firebase
if (loading) {
return null;
}
//firebase
return(
<Provider store={store}>
<PersistGate persistor={persistor} loading={this.renderLoading()}>
<Root>
<NavigationContainer>
<Stack.Navigator initialRouteName={initialRoute} headerMode="none">
<Stack.Screen name="Splash" component={Splash} />
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Main" component={Main} />
<Stack.Screen name="AppIntro" component={AppIntro} />
<Stack.Screen name="Tags" component={Tags} />
<Stack.Screen name="Answers" component={Answers} />
<Stack.Screen name="Profile" component={Profile} />
<Stack.Screen name="EditInfo" component={EditInfo} />
<Stack.Screen name="ChangePassword" component={ChangePassword} />
<Stack.Screen name="AnswerQuestion" component={AnswerQuestion} />
<Stack.Screen name="ContactUs" component={ContactUs} />
</Stack.Navigator>
</NavigationContainer>
</Root>
</PersistGate>
</Provider>
)
};
export default Router;
but when i add usenavigation and i want to use it it throws this error:
Error: We couldn't find a navigation object. Is your component inside a screen in a navigator?
i can not use navigation.navigate('Profile'); to navigate to a specific screen.

You're receiving the message in App.js whats outside of your StackNavigator.
You can use a ref to use the navigation property of the navigator
define the navigator in the top of you app.js
var navigator = null;
then add an ref to the navigator
<Stack.Navigator
initialRouteName={initialRoute}
headerMode="none"
ref={nav => {
navigator = nav;
}}
>
and push your route inside the receive method
navigator.dispatch(
NavigationActions.navigate({
routeName: 'theRoute',
params: {},
}),
);

Was struggling 4 hours...
Some were in component, were navigation is available (in my case "Home screen")
// last import
import { ScrollWrapper } from './styles'
export const navigationRef = React.createRef();
export const isReadyRef = React.createRef();
export function navigate(name, params) {
if (isReadyRef.current && navigationRef.current) {
// Perform navigation if the app has mounted
navigationRef.current.navigate(name, params);
} else {
console.log(' else [ELSE] --- ')
// You can decide what to do if the app hasn't mounted
// You can ignore this, or add these actions to a queue you can call later
}
}
// component start
export const SocialHomeScreen = () => {...
In App.js
import { navigate, navigationRef, isReadyRef } from './screens/PeopleAroundYou/index'
// .... navigators
const App = () => {
const [isAuth, setIsAuth] = useState(false)
AsyncStorage.getItem('pushNotify').then(value => {
console.log('value --- ', value)
console.log('JSON.parse(value) --- ', JSON.parse(value))
}).catch(error => {
console.log('error --- ', error)
})
// foreground message arrived
useEffect(() => {
return messaging().onMessage(async remoteMessage => {
const { data, notification } = remoteMessage
if (data.type === 'activity-check-in') {
console.log(' A new FCM message arrived! --- ')
console.log('data --- ', data)
console.log('notification --- ', notification)
console.log(' navigator --- ', navigate)
console.log('navigationRef.current.getRootState() --- ', navigationRef.current.getRootState())
switch (data.category) {
case 'fitness':
// navigate to nested screen
navigate(routes.Fitness, {
screen: routes.ActivityDetails,
params: { activityId: data.eventId}
})
break
case 'companionship':
navigate(routes.Companionships, {
screen: routes.ActivityDetails,
params: { activityId: data.eventId}
})
break
case 'volunteering':
navigate(routes.Volunteering, {
screen: routes.ActivityDetails,
params: { activityId: data.eventId}
})
break
case 'wellbeing':
navigate(routes.Wellbeing, {
screen: routes.ActivityDetails,
params: { activityId: data.eventId}
})
break
}
}
})
}, [])
useEffect(() => {
SplashScreen.hide()
fcmService.registerAppWithFCM()
fcmService.register(onRegister, onNotification, onOpenNotification)
localNotificationService.configure(onOpenNotification)
function onRegister(token) {
console.log('[App] onRegister: ', token)
}
function onNotification(notify) {
console.log('[App] onNotification: ', notify)
const options = {
soundName: 'default',
playSound: true, //,
// largeIcon: 'ic_launcher', // add icon large for Android (Link: app/src/main/mipmap)
// smallIcon: 'ic_launcher' // add icon small for Android (Link: app/src/main/mipmap)
}
localNotificationService.showNotification(
0,
notify.title,
notify.body,
notify,
options,
)
}
function onOpenNotification(notify) {
console.log('[App] onOpenNotification: ', notify)
Alert.alert('Open Notification: ' + notify.body)
}
return () => {
console.log('[App] unRegister')
fcmService.unRegister()
localNotificationService.unregister()
}
}, [])
const authContext = useMemo(() => {
return {
login: () => {
setIsAuth(true)
},
logout: () => {
setIsAuth(false)
},
}
})
return (
<AuthContext.Provider value={authContext}>
<ThemeProvider theme={theme}>
<NavigationContainer
ref={navigationRef}
onReady={() => {
isReadyRef.current = true
}}
linking={linking}
fallback={
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<Loader loading size='large' color='#61A5C8'/>
</View>
}
>
{isAuth ? <AuthorizedTabs /> : <NonAuthorizedStack/>}
</NavigationContainer>
</ThemeProvider>
</AuthContext.Provider>
)
}

React Native FlatList is not rendring an Axios API request

I am new to react native , and I am facing a problem with handling props and state ,when i am using redux, I get the data needed for rendering the flat list in the right form but some how the data property inside the flat list only see {this.props.customers} as undefined.
Here is my code:
componentWillMount() {
debugger;
this.props.getCustomers();
debugger;
}
componentDidUpdate(prevProps) {
if (prevProps.customers !== this.props.customers) {
this.props.getCustomers();
}
}
render = () => {
return (
<View>
<FlatList
data={this.props.customers}
renderItem={({ item }) =>
<View style={styles.GridViewContainer}>
<Text style={styles.GridViewTextLayout}>{item.name}</Text>
</View>}
keyExtractor={(x, index) => index}
numColumns={3}
/>
</View>
);
}
}
const mapStateToProps = (state) => {
const customers = state.customers;
console.log(customers);
debugger
return customers;
};
export default connect(mapStateToProps, {
getCustomers
})(CustomersList);
And the getCustomers action :
export const getCustomers = () => {
debugger;
return (dispatch) => {
dispatch(setCustomerLoading)
axios
.get('https://calm-sands-26165.herokuapp.com/api/customers')
.then(res =>
dispatch({
type: GET_CUSTOMERS,
payload: res.data,
})
)
.catch(err =>
dispatch({
type: GET_ERRORS,
payload: null
})
);
};
}
Thanx in advance.

In mapStateToProps you should return an object, not a value. Each entry in that object will be a prop for the component that's being connected to the store.
In your case, this should be the fix:
const mapStateToProps = (state) => {
const customers = state.customers;
return { customers };
};

I want to display a list created by the user / React Native + Redux

I want my apps to display what the user entered in the tag under it with Redux.
So this is my container:
const mapStateToProps = state => ({
text: state
})
const mapDispatchToProps = (dispatch) => ({
addToList: () => { dispatch({ type: 'ADD_LIST' }) },
})
export default connect(mapStateToProps, mapDispatchToProps)(TodoList)
Here is my component:
class TodoList extends Component {
render() {
return (
<View>
<TextInput
style={{height: 40, width: 300}}
placeholder="Type here to translate!"
onChangeText={(text) => this.props.text}
/>
<Button
title="Submit"
onPress={this.props.addToList}/>
<View>
<Text>{this.props.text}</Text>
</View>
</View>
)
}
}
export default TodoList;
Here is the Store:
export const todoList = (state = [], action = {}) => {
switch (action.type) {
case 'ADD_LIST':
return [
...state,
action.todo
];
default:
return state;
}
}
let storeTodoList = createStore(todoList);
export default storeTodoList;
So i'm trying to get the text entered, add it to a list stored in the store and then display it, but i have absolutely no clue how to do this...

You have a few things going on here...
Your onChangeText listener isn't doing anything. You need to capture the text entered into the component and send it to your dispatcher.
You need to include the new text passed in as part of your action creator.
mapStateToProps is responsible for taking the elements in application state and mapping it to the props to be made available to your component. For this example, your application state is pretty simple. It is just { text: 'SOME TEXT' }.
You need to create a Provider for your Redux store. It should work at the root level of your app.
Here are all of the parts:
App.js (the application controller where the Provider is created)
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import todoList from './actions/Reducer';
import { createStore } from 'redux';
import Root from './Root';
class App extends Component {
store = createStore(todoList);
render() {
return (
<Provider store={this.store}>
<Root/>
</Provider>
)
}
}
export default App;
Root.js
import React, { Component } from 'react';
import { View, TextInput, Button, Text } from 'react-native';
import { connect } from 'react-redux';
class Root extends Component {
render() {
const displayText = this.props.textList.join();
return (
<View>
<TextInput
style={{height: 40, width: 300}}
placeholder="Type here to translate!"
onChangeText={(text) => this.props.updateField(text)}
/>
<Button
title="Submit"
onPress={() => this.props.addToList(this.props.text)}/>
<View>
<Text>{displayText}</Text>
</View>
</View>
)
}
}
const mapStateToProps = state => ({
text: state.textField,
textList: state.list
});
const mapDispatchToProps = (dispatch) => ({
updateField: (newText) => { dispatch({ type: 'FIELD_CHANGE', text: newText })},
addToList: (text) => { dispatch({ type: 'ADD_LIST', text: text }) },
});
export default connect(mapStateToProps, mapDispatchToProps)(Root)
Reducer.js (controls your state object)
const INITIAL_STATE = {
textField: '',
list: []
};
export default todoList = (state = INITIAL_STATE, action = {}) => {
switch (action.type) {
case 'FIELD_CHANGE':
return {
...state,
textField: action.text
};
case 'ADD_LIST':
return {
textField: '',
list: [...state.list, action.text]
};
default:
return state;
}
};
EDIT-Changed example to add to a list. Note: This is not the proper way to show a list of items in RN. I'm just throwing the string into a Text field for the example. Use FlatList to properly show a list of items.

How to change switch status in state inside a row in a ListView - React Native

Hello fellow programmers, I am having this problem developing this React-Native app where i am rendering a ListView of 'Services' where in each row it has a Text and a Switch, and I am able to render it but when i tap on the row's switch to change the value it goest back to its initial value real fast, I was wondering how to keep this change of vale but since I am new into this I am pretty clueless of how this is done: so far I have the ListView component where I call my ListItem component, heres my code;
class ListView extends Component {
constructor(props) {
super(props);
this.state = {
servicios: []
};
}
componentDidMount() {
AsyncStorage.getItem("token").then((value) => {
axios.get('http://MYURL/api/servicio/index?token=' + value)
.then(response => this.setState({ servicios: response.data.servicios }))
.catch(function (error) {
console.log(error);
});
}).done();
}
renderList() {
console.log('here');
return this.state.servicios.map(servicio =>
<ListItem key={servicio.id} servicio={servicio} />);
}
render() {
const { navigation } = this.props.navigation;
return (
<ScrollView>
{this.renderList()}
</ScrollView>
);
}
}
ListItem.js
const ListItem = ({ servicio }) => {
const { nombre, created_at, estatus } = servicio;
const { thumbnailStyle, headerContentStyle, thumbnailContainerStyle, headerTextStyle, imageStyle } = styles;
return (
<Card>
<CardSection>
<View style={thumbnailContainerStyle}>
<Text style={headerTextStyle}>{nombre}</Text>
</View>
<View style={headerContentStyle}>
<Switch value={estatus}/>
</View>
</CardSection>
</Card>
);
export default ListItem;
I missed the styles to not make this post too long, I may have the clue that i've got to put the current's row switch status in the State but I dont know how to do it, I would be really glad if you guys could help me?
Thanks in advance.

In order to change value of the switch you need to change value in the state from which you're rendering the ListView. I haven't tested that and wrote that from the top of my head, but you should achieve it by introducing small changes here and there:
ListItem.js
const ListItem = ({ servicio, onToggleSwitch }) => {
const { nombre, created_at, estatus, id } = servicio;
const { thumbnailStyle, headerContentStyle, thumbnailContainerStyle, headerTextStyle, imageStyle } = styles;
return (
<Card>
<CardSection>
<View style={thumbnailContainerStyle}>
<Text style={headerTextStyle}>{nombre}</Text>
</View>
<View style={headerContentStyle}>
<Switch value={estatus} onValueChange={(value) => onToggleSwitch(id, value)} />
</View>
</CardSection>
</Card>
);
export default ListItem;
ListView.js
class ListView extends Component {
constructor(props) {
super(props);
this.state = {
servicios: []
};
}
onToggleSwitch = (id, value) => {
const servicios = [...this.state.servicios]
const index = servicios.findIndex(item => item.id === id)
servicios[index].estatus = value
this.setState({ servicios })
}
componentDidMount() {
AsyncStorage.getItem("token").then((value) => {
axios.get('http://MYURL/api/servicio/index?token=' + value)
.then(response => this.setState({ servicios: response.data.servicios }))
.catch(function (error) {
console.log(error);
});
}).done();
}
renderList() {
console.log('here');
return this.state.servicios.map(servicio =>
<ListItem key={servicio.id} servicio={servicio} onToggleSwitch={this.onToggleSwitch} />);
}
render() {
const { navigation } = this.props.navigation;
return (
<ScrollView>
{this.renderList()}
</ScrollView>
);
}
}

Customize DrawerNavigator - ReactNative

I have my side menu via DrawerNavigator. I know that to customize the drawer, it's in "contentComponents" props.
I want for example, put a button who open a modal like : Share (to share the app on other social media)
But for now, all my button are route. So if I click on it, it's redirect to the page (normal). I just want to add a button who react and not redirect.
I don't know how to custom that in the Component dynamically. I think about hardcoded each button (some for redirect, some for display simple modal).
Here is my code :
index.android.js
const DrawerContent = (props) => (
<ScrollView>
<View style={styles.container}>
<Text style={styles.logo}>TechDico</Text>
<Text style={{ paddingLeft: 10, paddingRight: 10, fontSize: 13, textAlign: 'center', color: '#f4f4f4' }}>Des millions de traductions classées par domaine d'activité</Text>
</View>
<DrawerItems style={{ marginTop: 30 }} {...props} />
</ScrollView>
)
const appNavigator = DrawerNavigator({
Redirection1: {
screen: Index,
navigationOptions: {
drawerLabel: 'Redirection1',
drawerIcon: ({ tintColor }) => (<Icon name="home" size={20} color={tintColor} />),
}
},
DisplayModal: {
screen: Index,
navigationOptions: {
drawerLabel: 'DisplayModal',
drawerIcon: ({ tintColor }) => (<Icon name="home" size={20} color={tintColor} />),
}
},
Redirection2: {
screen: Index,
navigationOptions: {
drawerLabel: 'Redirection2',
drawerIcon: ({ tintColor }) => (<Icon name="home" size={20} color={tintColor} />),
}
}, }, {
// define customComponent here
contentComponent: DrawerContent,
contentOptions: {
inactiveTintColor: '#000000',
activeTintColor: '#1eacff',
showIcon: true,
}
});
Index class
export default class Index extends Component {
renderRoot = () => {
const { navigation } = this.props;
console.log("My Navigation ", navigation);
switch (navigation.state.key) {
case 'Redirection1':
return (
<App navigation={navigation} />
);
case 'DisplayModal':
// TODO I don't want to return so I can remove to cancel the redirection, but now, how can I display a modal without redirect.
return (
<DisplayModal navigation={navigation} />
);
case 'Redirection2':
return (
<Redirection2 navigation={navigation} />
);
default:
return (
<Test navigation={navigation} />
);
}
}
I'm using 'react-navigation'.

I'm looking at the same task as well. I think having multiple routes pointing to the same screen type may cause eventually a mess with state management, as each screen instance is different.
Looking at the source code in DrawerSidebar/DrawerNavigatorItems it seems all items in the sidebar list are those found in drawer's route config (unless we rewrite completely DrawerNavigatorItems). So maybe we may have a fake screen for some route and in componentWillMount implement required action and then navigate to the default route.
Here is a sample code:
let drawer = DrawerNavigator({
Main: {
screen: MainScreen,
},
About: {
screen: AboutScreen,
},
ContactUs: {
screen: ContactUsFakeScreen,
},
});
const mailUrl = "mailto:test#test.com";
class ContactUsFakeScreen extends React.Component {
componentWillMount() {
let self = this;
Linking.canOpenURL(mailUrl)
.then(self.openEmail)
.catch(err => self.openEmail(false));
}
openEmail(supported) {
if (supported) {
Linking.openURL(mailUrl).catch(err => {});
}
let { navigation } = this.props;
navigation.navigate('Main');
}
render() {
return null;
}
}
Here Main/MainScreen and About/AboutScreen are regular routes and screens, while ContactUs/ContactUsFakeScreen only pretend to be a route and a screen. Clicking on ContactUs will trigger componentWillMount which deals with email screen and then eventually navigates to the MainScreen (Main route).
Another approach could be to hijack getStateForAction from drawer router and put some extra routing logic there replacing destination route on the fly. Something along these lines:
const defaultDrawerGetStateForAction = drawer.router.getStateForAction;
drawer.router.getStateForAction = (action, state) => {
let newState = defaultDrawerGetStateForAction(action, state);
if (action.type === 'Navigation/NAVIGATE' && action.routeName === 'ContactUs') {
// extra logic here ...
newState.routes.forEach(r => {
if (r.key === 'DrawerClose') {
// switching route from ContactUs to Main.
r.index = 0;
}
});
}
return newState;
}
And if an item in the drawer list is not even actionable (like copyright), then fake screen will look even simpler (note styling via navigationOptions):
let drawer = DrawerNavigator({
...
Copyright: {
screen: Copyright,
},
});
class Copyright extends React.Component {
static navigationOptions = {
drawerLabel: ({ tintColor, focused }) =>
(<Text style={{color: '#999'}}>Copyright 2017</Text>)
)
};
componentWillMount() {
let { navigation } = this.props;
navigation.navigate('Main');
}
render() {
return null;
}
}