Form about react-native-paper HOT 14 CLOSED

Sure thing. Will send you an email with some questions about this

from react-native-paper.

Hello, is this still of actuality? I am starting with react-native and react-native-paper and I am building a native/web app. I have web experience, how should I design a form with those tools?

from react-native-paper.

@satya164 Have you considered using Shoutem's UI library? It's pretty neat actually and we may be re-writing NativeBase using that.

from react-native-paper.

@sanketsahusoft it's very nice, but it has a different design, which is more iOSy than material

from react-native-paper.

Oops! I actually meant shoutem/theme Not shoutem/ui

from react-native-paper.

@sanketsahusoft Ah. On first look it looks very CSS-like. I kinda I prefer flat JS styles rather than CSS-like JS style. Neat concept, but it brings the same issues as normal CSS.

from react-native-paper.

@satya164 We are researching about the pros and cons of the same but our early experiments makes us confident on using it. We will make a final call by Wednesday. I will let you know if we do or don't go forward with it with whys.

from react-native-paper.

@sanketsahusoft Cool. looking forward to it.

from react-native-paper.

Is this still a thing to do? I was thinking about creating my own lib using Paper's components... I can try to implement what I was thinking here

from react-native-paper.

@luissmg can you create a proposal?

from react-native-paper.

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

from react-native-paper.

I have implemented react final form with native and web, it work great with react native and if someone needs to see an example of implementation please let me know

from react-native-paper.

@kopax please post it, I think it can help others in the future.

General: I discovered Formik a few years ago, would be nice to see these things work together somehow.

from react-native-paper.

@brodybits, this is an example form with react-native-paper and react-final-form, it work fine, feel free to improve share or comment.:

import { Field, Form } from 'react-final-form';
import { Button } from 'react-native-paper';
// etc...

// later...
function App() {
  const t = useTranslate();
  return (
      <Form
        onSubmit={_onConfirmedPressed}
        render={({
          handleSubmit,
          form,
          submitting,
          pristine,
          values,
        }) => (
          <WebForm onSubmit={handleSubmit}>
            <Field
              component={TextField}
              label={t('form.title')}
              type="text"
              name="title"
            />
            <Button
              type="submit"
              mode="contained"
              onPress={handleSubmit}
              loading={submitting}
              // disabled={submitting || pristine}
            >
              {t('form.submit')}
            </Button>
          </WebForm>
        )}
      />
  );
}

With _onConfirmedPressed being the user submit action.

I have also created WebForm.js:

import React, { Fragment } from 'react';
import { Platform } from 'react-native';

/** @component
 *
 * Web semantic require a <form> tag
 */
export default ({ onSubmit, ...rest }) => Platform.OS === 'web'
  ? <form onSubmit={onSubmit} {...rest} />
  : <Fragment {...rest} />;

This is the React Native Paper TextField.js I have made:

import React, { memo } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { TextInput, withTheme } from 'react-native-paper';

const TextField = ({ meta, input, validate, name, theme, ...rest }) => {
  const styles = StyleSheet.create({
    container: {
      width: '100%',
      marginVertical: 12,
    },
    input: {
      backgroundColor: theme.colors.surface,
    },
    error: {
      fontSize: 14,
      color: theme.colors.error,
      paddingHorizontal: 4,
      paddingTop: 4,
    },
  });
  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        selectionColor={theme.colors.primary}
        underlineColor="transparent"
        mode="outlined"
        error={meta.error && meta.touched}
        {...input}
        {...rest}
      />
      {meta.error && meta.touched && <Text style={styles.error}>{meta.error}</Text>}
    </View>
  );
};


export default memo(withTheme(TextField));

Note that there is this library : https://github.com/carlosroberto555/react-native-final-form-material

It target user that wants to use react-final-form with react-native-paper, it would be a good place to group up the community effort, the owner is often around.

They do not have much field yet, for example the SelectField is missing (since it's missing in react-native-paper).

from react-native-paper.