[feature request] useTheme hook

Issue type

I’m submitting a …

• bug report
• feature request

Issue description

Current behavior: Not implemented yet.

Expected behavior: Exposing a custom hook useTheme to access to theme context value.

Using this hook we can be able to access the current value theme in this manner:

e.x:

import React from 'react';
import { View } from 'react-native';
import { useTheme } from 'themes';

function MyComponent() {
  const themeValue = useTheme();
  const backgroundColor = React.useMemo(
    () =>
      themeValue === 'light'
        ? { backgroundColor: 'blue' }
        : { backgroundColor: 'darkblue' },
    [themeValue]
  );

  return <View style={[backgroundColor]}></View>;
}

Related code:

Adding a useContext consuming ThemeContext.

export function useTheme(): ThemeType {
  const themeContext = useContext(ThemeContext);

  if (isEmpty(themeContext)) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }

  return themeContext;
}

Other information:

I have a fork with useTheme implemented with tests, but im not able to start expo app -.- It’s not finished yet but if maintainers are agree and see useful this feature im glad to keep working on this pr. link to repo with useTheme: https://github.com/x0s3/react-native-ui-kitten

Im open to talk else feel free to close this feature request 😃

[artyorsh]

@henoktsegaye when using withStyles in component you can do

const backgroundColor = props.themedStyle.container.backgroundColor;

[artyorsh]

@Veikedo We also have already some scripts to generate typescript interfaces for theme, component parameters and other Eva-based things, so it can make work autocomplete in your IDE, but it is also a beta feature

I also want to answer one question that you probably might have: We use dash-case for naming variables because we also have a web framework that is also based on Eva Design System 😃