Skip to content

[V4] fix themes related examples #571

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jan 23, 2020
Merged

[V4] fix themes related examples #571

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e703272
[V4] fix themes related examples
Simek Jan 12, 2020
bad78fe
add minor changes
WoLewicki Jan 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions website/versioned_docs/version-4.x/themes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ class MyButton extends React.Component {
static contextType = ThemeContext;

render() {
const theme = this.context;
return (
<TouchableOpacity
style={{ backgroundColor: theme === 'light' ? '#000' : '#fff' }}
Expand Down Expand Up @@ -341,7 +342,11 @@ Okay, that's a lot of code. There isn't much going on here aside from passing th
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`.

```jsx
import { createAppContainer, createStackNavigator } from 'react-navigation';
import {
createAppContainer,
createStackNavigator,
ThemeContext
} from 'react-navigation';

class HomeScreen extends React.Component {
static navigationOptions = ({ screenProps }) => {
Expand Down Expand Up @@ -409,6 +414,7 @@ import {
createStackNavigator,
createBottomTabNavigator,
BottomTabBar,
ThemeContext
} from 'react-navigation';

const ThemeConstants = {
Expand Down Expand Up @@ -459,4 +465,4 @@ const Navigation = createAppContainer(Tabs);

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).

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.
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.