From 33685fe832d48996d28d48d9c062c8988338feb6 Mon Sep 17 00:00:00 2001 From: Jakub Grzywacz Date: Tue, 20 Jul 2021 11:47:44 +0200 Subject: [PATCH] chore: create extended examples --- example/ios/Podfile.lock | 58 ++++++++ example/package.json | 7 + example/src/App.tsx | 58 +++----- example/src/Basic/Basic.tsx | 43 ++++++ example/src/Dark/Dark.tsx | 63 +++++++++ example/src/Examples/Examples.tsx | 24 ++++ example/yarn.lock | 213 ++++++++++++++++++++++++++++-- 7 files changed, 415 insertions(+), 51 deletions(-) create mode 100644 example/src/Basic/Basic.tsx create mode 100644 example/src/Dark/Dark.tsx create mode 100644 example/src/Examples/Examples.tsx diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index 11b36ad..f0b82c9 100644 --- a/example/ios/Podfile.lock +++ b/example/ios/Podfile.lock @@ -237,6 +237,8 @@ PODS: - React-cxxreact (= 0.63.4) - React-jsi (= 0.63.4) - React-jsinspector (0.63.4) + - react-native-safe-area-context (3.2.0): + - React-Core - React-RCTActionSheet (0.63.4): - React-Core/RCTActionSheetHeaders (= 0.63.4) - React-RCTAnimation (0.63.4): @@ -297,6 +299,42 @@ PODS: - React-Core (= 0.63.4) - React-cxxreact (= 0.63.4) - React-jsi (= 0.63.4) + - RNCMaskedView (0.1.11): + - React + - RNGestureHandler (1.10.3): + - React-Core + - RNReanimated (2.2.0): + - DoubleConversion + - FBLazyVector + - FBReactNativeSpec + - Folly + - glog + - RCTRequired + - RCTTypeSafety + - React + - React-callinvoker + - React-Core + - React-Core/DevSupport + - React-Core/RCTWebSocket + - React-CoreModules + - React-cxxreact + - React-jsi + - React-jsiexecutor + - React-jsinspector + - React-RCTActionSheet + - React-RCTAnimation + - React-RCTBlob + - React-RCTImage + - React-RCTLinking + - React-RCTNetwork + - React-RCTSettings + - React-RCTText + - React-RCTVibration + - ReactCommon/turbomodule/core + - Yoga + - RNScreens (3.4.0): + - React-Core + - React-RCTImage - RNSVG (12.1.1): - React - Yoga (1.14.0) @@ -340,6 +378,7 @@ DEPENDENCIES: - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`) - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`) - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`) + - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`) - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`) - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`) - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`) @@ -350,6 +389,10 @@ DEPENDENCIES: - React-RCTText (from `../node_modules/react-native/Libraries/Text`) - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`) - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) + - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)" + - RNGestureHandler (from `../node_modules/react-native-gesture-handler`) + - RNReanimated (from `../node_modules/react-native-reanimated`) + - RNScreens (from `../node_modules/react-native-screens`) - RNSVG (from `../node_modules/react-native-svg`) - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) @@ -401,6 +444,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon/jsiexecutor" React-jsinspector: :path: "../node_modules/react-native/ReactCommon/jsinspector" + react-native-safe-area-context: + :path: "../node_modules/react-native-safe-area-context" React-RCTActionSheet: :path: "../node_modules/react-native/Libraries/ActionSheetIOS" React-RCTAnimation: @@ -421,6 +466,14 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/Libraries/Vibration" ReactCommon: :path: "../node_modules/react-native/ReactCommon" + RNCMaskedView: + :path: "../node_modules/@react-native-community/masked-view" + RNGestureHandler: + :path: "../node_modules/react-native-gesture-handler" + RNReanimated: + :path: "../node_modules/react-native-reanimated" + RNScreens: + :path: "../node_modules/react-native-screens" RNSVG: :path: "../node_modules/react-native-svg" Yoga: @@ -455,6 +508,7 @@ SPEC CHECKSUMS: React-jsi: a0418934cf48f25b485631deb27c64dc40fb4c31 React-jsiexecutor: 93bd528844ad21dc07aab1c67cb10abae6df6949 React-jsinspector: 58aef7155bc9a9683f5b60b35eccea8722a4f53a + react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79 React-RCTActionSheet: 89a0ca9f4a06c1f93c26067af074ccdce0f40336 React-RCTAnimation: 1bde3ecc0c104c55df246eda516e0deb03c4e49b React-RCTBlob: a97d378b527740cc667e03ebfa183a75231ab0f0 @@ -465,6 +519,10 @@ SPEC CHECKSUMS: React-RCTText: 5c51df3f08cb9dedc6e790161195d12bac06101c React-RCTVibration: ae4f914cfe8de7d4de95ae1ea6cc8f6315d73d9d ReactCommon: 73d79c7039f473b76db6ff7c6b159c478acbbb3b + RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489 + RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211 + RNReanimated: d9da990fc90123f4ffbfdda93d00fc15174863a8 + RNScreens: 21b73c94c9117e1110a79ee0ee80c93ccefed8ce RNSVG: 551acb6562324b1d52a4e0758f7ca0ec234e278f Yoga: 4bd86afe9883422a7c4028c00e34790f560923d6 YogaKit: f782866e155069a2cca2517aafea43200b01fd5a diff --git a/example/package.json b/example/package.json index 271e07c..1d29866 100644 --- a/example/package.json +++ b/example/package.json @@ -9,8 +9,15 @@ "start": "react-native start" }, "dependencies": { + "@react-native-community/masked-view": "^0.1.11", + "@react-navigation/native": "^5.9.4", + "@react-navigation/stack": "^5.14.5", "react": "16.13.1", "react-native": "0.63.4", + "react-native-gesture-handler": "^1.10.3", + "react-native-reanimated": "^2.2.0", + "react-native-safe-area-context": "^3.2.0", + "react-native-screens": "^3.4.0", "react-native-svg": "^12.1.1" }, "devDependencies": { diff --git a/example/src/App.tsx b/example/src/App.tsx index f740e3e..4ce0e2e 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -1,46 +1,20 @@ +import 'react-native-gesture-handler'; import * as React from 'react'; +import { NavigationContainer } from '@react-navigation/native'; +import { createStackNavigator } from '@react-navigation/stack'; +import Examples from './Examples/Examples'; +import Basic from './Basic/Basic'; +import Dark from './Dark/Dark'; -import { StyleSheet, Text, SafeAreaView, TouchableOpacity } from 'react-native'; -import EmojiPicker from 'rn-emoji-keyboard'; -import type { EmojiType } from 'lib/typescript/types'; - -export default function App() { - const [result, setResult] = React.useState(); - const [isModalOpen, setIsModalOpen] = React.useState(false); - - const handlePick = (emoji: EmojiType) => { - console.log(emoji); - setResult(emoji.emoji); - setIsModalOpen((prev) => !prev); - }; - +const Stack = createStackNavigator(); +export default () => { return ( - - Result: {result} - setIsModalOpen(true)}> - Open - - - {/* //////////////////////////////////////////// */} - - setIsModalOpen(false)} - /> - - {/* //////////////////////////////////////////// */} - + + + + + + + ); -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - }, - text: { - textAlign: 'center', - margin: 64, - fontSize: 18, - }, -}); +}; diff --git a/example/src/Basic/Basic.tsx b/example/src/Basic/Basic.tsx new file mode 100644 index 0000000..198f860 --- /dev/null +++ b/example/src/Basic/Basic.tsx @@ -0,0 +1,43 @@ +import * as React from 'react'; +import { StyleSheet, Text, TouchableOpacity } from 'react-native'; +import { SafeAreaView } from 'react-native-safe-area-context'; +import EmojiPicker from 'rn-emoji-keyboard'; +import type { EmojiType } from 'src/types'; + +const Basic = () => { + const [result, setResult] = React.useState(); + const [isModalOpen, setIsModalOpen] = React.useState(false); + + const handlePick = (emoji: EmojiType) => { + console.log(emoji); + setResult(emoji.emoji); + setIsModalOpen((prev) => !prev); + }; + return ( + + Result: {result} + setIsModalOpen(true)}> + Open + + + setIsModalOpen(false)} + /> + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + text: { + textAlign: 'center', + margin: 64, + fontSize: 18, + }, +}); + +export default Basic; diff --git a/example/src/Dark/Dark.tsx b/example/src/Dark/Dark.tsx new file mode 100644 index 0000000..a122a81 --- /dev/null +++ b/example/src/Dark/Dark.tsx @@ -0,0 +1,63 @@ +import * as React from 'react'; +import { StyleSheet, Text, TouchableOpacity } from 'react-native'; +import { SafeAreaView } from 'react-native-safe-area-context'; +import EmojiPicker from 'rn-emoji-keyboard'; +import type { EmojiType } from 'src/types'; + +const Dark = () => { + const [result, setResult] = React.useState(); + const [isModalOpen, setIsModalOpen] = React.useState(false); + + const handlePick = (emoji: EmojiType) => { + console.log(emoji); + setResult(emoji.emoji); + setIsModalOpen((prev) => !prev); + }; + return ( + + Result: {result} + setIsModalOpen(true)}> + Open + + + setIsModalOpen(false)} + backdropColor="#16161888" + categoryContainerColor="#252427" + categoryColor="#766dfc" + activeCategoryColor="#fff" + activeCategoryContainerColor="#766dfc" + knobStyles={styles.knobStyles} + containerStyles={styles.containerStyles} + headerStyles={styles.headerStyles} + /> + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#161618', + }, + text: { + textAlign: 'center', + margin: 64, + fontSize: 18, + color: '#fff', + }, + knobStyles: { + backgroundColor: '#766dfc', + }, + containerStyles: { + backgroundColor: '#282829', + }, + headerStyles: { + color: '#fff', + fontSize: 16, + }, +}); + +export default Dark; diff --git a/example/src/Examples/Examples.tsx b/example/src/Examples/Examples.tsx new file mode 100644 index 0000000..c03d292 --- /dev/null +++ b/example/src/Examples/Examples.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; +import { View, Button } from 'react-native'; +import { SafeAreaView } from 'react-native-safe-area-context'; +import type { StackScreenProps } from '@react-navigation/stack'; + +type RootStackParamList = { + Examples: undefined; + Basic: undefined; + Dark: undefined; +}; + +type Props = StackScreenProps; + +const Examples = ({ navigation }: Props) => { + return ( + + +