UI Kitten & React Native Web no custom mapping

Question

I am having an issue trying to load the most basic custom mapping in React Native Web. The custom styles are loading just fine in the App, but not Web. Using the latest version with the babel loader hack as proposed here. I am using the default mapping as proposed in the UI Kitten docs for v5.x

My code looks like this:

import * as eva from '@eva-design/eva'
import * as mapping from '../styles/mapping.json'
import { myTheme } from '../styles/light-theme'

export default function App(): React.ReactElement {
    return <>
            <ApplicationProvider {...eva} theme={myTheme} customMapping={mapping}>
             ...
            </ApplicationProvider>
        </>
}

score 1 · Accepted Answer · answered Oct 17 '20 at 09:36

I tried replicating with a blank repo and it was working fine, so one line at a time I figured out that my import was not correct (not readable by babel?).

Instead of:

import * as mapping from '../styles/mapping.json'

Should be:

import {default as mapping} from '../styles/mapping.json'

The correct way is suggested in the UIKitten docs, so I don't think it will happen to many, but may help others as it's not an obvious thing if someone is working with the App emulator for the most time and not checking the Web until later.

score 0 · Answer 2 · answered Jan 19 '22 at 15:24

This is the way I use the custom mapping with ts file: custom-mapping.ts

export const customMapping: any = {
    components: {
        CircleButton: {
            meta:{...},
            appearances: {...}
    }
    }
}

and import it like this:

...
import {customMapping} from '../custom-mapping';

<ApplicationProvider
     ...
     customMapping={{...eva.mapping, ...customMapping}}
   >
      {children}
</ApplicationProvider>

UI Kitten & React Native Web no custom mapping

2 Answers2