We are on Build a screen
This commit is contained in:
@ -1,37 +0,0 @@
|
||||
import { StyleSheet } from 'react-native';
|
||||
import Animated, {
|
||||
useSharedValue,
|
||||
useAnimatedStyle,
|
||||
withTiming,
|
||||
withRepeat,
|
||||
withSequence,
|
||||
} from 'react-native-reanimated';
|
||||
|
||||
import { ThemedText } from '@/components/ThemedText';
|
||||
|
||||
export function HelloWave() {
|
||||
const rotationAnimation = useSharedValue(0);
|
||||
|
||||
rotationAnimation.value = withRepeat(
|
||||
withSequence(withTiming(25, { duration: 150 }), withTiming(0, { duration: 150 })),
|
||||
4 // Run the animation 4 times
|
||||
);
|
||||
|
||||
const animatedStyle = useAnimatedStyle(() => ({
|
||||
transform: [{ rotate: `${rotationAnimation.value}deg` }],
|
||||
}));
|
||||
|
||||
return (
|
||||
<Animated.View style={animatedStyle}>
|
||||
<ThemedText style={styles.text}>👋</ThemedText>
|
||||
</Animated.View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
text: {
|
||||
fontSize: 28,
|
||||
lineHeight: 32,
|
||||
marginTop: -6,
|
||||
},
|
||||
});
|
@ -1,10 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
|
||||
import { ThemedText } from '../ThemedText';
|
||||
|
||||
it(`renders correctly`, () => {
|
||||
const tree = renderer.create(<ThemedText>Snapshot test!</ThemedText>).toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
@ -1,24 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders correctly 1`] = `
|
||||
<Text
|
||||
style={
|
||||
[
|
||||
{
|
||||
"color": "#11181C",
|
||||
},
|
||||
{
|
||||
"fontSize": 16,
|
||||
"lineHeight": 24,
|
||||
},
|
||||
undefined,
|
||||
undefined,
|
||||
undefined,
|
||||
undefined,
|
||||
undefined,
|
||||
]
|
||||
}
|
||||
>
|
||||
Snapshot test!
|
||||
</Text>
|
||||
`;
|
85
components/buttons/Button.tsx
Normal file
85
components/buttons/Button.tsx
Normal file
@ -0,0 +1,85 @@
|
||||
import { StyleSheet, Pressable } from "react-native";
|
||||
import { ThemedText } from "@/components/ThemedText";
|
||||
import { ThemedView } from "@/components/ThemedView";
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import FontAwesome from "@expo/vector-icons/FontAwesome";
|
||||
|
||||
type Props = {
|
||||
label: string;
|
||||
theme?: 'primary';
|
||||
onPress?: () => void;
|
||||
};
|
||||
|
||||
const Button = ({ label, theme, onPress }: Props) => {
|
||||
const scheme = useColorScheme() ?? 'light';
|
||||
if (theme === 'primary') {
|
||||
return (
|
||||
<ThemedView style={styles.buttonContainer}>
|
||||
<Pressable
|
||||
style={[
|
||||
styles.button,
|
||||
{backgroundColor: Colors[scheme].text}
|
||||
]}
|
||||
onPress={() => alert('You pressed a button.')}
|
||||
>
|
||||
<ThemedText
|
||||
style={[
|
||||
styles.buttonLabel,
|
||||
{color: Colors[scheme].background}
|
||||
]}
|
||||
>
|
||||
{label}
|
||||
</ThemedText>
|
||||
</Pressable>
|
||||
</ThemedView>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<ThemedView style={styles.buttonContainer}>
|
||||
<Pressable
|
||||
style={[
|
||||
styles.button,
|
||||
{backgroundColor: Colors[scheme].text}
|
||||
]}
|
||||
onPress={() => alert('You pressed a button.')}
|
||||
>
|
||||
<ThemedText
|
||||
style={[
|
||||
styles.buttonLabel,
|
||||
{color: Colors[scheme].background}
|
||||
]}
|
||||
>
|
||||
{label}
|
||||
</ThemedText>
|
||||
</Pressable>
|
||||
</ThemedView>
|
||||
);
|
||||
}
|
||||
};
|
||||
export default Button;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
buttonContainer: {
|
||||
width: 320,
|
||||
height: 68,
|
||||
marginHorizontal: 20,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 3,
|
||||
},
|
||||
button: {
|
||||
borderRadius: 10,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'row',
|
||||
},
|
||||
buttonIcon: {
|
||||
paddingRight: 8,
|
||||
},
|
||||
buttonLabel: {
|
||||
fontSize: 16,
|
||||
},
|
||||
});
|
Reference in New Issue
Block a user