Skip to content

Commit bb10637

Browse files
SimekWoLewicki
andcommitted
fix themes related examples in v4 (#571)
* [V4] fix themes related examples * add minor changes Co-authored-by: Wojciech Lewicki <wojciech.lewicki@swmansion.com>
1 parent 5e31b11 commit bb10637

File tree

1 file changed

+8
-2
lines changed

1 file changed

+8
-2
lines changed

website/versioned_docs/version-4.x/themes.md

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ class MyButton extends React.Component {
112112
static contextType = ThemeContext;
113113

114114
render() {
115+
const theme = this.context;
115116
return (
116117
<TouchableOpacity
117118
style={{ backgroundColor: theme === 'light' ? '#000' : '#fff' }}
@@ -341,7 +342,11 @@ Okay, that's a lot of code. There isn't much going on here aside from passing th
341342
A regrettable limitation of the current implementation of `navigationOptions` is that we are unable to access React context for use in properties such as `headerStyle` and `headerTintColor`. We can and should use them in properties that access React components, for example in `headerRight` we could provide a component like `ThemedHeaderButton`. To apply the theme to other properties we need to use `screenProps`.
342343

343344
```jsx
344-
import { createAppContainer, createStackNavigator } from 'react-navigation';
345+
import {
346+
createAppContainer,
347+
createStackNavigator,
348+
ThemeContext
349+
} from 'react-navigation';
345350

346351
class HomeScreen extends React.Component {
347352
static navigationOptions = ({ screenProps }) => {
@@ -409,6 +414,7 @@ import {
409414
createStackNavigator,
410415
createBottomTabNavigator,
411416
BottomTabBar,
417+
ThemeContext
412418
} from 'react-navigation';
413419

414420
const ThemeConstants = {
@@ -459,4 +465,4 @@ const Navigation = createAppContainer(Tabs);
459465

460466
You will likely want to go a bit further than we detailed in this guide, such as change the status bar color depending on the theme and customize the border color for the header and tab bar as well. You can see all of the above code plus some more changes to make it more complete in [this Snack](https://snack.expo.io/@react-navigation/themes-example).
461467

462-
I never said it was easy, but this about covers what you need to know to theme an app that uses React Navigation. Good luck, remember me you're a billionaire.
468+
I never said it was easy, but this about covers what you need to know to be able to theme an app that uses React Navigation. Good luck, remember me when you're a billionaire.

0 commit comments

Comments
 (0)