title: How to avoid duplication of components using React-Navigation?
body: <p>I had <strong>5 screens</strong> with the same styles and layout, but some text and button logic difference. <br /><br /> I tried to keep everything in <strong>one component</strong>, passing there the name of the component I need to mimic, but it grew up in <strong>nested if/else</strong> all around, what made the code very intricate. <br /><br /> What is lesser of these two evils and what should I do: <strong>duplicate</strong> the components in favor of simplicity or keep them in <strong>one place</strong> and lose the readability?</p>
  
  <p>Here's the "all in one" component</p>
  
  <pre><code>const Pin = props =&gt; {
    const {
      navigation: { navigate, getParam },
      loading,
      savePin,
      signIn,
      toggleModal,
    } = props
  
    const [pin, setPin] = useState('')
    const isInSignInStack = getParam('isInSignInStack') ? 'isInSignInStack' : false
    const isConfirmPinSignUp = getParam('isConfirmPinSignUp') ? 'isConfirmPinSignUp' : false
    const isChangePin = getParam('isChangePin') ? 'isChangePin' : false
    const isEnterNewPin = getParam('isEnterNewPin') ? 'isEnterNewPin' : false
    const isConfirmNewPin = getParam('isConfirmNewPin') ? 'isConfirmNewPin' : false
    const newPin = getParam('newPin')
  
    const handleSavePin = () =&gt; savePin(pin).then(() =&gt; navigate('ConfirmPinSignUp'))
  
    const navigateHome = () =&gt; navigate('Home')
  
    const handleAuthenticate = () =&gt;
      compose(
        then(navigateHome),
        then(signIn),
        savePin
      )(pin)
  
    const validatePin = () =&gt;
        isConfirmNewPin
          ? equals(newPin, pin)
            ? savePin(pin).then(() =&gt; navigate('SuccessPinChange'))
            : toggleModal('pin isn't match')
          : getPin().then(({ password }) =&gt;
              equals(password, pin)
                ? navigate(isChangePin ? 'ConfirmNewPin' : 'Success', { ...(isChangePin ? { newPin: pin } : {}) })
                : toggleModal('pin isn't match')
        )
  
    const textObj = {
      isInSignInStack: 'Enter your pin',
      isConfirmPinSignUp: 'Enter your pin once again',
      isChangePin: 'Enter your old pin',
      isEnterNewPin: 'Enter the new pin',
      isConfirmNewPin: 'Enter the new pin once again',
    }
  
    return (
      &lt;Container style={styles.container}&gt;
        &lt;Content scrollEnabled={false} contentContainerStyle={styles.content}&gt;
          &lt;Text style={styles.headerText}&gt;
            {pathOr(
              'Come up with the new pin',
              isInSignInStack || isConfirmPinSignUp || isChangePin || isEnterNewPin || isConfirmNewPin,
              textObj
            )}
          &lt;/Text&gt;
          &lt;View style={styles.inputView}&gt;
            &lt;CodeInput /&gt;
          &lt;/View&gt;
          {isConfirmPinSignUp || (
            &lt;View style={styles.aknowledgementView}&gt;
              {isInSignInStack
                 ? &lt;Text style={styles.text} onPress={handleForgotPassword}&gt;
                     FORGOT PIN
                   &lt;/Text&gt;
                 : isEnterNewPin &amp;&amp; (
                  &lt;&gt;
                    &lt;Text style={styles.greenText}&gt;Attention! Don't use your old pin&lt;/Text&gt;
                    &lt;Text style={styles.greenText}&gt;codes or passwords, come up with the new one&lt;/Text&gt;
                  &lt;/&gt;
                )}
            &lt;/View&gt;
          )}
          &lt;Button
            style={isEmpty(pin) ? styles.btnDisabled : styles.btn}
            onPress={() =&gt;
                isInSignInStack
                  ? handleAuthenticate
                  : anyTrue(isConfirmPinSignUp, isChangePin) ? validatePin : handleSavePin
            }
            disabled={anyTrue(isEmpty(pin), loading)}
          &gt;
            {loading ? &lt;Spinner color="black" /&gt; : &lt;Text style={styles.btnText}&gt;Next&lt;/Text&gt;}
          &lt;/Button&gt;
        &lt;/Content&gt;
      &lt;/Container&gt;
    )
  }
  
  Pin.navigationOptions = ({ navigation: { getParam } }) =&gt; {
    const isInSignInStack = getParam('isInSignInStack')
    const isChangePin = getParam('isChangePin')
    const isEnterNewPin = getParam('isEnterNewPin')
  
    return {
      title: isInSignInStack ? 'SignIn' : anyTrue(isChangePin, isEnterNewPin) ? 'Change PIN' : 'Register'
    }
  }
  
  const styles = StyleSheet.create({
    //
  })
  
  Pin.propTypes = {
    navigation: PropTypes.shape({
      navigate: PropTypes.func,
      getParam: PropTypes.func,
    }).isRequired,
    loading: PropTypes.bool.isRequired,
    savePin: PropTypes.func.isRequired,
    toggleModal: PropTypes.func.isRequired,
    signIn: PropTypes.func.isRequired,
  }
  
  const mapStateToProps = compose(
    pick(['loading']),
    path(['user'])
  )
  
  const mapDispatchToProps = {
    savePin,
    signIn,
    toggleModal,
  }
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(Pin)
  </code></pre>