TextInput field collapses on Android

[gmlion]

In InputComponent I see you're setting TextInput's width to this.state.width-this.state.labelWidth, but in Android label's width is the component total width, since the container defaults to { flexDirection: 'column', alignItems: 'stretch' }

I'm not sure if it is the intended behaviour, are you passing something to containerStyle or inputStyle to make it work?

I'm currently overriding the alignItems property to 'flex-start', so that label's width value is limited to its effective length.

[MichaelCereda]

Does my example works on your configuration?
Which code are you using?

On Tue, Oct 4, 2016, 7:50 AM gmlion [email protected] wrote:

In InputComponent I see you're setting TextInput's width to
this.state.width-this.state.labelWidth, but in Android label's width is the
component total width, since the container defaults to { flexDirection:
'row', alignItems: 'stretch' }

I'm not sure if it is the intended behaviour, are you passing something to
containerStyle or inputStyle to make it work?

I'm currently overriding the alignItems property to 'flex-start', so that
label's width value is limited to its effective length.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#68,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAGjfg2a0hHyRfw_YbXhsN-KjvZKSYoRks5qwj2UgaJpZM4KNlZE
.

Michael Cereda
http://michaelcereda.com

[gmlion]

You should see the problem in this example form, unless I have something else interfering:

import React from 'react';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,ScrollView,
} from 'react-native';


import { Form,
  Separator,InputField, LinkField,
  SwitchField, PickerField,DatePickerField,TimePickerField
} from 'react-native-form-generator';

class EssentialForm extends React.Component {
    render() {
        return(
                <ScrollView>
                    <Form>
                        <InputField ref='memo' label='Memo' value={'value'} containerStyle={[{ paddingLeft: 7 }]} />
                        <InputField ref='memo2' label='Memo' value={'value'} containerStyle={[{ paddingLeft: 7 }]} />
                        <InputField ref='memo3' label='Memo' value={'value'} containerStyle={[{ paddingLeft: 7 }]} />
                        <InputField ref='memo4' label='Memo' value={'value'} containerStyle={[{ paddingLeft: 7 }]} />
                        <InputField ref='memo5' label='Memo' value={'value'} containerStyle={[{ paddingLeft: 7 }]} />
                        <InputField ref='memo6' label='Memo' value={'value'} containerStyle={[{ paddingLeft: 7 }]} />
                    </Form>
                </ScrollView>
        );
    }
}

module.exports = EssentialForm;

In your example form, on Android, the first name field collapses, too, because of the label property being set.

[kwnzak]

Encountering the same problem on Android; if a label is set for the InputField, the input seems to be collapsed and you can't see what is being typed into the field.

[MichaelCereda]

I'm reinstalling a test environment to see if I can reproduce this error.

[florianbepunkt]

the problem appears also in your demo example. has anyone found a fix for this?

[Philip-Nunoo]

facing the same issue in android. The input field collapses to the almost the width of the cursor

[MichaelCereda]

I'm refactoring the whole package to make it compatible with the last
version of react native (resolving also some deprecations).
My suggestion by now is to create a custom field with the style you prefer.
(it's very easy and painless)
Once you have a custom field you can use it as any other standard field.
Thank you and please let me know if you have any problems.

On Mon, Nov 21, 2016, 5:32 AM Philip Nunoo [email protected] wrote:

facing the same issue in android. The input field collapses to the almost
the width of the cursor

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
#68 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAGjfjCw62WahLLYggdyd2H8bG-m7VbAks5rAXNQgaJpZM4KNlZE
.

Michael Cereda
http://michaelcereda.com

[florianbepunkt]

Thank you Michael. Quick question: I have a (multi) slider field component, supporting single and dual knob sliders. Any interest in this? It introduces a dependncy though

[MichaelCereda]

Yes we can be very interested.. Does it support both Android and ios?
If you have the source code available please link it here.
I'll take a look later today.
Thanks

On Mon, Nov 21, 2016, 5:38 AM florianbepunkt [email protected]
wrote:

Thank you Michael. Quick question: I have a (multi) slider field
component, supporting single and dual knob sliders. Any interest in this?
It introduces a dependncy though

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
#68 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAGjfuqYhyvs7hReaZ0r5L0bbKD_BhB8ks5rAXSxgaJpZM4KNlZE
.

Michael Cereda
http://michaelcereda.com

[florianbepunkt]

Yes it supports both android and ios. I'll upload and link an example later today.

[florianbepunkt]

Sorry, was busy the last two days… can you please expose the Field class #80 ? And if you find time to respond to my issue regarding default values here #81 this would be appreciated. Especially with the slider IMO this poses a problem, as users probably won't change the default value. Anyway, here is my basic code for the slider, using @ptomasroos/react-native-multi-slider slider module

import React, { Component } from 'react';

import {
  StyleSheet,
  Text,
  View
} from 'react-native';

import MultiSlider from '@ptomasroos/react-native-multi-slider';

export class MultiSliderField extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: this.props.initialValue
    };
  }

  static defaultProps = {
    ...Component.defaultProps,
    label: '',
    unitLabel: '',
    dualKnob: false,
    sliderLength: 280
  }

  handleChange = (values) => {
    this.setState({
      value: values
    });

    if(this.props.onChange)      this.props.onChange(values);
    if(this.props.onValueChange) this.props.onValueChange(values);
  }

  render() {
    return (
      <Field>
        <View style={ComponentStyles.sliderLabelContainer}>
          <Text style={ComponentStyles.sliderLabel}>{this.props.label}</Text>
          <Text style={ComponentStyles.sliderValues}>{ this.props.dualKnob ?
            this.state.value[0] + ' - ' + this.state.value[1] + ' ' + this.props.unitLabel
            :
            this.state.value + ' ' + this.props.unitLabel
          }</Text>
          <MultiSlider
            style={[ComponentStyles.slider]}
            min={this.props.min}
            max={this.props.max}
            values={this.state.value}
            sliderLength={this.props.sliderLength}
            onValuesChange={this.handleChange.bind(this)}
            selectedStyle={ComponentStyles.sliderSelected}
            unselectedStyle={ComponentStyles.sliderUnselected}
          />
        </View>
      </Field>
    )
  }
}


const ComponentStyles = StyleSheet.create({
  sliderLabelContainer: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    paddingTop: 20
  },

  sliderLabel: {
    fontSize: 16,
    marginBottom: 20
  },

  sliderValues: {
    fontSize: 16,
    marginBottom: 30
  },

  slider: {
    paddingTop: 20
  },

  sliderSelected: {
    backgroundColor: '#C6CDE0'
  },

  sliderUnselected: {
    backgroundColor: '#D1D9ED'
  },

});

Usage would be like this

<MultiSliderField
    ref='lookingForAge'
    min={18}
    max={100}
    dualKnob={true}
    sliderLength={280}
    initialValue={[18,100]}
    unitLabel='years'
    label='I'm looking for this age range'
/>

<MultiSliderField
    ref='lookingForRadius'
    min={5}
    max={75}
    dualKnob={false}
    sliderLength={280}
    initialValue={[25]}
    value={[25]}
    unitLabel='miles'
    label='I'm looking in this radius'
/>