text: import React from 'react';
  import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
  import { TextInput } from 'react-native-gesture-handler';
  import {Header} from 'react-native-elements';
  import db from '../config'
  //import firebase from 'firebase'
  
  export default class WriteStoryScreen extends React.Component {
      constructor(props){
          super(props);
          this.state = {
              title: '',
              author: '',
              storyText: '',
          }
      }
  
      handleTransaction=()=>{}
  
      render(){
          return(
              <View style={styles.container}>
                  <Header 
                      backgroundColor = {'pink'}
                      centerComponent = {{
                          text : 'Bedtime Stories',
                          style : { color: 'white', fontSize: 20}
                      }}
                  />
                  <TextInput 
                      placeholder="What's the title going to be?"
                      onChangeText= {(text)=>{
                          this.setState({
                              title: text
                          })
                      }}
                      value={this.state.title}
                      style={styles.title}/>
                  <TextInput
                      placeholder="your name"
                      onChangeText= {(text)=>{
                          this.setState({
                              author: text
                          })
                      }}
                      value={this.state.author}
                      style={styles.author} />
                  <TextInput 
                      placeholder="Start writing you story"
                      onChangeText= {(text)=>{
                          this.setState({
                              storyText: text
                          })
                      }}
                      value={this.state.storyText}
                      style={styles.storyText}
                      multiline={true}/>
                  
                  <TouchableOpacity
                      style={styles.submitButton}>
                      onPress ={async() =>{this.handleTransaction()}}
                      <Text style={styles.buttonText}>Submit</Text>
                  </TouchableOpacity>
              
              </View>
          );
      }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
    },
    title:{
        height: 40,
        borderWidth: 2,
        marginTop: 40,
        margin: 10
    },
    author: {
        height: 40,
        borderWidth: 2,
        margin: 10
    },
    storyText: {
        height: 250,
        borderWidth: 2,
        margin: 10
    },
    submitButton:{
        justifyContent: 'center',
        alignSelf: 'center',
        backgroundColor: 'cyan',
        width: 80,
        height: 40
    },
    buttonText: {
        textAlign: 'center',
        color: 'gray',
        fontWeight: 'bold'
    }
  });
  