@rownd/react-native 0.1.11 → 0.2.2

package/src/components/SignIn.tsx

@@ -10,7 +10,7 @@ import { differenceInMinutes } from 'date-fns';
 import {
   View,
   StyleSheet,
-  Pressable,
+  TouchableOpacity,
   Image,
   ActivityIndicator,
   Linking,
@@ -18,15 +18,15 @@ import {
 } from 'react-native';
 // import Text from './DarkText';
 import { SvgCssUri } from 'react-native-svg';
-import tw from '../utils/tailwind';
-import phone, { type PhoneResult } from 'phone';
+import phone, { PhoneResult } from 'phone';
 import jwt_decode from 'jwt-decode';
 import {
   BottomSheetBackdrop,
   BottomSheetBackdropProps,
   BottomSheetModal,
-  BottomSheetTextInput,
 } from '@gorhom/bottom-sheet';
+import BottomSheetTextInput from './BottomSheetTextInput';
+import bottomSheetMeta from '@gorhom/bottom-sheet/package.json';
 
 import { useApi, useInterval, useNav, useDeviceFingerprint } from '../hooks';
 import { useGlobalContext } from './GlobalContext';
@@ -483,17 +483,23 @@ export function SignIn() {
     []
   );
 
+  let extraBottomSheetProps: any = {};
+  if (bottomSheetMeta.version.startsWith('4')) {
+    extraBottomSheetProps.keyboardBehavior = 'fillParent';
+    extraBottomSheetProps.android_keyboardInputMode = 'adjustResize';
+    extraBottomSheetProps.enablePanDownToClose =
+      state?.nav?.options?.type === 'error';
+  }
+
   return (
     <BottomSheetModal
       snapPoints={snapPoints}
       index={1}
       backdropComponent={renderBackdrop}
-      keyboardBehavior="fillParent"
-      android_keyboardInputMode="adjustResize"
-      enablePanDownToClose={true}
       onDismiss={handleClose}
       style={styles.bottomSheet}
       ref={bottomSheetModalRef}
+      {...extraBottomSheetProps}
     >
       <View style={styles.innerContainer}>
         {step === LoginStep.INIT && (
@@ -516,7 +522,7 @@ export function SignIn() {
               returnKeyType="go"
               enablesReturnKeyAutomatically={true}
               autoCapitalize="none"
-              onChangeText={(text) => setUserIdentifier(text.trim())}
+              onChangeText={(text: string) => setUserIdentifier(text.trim())}
               onBlur={validateInput}
               value={userIdentifier}
               onSubmitEditing={initSignIn}
@@ -531,20 +537,17 @@ export function SignIn() {
                     : 'onChange']: handleAddlFieldChange,
                 });
               })}
-            <Pressable
-              style={({ pressed }: { pressed: boolean }) => [
-                styles.button,
-                !isValidUserIdentifier && styles.buttonDisabled,
-                pressed && styles.buttonPressed,
-                isSubmitting && styles.buttonSubmitting,
-              ]}
+            <TouchableOpacity
               disabled={!isValidUserIdentifier || isSubmitting}
               onPress={initSignIn}
             >
-              <Text>
-                {isSubmitting && (
-                  <ActivityIndicator size="small" color="#efefef" />
-                )}
+              <View
+                style={{
+                  ...styles.button,
+                  ...(!isValidUserIdentifier && styles.buttonDisabled),
+                  ...(isSubmitting && styles.buttonSubmitting),
+                }}
+              >
                 <View style={styles.buttonText}>
                   <Text
                     style={
@@ -556,11 +559,18 @@ export function SignIn() {
                           }
                     }
                   >
+                    {isSubmitting && (
+                      <ActivityIndicator
+                        size="small"
+                        color="#efefef"
+                        style={styles.loadingIndicator}
+                      />
+                    )}
                     {isSubmitting ? 'Just a sec...' : 'Continue'}
                   </Text>
                 </View>
-              </Text>
-            </Pressable>
+              </View>
+            </TouchableOpacity>
             <Text style={styles.signInNoticeText}>
               By continuing, you're agreeing to the terms of service that govern
               this app and to receive email or text messages for verification
