Where are spacings defined, if at all?

[RWOverdijk]

💬 Question

I see spacings in the mappings but no "global" spacings. Does this mean that there is no grid/sizing defined with eva?

By spacing I mean things such as paddings, border radius, sizes and margins, it looks like these are defined per component instead of globally.

Is this part of the system? If so, what benefit does it have? It looks like the base system is based on 8px, but then icons in the menu for example are 20px, whereas the ones in the ListItem are 24.

I'm really trying to figure out this eva system so do excuse me for the (probably) dumb noob questions.

[artyorsh]

There is. But not strictly defined in mappings (in current version). We use Sketch from our design team + some internal generation tools. You can find sketch file on the eva.design

[RWOverdijk]

So the mappings are generated? Is there a way for others (me) to use those spacings to also generate consistently spaced mappings? I really love the system so far. The spacings part is me nitpicking, but I do think it's important.

[artyorsh]

Sometimes there are exceptions. As you mentioned about ListItem. That’s true, and we suppose it can’t be just perfect.

[artyorsh]

Is there a way for others (me) to use those spacings to also generate consistently spaced mappings?

Not yet :)

[RWOverdijk]

@artyorsh It's getting there though 😄 I got the figma file yesterday and we're very happy with it. As to the spacings, I guess I can make a constants file myself and use that in my mappings.

Maybe a global variables feature would be something cool to add here? Mainly for spacings of course. If you agree I wouldn't mind helping out with that. For now I'll close this issue though, as this would be offtopic.

Thanks for the very fast and informative replies thus far, you're killing it 😄

[artyorsh]

If you're going to become familiar with mapping system, I would suggest using strict set of variables for that purposes. In current version it is extendable and may be used for declaring variables for your components. Some time we will unify it too 👍 You may post your final solution here, I'm interested :)

[RWOverdijk]

That's what I was planning on doing actually! Just like the colours I'll have my spacing defined like in the eva mappings.

[alexandrtovmach]

Are there any updates on it in 2021? I really like this framework, looks fresh and stylish, and much easier to use. Just curious if I should use my consts to manage spacings, as suggested in https://github.com/akveo/react-native-ui-kitten/issues/954#issuecomment-602017703, or some solution is already done?

[alexandrtovmach]

Just put it here, maybe it'll help to someone. I provided strict to styled-component ThemeProvider to have a simple access to spaces (but not only) like padding: ${({ theme }) => theme['size-tiny']}px;.

NOTE: I've chagned a bit default recommended approach to have full support of types. By default export, eva provides "any" type, for "light", "dark", and it's not cool :smile: and direct import works better (check ./helpers/theme.ts file)

-        <ApplicationProvider {...eva} theme={{ ...eva.light, ...evaTheme }}>
+        <ApplicationProvider {...eva} theme={evaTheme}>

App.tsx

import 'react-native-gesture-handler'
import * as eva from '@eva-design/eva'
import { ApplicationProvider, IconRegistry } from '@ui-kitten/components'
import { EvaIconsPack } from '@ui-kitten/eva-icons'
import React from 'react'
import { Provider } from 'react-redux'
import { strict } from '@eva-design/eva/mapping'
import { ThemeProvider } from 'styled-components'

import { evaTheme } from './helpers/theme'
import store from './redux/store'

const App: React.FunctionComponent = () => {
  return (
    <Provider store={store}>
        <IconRegistry icons={EvaIconsPack} />
        <ApplicationProvider {...eva} theme={evaTheme}>
          <ThemeProvider theme={strict}>
              <Router />
          </ThemeProvider>
        </ApplicationProvider>
    </Provider>
  )
}

export default App

./helpers/theme.ts

// import darkTheme from '@eva-design/eva/themes/dark'
import lightTheme from '@eva-design/eva/themes/light'

export const evaTheme = {
  ...lightTheme,
  // ...darkTheme,

  'color-primary-100': '#FEFBF8',
  'color-primary-200': '#FEF6F2',
  /* rest of theme generated in https://colors.eva.design/ */
}

./components/Field/index.tsx

import React, { useContext } from 'react'
import { View } from 'react-native'
import styled from 'styled-components'

const Field = styled(View)`
  padding: ${({ theme }) => theme['size-tiny']}px;
`