Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React from 'react';
import * as Native from 'react-native';
import styled from 'styled-components'
import TextInputMask from 'react-native-text-input-mask'
const Layout = {
Container: styled.View`
align-items: center;
justify-content: center;
padding: 5%;
height: 100%;
width: 100%;
`,
Card: styled.View`
elevation: 5;
width: 100%;
border-radius: 5px;
overflow: hidden;
`
}
const Formulary = {
Container: styled.View`
padding: 5%;
`,
Field: styled.View`
background-color: white;
border-radius: 5px;
padding: 2.5%;
`,
Title: styled.Text`
font-weight: bold;
font-size: 20px;
padding-bottom: 5%;
`,
Label: styled.Text`
font-weight: bold;
padding-bottom: 2.5%;
`,
Value: styled.Text`
padding-top: 2.5%;
padding-bottom: 2.5%;
`,
TextInput: styled.TextInput`
background-color: white;
elevation: 5;
border-radius: 5px;
padding: 2.5%;
`,
TextInputMask: styled(TextInputMask)`
background-color: white;
elevation: 5;
border-radius: 5px;
padding: 2.5%;
`
}
const Button = {
Container: styled.TouchableOpacity`
background-color: cornflowerblue;
width: 100%;
padding: 2.5%;
align-items: center;
justify-content: center;
`,
Label: styled.Text`
color: white;
font-weight: bold;
`,
}
export default function Application() {
const [values, setValues] = React.useState({})
function onChange(field) {
return function onChangeField(value) {
setValues(actualValues => ({
...actualValues,
[field.slug]: value
}))
}
}
function RenderField(field) {
const Input = field.props && field.props.mask !== undefined
? Formulary.TextInputMask
: Formulary.TextInput
return (
<Formulary.Field key={field.slug}>
<Formulary.Label>
{field.label}
</Formulary.Label>
<Input
onChangeText={onChange(field)}
defaultValue={values[field.slug]}
placeholder="Insert value here"
{...field.props}
/>
<Formulary.Value>
Value: {values[field.slug] || 'Empty!'}
</Formulary.Value>
</Formulary.Field>
)
}
const Form = [
{
slug: 'textinput1',
label: 'Simple Textual Input',
props: {
placeholder: 'Edit me!'
}
},
{
slug: 'mailaddress',
label: 'E-mail Adress',
props: {
keyboardType: 'email-address'
}
},
{
slug: 'phonenumber',
label: 'Phone Number',
props: {
keyboardType: 'phone-pad',
}
},
{
slug: 'decimalinput',
label: 'Decimal Input',
props: {
keyboardType: 'decimal-pad',
}
},
{
slug: 'maskedphonenumber',
label: 'Masked Phone Number',
props: {
keyboardType: 'phone-pad',
mask: "+1 ([000]) [000] [00] [00]"
}
},
{
slug: 'creditcard',
label: 'Masked Credit Card',
props: {
keyboardType: 'numeric',
mask: "[0000] [0000] [0000] [0000]"
}
},
{
slug: 'price',
label: 'Masked Price',
props: {
keyboardType: 'numeric',
mask: "$[999990],[99]"
}
},
{
slug: 'secureinput',
label: 'Password Secure',
props: {
secureTextEntry: true
}
},
]
return (
<Native.KeyboardAvoidingView behavior="padding">
<Native.StatusBar hidden />
<Native.ScrollView>
<Layout.Container>
<Layout.Card>
<Formulary.Container>
<Formulary.Title>
Formulary Example
</Formulary.Title>
{Form.map(RenderField)}
</Formulary.Container>
<Button.Container>
<Button.Label>
Submit
</Button.Label>
</Button.Container>
</Layout.Card>
</Layout.Container>
</Native.ScrollView>
</Native.KeyboardAvoidingView>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment