I found the cause. It’s because ui-kitten hasn’t been transpiled yet. I also found a fix. I don’t know if it’s a workaround or a solution but this appears to be working for me.

1. Install these deps:

npm i --save next-compose-plugins next-transpile-modules

1. Update next.config.js

const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')(['@ui-kitten/components', 'react-native-svg']);

module.exports = withPlugins([withTM], {
  webpack: config => {
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      // Transform all direct `react-native` imports to `react-native-web`
      'react-native$': 'react-native-web',
    }
    config.resolve.extensions = [
      '.web.js',
      '.web.ts',
      '.web.tsx',
      ...config.resolve.extensions,
    ]
    return config
  },
});

From what I’ve seen you’ll have to add all modules that need to be transpiled to the array. It gets a bit slower though, but it’s not by a whole lot.

@RWOverdijk yes, it should. We can’t allow js for multiple reasons. Please open an issue in our repo if you still have questions on it

Oh heck yes, I did not know that. 😄

@artyorsh Nice. That definitely sped it up significantly. Down to ~20ms. 😮 Thanks, and also for the great work you guys are doing on UI Kitten. 😄

@andersravn oops. Could you please add an npm script with same code and try using it?

like

"scripts": {
  "bootstrap": "ui-kitten bootstrap @eva-design/eva"
}

and then

yarn bootstrap

# npm?
# npm run bootstrap

I started on expo web, but quickly found the bundle size to be abnormally large. Our website is almost 4MB. On top of that prerendering (which is what you’ll need for unfurling and OG reading) doesn’t work properly (and requires a lot of work to get decent).

Next is the right way I think.

In regards of my approach, it’s still not done but I am looking into exported style objects (just POJO) and then a template file (much like .web.js and .ios.js) for web and mobile. They both use the styles their own way (StyleSheet.create and style modules in next). It does mean I have some work to do in terms of a style system for web, but that’s the cost so far…

@RWOverdijk Wonderful! That worked. Thank you so much for getting back to me after trying out for yourself, and then giving such a thorough answer. I also spent several hours on my own before I decided to make this issue. This helped me out a ton. This should be a starter example. 😄

@andersravn Thought I’d add proof in the shape of a screenshot.

Code:

import * as React from 'react'
import Link from 'next/link'
import { StyleSheet, Text, View } from 'react-native'
import { Button } from '@ui-kitten/components'

export default function App(props) {
  return (
    <View style={styles.container}>
      <Text accessibilityRole="header" style={styles.text}>
        React Native for Web & Next.js
      </Text>

      <Link style={styles.link} accessibilityRole="link" href={`/alternate`}>
        A universal link
      </Link>

      <Button status='primary'>PRIMARY</Button>

      <View style={styles.textContainer}>
        <Text accessibilityRole="header" aria-level="2" style={styles.text}>
          Subheader
        </Text>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    flexGrow: 1,
    justifyContent: 'center',
  },
  link: {
    color: 'blue',
  },
  textContainer: {
    alignItems: 'center',
    marginTop: 16,
  },
  text: {
    alignItems: 'center',
    fontSize: 24,
    marginBottom: 24,
  },
})

Update: At some point I have to stop commenting, so I’ll start editing this message.

I also found that you have to replace the “links” in the example, otherwise the page will do a hard refresh. What works for me is just adding Link. I’ve updated the code snippet to reflect this.

Update 2: In case anyone else ends up here, my statement is a bit misleading. The above snippets aren’t enough to get the button to show up. You have to also add a new file: pages/_app.js with the following contents:

import { ApplicationProvider, Layout, Text } from '@ui-kitten/components';
import { mapping, light as lightTheme } from '@eva-design/eva';

function MyApp({ Component, pageProps }) {
  return (
    <ApplicationProvider mapping={mapping} theme={lightTheme}>
      <Component {...pageProps} />
    </ApplicationProvider>
  )
}

export default MyApp

3 hours later, I’m facing the same issue. Timing is everything.