feat: update sample app and new features (#35)

* feat: update sample app and new features

* chore: update doc

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
-examples/package-lock.json
+examples/package-lock.json
+app/node_modules/

.npmignore

@@ -1,3 +1,3 @@
-examples/node_modules
-examples/
+app/node_modules
+app/
 screenshots/

README.md

@@ -1,35 +1,56 @@
 # react-native-gesture-flip-card
-[![npm version](https://badge.fury.io/js/react-native-gesture-flip-card.svg)](https://badge.fury.io/js/react-native-gesture-flip-card)
 
+[![npm version](https://badge.fury.io/js/react-native-gesture-flip-card.svg)](https://badge.fury.io/js/react-native-gesture-flip-card)
 
 A pure javascript implementation of a flip card animation using gesture for React Native.
 
+## 2024-11-10
+
+1. Create a new example app `app` and remove the old `example`
+2. (Breaking change) `renderBack` and `renderFront` are passing through props instenad of passing by children.
+3. (new) Add a argument in `onFlipEnd` function, it will return a boolean value(1: front and 0 for back) when the flip animation ended.
+4. (new) Add a new props: `onFaceChanged` function, it will retrun a boolean value(1: front and 0 for back) when the face is changed.
+
+## 2022-03-16
 
-### 2022-03-16
 1. Update example to use react-native 0.67.3
 2. Use `LogBox` to ignore unnecessary warnings. (To use `LogBox` you need to upgrade react-native to at least 0.63 )
 
 ## Installation
 
-```
+``` bash
   npm install --save react-native-gesture-flip-card
+  # or
+  yarn add react-native-gesture-flip-card
 ```
 
 ## Simple Preview
+
 ![App preview](/screenshots/example_1.gif)
 ![App preview](/screenshots/example_2.gif)
 
 ## Minimal Usage
+
 ```javascript
 import GestureFlipView from 'react-native-gesture-flip-card';
 ```
 
-```javascript
+```jsx
 <View style={styles.container}>
-  <GestureFlipView width={300} height={500}>
-    {renderBack()}
-    {renderFront()}
-    </GestureFlipView>
+  <GestureFlipView
+    width={300}
+    height={500}
+    renderBack={renderBack}
+    renderFront={renderFront}
+    onFaceChanged={(face) => {
+      // trigger when card face changed
+      console.log('face changed:', face);
+    }}
+    onFlipEnd={(face) => {
+      // trigger when flip animation ended
+      console.log('on flip end:', face);
+    }}
+  />
 </View>
 
 const renderFront = () => {
@@ -49,33 +70,33 @@ const renderBack = () => {
 };
 ```
 
-# Detail
+## Detail
+
+### Props
 
-## Props
 | Props               | type          | description                     | required      | default       |
 | --------------------| ------------- | --------------------------------| ------------- | ------------- |
 | width               | number        | width of view                   |  true         |               |
 | height              | number        | height of view                  |  true         |               |
 | onFlipEnd           | function      | callback on end of flip         |  false        |               |
 | perspective         | number        | perspective of the view         |  false        | -1000         |
 | gestureEnabled      | bool          | enable or disable gestures      |  false        | true          |
+| onFaceChanged       | function      | callback on face changed        |  false        |               |
+
+### Method
 
-## Method
 | name                | description                     | args                   |
 | --------------------| --------------------------------| ---------------------  |
 | flipLeft            | flip the card counterclockwise  |                        |
 | flipRight           | flip the card clockwise         |                        |
 
-```javascript
+```jsx
 <GestureFlipView
   ref={(ref) => (viewRef.current = ref)}
-  gestureEnabled={enable}
-  width={300}
-  height={500}>
-  {renderBack()}
-  {renderFront()} />
-```
-```javascript
+  {...} // skip showing other props
+/>
+
+// usage
 viewRef.current.flipLeft();  // counterclockwise
 viewRef.current.flipRight(); // clockwise
 ```

app/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@react-native',
+};

example/.gitignore → app/.gitignore

@@ -20,6 +20,7 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
+**/.xcode.env.local
 
 # Android/IntelliJ
 #
@@ -29,32 +30,45 @@ build/
 local.properties
 *.iml
 *.hprof
+.cxx/
+*.keystore
+!debug.keystore
 
 # node.js
 #
 node_modules/
 npm-debug.log
 yarn-error.log
 
-# BUCK
-buck-out/
-\.buckd/
-*.keystore
-!debug.keystore
-
 # fastlane
 #
 # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
 # screenshots whenever they are needed.
 # For more information about the recommended setup visit:
 # https://docs.fastlane.tools/best-practices/source-control/
 
-*/fastlane/report.xml
-*/fastlane/Preview.html
-*/fastlane/screenshots
+**/fastlane/report.xml
+**/fastlane/Preview.html
+**/fastlane/screenshots
+**/fastlane/test_output
 
 # Bundle artifact
 *.jsbundle
 
-# CocoaPods
-/ios/Pods/
+# Ruby / CocoaPods
+**/Pods/
+/vendor/bundle/
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+
+# testing
+/coverage
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

example/.prettierrc.js → app/.prettierrc.js

@@ -1,7 +1,7 @@
 module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
   bracketSpacing: false,
-  jsxBracketSameLine: true,
   singleQuote: true,
   trailingComma: 'all',
-  arrowParens: 'avoid',
 };

app/.watchmanconfig

@@ -0,0 +1 @@
+{}

app/App.js

@@ -0,0 +1,84 @@
+/* eslint-disable react-native/no-inline-styles */
+import React from 'react';
+import GestureFlipView from './src/GestureFlipView';
+import {
+  StatusBar,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+} from 'react-native';
+
+function App() {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? '#222' : '#fafafa',
+  };
+
+  const renderFront = () => {
+    return (
+      <View style={styles.frontStyle}>
+        <Text style={{ fontSize: 25, color: '#fff' }}>{'Front'}</Text>
+      </View>
+    );
+  };
+
+  const renderBack = () => {
+    return (
+      <View style={styles.backStyle}>
+        <Text style={{ fontSize: 25, color: '#fff' }}>{'Back'}</Text>
+      </View>
+    );
+  };
+
+  return (
+    <View style={{ ...styles.container, ...backgroundStyle }}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <GestureFlipView
+        width={300}
+        height={500}
+        renderBack={renderBack}
+        renderFront={renderFront}
+        onFaceChanged={(face) => {
+          // trigger when card face changed
+          console.log('face changed:', face);
+        }}
+        onFlipEnd={(face) => {
+          // trigger when flip animation ended
+          console.log('on flip end:', face);
+        }}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  frontStyle: {
+    width: 300,
+    height: 500,
+    backgroundColor: '#f00',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 20,
+  },
+  backStyle: {
+    width: 300,
+    height: 500,
+    backgroundColor: '#f0f',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 20,
+  },
+});
+
+export default App;

app/Gemfile

@@ -0,0 +1,9 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby ">= 2.6.10"
+
+# Exclude problematic versions of cocoapods and activesupport that causes build failures.
+gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+gem 'xcodeproj', '< 1.26.0'

app/README.md

@@ -0,0 +1,79 @@
+This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
+
+# Getting Started
+
+>**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding.
+
+## Step 1: Start the Metro Server
+
+First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.
+
+To start Metro, run the following command from the _root_ of your React Native project:
+
+```bash
+# using npm
+npm start
+
+# OR using Yarn
+yarn start
+```
+
+## Step 2: Start your Application
+
+Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:
+
+### For Android
+
+```bash
+# using npm
+npm run android
+
+# OR using Yarn
+yarn android
+```
+
+### For iOS
+
+```bash
+# using npm
+npm run ios
+
+# OR using Yarn
+yarn ios
+```
+
+If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly.
+
+This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.
+
+## Step 3: Modifying your App
+
+Now that you have successfully run the app, let's modify it.
+
+1. Open `App.tsx` in your text editor of choice and edit some lines.
+2. For **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Developer Menu** (<kbd>Ctrl</kbd> + <kbd>M</kbd> (on Window and Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (on macOS)) to see your changes!
+
+   For **iOS**: Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes!
+
+## Congratulations! :tada:
+
+You've successfully run and modified your React Native App. :partying_face:
+
+### Now what?
+
+- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
+- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started).
+
+# Troubleshooting
+
+If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
+
+# Learn More
+
+To learn more about React Native, take a look at the following resources:
+
+- [React Native Website](https://reactnative.dev) - learn more about React Native.
+- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
+- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
+- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
+- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.

example/__tests__/App-test.js → app/__tests__/App.test.tsx

@@ -6,6 +6,9 @@ import 'react-native';
 import React from 'react';
 import App from '../App';
 
+// Note: import explicitly to use the types shipped with jest.
+import {it} from '@jest/globals';
+
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';