SquareOffsetView.js

import React, {Component, PropTypes} from 'react';
import {TouchableWithoutFeedback,View,Dimensions,
  StyleSheet, Image, Text, TouchableOpacity} from 'react-native';
import Overlay from 'react-native-overlay';
import FloatLabelTextInput from 'react-native-floating-label-text-input';
import {Button, Icon, Item, Input} from 'native-base';
import AppStrings from '../../localization/appStrings';
import {cleanNumericString} from '../../utils/stringUtils';
import {SOP_BLUE} from './../../styles/commonStyles';

const ScreenWidth = Dimensions.get('window').width;

class SquareOffsetView extends Component {

 
  constructor(props) {
    super(props);
  }


  render() {
    return (
      <View style={styles.viewContainer}>
          <View style={styles.imageContainer}>
            <TouchableOpacity style={styles.imageOpacity}>
                <Image
                style={styles.image}
                source={require('../../images/diagram-1@1x.png')}/>
            </TouchableOpacity>
          </View>
          <View style={styles.inputContainer}>
            <View>
            <Item>
                <Icon active name='home' />
                <Input placeholder='Icon Textbox'/>
              </Item>
              <Item>
                <Icon active name='home' />
                <Input placeholder='Icon Textbox'/>
              </Item>
              <Item>
                <Icon active name='home' />
                <Input placeholder='Icon Textbox'/>
              </Item>
            </View>
            <View>
              <Item>
                <Icon active name='home' />
                <Input placeholder='Icon Textbox'/>
              </Item>
              <Item>
                <Icon active name='home' />
                <Input placeholder='Icon Textbox'/>
              </Item>
              <Item>
                <Icon active name='home' />
                <Input placeholder='Icon Textbox'/>
              </Item>
            </View>
          </View>
            <View style={styles.buttonView} isVisible={!this.props.isVisible}>
              <Button large iconLeft primary
                  accessible={true}
                  accessibilityLabel={AppStrings.calculateBtnText}
                  onPress={this.calculate} >
                  <Icon name='calculator' style={{color: 'white'}} />
                  <Text style={styles.buttonTextStlye}>
                  {AppStrings.calculateBtnText}
                </Text>
              </Button>
              <Button medium warning
                  accessible={true}
                  accessibilityLabel={AppStrings.resetBtnText}
                  onPress={this.reset}
                  style={{marginLeft: 4}}>
                  <Icon name='trash' style={{color: 'white'}}/>
              </Button>
            </View>
        </View>
    );
  }
  }
const styles = StyleSheet.create({
  viewContainer: {
    flex: 1,
    backgroundColor: '#ecf0f1',
    marginBottom: 5
  },
  imageContainer: {
    flex: 3.5,
    flexDirection: 'column',
    justifyContent: 'space-between',
    backgroundColor: '#ecf0f1',
    padding: 5,
    margin: 5
  },
  inputContainer: {
    flex: 3,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    backgroundColor: '#ecf0f1',
    padding: 5,
    margin: 5
  },
  overlayContainer: {
    backgroundColor: SOP_BLUE,
    flex: 1
  },
  awesomeAlertButton: {
    minHeight: '10%'
  },
  awesomeAlertText: {
    maxWidth: '90%',
    flexWrap: 'wrap'
  },
  buttonTextStlye:
  {
    color: 'white'
  },
  imageOpacity: {
    flex: 2.5,
    minWidth: ScreenWidth,
    maxWidth: ScreenWidth,
    marginBottom: 5
  },
  image: {
    resizeMode: 'stretch',
    flex: 3,
    minWidth: ScreenWidth,
    maxWidth: ScreenWidth,
    borderColor: '#888',
    marginBottom: 5
  },
  textInput: {
    alignSelf: 'stretch'
  },
  buttonView: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: 15,
    marginBottom: 4
  }
});
export default SquareOffsetView;