Create a pdf from a React Native Form and send it to a cloud storage with an Expo APP

Viewed 94

I search a way to convert my React Native Form to a pdf and then send it automatically to a Cloud Storage. The user process :

1 - Fill a form 2 - Submit the form

Hidden Process from user 3 - Create a pdf from the form datas 4 - Store it to a cloud Storage

I updated my question, with more details. For example I have a form in my APP, and I want at the end, a pdf file button to create the PDF with the value from the user and send it to a server to save it on the cloud.

Here is my form

import React, { useState } from 'react';
import BouncyCheckbox from "react-native-bouncy-checkbox";

import {
  ScrollView,
  StyleSheet,
  Dimensions,
  TouchableOpacity
} from "react-native";
// Galio components
import { Block, Text, Button as GaButton, theme } from "galio- 
framework";
// Argon themed components
import { argonTheme, tabs, articles } from "../constants/";
import {  Input, Button, View, Card, Select, Icon, Header, 
Switch } from "../components/";

const { width } = Dimensions.get("screen");

class Tall extends React.Component {
state = {
 "switch-1": true,
 "switch-2": false
};

 renderText = () => {
  return (
   <Block flex style={styles.group}>
     <Text size={22} style={styles.title}>
       1 - HEIGHT
     </Text>
     <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
       <Text size={18}
         h3
         style={{ fontFamily: 'open-sans-regular', 
  marginBottom: theme.SIZES.BASE / 1 }}
        color={argonTheme.COLORS.DEFAULT}
      >
   - ARE YOU TALL ?
      </Text>
     </Block>
   </Block>
  );
  };

 renderSwitches = () => {
  return (
    <Block flex style={styles.group}>

    <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
      <Block
        row
        middle
        space="between"
        style={{ marginBottom: theme.SIZES.BASE }}
      >
         <Text style={{ fontFamily: 'open-sans-regular' }} size={14} color={argonTheme.COLORS.TEXT}>YES</Text>

        <BouncyCheckbox
          size={25}
          fillColor="green"
          unfillColor="#FFFFFF"

          iconStyle={{ borderColor: "green" }}
          onPress={(isChecked: boolean) => {}}
        />

      </Block>
      <Block row middle space="between">
        <Text style={{ fontFamily: 'open-sans-regular' }} size={14} color={argonTheme.COLORS.TEXT}>NO</Text>
        <BouncyCheckbox
          size={25}
          fillColor="red"
          unfillColor="#FFFFFF"

          iconStyle={{ borderColor: "red" }}
          onPress={(isChecked: boolean) => {}}
        />
       </Block>
      </Block>
      </Block>
    );
  };

  
  renderButtons = () => {
   return (
    <Block flex>

       <Block center>
         <Button textStyle={{ fontFamily: 'open-sans-bold' }} color="success" style={styles.button}>
         SEND
         </Button>
         </Block>


     </Block>
   );
  };

 render() {
   return (
    <Block flex center>
    <ScrollView
      showsVerticalScrollIndicator={false}
      contentContainerStyle={{ paddingBottom: 30, width }}
    >
      {this.renderText()}
      {this.renderSwitches()}
        {this.renderButtons()}


      </ScrollView>
    </Block>
   );
  }
  }

const styles = StyleSheet.create({
title: {
fontFamily: 'open-sans-bold',
paddingBottom: theme.SIZES.BASE,
paddingHorizontal: theme.SIZES.BASE * 2,
marginTop: 44,
color: argonTheme.COLORS.HEADER
 },
 group: {
paddingTop: theme.SIZES.BASE * 2
 },
shadow: {
shadowColor: "black",
shadowOffset: { width: 0, height: 2 },
shadowRadius: 4,
shadowOpacity: 0.2,
elevation: 2
},
button: {
marginBottom: 40,
marginTop: 80,
width: width - theme.SIZES.BASE * 2
},
optionsButton: {
width: "auto",
height: 34,
paddingHorizontal: theme.SIZES.BASE,
paddingVertical: 10
},
input: {
borderBottomWidth: 1
},
inputDefault: {
borderBottomColor: argonTheme.COLORS.PLACEHOLDER
},
inputTheme: {
borderBottomColor: argonTheme.COLORS.PRIMARY
},
inputTheme: {
borderBottomColor: argonTheme.COLORS.PRIMARY
},
inputInfo: {
borderBottomColor: argonTheme.COLORS.INFO
},
inputSuccess: {
borderBottomColor: argonTheme.COLORS.SUCCESS
},


});

export default Tall;

How I use Expo PRINT to retrieve the user choice (Are you tall ? Yes or NO) in the const HTML ?

1 Answers

Yes, it is possible with expo Print

const user = {
  name: 'Foub',
  surname: 'Bouf'
};
const html = `<div style="color: red">Mr.${user.name} ${user.surname}</div>`;
const { base64 } = await Print.printToFileAsync({
  html
});
// send the base64 which is a string containing the pdf's data to the server

You can put whatever HTML you want with whatever style you want, like a real HTML page

Related