2

I'm trying to basically create a search input field with a cancel button next to it but the TextInput doesn't show and the formatting is broken.

I'm using the shoutem ui toolkit https://shoutem.github.io/docs/ui-toolkit/components/text-input

How do I set the styles so that the input box to shows up correctly? I can't see the input box and the button margins seem off.

screen shot 2017-01-25 at 8 50 26 am

Should I use a Row instead of a View? However using a row doesn't seem to work well either.

Does anyone have an example of a form with buttons next to inputs using shoutem UI?

<View styleName="horizontal space-between wrap">
    <TextInput
      placeholder="Search"
      autoFocus={ true }
      returnKeyType="search"
      clearButtonMode="while-editing"
    />
    <Button styleName="right-icon" onPress={() => {
        this.setModalVisible(!this.state.modalVisible)
      }}>
      <Text>Cancel</Text>
    </Button>
  </View>

I tried switching to a plain TextInput rather than a shoutemUI text input and I added this style, but how do I get the width to automatically stretch? How do I fix the padding on the button?

enter image description here

The code

 <View styleName="horizontal"  style={ StyleSheet.flatten(styles.searchRow)}>
        <TextInput
          placeholder="Search"
          autoFocus={ true }
          returnKeyType="search"
          clearButtonMode="while-editing"
          style={ StyleSheet.flatten(styles.searchBox) }
        />
        <Button styleName="right-icon" style={{padding: 5, margin:5}} onPress={() => {
            this.setModalVisible(!this.state.modalVisible)
          }}>
          <Text>Cancel</Text>
        </Button>
      </View>

And The Style

  searchBox: {
    borderWidth: 0.5,
    padding: 5,
    margin: 5,
    paddingLeft:10,
    width: 200,
    alignSelf: 'stretch',
    height:40,
    backgroundColor: 'white',
    borderColor: '#d3d3d3',
  },
MonkeyBonkey
  • 46,433
  • 78
  • 254
  • 460

1 Answers1

1

This is how you can implement a search field with a search icon and a clear icon:

<View styleName="container full-width md-gutter-left sm-gutter-right">
    <View style={style.container} styleName="horizontal sm-gutter-horizontal v-center">
        <Icon name="search" style={style.searchIcon} />
        <TextInput style={style.input} value={value} /> 
        {
          value ?
            <Button styleName="clear tight">
              <Icon
                name="clear-text"
                style={style.clearIcon}
              />
            </Button> 
        }
    </View>
    <Button styleName="clear">
        <Subtitle>Cancel</Subtitle>
    </Button>
</View>

The style names come from the UI toolkit's theme. Here are the relevant styles for the component:

  {
        clearIcon: {
          color: '#2c2c2c',
          opacity: 0.5,
        },

        container: {
          backgroundColor: '#f0f0f0',
          borderRadius: 5,
          flex: 1,
          height: 30,
        },

        searchIcon: {
          color: '#888888',
          fontSize: 16,
        },

        input: {
          backgroundColor: '#f0f0f0',
          color: '#888888',
          flex: 1,
          fontSize: 15,
          height: 30,
          paddingVertical: 6,
          placeholderTextColor: '#888888',
          selectionColor: '#888888',
        },
   },

You'll probably need to make a few modifications, but this should help you implement the search field you need. If you don't want to or can't use styleNames, just look up what styles they define.

airmiha
  • 161
  • 1
  • 2