@@ -575,10 +585,10 @@ export function SignIn() {
               Thanks! Verify your{' '}
               {loginType === 'phone' ? 'phone number' : 'email'} to finish
             </Text>
-            <Text style={tw.style('py-6')}>
+            <Text style={styles.py6}>
               Click the link in the message we just sent to{' '}
-              <Text style={tw.style('italic')}>{userIdentifier}</Text> to verify
-              and finish.
+              <Text style={styles.italic}>{userIdentifier}</Text> to verify and
+              finish.
               <Text
                 style={[styles.link]}
                 onPress={() => setStep(LoginStep.INIT)}
@@ -595,18 +605,15 @@ export function SignIn() {
               )}
             </View>
 
-            <Pressable
-              style={({ pressed }: { pressed: boolean }) => [
-                styles.button,
-                pressed && styles.buttonPressed,
-              ]}
+            <TouchableOpacity
+              style={[styles.button]}
               onPress={() => setStep(LoginStep.INIT)}
             >
               <Text style={styles.buttonContent}>
                 Try a different{' '}
                 {loginType === 'phone' ? 'phone number' : 'email'}
               </Text>
-            </Pressable>
+            </TouchableOpacity>
           </>
         )}
 
@@ -620,28 +627,28 @@ export function SignIn() {
 
         {step === LoginStep.FAILURE && (
           <>
-            <Text style={tw.style('text-base')}>Whoops, that didn't work!</Text>
-            <Pressable
+            <Text style={styles.textBase}>Whoops, that didn't work!</Text>
+            <TouchableOpacity
               style={styles.button}
               onPress={() => setStep(LoginStep.INIT)}
             >
               <Text style={styles.buttonContent}>Try again</Text>
-            </Pressable>
+            </TouchableOpacity>
           </>
         )}
 
         {step === LoginStep.ERROR && (
           <>
-            <Text style={tw.style('text-base')}>
+            <Text style={styles.textBase}>
               An error occurred while signing you in.
             </Text>
-            {!!error && <Text style={tw.style('text-rose-800')}>{error}</Text>}
-            <Pressable
+            {!!error && <Text style={styles.textRose800}>{error}</Text>}
+            <TouchableOpacity
               style={styles.button}
               onPress={() => setStep(LoginStep.INIT)}
             >
               <Text style={styles.buttonContent}>Try again</Text>
-            </Pressable>
+            </TouchableOpacity>
           </>
         )}
         <Text>
@@ -723,9 +730,11 @@ const styles = StyleSheet.create({
     marginBottom: 30,
     elevation: 0,
     backgroundColor: '#5b0ae0',
+    color: '#fff',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
+    // height: 45,
   },
   buttonDisabled: {
     backgroundColor: '#eee',
@@ -739,9 +748,10 @@ const styles = StyleSheet.create({
     color: '#fff',
   },
   buttonText: {
-    marginLeft: 10,
-    paddingLeft: 10,
-    fontSize: 18,
+    // marginHorizontal: 10,
+    // paddingHorizontal: 10,
+    // fontSize: 18,
+    // color: '#fff',
   },
   buttonTextInner: {
     fontSize: 18,
@@ -754,9 +764,7 @@ const styles = StyleSheet.create({
     color: '#c7c7c7',
   },
   loadingIndicator: {
-    textAlignVertical: 'center',
-    padding: 20,
-    margin: 20,
+    marginRight: 10,
   },
   signInNoticeText: {
     fontSize: 12,
@@ -768,4 +776,17 @@ const styles = StyleSheet.create({
   link: {
     color: '#6114e1',
   },
+  py6: {
+    paddingVertical: 6,
+  },
+  italic: {
+    fontStyle: 'italic',
+  },
+  textBase: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  textRose800: {
+    color: 'rgb(159, 18, 57)',
+  },
 });

package/src/components/images/ErrorIcon.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import Svg, { SvgProps, Path } from 'react-native-svg';
+/* SVGR has dropped some elements not supported by react-native-svg: title */
+
+const SvgComponent = (props: SvgProps) => (
+  <Svg width={24} height={24} xmlns="http://www.w3.org/2000/svg" {...props}>
+    <Path d="M0 0h48v1H0z" fill="#DA1E28" fillRule="evenodd" />
+  </Svg>
+);
+
+export default SvgComponent;

package/src/types.ts

@@ -24,4 +24,4 @@ type UserContext = {
         [key: string]: any;
     };
     redacted_fields: string[];
-};
+};

package/lib/commonjs/tailwind.config.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
-  theme: {
-    extend: {}
-  },
-  plugins: [],
-  variants: ['dark'],
-  corePlugins: require('tailwind-rn/unsupported-core-plugins')
-};
-exports.default = _default;
-//# sourceMappingURL=tailwind.config.js.map

package/lib/commonjs/tailwind.config.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["content","theme","extend","plugins","variants","corePlugins","require"],"sources":["tailwind.config.ts"],"sourcesContent":["export default {\n  content: ['./src/**/*.{js,jsx,ts,tsx}'],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n  variants: ['dark'],\n  corePlugins: require('tailwind-rn/unsupported-core-plugins'),\n};\n"],"mappings":";;;;;;eAAe;EACbA,OAAO,EAAE,CAAC,4BAAD,CADI;EAEbC,KAAK,EAAE;IACLC,MAAM,EAAE;EADH,CAFM;EAKbC,OAAO,EAAE,EALI;EAMbC,QAAQ,EAAE,CAAC,MAAD,CANG;EAObC,WAAW,EAAEC,OAAO,CAAC,sCAAD;AAPP,C"}

package/lib/commonjs/utils/tailwind.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _twrnc = require("twrnc");
-
-var _tailwind = _interopRequireDefault(require("../tailwind.config"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const tw = (0, _twrnc.create)(_tailwind.default);
-var _default = tw;
-exports.default = _default;
-//# sourceMappingURL=tailwind.js.map

package/lib/commonjs/utils/tailwind.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tw","create","twConfig"],"sources":["tailwind.ts"],"sourcesContent":["import { create } from 'twrnc';\nimport twConfig from '../tailwind.config';\n\nconst tw = create(twConfig);\n\nexport default tw;\n"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEA,MAAMA,EAAE,GAAG,IAAAC,aAAA,EAAOC,iBAAP,CAAX;eAEeF,E"}

package/lib/module/tailwind.config.js

@@ -1,10 +0,0 @@
-export default {
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
-  theme: {
-    extend: {}
-  },
-  plugins: [],
-  variants: ['dark'],
-  corePlugins: require('tailwind-rn/unsupported-core-plugins')
-};
-//# sourceMappingURL=tailwind.config.js.map

package/lib/module/tailwind.config.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["content","theme","extend","plugins","variants","corePlugins","require"],"sources":["tailwind.config.ts"],"sourcesContent":["export default {\n  content: ['./src/**/*.{js,jsx,ts,tsx}'],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n  variants: ['dark'],\n  corePlugins: require('tailwind-rn/unsupported-core-plugins'),\n};\n"],"mappings":"AAAA,eAAe;EACbA,OAAO,EAAE,CAAC,4BAAD,CADI;EAEbC,KAAK,EAAE;IACLC,MAAM,EAAE;EADH,CAFM;EAKbC,OAAO,EAAE,EALI;EAMbC,QAAQ,EAAE,CAAC,MAAD,CANG;EAObC,WAAW,EAAEC,OAAO,CAAC,sCAAD;AAPP,CAAf"}

package/lib/module/utils/tailwind.js

@@ -1,5 +0,0 @@
-import { create } from 'twrnc';
-import twConfig from '../tailwind.config';
-const tw = create(twConfig);
-export default tw;
-//# sourceMappingURL=tailwind.js.map

package/lib/module/utils/tailwind.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["create","twConfig","tw"],"sources":["tailwind.ts"],"sourcesContent":["import { create } from 'twrnc';\nimport twConfig from '../tailwind.config';\n\nconst tw = create(twConfig);\n\nexport default tw;\n"],"mappings":"AAAA,SAASA,MAAT,QAAuB,OAAvB;AACA,OAAOC,QAAP,MAAqB,oBAArB;AAEA,MAAMC,EAAE,GAAGF,MAAM,CAACC,QAAD,CAAjB;AAEA,eAAeC,EAAf"}

package/lib/typescript/src/tailwind.config.d.ts

@@ -1,10 +0,0 @@
-declare const _default: {
-    content: string[];
-    theme: {
-        extend: {};
-    };
-    plugins: never[];
-    variants: string[];
-    corePlugins: any;
-};
-export default _default;

package/lib/typescript/src/utils/tailwind.d.ts

@@ -1,2 +0,0 @@
-declare const tw: import("twrnc").TailwindFn;
-export default tw;

package/src/tailwind.config.ts

@@ -1,9 +0,0 @@
-export default {
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-  variants: ['dark'],
-  corePlugins: require('tailwind-rn/unsupported-core-plugins'),
-};

package/src/utils/tailwind.ts

@@ -1,6 +0,0 @@
-import { create } from 'twrnc';
-import twConfig from '../tailwind.config';
-
-const tw = create(twConfig);
-
-export default tw;