66 * @flow strict-local
77 */
88
9- import React , { Component } from 'react' ;
9+ import React , { useCallback , useState } from 'react' ;
1010import {
1111 Platform ,
12+ StatusBar ,
1213 StyleSheet ,
1314 Text ,
15+ TextInput ,
1416 View ,
1517 Button ,
16- Alert ,
17- TextInput ,
18- StatusBar ,
19- Linking ,
2018} from 'react-native' ;
21- import { InAppBrowser } from 'react-native-inappbrowser-reborn ' ;
19+ import { openLink , tryDeepLinking } from './utils ' ;
2220
2321const instructions = Platform . select ( {
2422 ios : 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu' ,
@@ -27,142 +25,36 @@ const instructions = Platform.select({
2725 'Shake or press menu button for dev menu' ,
2826} ) ;
2927
30- type ComponentState = {
31- url : string ,
32- statusBarStyle : string ,
33- } ;
34-
35- export default class App extends Component < ComponentState > {
36- constructor ( props ) {
37- super ( props ) ;
38-
39- this . state = {
40- url : 'https://reactnative.dev' ,
41- statusBarStyle : 'dark-content' ,
42- } ;
43- }
28+ const App = ( ) => {
29+ const [ url , setUrl ] = useState ( 'https://reactnative.dev' ) ;
30+ const [ statusBarStyle ] = useState ( 'dark-content' ) ;
4431
45- sleep ( timeout : number ) {
46- return new Promise ( ( resolve ) => setTimeout ( resolve , timeout ) ) ;
47- }
32+ const onOpenLink = useCallback ( async ( ) => {
33+ await openLink ( url , statusBarStyle ) ;
34+ } , [ url , statusBarStyle ] ) ;
4835
49- async openLink ( ) {
50- const { url , statusBarStyle } = this . state ;
51- try {
52- if ( await InAppBrowser . isAvailable ( ) ) {
53- // A delay to change the StatusBar when the browser is opened
54- const animated = true ;
55- const delay = animated && Platform . OS === 'ios' ? 400 : 0 ;
56- setTimeout ( ( ) => StatusBar . setBarStyle ( 'light-content' ) , delay ) ;
57- const result = await InAppBrowser . open ( url , {
58- // iOS Properties
59- dismissButtonStyle : 'cancel' ,
60- preferredBarTintColor : '#453AA4' ,
61- preferredControlTintColor : 'white' ,
62- readerMode : true ,
63- animated,
64- modalPresentationStyle : 'fullScreen' ,
65- modalTransitionStyle : 'flipHorizontal' ,
66- modalEnabled : true ,
67- enableBarCollapsing : true ,
68- // Android Properties
69- showTitle : true ,
70- toolbarColor : '#6200EE' ,
71- secondaryToolbarColor : 'black' ,
72- navigationBarColor : 'black' ,
73- navigationBarDividerColor : 'white' ,
74- enableUrlBarHiding : true ,
75- enableDefaultShare : true ,
76- forceCloseOnRedirection : false ,
77- // Specify full animation resource identifier(package:anim/name)
78- // or only resource name(in case of animation bundled with app).
79- animations : {
80- startEnter : 'slide_in_right' ,
81- startExit : 'slide_out_left' ,
82- endEnter : 'slide_in_left' ,
83- endExit : 'slide_out_right' ,
84- } ,
85- headers : {
86- 'my-custom-header' : 'my custom header value' ,
87- } ,
88- hasBackButton : true ,
89- browserPackage : null ,
90- showInRecents : false ,
91- } ) ;
92- // A delay to show an alert when the browser is closed
93- await this . sleep ( 800 ) ;
94- Alert . alert ( 'Response' , JSON . stringify ( result ) ) ;
95- } else {
96- Linking . openURL ( url ) ;
97- }
98- } catch ( error ) {
99- console . error ( error ) ;
100- Alert . alert ( error . message || error ) ;
101- } finally {
102- // Restore the previous StatusBar of the App
103- StatusBar . setBarStyle ( statusBarStyle ) ;
104- }
105- }
106-
107- getDeepLink ( path = '' ) {
108- const scheme = 'my-demo' ;
109- const prefix =
110- Platform . OS === 'android' ? `${ scheme } : `${ scheme } ;
111- return prefix + path ;
112- }
113-
114- async tryDeepLinking ( ) {
115- const loginUrl = 'https://proyecto26.github.io/react-native-inappbrowser/' ;
116- const redirectUrl = this . getDeepLink ( ) ;
117- const url = `${ loginUrl } ${ encodeURIComponent ( redirectUrl ) } ;
118- try {
119- if ( await InAppBrowser . isAvailable ( ) ) {
120- const result = await InAppBrowser . openAuth ( url , redirectUrl , {
121- // iOS Properties
122- ephemeralWebSession : false ,
123- // Android Properties
124- showTitle : false ,
125- enableUrlBarHiding : true ,
126- enableDefaultShare : false ,
127- } ) ;
128- Alert . alert ( 'Response' , JSON . stringify ( result ) ) ;
129- } else {
130- Alert . alert ( 'InAppBrowser is not supported :/' ) ;
131- }
132- } catch ( error ) {
133- console . error ( error ) ;
134- Alert . alert ( 'Something’s wrong with the app :(' ) ;
135- }
136- }
137-
138- render ( ) {
139- const { statusBarStyle} = this . state ;
140- return (
141- < View style = { styles . container } >
142- < StatusBar barStyle = { statusBarStyle } />
143- < Text style = { styles . welcome } >
144- { 'Welcome InAppBrowser\nfor React Native!' }
145- </ Text >
146- < Text style = { styles . instructions } > Type the url</ Text >
147- < TextInput
148- style = { styles . urlInput }
149- onChangeText = { ( text ) => this . setState ( { url : text } ) }
150- value = { this . state . url }
151- />
152- < View style = { styles . openButton } >
153- < Button title = "Open link" onPress = { ( ) => this . openLink ( ) } />
154- </ View >
155- < View style = { styles . openButton } >
156- < Button
157- title = "Try deep linking"
158- onPress = { ( ) => this . tryDeepLinking ( ) }
159- />
160- </ View >
161- < Text style = { styles . instructions } > { instructions } </ Text >
36+ return (
37+ < View style = { styles . container } >
38+ < StatusBar barStyle = { statusBarStyle } />
39+ < Text style = { styles . welcome } >
40+ { 'Welcome InAppBrowser\nfor React Native!' }
41+ </ Text >
42+ < Text style = { styles . instructions } > Type the url</ Text >
43+ < TextInput
44+ style = { styles . urlInput }
45+ onChangeText = { text => setUrl ( text ) }
46+ value = { url }
47+ />
48+ < View style = { styles . openButton } >
49+ < Button title = "Open link" onPress = { onOpenLink } />
16250 </ View >
163- ) ;
164- }
165- }
51+ < View style = { styles . openButton } >
52+ < Button title = "Try deep linking" onPress = { tryDeepLinking } />
53+ </ View >
54+ < Text style = { styles . instructions } > { instructions } </ Text >
55+ </ View >
56+ ) ;
57+ } ;
16658
16759const styles = StyleSheet . create ( {
16860 container : {
@@ -193,3 +85,5 @@ const styles = StyleSheet.create({
19385 paddingBottom : Platform . OS === 'ios' ? 0 : 20 ,
19486 } ,
19587} ) ;
88+
89+ export default App ;
0 commit comments