Search code examples
react-nativereact-native-ui-kitten

UI Kitten functional component - Props undefined


I'm developing a react native mobile app using UI Kitten. I'm still fairly new to both react native and UI kitten, so I am using the just the plain Javascript template VS the Typescript template.

I have a functional component screen as shown below. This screen is working just fine. Today I started REDUX implementation.

const RequestScreen = ({ navigation }) => {
 // code removed for brevity
}

Within this screen I use the useEffect hook to fetch data from my API

  useEffect(() => {
    const unsubscribe = navigation.addListener("focus", () => {
      getServices();
    });

    return () => {
      unsubscribe;
    };
  }, [navigation]);

  const getServices = async () => {
    setLoading(true);
     // helper function to call API  
    await getAllServices().then((response) => {
      if (response !== undefined) {
        const services = response.service;
        setServices(services);
        setLoading(false);
      }
    });
    // update redux state
    props.getAllServices(services);
    
  };

 // code removed for brevity

const mapStateToProps = (state) => state;
const mapDispatchToProps = (dispatch) => ({
  getServices: (services) =>
    dispatch({
      type: Types.GET_SERVICES,
      payload: { services },
    }),
});

const connectComponent = connect(mapStateToProps, mapDispatchToProps);
export default connectComponent(RequestScreen);

On this line of code:

props.getAllServices(services);

I keep getting this error:

[Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'props.getAllServices')] at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch at node_modules\regenerator-runtime\runtime.js:293:29 in invoke

Anytime I try to use "props" in code here. I run into errors. How do I get the props on this screen?

I tried changing the screen, as shown below, but that does not work either!

const RequestScreen = ({ navigation, props }) => {
  // code removed
}

Solution

  • I was able to get the props object after changing the screen component as shown below.

    const RequestScreen = ({ navigation, ...props }) => {}