Skip to content

Feat/improve examples #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jensvansteen merged 2 commits into from
Apr 8, 2026
Merged

Feat/improve examples #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1c5ef36
feat: fix app store example
jensvansteen Apr 7, 2026
610a96f
feat: updated calander example + added hard and soft edge effects
jensvansteen Apr 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 7 additions & 10 deletions android/src/main/java/com/margelo/nitro/scrolledgebar/ScrollEdgeBar.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,16 @@ package com.margelo.nitro.scrolledgebar
import android.view.View
import com.facebook.proguard.annotations.DoNotStrip
import com.facebook.react.uimanager.ThemedReactContext
import androidx.core.graphics.toColorInt

@DoNotStrip
class HybridScrollEdgeBar(val context: ThemedReactContext) : HybridScrollEdgeBarSpec() {
class HybridScrollEdgeBar(private val context: ThemedReactContext) : HybridRNScrollEdgeBarSpec() {

override val view: View = View(context)

private var _color = "#000"
override var color: String
get() = _color
set(value) {
_color = value
val color = value.toColorInt()
view.setBackgroundColor(color)
}
override var estimatedTopBarHeight: Double? = null
override var estimatedBottomBarHeight: Double? = null
override var topBarOffset: Double? = null
override var bottomBarOffset: Double? = null
override var topEdgeEffectStyle: String? = null
override var bottomEdgeEffectStyle: String? = null
}
36 changes: 34 additions & 2 deletions example/ios/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,34 @@ PODS:
- hermes-engine (0.14.0):
- hermes-engine/Pre-built (= 0.14.0)
- hermes-engine/Pre-built (0.14.0)
- LiquidGlass (0.7.1):
- boost
- DoubleConversion
- fast_float
- fmt
- glog
- hermes-engine
- RCT-Folly
- RCT-Folly/Fabric
- RCTRequired
- RCTTypeSafety
- React-Core
- React-debug
- React-Fabric
- React-featureflags
- React-graphics
- React-ImageManager
- React-jsi
- React-NativeModulesApple
- React-RCTFabric
- React-renderercss
- React-rendererdebug
- React-utils
- ReactCodegen
- ReactCommon/turbomodule/bridging
- ReactCommon/turbomodule/core
- SocketRocket
- Yoga
- NitroModules (0.33.7):
- boost
- DoubleConversion
Expand Down Expand Up @@ -2725,6 +2753,7 @@ DEPENDENCIES:
- fmt (from `../node_modules/react-native/third-party-podspecs/fmt.podspec`)
- glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
- hermes-engine (from `../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`)
- "LiquidGlass (from `../node_modules/@callstack/liquid-glass`)"
- NitroModules (from `../node_modules/react-native-nitro-modules`)
- NitroSfsymbols (from `../node_modules/react-native-nitro-sfsymbols`)
- RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
Expand Down Expand Up @@ -2825,6 +2854,8 @@ EXTERNAL SOURCES:
hermes-engine:
:podspec: "../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec"
:tag: hermes-v0.14.0
LiquidGlass:
:path: "../node_modules/@callstack/liquid-glass"
NitroModules:
:path: "../node_modules/react-native-nitro-modules"
NitroSfsymbols:
Expand Down Expand Up @@ -2988,6 +3019,7 @@ SPEC CHECKSUMS:
fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd
glog: 5683914934d5b6e4240e497e0f4a3b42d1854183
hermes-engine: 375b17d1732b179ad743a2a0c57569a0de17e767
LiquidGlass: e177e3bf641a7f4dc5fc596825b5d2b4fada4e9e
NitroModules: e8ec707a245a85cf1eb4289f91a9372f9590a897
NitroSfsymbols: 5853b2baaf1a21db8a27d18d66b8fcd7fdafdc76
RCT-Folly: 59ec0ac1f2f39672a0c6e6cecdd39383b764646f
Expand Down Expand Up @@ -3065,8 +3097,8 @@ SPEC CHECKSUMS:
RNScreens: c77cc7a5d1fbc23f0725b54e96eec81118453382
ScrollEdgeBar: 3823674d457505ae0598b99e99dfc5c70015d062
SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
Yoga: 7a9f26c70daf0b08d82ec2f862e9a8872442129e
Yoga: 6ca93c8c13f56baeec55eb608577619b17a4d64e

PODFILE CHECKSUM: 9f12b969a6ade18978b8031561752c8cfbb0aed8

COCOAPODS: 1.15.2
COCOAPODS: 1.16.2
1 change: 1 addition & 0 deletions example/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"build:ios": "react-native build-ios --mode Debug"
},
"dependencies": {
"@callstack/liquid-glass": "^0.7.1",
"@react-native-segmented-control/segmented-control": "^2.5.7",
"@react-navigation/bottom-tabs": "^7.0.0",
"@react-navigation/native": "^7.0.0",
Expand Down
124 changes: 116 additions & 8 deletions example/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,14 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { enableScreens } from 'react-native-screens';
import { ExampleMenuScreen } from './components/ExampleMenuScreen';
import { ExampleScreen } from './screens/ExampleScreen';
import { navigationByKey, titleByKey } from './data';
import { AppStoreScreen } from './screens/AppStoreScreen';
import { PullRequestsScreen } from './screens/PullRequestsScreen';
import { PrDetailScreen } from './screens/PrDetailScreen';
import { TransitionShowcaseScreen } from './screens/TransitionShowcaseScreen';
import { ToolbarScreen } from './screens/ToolbarScreen';
import { SearchBarScreen } from './screens/SearchBarScreen';
import { TabAccessoryScreen } from './screens/TabAccessoryScreen';
import { CalendarScreen } from './screens/CalendarScreen';
import type { RootStackParamList } from './types';

enableScreens();
Expand Down Expand Up @@ -47,20 +53,122 @@ export default function App() {
}}
/>
<Stack.Screen
name="Example"
component={ExampleScreen}
options={({ route }) => ({
title: titleByKey[route.params.key],
name="AppStore"
component={AppStoreScreen}
options={{
title: 'App Store Listing',
headerShadowVisible: false,
headerTransparent: true,
headerLargeTitleEnabled: false,
headerBackButtonDisplayMode: 'minimal',
headerTintColor: DynamicColorIOS({
light: 'black',
dark: 'white',
}) as string,
}}
/>
<Stack.Screen
name="PullRequests"
component={PullRequestsScreen}
options={{
title: 'Pull Requests',
headerShadowVisible: false,
headerTransparent: true,
headerLargeTitleEnabled: true,
headerBackButtonDisplayMode: 'minimal',
headerTintColor: DynamicColorIOS({
light: 'black',
dark: 'white',
}) as string,
}}
/>
<Stack.Screen
name="PrDetail"
component={PrDetailScreen}
options={{
title: 'PR Detail',
headerShadowVisible: false,
headerTransparent: true,
headerBackButtonDisplayMode: 'minimal',
headerTintColor: DynamicColorIOS({
light: 'black',
dark: 'white',
}) as string,
}}
/>
<Stack.Screen
name="TransitionShowcase"
component={TransitionShowcaseScreen}
options={{
title: 'Transition Showcase',
headerShadowVisible: false,
headerTransparent: true,
headerLargeTitleEnabled: true,
headerBackButtonDisplayMode: 'minimal',
...navigationByKey[route.params.key],
headerTintColor: DynamicColorIOS({
light: 'black',
dark: 'white',
}) as string,
})}
}}
/>
<Stack.Screen
name="Toolbar"
component={ToolbarScreen}
options={{
title: 'Toolbar',
headerShadowVisible: false,
headerTransparent: true,
headerLargeTitleEnabled: true,
headerBackButtonDisplayMode: 'minimal',
headerTintColor: DynamicColorIOS({
light: 'black',
dark: 'white',
}) as string,
}}
/>
<Stack.Screen
name="SearchBar"
component={SearchBarScreen}
options={{
title: 'Search Bar',
headerShadowVisible: false,
headerTransparent: true,
headerLargeTitleEnabled: true,
headerBackButtonDisplayMode: 'minimal',
headerTintColor: DynamicColorIOS({
light: 'black',
dark: 'white',
}) as string,
}}
/>
<Stack.Screen
name="TabAccessory"
component={TabAccessoryScreen}
options={{
title: 'Tab Accessory',
headerShadowVisible: false,
headerTransparent: true,
headerLargeTitleEnabled: true,
headerBackButtonDisplayMode: 'minimal',
headerTintColor: DynamicColorIOS({
light: 'black',
dark: 'white',
}) as string,
}}
/>
<Stack.Screen
name="Calendar"
component={CalendarScreen}
options={{
title: 'February',
headerShadowVisible: false,
headerTransparent: true,
headerBackButtonDisplayMode: 'minimal',
headerTintColor: DynamicColorIOS({
light: 'black',
dark: 'white',
}) as string,
}}
/>
</Stack.Navigator>
</NavigationContainer>
Expand Down
61 changes: 0 additions & 61 deletions example/src/components/ExampleLayout.tsx
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions example/src/components/ExampleMenuScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ export function ExampleMenuScreen({ navigation }: { navigation: any }) {
return (
<FlatList
data={exampleList}
keyExtractor={(item) => item.key}
keyExtractor={(item) => item.route}
style={styles.menuList}
contentContainerStyle={styles.menuContent}
renderItem={({ item }) => (
<Pressable
onPress={() => navigation.push('Example', { key: item.key })}
onPress={() => navigation.push(item.route)}
style={({ pressed }) => [
styles.menuItem,
pressed && styles.menuItemPressed,
Expand Down
Loading
Loading