react-native-inappbrowser/example/src/App.tsx at 90a40a3ddabe8da4aac4c3e5976d93fa6e152c6a · proyecto26/react-native-inappbrowser · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
/**
 * @format
 */

import React, {useEffect, useCallback, useState} from 'react';
import {
  Platform,
  StatusBar,
  StyleSheet,
  Text,
  TextInput,
  View,
  Button,
  SafeAreaView,
  StatusBarStyle,
  useColorScheme,
  ScrollView,
} from 'react-native';
import {openLink, tryDeepLinking} from './utils';
import {InAppBrowser} from 'react-native-inappbrowser-reborn';
import {Colors} from 'react-native/Libraries/NewAppScreen';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

const App = () => {
  const [url, setUrl] = useState('https://login.coinbase.com');
  const [statusBarStyle] = useState<StatusBarStyle>('dark-content');

  useEffect(() => {
    InAppBrowser.mayLaunchUrl('https://login.coinbase.com', []);
  }, []);

  const onOpenLink = useCallback(async () => {
    await openLink(url, statusBarStyle);
  }, [url, statusBarStyle]);

  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
    flex: 1,
    height: '100%',
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar barStyle={statusBarStyle} />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        contentContainerStyle={backgroundStyle}>
        <View style={styles.container}>
          <Text style={styles.welcome}>
            {'Welcome InAppBrowser\nfor React Native!'}
          </Text>
          <Text style={styles.instructions}>Type the url</Text>
          <TextInput
            style={styles.urlInput}
            onChangeText={text => setUrl(text)}
            value={url}
          />
          <View style={styles.openButton}>
            <Button title="Open link" onPress={onOpenLink} />
          </View>
          <View style={styles.openButton}>
            <Button title="Try deep linking" onPress={tryDeepLinking} />
          </View>
          <Text style={styles.instructions}>{instructions}</Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    padding: 30,
    height: '100%',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  urlInput: {
    height: 40,
    width: '100%',
    borderColor: 'gray',
    borderWidth: 1,
  },
  openButton: {
    paddingTop: Platform.OS === 'ios' ? 0 : 20,
    paddingBottom: Platform.OS === 'ios' ? 0 : 20,
  },
});

export default App;