diff --git a/demo/demoRoot.android.js b/demo/demoRoot.android.js index a50dba0..04e488a 100644 --- a/demo/demoRoot.android.js +++ b/demo/demoRoot.android.js @@ -4,23 +4,41 @@ import { View, TouchableOpacity, } from 'react-native'; +import PropTypes from 'prop-types'; +import {Navigation} from 'react-native-navigation'; export default class KeyboardInput extends Component { + static propTypes = { + componentId: PropTypes.string, + }; + + constructor(props) { + super(props); + this.onPressBodyMessage = this.onPressBodyMessage.bind(this); + } onPressBodyMessage() { - this.props.navigator.push({ - screen: 'screens.innerScreen', - navigatorStyle: {drawUnderNavBar: true, navBarHidden: true}, - passProps: { - message: 'In the secondary tab, the keyboard input is inside a pushed screen, yet it works nonetheless! :-)' - } + Navigation.push(this.props.componentId, { + component: { + name: 'screens.innerScreen', + passProps: { + message: 'In the secondary tab, the keyboard input is inside a pushed screen, yet it works nonetheless! :-)', + }, + options: { + topBar: { + title: { + text: 'Second screen', + }, + }, + }, + }, }); } render() { return ( - + Tap for more keyboard fun... diff --git a/demo/demoScreen.js b/demo/demoScreen.js index b547595..a94e85e 100644 --- a/demo/demoScreen.js +++ b/demo/demoScreen.js @@ -8,6 +8,7 @@ import { PixelRatio, Platform, } from 'react-native'; +import PropTypes from 'prop-types'; import {AutoGrowingTextInput} from 'react-native-autogrow-textinput'; import {KeyboardAccessoryView, KeyboardUtils} from 'react-native-keyboard-input'; @@ -17,6 +18,9 @@ const IsIOS = Platform.OS === 'ios'; const TrackInteractive = true; export default class KeyboardInput extends Component { + static propTypes = { + message: PropTypes.string, + }; constructor(props) { super(props); @@ -143,10 +147,12 @@ export default class KeyboardInput extends Component { } } +const COLOR = '#F5FCFF'; + const styles = StyleSheet.create({ container: { flex: 1, - backgroundColor: '#F5FCFF', + backgroundColor: COLOR, }, scrollContainer: { justifyContent: 'center', @@ -170,6 +176,7 @@ const styles = StyleSheet.create({ ...Platform.select({ ios: { flex: 1, + backgroundColor: COLOR, }, }), }, diff --git a/index.android.js b/index.android.js index a5ad39f..eecda7a 100644 --- a/index.android.js +++ b/index.android.js @@ -1,10 +1,10 @@ import KeyboardAppScreen from './demo/demoScreen'; -import KeyboardInput from './demo/demoRoot'; +import DemoRootScreen from './demo/demoRoot'; import {Navigation} from 'react-native-navigation'; Navigation.registerComponent('screens.star', () => KeyboardAppScreen); -Navigation.registerComponent('screens.settings', () => KeyboardInput); +Navigation.registerComponent('screens.settings', () => DemoRootScreen); Navigation.registerComponent('screens.innerScreen', () => KeyboardAppScreen); Navigation.setRoot({ @@ -16,7 +16,7 @@ Navigation.setRoot({ component: { name: 'screens.star', passProps: { - text: 'On the main tab, the keyboard input is in the root screen!' + message: 'On the main tab, the keyboard input is in the root screen!', }, }, }], @@ -25,20 +25,34 @@ Navigation.setRoot({ text: 'Main Tab', icon: require('./demo/res/star.png'), }, + topBar: { + title: { + text: 'Main Tab', + }, + }, }, }, }, { - component: { - name: 'screens.settings', - passProps: { - text: 'Secondary Tab', - }, + stack: { + children: [{ + component: { + name: 'screens.settings', + passProps: { + message: 'Secondary Tab', + }, + }, + }], options: { bottomTab: { text: 'Second Tab', icon: require('./demo/res/settings.png'), }, + topBar: { + title: { + text: 'Second Tab', + }, + }, }, }, }],