How to use @callstack/react-theme-provider - 10 common examples

/* @flow */
/* eslint-disable no-redeclare */

import {
  createTheming,
  type ThemingType,
} from '@callstack/react-theme-provider';
import DefaultTheme from '../styles/DefaultTheme';
import type { Theme, ThemeShape } from '../types';

export const {
  ThemeProvider,
  withTheme,
}: ThemingType = createTheming(DefaultTheme);

// TODO: pick an appopriate icon color automatically
	const iconColor = white

	return (
		 onRemove(filter)}>
			
		
	)
}

export const RawActiveFilterButton = ActiveFilterButton

const ThemedActiveFilterButton = withTheme(ActiveFilterButton)

export {ThemedActiveFilterButton as ActiveFilterButton}

const styles = StyleSheet.create({
	badge: {
		alignItems: 'center',
		borderRadius: 15,
		flexDirection: 'row',
		justifyContent: 'center',
		marginRight: 10,
		paddingHorizontal: 10,
		paddingVertical: 5,
	},
	text: {
		fontSize: 14,
		paddingRight: 5,

/>
					}
					data={items}
					keyExtractor={this.keyExtractor}
					renderItem={this.renderItem}
					// TODO(react-native@0.58): enable this once React Native no longer dies when opening Settings
					//scrollEnabled={false}
				/>
			
		)
	}
}

export const RawRecentItemsList = RecentItemsList

const ThemedRecentItemsList = withTheme(RecentItemsList)

export {ThemedRecentItemsList as RecentItemsList}

const styles = StyleSheet.create({
	listItem: {
		paddingVertical: Platform.OS === 'ios' ? 5 : 0,
		paddingLeft: 2,
		fontSize: 16,
	},
	notice: {
		paddingTop: 30,
		paddingBottom: 35,
	},
	noticeText: {
		color: c.gray,
	},

},
  },
  dark: {
    themeName: 'dark',
    colors: {
      primary: lighten(0.05, colors.blue),
      text: colors.white,
      bodyBg: colors.black,
      headerBg: colors.black,
      link: lighten(0.15, colors.blue),
      ...colors,
    },
  },
}

const { ThemeProvider, withTheme, useTheme } = createTheming(themes.default)

export { ThemeProvider, withTheme, useTheme, themes, colors }

secondaryBackgroundColor: '#0c0c0c',
  primaryTextColor: '#FFF',
  secondaryTextColor: '#757575',
  accentColor: '#F8F32B',
};

export const lightTheme = {
  name: 'light',
  backgroundColor: '#FFF',
  secondaryBackgroundColor: '#f5f9ff',
  primaryTextColor: '#131313',
  secondaryTextColor: '#333',
  accentColor: '#3903fc',
};

const { ThemeProvider, withTheme } = createTheming(lightTheme);

export { ThemeProvider, withTheme };

primaryColor: '#FFA72A',
    accentColor: '#458622',
    backgroundColor: '#FFC777',
    textColor: '#504f4d',
    secondaryColor: '#7F5315',
  },
  dark: {
    primaryColor: '#FFA72A',
    accentColor: '#458622',
    backgroundColor: '#504f4d',
    textColor: '#FFC777',
    secondaryColor: '#252525',
  },
};

const { ThemeProvider, withTheme }: ThemingType = createTheming(
  themes.default
);

export { ThemeProvider, withTheme };

primaryColor: '#FFA72A',
    accentColor: '#458622',
    backgroundColor: '#FFC777',
    textColor: '#504f4d',
    secondaryColor: '#7F5315',
  },
  dark: {
    primaryColor: '#FFA72A',
    accentColor: '#458622',
    backgroundColor: '#504f4d',
    textColor: '#FFC777',
    secondaryColor: '#252525',
  },
};

export const { ThemeProvider, withTheme } = createTheming(themes.default);

import { createTheming } from '@callstack/react-theme-provider';
import DefaultTheme from '../styles/DefaultTheme';
import { Theme } from '../types';

export const { ThemeProvider, withTheme, useTheme } = createTheming(
  DefaultTheme
);

filterPlaceholderTextColor: '#aaa',
  activeOpacity: 0.5,
  itemHeight: getHeightPercent(7),
  flagSize: Platform.select({ android: 20, default: 30 }),
  flagSizeButton: Platform.select({ android: 20, default: 30 })
}
export const DARK_THEME = {
  ...DEFAULT_THEME,
  primaryColor: '#222',
  primaryColorVariant: '#444',
  backgroundColor: '#000',
  onBackgroundTextColor: '#fff'
}
export type Theme = Partial

const { ThemeProvider, useTheme } = createTheming(DEFAULT_THEME)

export { ThemeProvider, useTheme }

import * as React from 'react';
import ApolloClient from 'apollo-client';
import { ApolloProvider } from 'react-apollo';
import { createTheming } from '@callstack/react-theme-provider';
import theme from '../../style/theme';
import createGlobalStyle from '../../style/createGlobalStyle';

createGlobalStyle();

const { ThemeProvider } = createTheming(theme);

const Provider = ({
  client,
  children
}: {
  client: ApolloClient;
  children: React.ReactNode;
}) => {
  return (
    
      
        {children}
      
    
  );
};