npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

d4dpocket

v0.1.8

Published

Doraemon's 4D Pocket for React Native

Downloads

39

Readme

Installation

yarn add d4dpocket

Usage

// Example
import { isIphoneX } from 'd4dpocket';

scale

Use for padding, margin, size, fontSize, borderRadius, ....

padding: scale(10)

wScale

Use for width

width: wScale(100)

hScale

Use for height

height: hScale(100)

RFValue

Use for size, fontSize

fontSize: RFValue(16)

StylePlatforms

const styles = StyleSheet.create({
  box: {
    ...StylePlatforms({
      tablet: {
        width: 20,
      },
      iPad: {
        width: 25,
        backgroundColor: 'grey',
      },
      iPhoneX: {
        width: 18,
        backgroundColor: 'grey',
      },
      base: {
        width: 15,
      },
    }),
  },
});

isIphone

if (isIphone()) {
  console.log("isIphone");
}

hasIsland

Support iPhone 14 Pro & Pro Max. View more react-native-iphone-x-helper/pull/44

if (hasIsland()) {
  console.log("hasIsland");
}

isIphoneX

if (isIphoneX()) {
  console.log("isIphoneX");
}

isTablet

if (isTablet()) {
  console.log("isTablet");
}

isNewerVersion

Compare software version

// isNewerVersion(oldVer, newVer)
isNewerVersion("1.0.1", "1.0.10"); // true

isUUID

isUUID("9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d");
// true

toVnd

Format string to Vnd

toVnd("1000000"); // 1,000,000

limitedString

Default: limitedString(string, maxLength = 9)

limitedString("Lorem Ipsum is simply dummy text of the printing and typesetting industry");
// Lorem Ipsum is simply dummy text of the printing...

formatComma

Default: formatComma(string, toFixed = 2)

formatComma("100000");
// 100,000

removeAccent

Remove accent in vietnamese

removeAccent("chấm và hỏi");
// cham va hoi

Components

Button

Inherits TouchableOpacity

<Button>Button</Button>

KeyboardSpacer

Inherits react-native-keyboard-spacer

<KeyboardSpacer />

ScrollView

Inherits ScrollView

<ScrollView>{children}</ScrollView>

ImageAspectRatio

Inherits Image

<ImageAspectRatio
  source={{ uri: 'https://exmaple.com/image.png' }}
  style={{ width: 100, height: 100 }}
/>

init.sh

Create default folders and file in project

Reset default style Text, TextInput in root/index.js

# root
#     /documents
#     /src/actions/index.js
#     /src/components/index.js
#     /src/context/index.js
#     /src/hooks/index.js
#     /src/screens
#                 /AppNavigator.js
#                 /routes.js
#     /src/icons/index.js
#     /src/store/index.js
#     /src/themes/index.js
#                /colors.js
#                /fontSize.js
#     /src/utils/index.js
#     .env

Run

bash node_modules/d4dpocket/src/scripts/init.sh

createChangeEnv.js

Generate file bash script change env

node node_modules/d4dpocket/src/scripts/createChangeEnv.js 'env' 'app_name' 'package_name'

Example

node node_modules/d4dpocket/src/scripts/createChangeEnv.js 'dev' 'ABC' 'com.abc.dev'

File change-[dev].sh generated in root project

Run

bash change-dev.sh

checkInfoPlist.sh

Check file Info.plist when release app on App Store

Run

bash node_modules/d4dpocket/src/scripts/checkInfoPlist.sh

# Do you used Camera? (y/n) y
# Do you used Photo Library? (y/n) y
# Do you used Location Always And When In Use? (y/n) y
# Results:
# +----+----------------------------------------------+
# | ❌ | NSAppleMusicUsageDescription
# |---------------------------------------------------|
# | ❌ | NSUserTrackingUsageDescription
# |---------------------------------------------------|
# | ❌ | NSCameraUsageDescription 
# |---------------------------------------------------|
# | ❌ | NSPhotoLibraryUsageDescription 
# |---------------------------------------------------|
# | ❌ | NSLocationAlwaysAndWhenInUseUsageDescription 
# +----+----------------------------------------------+

usePaging

Generate file usePaging.js in src/hooks

Run

bash node_modules/d4dpocket/src/scripts/usePaging.sh

Running the example app

  1. Run yarn in repo root
  2. Run yarn example android or yarn example ios
  3. Run yarn example start to start Metro Bundler

Contributing

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

License

MIT