react-native - Stylesheet.create でネイティブ要素に反応する

Question

React-Native アプリで react-native-elements を使用しようとしています。

ここで説明されているように、ThemeProvider を使用して注入されているテーマの詳細を含む中央の js ファイルがあります - https://react-native-elements.github.io/react-native-elements/docs/customization.html

ただし、渡されたテーマをコンポーネントの stylesheet.create メソッドで使用しようとすると、エラーが発生します。私は何を間違っていますか？-

import React from 'react';
import {View, StyleSheet} from 'react-native';
import {Text, withTheme} from 'react-native-elements';

const Header = props => {
  const {theme} = props;

  return (
    <View style={styles.container}>
      <Text>Home</Text>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    width: '100%',
    backgroundColor: theme.container.backgroundColor,//**** Getting error here stating that theme is not defined
    shadowRadius: 1.5,
    elevation: 2,
    shadowColor: 'rgb(0,0,0)',
    shadowOpacity: 0.4,
    shadowOffset: {width: 0, height: 2.5},
  },
});

export default withTheme(Header);

詳細をお知らせできる場合はお知らせください。

---

アップデート：

@Sebastian Berglönn の下にある提案のおかげで、これを行うことで、別のファイルにエクスポートせずにパラメーター化することができました-

const Header = props => {
  const {theme} = props;

  return (
    <View style={styles(theme).container}>
      <Text>Home</Text>
    </View>
  );
};
const styles = theme =>
  StyleSheet.create({
    container: {
      width: '100%',
      backgroundColor: theme.container.backgroundColor,
      shadowRadius: 1.5,
      elevation: 2,
      shadowColor: 'rgb(0,0,0)',
      shadowOpacity: 0.4,
      shadowOffset: {width: 0, height: 2.5},
    },
  });