Files
react-navigation/packages/native/src/Themed.js
Brent Vatne 64bcdd3c0c Add support for themes.
commit 5f31e17848930a10c6139076c0135900fc6dbcd5
Author: Brent Vatne <brentvatne@gmail.com>
Date:   Thu Aug 22 17:40:47 2019 -0700

    Release 3.6.0

commit f681caaab82549cb565d6b8f52f40cb97ec8a9e3
Author: Brent Vatne <brentvatne@gmail.com>
Date:   Thu Aug 22 17:39:31 2019 -0700

    Add default theme as light and use light when no-preference is provided

commit bd3e41ec479e9f0a514f2d564c8d4bd62abe99ed
Author: Brent Vatne <brentvatne@gmail.com>
Date:   Wed Aug 14 16:22:18 2019 -0700

    feat: add Themed.TextInput and fix app container

commit f9334201893f93c81d6900811b481cee3818c748
Author: Brent Vatne <brentvatne@gmail.com>
Date:   Wed Aug 14 10:46:55 2019 -0700

    chore: bump version

commit 8cf7a3a7d2883d637c4c184684c5445f02a0c919
Author: Brent Vatne <brentvatne@gmail.com>
Date:   Wed Aug 14 10:44:33 2019 -0700

    fix: respect themed status bar props and warn when theme provided is unsupported

commit c2c1b114cdaa4a5e60407aa15350cbc6609218c4
Author: Brent Vatne <brentvatne@gmail.com>
Date:   Mon Aug 12 19:26:02 2019 -0700

    feat: add Themed

commit 13c115611fb254659ef471b685a663fdd5839163
Author: Brent Vatne <brentvatne@gmail.com>
Date:   Thu Aug 8 21:01:25 2019 -0700

    feat: Add themes provider
2019-08-22 17:41:46 -07:00

60 lines
1.2 KiB
JavaScript

import * as React from 'react';
import { StatusBar, Text, TextInput } from 'react-native';
import { ThemeContext, ThemeColors } from '@react-navigation/core';
class ThemedText extends React.Component {
static contextType = ThemeContext;
render() {
return (
<Text
{...this.props}
style={[{ color: ThemeColors[this.context].label }, this.props.style]}
/>
);
}
}
class ThemedTextInput extends React.Component {
static contextType = ThemeContext;
render() {
return (
<TextInput
{...this.props}
placeholderTextColor={
this.context === 'dark' ? '#ebebf54c' : '#3c3c434c'
}
style={[{ color: ThemeColors[this.context].label }, this.props.style]}
/>
);
}
}
class ThemedStatusBar extends React.Component {
static contextType = ThemeContext;
render() {
let { barStyle, ...props } = this.props;
return (
<StatusBar
barStyle={
barStyle
? barStyle
: this.context === 'dark'
? 'light-content'
: 'default'
}
{...props}
/>
);
}
}
export default {
Text: ThemedText,
StatusBar: ThemedStatusBar,
TextInput: ThemedTextInput,
};