Compatible with react-native-router-flux

[radiegtya]

Is this component Compatible with react-native-router-flux?

[FaridSafi]

I didn't try but I guess it should be possible to make it compatible

<GiftedForm
        openModal={(route) => {
           // the trick will be here
        }}
/>

The purpose of openModal prop is to navigate to the modal. The content of the modal is defined by the
route object https://github.com/FaridSafi/react-native-gifted-form/blob/master/widgets/ModalWidget.js#L72 which contains renderScene, getTitle, configureScene, renderLeftButton, renderRightButton functions

Maybe #1 can help you

[radiegtya]

how if I just simply install both router? is it just working out of the box without crashing?

[FaridSafi]

It might work

[radiegtya]

Thanks for the response, I'll try it @FaridSafi .

[minhtc]

@radiegtya Did you make this works with react-native-router-flux?

[deldreth]

I've managed to get it partially working. I struggled for a while attempting to get the renderRight/Left buttons returned from the ModalWidget working properly with router-flux.

My eventual solution did require me to fork and make this small change (I could not get the displayValue to update properly, this is most likely not in line with the authors intent for navigator usage): https://github.com/deldreth/react-native-gifted-form/blob/master/widgets/ModalWidget.js#L143

The project that this is in reference to is still using react-native-router-flux @ 2.x.

Outside of that...

My modal component... I'm going for simplicity here

import React, {
  Component
} from 'react-native';

export default class FormModal extends Component {
  constructor (props) {
    super(props);
  }

  componentWillUnmount () {
    this.props.updateDisplayValue();
  }

  render () {
    return this.props.renderScene();
  }
}

FormModal.propTypes = {
  renderScene: React.PropTypes.func,
  updateDisplayValue: React.PropTypes.func
};

My GiftedForm and openModal prop:
Actions from react-native-router-flux.

<GiftedForm
  openModal={route => {
     Actions.formModal({ ...route, title: route.getTitle() });
  }}>
</GiftedForm>

My Route Configuration:

<Route name='form' title='Installer Signup' component={Form}/>
<Route name='formModal' component={Modal}/>

I could not reliably get right/left navigation bar rendering to work (it may be in relation to the older version of react-native-router-flux this project uses).

[aa900031]

@deldreth thank's to help, and I found navigation right button render on props.renderRightButton() and props.renderLeftButton()
Then we can get inline function onPress()

const btnItem = this.props.renderRightButton()
btnItem.props.onPress()
Actions.pop()

[bsy]

Got this mostly working with react-native-router-flux v3.30, but could use some tips on how to move the confirm button to the right, currently it renders on the left like this:

[bsy]

ended up adding some styling to the TouchableOpacity in the renderRightButton function in ModalWidget.js to address the positioning

[ramneekhanda]

@bsy could you say how you did it with react-native-router-flux 3.30?

[sudugo]

@deldreth @aa900031 @bsy it would be of great help if any one of you can share how you got the left/right button to get working and show up at the navbar.

[henrythach]

@ramneekhanda @sudugo and others...

I know it's been several months, but I was able to get modals working using [email protected] + [email protected] and figured I'd share my solution in case you (and anyone else reading this) are [still] interested...

The React component for the modal (I leave the styling up to you)

import React from 'react'
import { ScrollView  } from 'react-native'

export default class FormModalScreen extends React.Component {
  render () {
    return (
      <ScrollView>
        { this.props.renderScene() }
      </ScrollView>
    )
  }
}

The react-native-router-flux configuration

import FormModal from '...'

<Router>
  ...
  <Scene
    key='formModal'
    component={FormModal}
    direction='vertical'
    rightTitle='Save'
  />
  ...
</Router>

The openModal function

import { Actions } from 'react-native-router-flux'

