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.

Sign up for GitHub

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

Jump to bottom

Demo: Custom back handler for android hardware back button #272

Merged
merged 4 commits into from
May 17, 2021
Merged

Demo: Custom back handler for android hardware back button #272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6d2c993
Custom back handler for android hardware back button
May 12, 2021
a03ae8b
Added example screen for android back button
May 14, 2021
5fca149
Only go home for the custom back handle example screen
May 14, 2021
df47376
minor fix
May 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions demo/components/HandleBack.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React, { Component } from "react";
import { withNavigation } from "react-navigation";
import { BackHandler } from "react-native";

class HandleBack extends Component {
constructor(props) {
super(props);
this.didFocus = props.navigation.addListener("didFocus", (payload) =>
BackHandler.addEventListener("hardwareBackPress", this.onBack)
);
}

componentDidMount() {
this.willBlur = this.props.navigation.addListener("willBlur", (payload) =>
BackHandler.removeEventListener("hardwareBackPress", this.onBack)
);
}

onBack = () => {
if(this.props.navigation && this.props.navigation.goBack && !this.props.navigation.isFirstRouteInParent()){
const { url } = this.props.navigation.state.params;
if (url.includes("custom_android_back")) {
this.props.navigation.popToTop(null);
return true;
}
}
return false;
};

componentWillUnmount() {
this.didFocus.remove();
this.willBlur.remove();
BackHandler.removeEventListener("hardwareBackPress", this.onBack);
}

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

export default withNavigation(HandleBack);
25 changes: 14 additions & 11 deletions demo/screens/HyperviewScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
import React, { PureComponent } from 'react';
import Hyperview from 'hyperview';
import moment from 'moment';
import HandleBack from '../components/HandleBack';

export default class HyperviewScreen extends React.PureComponent {
goBack = (params, key) => {
Expand Down Expand Up @@ -70,17 +71,19 @@ export default class HyperviewScreen extends React.PureComponent {
const entrypointUrl = navigation.state.params.url;

return (
<Hyperview
back={this.goBack}
closeModal={this.closeModal}
entrypointUrl={entrypointUrl}
fetch={this.fetchWrapper}
navigate={this.navigate}
navigation={navigation}
openModal={this.openModal}
push={this.push}
formatDate={this.formatDate}
/>
<HandleBack>
<Hyperview
back={this.goBack}
closeModal={this.closeModal}
entrypointUrl={entrypointUrl}
fetch={this.fetchWrapper}
navigate={this.navigate}
navigation={navigation}
openModal={this.openModal}
push={this.push}
formatDate={this.formatDate}
/>
</HandleBack>
);
}
}
78 changes: 78 additions & 0 deletions examples/case_studies/custom_android_back.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<doc xmlns="https://hyperview.org/hyperview">
<screen>
<styles>
<style
id="Header"
alignItems="center"
backgroundColor="white"
borderBottomColor="#eee"
borderBottomWidth="1"
flexDirection="row"
paddingLeft="24"
paddingRight="24"
paddingBottom="16"
/>
<style
id="Header__Back"
color="blue"
fontSize="16"
fontWeight="600"
paddingRight="16"
/>
<style id="Header__Title" color="black" fontSize="24" fontWeight="600" />
<style id="Body" backgroundColor="white" flex="1" />
<style id="Basic" fontSize="16" fontWeight="700" marginVertical="8" />
<style id="Container" backgroundColor="white" flex="1" margin="24" />
<style
id="Description"
fontSize="16"
fontWeight="normal"
marginBottom="16"
/>
<style
id="Header"
alignItems="center"
flexDirection="row"
borderBottomColor="#E1E1E1"
borderBottomWidth="1"
borderColor="#4E4D4D"
fontSize="16"
fontWeight="normal"
padding="24"
paddingBottom="8"
/>
<style id="Link" color="blue" fontSize="16" fontWeight="normal" />
</styles>
<body style="Body" safe-area="true">
<header style="Header">
<text action="back" href="#" style="Header__Back">Back</text>
<text style="Header__Title">Custom Android Back</text>
</header>

<view style="Container">
<text style="Basic">
Custom handling for Android back button press.
</text>
<text style="Description">
Goes back to the home page when the hardware back button is pressed on this page on Android.
</text>
<text style="Description">
This can be achieved by using the BackHandler provided by react-native at the App level.
</text>

<view>
<text style="Basic">References:</text>
<text style="Link" href="https://reactnative.dev/docs/backhandler">
BackHandler
</text>
<text
style="Link"
href="https://github.com/Instawork/hyperview/pull/272"
>
Demo implementation PR
</text>
</view>
</view>
</body>
</screen>
</doc>
9 changes: 9 additions & 0 deletions examples/case_studies/index.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,15 @@
<text style="Item__Label">Photo sharing app</text>
<text style="Item__Chevron">&gt;</text>
</item>
<item
href="/case_studies/custom_android_back.xml"
key="custom-android-back"
show-during-load="loadingScreen"
style="Item"
>
<text style="Item__Label">Custom Android Back</text>
<text style="Item__Chevron">&gt;</text>
</item>
</list>
</body>
</screen>
Expand Down