Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Full-screen webview modal #33

Open
kylebarron opened this issue Dec 10, 2019 · 3 comments
Open

Full-screen webview modal #33

kylebarron opened this issue Dec 10, 2019 · 3 comments

Comments

@kylebarron
Copy link
Member

also see #23

Create a reusable component for a full-screen webview.

You know, instead of layering this over the map, it would probably be best to have it be a different navigation screen. A separate stack navigator? Essentially you want to be able to press an x at the top left of the screen to go back to the previous screen.

This should be a purely (pure?) presentational component. I.e. just take as props:

  • HTML source or URL
  • path to local css
  • inline boolean?

Check out a library like juice for inlining css. That way you can store e.g. wikipedia's css once, and then display the formatted css offline. Not sure what to do with links though, in order to try and get local links working offline, but that's low-priority.

react-native-webview looks easy.

@kylebarron
Copy link
Member Author

Check out using params to pass to the navigator page: e.g.

const MyStack  = createStackNavigator({
  Landing: {
    screen: WebViewScreen,
    params: { url: 'http://www.damienmason.com/medium/react-navigation-webview.html' },
  }
});

@kylebarron
Copy link
Member Author

Offline webview example: https://github.com/caphun/react-native-webview-example

@kylebarron
Copy link
Member Author

Simple webview: d9a8c5d

Looks nice

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant