Can't work with StackNavigator

[Dannnyho]

Anyone know how react-native-gifted-form work with { StackNavigator } from 'react-navigation' ??

I tried the ExNaigator but it return evaluating ( this.props.navigator ) Undefined is not an object

[prithvibhola]

I am having the same issue... Is there anyone who is using the ExNavigator with this lib?

[nqhung139]

// in StackScreen

export const StackScreen = StackNavigator({
Modal: {
    screen: StackNavigator({
      defaultModal: { screen: GiftedFormModal }
    }, {
        navigationOptions: {
          header: null,
          gesturesEnabled: false
        },
        cardStyle: {
          shadowOffset: null,
          shadowOpacity: 0,
          shadowRadius: 10,
          backgroundColor: 'red'
        }
      })
  }, ...

// in Widget

...
openModal={router => {
            this.props.navigation.navigate('Modal', {
              renderContent: router.renderScene
            })
          }}
...

// in GiftedFormModal

...
render() {
    const { renderContent } = this.props.navigation.state.params || {}
    return (
      <View style={{ width: '100%', height: '100%' }}>
        {
          renderContent()
        }
      </View>
    )
  }
...

[eliasturbay]

@nqhung139 can you please post a complete example of your approach? It isn't clear enough for me 😞 First I thought you were suggesting some changes on the lib code base, then I tried to made those changes, but the last part about how to render the content in GiftedFormModal was clear to me. Thanks in advance!

[eliasturbay]

@nqhung139 I found the way to make it work. But... it doesn't have the buttons rendered on the NavBar... do you know how to implement that in this approach? 🤔

[nqhung139]

• In my example router.renderScene use same content of render() scene 'GiftedFormModal'
• 'GiftedFormModal' defined by 'react-navigation' => if have not NavBar . It is config by 'react-navigation' => do you '...navigationOptions: { header: null ...'? Sorry My English is poor :))

[eliasturbay]

Thanks @nqhung139 for your quick response. I understand your point, but I changed that part of the configuration to have the nav bar (the header) visible. Take a look at these screenshots:

What I am trying to figure out is how to place the same checkmark icon that the library originally use in the right of the Navigator to close the modal widget. Or as a workaround it would be nice to replicate the functionality of closing the modal also when the user choose one of the options in the list. But for now, none of these features are working :(

Any word on this @cooperka ?

[cooperka]

@eliasturbay I would also like this feature, but I don't have much spare time right now to work on it. If you happen to figure it out, we would all be grateful for a PR 🥇 otherwise I'll try to get to it eventually (no guarantees). Thanks for looking into this.

[nqhung139]

@eliasturbay you can try goBack() in 'react-navigation' to close modal , 'GiftedFormManager ' to change and update value with any modal without click value to close. ex : 'DatePickerIOSWidget '

[eliasturbay]

Thanks @nqhung139 ! That's exactly what I was trying to do (method 'navigation.goBack()'. If it's useful for someone else I will leave it here...

Implementation for openModal function

      <GiftedForm
        formName={'signupForm'}
        openModal={
          (router) => {
            this.props.navigation.navigate('Modal',
              { renderContent: router.renderScene,
                onClose: router.onClose,
                getTitle: router.getTitle
              });
          }
        }

GiftedFormModal.js (this class will receive the methods renderScene and onClose as params thru the navigation object)

import React from 'react';
import PropTypes from 'prop-types';
import { View } from 'react-native';

import { FontAwesome } from '@expo/vector-icons';

class GiftedFormModal extends React.Component {

  static navigationOptions({ navigation }) {
    const { getTitle, onClose } = navigation.state.params || {};

    return {
      headerTitle: getTitle(),
      headerStyle: { backgroundColor: '#F37600' },
      headerTitleStyle: { color: 'white' },
      headerLeft: <FontAwesome
        name="chevron-left"
        color="white"
        size={25}
        style={{ paddingLeft: 10 }}
        onPress={() => {
          navigation.goBack();
        }}
      />,
      headerRight: <FontAwesome
        name="check"
        color="white"
        size={25}
        style={{ paddingRight: 10 }}
        onPress={() => {
          onClose(null, null);
          navigation.goBack();
        }}
      />
    };
  }

  render() {
    const { renderContent } = this.props.navigation.state.params || {};
    return (
      <View style={{ width: '100%', height: '100%' }}>
        {renderContent()}
      </View>
    );
  }
}

GiftedFormModal.propTypes = {
  navigation: PropTypes.shape({
    navigate: PropTypes.func,
    goBack: PropTypes.func,
    state: PropTypes.shape({
      params: PropTypes.object
    })
  })
};

GiftedFormModal.defaultProps = {
  navigation: null
};

export default GiftedFormModal;

Implementation on your React Navigation router (remove node: 'modal' if you don't like it)

const AppNavigator = StackNavigator({
  Main: { screen: MainScreenNavigator },
  Modal: { screen: GiftedFormModal }
}, {
  mode: 'modal',
  headerMode: 'screen'
});

@nqhung139 I still need to figure out the other part to close the modal if you tap on some of the options. I din't fully understand your suggestion about using GiftedFormManager. I'll take a look and give it a try. But if you already know how to do it I will highly appreciate it :)

[Dannnyho]

Do you mean create a GiftedFormModal.js for GiftedForm to push the route? i tried to do that but no response when click the ModalWidget? Anyone have a full example of it?

[tutak]

@eliasturbay Did u manage to find a solution for "Tap and select option" issue you mentioned above? An example of using the library with React Navigation would be very helpful as Ex-Navigator seems to have been deprecated.

[eliasturbay]

Hey @tutak I wasn't able to solve that yet. I would say that it's the only thing I didn't figured out so I'm just using it as it is, it isn't that bad, just one extra step. The code I shared before should be enough for you to use this library with React Navigation

[uditchandhoke1912]

Hey @eliasturbay , did you able to implement this tap and select feature on the above modal widgets?