<GiftedForm
  openModal={(route) => {
    Actions.formModal({
      title: route.getTitle(),
      renderScene: route.renderScene,

      /*
        Option 1: If you like the buttons react-native-gifted-form
        gives you, then use this step:
      */
      renderRightButton: route.renderRightButton.bind(route, Actions),
      
      /*
        Option 2: If you prefer your own right button (or text), then
        use this step:
      */
      // onRight: route.onClose.bind(null, null, Actions)
    })
  }}
/>

The reason why you need to use the .bind function passing in Actions is because those methods eventually use that to call navigator.pop() in an onClose function. Without this, the app will crash complaining about how navigator.pop is not a function.

Anyways, hope this helps.

---

(The screencast animation is a bit strange, but anyways it works)

[ricardokdz]

@henrythach works perfectly!

[dajimene]

Hello, someone help me with the following error I am using the following react-native-gifted-form library, for android.
https://github.com/FaridSafi/react-native-gifted-form
<GiftedForm.ModalWidget
Title = 'Country'
DisplayValue = 'country'
Image = {require ('../../images/passport.png')}
ScrollEnabled = {false}

<GiftedForm.SelectCountryWidget
Code = 'alpha2'
Name = 'country'
Title = 'Country'
AutoFocus = {true}
/>
</GiftedForm.ModalWidget>

[Q8hma]

@ramneekhanda @sudugo and others...

I know it's been several months, but I was able to get modals working using [email protected] + [email protected] and figured I'd share my solution in case you (and anyone else reading this) are [still] interested...

The React component for the modal (I leave the styling up to you)

import React from 'react'
import { ScrollView  } from 'react-native'

export default class FormModalScreen extends React.Component {
  render () {
    return (
      <ScrollView>
        { this.props.renderScene() }
      </ScrollView>
    )
  }
}

The react-native-router-flux configuration

import FormModal from '...'

<Router>
  ...
  <Scene
    key='formModal'
    component={FormModal}
    direction='vertical'
    rightTitle='Save'
  />
  ...
</Router>

The openModal function

import { Actions } from 'react-native-router-flux'

<GiftedForm
  openModal={(route) => {
    Actions.formModal({
      title: route.getTitle(),
      renderScene: route.renderScene,

      /*
        Option 1: If you like the buttons react-native-gifted-form
        gives you, then use this step:
      */
      renderRightButton: route.renderRightButton.bind(route, Actions),
      
      /*
        Option 2: If you prefer your own right button (or text), then
        use this step:
      */
      // onRight: route.onClose.bind(null, null, Actions)
    })
  }}
/>

The reason why you need to use the .bind function passing in Actions is because those methods eventually use that to call navigator.pop() in an onClose function. Without this, the app will crash complaining about how navigator.pop is not a function.

Anyways, hope this helps.

(The screencast animation is a bit strange, but anyways it works)

Hello
it's not work with last version
"react-native": "0.57.7",
"react-native-router-flux": "^4.0.6",

it give me this error when i click the modal

_reactNativeRouterFlux.Actions.Modal is not a function

openModal
    ca37f261-62ec-3543-960e-62950ae397f1:167563:13
onPress
    ca37f261-62ec-3543-960e-62950ae397f1:185354:9
onPress/<
    ca37f261-62ec-3543-960e-62950ae397f1:185460:13
setter/</id<
    ca37f261-62ec-3543-960e-62950ae397f1:56417:9
_callTimer
    ca37f261-62ec-3543-960e-62950ae397f1:24014:9
callTimers
    ca37f261-62ec-3543-960e-62950ae397f1:24219:9
__callFunction
    ca37f261-62ec-3543-960e-62950ae397f1:2470:22
callFunctionReturnFlushedQueue/<
    ca37f261-62ec-3543-960e-62950ae397f1:2243:11
__guard
    ca37f261-62ec-3543-960e-62950ae397f1:2424:13
callFunctionReturnFlushedQueue
    ca37f261-62ec-3543-960e-62950ae397f1:2242:9
onmessage
    debuggerWorker.js:72:25

i hope some one help me