Skip to content

Commit

Permalink
feat: add edgeToEdge prop
Browse files Browse the repository at this point in the history
  • Loading branch information
zoontek committed Nov 11, 2024
1 parent 2c2a651 commit ad825ac
Show file tree
Hide file tree
Showing 8 changed files with 55 additions and 15 deletions.
14 changes: 10 additions & 4 deletions android/src/main/java/com/lodev09/truesheet/TrueSheetDialog.kt
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,12 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
var footerHeight = 0
var maxSheetHeight: Int? = null

var edgeToEdge: Boolean = false
set(value) {
field = value
maxScreenHeight = Utils.screenHeight(reactContext, value)
}

var dismissible: Boolean = true
set(value) {
field = value
Expand All @@ -67,17 +73,17 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
}

// Update the usable sheet height
maxScreenHeight = Utils.screenHeight(reactContext)
maxScreenHeight = Utils.screenHeight(reactContext, edgeToEdge)
}

override fun getEdgeToEdgeEnabled(): Boolean {
return Utils.EDGE_TO_EDGE || super.getEdgeToEdgeEnabled()
return edgeToEdge || super.getEdgeToEdgeEnabled()
}

override fun onStart() {
super.onStart()

if (Utils.EDGE_TO_EDGE) {
if (edgeToEdge) {
window?.apply {
setFlags(
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
Expand Down Expand Up @@ -245,7 +251,7 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
override fun onKeyboardStateChange(isVisible: Boolean, visibleHeight: Int?) {
maxScreenHeight = when (isVisible) {
true -> visibleHeight ?: 0
else -> Utils.screenHeight(reactContext)
else -> Utils.screenHeight(reactContext, edgeToEdge)
}

positionFooter()
Expand Down
4 changes: 4 additions & 0 deletions android/src/main/java/com/lodev09/truesheet/TrueSheetView.kt
Original file line number Diff line number Diff line change
Expand Up @@ -240,6 +240,10 @@ class TrueSheetView(context: Context) :
}
}

fun setEdgeToEdge(edgeToEdge: Boolean) {
sheetDialog.edgeToEdge = edgeToEdge
}

fun setMaxHeight(height: Int) {
if (sheetDialog.maxSheetHeight == height) return

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,11 @@ class TrueSheetViewManager : ViewGroupManager<TrueSheetView>() {
.put(SizeChangeEvent.EVENT_NAME, MapBuilder.of("registrationName", "onSizeChange"))
.build()

@ReactProp(name = "edgeToEdge")
fun setEdgeToEdge(view: TrueSheetView, edgeToEdge: Boolean) {
view.setEdgeToEdge(edgeToEdge)
}

@ReactProp(name = "maxHeight")
fun setMaxHeight(view: TrueSheetView, height: Double) {
view.setMaxHeight(Utils.toPixel(height))
Expand Down
12 changes: 2 additions & 10 deletions android/src/main/java/com/lodev09/truesheet/core/Utils.kt
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,14 @@ import com.facebook.react.bridge.ReactContext
import com.facebook.react.uimanager.PixelUtil

object Utils {
// Detect `react-native-edge-to-edge` (https://github.com/zoontek/react-native-edge-to-edge)
val EDGE_TO_EDGE = try {
Class.forName("com.zoontek.rnedgetoedge.EdgeToEdgePackage")
true
} catch (exception: ClassNotFoundException) {
false
}

@SuppressLint("DiscouragedApi")
private fun getIdentifierHeight(context: ReactContext, name: String): Int =
context.resources.getDimensionPixelSize(
context.resources.getIdentifier(name, "dimen", "android")
).takeIf { it > 0 } ?: 0

@SuppressLint("InternalInsetResource", "DiscouragedApi")
fun screenHeight(context: ReactContext): Int {
fun screenHeight(context: ReactContext, edgeToEdge: Boolean): Int {
val windowManager = context.getSystemService(Context.WINDOW_SERVICE) as WindowManager
val displayMetrics = DisplayMetrics()

Expand All @@ -53,7 +45,7 @@ object Utils {
0
}

return if (EDGE_TO_EDGE) {
return if (edgeToEdge) {
// getRealMetrics includes navigation bar height
// windowManager.defaultDisplay.getMetrics doesn't
when (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
Expand Down
6 changes: 5 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,9 @@
"publishConfig": {
"registry": "https://registry.npmjs.org/"
},
"dependencies": {
"react-native-is-edge-to-edge": "^1.1.6"
},
"devDependencies": {
"@commitlint/config-conventional": "^19.0.3",
"@evilmartians/lefthook": "^1.6.5",
Expand Down Expand Up @@ -139,7 +142,8 @@
"prettier"
],
"globals": {
"it": false
"it": false,
"__DEV__": true
},
"rules": {
"@typescript-eslint/no-var-requires": 0,
Expand Down
9 changes: 9 additions & 0 deletions src/TrueSheet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
type NativeSyntheticEvent,
type LayoutChangeEvent,
} from 'react-native'
import { isEdgeToEdge, controlEdgeToEdgeValues } from 'react-native-is-edge-to-edge'

import type { TrueSheetProps, SizeInfo } from './TrueSheet.types'
import { TrueSheetModule } from './TrueSheetModule'
Expand All @@ -22,6 +23,8 @@ const LINKING_ERROR =
'- You rebuilt the app after installing the package\n' +
'- You are not using Expo Go\n'

const EDGE_TO_EDGE = isEdgeToEdge()

interface TrueSheetNativeViewProps extends Omit<TrueSheetProps, 'onPresent' | 'onSizeChange'> {
contentHeight?: number
footerHeight?: number
Expand Down Expand Up @@ -194,6 +197,10 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
)
}

if (__DEV__) {
controlEdgeToEdgeValues({ edgeToEdge: this.props.edgeToEdge })
}

this.updateState()
}

Expand All @@ -209,6 +216,7 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
grabber = true,
dimmed = true,
initialIndexAnimated = true,
edgeToEdge = false,
keyboardMode = 'resize',
initialIndex,
dimmedIndex,
Expand Down Expand Up @@ -236,6 +244,7 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
grabber={grabber}
dimmed={dimmed}
dimmedIndex={dimmedIndex}
edgeToEdge={EDGE_TO_EDGE || edgeToEdge}
initialIndex={initialIndex}
initialIndexAnimated={initialIndexAnimated}
keyboardMode={keyboardMode}
Expand Down
9 changes: 9 additions & 0 deletions src/TrueSheet.types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,15 @@ export interface TrueSheetProps extends ViewProps {
*/
keyboardMode?: 'resize' | 'pan'

/**
* Determines how the software keyboard will impact the layout of the sheet.
* Set to `pan` if you're working with `FlatList` with a `TextInput`.
*
* @platform android
* @default `true` is `react-native-edge-to-edge` is installed, `false` otherwise
*/
edgeToEdge?: boolean

/**
* This is called when the sheet is ready to present.
*/
Expand Down
11 changes: 11 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -3672,6 +3672,7 @@ __metadata:
react: "npm:^18.2.0"
react-native: "npm:^0.74.1"
react-native-builder-bob: "npm:^0.23.2"
react-native-is-edge-to-edge: "npm:^1.1.6"
release-it: "npm:^17.1.1"
typescript: "npm:~5.3.3"
peerDependencies:
Expand Down Expand Up @@ -18329,6 +18330,16 @@ __metadata:
languageName: node
linkType: hard

"react-native-is-edge-to-edge@npm:^1.1.6":
version: 1.1.6
resolution: "react-native-is-edge-to-edge@npm:1.1.6"
peerDependencies:
react: ">=18.2.0"
react-native: ">=0.73.0"
checksum: 10c0/5690e521e8310d21643634a8d0dacd524e19b76695f347b26f649fcac156a7a901fd6daef7f78482381a41e8445f4552f40ade13790fdf112fab15b0f54dbabd
languageName: node
linkType: hard

"react-native-maps@npm:1.14.0":
version: 1.14.0
resolution: "react-native-maps@npm:1.14.0"
Expand Down

0 comments on commit ad825ac

Please sign in to comment.