Zacs doesn’t work with react native

[DavidJas]

When I update RN to 61.2. App crashed with error -->

.babelrc
{
"presets": ["module:metro-react-native-babel-preset"],
"plugins": [
[
"@nozbe/zacs/babel",
{
"platform": "native",
"production": false
}
],
["react-native-paper/babel"]
]
}

Have You any 💡 how can I fix it? Thx. :))

[radex]

did you clear bundler cache?

[DavidJas]

Yes, I did. And have the same problem.

[aidan-doherty]

I am having this issue, Seems to be caused by returning a zacs transpiled component from another function.

Here is an example i have come across that throws this error.

renderResults() {
        // Return a list of links from search results
        const { results, count, query } = this.state;
        const self = this;
        return (
            <Fragment>
                <Text>{count} hits that match your search criteria: {query}</Text>
                {
                    results.map(
                        function (result, index) {
                            return <ZacsLink><Result key={index} {...result} globalState={self.state} /></ZacsLink>
                        }
                    )
                }
            </Fragment>
        )
    }
const ZacsLink = zacs.styled({ web: 'a', native: TouchableOpacity })`

The Above fails on return <ZacsLink>.

[erhanbicer]

solved

Interestingly, I put it under the class. worked.👍

problem

same problem

const Box = zacs.view()

babel.config.js

module.exports = {
   presets: ['module:metro-react-native-babel-preset', 'module:react-native-dotenv'],
   plugins: [
      [
         '@nozbe/zacs/babel',
         {
            platform: 'native',
            production: false,
         },
      ],
   ],
}

[aidan-doherty]

@erhanbicer Can you try move any declared zacs components to the bottom of your file below the component you are working on. This fixes the issue for me.

After some more debugging i realize I was wrong in my previous comment the error was within my <Result> component and simply changing it from this.

import React, { Fragment } from 'react';
import zacs from '@nozbe/zacs'
import style from './style'

const Text = zacs.text()
const View = zacs.view() 

class Result extends React.Component {
    
    render() {
        const { title } = this.props;
        return (
            <Fragment>
                <View><Text>{title}</Text></View>
            </Fragment>
        )
    }
}

export default Result;

to this

import React, { Fragment } from 'react';
import zacs from '@nozbe/zacs'
import style from './style'

class Result extends React.Component {
    
    render() {
        const { title } = this.props;
        return (
            <Fragment>
                <View><Text>{title}</Text></View>
            </Fragment>
        )
    }
}

const Text = zacs.text()
const View = zacs.view() 

export default Result;

Has Stopped this error showing for me on react-native.

[aidan-doherty]

@erhanbicer ha, looks like we both resolved it at the same time :)

[erhanbicer]

@erhanbicer ha, looks like we both resolved it at the same time :)

@aidan2129 i was inspired by your previous comment :)