popup.md

Alternative usage: styled popup

Alternatively, it is possible to use a styled popup that displays icons in the app list:

To use the library in that way, you can import the Popup component:

import { Popup } from 'react-native-map-link';

<Popup
    isVisible={this.state.isVisible}
    onCancelPressed={() => this.setState({ isVisible: false })}
    onAppPressed={() => this.setState({ isVisible: false })}
    onBackButtonPressed={() => this.setState({ isVisible: false })}
    modalProps={{ // you can put all react-native-modal props inside.
        animationIn: 'slideInUp'
    }}
    appsWhiteList={[ /* Array of apps (apple-maps, google-maps, etc...) that you want
    to show in the popup, if is undefined or an empty array it will show all supported apps installed on device.*/ ]}
    appTitles: {{ /* Optional: you can override app titles. */ }}
    options={{ /* See `showLocation` method above, this accepts the same options. */ }}
    style={{ /* Optional: you can override default style by passing your values. */ }}
/>

The Popup component uses react-native-modal. So you can pass all react-native-modal properties inside "modalProps" to modify styling and animations.

Also, you can customize the styling of the popup by passing an object like this in the style prop of the Popup component:

{
    container: {},
    itemContainer: {},
    image: {},
    itemText: {},
    headerContainer: {},
    titleText: {},
    subtitleText: {},
    cancelButtonContainer: {},
    cancelButtonText: {},
    separatorStyle: {},
    activityIndicatorContainer: {}
}

Custom Header and Footer Components

You can also make use of your own Header and Footer components by adding the customHeader and/or customFooter Props to the Popup component. See the example below:

renderHeader() {
  return <MyCustomHeaderComponent/>
}

renderFooter() {
  return <MyCustomFooterComponent/>
}

render() {
  return (
    <Popup
      ...
      customHeader={this.renderHeader()}
      customFooter={this.renderFooter()}
    />
  );
}