Fix ripple (#62)

* new example

* fix ripple not appearing

* fix example name

Author: vonovak

example/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "f9155ac790fd02fadcdeca367b02581c04a353aa6d5aa84409a59f6804c87acd": true,
+  "89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44": true
+}

example/.expo/packager-info.json

@@ -1,10 +1,9 @@
 {
   "devToolsPort": 19002,
-  "expoServerPort": null,
-  "packagerPort": null,
-  "packagerPid": null,
-  "expoServerNgrokUrl": null,
-  "packagerNgrokUrl": null,
-  "ngrokPid": null,
-  "webpackServerPort": null
-}
+  "expoServerPort": 19000,
+  "packagerPort": 19001,
+  "packagerPid": 5200,
+  "expoServerNgrokUrl": "https://up-n7i.cedule.example.exp.direct",
+  "packagerNgrokUrl": "https://packager.up-n7i.cedule.example.exp.direct",
+  "ngrokPid": 5238
+}

example/.expo/settings.json

@@ -3,5 +3,6 @@
   "lanType": "ip",
   "dev": true,
   "minify": false,
-  "urlRandomness": "rh-h82"
-}
+  "urlRandomness": "up-n7i",
+  "https": false
+}

example/.gitignore

@@ -2,9 +2,13 @@ node_modules/**/*
 .expo/*
 npm-debug.*
 *.jks
+*.p8
 *.p12
 *.key
 *.mobileprovision
 *.orig.*
 web-build/
 web-report/
+
+# macOS
+.DS_Store

example/.watchmanconfig

@@ -10,8 +10,10 @@ import {
   UsageWithCustomOverflow,
   UsageWithCustomOverflow2,
 } from './screens';
-import { createStackNavigator, createAppContainer } from 'react-navigation';
 import React from 'react';
+import { createAppContainer } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
+
 
 // just for custom overflow menu onPress action
 import { ActionSheetProvider } from '@expo/react-native-action-sheet';

example/App.tsx

@@ -3,10 +3,7 @@
     "name": "navbar-buttons-demo",
     "slug": "navbar-buttons-demo",
     "privacy": "public",
-    "sdkVersion": "33.0.0",
-    "packagerOpts": {
-      "config": "./metro.config.js"
-    },
+    "sdkVersion": "36.0.0",
     "platforms": ["ios", "android", "web"],
     "version": "1.0.0",
     "orientation": "portrait",

example/app.json

@@ -5,25 +5,36 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
-    "eject": "expo eject"
+    "eject": "expo eject",
+    "prepare": "relative-deps"
+  },
+  "relativeDependencies": {
+    "react-navigation-header-buttons": "../"
   },
   "dependencies": {
-    "@babel/runtime": "^7.4.5",
-    "@expo/react-native-action-sheet": "^2.1.0",
-    "expo": "^33.0.0",
-    "react": "16.8.3",
-    "react-dom": "^16.8.6",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
-    "react-native-paper": "^2.16.0",
-    "react-native-platform-touchable": "^1.1.1",
-    "react-native-web": "^0.11.4",
-    "react-navigation": "^3.11.0"
+    "@expo/react-native-action-sheet": "^3.4.1",
+    "@react-native-community/masked-view": "^0.1.6",
+    "expo": "~36.0.0",
+    "react": "~16.9.0",
+    "react-dom": "~16.9.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
+    "react-native-gesture-handler": "~1.5.0",
+    "react-native-paper": "^3.4.0",
+    "react-native-reanimated": "~1.4.0",
+    "react-native-safe-area-context": "^0.6.2",
+    "react-native-screens": "2.0.0-alpha.12",
+    "react-native-web": "~0.11.7",
+    "react-navigation": "^4.0.10",
+    "react-navigation-header-buttons": "^3.0.4",
+    "react-navigation-stack": "^2.0.15"
   },
   "devDependencies": {
-    "@types/react": "^16.8.19",
-    "@types/react-native": "^0.57.60",
-    "babel-preset-expo": "^5.1.1",
-    "typescript": "^3.4.5"
+    "@babel/core": "^7.0.0",
+    "@types/react": "~16.9.0",
+    "@types/react-native": "~0.60.23",
+    "babel-preset-expo": "~8.0.0",
+    "relative-deps": "^1.0.0",
+    "typescript": "~3.6.3"
   },
   "private": true
 }

example/metro.config.js

@@ -6,7 +6,7 @@ import ScreenProps from './index';
 export class UsageCustom extends React.Component<ScreenProps> {
   static navigationOptions = {
     title: 'Custom',
-    headerRight: (
+    headerRight: () => (
       <HeaderButtons>
         <Item
           title="shifted"

example/package.json

@@ -44,7 +44,7 @@ class RightHeaderButtons extends React.Component {
 export class UsageWithCustomOverflow extends React.Component<ScreenProps> {
   static navigationOptions = ({ navigation }) => ({
     title: 'Custom Overflow',
-    headerRight: <RightHeaderButtons />,
+    headerRight: () => <RightHeaderButtons />,
   });
 
   render() {

example/screens/UsageCustom.tsx

@@ -18,7 +18,7 @@ const DisableableHeaderButton = props => (
 export class UsageCustomRipple extends React.Component<ScreenProps> {
   static navigationOptions = {
     title: 'Ripple',
-    headerRight: (
+    headerRight: () => (
       <HeaderButtons HeaderButtonComponent={DisableableHeaderButton}>
         <Item title="search" iconName="ios-search" onPress={() => alert('search')} />
         <Item title="select" onPress={() => alert('select')} />

example/screens/UsageCustomOverflow.tsx

@@ -11,7 +11,7 @@ const MultiFontFamilyHeaderButton = props => (
 export class UsageDifferentFontFamilies extends React.Component<ScreenProps> {
   static navigationOptions = {
     title: 'Font families',
-    headerRight: (
+    headerRight: () => (
       <HeaderButtons HeaderButtonComponent={MultiFontFamilyHeaderButton}>
         <Item
           title="settings-ion"

example/screens/UsageCustomRipple.tsx

@@ -18,7 +18,7 @@ const DisableableHeaderButton = props => (
 export class UsageDisabled extends React.Component<ScreenProps> {
   static navigationOptions = {
     title: 'Disableable',
-    headerRight: (
+    headerRight: () => (
       <HeaderButtons HeaderButtonComponent={DisableableHeaderButton}>
         <Item title="search" iconName="ios-search" onPress={() => alert('search')} disabled />
         <Item title="select" onPress={() => alert('select')} />

example/screens/UsageDifferentFontFamilies.tsx

@@ -12,7 +12,7 @@ const MaterialHeaderButton = props => (
 export class UsageLeft extends React.Component<ScreenProps> {
   static navigationOptions = ({ navigation, navigation: { state } }) => ({
     title: 'Usage Left',
-    headerLeft: (
+    headerLeft: () => (
       <HeaderButtons left HeaderButtonComponent={MaterialHeaderButton}>
         <Item
           title="Test"
@@ -21,7 +21,7 @@ export class UsageLeft extends React.Component<ScreenProps> {
         />
       </HeaderButtons>
     ),
-    headerRight: (
+    headerRight: () => (
       <HeaderButtons HeaderButtonComponent={MaterialHeaderButton}>
         <Item title="back" onPress={() => navigation.goBack()} />
       </HeaderButtons>

example/screens/UsageDisabled.tsx

@@ -13,7 +13,7 @@ const IoniconsHeaderButton = props => (
 export class UsageWithIcons extends React.Component<ScreenProps> {
   static navigationOptions = {
     title: 'Vector Icons',
-    headerRight: (
+    headerRight: () => (
       <HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
         {/* use Item or HeaderButtons.Item */}
         <Item title="search" iconName="ios-search" onPress={() => alert('search')} />

example/screens/UsageLeft.tsx

@@ -17,7 +17,7 @@ const MaterialHeaderButton = props => (
 export class UsageWithOverflow extends React.Component<ScreenProps> {
   static navigationOptions = {
     title: 'Usage With Overflow',
-    headerRight: (
+    headerRight: () => (
       <HeaderButtons
         HeaderButtonComponent={MaterialHeaderButton}
         OverflowIcon={<MaterialIcons name="more-vert" size={23} color="blue" />}

example/screens/UsageWithIcons.tsx

@@ -1,10 +1,11 @@
 {
   "compilerOptions": {
-    "noEmit": true,
-    "lib": ["dom", "esnext"],
+    "allowSyntheticDefaultImports": true,
     "jsx": "react-native",
+    "lib": ["dom", "esnext"],
     "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true,
-    "skipLibCheck": true
+    "noEmit": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true
   }
 }