The following code works but wondering if this is really the best way to acplish the task at hand. Two TextInput fields, when show = true display both of them. When show = false display the first one in the same position on the screen and not display the second one. We've substituted a blank Text element to take up the space of the second TextInput element. Is that the right way to do this? It seems a little hokey.

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

export default class App extends React.Component {

  state={show: true,}

  handleElement(){}
  handleKey(){}
  onSubmit=()=>{

    this.setState({show:!this.state.show})
    //  this.setState(prevState =>({show:!prevState.show}))
  }
  render() {
    return (
      <View style={styles.container}>
        { this.state.show &&
          <View>
            <TextInput style={styles.input}
              placeholder='Element'
              onChangeText={this.handleElement} />
            <TextInput style={styles.input}
              placeholder='Key'
              onChangeText={this.handleKey}/>
            <Button title='Add' onPress={this.onSubmit} />
          </View>
        }
        { !this.state.show &&
          <View>
            <TextInput style={styles.input}
              placeholder='Element'
              onChangeText={this.handleElement} />
            <Text style={styles.blank}>&nbsp;</Text>
            <Button title='Add' onPress={this.onSubmit} />
          </View>
        }
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
    padding:5,
    borderColor:'black',
    borderWidth:1,
    width:100,
    marginTop:5,
  },
  blank: {
    borderColor:'white',
    borderWidth:1,
    padding:5,
    width:100,
    marginTop:5,
  },
});

The following code works but wondering if this is really the best way to acplish the task at hand. Two TextInput fields, when show = true display both of them. When show = false display the first one in the same position on the screen and not display the second one. We've substituted a blank Text element to take up the space of the second TextInput element. Is that the right way to do this? It seems a little hokey.

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

export default class App extends React.Component {

  state={show: true,}

  handleElement(){}
  handleKey(){}
  onSubmit=()=>{

    this.setState({show:!this.state.show})
    //  this.setState(prevState =>({show:!prevState.show}))
  }
  render() {
    return (
      <View style={styles.container}>
        { this.state.show &&
          <View>
            <TextInput style={styles.input}
              placeholder='Element'
              onChangeText={this.handleElement} />
            <TextInput style={styles.input}
              placeholder='Key'
              onChangeText={this.handleKey}/>
            <Button title='Add' onPress={this.onSubmit} />
          </View>
        }
        { !this.state.show &&
          <View>
            <TextInput style={styles.input}
              placeholder='Element'
              onChangeText={this.handleElement} />
            <Text style={styles.blank}>&nbsp;</Text>
            <Button title='Add' onPress={this.onSubmit} />
          </View>
        }
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
    padding:5,
    borderColor:'black',
    borderWidth:1,
    width:100,
    marginTop:5,
  },
  blank: {
    borderColor:'white',
    borderWidth:1,
    padding:5,
    width:100,
    marginTop:5,
  },
});

• javascript
• reactjs
• react-native
• position

• There is perhaps no other way. But for better design, the React way per se, you should separate each TextInput as a ponent then use App for rendering them. – Anh Pham Commented May 29, 2018 at 22:34
• 1 that really wasn't the point of the question but thanks – DCR Commented May 30, 2018 at 1:38

2 Answers 2

You can take advantage of Flex positioning to achieve this. Also the layout can be simplified to something like:

render() {
  return (
    <View style={styles.container}>
      <View style={styles.wrapper}>
        <TextInput 
          style={styles.input}
          placeholder='Element'
          onChangeText={this.handleElement}
        />
        {
          this.state.show && 
          <TextInput
            style={styles.input}
            placeholder='Key'
            onChangeText={this.handleKey}
          />
        }
        <Button title='Add' onPress={this.onSubmit} />
      </View>
    </View>
  )
}

The styles for the wrapper and the container elements using flex are:

wrapper: {
    flex: 1,
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'column'
},
container: {
    flex: 0.5
}

The flex value of the container depends on your layout and how much space you want that element to take the screen.

I would remend using visibility:hidden on the second TextInput. It will retain the spacing, just hide the element.