Opening a Modal from right icon in header -React Navigation

Question

I need to open a modal through the right button in the header and I am able to do it.The problem is The modal should be 3/4 of the page's width and the rest 1/4 of the previous page should be visible.

StackNavigator code is below

FilterOptions: {
  screen: FilterOptions,
  transparentCard: true,
  navigationOptions: {
    headerMode: "none",
    header: null,
    modal: "modal",
    transparentCard: true,
  }, cardStyle: {
    backgroundColor: "transparent",
    opacity: 1
  }
}

FilterOptions Page code is

import React, { Component } from 'react';
import { Modal, Text, TouchableHighlight, View } from 'react-native';

class ModalExample extends Component {

render() {
    return (

        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end', backgroundColor: "transparent" }}>

            <View style={{ height: "100%", width: '70%', backgroundColor: "#fff", justifyContent: "center" }}>
                <Text>Testing a modal with transparent background</Text>
            </View>
        </View>

    );
}
}
export default ModalExample

Can anyone help to do this.

is this what you're trying to do ? [link](https://snack.expo.io/Hk4epzQZr) — displayname, Jul 10 '19 at 08:09
yes..Same,but I need the modal to open through button in header.Thank you :-) — Janaki Narayanan, Jul 10 '19 at 09:07

score 0 · Answer 1 · answered Jul 09 '19 at 13:57

0

you use react-navigation or react-native navigation ?

you do not have to use a StackNavigator

you can use react-native {Animated}

answered Jul 09 '19 at 13:57

Jonathan Meslien

66
4

Iam using react navigation – Janaki Narayanan Jul 09 '19 at 21:19

score 0 · Answer 2 · answered Jul 09 '19 at 14:40

0

Have you followed the docs for this? If yes, you can change your modal size by setting it's container size directly.

If you have some trouble with React Navigation's Modal, i suggest you use React-Native's one, as it is best used when not in full span.

answered Jul 09 '19 at 14:40

Romain Lavalle

129
1
7

This is for opening modal through a button click ,but I need a page to open as modal – Janaki Narayanan Jul 09 '19 at 21:20
Can't you change your modal view container size ? – Romain Lavalle Jul 10 '19 at 07:43

Opening a Modal from right icon in header -React Navigation

2 Answers2