@rownd/react-native 0.1.9 → 0.2.0

package/src/components/BottomSheetTextInput/BottomSheetTextInput.tsx

@@ -0,0 +1,57 @@
+import React, { memo, useCallback, forwardRef } from 'react';
+import { TextInput } from 'react-native-gesture-handler';
+import type { BottomSheetTextInputProps } from './types';
+
+// @ts-ignore
+const {
+  useBottomSheetInternal,
+} = require('@gorhom/bottom-sheet/src/hooks/useBottomSheetInternal');
+
+const BottomSheetTextInputComponent = forwardRef<
+  TextInput,
+  BottomSheetTextInputProps
+>(({ onFocus, onBlur, ...rest }, ref) => {
+  //#region hooks
+  // @ts-ignore
+  let { shouldHandleKeyboardEvents } = useBottomSheetInternal();
+  //#endregion
+
+  if (!shouldHandleKeyboardEvents) {
+    shouldHandleKeyboardEvents = {};
+  }
+
+  //#region callbacks
+  const handleOnFocus = useCallback(
+    (args) => {
+      shouldHandleKeyboardEvents.value = true;
+      if (onFocus) {
+        onFocus(args);
+      }
+    },
+    [onFocus, shouldHandleKeyboardEvents]
+  );
+  const handleOnBlur = useCallback(
+    (args) => {
+      shouldHandleKeyboardEvents.value = false;
+      if (onBlur) {
+        onBlur(args);
+      }
+    },
+    [onBlur, shouldHandleKeyboardEvents]
+  );
+  //#endregion
+
+  return (
+    <TextInput
+      ref={ref}
+      onFocus={handleOnFocus}
+      onBlur={handleOnBlur}
+      {...rest}
+    />
+  );
+});
+
+const BottomSheetTextInput = memo(BottomSheetTextInputComponent);
+BottomSheetTextInput.displayName = 'BottomSheetTextInput';
+
+export default BottomSheetTextInput;

package/src/components/BottomSheetTextInput/index.ts

@@ -0,0 +1,5 @@
+// @ts-ignore
+export { default } from './BottomSheetTextInput';
+
+// @ts-ignore
+export type { BottomSheetTextInputProps } from './types';

package/src/components/BottomSheetTextInput/types.ts

@@ -0,0 +1,3 @@
+import type { TextInputProps } from 'react-native';
+
+export interface BottomSheetTextInputProps extends TextInputProps {}

package/src/components/DarkText.tsx

@@ -3,7 +3,9 @@ import { Text, TextProps, TextStyle } from 'react-native';
 
 export default function DarkText({ style, children, ...rest }: TextProps) {
   if (style) {
-    (style as TextStyle).color = '#000';
+    (style as TextStyle).color = '#000000';
+  } else {
+    style = { color: '#000000' };
   }
 
   return (

package/src/components/RowndComponents.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import { useDeviceContext } from 'twrnc';
+// import { useDeviceContext } from 'twrnc';
 
-import tw from '../utils/tailwind';
+// import tw from '../utils/tailwind';
 import { SignIn } from './SignIn';
 import { AutoSigninDialog } from './AutoSigninDialog';
 import { useGlobalContext } from './GlobalContext';
 
 export function RowndComponents() {
   const { state } = useGlobalContext();
-  useDeviceContext(tw);
+  // useDeviceContext(tw);
 
   return (
     <>

package/src/components/SignIn.tsx

@@ -10,12 +10,13 @@ import { differenceInMinutes } from 'date-fns';
 import {
   View,
   StyleSheet,
-  Pressable,
+  TouchableOpacity,
   Image,
   ActivityIndicator,
   Linking,
+  Text,
 } from 'react-native';
-import Text from './DarkText';
+// import Text from './DarkText';
 import { SvgCssUri } from 'react-native-svg';
 import tw from '../utils/tailwind';
 import phone, { type PhoneResult } from 'phone';
@@ -24,8 +25,9 @@ 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';
@@ -482,17 +484,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 && (
@@ -515,7 +523,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}
@@ -530,20 +538,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={
@@ -555,11 +560,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
@@ -594,18 +606,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,12 +629,12 @@ export function SignIn() {
         {step === LoginStep.FAILURE && (
           <>
             <Text style={tw.style('text-base')}>Whoops, that didn't work!</Text>
-            <Pressable
+            <TouchableOpacity
               style={styles.button}
               onPress={() => setStep(LoginStep.INIT)}
             >
               <Text style={styles.buttonContent}>Try again</Text>
-            </Pressable>
+            </TouchableOpacity>
           </>
         )}
 
@@ -635,12 +644,12 @@ export function SignIn() {
               An error occurred while signing you in.
             </Text>
             {!!error && <Text style={tw.style('text-rose-800')}>{error}</Text>}
-            <Pressable
+            <TouchableOpacity
               style={styles.button}
               onPress={() => setStep(LoginStep.INIT)}
             >
               <Text style={styles.buttonContent}>Try again</Text>
-            </Pressable>
+            </TouchableOpacity>
           </>
         )}
         <Text>
@@ -722,9 +731,11 @@ const styles = StyleSheet.create({
     marginBottom: 30,
     elevation: 0,
     backgroundColor: '#5b0ae0',
+    color: '#fff',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
+    // height: 45,
   },
   buttonDisabled: {
     backgroundColor: '#eee',
@@ -738,9 +749,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,
@@ -753,9 +765,7 @@ const styles = StyleSheet.create({
     color: '#c7c7c7',
   },
   loadingIndicator: {
-    textAlignVertical: 'center',
-    padding: 20,
-    margin: 20,
+    marginRight: 10,
   },
   signInNoticeText: {
     fontSize: 12,

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;