-
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into fix/ios/wrong-bridge
- Loading branch information
Showing
49 changed files
with
2,229 additions
and
2,550 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
import React, { useCallback, useState } from 'react'; | ||
import { LayoutChangeEvent, StyleSheet, View } from 'react-native'; | ||
import { vec, Rect, Canvas, RadialGradient } from '@shopify/react-native-skia'; | ||
|
||
import { colors } from '../styles'; | ||
|
||
const BGGradient = () => { | ||
const [size, setSize] = useState({ width: 0, height: 0 }); | ||
|
||
const onWrapperLayout = useCallback((event: LayoutChangeEvent) => { | ||
setSize({ | ||
width: event.nativeEvent.layout.width, | ||
height: event.nativeEvent.layout.height, | ||
}); | ||
}, []); | ||
|
||
return ( | ||
<View style={styles.wrapper} onLayout={onWrapperLayout}> | ||
<Canvas style={styles.canvas}> | ||
<Rect x={0} y={0} width={size.width} height={size.height}> | ||
<RadialGradient | ||
r={size.width} | ||
c={vec(size.width / 2, 0)} | ||
colors={[colors.backgroundLight, colors.background]} | ||
/> | ||
</Rect> | ||
</Canvas> | ||
</View> | ||
); | ||
}; | ||
|
||
export default BGGradient; | ||
|
||
const styles = StyleSheet.create({ | ||
wrapper: { | ||
position: 'absolute', | ||
top: 0, | ||
left: 0, | ||
right: 0, | ||
bottom: 0, | ||
}, | ||
canvas: { | ||
width: '100%', | ||
height: '100%', | ||
}, | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,29 +1,42 @@ | ||
/* eslint-disable react-native/no-inline-styles */ | ||
import type { PropsWithChildren, FC } from 'react'; | ||
import { StyleProp, ViewStyle } from 'react-native'; | ||
import React, { PropsWithChildren } from 'react'; | ||
import { SafeAreaView } from 'react-native-safe-area-context'; | ||
import { StyleProp, StyleSheet, ViewStyle } from 'react-native'; | ||
|
||
import BGGradient from './BGGradient'; | ||
import { colors } from '../styles'; | ||
|
||
type ContainerProps = PropsWithChildren<{ | ||
style?: StyleProp<ViewStyle>; | ||
centered?: boolean; | ||
}>; | ||
|
||
const Container: FC<ContainerProps> = (props) => { | ||
const headerPadding = 120; // eyeballed | ||
|
||
const Container: React.FC<ContainerProps> = (props) => { | ||
const { children, style, centered } = props; | ||
|
||
return ( | ||
<SafeAreaView | ||
style={[ | ||
{ | ||
flex: 1, | ||
padding: 8, | ||
}, | ||
centered && { justifyContent: 'center', alignItems: 'center' }, | ||
style, | ||
]} | ||
edges={['bottom', 'left', 'right']} | ||
style={[styles.basic, centered && styles.centered, style]} | ||
> | ||
<BGGradient /> | ||
{children} | ||
</SafeAreaView> | ||
); | ||
}; | ||
|
||
export default Container; | ||
|
||
const styles = StyleSheet.create({ | ||
basic: { | ||
flex: 1, | ||
padding: 24, | ||
paddingTop: headerPadding, | ||
backgroundColor: colors.background, | ||
}, | ||
centered: { | ||
alignItems: 'center', | ||
justifyContent: 'center', | ||
}, | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,121 @@ | ||
import { useState } from 'react'; | ||
// @ts-expect-error | ||
import { Icon } from '@swmansion/icons'; | ||
import { ScrollView } from 'react-native-gesture-handler'; | ||
import { Modal, View, Text, Pressable, StyleSheet } from 'react-native'; | ||
|
||
import withSeparators from '../utils/withSeparators'; | ||
import { colors } from '../styles'; | ||
import Spacer from './Spacer'; | ||
|
||
interface SelectProps<T extends string> { | ||
value: T; | ||
options: T[]; | ||
onChange: (value: T) => void; | ||
} | ||
|
||
function Select<T extends string>(props: SelectProps<T>) { | ||
const { options, value, onChange } = props; | ||
const [isModalOpen, setModalOpen] = useState(false); | ||
|
||
const renderSeparator = (index: number) => ( | ||
<View key={index} style={styles.separator} /> | ||
); | ||
|
||
const renderOption = (option: T) => ( | ||
<Pressable | ||
key={option} | ||
onPress={() => { | ||
onChange(option); | ||
setModalOpen(false); | ||
}} | ||
> | ||
<View style={styles.optionRow}> | ||
<Icon | ||
size={24} | ||
color={colors.white} | ||
name={option === value ? 'check-circle' : 'circle'} | ||
/> | ||
<Spacer.Horizontal size={12} /> | ||
<Text style={styles.selectText}>{option}</Text> | ||
</View> | ||
</Pressable> | ||
); | ||
|
||
return ( | ||
<> | ||
<Pressable onPress={() => setModalOpen(true)}> | ||
<View style={styles.selectBox}> | ||
<Text style={styles.selectText}>{value}</Text> | ||
<Icon | ||
size={34} | ||
type="broken" | ||
name="list-pointers" | ||
color={colors.white} | ||
/> | ||
</View> | ||
</Pressable> | ||
<Modal visible={isModalOpen} animationType="fade" transparent> | ||
<View style={styles.modalBg} /> | ||
<Pressable | ||
style={styles.modalSpacer} | ||
onPress={() => { | ||
setModalOpen(false); | ||
}} | ||
/> | ||
<View style={styles.modalContainer}> | ||
<ScrollView> | ||
{withSeparators(options, renderSeparator, renderOption)} | ||
</ScrollView> | ||
</View> | ||
</Modal> | ||
</> | ||
); | ||
} | ||
|
||
export default Select; | ||
|
||
const styles = StyleSheet.create({ | ||
selectBox: { | ||
borderWidth: 1, | ||
borderColor: colors.border, | ||
borderRadius: 8, | ||
flexDirection: 'row', | ||
alignItems: 'center', | ||
paddingHorizontal: 12, | ||
}, | ||
selectText: { | ||
flex: 1, | ||
color: colors.white, | ||
fontSize: 16, | ||
paddingVertical: 12, | ||
}, | ||
modalBg: { | ||
backgroundColor: colors.modalBackdrop, | ||
position: 'absolute', | ||
top: 0, | ||
left: 0, | ||
right: 0, | ||
bottom: 0, | ||
}, | ||
modalSpacer: { | ||
flex: 3, | ||
}, | ||
modalContainer: { | ||
flex: 2, | ||
backgroundColor: colors.background, | ||
borderTopLeftRadius: 20, | ||
borderTopRightRadius: 20, | ||
padding: 24, | ||
}, | ||
optionRow: { | ||
flexDirection: 'row', | ||
alignItems: 'center', | ||
}, | ||
separator: { | ||
height: 1, | ||
backgroundColor: colors.separator, | ||
marginHorizontal: 12, | ||
marginVertical: 6, | ||
}, | ||
}); |
Oops, something went wrong.