Add support for modals in android

[SandroMachado]

Closes #16.

[cooperka]

This check should be moved up before view.hasWindowFocus

[cooperka]

Why does this need to be recursive, in case modals call other modals?

[SandroMachado]

Yup, and we can have more than one modal. :(

[cooperka]

Interesting, seems like it should work. I'm also curious why the snackbar doesn't appear on top of the modal by default, does React Native do something sneaky to make modals appear? A link or something would be nice if you happen to know. I'm just curious.

[SandroMachado]

Yup, the modals in RN for Android are dialogs that are always displayed above the activities. It does not work for that reason.

[cooperka]

Hi @SandroMachado, thanks for this! Could you please post some example JS code so I can test this out myself? I'll try to get to it later this week.

[SandroMachado]

Sure, for instance this code in Android:

render() {
    return (
      <View style={{marginTop: 22}}>
        <Modal
          animationType={"slide"}
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {alert("Modal has been closed.")}}
          >
         <View style={{marginTop: 22}}>
          <View>
            <Text>Hello World!</Text>

            <TouchableHighlight onPress={() => {
              Snackbar.show({
                title: 'Hello world',
                duration: Snackbar.LENGTH_SHORT,
              });
            }}>
              <Text>Hide Modal</Text>
            </TouchableHighlight>

          </View>
         </View>
        </Modal>

        <TouchableHighlight onPress={() => {
          this.setModalVisible(true)
        }}>
          <Text>Show Modal</Text>
        </TouchableHighlight>

      </View>
    );
  }

[cooperka]

@SandroMachado have a look at 3168d8d -- I implemented a translucent modal, and the snackbar still shows up underneath it (only on Android) even with this PR.

It looks like this is actually creating multiple snackbars, one on top of each modal, is that correct? I wonder if there's a better way to just get the root view of the whole activity and put the snackbar there.

I'll debug further later this week, until then please let me know if you have any ideas!

[SandroMachado]

@cooperka I have decided to add to all the modals, because we can have more than one modal. I didn't find a way to discover which one is visible.

Unfortunately, this is not the perfect solution, but, since all the snackbars are shown in the same position in the view, it will work and fix the issue for now. I think...

Probably, we can open a new issue and try to fix it in the future.

[cooperka]

I'm definitely okay with this solution for now at least, since it's an uncommon scenario anyway.

Could you please have a look at the example I linked to and see if it's also broken for you?

[SandroMachado]

@cooperka I tested on my device, and I think it is working as expected. Or I am missing something?

[SandroMachado]

@cooperka sorry to bother you again. Do you have an ETA to merge this PR and make a release?

[cooperka]

@SandroMachado sorry for the delay, unfortunately I can't give much of an ETA but I will try to get to it as soon as I can. I was hoping to merge this weekend but a few other things came up. For now I hope you can use your fork until I can test again and merge.

On my machine the snackbar was appearing underneath the red modal; I'm not sure if it's related to Android version or maybe I just installed incorrectly... I did run npm install ..; npm start -- --reset-cache; react-native run-android from the example app of course, but I'll try again soon.

[cooperka]

Thanks again for your patience. I spun up my machine again and cleared caches, this time it worked. I appreciate the PRs, I'll publish a new version momentarily :)

[SandroMachado]

@cooperka thanks for the release 👍, back to upstream :)