Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
alantoa committed Jan 7, 2023
1 parent 92bab2c commit 7a30101
Show file tree
Hide file tree
Showing 19 changed files with 1,015 additions and 417 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ class UniversalTooltipView(context: Context, appContext: AppContext) :
.setArrowPosition(0.5f)
.setArrowOrientation(arrowOrientation)
.setPaddingBottom(pdBottom)
.setPaddingTop(pdTop)
.setPaddingTop(pdTop)
.setPaddingLeft(pdLeft)
.setPaddingRight(pdRight)
.setCornerRadius(borderRadius)
Expand Down
133 changes: 95 additions & 38 deletions example/App.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,39 @@
import { useState } from "react";
import * as Tooltip from "universal-tooltip";
import { StyleSheet, Text, View, Pressable, Platform } from "react-native";

import {
StyleSheet,
Text,
View,
Pressable,
Platform,
StatusBar,
} from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Ionicons from "@expo/vector-icons/Ionicons";
import { BottomTabbar } from "./src/navigation/bottom-tab-bar";
import {
TabBarHomeIcon,
TabBarLikeIcon,
TabBarProfileIcon,
TabBarSearchIcon,
} from "./src/navigation/tab-bar-icon";
StatusBar.setBarStyle("light-content");
const Tab = createBottomTabNavigator();
const TriggerView = Platform.OS === "web" ? View : Pressable;

export default function App() {
function HomeScreen() {
const [open, setOpen] = useState(false);
return (
<View style={styles.container}>
<Tooltip.Root
<View className="flex-1 items-center justify-center bg-black">
{/* <Tooltip.Root
{...Platform.select({
web: {},
default: {
open,
onDismiss: () => {
console.log("onDismiss");
console.log("onDismiss HomeScreen");
setOpen(false);
},
},
Expand All @@ -31,9 +50,8 @@ export default function App() {
},
},
})}
style={styles.button}
>
<Text style={styles.text}>Hello!👋</Text>
<Text>Hello!👋</Text>
</TriggerView>
</Tooltip.Trigger>
<Tooltip.Content
Expand All @@ -58,38 +76,77 @@ export default function App() {
textColor="#fff"
text="Tooltip"
/>
</Tooltip.Root>
</Tooltip.Root> */}
</View>
);
}
function SearchScreen() {
return (
<View className="flex-1 items-center justify-center bg-black">
<Text>Settings!</Text>
</View>
);
}
function LikeScreen() {
return (
<View className="flex-1 items-center justify-center bg-black">
<Text>Settings!</Text>
</View>
);
}
function ProfileScreen() {
return (
<View className="flex-1 items-center justify-center bg-black">
<Text>Settings!</Text>
</View>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#e1e1e1",
alignItems: "center",
justifyContent: "center",
height: 700,
},
root: {},
button: {
backgroundColor: "#333",
borderRadius: 24,
alignItems: "center",
justifyContent: "center",
paddingHorizontal: 20,
paddingVertical: 8,
},
text: {
color: "#fff",
},
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={{
headerBackgroundContainerStyle: {
backgroundColor: "#000",
},
headerBackground: () => {
return null;
},
headerTintColor: "#fff",
}}
tabBar={(props) => <BottomTabbar {...props} />}
>
<Tab.Screen
name="Feed"
options={{
tabBarIcon: TabBarHomeIcon,
}}
component={HomeScreen}
/>
<Tab.Screen
name="Search"
options={{
tabBarIcon: TabBarSearchIcon,
}}
component={SearchScreen}
/>
<Tab.Screen
name="Like"
options={{
tabBarIcon: TabBarLikeIcon,
}}
component={LikeScreen}
/>

option: {
position: "absolute",
bottom: 100,
backgroundColor: "#333",
borderRadius: 20,
paddingVertical: 4,
paddingHorizontal: 10,
},
});
<Tab.Screen
name="Profile"
options={{
tabBarIcon: TabBarProfileIcon,
}}
component={ProfileScreen}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
118 changes: 118 additions & 0 deletions example/App.web.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
import { useState } from "react";
import * as Tooltip from "universal-tooltip";
import {
StyleSheet,
Text,
View,
Pressable,
Platform,
StatusBar,
} from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Ionicons from "@expo/vector-icons/Ionicons";
import { BottomTabbar } from "./src/navigation/bottom-tab-bar";
import {
TabBarHomeIcon,
TabBarLikeIcon,
TabBarProfileIcon,
TabBarSearchIcon,
} from "./src/navigation/tab-bar-icon";
import "./dist/output.css";
StatusBar.setBarStyle("light-content");

const Tab = createBottomTabNavigator();
const TriggerView = Platform.OS === "web" ? View : Pressable;

function HomeScreen() {
const [open, setOpen] = useState(false);
return (
<View className="flex-1 items-center justify-center bg-black">
{/* <Tooltip.Root
{...Platform.select({
web: {},
default: {
open,
onDismiss: () => {
console.log("onDismiss HomeScreen");
setOpen(false);
},
},
})}
>
<Tooltip.Trigger>
<TriggerView
{...Platform.select({
web: {},
default: {
open,
onPress: () => {
setOpen(true);
},
},
})}
>
<Text>Hello!👋</Text>
</TriggerView>
</Tooltip.Trigger>
<Tooltip.Content
sideOffset={3}
containerStyle={{
paddingLeft: 16,
paddingRight: 16,
paddingTop: 8,
paddingBottom: 8,
}}
onTap={() => {
console.log("onTap");
}}
dismissDuration={500}
disableTapToDismiss
side="right"
presetAnimation="fadeIn"
textSize={16}
backgroundColor="black"
fontWeight="bold"
borderRadius={999}
textColor="#fff"
text="Tooltip"
/>
</Tooltip.Root> */}
</View>
);
}
function SearchScreen() {
return (
<View className="flex-1 items-center justify-center bg-black">
<Text>Settings!</Text>
</View>
);
}
function LikeScreen() {
return (
<View className="flex-1 items-center justify-center bg-black">
<Text>Settings!</Text>
</View>
);
}
function ProfileScreen() {
return (
<View className="flex-1 items-center justify-center bg-black">
<Text>Settings!</Text>
</View>
);
}

