github/self
1
1
Fork 0
mirror of https://github.com/selfxyz/self.git synced 2026-04-27 03:01:15 -04:00
Code Issues Packages Projects Releases Wiki Activity

make it easy to add rounded corners to views (#71)

Browse Source
This commit is contained in:
Aaron DeRuvo
2025-02-11 10:27:00 +01:00
committed by GitHub
parent 1a68f26a8e
commit 26d82f3113
7 changed files with 98 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/src/Navigation.tsx
View File

@@ -13,7 +13,7 @@ import {
NativeStackHeaderProps,
createNativeStackNavigator,
} from '@react-navigation/native-stack';
import { Button, ViewStyle } from 'tamagui';
import { Button, TextStyle, ViewStyle } from 'tamagui';
import { NavBar } from './components/NavBar';
import ActivityIcon from './images/icons/activity.svg';
@@ -55,7 +55,10 @@ const DefaultNavBar = (props: NativeStackHeaderProps) => {
paddingBottom={20}
backgroundColor={headerStyle.backgroundColor as string}
barStyle={
options.headerTintColor === white ? 'light-content' : 'dark-content'
options.headerTintColor === white ||
(options.headerTitleStyle as TextStyle)?.color === white
? 'light-content'
: 'dark-content'
}
>
<NavBar.LeftAction
@@ -208,7 +211,9 @@ const AppNavigation = createNativeStackNavigator({
headerStyle: {
backgroundColor: black,
},
headerTintColor: white,
headerTitleStyle: {
color: white,
},
},
},
ValidProofScreen: {

36
app/src/layouts/ExpandableBottomLayout.tsx
View File

@@ -6,25 +6,45 @@ import { View, ViewProps } from 'tamagui';
import { black, white } from '../utils/colors';
interface ExpandableBottomLayoutProps {
interface ExpandableBottomLayoutProps extends ViewProps {
children: React.ReactNode;
backgroundColor?: string;
}
interface TopSectionProps extends ViewProps {
children: React.ReactNode;
roundTop?: boolean;
}
interface BottomSectionProps extends ViewProps {
children: React.ReactNode;
}
const Layout: React.FC<ExpandableBottomLayoutProps> = ({ children }) => {
return <SafeAreaView style={styles.layout}>{children}</SafeAreaView>;
const Layout: React.FC<ExpandableBottomLayoutProps> = ({
children,
backgroundColor,
}) => {
return (
<SafeAreaView style={[styles.layout, { backgroundColor }]}>
{children}
</SafeAreaView>
);
};
const TopSection: React.FC<TopSectionProps> = ({ children, ...props }) => {
const TopSection: React.FC<TopSectionProps> = ({
children,
backgroundColor,
...props
}) => {
return (
<View {...props} style={styles.topSection}>
<View
{...props}
style={[
styles.topSection,
props.roundTop && styles.roundTop,
backgroundColor && { backgroundColor: backgroundColor as string },
]}
>
{children}
</View>
);
@@ -66,6 +86,12 @@ export const ExpandableBottomLayout = {
};
const styles = StyleSheet.create({
roundTop: {
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
borderTopStartRadius: 20,
borderTopEndRadius: 20,
},
layout: {
height: '100%',
flexDirection: 'column',

2
app/src/screens/Onboarding/ConfirmBelongingScreen.tsx
View File

@@ -24,7 +24,7 @@ const ConfirmBelongingScreen: React.FC = () => {
return (
<>
<StatusBar barStyle="light-content" backgroundColor="black" />
<StatusBar barStyle="light-content" backgroundColor="black" hidden />
<ExpandableBottomLayout.Layout>
<ExpandableBottomLayout.TopSection>
<LottieView

9
app/src/screens/Onboarding/PassportCameraScreen.tsx
View File

@@ -1,5 +1,5 @@
import React, { useCallback } from 'react';
import { StyleSheet } from 'react-native';
import { StatusBar, StyleSheet } from 'react-native';
import { useIsFocused, useNavigation } from '@react-navigation/native';
import LottieView from 'lottie-react-native';
@@ -18,7 +18,7 @@ import Bulb from '../../images/icons/passport_camera_bulb.svg';
import Scan from '../../images/icons/passport_camera_scan.svg';
import { ExpandableBottomLayout } from '../../layouts/ExpandableBottomLayout';
import useUserStore from '../../stores/userStore';
import { slate800 } from '../../utils/colors';
import { black, slate800 } from '../../utils/colors';
interface PassportNFCScanScreen {}
@@ -42,8 +42,9 @@ const PassportCameraScreen: React.FC<PassportNFCScanScreen> = ({}) => {
const onCancelPress = useHapticNavigation('PassportOnboarding', 'cancel');
return (
<ExpandableBottomLayout.Layout>
<ExpandableBottomLayout.TopSection>
<ExpandableBottomLayout.Layout backgroundColor={black}>
<ExpandableBottomLayout.TopSection roundTop>
<StatusBar barStyle="light-content" backgroundColor={black} />
<PassportCamera onPassportRead={onPassportRead} isMounted={isFocused} />
<LottieView
autoPlay

6
app/src/screens/Onboarding/PassportNFCScanScreen.tsx
View File

@@ -27,7 +27,7 @@ import useHapticNavigation from '../../hooks/useHapticNavigation';
import NFC_IMAGE from '../../images/nfc.png';
import { ExpandableBottomLayout } from '../../layouts/ExpandableBottomLayout';
import useUserStore from '../../stores/userStore';
import { slate100 } from '../../utils/colors';
import { black, slate100 } from '../../utils/colors';
import { buttonTap } from '../../utils/haptic';
import { scan } from '../../utils/nfcScannerNew';
@@ -115,8 +115,8 @@ const PassportNFCScanScreen: React.FC<PassportNFCScanScreenProps> = ({}) => {
);
return (
<ExpandableBottomLayout.Layout>
<ExpandableBottomLayout.TopSection>
<ExpandableBottomLayout.Layout backgroundColor={black}>
<ExpandableBottomLayout.TopSection roundTop backgroundColor={slate100}>
<LottieView
autoPlay
loop={false}

9
app/src/screens/Onboarding/PassportOnboardingScreen.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { StyleSheet } from 'react-native';
import { StatusBar, StyleSheet } from 'react-native';
import LottieView from 'lottie-react-native';
@@ -12,7 +12,7 @@ import Description from '../../components/typography/Description';
import { Title } from '../../components/typography/Title';
import useHapticNavigation from '../../hooks/useHapticNavigation';
import { ExpandableBottomLayout } from '../../layouts/ExpandableBottomLayout';
import { slate100 } from '../../utils/colors';
import { black, slate100 } from '../../utils/colors';
interface PassportOnboardingScreenProps {}
@@ -23,8 +23,9 @@ const PassportOnboardingScreen: React.FC<
const onCancelPress = useHapticNavigation('Launch', 'cancel');
return (
<ExpandableBottomLayout.Layout>
<ExpandableBottomLayout.TopSection>
<ExpandableBottomLayout.Layout backgroundColor={black}>
<StatusBar barStyle="light-content" backgroundColor={black} />
<ExpandableBottomLayout.TopSection roundTop>
<LottieView
autoPlay
loop={false}

87
app/src/screens/ProveFlow/ViewFinder.tsx
View File

@@ -1,5 +1,5 @@
import React, { useCallback, useState } from 'react';
import { StyleSheet } from 'react-native';
import { StatusBar, StyleSheet } from 'react-native';
import { useIsFocused, useNavigation } from '@react-navigation/native';
import LottieView from 'lottie-react-native';
@@ -17,7 +17,7 @@ import useHapticNavigation from '../../hooks/useHapticNavigation';
import QRScan from '../../images/icons/qr_code.svg';
import { ExpandableBottomLayout } from '../../layouts/ExpandableBottomLayout';
import useUserStore from '../../stores/userStore';
import { slate800 } from '../../utils/colors';
import { black, slate800 } from '../../utils/colors';
import handleQRCodeScan from '../../utils/qrCodeNew';
interface QRCodeViewFinderScreenProps {}
@@ -61,47 +61,50 @@ const QRCodeViewFinderScreen: React.FC<QRCodeViewFinderScreenProps> = ({}) => {
const onCancelPress = useHapticNavigation('Home', 'cancel');
return (
<ExpandableBottomLayout.Layout>
<ExpandableBottomLayout.TopSection>
{!doneScanningQR && (
<>
<QRCodeScannerView onQRData={onQRData} isMounted={isFocused} />
<LottieView
autoPlay
loop
source={require('../../assets/animations/qr_scan.json')}
style={styles.animation}
cacheComposition={true}
renderMode="HARDWARE"
/>
</>
)}
{null}
</ExpandableBottomLayout.TopSection>
<ExpandableBottomLayout.BottomSection>
<YStack alignItems="center" gap="$2.5" paddingBottom={20}>
<YStack alignItems="center" gap="$6" pb="$2.5">
<Title>Verify your ID</Title>
<XStack gap="$6" alignSelf="flex-start" alignItems="flex-start">
<View pt="$2">
<QRScan height={40} width={40} color={slate800} />
</View>
<View maxWidth="75%">
<Description style={styles.subheader}>
Scan a partner's QR code
</Description>
<Additional style={styles.description}>
Look for a QR code from a Self partner and position it in the
camera frame above.
</Additional>
</View>
</XStack>
</YStack>
<>
<StatusBar barStyle="light-content" backgroundColor={black} />
<ExpandableBottomLayout.Layout>
<ExpandableBottomLayout.TopSection roundTop>
{!doneScanningQR && (
<>
<QRCodeScannerView onQRData={onQRData} isMounted={isFocused} />
<LottieView
autoPlay
loop
source={require('../../assets/animations/qr_scan.json')}
style={styles.animation}
cacheComposition={true}
renderMode="HARDWARE"
/>
</>
)}
{null}
</ExpandableBottomLayout.TopSection>
<ExpandableBottomLayout.BottomSection>
<YStack alignItems="center" gap="$2.5" paddingBottom={20}>
<YStack alignItems="center" gap="$6" pb="$2.5">
<Title>Verify your ID</Title>
<XStack gap="$6" alignSelf="flex-start" alignItems="flex-start">
<View pt="$2">
<QRScan height={40} width={40} color={slate800} />
</View>
<View maxWidth="75%">
<Description style={styles.subheader}>
Scan a partner's QR code
</Description>
<Additional style={styles.description}>
Look for a QR code from a Self partner and position it in
the camera frame above.
</Additional>
</View>
</XStack>
</YStack>
<SecondaryButton onPress={onCancelPress}>Cancel</SecondaryButton>
</YStack>
</ExpandableBottomLayout.BottomSection>
</ExpandableBottomLayout.Layout>
<SecondaryButton onPress={onCancelPress}>Cancel</SecondaryButton>
</YStack>
</ExpandableBottomLayout.BottomSection>
</ExpandableBottomLayout.Layout>
</>
);
};