Skip to content

Commit

Permalink
feat(context): adding fiesta context
Browse files Browse the repository at this point in the history
  • Loading branch information
@mateoguzmana
mateoguzmana committed Sep 4, 2022
1 parent 8f78919 commit 0a8c951
Show file tree
Hide file tree
Showing 7 changed files with 280 additions and 167 deletions.
150 changes: 9 additions & 141 deletions example/src/App.tsx
View file
@@ -1,117 +1,15 @@
import React, { ReactChild, useRef, useState } from 'react';
import {
SafeAreaView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
import {
Balloons,
Fireworks,
FiestaThemes,
Stars,
Hearts,
Balloon,
Star,
Heart,
Firework,
EmojiPopper,
Emoji,
PopperHandler,
} from 'react-native-fiesta';
import Content from './components/Content';
import { Canvas, useFont } from '@shopify/react-native-skia';
import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { FiestaProvider } from 'react-native-fiesta';

function App() {
const font = useFont(require('./fonts/OpenMoji-Color.ttf'), 30);
const [lightMode, setLightMode] = useState(false);
const [componentToRender, setComponentToRender] = useState<ReactChild | null>(
null
);
const textColor = lightMode ? styles.textLightColor : styles.textDarkColor;
const theme = lightMode ? FiestaThemes.Dark : FiestaThemes.Halloween;

const heartsRef = useRef<PopperHandler>(null);

if (!font) return null;
import { Examples } from './components/Examples';

function App() {
return (
<SafeAreaView
style={[styles.container, lightMode ? styles.lightMode : styles.darkMode]}
>
<Content
lightMode={lightMode}
setLightMode={() => setLightMode((mode) => !mode)}
/>

<View style={styles.column}>
<TouchableOpacity
onPress={() => {
setComponentToRender(<Balloons theme={theme} />);
}}
style={styles.pressable}
>
<Canvas style={styles.canvas}>
<Balloon x={50} y={50} color={'blue'} depth={0.4} />
</Canvas>
<Text style={[styles.pressableText, textColor]}>Balloons</Text>
</TouchableOpacity>

<TouchableOpacity
onPress={() => setComponentToRender(<Stars theme={theme} />)}
style={styles.pressable}
>
<Canvas style={styles.canvas}>
<Star x={25} y={30} autoplay={false} />
</Canvas>
<Text style={[styles.pressableText, textColor]}>Stars</Text>
</TouchableOpacity>

<TouchableOpacity
onPress={() => heartsRef?.current?.start()}
style={styles.pressable}
>
<Canvas style={styles.canvas}>
<Heart x={20} y={20} autoplay={false} />
</Canvas>
<Text style={[styles.pressableText, textColor]}>Hearts</Text>
</TouchableOpacity>

<TouchableOpacity
onPress={() => setComponentToRender(<Fireworks />)}
style={styles.pressable}
>
<Canvas style={styles.canvas}>
<Firework
color="rgba(255, 0, 255, 0.4)"
initialPosition={{ x: 50, y: 50 }}
fireworkRadius={300}
autoHide={false}
/>
</Canvas>
<Text style={[styles.pressableText, textColor]}>Fireworks</Text>
</TouchableOpacity>

<TouchableOpacity
onPress={() =>
setComponentToRender(
<EmojiPopper emojis={['馃コ', '馃獏', '馃帀', '馃嵒']} font={font} />
)
}
style={styles.pressable}
>
<Canvas style={styles.canvas}>
<Emoji emoji="馃帀" x={15} y={50} autoHide={false} font={font} />
</Canvas>

<Text style={[styles.pressableText, textColor]}>Emoji Popper</Text>
</TouchableOpacity>
</View>

<Hearts theme={theme} autoPlay={false} ref={heartsRef} />

{componentToRender}
<SafeAreaView style={styles.container}>
<FiestaProvider>
<Examples />
</FiestaProvider>
</SafeAreaView>
);
}
Expand All @@ -120,36 +18,6 @@ const styles = StyleSheet.create({
container: {
flex: 1,
},
darkMode: {
backgroundColor: 'black',
},
lightMode: {
backgroundColor: 'white',
},
canvas: {
height: 80,
width: 100,
},
column: {
flex: 1,
flexDirection: 'column',
paddingTop: 20,
},
pressable: {
marginHorizontal: 8,
borderBottomWidth: 1,
borderColor: 'rgba(255, 0, 255, 0.4)',
padding: 4,
alignItems: 'center',
flexDirection: 'row',
width: '100%',
},
pressableText: {
color: 'white',
fontSize: 20,
},
textLightColor: { color: 'black' },
textDarkColor: { color: 'white' },
});

export default App;
147 changes: 147 additions & 0 deletions example/src/components/Examples.tsx
View file
@@ -0,0 +1,147 @@
import React, { ReactChild, useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import {
Fireworks,
FiestaThemes,
Stars,
Balloon,
Star,
Heart,
Firework,
EmojiPopper,
Emoji,
useFiesta,
FiestaAnimations,
} from 'react-native-fiesta';
import Content from './Content';
import { Canvas, useFont } from '@shopify/react-native-skia';

export function Examples() {
const { runFiestaAnimation } = useFiesta();
const font = useFont(require('../fonts/OpenMoji-Color.ttf'), 30);
const [lightMode, setLightMode] = useState(false);
const [componentToRender, setComponentToRender] = useState<ReactChild | null>(
null
);
const textColor = lightMode ? styles.textLightColor : styles.textDarkColor;
const theme = lightMode ? FiestaThemes.Dark : FiestaThemes.Halloween;

if (!font) return null;

return (
<View
style={[styles.container, lightMode ? styles.lightMode : styles.darkMode]}
>
<Content
lightMode={lightMode}
setLightMode={() => setLightMode((mode) => !mode)}
/>

<View style={styles.column}>
{/* Example using Fiesta context */}
<TouchableOpacity
onPress={() =>
runFiestaAnimation({ animation: FiestaAnimations.Balloons })
}
style={styles.pressable}
>
<Canvas style={styles.canvas}>
<Balloon x={50} y={50} color={'blue'} depth={0.4} />
</Canvas>
<Text style={[styles.pressableText, textColor]}>Balloons</Text>
</TouchableOpacity>

{/* Example using Fiesta context */}
<TouchableOpacity
onPress={() =>
runFiestaAnimation({ animation: FiestaAnimations.Hearts })
}
style={styles.pressable}
>
<Canvas style={styles.canvas}>
<Heart x={20} y={20} autoplay={false} />
</Canvas>
<Text style={[styles.pressableText, textColor]}>Hearts</Text>
</TouchableOpacity>

<TouchableOpacity
onPress={() => setComponentToRender(<Stars theme={theme} />)}
style={styles.pressable}
>
<Canvas style={styles.canvas}>
<Star x={25} y={30} autoplay={false} />
</Canvas>
<Text style={[styles.pressableText, textColor]}>Stars</Text>
</TouchableOpacity>

<TouchableOpacity
onPress={() => setComponentToRender(<Fireworks />)}
style={styles.pressable}
>
<Canvas style={styles.canvas}>
<Firework
color="rgba(255, 0, 255, 0.4)"
initialPosition={{ x: 50, y: 50 }}
fireworkRadius={300}
autoHide={false}
/>
</Canvas>
<Text style={[styles.pressableText, textColor]}>Fireworks</Text>
</TouchableOpacity>

<TouchableOpacity
onPress={() =>
setComponentToRender(
<EmojiPopper emojis={['馃コ', '馃獏', '馃帀', '馃嵒']} font={font} />
)
}
style={styles.pressable}
>
<Canvas style={styles.canvas}>
<Emoji emoji="馃帀" x={15} y={50} autoHide={false} font={font} />
</Canvas>

<Text style={[styles.pressableText, textColor]}>Emoji Popper</Text>
</TouchableOpacity>
</View>

{componentToRender}
</View>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
},
darkMode: {
backgroundColor: 'black',
},
lightMode: {
backgroundColor: 'white',
},
canvas: {
height: 80,
width: 100,
},
column: {
flex: 1,
flexDirection: 'column',
paddingTop: 20,
},
pressable: {
marginHorizontal: 8,
borderBottomWidth: 1,
borderColor: 'rgba(255, 0, 255, 0.4)',
padding: 4,
alignItems: 'center',
flexDirection: 'row',
width: '100%',
},
pressableText: {
color: 'white',
fontSize: 20,
},
textLightColor: { color: 'black' },
textDarkColor: { color: 'white' },
});
47 changes: 25 additions & 22 deletions src/components/Balloons.tsx
View file
@@ -1,6 +1,6 @@
import React from 'react';
import React, { forwardRef } from 'react';
import { Balloon } from './Balloon';
import { Popper, PopperProps } from './Popper';
import { Popper, PopperHandler, PopperProps } from './Popper';
import { screenWidth } from '../constants/dimensions';
import { getBalloonsYPositions } from '../utils/balloons';

Expand All @@ -15,23 +15,26 @@ const balloonsYPositions = getBalloonsYPositions(

export interface BalloonsProps extends Omit<PopperProps, 'renderItem'> {}

export function Balloons({ spacing = SPACING, ...props }: BalloonsProps) {
return (
<Popper
spacing={spacing}
renderItem={({ x, colors }, index) => (
<Balloon
key={index}
x={x}
y={balloonsYPositions[index]}
color={colors[index]}
r={40}
depth={
possibleDepths[Math.floor(Math.random() * possibleDepths.length)]
}
/>
)}
{...props}
/>
);
}
export const Balloons = forwardRef<PopperHandler, BalloonsProps>(
({ spacing = SPACING, ...props }: BalloonsProps, ref) => {
return (
<Popper
spacing={spacing}
renderItem={({ x, colors }, index) => (
<Balloon
key={index}
x={x}
y={balloonsYPositions[index]}
color={colors[index]}
r={40}
depth={
possibleDepths[Math.floor(Math.random() * possibleDepths.length)]
}
/>
)}
{...props}
ref={ref}
/>
);
}
);

0 comments on commit 0a8c951

Please sign in to comment.