export default function App() {
return (
<div className="flex flex-row w-full justify-end items-center">
<div className="flex-row">
<TabBarHomeIcon />
<TabBarSearchIcon />
<TabBarLikeIcon />
<TabBarProfileIcon />
</div>
</div>
);
}
11 changes: 6 additions & 5 deletions example/babel.config.js
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
const path = require('path');
const path = require("path");
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
presets: ["babel-preset-expo"],
plugins: [
[
'module-resolver',
"module-resolver",
{
extensions: ['.tsx', '.ts', '.js', '.json'],
extensions: [".tsx", ".ts", ".js", ".json"],
alias: {
// For development, we want to alias the library to the source
'universal-tooltip': path.join(__dirname, '..', 'src', 'index.ts'),
"universal-tooltip": path.join(__dirname, "..", "src", "index.ts"),
},
},
],
"nativewind/babel",
],
};
};
21 changes: 19 additions & 2 deletions example/ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -235,6 +235,12 @@ PODS:
- React-jsinspector (0.70.5)
- React-logger (0.70.5):
- glog
- react-native-safe-area-context (4.4.1):
- RCT-Folly
- RCTRequired
- RCTTypeSafety
- React-Core
- ReactCommon/turbomodule/core
- React-perflogger (0.70.5)
- React-RCTActionSheet (0.70.5):
- React-Core/RCTActionSheetHeaders (= 0.70.5)
Expand Down Expand Up @@ -301,7 +307,10 @@ PODS:
- React-jsi (= 0.70.5)
- React-logger (= 0.70.5)
- React-perflogger (= 0.70.5)
- UniversalTooltip (0.1.0):
- RNScreens (3.18.2):
- React-Core
- React-RCTImage
- UniversalTooltip (0.1.9):
- ExpoModulesCore
- Yoga (1.14.0)

Expand Down Expand Up @@ -333,6 +342,7 @@ DEPENDENCIES:
- React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
- React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
- React-logger (from `../node_modules/react-native/ReactCommon/logger`)
- react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
- React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
- React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
- React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
Expand All @@ -345,6 +355,7 @@ DEPENDENCIES:
- React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
- React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
- ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
- RNScreens (from `../node_modules/react-native-screens`)
- UniversalTooltip (from `../../ios`)
- Yoga (from `../node_modules/react-native/ReactCommon/yoga`)

Expand Down Expand Up @@ -405,6 +416,8 @@ EXTERNAL SOURCES:
:path: "../node_modules/react-native/ReactCommon/jsinspector"
React-logger:
:path: "../node_modules/react-native/ReactCommon/logger"
react-native-safe-area-context:
:path: "../node_modules/react-native-safe-area-context"
React-perflogger:
:path: "../node_modules/react-native/ReactCommon/reactperflogger"
React-RCTActionSheet:
Expand All @@ -429,6 +442,8 @@ EXTERNAL SOURCES:
:path: "../node_modules/react-native/ReactCommon/runtimeexecutor"
ReactCommon:
:path: "../node_modules/react-native/ReactCommon"
RNScreens:
:path: "../node_modules/react-native-screens"
UniversalTooltip:
:path: "../../ios"
Yoga:
Expand Down Expand Up @@ -462,6 +477,7 @@ SPEC CHECKSUMS:
React-jsiexecutor: 31564fa6912459921568e8b0e49024285a4d584b
React-jsinspector: badd81696361249893a80477983e697aab3c1a34
React-logger: fdda34dd285bdb0232e059b19d9606fa0ec3bb9c
react-native-safe-area-context: 99b24a0c5acd0d5dcac2b1a7f18c49ea317be99a
React-perflogger: e68d3795cf5d247a0379735cbac7309adf2fb931
React-RCTActionSheet: 05452c3b281edb27850253db13ecd4c5a65bc247
React-RCTAnimation: 578eebac706428e68466118e84aeacf3a282b4da
Expand All @@ -474,7 +490,8 @@ SPEC CHECKSUMS:
React-RCTVibration: 8e5c8c5d17af641f306d7380d8d0fe9b3c142c48
React-runtimeexecutor: 7401c4a40f8728fd89df4a56104541b760876117
ReactCommon: c9246996e73bf75a2c6c3ff15f1e16707cdc2da9
UniversalTooltip: c6b1f7ac8e9f84a02434af9ee444bbd98d1c7729
RNScreens: 34cc502acf1b916c582c60003dc3089fa01dc66d
UniversalTooltip: 31f88791cbaf2b6656420b04c87e5e56dd5a2d72
Yoga: eca980a5771bf114c41a754098cd85e6e0d90ed7

PODFILE CHECKSUM: 996465b2c3836a101655f636856922e54624a0d7
Expand Down
Loading

0 comments on commit 7a30101

Please sign in to comment.