open with header and footer

[johntom]

Hi, Thanks for the repo as I finally can deliver pdf's! I would like to implement in my app where we have a header and footer and this following code represents most views in the app. I haven't been able to embed in the render() replacing the listview <PDFView ref={(pdf) => { this.pdfView = pdf; }} key="sop" path={this.pdfPath} onLoadComplete={(pageCount) => { console.log(total page count: ${pageCount}); this.zoom(); //def 1 }} style={styles.pdf} />

render() { return ( <Container theme={theme} style={{ backgroundColor: '#3b5999' }}> <Image source={require('../../../images/glow2.png') } style={styles.container}>

this.popRoute() }>

      <ListView
        dataSource={this.state.dataSource}
        renderRow={(rowData) =>
          <Card transparent foregroundColor='#fff' style={styles.card}>
            <CardItem style={styles.cardItem}>
              <Text>
                task: {rowData.title}
                {"\n"}
                status:
                {rowData.status}
                &nbsp; on-
                {moment(rowData.createdAt).format('dddd, MMMM Do YYYY') }
              </Text>
             <Button rounded style={{ backgroundColor: '#ff5700', paddingHorizontal: 15 }}
                textStyle={{ color: '#fff' }} onPress={this.updateTodo.bind(this, rowData) }>  Close It!
              </Button>
            </CardItem>
          </Card>
        } />
      <Footer style={{ borderTopWidth: 0 }}>
        <FooterComponent navigator={this.props.navigator} />
      </Footer>
    </Image>
  </Container>
)

}

[johntom]

got it to work.

/**

• Created by Kevin on 16/3/9.
• undefined is not an object (evaluating 'RNFSManager.RFFSFileTypeRegular') https://github.com/jayesbe/react-native-cacheable-image/issues/31 https://github.com/itinance/react-native-fs */ import React, { Component, } from 'react' import { StyleSheet, View, Text } from 'react-native'; import { Container, Header, Title, Icon, Left, Right, Button, Body } from 'native-base';

import { setToken } from '../../actions/user' import { connect } from 'react-redux' // import { Container, Header, Title, Content, Text, Button, Icon, Card, CardItem, Thumbnail, Footer } from 'native-base' import { Actions } from 'react-native-router-flux';

import PDFView from 'react-native-pdf-view'; import RNFS from 'react-native-fs'; import api from '../../utils/api'

import { openDrawer} from '../../actions/drawer';

// import Pdf from 'react-native-pdf';

import styles from './styles'; //Dimensions,

const glow2 = require('../../../images/glow2.png');

class Pdfviewer extends Component { state = { isPdfDownload: false };

constructor(props) { super(props) console.log('pdfview props:: ', props) console.log('drawingrecord props:: ', props.token.drawingrecord) console.log('drawingrecord pdftype:: ', props.token.pdftype)

let ddid
let Filename

this.pdfView = null;
this.pdfPath = RNFS.DocumentDirectoryPath + '/test1.pdf'

if (props.token.pdftype === 'drawing') {
  ddid = props.token.drawingrecord.DrawingDocId
  if (ddid === undefined) {
    ddid = props.DrawingDocId
  }
  console.log(' ddid:: ', ddid)
  //  this.source = { uri: "http://act.brookbridgeinc.com/Clients/ClientDrawing/Upload/" + ddid, cache: true };

  this.pdfDownloadURL = "http://act.brookbridgeinc.com/Clients/ClientDrawing/Upload/" + ddid
  //sample this.pdfDownloadURL = 'http://image.tianjimedia.com/imagelist/2009/190/caq4z56jadof.pdf';
  const options = {
    fromUrl: this.pdfDownloadURL,
    toFile: this.pdfPath
  };
  RNFS.downloadFile(options).promise.then(res => {
    this.setState({
      isPdfDownload: true
    });
  }).catch(err => {
    console.log(err);
  });

}

if (props.token.pdftype === 'status') {
  if (ddid === undefined) {
    ddid = props.ProjectDocId
  }
  console.log(' ddid:: ', ddid)

  // this.source = { uri: "http://act.brookbridgeinc.com/Clients/ClientDrawing/Upload/" + ddid, cache: false };
  this.pdfDownloadURL = "http://act.brookbridgeinc.com/Clients/ClientDrawing/Upload/" + ddid

  const options = {
    fromUrl: this.pdfDownloadURL,
    toFile: this.pdfPath
  };
  RNFS.downloadFile(options).promise.then(res => {
    this.setState({
      isPdfDownload: true
    });
  }).catch(err => {
    console.log(err);
  });

}

if (props.token.pdftype === 'vio') {
  console.log(' pdftype:: ', props.token.pdftype)
  Filename = props.token.drawingrecord.Filename
  console.log(' Filename:: ', Filename)
  if (Filename === undefined) {
    Filename = props.Filename
  }
  console.log(' ddid:: ', Filename)
  ///api/v1/oneviopdf/:bin/:filename
  ///api/v1/downloadoneviopdf/:bin/:filename
  let bin = this.props.token.building.BIN;
  // this.source = { uri: "http://cm.brookbridgeinc.com:8880/api/v1/downloadoneviopdf/" + bin + '/' + Filename, cache: true };
  this.pdfDownloadURL = "http://cm.brookbridgeinc.com:8880/api/v1/downloadoneviopdf/" + bin + '/' + Filename

  const options = {
    fromUrl: this.pdfDownloadURL,
    toFile: this.pdfPath
  };
  RNFS.downloadFile(options).promise.then(res => {
    this.setState({
      isPdfDownload: true
    });
  }).catch(err => {
    console.log(err);
  });
  console.log(' this.source:: ', this.source)
}

}

getData(props) { var userid = this.props.token.userid var username = this.props.name var token = this.props.token.token var tokenprp = this.props.token.taskct

} setToken(datarec) { this.props.setToken(datarec)

} componentDidMount() { const options = {

  fromUrl: this.pdfDownloadURL,
  toFile: this.pdfPath
};
RNFS.downloadFile(options).promise.then(res => {
  this.setState({ isPdfDownload: true });
}).catch(err => {
  console.log(err);
});

} zoom(val = 1.3) { // this.pdfView && setTimeout(() => { // this.pdfView.setNativeProps({ zoom: val }); // }, 3000);

} render() {

if (!this.state.isPdfDownload) {
  return (
    <View style={styles.container}>
      <Text>Downloading</Text>

    </View>
  );
}
return (
      <View style={styles.container}>
        <Container style={{ backgroundColor: '#384850' }}>
         <Header>
        <Left>
          <Button transparent onPress={() => Actions.pop()}>
            <Icon name="ios-arrow-back" style={{ fontSize: 30, lineHeight: 32 }} />
          </Button>
        </Left>
        <Body>
          <Title>PDF </Title>
        </Body>
        <Right>
          <Button transparent onPress={this.props.openDrawer}>
            <Icon name="ios-menu" style={{ fontSize: 30, lineHeight: 32 }} />
          </Button>
        </Right>
      </Header>

  <PDFView ref={(pdf) => { this.pdfView = pdf; }}
    key="sop"
    path={this.pdfPath}
    onLoadComplete={(pageCount) => {
      console.log(`total page count: ${pageCount}`);
      this.zoom();
    }}
    style={styles.pdf} />
       </Container>
    </View> 
)

} }

// this.zoom(); function bindActions(dispatch) { return { openDrawer: () => dispatch(openDrawer()), closeDrawer: () => dispatch(closeDrawer()), // popRoute: () => dispatch(popRoute()), // replaceRoute: (route) => dispatch(replaceRoute(route)), // replaceOrPushRoute: (route) => dispatch(replaceOrPushRoute(route))

} }

function mapStateToProps(state) { return { name: state.user.name, password: state.user.password, token: state.user.token } } // const styles = StyleSheet.create({ // container: { // flex: 1, // justifyContent: 'center', // alignItems: 'center' // }, // pdf: { // flex: 1 // } // }); export default connect(mapStateToProps, bindActions)(Pdfviewer)