React Native Snap Area

react-native-snap-area

Creates an area that makes the sides or specific points snappable by the child

https://github.com/marqroldan/react-native-snap-area/assets/11716376/72ff1afa-7d8f-4f5c-b94d-ffb358fe6125

Installation

npm install react-native-snap-area

Usage

import SnapArea from 'react-native-snap-area';

const snapPoints = [
  [1, 1],
  [1, 1, 1],
  [1, 1],
];
// Check out the example App.tsx file file to test it

function App() {
  return (
    <SnapArea snapPoints={snapPoints}>
      <View
        style={[
          styles.head,
          { backgroundColor: 'black' },
          childChanged ? { width: 75, height: 150 } : undefined,
        ]}
      />
    </SnapArea>
  )
}

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

.editorconfig

# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org

root = true

[*]

indent_style = space
indent_size = 2

end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

.gitattributes

*.pbxproj -text
# specific for windows script files
*.bat text eol=crlf

.gitignore

# OSX
#
.DS_Store

# XDE
.expo/

# VSCode
.vscode/
jsconfig.json

# Xcode
#
build/
*.pbxuser
!default.pbxuser
*.mode1v3
!default.mode1v3
*.mode2v3
!default.mode2v3
*.perspectivev3
!default.perspectivev3
xcuserdata
*.xccheckout
*.moved-aside
DerivedData
*.hmap
*.ipa
*.xcuserstate
project.xcworkspace

# Android/IJ
#
.classpath
.cxx
.gradle
.idea
.project
.settings
local.properties
android.iml

# Cocoapods
#
example/ios/Pods

# Ruby
example/vendor/

# node.js
#
node_modules/
npm-debug.log
yarn-debug.log
yarn-error.log

# BUCK
buck-out/
\.buckd/
android/app/libs
android/keystores/debug.keystore

# Expo
.expo/

# Turborepo
.turbo/

# generated by bob
lib/

Download details:

Author: marqroldan
Source: https://github.com/marqroldan/react-native-snap-area

License: MIT license

#react-native