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 ?