I'm currently having typescript issue with passing the correct type in react router redux.
typescript-error:
severity: 'Error'
message: 'Type '{ path: "/foo/:id"; component: typeof "<path>..' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route> & Readonly<{ children?: ReactNode; }> & Rea...'.
Type '{ path: "/foo/:id"; component: typeof "<path>..' is not assignable to type 'Readonly<RouteProps>'.
Types of property 'component' are incompatible.
Type 'typeof "<path>..' is not assignable to type 'StatelessComponent<RouteComponentProps<any>> | ComponentClass<RouteComponentProps<any>>'.
Type 'typeof "<path>..' is not assignable to type 'ComponentClass<RouteComponentProps<any>>'.
Type 'typeof "<path>..' provides no match for the signature 'new (props?: RouteComponentProps<any>, context?: any): Component<RouteComponentProps<any>, ComponentState>'.'
This seems to be happening because I'm passing a container component into the <Route... />. However, it's not clear to me why this wouldn't work because mapsToProps should be returning a RouteComponentProps.
Foo.ts (Component):
export interface Props extends RouteComponentProps<any> {
a: string;
}
export class Foo extends React.Component<Props, void> {
public render() {
//code
}
}
FooContainer.ts:
function mapStateToProps(state: State, ownProps: Props): Props {
const mappedProps: Props = {
foo: "super"
};
return mappedProps;
}
export default connect(mapStateToProps)(Foo);
routes:
import * as React from "react";
import { Route, Switch } from "react-router-dom";
import FooContainer from "./FooContainer";
export const routes = (
<Switch>
<Route path="/foo/:id" component={FooContainer} />
</Switch>
);
nom libraries/version:
"#types/react": "^16.0.5",
"#types/react-dom": "^15.5.4",
"#types/react-redux": "4.4.40",
"#types/react-router-dom": "4.0.7",
"#types/react-router-redux": "5.0.8",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-redux": "5.0.4",
"react-router-dom": "4.2.2",
"react-router-redux": "5.0.0-alpha.6",
If you look at my Props, it extends RouteComponentProps which is:
export interface RouteComponentProps<P> {
match: match<P>;
location: H.Location;
history: H.History;
}
If that is true, shouldn't mapStateToProps contain the match?
So I got around the problem with :
export default connect(mapStateToProps)(foo) as React.ComponentClass<any>;
Not sure why I need to specify the return type with React.ComponentClass. Isn't it implicit?
Related
In React Navigation 6, my research shows that to navigate without a prop I should make a reference and use createNavigationContainerRef. I'm able to pass down the screen name to my dispatch but for some reason when I evaluate the condition with isReady I'm always told it isn't. The code:
App.js:
import React from 'react'
import { NavigationContainer } from '#react-navigation/native'
import 'react-native-gesture-handler'
// Provider
import { Provider as AuthProvider } from './src/context/AuthContext'
// Navigation
import { navigationRef } from './src/navigation/NavRef'
// Screens
import ResolveAuthScreen from './src/screens/ResolveAuthScreen'
const App = () => {
return (
<AuthProvider>
<NavigationContainer ref={navigationRef}>
<ResolveAuthScreen />
</NavigationContainer>
</AuthProvider>
)
}
export default App
ResolveAuthScreen.js:
import React, { useEffect, useContext } from 'react'
// Context
import { Context as AuthContext } from '../context/AuthContext'
const ResolveAuthScreen = () => {
const { tryLocalSignIn } = useContext(AuthContext)
useEffect(() => {
tryLocalSignIn()
}, [])
return null
}
export default ResolveAuthScreen
AuthContext.js (stripped down):
import AsyncStorage from '#react-native-async-storage/async-storage'
// Context
import createContext from './createContext'
// Nav
import * as NavRef from '../navigation/NavRef'
const authReducer = (state, action) => {
switch (action.type) {
case 'signin':
return { errorMessage: '', token: action.payload }
case 'clear_error':
return { ...state, errorMessage: '' }
default:
return state
}
}
const tryLocalSignIn = dispatch => async () => {
const token = await AsyncStorage.getItem('token')
console.log({ token }) // renders token
if (token) {
dispatch({ type: 'signin', payload: token })
NavRef.navigate('TrackListScreen')
} else {
NavRef.navigate('SignUp')
}
}
export const { Provider, Context } = createContext(
authReducer,
{ tryLocalSignIn },
{ token: null, errorMessage: '' },
)
NavRef.js:
import { createNavigationContainerRef } from '#react-navigation/native'
export const navigationRef = createNavigationContainerRef()
export function navigate(name, params) {
console.log({ name, params })
if (navigationRef.isReady()) {
console.log('ready')
console.log({ name, params })
navigationRef.navigate('TrackDetailScreen', { name, params })
} else {
console.log('not ready')
}
}
When I log the token from dispatch I get back the token. When I log the screen I get back TrackListScreen from navigate but whenever it's fired it always returns the console log of not ready.
Docs:
Navigating without the navigation prop
Navigating to a screen in a nested navigator
"dependencies": {
"#react-native-async-storage/async-storage": "~1.15.0",
"#react-navigation/bottom-tabs": "^6.0.9",
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.2.5",
"axios": "^0.24.0",
"expo": "~43.0.0",
"expo-status-bar": "~1.1.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.2",
"react-native-elements": "^3.4.2",
"react-native-gesture-handler": "~1.10.2",
"react-native-reanimated": "~2.2.0",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.8.0",
"react-native-web": "0.17.1"
},
Why is my navigate not working after my dispatch or why does the isReady false?
I'm having the same issue. When trying to access the exported navigationRef.isReady() from a redux-saga file, it always returns false. I'm not sure this is a safe approach, nor have I properly tested this, but the following workaround seems to work for me:
App.js
import {setNavigationRef, navigationIsReady} from './NavigationService';
const navigationRef = useNavigationContainerRef();
return (
<NavigationContainer
ref={navigationRef}
onReady={() => {
setNavigationRef(navigationRef);
}}>
...
</NavigationContainer>
);
NavigationService.js
export let navigationRefCopy = undefined;
export function setNavigationRef(navigationRef) {
navigationRefCopy = navigationRef;
}
export function navigationIsReady() {
return navigationRefCopy?.isReady(); // returns true when called in a redux saga file.
}
I am using createStackNavigator like this.
const ChatStack = createStackNavigator({
Profiles: Profiles,
ChatScreen: ChatScreen
})
const RootChatStack = createStackNavigator({
Home: ChatStack,
ModalScreen: ProfileModalScreen
},{
mode: 'modal',
headerMode: 'none',
})
In Profiles I use props.navigation.navigate('ChatScreen',{name: item.content }) to go to ChatScreen.
And In ChatScreen
class Example extends React.Component {
static navigationOptions = ({navigation}) => {
return {
title: navigation.getParam('name', ''),
};
...
renderModal() {
this.props.navigation.navigate('ModalScreen')
}
...
}
I can set title using navigationOptions, but when I use this.renderModal(),
It gives me Error
undefined is not an object (evaluating '_this2.props.navigation')
How I can use navigation.navigate inside Example Component?
If you're using class based react components you have to bind additional functions in your components to the instance. You would do so by explicitly binding this to each additional function in your component (react functions like render() are already bound).
This is the key line in the snippet below:
this.renderModal = this.renderModal.bind(this);
class Example extends React.Component {
constructor(props) {
super(props);
this.renderModal = this.renderModal.bind(this);
}
renderModal() {
this.props.navigation.navigate('ModalScreen');
}
...
}
I have the most simple code possible to check react-admin:
import React, { Component } from "react";
import buildGraphQLProvider from "ra-data-graphql-simple";
import { Admin, Resource } from "react-admin";
import posts from "./routes/posts";
class App extends Component {
constructor() {
super();
this.state = { dataProvider: null };
}
componentDidMount() {
buildGraphQLProvider({
clientOptions: { uri: "https://countries.trevorblades.com" }
})
.then(dataProvider => this.setState({ dataProvider }))
.catch(e => console.log(e.message));
}
render() {
const { dataProvider } = this.state;
if (!dataProvider) {
return <div>Loading</div>;
}
return (
<Admin dataProvider={dataProvider}>
<Resource name="posts" {...posts} />
</Admin>
);
//or, directly return <Admin dataProvider={dataProvider} />
}
}
export default App;
but I always get the same error in console: Cannot read property 'name' of null
My dependences are:
"graphql": "14.6.0",
"graphql-tag": "2.10.1",
"ra-core": "3.1.4",
"ra-data-graphql-simple": "3.1.4",
"react": "16.12.0",
"react-admin": "3.2.0",
"react-apollo": "3.1.3",
"react-dom": "16.12.0",
"react-scripts": "3.0.1"
What I'm doing wrong??
I had the same problem.
The issue was that I was missing Mutation type in my graphql schema, therefore the check
type.name !== schema.mutationType.name
threw an error, because schema.mutationType was undefined
Make sure you have a Mutation type in your schema even if it's an empty one
Maybe you wanted to write?
<Resource name="posts" />
Have you read the docs?
https://marmelab.com/react-admin/Resource.html
Supposedly, I've got a small problem, but can't tackle it.
I've got a small React-Native app, one screen only.
Redux is used as a store. It's being built via Expo. While using connect of react-redux, I've got the following error:
Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of Home.
The app works if the component rendered by Home component isn't wrapped by connect().
Attach some code below.
App.js
import React from "react";
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Home from './src/pages/Home';
import { Provider } from 'react-redux';
import configureStore from './src/stores/store';
const { store } = configureStore();
function App() {
return (
<Provider store={store}>
<AppContainer />
</Provider>
)
}
const MainNavigator = createStackNavigator({
Home: { screen: Home }
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
}
);
const AppContainer = createAppContainer(MainNavigator);
export default App;
Home.js
import React from "react";
import { StyleSheet, View, Text, Dimensions } from "react-native";
import SwitchEventTypes from "../components/SwitchEventTypes";
class Home extends React.Component {
constructor() {
super();
}
render() {
return (
<View>
<SwitchEventTypes />
</View>
)
}
}
SwitchEventTypes.js
import React, { Component } from "react";
import { connect } from 'react-redux';
import { StyleSheet, View, Text, Dimensions, TouchableOpacity } from "react-native";
import { updateEventType } from '../actions/actions';
const mapDispatchToProps = (dispatch) => {
return {
updateEventType: (newEventType) => {
dispatch(updateEventType(newEventType));
}
};
};
const mapStateToProps = (state) => {
return {
eventType: state.filter.eventType,
};
};
class SwitchEventTypes extends React.Component {
constructor() {
super();
this.state = {
isSwitchEventTypeOn: true
}
this.handleEventTypeChange = this.handleEventTypeChange.bind(this);
}
handleEventTypeChange(newEventType) {
this.props.updateEventType(newEventType);
}
render() {
return (
<View style={styles.switchTypesContainer}>
{this.props.eventType === 'active' ? <Text>123</Text> :
<Text>456</Text>
}
</View>
)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(SwitchEventTypes);
store.js
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';
const middleware = [thunk];
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const composedEnhancers = composeEnhancers(
applyMiddleware(...middleware),
)
export default () => {
const store = createStore(rootReducer, composedEnhancers);
return { store };
};
package.json
"dependencies": {
"expo": "^32.0.6",
"expo-react-native-shadow": "^1.0.3",
"expo-svg-uri": "^1.0.1",
"prop-types": "^15.7.2",
"react": "16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.1.tar.gz",
"react-native-calendars": "^1.32.0",
"react-native-svg": "^9.4.0",
"react-navigation": "^3.9.1",
"react-redux": "^7.0.1",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"react-native-switch": "^1.5.0"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0",
"redux-devtools-extension": "^2.13.8",
"schedule": "^0.4.0"
},
What may be the matter? Please, help. Thanks.
Your mapDispatchToProps is returning an object. You also don't need the extra returns as fat arrow functions already have an implicit return. Will make your code a little more readable.
const mapDispatchToProps = dispatch => ({
updateEventType: (newEventType) => dispatch(updateEventType(newEventType));
});
const mapStateToProps = state => {
eventType: state.filter.eventType, // might be worth your time to investigate selectors down the road
};
I have a react-navigation router like so:
const RootNavigator = createSwitchNavigator({
App: createBottomTabNavigator({
Home: {
screen: HomeScreenContainer
},
Scan: {
screen: DocumentScanScreenContainer
},
// ...
}, {
tabBarOptions: {
showLabel: false,
// ...
}
})
})
The HomeScreenContainer and DocumentScanScreenContainer are required because react-navigation accepts only React.Component, and my HomeScreen and DocumentScanScreen components are Redux components and importing them directly makes react-navigation throwing error.
HomeScreenContainer and DocumentScanScreenContainer are similar, so here is the DocumentScanScreenContainer:
import React from 'react'
import PropTypes from 'prop-types'
import DocumentScanScreen from '../../screens/DocumentScanScreen'
export default class DocumentScanScreenContainer extends React.Component {
static propTypes = {
navigation: PropTypes.shape.isRequired
}
render() {
const { navigation } = this.props
// Passing the navigation object to the screen so that you can call
// this.props.navigation.navigate() from the screen.
return (
<DocumentScanScreen navigation={navigation} />
)
}
}
And finally a short version of the DocumentScanScreen:
import React from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
class DocumentScanScreen extends React.Component {
static propTypes = {
token: PropTypes.string,
navigation: PropTypes.shape.isRequired
}
componentDidMount() {
const { token, navigation } = this.props
if (token === undefined || token === null || token === 0) {
navigation.navigate('Authentication')
}
}
// ...
}
I have warnings at each levels stating that navigation is undefined, so it's like my DocumentScanScreenContainer isn't receiving the navigation prop from the router :
Warning: Failed prop type: DocumentScanScreenContainer: prop type navigation is invalid; it must be a function, usually from the prop-types package, but received undefined.
Am I doing it wrong or is there a way to pass, from the router, the navigation prop to the DocumentScanScreenContainer ?
Try this:
Scan: {
screen: (props) => <DocumentScanScreenContainer {...props} />
},
*I'm not sure if this will work but I can't add a comment because I have < 50 rep