diff --git a/app/components/screen/index.js b/app/components/screen/index.js index fc0102b08..e85b710d0 100644 --- a/app/components/screen/index.js +++ b/app/components/screen/index.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; -import { StyleSheet, ScrollView, View } from 'react-native'; +import { Dimensions, StyleSheet, ScrollView, View } from 'react-native'; import PropTypes from 'prop-types'; +import { Icon, Button, Text } from 'native-base'; import ScreenDisplay from './ScreenDisplay'; import Widget from './Widget'; import Timer from '../Timer'; @@ -45,8 +46,16 @@ const styles = StyleSheet.create({ alignItems: 'center', opacity: 0.5, }, + icon: { + color: '#fff', + fontSize: 16, + paddingBottom: 5, + paddingHorizontal: 5, + }, }); +const { height } = Dimensions.get('window'); + class ActivityScreen extends Component { static isValid(answer, screen) { if (screen.inputType === 'markdown-message') { @@ -61,6 +70,7 @@ class ActivityScreen extends Component { scrollEnabled: true, inputDelayed: false, timerActive: false, + screenHeight: 0, }; this.interval = null; this.startTime = null; @@ -131,6 +141,10 @@ class ActivityScreen extends Component { } } + onContentSizeChange = (contentWidth, contentHeight) => { + this.setState({ screenHeight: contentHeight }); + } + render() { const { screen, answer, onChange, isCurrent, onContentError } = this.props; const { scrollEnabled, inputDelayed, timerActive } = this.state; @@ -141,6 +155,9 @@ class ActivityScreen extends Component { style={styles.container} contentContainerStyle={styles.contentContainer} scrollEnabled={scrollEnabled} + // eslint-disable-next-line no-return-assign + ref={scrollView => this.scrollView = scrollView} + onContentSizeChange={this.onContentSizeChange} > {inputDelayed @@ -184,6 +201,24 @@ class ActivityScreen extends Component { )} + { this.state.screenHeight > height ? ( + + + + ) : (null)} + ); }